open-index/open-npm huggingface dataset:
npm package: @hodolee/claude-pet
Description: Cute ASCII cat that lives in your tmux pane and reacts to Claude Code activity
Latest version: 1.0.1

# claude-pet 🐱

> ASCII cat companion for Claude Code — reacts to every tool call in real time.

A cute ASCII cat lives in a tmux pane below your Claude Code session.
It watches what Claude is doing and reacts with animations.

```
┌── Claude Cat ──────────────┐
│    /\_/\                   │
│   ( -.- )                  │
│    > ~ <   ...             │
│    |   |                   │
│    ~_~_~                   │
│  ● thinking...             │
└────────────────────────────┘
```

## States

| State | Trigger | Animation |
|-------|---------|-----------|
| 🚶 `idle` | Claude finished responding | Cat walks left and right |
| 🤔 `thinking` | Tool call started | Cat sits and sways tail with `...` |
| 🎉 `happy` | Tool call succeeded | Cat jumps with ♪ notes |
| 😱 `error` | Tool call failed | Cat's fur stands up with `!` |
| 💤 `sleep` | Idle for 5 minutes | Cat sleeps with ZZZ |

## Requirements

- [Claude Code](https://claude.ai/code)
- [tmux](https://github.com/tmux/tmux) (`apt install tmux`)
- Node.js >= 18

## Installation

```bash
claude plugin install claude-pet
```

Or from GitHub:
```bash
claude plugin install github:hodolee246/claude-pet
```

## Usage

Start the cat in a tmux pane below Claude Code:
```
/cat start
```

Stop it:
```
/cat stop
```

> **Note**: Claude Code must be running inside a tmux session.
> Start one with: `tmux new-session -s main` then run `claude`.

## How It Works

```
Claude Code events
  PreToolUse      → state: "thinking"
  PostToolUse     → state: "happy"
  PostToolUseFailure → state: "error"
  Stop            → state: "idle"
       ↓
~/.claude/claude-pet/state.json
       ↓
cat-daemon.mjs (tmux pane)
  polls state every 200ms → renders ASCII animation
```

## License

MIT © [hodolee246](https://github.com/hodolee246)
npm package: @hodooi/eslint-config-hodooi
Description: Eslint config for hodooi
Author: RabbitDoge
Latest version: 1.2.0

# eslint-config-pancake

Pancake Eslint config with:

- Airbnb config
- Typescript
- Prettier

## Usage

```
npx install-peerdeps --dev @pancakeswap/eslint-config-pancake
```

Add `"extends": "@pancakeswap/eslint-config-pancake"` to your eslint config file.
npm package: @hodooi/uikit
Description: Set of UI components for hodooi projects
Latest version: 0.49.1

# 🥞 Pancake UIkit

[![Version](https://img.shields.io/npm/v/@pancakeswap-libs/uikit)](https://www.npmjs.com/package/@pancakeswap-libs/uikit) [![Size](https://img.shields.io/bundlephobia/min/@pancakeswap-libs/uikit)](https://www.npmjs.com/package/@pancakeswap-libs/uikit)

Pancake UIkit is a set of React components and hooks used to build pages on Pancake's apps. It also contains a theme file for dark and light mode.

## Install

`yarn add @pancakeswap-libs/uikit`

## Setup

### Theme

Before using Pancake UIkit, you need to provide the theme file to styled-component.

```
import { ThemeProvider } from 'styled-components'
import { light, dark } from '@pancakeswap-libs/uikit'
...
<ThemeProvider theme={isDark}>...</ThemeProvider>
```

### Reset

A reset CSS is available as a global styled component.

```
import { ResetCSS } from '@pancakeswap-libs/uikit'
...
<ResetCSS />
```

### Types

This project is built with Typescript and export all the relevant types.

## How to use the UIkit

If you want to use components from the UIkit, check the [Storybook documentation](https://pancakeswap.github.io/pancake-uikit/)
npm package: @hods/a-z-navigation
Description: A component to help users navigate an A to Z.
Author: Daniel A.C. Martin
Latest version: 0.5.2

HODS - A-Z Navigation
=====================

A component to help users navigate an A to Z.


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

First install the package into your project:

```shell
npm install -S @hods/a-z-navigation
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import AZNavigation from '@hods/a-z-navigation';

export const MyComponent = props => (
  <AZNavigation />
);

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: @hods/alert
Description: Alert users to important information.
Author: Daniel A.C. Martin
Latest version: 0.5.2

HODS - Alert
============

Alert users to important information.


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

First install the package into your project:

```shell
npm install -S @hods/alert
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import Alert from '@hods/alert';

export const MyComponent = props => (
  <Alert heading="New passport">
    We'll send your new passport by secure delivery. The cost is included in the passport fee.
  </Alert>
);

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: @hods/alerts
Description: Alert users to important information.
Author: Daniel A.C. Martin
Latest version: 0.1.5

HODS - Alert
============

Alert users to important information.


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

First install the package into your project:

```shell
npm install -S @hods/alert
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import Alert from '@hods/alert';

export const MyComponent = props => (
  <Alert heading="New passport">
    We'll send your new passport by secure delivery. The cost is included in the passport fee.
  </Alert>
);

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: @hods/components
Description: All Home Office Design System components.
Author: Daniel A.C. Martin
Latest version: 0.5.2

HODS - Components
=================

All Home Office Design System components.


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

First install the package into your project:

```shell
npm install -S @hods/components
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import { Header, Footer } from '@hods/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: @hods/create
Description: A project and prototype initialiser.
Author: Daniel A.C. Martin
Latest version: 0.5.2

HODS - 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 @hods
```

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: @hods/date-display
Description: Displays a date in accordance with Gov style guidance
Author: Daniel A.C. Martin
Latest version: 0.5.2

HODS - Date Display
===================

Displays a date in accordance with Gov style guidance


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

First install the package into your project:

```shell
npm install -S @hods/date-display
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import DateDisplay from '@hods/date-display';

export const MyComponent = props => (
   <DateDisplay date="2022-07-20" />
);

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: @hods/date-time
Description: Displays date and time inline with Gov style guidance
Author: Daniel A.C. Martin
Latest version: 0.5.2

Hods - Date Time
================

Displays date and time inline with Gov style guidance


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

First install the package into your project:

```shell
npm install -S @hods/date-time
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import DateTime from '@hods/date-time';

export const MyComponent = props => (
  <DateTime
    dateTime="2022-07-21T22:37:34.570Z"
    precedence="date"
    clockType={24}
  />
);

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: @hods/expandable-banner
Description: Component that provides both high level and more detailed warning messages
Author: Daniel A.C. Martin
Latest version: 0.5.2

HODS - Status Banner
====================

Component that provides both high level and more detailed warning messages


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

First install the package into your project:

```shell
npm install -S @hods/status-banner
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import StatusBanner from '@hods/status-banner';

export const MyComponent = props => (
  <StatusBanner status="Draft">
    This licence is not active. The licence holder or
    applicant is not authorised to carry out the
    programme of work as stated in this
    licence/application.
  </StatusBanner>
);

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: @hods/footer
Description: HODS' page footer.
Author: Daniel A.C. Martin
Latest version: 0.5.2

HODS - Footer
=============

HODS' page footer.


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

First install the package into your project:

```shell
npm install -S @hods/footer
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import Footer from '@hods/footer';

export const MyComponent = props => (
  <Footer
    navigation={[
      { href: '/feedback', text: 'Feedback' },
      { href: '/help', text: 'Help' },
      { href: 'https://gov.uk/', text: 'Gov.UK home' }
    ]}
  >
    My footer message.
  </Footer>
);

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: @hods/header
Description: A component that shows users whether they are on a Home Office service and which service they are using.
Author: Daniel A.C. Martin
Latest version: 0.5.2

HODS - Header
=============

HODS' page header.


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

First install the package into your project:

```shell
npm install -S @hods/header
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import Header from '@hods/header';

export const MyComponent = props => (
  <Header
    accountHref="#/my-account"
    navigation={[
      { href: '/styles', text: 'Styles', active: true },
      { href: '/components', text: 'Components' },
      { href: '/patterns', text: 'Patterns' },
      { href: '/resources', text: 'Resources' },
      { href: '/get-involved', text: 'Get involved' }
    ]}
    title="Service name"
    signOutHref="#/auth/sign-out"
    username="User 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

```shell
npm test
```


### Building

```shell
npm run build
```


### Clean-up

```shell
npm run clean
```
npm package: @hods/highlight
Description: A component for highlighting words and short pieces of text.
Author: Daniel A.C. Martin
Latest version: 0.5.2

HODS - Highlight
================

A component for highlighting words and short pieces of text.


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

First install the package into your project:

```shell
npm install -S @hods/highlight
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import Highlight from '@hods/highlight';

export const MyComponent = props => (
  <Highlight>
    United Kingdon (UK)
  </Highlight>
);

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: @hods/loading-spinner
Description: A circular rotating loading spinner.
Author: Daniel A.C. Martin
Latest version: 0.5.2

HODS - Loading-Spinner
======================

A circular rotating loading spinner.


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

First install the package into your project:

```shell
npm install -S @hods/loading-spinner
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import LoadingSpinner from '@hods/loading-spinner';

export const MyComponent = props => (
  <LoadingSpinner>Loading the next task in your case load<LoadingSpinner/>
);

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: @hods/page
Description: A fully Home Office branded page with content sandwiched between the header and footer.
Author: Daniel A.C. Martin
Latest version: 0.5.2

HODS - Page
===========

HODS' page component.


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

First install the package into your project:

```shell
npm install -S @hods/page
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import Page from '@hods/page';

export const MyComponent = props => (
  <Page
    accountHref="#/my-account"
    title="Service name"
    signOutHref="#/auth/sign-out"
    username="User name"
    navigation={[
      { href: '/styles', text: 'Styles', active: true },
      { href: '/components', text: 'Components' },
      { href: '/patterns', text: 'Patterns' },
      { href: '/resources', text: 'Resources' },
      { href: '/get-involved', text: 'Get involved' }
    ]}
    footerNavigation={[
      { href: '/feedback', text: 'Feedback' },
      { href: '/help', text: 'Help' },
      { href: 'https://gov.uk/', text: 'Gov.UK home' }
    ]}
  >
    <h1>Default page template</h1>
    <p>The header inspires trust with the department logo, while the service name helps users understand which service they are using.</p>
    <p>The footer includes information about the department with relevant links. White background helps to clearly section the main content area.</p>
  </Page>
);

export default MyComponent;
```

This package also re-styles the secondary button component to have better contrast with the grey background.

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: @hods/pagination
Description: Component to allow separating long tables into separate tables
Author: Daniel A.C. Martin
Latest version: 0.5.2

HODS - Pagination
=================

A component for navigating a long list of results.

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

First install the package into your project:

```shell
npm install -S @hods/pagination
```

Then use it in your code as follows:

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

export const MyComponent = props => (
  <Pagination
    results="250"
    resultsPerPage="25"
    page="1"
  />
);

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: @hods/plop-pack
Description: Plop pack with misc tools.
Author: Daniel A.C. Martin
Latest version: 0.5.2

HODS - Plop Pack
================

Plop pack with misc tools.


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

First install the package into your project:

```shell
npm install -D @hods/plop-pack
```

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

```js
module.exports = plop => {
  plop.load('@hods/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: @hods/sass-base
Description: The base SASS code for HODS styling.
Author: Daniel A.C. Martin
Latest version: 0.5.2

HODS - SASS Base
================

The base SASS code for HODS 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 @hods/sass-base
```

Then use it in your code as follows:

```scss
@import '@hods/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: @hods/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.5.2

HODS - 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 @hods/service-navigation
```

Then use it in your code as follows:

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

export const MyComponent = props => (
  <ServiceNavigation
    serviceName="Service name"
    serviceHref="#"
    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: @hods/status-banner
Description: Component that provides both high level and more detailed warning messages
Author: Daniel A.C. Martin
Latest version: 0.1.15
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

HODS - Status Banner
====================

Component that provides both high level and more detailed warning messages


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

First install the package into your project:

```shell
npm install -S @hods/status-banner
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import StatusBanner from '@hods/status-banner';

export const MyComponent = props => (
  <StatusBanner status="Draft">
    This licence is not active. The licence holder or
    applicant is not authorised to carry out the
    programme of work as stated in this
    licence/application.
  </StatusBanner>
);

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: @hods/status-message
Description: An indication to the user that something has changed.
Author: Daniel A.C. Martin
Latest version: 0.5.2

HODS - Status message
=====================

An indication to the user that something has changed.


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

First install the package into your project:

```shell
npm install -S @hods/status-message
```

Then use it in your code as follows:

```jsx
import React, { createElement as h } from 'react';
import StatusMessage from '@hods/status-message';

export const MyComponent = props => (
  <StatusMessage
    status="On hold"
    actions={<A href="#">Review</A>}
  >
    due for review 10 March 2018
  </StatusMessage>
);

export default MyComponent;
```

### Examples of use

Some [basic examples] of this component can be seen in the [main docs] for the
monorepo.


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

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

```shell
pnpm install
```


### Testing

Unit tests can be run in the usual manner:
```shell
npm test
```

For visual checks of the fully rendered and styled component, run storybook:
```shell
npm run storybook
```
Once storybook is running, open the [Status Message page] in your browser.


### Building

```shell
npm run build
```


### Clean-up

```shell
npm run clean
```


[basic examples]: https://hods-poc.netlify.app/components?name=Status%20message
[main docs]: https://hods-poc.netlify.app/
[Status Message page]: http://localhost:9009/?path=/docs/status-message--status-message
npm package: @hods/time
Description: Displays a time in accordance with Gov style guidance
Author: Daniel A.C. Martin
Latest version: 0.5.2

Hods - Time
===========

Displays a time in accordance with Gov style guidance


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

First install the package into your project:

```shell
npm install -S @hods/time
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import Time from '@hods/time';

export const MyComponent = props => (
  <Time
    // 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: @hods/timeline
Description: A timeline of events
Author: Daniel A.C. Martin
Latest version: 0.5.2

HODS - Timeline
===============

A timeline of events


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

First install the package into your project:

```shell
npm install -S @hods/timeline
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import Timeline from '@hods/timeline';

export const MyComponent = props => (
  <Timeline items={[
    {
      action: 'Issue under investigation',
      by: 'Douglas Pollock',
      date: '15 Mar 2021 10:04am',
      description: 'This is a description of the event. This field accepts unformatted text only'
    },
    {
      action: 'Issue raised on GitHub',
      date: '25 Jan 2021 9:35am',
      description: 'This is a description of the event.'
    }
  ]} />
);

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: @hods/ucdm-header
Description: The page header for the UCD Manual.
Author: Daniel A.C. Martin
Latest version: 0.5.2

HODS - UCDM Header
==================

The Home Office header shows users that they are on an internal Home Office service and indicates which service they are using.

For now, this version is just for use on the User-Centred Design Manual.


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

First install the package into your project:

```shell
npm install -S @hods/ucdm-header
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import Header from '@hods/ucdm-header';

export const MyComponent = props => (
  <Header
    accountHref="#/my-account"
    searchAction="/search"
    serviceName="Service name"
    signOutHref="#/auth/sign-out"
    username="User 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: @hods/ucdm-page
Description: A UCD Manual page with content sandwiched between the header and footer.
Author: Daniel A.C. Martin
Latest version: 0.5.2

HODS - UCDM Page
================

Use this page template to keep your pages consistent with the rest of internal Home Office services.

For now, this version is just for use on the User-Centred Design Manual.


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

First install the package into your project:

```shell
npm install -S @hods/ucdm-page
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import Page from '@hods/ucdm-page';

export const MyComponent = props => (
  <Page
    serviceName="Service name"
    footerNavigation={[
      { href: '/feedback', text: 'Feedback' },
      { href: '/help', text: 'Help' },
      { href: 'https://gov.uk/', text: 'Gov.UK home' }
    ]}
  >
    <h1>Default page template</h1>
    <p>The header inspires trust with the department logo, while the service name helps users understand which service they are using.</p>
    <p>The main page content has a grey background to reduce eye-strain. Buttons in this section are slightly re-styled, for accessibility reasons.</p>
    <ButtonGroup>
      <Button>Save and continue</Button>
      <Button classModifiers="secondary">Save as draft</Button>
    </ButtonGroup>
    <p>The footer includes information about the department with relevant links. White background helps to clearly section the main content area.</p>
  </Page>
);

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: @hods/ucdm-page-banner
Description: A banner to be displayed at the top of the page, underneath the header.
Author: Daniel A.C. Martin
Latest version: 0.5.2

HODS - Page Banner
==================

A banner to be displayed at the top of the page, underneath the header.


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

First install the package into your project:

```shell
npm install -S @hods/ucdm-page-banner
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import PageBanner from '@hods/ucdm-page-banner';

export const MyComponent = props => (
  <PageBanner heading="Design and build services that work for everyone">
    Use the UCD Manual to create consistent services that put users first.
  </PageBanner>
);

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: @hods/ucdm-section
Description: A layout wrapper for sections within the UCD Manual.
Author: Daniel A.C. Martin
Latest version: 0.5.2

HODS - Section
==============

A layout wrapper for sections within the User-Centred Design Manual.


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

First install the package into your project:

```shell
npm install -S @hods/ucdm-section
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import Section from '@hods/ucdm-section';

export const MyComponent = props => (
  <Section title="Design and content" href="#" description="Guidance and standards for designing Home Office services." navigation={[
    { href: '#', text: 'Design system' },
    { href: '/design-and-content/content-style-guide', text: 'Content style guide' },
    { href: '/design-and-content/professional-standards', text: 'Professional standards and guidance' }
  ]}>
    My content.
  </Section>
);

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: @hods/ucdm-subsection
Description: A layout wrapper for subsections within the UCD Manual.
Author: Daniel A.C. Martin
Latest version: 0.5.2

HODS - Subsection
=================

A layout wrapper for subsections within the User-Centred Design Manual.


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

First install the package into your project:

```shell
npm install -S @hods/ucdm-subsection
```

Then use it in your code as follows:

```js
import React, { createElement as h } from 'react';
import Subsection from '@hods/ucdm-subsection';

export const MyComponent = props => (
  <Subsection title="My subsection" navigation={[
    { href: '#', text: 'Current page' },
    { href: '/one, text: 'One },
    { href: '/two, text: 'Two },
    { href: '/three, text: 'Three }
  ]}>
    <h1>My page</h1>
    <p>My content.</p>
  </Subsection>
);

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: @hoeks/use-abortable-fetch
Description: The [hoeks](https://github.com/onursagir/hoeks) `useAbortableFetch` hook. Make a fetch call and abort. Made with TypeScript
Latest version: 1.0.0

# @hoeks/use-abortable-fetch

The [hoeks](https://github.com/onursagir/hoeks) `useAbortableFetch` hook. Make a fetch call and abort. Made with TypeScript

## Installation

```bash
$ yarn add @hoeks/use-abortable-fetch
$ npm i --save @hoeks/use-abortable-fetch
```

## Usage

It returns 2 functions. First one is the [regular fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) function, it only appends a signal parameter. The second function is used to abort the fetch call. After aborting the AbortController gets resets allowing you to reuse the fetch function

### Example

```javascript
import * as React from 'react';
import useAbortableFetch from '@hoeks/use-abortable-fetch';

const Example: React.FunctionComponent = () => {
  const [abortAbleFetch, abort] = useAbortableFetch();

  const makeRequest = React.useCallback(() => {
    abortAbleFetch('https://example.com/');
  }, [abortAbleFetch]);

  return (
    <>
      <button onClick={makeRequest}>Make request</button>
      <button onClick={abort}>Abort request</button>
    </>
  );
};
```
npm package: @hoeks/use-persisted-state
Description: The [hoeks](https://github.com/onursagir/hoeks) `usePersistedState` hook. Persist your state variable asynchronously. By default it uses IndexedDB. Made with TypeScript
Latest version: 1.0.2

# @hoeks/use-persisted-state

The [hoeks](https://github.com/onursagir/hoeks) `usePersistedState` hook. Persist your state variable asynchronously. By default it uses IndexedDB. Made with TypeScript

## Installation

```bash
$ yarn add @hoeks/use-persisted-state
$ npm i --save @hoeks/use-persisted-state
```

## Usage

It's similar to the React.useState hook. The only difference is that you provide a second argument being the key which will be use to save the state in IndexedDB. It also returns an extra function to clear the state from IndexedDB and a 4th state indicating if the state has been hydrated

### Example

```javascript
import * as React from 'react';
import usePersistedState from '@hoeks/use-persisted-state';

const Example: React.FunctionComponent = () => {
  const [count, setCount, clear, isHydrated] = usePersistedState(1, 'example');

  if (isHydrated) return <p>Loading...</p>;

  return (
    <>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
      <button onClick={clear}>Clear me</button>
    </>
  );
};
```
npm package: @hoeks/use-persisted-state-sync
Description: The [hoeks](https://github.com/onursagir/hoeks) `usePersistedStateSync` hook. Persist your state variable into the browsers localStorage(sync). Made with TypeScript
Latest version: 1.0.1

# @hoeks/use-persisted-state-sync

The [hoeks](https://github.com/onursagir/hoeks) `usePersistedStateSync` hook. Persist your state variable into the browsers localStorage(sync). Made with TypeScript

## Installation

```bash
$ yarn add @hoeks/use-persisted-state-sync
$ npm i --save @hoeks/use-persisted-state-sync
```

## Usage

It's similar to the React.useState hook. The only difference is that you provide a second argument being the key which will be use to save the state in localStorage. It also returns a 3rd function which allows you to clear the localStorage

### Example

```javascript
import * as React from 'react';
import usePersistedStateSync from '@hoeks/use-persisted-state-sync';

const Example: React.FunctionComponent = () => {
  const [count, setCount, clear] = usePersistedStateSync(1, 'example');

  return (
    <>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
      <button onClick={clear}>Clear me</button>
    </>
  );
};
```