open-index/open-npm huggingface dataset:
npm package: @not-govuk/label
Description: A label for a form field.
Author: Daniel A.C. Martin
Latest version: 0.17.4

NotGovUK - Label
================

A label for a form field.


Using this package
------------------

First install the package into your project:

```shell
npm install -S @not-govuk/label
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import Label from '@not-govuk/label';

export const MyComponent = props => (
  <Label htmlFor="my-field">My label</Label>
  <input type="text" id="my-field" name="my-field" />
);

export default MyComponent;
```


Working on this package
-----------------------

Before working on this package you must install its dependencies using
the following command:

```shell
pnpm install
```


### Testing

Run the unit tests.

```shell
npm test
```


### Building

Build the package by compiling the TypeScript source code.

```shell
npm run build
```


### Clean-up

Remove any previously built files.

```shell
npm run clean
```
npm package: @not-govuk/link
Description: A drop-in replacement for the 'a' element with GovUK styling.
Author: Daniel A.C. Martin
Latest version: 0.17.4

NotGovUK - Link
================

A drop-in replacement for the 'a' element with GovUK styling.


Using this package
------------------

First install the package into your project:

```shell
npm install -S @not-govuk/link
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import { A } from '@not-govuk/link';

export const MyComponent = props => (
  <A href="#">My link</A>
);

export default MyComponent;
```


Working on this package
-----------------------

Before working on this package you must install its dependencies using
the following command:

```shell
pnpm install
```


### Testing

```shell
npm test
```


### Building

```shell
npm run build
```


### Clean-up

```shell
npm run clean
```
npm package: @not-govuk/memoize
Description: Higher-order functions for memoizing pure functions.
Author: Daniel A.C. Martin
Latest version: 0.16.3
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

NotGovUK - Memoize
==================

Higher-order functions for memoizing pure functions.

[Memoization] is a crude optimisation whereby the results of a function
are store in memory. It only works for functions that offer
[referential transparency], meaning that they return the same value for
the same input.

**Note:** Currently, only single-parameter functions are supported.


Using this package
------------------

First install the package into your project:

```shell
npm install -S @not-govuk/memoize
```

Then use it in your code as follows:

```js
import memoize from '@not-govuk/memoize';

const myPureFunction = str => str.length;

const memoizedFn = memoize(myPureFunction);

memoizedFn('foo'); // 3
```


Working on this package
-----------------------

Before working on this package you must install its dependencies using
the following command:

```shell
pnpm install
```


### Building

```shell
npm run build
```


### Clean-up

```shell
npm run clean
```


[Memoization]: https://en.wikipedia.org/wiki/Memoization
[referential transparency]: https://en.wikipedia.org/wiki/Referential_transparency
npm package: @not-govuk/navigation-menu
Description: A component that provides users with a list of pages to choose from.
Author: Daniel A.C. Martin
Latest version: 0.17.4

NotGovUK - Navigation Menu
==========================

A component that provides users with a list of pages to choose from.


Using this package
------------------

First install the package into your project:

```shell
npm install -S @not-govuk/navigation-menu
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import NavigationMenu from '@not-govuk/navigation-menu';

export const MyComponent = props => (
  <NavigationMenu items={[
    { href: '/', text: 'Inactive 1' },
    { href: '#main-content', text: 'Active' },
    { href: '/#main-content', text: 'Inactive 2' }
  ]} />
);

export default MyComponent;
```


Working on this package
-----------------------

Before working on this package you must install its dependencies using
the following command:

```shell
pnpm install
```


### Testing

```shell
npm test
```


### Building

```shell
npm run build
```


### Clean-up

```shell
npm run clean
```
npm package: @not-govuk/notification-banner
Description: A component to tell the user about something they need to know about, but that’s not directly related to the page content.
Author: Daniel A.C. Martin
Latest version: 0.17.4

NotGovUK - Notification Banner
==============================

A component to tell the user about something they need to know about, but that’s not directly related to the page content.


Using this package
------------------

First install the package into your project:

```shell
npm install -S @not-govuk/notification-banner
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import NotificationBanner from '@not-govuk/notification-banner';

export const MyComponent = props => (
  <NotificationBanner>
    <p class="govuk-notification-banner__heading">
      You have 7 days left to send your application.
      <a class="govuk-notification-banner__link" href="#">View application</a>.
    </p>
  </NotificationBanner>
);

export default MyComponent;
```


Working on this package
-----------------------

Before working on this package you must install its dependencies using
the following command:

```shell
pnpm install
```


### Testing

Run the unit tests.

```shell
npm test
```


### Building

Build the package by compiling the TypeScript source code.

```shell
npm run build
```


### Clean-up

Remove any previously built files.

```shell
npm run clean
```
npm package: @not-govuk/pagination
Description: A component to help users navigate forwards and backwards through a series of pages.
Author: Daniel A.C. Martin
Latest version: 0.17.4

NotGovUK - Pagination
=====================

A component to help users navigate forwards and backwards through a series of pages.


Using this package
------------------

First install the package into your project:

```shell
npm install -S @not-govuk/pagination
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import Pagination from '@not-govuk/pagination';

export const MyComponent = props => (
  <Pagination
    currentPage={4}
    links={['#', '#', '#']}
  />
);

export default MyComponent;
```


Working on this package
-----------------------

Before working on this package you must install its dependencies using
the following command:

```shell
pnpm install
```


### Testing

Run the unit tests.

```shell
npm test
```


### Building

Build the package by compiling the TypeScript source code.

```shell
npm run build
```


### Clean-up

Remove any previously built files.

```shell
npm run clean
```
npm package: @not-govuk/panel
Description: A visible container used on confirmation or results pages to highlight important content.
Author: Daniel A.C. Martin
Latest version: 0.17.4

Panel
=====

A visible container used on confirmation or results pages to highlight important content.


Using this package
------------------

First install the package into your project:

```shell
npm install -S @not-govuk/panel
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import Panel from '@not-govuk/panel';

export const MyComponent = props => (
  <Panel
    classModifiers="confirmation"
    title="Application complete"
  >
    Your reference number<br />
    <strong>HDJ2123F</strong>
  </Panel>
);

export default MyComponent;
```


Working on this package
-----------------------

Before working on this package you must install its dependencies using
the following command:

```shell
pnpm install
```


### Testing

```shell
npm test
```


### Building

```shell
npm run build
```


### Clean-up

```shell
npm run clean
```
npm package: @not-govuk/phase-banner
Description: A component to show users your service is still being worked on.
Author: Daniel A.C. Martin
Latest version: 0.17.4

NotGovUK - Phase Banner
=======================

The [GDS Phase banner component].

Use the phase banner component to show users your service is still being worked on.


Using this package
------------------

First install the package into your project:

```shell
npm install -S @not-govuk/phase-banner
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import PhaseBanner from '@not-govuk/phase-banner';

export const MyComponent = props => (
  <PhaseBanner phase="alpha">This is a new service – your <a href="#">feedback</a> will help us to improve it.</PhaseBanner>
);

export default MyComponent;
```


Working on this package
-----------------------

Before working on this package you must install its dependencies using
the following command:

```shell
pnpm install
```


### Testing

```shell
npm test
```


### Building

```shell
npm run build
```


### Clean-up

```shell
npm run clean
```


[GDS Phase banner component]: https://design-system.service.gov.uk/components/phase-banner/
npm package: @not-govuk/plop-pack
Description: Plop pack with misc tools.
Author: Daniel A.C. Martin
Latest version: 0.17.4

NotGovUK - Plop Pack
====================

Plop pack with misc tools.


Using this package
------------------

First install the package into your project:

```shell
npm install -D @not-govuk/plop-pack
```

Then use it in your `plopfile.js` as follows:

```js
module.exports = plop => {
  plop.load('@not-govuk/plop-pack');

  // ...
}
```


Working on this package
-----------------------

Before working on this package you must install its dependencies using
the following command:

```shell
pnpm install
```


### Testing

```shell
npm test
```
npm package: @not-govuk/plop-pack-internal
Description: Plop pack with misc tools.
Author: Daniel A.C. Martin
Latest version: 0.16.3
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

NotGovUK - Plop Pack
====================

Plop pack with misc tools.


Using this package
------------------

First install the package into your project:

```shell
npm install -D @not-govuk/plop-pack
```

Then use it in your `plopfile.js` as follows:

```js
module.exports = plop => {
  plop.load('@not-govuk/plop-pack');

  // ...
}
```


Working on this package
-----------------------

Before working on this package you must install its dependencies using
the following command:

```shell
pnpm install
```


### Testing

```shell
npm test
```
npm package: @not-govuk/radios
Description: A component to allow users to choose between a small selection of options.
Author: Daniel A.C. Martin
Latest version: 0.17.4

Not Govuk - Radios
==================

A component to allow users to choose between a small selection of options.


Using this package
------------------

First install the package into your project:

```shell
npm install -S @not-govuk/radios
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import Radios from '@not-govuk/radios';

export const MyComponent = props => (
  <Radios
    // WRITEME
  />
);

export default MyComponent;
```


Working on this package
-----------------------

Before working on this package you must install its dependencies using
the following command:

```shell
pnpm install
```


### Testing

Run the unit tests.

```shell
npm test
```


### Building

Build the package by compiling the TypeScript source code.

```shell
npm run build
```


### Clean-up

Remove any previously built files.

```shell
npm run clean
```
npm package: @not-govuk/restify
Description: A customised Restify server for running websites.
Author: Daniel A.C. Martin
Latest version: 0.16.3
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

Not Govuk - Restify
===================

A customised Restify server for running websites.


Using this package
------------------

First install the package into your project:

```shell
npm install -S @not-govuk/restify
```

Then use it in your code as follows:

```js
const restify = require('@not-govuk/restify');

const httpd = restify.createServer();

httpd.get('/', (req, res, next) => {
  res.send('<html><body>Hello world.</body></html>');
  next();
});

httpd.listen(8080, '0.0.0.0', () => {
  httpd.log.info('%s listening at %s', httpd.name, httpd.url);
});
```


Working on this package
-----------------------

Before working on this package you must install its dependencies using
the following command:

```shell
pnpm install
```


### Building

```shell
npm run build
```


### Clean-up

```shell
npm run clean
```
npm package: @not-govuk/route-utils
Description: Utility functions for components relating to routes and requests.
Author: Daniel A.C. Martin
Latest version: 0.14.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

Not Govuk - Route Utils
=======================

Utility functions for components relating to routes and requests.


Using this package
------------------

First install the package into your project:

```shell
npm install -S @not-govuk/route-utils
```

Then use it in your code as follows:

```js
import routeUtils from '@not-govuk/route-utils';

// WRITEME

```


Working on this package
-----------------------

Before working on this package you must install its dependencies using
the following command:

```shell
pnpm install
```


### Building

```shell
npm run build
```


### Clean-up

```shell
npm run clean
```
npm package: @not-govuk/router
Description: An abstraction layer over the routers from react-router and Next.js.
Author: Daniel A.C. Martin
Latest version: 0.16.3
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

NotGovUK - Router
=================

An abstraction layer over the routers from react-router and Next.js.


Using this package
------------------

First install the package into your project:

```shell
npm install -S @not-govuk/router
```

Then use it in your code as follows:

```js
import router from '@not-govuk/router';

// WRITEME

```


Working on this package
-----------------------

Before working on this package you must install its dependencies using
the following command:

```shell
pnpm install
```


### Building

```shell
npm run build
```


### Clean-up

```shell
npm run clean
```
npm package: @not-govuk/sass-base
Description: The base SASS code for GovUK styling.
Author: Daniel A.C. Martin
Latest version: 0.17.4

Not Govuk - SASS Base
=====================

The base SASS code for GovUK styling. You should `@import` this file before you
import components from `govuk-frontend`.


Using this package
------------------

First install the package into your project:

```shell
npm install -S @not-govuk/sass-base
```

Then use it in your code as follows:

```scss
@import '@not-govuk/sass-base';

@import "govuk-frontend/govuk/components/back-link/_index";
```


Working on this package
-----------------------

Before working on this package you must install its dependencies using
the following command:

```shell
pnpm install
```
npm package: @not-govuk/search-box
Description: A single-line, form field for searching, with submit button.
Author: Daniel A.C. Martin
Latest version: 0.17.4

NotGovUK - Search Box
=====================

A single-line, form field for searching, with submit button.

(Heavily inspired by the [Search component] in the [GOV.UK Component Guide].)

Using this package
------------------

First install the package into your project:

```shell
npm install -S @not-govuk/search-box
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import SearchBox from '@not-govuk/search-box';

export const MyComponent = props => (
  <form method="get" action="https://www.google.co.uk/search">
    <SearchBox name="q" label="Search Google" width={15} />
  </form>
);

export default MyComponent;
```


Working on this package
-----------------------

Before working on this package you must install its dependencies using
the following command:

```shell
pnpm install
```


### Testing

Run the unit tests.

```shell
npm test
```


### Building

Build the package by compiling the TypeScript source code.

```shell
npm run build
```


### Clean-up

Remove any previously built files.

```shell
npm run clean
```

[Search component]: https://components.publishing.service.gov.uk/component-guide/search
[GOV.UK Component Guide]: https://components.publishing.service.gov.uk/component-guide
npm package: @not-govuk/select
Description: A component to allow users to choose from many options.
Author: Daniel A.C. Martin
Latest version: 0.17.4

NotGovUK - Select
=================

A component to allow users to choose from many options.


Using this package
------------------

First install the package into your project:

```shell
npm install -S @not-govuk/select
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import Select from '@not-govuk/select';

export const MyComponent = props => (
  <Select
    label="Sort by"
    name="sort"
    options={[
      { value: 'published', label: 'Recently published' },
      { value: 'updated', label: 'Recently updated', selected: true },
      { value: 'views', label: 'Most views' },
      { value: 'comments', label: 'Most comments' }
    ]}
  />
);

export default MyComponent;
```


Working on this package
-----------------------

Before working on this package you must install its dependencies using
the following command:

```shell
pnpm install
```


### Testing

Run the unit tests.

```shell
npm test
```


### Building

Build the package by compiling the TypeScript source code.

```shell
npm run build
```


### Clean-up

Remove any previously built files.

```shell
npm run clean
```
npm package: @not-govuk/server-renderer
Description: A Restify renderer of React applications using react-router.
Author: Daniel A.C. Martin
Latest version: 0.16.3
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

Not Govuk - Server Renderer
===========================

A Restify renderer of React applications using react-router.


Using this package
------------------

First install the package into your project:

```shell
npm install -S @not-govuk/server-renderer restify
```

Then use it in your code as follows:

```js
const restify = require('restify');
const { reactRenderer } = require('@not-govuk/server-renderer');

const { AppWrap } = require('../common/app-wrap');
const { PageWrap } = require('../common/page-wrap');
const { ErrorPage } = require('../common/error-page');
const { Template } = require('./template');

const entrypoints = require('../../dist/public/entrypoints.json');

const react = reactRenderer(
  AppWrap,
  PageWrap,
  ErrorPage,
  Template,
  {
    assetsPath: 'public/',
    entrypoints,
    pages: [],
    rootId: 'root',
    ssrOnly: false
  });
const formatHTML = react.formatHTML;

const httpd = restify.createServer({
  name: config.name,
  formatters: {
    'application/xhtml+xml; q=0.2': formatHTML,
    'text/html; q=0.2': formatHTML
  },
});

httpd.use(react.renderer);

httpd.get('/', (req, res, next) => {
  res.renderApp(200, 'My page\'s title');
  next();
});

httpd.listen(8080, '0.0.0.0', () => {
  httpd.log.info('%s listening at %s', httpd.name, httpd.url);
});
```


Working on this package
-----------------------

Before working on this package you must install its dependencies using
the following command:

```shell
pnpm install
```


### Building

```shell
npm run build
```


### Clean-up

```shell
npm run clean
```
npm package: @not-govuk/service-navigation
Description: A component to help users understand that they’re using your service and lets them navigate around your service.
Author: Daniel A.C. Martin
Latest version: 0.17.4

NotGovUK - Service Navigation
=============================

A component to help users understand that they’re using your service and lets them navigate around your service.


Using this package
------------------

First install the package into your project:

```shell
npm install -S @not-govuk/service-navigation
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import ServiceNavigation from '@not-govuk/service-navigation';

export const MyComponent = props => (
  <ServiceNavigation items={[
    {
      href: "/#",
      text: "Navigation item 1"
    },
    {
      href: "#active",
      text: "Navigation item 2",
    },
    {
      href: "/#",
      text: "Navigation item 3"
    }
  ]} />
);

export default MyComponent;
```


Working on this package
-----------------------

Before working on this package you must install its dependencies using
the following command:

```shell
pnpm install
```


### Testing

Run the unit tests.

```shell
npm test
```


### Building

Build the package by compiling the TypeScript source code.

```shell
npm run build
```


### Clean-up

Remove any previously built files.

```shell
npm run clean
```
npm package: @not-govuk/simple-components
Description: Simple NotGovUK components.
Author: Daniel A.C. Martin
Latest version: 0.17.4

NotGovUK - Simple components
============================

Just the simple NotGovUK components.


Using this package
------------------

First install the package into your project:

```shell
npm install -S @not-govuk/simple-components
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import { Header, Footer } from '@not-govuk/simple-components';

export const MyComponent = props => (
  <Header
    // WRITEME
  />
);

export default MyComponent;
```


Working on this package
-----------------------

Before working on this package you must install its dependencies using
the following command:

```shell
pnpm install
```


### Testing

```shell
npm test
```


### Building

```shell
npm run build
```


### Clean-up

```shell
npm run clean
```
npm package: @not-govuk/simple-table
Description: A simple table for displaying data.
Author: Daniel A.C. Martin
Latest version: 0.16.3
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

NotGovUk - Simple Table
=======================

A simple table for displaying data.


Using this package
------------------

First install the package into your project:

```shell
npm install -S @not-govuk/simple-table
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import SimpleTable from '@not-govuk/simple-table';

export const MyComponent = props => (
  <SimpleTable
    keys={['name', 'qty', 'cost']}
    headings={{
      cost: 'Price',
      qty: 'Quantity',
      name: 'Name'
    }}
    data={[
      {
        cost: '£7.99',
        qty: '4',
        name: 'Blu-ray disk'
      },
      {
        cost: '£0.85',
        qty: '10',
        name: 'Pencil'
      },
      {
        cost: '£21.45',
        qty: '1',
        name: 'Text book'
      },
    ]}
  />
);

export default MyComponent;
```


Working on this package
-----------------------

Before working on this package you must install its dependencies using
the following command:

```shell
pnpm install
```


### Testing

```shell
npm test
```


### Building

```shell
npm run build
```


### Clean-up

```shell
npm run clean
```
npm package: @not-govuk/skip-link
Description: A component to help keyboard-only users skip to the main content on a page.
Author: Daniel A.C. Martin
Latest version: 0.17.4

NotGovUK - Skip Link
====================

The [GDS Skip link component].

A component to help keyboard-only users skip to the main content on a page.


Using this package
------------------

First install the package into your project:

```shell
npm install -S @not-govuk/skip-link
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import SkipLink from '@not-govuk/skip-link';

export const MyComponent = props => (
  <SkipLink for="main-content" />
);

export default MyComponent;
```


Working on this package
-----------------------

Before working on this package you must install its dependencies using
the following command:

```shell
pnpm install
```


### Testing

```shell
npm test
```


### Building

```shell
npm run build
```


### Clean-up

```shell
npm run clean
```


[GDS Skip link component]: https://design-system.service.gov.uk/components/skip-link/
npm package: @not-govuk/standalone-input
Description: A single-line, form field with a submit button.
Author: Daniel A.C. Martin
Latest version: 0.17.4

NotGovUK - Standalone Input
===========================

A single-line, form field with a submit button.


Using this package
------------------

First install the package into your project:

```shell
npm install -S @not-govuk/standalone-input
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import StandaloneInput from '@not-govuk/standalone-input';

export const MyComponent = props => (
  <StandaloneInput
    label="Your message"
    name="message"
    button="Send"
  />
);

export default MyComponent;
```


Working on this package
-----------------------

Before working on this package you must install its dependencies using
the following command:

```shell
pnpm install
```


### Testing

Run the unit tests.

```shell
npm test
```


### Building

Build the package by compiling the TypeScript source code.

```shell
npm run build
```


### Clean-up

Remove any previously built files.

```shell
npm run clean
```
npm package: @not-govuk/storybook-preset
Description: A Storybook preset that renders components similarly to our apps.
Author: Daniel A.C. Martin
Latest version: 0.16.3
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

NotGovUK - Storybook Preset
===========================

A Storybook preset that renders components similarly to our apps.


Using this package
------------------

First install the package into your project:

```shell
npm install -D @not-govuk/storybook-preset
```

Then use it in your `.storybook/main.js` as follows:

```js
'use strict';

module.exports = {
  stories: [ '../../../components/*/spec/*.stories.mdx' ],
  addons: [
    {
      name: '@not-govuk/storybook-preset',
      options: {
        baseDir: __dirname,
        tsConfig: '../../../tsconfig.json'
      }
    }
  ]
};
```


Working on this package
-----------------------

Before working on this package you must install its dependencies using
the following command:

```shell
pnpm install
```
npm package: @not-govuk/summary-card
Description: A component to split multiple summary lists.
Author: Daniel A.C. Martin
Latest version: 0.17.4

NotGovUK - Summary Card
=======================

A component to split multiple summary lists.


Using this package
------------------

First install the package into your project:

```shell
npm install -S @not-govuk/summary-card
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import SummaryCard from '@not-govuk/summary-card';

export const MyComponent = props => (
  <SummaryCard title="Lead tenant">
    Content
  </SummaryCard>
);

export default MyComponent;
```


Working on this package
-----------------------

Before working on this package you must install its dependencies using
the following command:

```shell
pnpm install
```


### Testing

Run the unit tests.

```shell
npm test
```


### Building

Build the package by compiling the TypeScript source code.

```shell
npm run build
```


### Clean-up

Remove any previously built files.

```shell
npm run clean
```
npm package: @not-govuk/summary-list
Description: A component to summarise information, for example, a user’s responses at the end of a form.
Author: Daniel A.C. Martin
Latest version: 0.17.4

NotGovUK - Summary List
=======================

A component to summarise information, for example, a user’s responses at the end of a form.


Using this package
------------------

First install the package into your project:

```shell
npm install -S @not-govuk/summary-list
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import SummaryList from '@not-govuk/summary-list';

export const MyComponent = props => (
  <SummaryList
    items={[
      {
        name: 'Name',
        actions: [ { href: '#', children: (<Fragment>Change<VisuallyHidden> name</VisuallyHidden></Fragment>) } ],
        children: 'Sarah Philips'
      },
      {
        name: 'Date of birth',
        actions: [ { href: '#', children: (<Fragment>Change<VisuallyHidden> date of birth</VisuallyHidden></Fragment>) } ],
        children: '5 January 1978'
      },
      {
        name: 'Address',
        actions: [ { href: '#', children: (<Fragment>Change<VisuallyHidden> address</VisuallyHidden></Fragment>) } ],
        children: (<Fragment>72 Guild Street<br />London<br />SE23 6FH</Fragment>)
      },
      {
        name: 'Contact details',
        actions: [ { href: '#', children: (<Fragment>Change<VisuallyHidden> contact details</VisuallyHidden></Fragment>) } ],
        children: (<Fragment><p class="govuk-body">07700 900457</p><p class="govuk-body">sarah.phillips@example.com</p></Fragment>)
      },
    ]}
  />
);

export default MyComponent;
```


Working on this package
-----------------------

Before working on this package you must install its dependencies using
the following command:

```shell
pnpm install
```


### Testing

Run the unit tests.

```shell
npm test
```


### Building

Build the package by compiling the TypeScript source code.

```shell
npm run build
```


### Clean-up

Remove any previously built files.

```shell
npm run clean
```
npm package: @not-govuk/table
Description: A component to make information easier to compare and scan for users.
Author: Daniel A.C. Martin
Latest version: 0.17.4

Table
=====

The [GDS Table component].


Preview
-------

![Preview][Preview]


Using this package
------------------

First install the package into your project:

```shell
npm install -S @not-govuk/table
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import Table from '@not-govuk/table';

export const MyComponent = props => (
  <Table
    keys={['date', 'amount']}
    headings={{
      amount: 'Amount',
      date: 'Date'
    }}
    data={[
      {
        amount: '£109.80 per week',
        date: 'First 6 weeks'
      },
      {
        amount: '£109.80 per week',
        date: 'Next 33 weeks'
      },
      {
        amount: '£4,282.20',
        date: 'Total estimated pay'
      },
    ]}
  />
);

export default MyComponent;
```


Working on this package
-----------------------

Before working on this package you must install its dependencies using
the following command:

```shell
pnpm install
```


### Testing

```shell
npm test
```


### Building

```shell
npm run build
```


### Clean-up

```shell
npm run clean
```


[GDS Table component]: https://design-system.service.gov.uk/components/table/
[Preview]: ../../__image_snapshots__/storyshots-itest-ts-image-storyshots-components-table-text-1-snap.png
npm package: @not-govuk/tabs
Description: A component that lets users navigate between related sections of content, displaying one section at a time.
Author: Daniel A.C. Martin
Latest version: 0.17.4

NotGovUK - Tabs
===============

A component that lets users navigate between related sections of content, displaying one section at a time.


Using this package
------------------

First install the package into your project:

```shell
npm install -S @not-govuk/tabs
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import Tabs from '@not-govuk/tabs';

export const MyComponent = props => (
  <Tabs
    items={[
      {
        id: 'a1',
        label: 'AAA',
        content: (<p>A</p>)
      },
      {
        id: 'b1',
        label: 'BBB',
        content: (<p>B</p>)
      },
      {
        id: 'c1',
        label: 'CCC',
        content: (<p>C</p>)
      }
    ]}
  />
);

export default MyComponent;
```


Working on this package
-----------------------

Before working on this package you must install its dependencies using
the following command:

```shell
pnpm install
```


### Testing

```shell
npm test
```


### Building

```shell
npm run build
```


### Clean-up

```shell
npm run clean
```
npm package: @not-govuk/tabs-internal
Description: A component for multiple, related sections of content.
Author: Daniel A.C. Martin
Latest version: 0.16.3
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

NotGovUK - Tabs
===============

A component for multiple, related sections of content.


Using this package
------------------

First install the package into your project:

```shell
npm install -S @not-govuk/tabs
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import Tabs from '@not-govuk/tabs';

export const MyComponent = props => (
  <Tabs
    items={[
      {
        id: 'a1',
        label: 'AAA',
        content: (<p>A</p>)
      },
      {
        id: 'b1',
        label: 'BBB',
        content: (<p>B</p>)
      },
      {
        id: 'c1',
        label: 'CCC',
        content: (<p>C</p>)
      }
    ]}
  />
);

export default MyComponent;
```


Working on this package
-----------------------

Before working on this package you must install its dependencies using
the following command:

```shell
pnpm install
```


### Testing

```shell
npm test
```


### Building

```shell
npm run build
```


### Clean-up

```shell
npm run clean
```
npm package: @not-govuk/tag
Description: A component to display the status of something.
Author: Daniel A.C. Martin
Latest version: 0.17.4

Tag
===

The [GDS Tag component] for displaying the status of something.


Preview
-------

![Preview][Preview]


Using this package
------------------

First install the package into your project:

```shell
npm install -S @not-govuk/tag
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import Tag from '@not-govuk/tag';

export const MyComponent = props => (
  <Tag text="example" />
);

export default MyComponent;
```


Working on this package
-----------------------

Before working on this package you must install its dependencies using
the following command:

```shell
pnpm install
```


### Testing

```shell
npm test
```


### Building

```shell
npm run build
```


### Clean-up

```shell
npm run clean
```


[GDS Tag component]: https://design-system.service.gov.uk/components/tag/
[Preview]: ../../__image_snapshots__/storyshots-itest-ts-image-storyshots-components-tag-text-1-snap.png
npm package: @not-govuk/text-input
Description: A single line text field.
Author: Daniel A.C. Martin
Latest version: 0.17.4

NotGovUK - Text Input
=====================

A single line text field.


Using this package
------------------

First install the package into your project:

```shell
npm install -S @not-govuk/text-input
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import TextInput from '@not-govuk/text-input';

export const MyComponent = props => (
  <TextInput
    label={<h1 className="govuk-heading-l">What is the name of the event?</h1>}
    name="event-name"
  />
);

export default MyComponent;
```


Working on this package
-----------------------

Before working on this package you must install its dependencies using
the following command:

```shell
pnpm install
```


### Testing

Run the unit tests.

```shell
npm test
```


### Building

Build the package by compiling the TypeScript source code.

```shell
npm run build
```


### Clean-up

Remove any previously built files.

```shell
npm run clean
```
npm package: @not-govuk/textarea
Description: A component to allow users to enter multiple lines of text.
Author: Daniel A.C. Martin
Latest version: 0.17.4

NotGovUK - Textarea
===================

A component to allow users to enter multiple lines of text.


Using this package
------------------

First install the package into your project:

```shell
npm install -S @not-govuk/textarea
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import Textarea from '@not-govuk/textarea';

export const MyComponent = props => (
  <Textarea
    hint="Do not include personal or financial information, like your National Insurance number or credit card details."
    label={<h1 className="govuk-heading-l">Can you provide more detail?</h1>}
    name="more-detail"
  />
);

export default MyComponent;
```


Working on this package
-----------------------

Before working on this package you must install its dependencies using
the following command:

```shell
pnpm install
```


### Testing

Run the unit tests.

```shell
npm test
```


### Building

Build the package by compiling the TypeScript source code.

```shell
npm run build
```


### Clean-up

Remove any previously built files.

```shell
npm run clean
```
npm package: @not-govuk/uri
Description: A more forgiving alternative to JavaScript's standard URL class.
Author: Daniel A.C. Martin
Latest version: 0.16.3
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

NotGovUK - URI
==============

A more forgiving alternative to JavaScript's standard URL class.
Supports nested structures in the query-strings.


Using this package
------------------

First install the package into your project:

```shell
npm install -S @not-govuk/uri
```

Then use it in your code as follows:

```js
import { URI } from '@not-govuk/uri';

// WRITEME

```


Working on this package
-----------------------

Before working on this package you must install its dependencies using
the following command:

```shell
pnpm install
```


### Building

```shell
npm run build
```


### Clean-up

```shell
npm run clean
```
npm package: @not-govuk/user-info
Description: A React context for providing information on the user.
Author: Daniel A.C. Martin
Latest version: 0.16.3
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

NotGovUK - User Info
====================

A React context (with hook) for providing information on the user.

This is useful for:
- referring to the user by name
- letting them know that they are logged in
- communicating to them what they are allowed to do on the system with
  their current permissions / roles

> **Note:** This is _NOT_ a security enforcing function; security should
>           be enforced on the server-side in API endpoints and GraphQL
>           resolvers.


Using this package
------------------

First install the package into your project:

```shell
npm install -S @not-govuk/user-info
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import { UserInfoContext, useUserInfo } from '@not-govuk/user-info';

const dummyUserInfo = {
  username: 'DummyUser',
  groups: ['DummyGroup'],
  roles: ['DummyRole']
};

export const MyConsumer = props => {
  const { username } = useUserInfo();

  return (
    <p>Welcome {username}.</p>
  );
};

export const MyComponent = props => (
  <UserInfo.Provider value={dummyUserInfo}>
    <MyConsumer />
  </UserInfo.Provider>
);

export default MyComponent;
```

(Most users will only need to use the hook as the context has already
been set up for them.)


Working on this package
-----------------------

Before working on this package you must install its dependencies using
the following command:

```shell
pnpm install
```


### Testing

```shell
npm test
```


### Building

```shell
npm run build
```


### Clean-up

```shell
npm run clean
```
npm package: @not-govuk/visually-hidden
Description: Invisible text that can be read by software such as screen-readers.
Author: Daniel A.C. Martin
Latest version: 0.17.4

NotGovUK - Visually Hidden
==========================

Invisible text that can be read by software such as screen-readers.


Using this package
------------------

First install the package into your project:

```shell
npm install -S @not-govuk/visually-hidden
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import VisuallyHidden from '@not-govuk/visually-hidden';

export const MyComponent = props => (
  <VisuallyHidden>Error:</VisuallyHidden> Something went wrong
);

export default MyComponent;
```


Working on this package
-----------------------

Before working on this package you must install its dependencies using
the following command:

```shell
pnpm install
```


### Testing

Run the unit tests.

```shell
npm test
```


### Building

Build the package by compiling the TypeScript source code.

```shell
npm run build
```


### Clean-up

Remove any previously built files.

```shell
npm run clean
```
npm package: @not-govuk/warning-text
Description: A component to warn the user of something important.
Author: Daniel A.C. Martin
Latest version: 0.17.4

Warning Text
============

A component to warn the user of something important.


Using this package
------------------

First install the package into your project:

```shell
npm install -S @not-govuk/warning-text
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import WarningText from '@not-govuk/warning-text';

export const MyComponent = props => (
  <WarningText>
    You can be fined up to £5,000 if you do not register.
  </WarningText>
);

export default MyComponent;
```


Working on this package
-----------------------

Before working on this package you must install its dependencies using
the following command:

```shell
pnpm install
```


### Testing

```shell
npm test
```


### Building

```shell
npm run build
```


### Clean-up

```shell
npm run clean
```
npm package: @not-govuk/webpack-config
Description: Webpack config for NotGovUK applications.
Author: Daniel A.C. Martin
Latest version: 0.16.3
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

Not Govuk - Webpack Config
==========================

Webpack config for NotGovUK applications.


Using this package
------------------

First install the package into your project:

```shell
npm install -D @not-govuk/webpack-config
```

Then use it in your `webpack.config.js` as follows:

```js
const generateConfig = require('@not-govuk/webpack-config');

const webpackConfig = generateConfig({
  baseDir: __dirname,
  entry: './src/client/index.ts',
  outDir: './dist/public',
  production: process.env.NODE_ENV !== 'development',
  tsConfig: 'tsconfig.json'
});

module.exports = webpackConfig;
```


Working on this package
-----------------------

Before working on this package you must install its dependencies using
the following command:

```shell
pnpm install
```

Currently all testing is manual.
npm package: @not-govuk/width-container
Description: A simple container to limit the width of its contents.
Author: Daniel A.C. Martin
Latest version: 0.17.4

Width Container
===============

A simple container to limit the width of its contents.

This is used by the page components to control the width of the page
contents. Users will not typically need to use this.


Using this package
------------------

First install the package into your project:

```shell
npm install -S @not-govuk/width-container
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import WidthContainer from '@not-govuk/width-container';

const myMaxWidthInPixels = 300;

export const MyComponent = props => (
  <WidthContainer maxWidth={myMaxWidthInPixels}>
    My contents
  </WidthContainer>
);

export default MyComponent;
```


Working on this package
-----------------------

Before working on this package you must install its dependencies using
the following command:

```shell
pnpm install
```


### Testing

```shell
npm test
```


### Building

```shell
npm run build
```


### Clean-up

```shell
npm run clean
```
npm package: @not-js/not
Description: NOT!!!!!!!!!!!!!!!
Author: me
Latest version: 1.1.1

# Not.js

Returns the negation of a function

## Example

```js

var not = require('@not-js/not')
var t = require('true')
var constant = function(v) {
  return function() {
    return v
  }
}


console.log(not(constant)(false)) // true
console.log(not(constant)(true)) // false
console.log(not(t)()) // false 

```

## Installation

`npm install @not-js/not`
npm package: @not-nemo/crypto-tracker
Description: Simple single-file cryptocurrency price tracker
Latest version: 1.0.6

# crypto-tracker

A simple, lightweight cryptocurrency price tracker that runs entirely in the browser with no API keys or dependencies. Also available as an npm library.

## Getting Started

1. Clone the repository:

```bash
git clone https://github.com/noy-nemo/crypto-prices-tracker.git
```

2. Navigate into the directory and install:

```bash
cd crypto-prices-tracker
npm install
```

## Usage

**Export prices to CSV:**

```bash
npm run export-csv
```

**Use in the browser:**

Open `crypto-tracker.html` in any web browser — no build step required.

**Use as a library:**

Import the package directly into your project after installation.

## Features

- Live USD prices for BTC, ETH, SOL, BNB, and XRP
- Auto-refreshes every 60 seconds
- Shows last known prices if a fetch fails
- No API key required

## Data Source

Prices are fetched from the [CoinGecko public API](https://www.coingecko.com/en/api) (`/simple/price` endpoint).

## License

MIT
npm package: @not-only-code/react-i18n
Description: The simplest tool to translate texts in React
Author: Carlos Sanz Garcia
Latest version: 0.1.5

# React i18n

The simplest tool to translate texts in React

## installation

```bash
npm i @not-only-code/react-i18n
```

## Usage

Create a definitions JSON file per translation.

```JSON
// translations/en-GB.json
{
  "appHeading": "My App Heading"
}
```

Add `Reacti18nProvider` at start up your app. Inject there the `locale` and `messages` (a key, value JSON with a locale translations).

```jsx
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import messages from './translations/en-GB.json';
import { Reacti18nProvider } from '@not-only-code/react-i18n';

ReactDOM.render(
  <Reacti18nProvider locale='en-GB' messages={messages}>
    <App />
  </Reacti18nProvider>,
  document.getElementById('root')
);
```

Use `Reacti18nContext` to get `t` method and translate your definitions:

### Using `useContext` hook

```jsx
// App.js
import React, { useContext } from 'react';
import { Reacti18nContext } from '@not-only-code/react-i18n';

function App() {
  const { t } = useContext(Reacti18nContext);
  return (
    <div>
      <h1>{ t('appHeading') }</h1>
    </div>
  );
}

export default App;
```

### Using `Context.Consumer` API syntax

```jsx
// App.js
import React from 'react';
import { Reacti18nContext } from '@not-only-code/react-i18n';

function App() {
  return (
    <div>
      <Reacti18nContext.Consumer>
        {({t}) => <h1>{ t('appHeading') }</h1>}
      <Reacti18nContext.Consumer>
    </div>
  );
}

export default App;
```
npm package: @not251/not251
Description: [WIP] not251 - music theory library
Author: not251
Latest version: 0.0.2

# not251

[WIP] not251 - music theory library

## Prerequisites

- install NVM (Node Version Manager) -> [From here](https://github.com/coreybutler/nvm-windows/releases),
- install latest Node.js LTS version with `nvm install --lts`
- activate the Node.js version with `nvm use lts`
- install pnpm with `npm install -g pnpm`

## Development Setup

1. Clone the repository with `git clone https://github.com/not251/not251-ts.git`
2. Install dependencies with `pnpm install`
3. Run the tests with `pnpm test`
4. Build the library with `pnpm run build`