open-index/open-npm huggingface dataset:
npm package: @royalnavy/eslint-config-react
Description: This package provides the Royal Navy ESLint and Prettier configuration.
Author: Royal Navy
Latest version: 4.50.0

# ESLint Config React

This package provides the Royal Navy ESLint and Prettier configuration.

## ESLint

[ESLint](https://eslint.org/) statically analyzes your code to quickly find problems. ESLint is built into most text editors and you can run ESLint as part of your continuous integration pipeline.

## Prettier

[Prettier](https://prettier.io/) is an opinionated code formatter. It removes original styling and ensures that all outputted code conforms to a consistent style.

## Installation

The Royal Navy ESLint config is available as an [NPM package](https://www.npmjs.com/package/@royalnavy/eslint-config-react).

```
// npm
npm install @royalnavy/eslint-config-react

// pnpm
pnpm add @royalnavy/eslint-config-react
```

In the root of your project create the following files:

_.eslintrc.js_

```js
module.exports = {
  extends: ['@royalnavy/eslint-config-react'],
}
```

_.prettier.config.js_

```js
module.exports = require('@royalnavy/eslint-config-react/prettier.config.js')
```

## Questions

The Design System is maintained by a team at the Royal Navy. If you want to know more about the Royal Navy Design System, please email the [Design System Team](mailto:design-system@digital.mod.uk).

## Documentation

The [documentation website](https://design-system.digital.mod.uk/) contains all the information you need to build your application using the Royal Navy Design System.

## Contributing

The [contributing guide](https://github.com/Royal-Navy/design-system/blob/master/docs/contributing.md) resource presents information about our development process.

## Changelog

If you have recently updated then read the [release notes](https://github.com/Royal-Navy/design-system/releases)

## Roadmap

The [Design System Roadmap Board](https://github.com/Royal-Navy/design-system/projects/7) contains the work that has been prioritised for the next 12 months.

## License

The Royal Navy Design System is licensed under the [Apache License 2.0](https://github.com/Royal-Navy/design-system/blob/master/LICENSE).
npm package: @royalnavy/fonts
Description: The CSS and web font files for self-hosting "Lato".
Author: Royal Navy
Latest version: 4.50.0

# Fonts

The CSS and web font files for self-hosting "Lato".

## Installation

The Royal Navy Fonts are available as an [NPM package](https://www.npmjs.com/package/@royalnavy/fonts).

```
// npm
npm install @royalnavy/fonts

// pnpm
pnpm add @royalnavy/fonts
```

## Usage

The package includes all necessary font files (ttf) and a CSS file with font-face declarations pointing at these files.

You will need to have webpack setup to load css and font files. Many tools built with webpack will work out of the box, such as [Create React App](https://github.com/facebook/create-react-app).

To use, simply require the package in your project’s entry file e.g.

```javascript
import '@royalnavy/fonts'
```

## Questions

The Design System is maintained by a team at the Royal Navy. If you want to know more about the Royal Navy Design System, please email the [Design System Team](mailto:design-system@digital.mod.uk).

## Documentation

The [documentation website](https://design-system.digital.mod.uk/) contains all the information you need to build your application using the Royal Navy Design System.

## Contributing

The [contributing guide](https://github.com/Royal-Navy/design-system/blob/master/docs/contributing.md) resource presents information about our development process.

## Changelog

If you have recently updated then read the [release notes](https://github.com/Royal-Navy/design-system/releases)

## Roadmap

The [Design System Roadmap Board](https://github.com/Royal-Navy/design-system/projects/7) contains the work that has been prioritised for the next 12 months.

## License

The Royal Navy Design System is licensed under the [Apache License 2.0](https://github.com/Royal-Navy/design-system/blob/master/LICENSE).
npm package: @royalnavy/icon-library
Description: A collection of SVG icons for use in Royal Navy web application development.
Author: Royal Navy
Latest version: 4.50.0

# Icon Library

A collection of SVG icons for use in Royal Navy web application development.

## Browse Icons & Silhouettes

The icon library uses the [Google Material icon set](https://material.io/resources/icons/) as a baseline.

It has been extended and supplemented with domain specific icons and [silhouettes](https://github.com/Royal-Navy/design-system/tree/master/packages/icon-library/src/assets/silhouettes).

## Installation

The Royal Navy Icon Library is available as an [NPM package](https://www.npmjs.com/package/@royalnavy/icon-library).

```
// npm
npm install @royalnavy/icon-library

// pnpm
pnpm add @royalnavy/icon-library
```

## Usage

```javascript
import { IconHome } from '@royalnavy/icon-library'
import { SilhouetteAircraftCarrier } from '@royalnavy/icon-library'

// <IconHome size={16} />
// <SilhouetteAircraftCarrier size={128} />
```

## Sizing

The `size` prop sets the `width` and `height` attribute values of the wrapped SVG.

## Contributing

Add an SVG icon to `src/assets/**/` and run `pnpm run build` to generate the consumable artefacts.

The [contributing guide](https://github.com/Royal-Navy/design-system/blob/master/docs/contributing.md) resource presents information about our development process.

## Questions

The Design System is maintained by a team at the Royal Navy. If you want to know more about the Royal Navy Design System, please email the [Design System Team](mailto:design-system@digital.mod.uk).

## Documentation

The [documentation website](https://design-system.digital.mod.uk/) contains all the information you need to build your application using the Royal Navy Design System.

## Changelog

If you have recently updated then read the [release notes](https://github.com/Royal-Navy/design-system/releases)

## Roadmap

The [Design System Roadmap Board](https://github.com/Royal-Navy/design-system/projects/7) contains the work that has been prioritised for the next 12 months.

## License

The Royal Navy Design System is licensed under the [Apache License 2.0](https://github.com/Royal-Navy/design-system/blob/master/LICENSE).
npm package: @royalnavy/storybook-react-input-state
Description: State wrapper for form components in react storybook stories
Author: NELSON
Latest version: 2.0.0
Deprecated: This is no longer maintained.

# @royalnavy/storybook-react-input-state

This Storybook JS component allows you to create storybooks that present functional **Form** components that would normally need some kind of stateful container. So if you created a functional input component you can try it out by simply wrapping it in this component. So how easy is it to use? This easy:

```
<State>
  <Input name="colour" value="Red" />
</State>
```

There are already a few plugins and components to help with state in Storybook, but they provide more advanced functionality and do not work well with the `storybook-info` addon. This plugin attempts to require zero configuration while keeping the output clean and is specifically designed to wrap form input components, using the name property as the state key.

Below is an example story using the component:

```
Input.stories.js
----------------
import React from 'react'
import { storiesOf } from '@storybook/react'
import State from '@royalnavy/storybook-react-input-state'

import Input from './Input'

const stories = storiesOf('Input', module)

stories.add('Input', () => (
  <form>
    <State>
      <Input name="user" label="User" type="text" value="fred" />
      <Input name="colour" label="Colour" type="text" value="" />
    </State>
  </form>
))
```

If you wish to add add the `storybook-info` the code required would be something like:

```
.storybook/config.js
--------------------
import { withInfo } from '@storybook/addon-info'
import { addDecorator, configure } from '@storybook/react'

addDecorator(withInfo)

...


Input.stories.js
----------------
import React from 'react'
import { storiesOf } from '@storybook/react'
import State from '@royalnavy/storybook-react-input-state'

import Input from './index'

const stories = storiesOf('Input', module)
stories.addParameters({
  info: { inline: true, header: false, propTablesExclude: [State] },
})

stories.add('Input', () => (
  <State>
    <Input name="user" label="User" type="text" value="fred" />
  </State>
))
```

The result will be a Storybook story that shows the component in action, example code (only wrapping it in a State component) and a property table.

Finally, if you add your own `onChange` property to an input that method will still get called in addition to the state listening for changes.