open-index/open-npm huggingface dataset:
npm package: @firstandthird/mailchimp-signup
Description: Mailchimp Subscribe simple UI
Author: First+Third
Latest version: 2.1.0

# Mailchimp Signup UI ![npm](https://img.shields.io/npm/v/@firstandthird/mailchimp-signup.svg) [![Build Status](https://travis-ci.org/firstandthird/mailchimp-signup.svg?branch=master)](https://travis-ci.org/firstandthird/mailchimp-signup)

## Installation

```sh
npm install @firstandthird/mailchimp-signup
```

## Usage

### JavaScript

```js
import '@firstandthird/mailchimp-signup'
// or
import MailchimpSignup, { MailchimpSubscribeEvents as Events } from '@firstandthird/mailchimp-signup'
```

### HTML

```html
<div data-module="MailchimpSubscribe">
  <form class="form" data-action="submit" data-action-type="submit" action="[ENDPOINT]">
    <div data-name="fields" class="form-elements">
      <input type="text" name="EMAIL">
      <button type="submit">Subscribe</button>
    </div>
    <span class="hide" data-name="submitMessage"></span>
  </form>
</div>
```

## Endpoint

Endpoint is in the form:

```
//[account name].us6.list-manage.com/subscribe/post-json?u=[user id]&id=[list id]
```
npm package: @firstandthird/module-loader
Description: ui module loader
Author: First and Third
Latest version: 1.1.1

<h1 align="center">module-loader</h1>

<p align="center">
  <img src="https://img.shields.io/npm/v/@firstandthird/module-loader.svg?label=npm&style=for-the-badge" alt="NPM" />
</p>

Assists in loading modules complete with schema validation.

## Installation

```sh
npm install @firstandthird/module-loader
```

_or_

```sh
yarn add @firstandthird/module-loader
```

## Usage:

For now just look in the example directory.


---

<a href="https://firstandthird.com"><img src="https://firstandthird.com/_static/ui/images/safari-pinned-tab-62813db097.svg" height="32" width="32" align="right"></a>

_A [First + Third](https://firstandthird.com) Project_
npm package: @firstandthird/notice
Description: Notice is a library for simple notifications
Author: First+Third
Latest version: 1.0.0

# Notice

Notice is a plugin for simple notifications.

## Installation

`npm install @firstandthird/notice`

## Usage

Import notice:

```javascript
  import Notice form 'notice';

  Notice('Test Notification');
```

Import [default CSS styles](styles.css)

## Notice(message, [options])

`message` {string} - Notice text to display

List of options:

| Option      | Default                                                                         | Action                        |
|-------------|---------------------------------------------------------------------------------|-------------------------------|
| `level`     | _{string='default'}_ Options: 'default', 'info', 'success', 'warning', 'error'} | Type of alert                 |
| `timeout`   | _{number=5000}_                                                                 | Timeout before auto closing   |
| `container` | _{string&#124;Element&#124;NodeList='body'}_                                              | Container to append notice to |
| `showClose` | _{boolean=true}_                                                                | Display close button          |

```javascript
  Notice('My message', {
    level: 'info'
    timeout: 2000,
    container: document.body
    showClose: true
  });
};
```

## License

### MIT License

Copyright (c) 2016 First+Third

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
npm package: @firstandthird/on-load
Description: Add a class to an image when is loaded
Author: First+Third
Latest version: 1.0.0

# On Load

Add a class to an image when is loaded.

## Usage

```js
import OnLoad from 'on-load';
```

### OnLoad(element)

Initializes OnLoad library on element. Works both on image elements and elements with a background image.

#### Parameters

`element` _{Element, HTMLImageElement}_ - Element where `loaded` class will be added

## Example

```js
const image = new OnLoad(element);
```

## License

### MIT License

Copyright (c) 2017 First+Third

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
npm package: @firstandthird/pretty-errors
Description: Domodule Library for adding nice errors on web sites.
Author: First+Third
Latest version: 3.0.0

<h1 align="center">@firstandthird/pretty-errors</h1>

<p align="center">
  <a href="https://github.com/firstandthird/pretty-errors/actions">
    <img src="https://img.shields.io/github/workflow/status/firstandthird/pretty-errors/Test/main?label=Tests&style=for-the-badge" alt="Test Status"/>
  </a>
  <a href="https://github.com/firstandthird/pretty-errors/actions">
    <img src="https://img.shields.io/github/workflow/status/firstandthird/pretty-errors/Lint/main?label=Lint&style=for-the-badge" alt="Lint Status"/>
  </a>
  <img src="https://img.shields.io/npm/v/pretty-errors.svg?label=npm&style=for-the-badge" alt="NPM" />
</p>

Domodule Library for adding nice errors on web sites.

## Installation

```sh
npm install @firstandthird/pretty-errors
```

_or_

```sh
yarn add @firstandthird/pretty-errors
```

## Usage

Use the HTML in the example and customise to your needs.

```html
  <div
    data-module="PrettyErrors"
    data-module-title="PrettyErrors"
    data-module-event="event:error"></div>
```


---

<a href="https://firstandthird.com"><img src="https://firstandthird.com/_static/ui/images/safari-pinned-tab-62813db097.svg" height="32" width="32" align="right"></a>

_A [First + Third](https://firstandthird.com) Project_
npm package: @firstandthird/queue
Description: simple job queue
Author: First+Third
Latest version: 1.13.0

# queue [![Build Status](https://travis-ci.org/firstandthird/queue.svg?branch=master)](https://travis-ci.org/firstandthird/queue) [![Coverage Status](https://coveralls.io/repos/github/firstandthird/queue/badge.svg?branch=master)](https://coveralls.io/github/firstandthird/queue?branch=master)
npm package: @firstandthird/relative
Description: Easily animate numbers
Author: First+Third
Latest version: 1.1.0

# Relative

Relative date library

## Installation

`npm install @firstandthird/relative`

## Usage

```javascript
import relative from '@firstandthird/relative';

relative(toDate, fromDate);
// fromDate is optional, defaults to Date.now()
// returns string
```

### Example return values

- Just now
- 5 minutes ago
- 1 hour ago
- 2 days ago
- 1 week ago
- 1 month ago
- if longer than 1 month, returns short date 05/27/2013
npm package: @firstandthird/robots
Description: robots.txt text generator
Author: First+Third
Latest version: 1.0.0

## robots

A super simple robots.txt generator for javascript.

Follows the Google robots specificiation https://developers.google.com/search/reference/robots_txt

### Example Usage

```js
const robots = require('@firstandthird/robots');

const config = {
  rules: [
    {
      userAgent: ['msnbot', 'slurp'],
      disallow: ['/']
    },
    {
      userAgent: ['*'],
      disallow: ['/documentation'],
      allow: ['/documentation/public/*'] // optional
    }
  ],
  sitemap: [ // optional, must be absolute url
    'https://example.com/sitemap.xml',
    'https://example.com/sitemap-documentation.xml'
  ]
};

// output this with a web request...
const output = robots(config);
```

The robots method can also take a custom logger. Defaults to console.log

```js
const output = robots(config, (tags, data) => console.log(tags, data));
```

If you don't pass a config the default config is used which is currently:

```js
const defaults = {
  rules: [
    {
      userAgent: ['*'],
      disallow: [],
      allow: ['/']
    }
  ],
  sitemap: []
};
```
npm package: @firstandthird/sticky
Description: Sticky elements
Author: First+Third
Latest version: 2.0.0

# Sticky

Make elements sticky

## Installation

```sh
npm i @firstandthird/sticky
```

## Usage

```html
<div data-sticky
     data-sticky-offset="-100"
     data-sticky-target=".target"
     data-sticky-container=".container"
     data-sticky-match-media="(min-width: 768px)">
```

```js
import { Events, Sticky } from '@firstandthird/sticky';

new Sticky('.selector', {
  offset: -50,
  target: '.target',
  container: '.container',
  matchMedia: '(min-width: 768px)'
});

window.addEventListener(Events.Enter, (target) => {});
window.addEventListener(Events.Leave, (source) => {});
```

## Options

- data-sticky-container (defaults to parent element)
- data-sticky-offset
- data-sticky-target
- data-sticky-container
- data-sticky-match-media

## Events

- sticky:enter
- sticky:leave
npm package: @firstandthird/svg-injector
Description: Loads and caches an SVG file and injects it into the DOM
Author: First+Third
Latest version: 2.2.0

# SVG Injector ![npm](https://img.shields.io/npm/v/@firstandthird/svg-injector.svg) [![Build Status](https://travis-ci.org/firstandthird/svg-injector.svg?branch=master)](https://travis-ci.org/firstandthird/svg-injector)

Loads and caches an SVG file and injects it into the DOM.

## Installation

```sh
npm install @firstandthird/svg-injector
```

## Usage

In your project import the library:

```javascript
import { loadSVG, injectSVG } from '@firstandthird/svg-injector'
```

The `injectSVG` method will be automatically called once the `DOMContentLoaded` event is fired using `window.svgLocation` as parameter.

## Events

Custom events are fired on injection.

| Event             | Where   | When                         |
|-------------------|---------|------------------------------|
| `svgicons:loaded` | `body`  | SVG is injected into the DOM |

## API

- [loadSVG](#loadsvgurl-callback)
- [injectSVG](#injectsvgurl)

### loadSVG(url, [callback])

Loads an SVG file.

#### Parameters

`url` - {string} - A valid URL to the SVG file.

`[callback]` {function} - Callback function called once the SVG is loaded.

#### Example

```javascript
loadSVG('image.svg', (svg) => {
  console.log(svg); // prints the SVG content
});
```

### injectSVG(url)

Injects an SVG into the DOM. Calls [loadSVG](#loadsvgurl-callback).

#### Parameters

`url` - {string} - A valid URL to the SVG file. Fires a [`svgicons:loaded`](#events) event when completed.

#### Example

```javascript
injectSVG('image.svg');
```
npm package: @firstandthird/video-fit-polyfill
Description: An object-fit polyfill for videos
Author: First+Third
Latest version: 2.1.0

# Video-fit Polyfill

![npm](https://img.shields.io/npm/v/@firstandthird/video-fit-polyfill.svg)

An object-fit polyfill for videos.

## Installation

```sh
npm install @firstandthird/video-fit-polyfill
```

## Usage

For magic:

1. Import it
2. Use **fit-video** as class in all the videos you want.
3. Magic

If you prefer to use your own selector, import the function and use it as it's shown below.

```js
videoFitPolyfill('.my-custom-selector')
```

If the browser supports object-fit it won't do anything.
npm package: @firstclasspostcodes/cms
Description: We use the Sanity CMS to manage our editorial content on both the storefront, documentation and dashboard websites.
Author: Firstclasspostcodes
Latest version: 1.5.1

# CMS

We use the Sanity CMS to manage our editorial content on both the storefront, documentation and dashboard websites.

## Get Started

```
npm ci
npx sanity install
npm run develop
```

## Schema Changes

When making changes to the schema, they need to be deployed to the Sanity GraphQL endpoint:

```
npm run deploy
```
npm package: @firstclasspostcodes/metrics
Description: Provides easy integration for instrumenting code using custom CloudWatch metrics.
Author: Firstclasspostcodes
Latest version: 1.2.0

# Metrics

We use this library internally to easily integrate AWS CloudWatch Custom Metrics into our applications.

To get started:

```sh
npm i @firstclasspostcodes/metrics -s
```

Now, add a configuration file named `metrics.config.js` to the working directory. This library uses [cosmiconfig](https://www.npmjs.com/package/cosmiconfig) so name your file accordingly.

```js
module.exports = {
  // Required: this is the namespace that all custom metrics will be published with
  namespace: 'Test/Service',
  // Required: the AWS region that the metrics will be published to
  region: process.env.AWS_REGION,
  // Optional: for serverless functions, specify `manualMode` to ensure that a metric
  // flush interval is not started.
  manualMode: true,
  // Required: define the custom metrics available to the application at runtime.
  metrics: {
    // this is the key that a custom metric will be configured as
    interestingMetric: {
      // Optional: a list of dimensions for the metric
      dimensions: [
        {
          Name: 'Function',
          Value: 'normalHandler',
        },
      ],
      // Optional: define the resolution for the metric, 1-60. Defaults to 60.
      resolution: 1,
      // Required: the type of metric being recorded
      unit: 'Count/Second',
    },
    longRunningFunction: {
      dimensions: [
        {
          Name: 'Function',
          Value: 'testHandler',
        },
      ],
      resolution: 1,
      // For measured functions, use milliseconds
      unit: 'Milliseconds',
    },
  },
};
```

For any deployed AWS applications, the correct IAM permissions must be configured:

```yaml
Function:
  Type: 'AWS::Serverless::Function'
  Properties:
    # ...
    Policies:
      - CloudWatchPutMetricPolicy: {}
```

or defined explicitly:

```yaml
Statement:
  - Effect: Allow
    Action:
      - cloudwatch:PutMetricData
    Resource:
      - '*'
```

Given the configuration above, you can use the configured metrics in the following way:

```js
const metrics = require('@firstclasspostcodes/metrics');

const { longRunningFunc } = require('./example');

exports.handler = async (event) => {
  metrics.interestingMetric(event.someValue.length);

  // record the same metric with a custom dimension
  metrics.interestingMetric(event.someValue.length, [{
    countryName: 'United States',
  }])

  const data = await metrics.longRunningFunction(() => {
    // this will measure how long it takes to execute using perf_tools
    return longRunningFunc(event.someValue);
  }));

  // will log a warning to the console and ignore this
  metrics.doesNotExistMetric();

  // for lambda functions, make sure to flush metrics
  // before execution ends
  await metrics.flush();

  return data;
};
```
npm package: @firstclasspostcodes/osgb
Description: Convert to/from WGS84 and OSGB coordinate systems
Latest version: 0.0.4

# OSGB 

![](https://github.com/firstclasspostcodes/osgb/workflows/Publish%20Package/badge.svg)

This tiny JS library is used as a helper library to convert between both OSGB and WGS84 geo-cordinate systems. It provides two exported functions `toLatLng()` and `toEastingNorthing()`.

## Installation

The CLI can be installed globally, using:

```
npm i -g @firstclasspostcodes/osgb
```

## Usage

```js
const { toLatLng, toEastingNorthing } = require('@firstclasspostcodes/osgb');

const position = {
latitude: 51.5018949,
  longitude: -0.2107977,
};

const osgb = toEastingNorthing(position);

const { easting, northing } = osgb;

const wgs84 = toLatLng({ easting, northing });
```
npm package: @firstclasspostcodes/react
Description: Firstclasspostcodes component library for the React framework
Author: Firstclasspostcodes
Latest version: 1.1.0

# Firstclasspostcodes
![Build Package](https://github.com/firstclasspostcodes/firstclasspostcodes-react/workflows/Build%20Package/badge.svg) [![Cypress Dashboard](https://img.shields.io/badge/cypress-dashboard-brightgreen.svg)](https://dashboard.cypress.io/projects/5tftdm/runs)

We've designed our [React](https://reactjs.org) component library to be as flexible as possible enabling you to quickly configure build or enhance any form with postcode lookup.

## Documentation
See [@firstclasspostcodes/react](https://docs.firstclasspostcodes.com/frameworks/react) for detailed usage, guides and examples.

## Installation
Install the package with:

```
npm install @firstclasspostcodes/react -s
```

once installed, import the components inside your app file:

```js
import React from 'react';
import { PostcodeLookup } from '@firstclasspostcodes/react';

const apiKey = process.env.REACT_APP_POSTCODE_LOOKUP_KEY;

const AddressForm = () => (
  <PostcodeLookup apiKey={apiKey}>
    <fieldset>
      <PostcodeLookup.Input />
      <PostcodeLookup.Select />
    </fieldset>
    <PostcodeLookup.Address>
      <PostcodeLookup.AddressForm legend="Delivery Address" />
    </PostcodeLookup.Address>
  </PostcodeLookup>
);

export default AddressForm;
```

For more guides and information on how to configure and use the components, [read our documentation](https://docs.firstclasspostcodes.com/js/react).

## Development
The library is built off the back of `react-scripts` and we stick to the paved road.

### Getting started
Run the mock API container, this will provide some data you can develop & test with locally:

```
docker run --rm -d -p 2345:80 firstclasspostcodes/mock:latest
```

Add necessary configuration to a `.env` file:

```sh
# .env
REACT_APP_API_KEY=111111111111
REACT_APP_API_ENDPOINT=http://localhost:2345
```

For development, we run a "test app" locally, which is configured and set up in `src/index.js`. The intention of this app is to provide some visual feedback for the library and allows for experimental usage. Most importantly, it is the page used by Cypress for integration testing.

Start the development app:

```
npm start
```

### Testing
All changes to modules should be accompanied with matching tests and functional changes should have accompanying integration tests, written using Cypress.

Run the tests:

```
npm test && npm run lint
```

### Cypress
Provide necessary Cypress variables to run the testing suite:

**Headless:**

```
CYPRESS_API_URL=http://localhost:2345 CYPRESS_API_KEY=111111111111 npm run cypress
```

**Interactively:**

```
CYPRESS_API_URL=http://localhost:2345 CYPRESS_API_KEY=111111111111 npx cypress open
```
npm package: @firstclasspostcodes/sw13
Description: CSS-in-JS based theme library for the SW13 components library
Author: Firstclasspostcodes
Latest version: 0.0.129

# SW13

[![NPM](https://img.shields.io/npm/v/sw13.svg)](https://www.npmjs.com/package/@firstclasspostcodes/sw13) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) [![Build Status](https://travis-ci.org/firstclasspostcodes/sw13.svg?branch=master)](https://travis-ci.org/firstclasspostcodes/sw13) [![codecov](https://codecov.io/gh/firstclasspostcodes/sw13/branch/master/graph/badge.svg)](https://codecov.io/gh/firstclasspostcodes/sw13) [![Try sw13 on RunKit](https://badge.runkitcdn.com/@firstclasspostcodes/sw13.svg)](https://npm.runkit.com/@firstclasspostcodes/sw13)