open-index/open-npm huggingface dataset:
npm package: @financial-times/eslint-config-next
Description: Shared ESLint configuration for Next projects
Latest version: 7.1.0

# eslint-config-next [![CircleCI](https://circleci.com/gh/Financial-Times/eslint-config-next.svg?style=svg&circle-token=9c352d2fac5fe7e9eb3232c48d8600eea057f6bb)](https://github.com/Financial-Times/eslint-config-next)

ESLint configuration for Next projects

## Usage

Reference the shared configuration in your repository's own `.eslintrc.js` like so:

```js
module.exports = {
	extends: ['@financial-times/eslint-config-next']
}
```

Avoid using `.eslintrc` file format since [it has been depracated.](https://eslint.org/docs/user-guide/configuring#configuration-file-formats-1)

You can find the docs for ESLint shareable configs [here](https://eslint.org/docs/developer-guide/shareable-configs).

## Related

This shared config is being used by [n-gage](https://github.com/Financial-Times/n-gage).
npm package: @financial-times/feature-policy-header
Description: An [Express] middleware for adding a [FeaturePolicy] header to web traffic. Exposes a single function, `init`, which decorates a `response` object with a `Feature-Policy` header.
Latest version: 0.6.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Feature Policy Header

An [Express] middleware for adding a [FeaturePolicy] header to web traffic. Exposes a single function, `init`, which decorates a `response` object with a `Feature-Policy` header. 

## Usage

This module is compatible with Node 16+ and is distributed on npm.

```
npm install --save @financial-times/feature-policy-header
```

After installing the module you can initialise it in your app's server file. This should be done before any routes are declared which will require the middleware.

```diff
+ const featurePolicy = require('@financial-times/feature-policy-header');

app.use(
+  featurePolicy.init()
)
```

Run your app and check in the Network tab to confirm that the expected headers have been set. 

## Restricted Features

The restricted features can be found in `src/restricted-features.json`. Each feature relates to a browser API which we want to disallow on our user-facing pages. Any attempt to access a restricted API will throw a console error. 

The full list of compatible features is listed on https://featurepolicy.info/. 

## Report-To Header

The [Report-To] header is required to integrate with our [Report URI] account and dashboards. The Cyber Security team use Report URI to collect reports relating to security headers, such as `Feature-Policy`, to gain visibility on their use, monitor trends and detect problems.

[Express]: https://expressjs.com/
[FeaturePolicy]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy
[Report URI]: https://docs.report-uri.com/
[Report-To]: https://docs.report-uri.com/setup/reporting-api/
npm package: @financial-times/flags-cookie
Description: A utility for interacting with the flags cookies.
Author: Alex Wilson
Latest version: 1.0.0

# Flags Cookie

[![Financial-Times](https://circleci.com/gh/financial-times/flags-cookie.svg?style=svg)](https://app.circleci.com/pipelines/github/Financial-Times/flags-cookie)

A library for handling Flags Cookies.

This library does *not* currently handle parsing and setting cookies, and can be consumed both client-side
([using `cookies.get`](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/cookies/get)) and server-side.


## Example

### Code Example

```javascript
import FlagsCookie from '@financial-times/flags-cookie'

const flags = new FlagsCookie('test:true')
console.log(flags.get('test')) // => 'true'
```

### Example Cookie

```
Cookie: Flags=test1:true,test2:variantA
```
npm package: @financial-times/flourish-receive-custom-analytics
Description: Subscribes to click events analytics data from custom Flourish template iframe
Author: Emma Lewis
Latest version: 1.2.1

# Flourish receive custom analytics

This is a small package which subscribes to messages from a child custom Flourish template iframe.

## Example usage

```
import customFlourishAnalytics from 'flourish-receive-custom-analytics';

const cb = (data) => {
    // Do something with the data
}

customFlourishAnalytics.init(cb);
```
npm package: @financial-times/flourish-send-custom-analytics
Description: Sends click events to the parent window from a custom flourish template
Author: Emma Lewis
Latest version: 2.2.3

# Flourish send custom analytics

This is a small helper package designed to send spoor analytics from a custom Flourish template to a parent ft.com / ig.ft.com / app window.

## Example usage

The following code will initiate cta click events for <a> tags, <button> tags and <input> tags. You'll want to add a data-trackable attribute (a unique, kebab-cased string) to elements of interest to make it easier to identify them.

```
import tracking from '@financial-times/flourish-send-custom-analytics';

tracking.init();
```

If you'd like to add extra contextual information you can add a data attribute called "data-custom" to your html tag. This should be a JSON stringified array of up to three objects with the properties 'name' and 'value'. For example, in React/JSX:

```
<button id="button" data-trackable="button" data-custom={JSON.stringify([{'name': 'contextual_information_name', 'value': 'contextual_information_value}])}>My button</button>
```

This package also helps you to track custom events, using a function called `sendSpoorEvent`. This will send a 'component act' event to Amplitude. The function takes two arguments: `triggerAction` which is a kebab-case string describing the action that caused the event ("dropdown-change", "video-ended" etc), and `extraDetail` which is an array of up to three objects with the properties 'name' and 'value'. For example, in React/JSX: 

```
import React, { useState } from 'react';
import tracking from '@financial-times/flourish-send-custom-analytics';

const Dropdown = () => {
  const [dropdownState, setDropDownState] = useState('a');
  return (
    <select
      value={dropdownState}
      onChange={(e) => {
        setDropDownState(e.target.value);
        tracking.sendSpoorEvent('dropdown-change', [{'name': 'dropdown-select', 'value': e.target.value}]);
      }}
    >
      <option value="a">A</option>
      <option value="b">B</option>
    </select>
  );
};

export default Dropdown;

```
npm package: @financial-times/ft-date-format
Description: Utility for formatting and updating dates for Financial-Times customer-facing products
Latest version: 4.0.0

# ft-date-format

ft-date-format provides javascript utilities for formatting and updating dates in FT style.

  - [Usage](#usage)
    - [JavaScript](#javascript)
  - [Migration Guide](#migration-guide)
  - [Contact](#contact)
  - [Licence](#licence)

## Usage

### JavaScript

#### ft-date-format#format(date, tpl)

Returns a date formatted as a string

  * `date`: A javascript `Date` object or a valid string to pass to the `Date` constructor
  * `tpl`: A string specifying what format to output the date in:
    - `'datetime'`: formats the date in the standard FT long format, including the time. E.g. `May 15, 2014 8:10 am`
    - `'date'`: formats the date in the standard FT long format. E.g. `May 15, 2014`
    - Any other string using [widespread conventions](http://docs.oracle.com/javase/7/docs/api/java/text/SimpleDateFormat.html) for time/date placeholders, which will be replaced with values extracted from the date provided. See `./main.js` for an up to date list of supported formats. To avoid e.g. the `mm` in `common` being replaced with the month prefix with a double backslash `co\\mmon` i.e. *In most cases custom date formats should not be used, in favour of the standard FT date and datetime formats*

#### ft-date-format#timeAgo(date)

Returns the relative time since the given date, formatted as a human readable string e.g. `13 minutes ago`.

#### ft-date-format#ftTime(date)

Returns relative time or timestamp for a given date, in accordance with FT date formatting conventions.

  * `date`: A javascript `Date` object or a valid string to pass to the `Date` constructor

#### ft-date-format#asTodayOrYesterdayOrNothing(date)

Returns `'yesterday'`, `'today'` or `''` for a given date. You can request this formatting for `ft-date-format` components by adding `data-ft-date-format-format="today-or-yesterday-or-nothing"`.

  * `date`: A javascript `Date` object or a valid string to pass to the `Date` constructor

***

## Migration Guide

State | Major Version | Last Minor Release | Migration guide |
:---: | :---: | :---: | :---:
✨ active | 2 | N/A | [migrate to v2](MIGRATION.md#migrating-from-v1-to-v2) |
⚠ maintained | 1 | 1.0.5 | - |

***

## Contact

If you have any questions, comments, or need help using ft-date-format, please either [raise an issue](https://github.com/Financial-Times/ft-date-format/issues), visit [#ft-origami](https://financialtimes.slack.com/messages/ft-origami/) or email [Origami Support](mailto:origami-support@ft.com).

***

## Licence

This software is published by the Financial Times under the [MIT licence](http://opensource.org/licenses/MIT).