open-index/open-npm huggingface dataset:
npm package: @politico/eslint-config-interactives
Description: Script fashion at POLITICO Interactive News
Author: Andrew Briz
Latest version: 1.0.2

![](https://www.politico.com/interactives/cdn/images/badge.svg)

# @politico/eslint-config-interactives

Script fashion at [POLITICO Interactive News](https://github.com/The-Politico).

Extends [Airbnb style](https://github.com/airbnb/javascript/), but with [a few exceptions](https://github.com/The-Politico/newsroom-coding-style#usage-amendments).

### Quickstart

1.  Install the package:
```
$ yarn add -D @politico/eslint-config-interactives eslint
```



2.  Create a `eslintrc.json` in the root of your project:
```
{
  "root": true,
  "extends": "@politico/eslint-config-interactives"
}
```


### In your editor

Interactive News developers should use a plugin in their editor to fix errors on save. For example, if you're using [atom](https://atom.io/), use [linter-eslint](https://atom.io/packages/linter-eslint).
npm package: @politico/graphics-kit
Description: [![npm version](https://badge.fury.io/js/%40politico%2Fgraphics-kit.svg)](https://badge.fury.io/js/%40politico%2Fgraphics-kit)
Author: Jon McClure
Latest version: 1.0.3

![](https://www.politico.com/interactives/cdn/images/badge.svg)

# @politico/graphics-kit

[![npm version](https://badge.fury.io/js/%40politico%2Fgraphics-kit.svg)](https://badge.fury.io/js/%40politico%2Fgraphics-kit)

### Install

```
$ yarn add @politico/graphics-kit
```

### Use

```javascript
import { BaseChart, d3 } from '@politico/graphics-kit';

class MyChart extends BaseChart {
  defaultProps = {
    stroke: '#ccc',
  }

  defaultData = [60, 40, 20]

  draw() {
    const data = this.data();
    const props = this.props();
    const node = this.selection().node();

    d3.select(node).appendSelect('svg');
    // ...
  }
}
```

### Snippets

Includes [Atom snippets](https://flight-manual.atom.io/using-atom/sections/snippets/) to shortcut building your chart.

- [Chart component](snippets/ChartComponent.cson) demonstrates how to use the base chart component.
- [Chart container](snippets/ChartContainer.cson) imports your chart component into a React container component, with resize and higher-level state hooks.
npm package: @politico/hermes
Description: _The herald of the POLITICO newsroom_
Latest version: 2.4.8

# <img src="./brand/logo.png" width="50"/> Hermes

_The herald of the POLITICO newsroom_

## Why This?

The AWS-SDK has a great set of tools for uploading and removing files form S3. Hermes is an opinionated library built on top of that to make publishing easier for those projects that follow our configurations.

## Basic Usage

Install the library

```
$ npm i @politico/hermes
```

Import and run in node script in your bin scripts.

```javascript
/* bin/publish.js */
import * as hermes from '@politico/hermes';

await hermes.publish(sourceDirectory, destinationKey, { ...options });
```

Run the bin script:

```
$ node bin/publish.js
```

## Advanced Usage (Clients)

Another major offer of hermes is our clients systems. Hermes offers the following clients:

```javascript
import * as hermes from '@politico/hermes';

const s3 = await hermes.clients.aws.s3();
await s3.upload({
  ...options,
});
```

Each client also comes with a `.client` property which allows access to the base client instance for custom calls.

### Client Offerings

Our client offerings are:

- AWS DynamoDB (`aws.ddb`)
  - batchGetDocuments
  - query
  - scan
  - Document Functions (`client.document.X`)
    - delete
    - get
    - getFromIndex
    - put
    - update
- AWS S3 (`aws.s3`)
  - copy
  - delete
  - download
  - etag
  - exists
  - head
  - list
  - upload
- AWS Secrets Manager (`aws.secrets`)
  - getJSONSecret
- AWS Systems Manager (Paramter Store) (`aws.ssm`)
  - getParameters
- AWS Security Token Serve (`aws.sts`)
  - assumeConfiguredRole
  - getCallerIdentity
- Brightspot (`bsp`)
  - Embed Functions (`client.embed.X`)
    - get
    - create
    - update
  - Article Functions (`client.article.X`)
    - get
    - list
- Cloudflare (`cloudflare`)
  - purge
- DOMO (`domo`)
  - Auth Functions (`client.auth.X`)
    - token
  - query
- Notion (`notion`)
  - getPageBlocks
  - writeHeadingToPage
  - writeToPage
- Slack (`slack`)
  - _only returns base client for now._

_Icon in logo courtesy of: Hermés by IconMark from NounProject.com_

©2022 POLITICO
npm package: @politico/interactive-style-elections
Description: Component library for election pages.
Latest version: 1.4.6

![](https://www.politico.com/interactives/cdn/images/badge.svg)

# @politico/interactive-style-elections

Component library for election pages.

## Quick Start

Installation:

```
$ yarn add @politico/interactive-style-elections
```

Import only what you need:
```javascript
import { Logo } from '@politico/interactive-style-elections';
```

Use it in your component:
```javascript
import React from 'react';

const MyComponent = () => (
  <Logo />
);

export default MyComponent;
```

## Headshots
Need to add a new headshot to the `Headshot` component?

Make sure you've added the candidate to the [democratic candidates loader](https://github.com/The-Politico/loader_elex2020-dem-candidates).

Create a `.png` file at `72ppi` and at least `600px` wide with an aspect ratio of `1:1.1`.

Name the file the same as the generated slug of the candidate. These slugs are generated by combining the first and last name of the candidate with dashes (`-`). If they have a nickname, combine their nickname and last name the same way.

Put this file in the [headshots](headshots) folder.

Run the command to process and upload your headshot:

```
$ yarn build-headshots
```

## Development

Clone Repo:
```
$ git clone https://github.com/The-Politico/politico-interactive-style-elections
```

Install dependencies:
```
$ yarn
```

Start development server:
```
$ yarn start
```

Build assets:
```
$ yarn build
```

Publish changes:
```
$ yarn publish
```
npm package: @politico/interactive-style-material
Description: Components to add a POLITICO flare to [Material UI](https://material-ui.com/getting-started/installation/).
Latest version: 0.0.4

![](https://www.politico.com/interactives/cdn/images/badge.svg)

# @politico/module_material

Components to add a POLITICO flare to [Material UI](https://material-ui.com/getting-started/installation/).

## Quick Start

Installation:

```
$ yarn add https://github.com/The-Politico/module_material
```

Import only what you need:

```javascript
import { ThemeProvider } from '@politico/interactive-style-material';
```

Use it in your component:

```javascript
import { ThemeProvider } from '@politico/interactive-style-material';
import Button from '@material-ui/core/Button';

const MyComponent = () => (
  <ThemeProvider>
    <Button color='primary'>Primary</Button>
    <Button color='secondary'>Secondary</Button>
  </ThemeProvider>
)
```

## Development

Clone Repo:

```
$ git clone https://github.com/The-Politico/module_material
```

Install dependencies:

```
$ yarn
```

Start development server:

```
$ yarn start
```

Build assets:

```
$ yarn build
```

Publish:

```
$ git commit -m 'build message'.
$ git push origin master
```


©2019 POLITICO
npm package: @politico/interactive-style-sketch
Description: Component library for internal app pages.
Latest version: 1.1.4

![](https://www.politico.com/interactives/cdn/images/badge.svg)

# @politico/interactive-style-sketch

Component library for internal app pages.

## Quick Start

Installation:

```
$ yarn add @politico/interactive-style-sketch
```

Import only what you need:
```javascript
import { Text } from '@politico/interactive-style-sketch';
```

Use it in your component:
```javascript
import React from 'react';

const MyComponent = () => (
  <Text />
);

export default MyComponent;
```


## Development

Clone Repo:
```
$ git clone https://github.com/The-Politico/politico-interactive-style-sketch
```

Install dependencies:
```
$ yarn
```

Start development server:
```
$ yarn start
```

Build assets:
```
$ yarn build
```
npm package: @politico/interactive-templates
Description: Templating engine for generating codebases.
Latest version: 1.5.0

![POLITICO](https://www.politico.com/interactives/cdn/images/badge.svg)

# @politico/interactive-templates

Easy-bake templates from existing projects, stored on GitHub.

## Why this?

At POLITICO, we're always looking for projects we can replicate.

You might have used [Yeoman](https://yeoman.io/), npm scripts or something else in the past to help create the boilerplate code similar projects start from. [We](https://github.com/The-Politico/generator-politico-django) [have](https://github.com/The-Politico/generator-politico-graphics), [too](https://github.com/The-Politico/generator-politico-interactives). These are powerful templating tools, but in some cases they're overkill, and the overhead of building generators means only a few members of our team usually create them.

POLITICO interactive templates, or PIT, is designed to make creating templates easy for anyone. It also fits seamlessly in our GitHub-based workflow.

With PIT, anyone can easily create a reusable codebase and a simple interface for jump-starting new projects from old ones. PIT let's us quickly create templates at exactly the point where reuse makes sense. It's a Goldilocks tool for easy replication on our team.

## How it works

PIT is a local CLI tool for scaffolding a new project directory from a template hosted on GitHub.

You can turn any existing project hosted on GitHub into a PIT template by simply adding a `.pitrc` configuration file.

Once a project is templatized, you register it with your PIT CLI and start using it.

You can customize the CLI for any project by adding [Inquire.js](https://github.com/SBoudrias/Inquirer.js/) prompts and then use your user's answers to those questions to customize template files with [EJS](https://ejs.co/) template rendering.

Because your templates are always pulled down from GitHub, you can be sure your users always have the latest version whenever they start a new project.


## Quick start

1. Export a GitHub personal access with the `repo` scope token as `GITHUB_TOKEN`. You can learn more about acquiring a GitHub access token [here](https://help.github.com/en/articles/creating-a-personal-access-token-for-the-command-line).

  ```
  $ export GITHUB_TOKEN = [PERSONAL_ACCESS_TOKEN_HERE]
  ```

2. Install:

  ```
  $ npm install -g @politico/interactive-templates
  ```

3. Register a [PIT-configured template](docs/templates.md) hosted on GitHub by using the HTTPS URL for the repo:

  ```
  $ pit register GIT_URL_HERE
  ```

4. To start a new project, make an empty directory:

  ```
  $ mkdir MY_PROJECT_NAME
  $ cd MY_PROJECT_NAME
  ```

5. Then run PIT's new project command:

  ```
  $ pit new
  ```

6. Select your project template, answer any prompts and then BUILD! 🚀



## Read more
- [Creating new PIT templates](docs/templates.md)
- [.pitrc file specification](docs/pitrc.md)
- [Developing this app](docs/developing.md)
npm package: @politico/markdown-react-loader
Description: Webpack loader, loads markdown files as React components
Latest version: 0.0.3

![POLITICO](https://rawgithub.com/The-Politico/src/master/images/logo/badge.png)

# @politico/markdown-react-loader

Loads markdown files for use as React components.

### Install

```
$ yarn add -D @politico/markdown-react-loader react-markdown
```

### Use

Add to your Webpack config.

```javascript
module.exports = {
  module: {
    loaders: [
      {
        test: /\.md$/,
        loader: '@politico/markdown-react-loader'
      }
    ]
  }
}
```

Import and use markdown files.

```javascript
import Text from 'text.md';

const MyComponent = () => (
  <div>
    <Text />
  </div>
);
```

You can pass any valid props that you would otherwise pass to [react-markdown](https://github.com/rexxars/react-markdown#options).

```javascript
<Text linkTarget='_blank' />
```

The loader also preprocesses the text of your markdown files through [mustache.js](https://github.com/janl/mustache.js), so you can also pass a context object to your component and add mustache's [templating syntax](http://mustache.github.io/mustache.5.html) to make your markdown even more powerful.

```markdown
This is my **{{ mood }}** markdown file.
```

```javascript
<Text context={{ mood: 'AWESOME' }} />
```

### Test

```
$ yarn start
```

### Development

Make it better, then:

```
$ npm publish --access public
```
npm package: @politico/vue-accessible-selects
Description: [![npm version](https://badge.fury.io/js/@politico%2Fvue-accessible-selects.svg)](https://badge.fury.io/js/@politico%2Fvue-accessible-selects)
Latest version: 3.2.2

# vue-accessible-selects

[![npm version](https://badge.fury.io/js/@politico%2Fvue-accessible-selects.svg)](https://badge.fury.io/js/@politico%2Fvue-accessible-selects)

**Description:** Select & Multi Select implementations for Vue, focused especially on implementing accessibility best practices
- **Technology stack:** Vue 3, Typescript, Vite
- **Demo:** [vue-accessible-selects.netlify.app/](vue-accessible-selects.netlify.app/)


## Installation

```shell
npm i @politico/vue-accessible-selects
```

## Usage
```javascript

import { SelectSingle, SelectMulti } from '@politico/vue-accessible-selects'

const sampleOptions = [{
	label: 'One Option',
	value: 'one_option'
}, {
	label: 'Another Option',
	value: 'another_option'
}]

export default {
	components: { SelectSingle, SelectMulti },
	data() {
		return {
			sampleOptions,
			selectSingleValue: {},
			selectMultiValues: []
		}
	},
}

```

```html
<SelectSingle
	v-model="selectSingleValue"
	:options="sampleOptions"
	label="My Single Select"
	:labelIsVisible="true"
/>

<SelectMulti
	v-model="selectMultiValues"
	:options="sampleOptions"
	label="My Multiple Select"
	:labelIsVisible="true"
	placeholder="Default Text to Display"
/>
```

### Custom Styling

Most-commonly externally-referenced classes:

* `.combo-input`
* `.combo-menu`

## References

- Guiding blogpost: https://www.24a11y.com/2019/select-your-poison-part-2/
- Codepen from above blogpost: https://codepen.io/smhigley/pen/gObMVzv
	- #1 ≈ SelectSingle
	- #3 ≈ SelectMulti
- Select single implementation: https://github.com/microsoft/sonder-ui/tree/master/src/components/select
- Select multiple implementation: https://github.com/microsoft/sonder-ui/tree/master/src/components/multiselect

## WARNING! node-sass deprecated
To compile scss code you must use dart `sass` package  as it uses `sass:math` module for divisions instead of slash https://sass-lang.com/documentation/breaking-changes/slash-div

`node-sass` is deprecated
```scss
// In any .scss file
// Simple, use default styles provided by lib
// Require `NodePackageImporter` importer for importing this way
// https://sass-lang.com/documentation/js-api/classes/nodepackageimporter/
@use 'pkg:@politico/vue-accessible-selects/styles' as *;

@include selects();
@include select-single();
@include select-multi();
```

for more detailed implementations, checkout the docs site
npm package: @politie/angular-testcafe-builder
Description: Angular builder for Testcafe
Author: Tim Nederhoff
Latest version: 2.0.5
Deprecated: Angular Testcafe has graduated and is now officially supported by the Testcafe team. This package (angular-testcafe-builder) is DEPRECATED, please upgrade to the angular-testcafe package.

# angular-testcafe [![Build Status](https://travis-ci.org/politie/angular-testcafe.svg?branch=master)](https://travis-ci.org/politie/angular-testcafe)
A custom Angular builder for [TestCafe](http://devexpress.github.io/testcafe/).
Serves the Angular application, and then runs the TestCafe tests.

## Install
```bash
$ npm install --save-dev @politie/angular-testcafe-builder
```

## Use in angular.json
```json
{
  "projects": {
    "my-project-e2e": {
      "architect": {
        "e2e": {
          "builder": "@politie/angular-testcafe-builder:testcafe",
          "options": {
            "browsers": [
              "chrome --no-sandbox",
              "firefox"
            ],
            "src": ["e2e/*.e2e-spec.ts"],
            "reporters": [
              {
                "name": "html",
                "output": "path/to/my/report.html"
              },
              {
                "name": "spec"
              }
            ]
          }
        }
      }
    }
  }
}
```
> NOTE: check [schema.json](src/testcafe/schema.json) for a list of all options

A tutorial how to use Angular and Testcafe combined with this builder can be found [here](https://medium.com/test-automation-pro/testcafe-tests-in-an-angular-project-e1d1ccc6e1cb)

## build
```bash
$ npm run build
```

## pack
```bash
$ npm pack
```

## NOT Implemented (TODO):
* remote browsers
* QR code
* video
* ssl
* clientScripts