open-index/open-npm huggingface dataset:
npm package: @react-foundry/component-helpers
Description: Helper functions for writing components.
Author: Daniel A.C. Martin
Latest version: 0.1.9

React Foundry - Component Helpers
=================================

Helper functions for writing components.


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

First install the package into your project:

```shell
npm install -S @react-foundry/component-helpers
```

Then use it in your code as follows:

```js
import componentHelpers from '@react-foundry/component-helpers';

// 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: @react-foundry/component-test-helpers
Description: Helper functions for testing React components.
Author: Daniel A.C. Martin
Latest version: 0.1.9

React Foundry - Component Test Helpers
=======================================

Helper functions for testing React components.


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

First install the package into your project:

```shell
npm install -S @react-foundry/component-test-helpers
```

Then use it in your code as follows:

```js
import componentTestHelpers from '@react-foundry/component-test-helpers';

// 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: @react-foundry/components
Description: React components to support the React Foundry system.
Author: Daniel A.C. Martin
Latest version: 0.1.9

React Foundry - Components
==========================

All of the React Foundry [React] components, in a single package.


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

First install the package into your project:

```shell
npm install -S @react-foundry/components
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import { AnchorList } from '@react-foundry/components';

export const MyComponent = props => (
  <AnchorList
    items={[
      { href: '/foo', text: 'Foo' },
      { href: '/bar', text: 'Bar' },
      { href: '/baz', text: 'Baz' }
    ]}
  />
);

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
```


[React]: https://reactjs.org/
npm package: @react-foundry/create
Description: A project and prototype initialiser.
Author: Daniel A.C. Martin
Latest version: 0.1.9

React Foundry - Create
======================

A project and prototype initialiser.


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

Typically you would not install this package but rather call it with
`npx` or `npm init`. Similar to `npm init` this will not initialise Git
or even create a directory for you. We suggest that you set up your
directory with Git and its remote before you start. For example:

```shell
mkdir MY-PROJECT
cd MY-PROJECT
git init
git remote add origin https://github.com/MY-USER/MY-PROJECT.git
```

Once that is set up you can run:

```shell
npm init @react-foundry
```

Follow the prompts to set up your new project.


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: @react-foundry/docs-components
Description: React components for use in documentation.
Author: Daniel A.C. Martin
Latest version: 0.1.9

React Foundry - Docs Components
===============================

React components for use in documentation.


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

First install the package into your project:

```shell
npm install -S @react-foundry/docs-components
```

Then use it in your code as follows:

```js
import docsComponents from '@react-foundry/docs-components';

// 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: @react-foundry/fastify
Description: A customised Fastify server for running websites.
Author: Daniel A.C. Martin
Latest version: 0.1.9

React Foundry - Fastify
=======================

A customised Fastify server for running websites.


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

First install the package into your project:

```shell
npm install -S @react-foundry/fastify
```

Then use it in your code as follows:

```js
import Fastify from '@react-foundry/fastify';

const httpd = Fastify({});

httpd.get('/', async (req, reply) => {
  return {
    message: 'Hello world!'
  };
});

await httpd.listen({ port: 8080 });
```


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

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

```shell
pnpm install
```


### Building

Build the package by compiling the source code.

```shell
npm run build
```


### Clean-up

Remove any previously built files.

```shell
npm run clean
```
npm package: @react-foundry/fastify-dev-logger
Description: A Pino transport for pretty printing Fastify logs in dev environments.
Author: Daniel A.C. Martin
Latest version: 0.1.9

React Foundry - Fastify Dev Logger
==================================

A Pino transport for pretty printing [Fastify] logs in **dev** environments.
Built on [pino-pretty].

The output looks like this (but with colours):

```
[16:56:26.501]  info      | Server listening at http://[::1]:5173
[16:56:34.020]  info (01) | GET / - incoming request
[16:56:48.565]  info (01) | GET / - request completed; 200 OK (64ms)
```

**Note:** It should be possible to use this in [pino] without Fastify, but we
provide extra features for handling Fastify's (request) objects.


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

First install the package into your project:

```shell
npm install -D @react-foundry/fastify-dev-logger
```

Then use it in your code as follows:

```js
import fastifyDevLogger from '@react-foundry/fastify-dev-logger';
import Fastify from 'fastify';

const httpd = Fastify({
  logger: {
    transport: {
      target: '@react-foundry/fastify-dev-logger'
    }
  }
});

[...]
```


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

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

```shell
pnpm install
```

### Testing

Test the package by running the unit tests.

```shell
npm test
```


[Fastify]: https://fastify.dev/
[pino]: https://getpino.io/
[pino-pretty]: https://www.npmjs.com/package/pino-pretty
npm package: @react-foundry/fastify-harden
Description: Fastify plugin for extra cyber-security hardening.
Author: Daniel A.C. Martin
Latest version: 0.1.9

React Foundry - Fastify Harden
==============================

Fastify plugin for extra cyber-security hardening.

This adds extra HTTP headers to tell the browser to run in a stricter fashion in
order to prevent a variety of exploits. It also censors error messages on any
_Internal Server Errors_ that occur in production (they can still be found in
the logs.


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

First install the package into your project:

```shell
npm install -S @react-foundry/fastify-harden
```

Then use it in your code as follows:

```js
import Fastify from 'fastify';
import fastifyHarden from '@react-foundry/fastify-harden';

const httpd = Fastify({});

await httpd.register(fastifyHarden, {
});

await httpd.listen({ port: 8080 });
```


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

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

```shell
pnpm install
```


### Building

Build the package by compiling the source code.

```shell
npm run build
```


### Clean-up

Remove any previously built files.

```shell
npm run clean
```
npm package: @react-foundry/fastify-react-router
Description: Fastify plugin for React Router.
Author: Daniel A.C. Martin
Latest version: 0.1.9

React Foundry - Fastify-React-Router
====================================

Fastify plugin for React Router.


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

First install the package into your project:

```shell
npm install -S @react-foundry/fastify-react-router
```

Then use it in your code as follows:

```js
import Fastify from '@react-foundry/fastify';
import fastifyReactRouter from '@react-foundry/fastify-react-router';

const httpd = Fastify({});

await httpd.register(fastifyReactRouter, {
  assets: join(import.meta.dirname, 'path', 'to', 'build', 'of', 'client'),
  serverBuild: await import('path/to/build/of/server/index.js')
});

await httpd.listen({ port: 8080 });
```

It is expected that you will have built the referenced files with
`react-router build`.


### Dev server

You can use the `/dev` entrypoint for a dev server.

```js
import Fastify from '@react-foundry/fastify';
import fastifyReactRouterDev from '@react-foundry/fastify-react-router/dev';

const httpd = Fastify({});

await httpd.register(fastifyReactRouterDev);

await httpd.listen({ port: 8080 });
```


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

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

```shell
pnpm install
```


### Building

Build the package by compiling the source code.

```shell
npm run build
```


### Clean-up

Remove any previously built files.

```shell
npm run clean
```
npm package: @react-foundry/form
Description: A component to collect information from the user.
Author: Daniel A.C. Martin
Latest version: 0.1.9

React Foundry - Form
====================

A component to collect information from the user.


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

First install the package into your project:

```shell
npm install -S @react-foundry/form
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import Form from '@react-foundry/form';

export const MyComponent = props => (
  <Form action="/result" method="get">
    <Form.TextInput
      name="fullName"
      label={<h2>What is your name?</h2>}
      hint="Write your firstname followed by your surname"
      validators={[
        required()
      ]}
    />
    <Form.Radios
      name="sex"
      label={<h2>Sex?</h2>}
      options={[
        { value: 'male', label: 'Male' },
        { value: 'female', label: 'Female' },
        { value: 'no', label: 'No thanks, we\'re British' }
      ]}
      validators={[
        required('Provide your sex')
      ]}
    />
    <Form.DateInput
      name="dob"
      prettyName="date of birth"
      label={<h2>What is your date of birth?</h2>}
      validators={[
        required('Provide your date of birth'),
        past(),
        after('1900-01-01')()
      ]}
    />
    <Form.Radios
      name="married"
      label={<h2>Are you married?</h2>}
      options={[
        { value: 'Y', label: 'Yes' },
        { value: 'N', label: 'No' }
      ]}
      validators={[
        required('Provide your marital status')
      ]}
    />
    <Form.Submit value="Submit" />
  </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

```shell
npm test
```


### Building

```shell
npm run build
```


### Clean-up

```shell
npm run clean
```
npm package: @react-foundry/forms
Description: An intuitive isometric forms framework for React.
Author: Daniel A.C. Martin
Latest version: 0.1.9

React Foundry - Forms
=====================

An intuitive isometric forms framework for React.


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

First install the package into your project:

```shell
npm install -S @react-foundry/forms
```

Then use it in your code as follows:

```js
import forms from '@react-foundry/forms';

// 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: @react-foundry/memoize
Description: Higher-order functions for memoizing pure functions.
Author: Daniel A.C. Martin
Latest version: 0.1.9

React Foundry - 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 @react-foundry/memoize
```

Then use it in your code as follows:

```js
import memoize from '@react-foundry/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: @react-foundry/plop-pack
Description: Plop pack with misc tools.
Author: Daniel A.C. Martin
Latest version: 0.1.9

React Foundry - Plop Pack
=========================

Plop pack with misc tools.


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

First install the package into your project:

```shell
npm install -D @react-foundry/plop-pack
```

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

```js
module.exports = plop => {
  plop.load('@react-foundry/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: @react-foundry/react-router-context
Description: A collection of React Router contexts for use in React Foundry applications.
Author: Daniel A.C. Martin
Latest version: 0.1.9

React Foundry - React-Router-Context
====================================

A collection of React Router contexts for use in React Foundry applications.


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

First install the package into your project:

```shell
npm install -S @react-foundry/react-router-context
```

Then use it in your code as follows:

```js
import type { RouterContextProvider } from '@react-foundry/react-router-context'; // Replaces import from react-router
import { userInfoContext, cspNonceContext } from '@react-foundry/react-router-context';

export const loader = async ({ context: _context }: Route.LoaderArgs) => {
  const context = _context as RouterContextProvider; // Needed to get extra properties recognised

  const cspNonce = context.cspNonce;
  const userInfo = context.userInfo;

  // Alternatively...
  const cspNonceAlt = context.get(cspNonceContext);
  const userInfoAlt = context.get(userInfoContext);

  // ...
};
```


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

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

```shell
pnpm install
```


### Building

Build the package by compiling the source code.

```shell
npm run build
```


### Clean-up

Remove any previously built files.

```shell
npm run clean
```
npm package: @react-foundry/router
Description: An abstraction layer over the routers from react-router and Next.js.
Author: Daniel A.C. Martin
Latest version: 0.1.9

React Foundry - 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 @react-foundry/router
```

Then use it in your code as follows:

```js
import router from '@react-foundry/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: @react-foundry/simple-components
Description: Simple React Foundry components.
Author: Daniel A.C. Martin
Latest version: 0.1.9

React Foundry - Simple components
=================================

Just the simple React Foundry [React] components, that will work with Next.js.
(Eventually we hope to deprecate this package in favour of just using the main
`@catlyse/components` package.)


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

First install the package into your project:

```shell
npm install -S @react-foundry/simple-components
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import { AnchorList } from '@react-foundry/simple-components';

export const MyComponent = props => (
  <AnchorList
    items={[
      { href: '/foo', text: 'Foo' },
      { href: '/bar', text: 'Bar' },
      { href: '/baz', text: 'Baz' }
    ]}
  />
);

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
```


[React]: https://reactjs.org/
npm package: @react-foundry/simple-table
Description: A simple table for displaying data.
Author: Daniel A.C. Martin
Latest version: 0.1.9

React Foundry - Simple Table
============================

A simple table for displaying data.


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

First install the package into your project:

```shell
npm install -S @react-foundry/simple-table
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import SimpleTable from '@react-foundry/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: @react-foundry/tabs
Description: A component for multiple, related sections of content.
Author: Daniel A.C. Martin
Latest version: 0.1.9

React Foundry - Tabs
====================

A component for multiple, related sections of content.


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

First install the package into your project:

```shell
npm install -S @react-foundry/tabs
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import Tabs from '@react-foundry/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: @react-foundry/types
Description: Common types used across React Foundry.
Author: Daniel A.C. Martin
Latest version: 0.1.9

React Foundry - Types
=====================

Common types used across React Foundry.


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

First install the package into your project:

```shell
npm install -S -D @react-foundry/types
```

Then use it in your code as follows:

```js
import type { UserInfo } from '@react-foundry/types';
```


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

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

```shell
pnpm install
```


### Building

Build the package by compiling the source code.

```shell
npm run build
```


### Clean-up

Remove any previously built files.

```shell
npm run clean
```
npm package: @react-foundry/types-helpers
Description: Types to aid in defining other types.
Author: Daniel A.C. Martin
Latest version: 0.1.9

React Foundry - Types-Helpers
=============================

Types to aid in defining other types.


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

First install the package into your project:

```shell
npm install -S -D @react-foundry/types-helpers
```

Then use it in your code as follows:

```ts
import type { Maybe, Promised } from '@react-foundry/types-helpers';

const foo = (): Maybe<string> => {
  if (something) {
    return 'yes';
  }
};

type Fn = (): Promised<string>;

const bar: Fn = async () => 'result';
const baz: Fn = () => 'result';
```


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

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

```shell
pnpm install
```


### Building

Build the package by compiling the source code.

```shell
npm run build
```


### Clean-up

Remove any previously built files.

```shell
npm run clean
```
npm package: @react-foundry/uri
Description: A more forgiving alternative to JavaScript's standard URL class.
Author: Daniel A.C. Martin
Latest version: 0.1.9

React Foundry - 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 @react-foundry/uri
```

Then use it in your code as follows:

```js
import { URI } from '@react-foundry/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: @react-foundry/user-info
Description: A React context for providing information on the user.
Author: Daniel A.C. Martin
Latest version: 0.1.9

React Foundry - 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 @react-foundry/user-info
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import { UserInfoContext, useUserInfo } from '@react-foundry/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: @react-foundry/vite-html-react
Description: A Vite plugin for importing HTML files as React components.
Author: Daniel A.C. Martin
Latest version: 0.1.9

React Foundry - Vite HTML React
===============================

A [Vite] plugin for importing HTML files as [React] components.


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

First install the package into your project:

```shell
npm install -D @react-foundry/vite-html-react
```

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

```js
import { defineConfig } from 'vite';
import html from '@react-foundry/vite-html-react';

export default defineConfig({
  plugins: [
    html({
      extensions: ['.htm']
    }),
    [...]
  ],
  [...]
});

[...]
```

You can then import HTML files in the form of a React component:

```jsx
import Html from './path/to/content.htm';

const Component = () => (
  <Html />
);
```

Typically, the HTML file would only contain a portion of your HTML, rather than a full page.

**Note:**: Vite doesn't allow for `.html` files to be used; by default we us `.htm` instead.


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

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

```shell
pnpm install
```


### Building

Build the package by compiling the source code.

```shell
npm run build
```


### Clean-up

Remove any previously built files.

```shell
npm run clean
```


[Vite]: https://vite.dev/
[React]: https://react.dev/