open-index/open-npm huggingface dataset:
npm package: @scottish-government-design-system/content-blocks
Description: Construct page layouts with content blocks that extend the Scottish Government Design System
Author: Scottish Government Digital Design system team
Latest version: 0.1.2
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Scottish Government Design System content blocks
Construct page layouts with content blocks that extend the Scottish Government Design System.

## Feedback, help or support

If you need any help or want to give any feedback you can e-mail the Design System team at: [designsystem@gov.scot](mailto:designsystem@gov.scot).

## How to use in your project

We recommend installing the package using node package manager (npm).

### Install

To install your own local copy of the package follow these steps:

1. Ensure you have [node.js](https://nodejs.org/en/) installed. We recommend using the latest Long Term Support (LTS) version, or a minimum of version 8.10.0.
2. Run the command `npm install @scottish-government-design-system/content-blocks` in your chosen directory. This will install the project and its dependencies.

### Include in your project

We recommend importing the Sass for content blocks separately, along with the Sass from the Scottish Government Design System.

#### Import Sass files

If you already are using the Scottish Government Design System in your project then you only need to import the additional Sass for content blocks. To import the content block Sass into your project's Sass use:

```
@import "/path/to/node_modules/@scottish-government-design-system/content-blocks/src/content-blocks/all-content-blocks";
```
**This must be imported after the Scottish Government Design System Sass.**

#### Build production files

Alternatively you may wish to generate a single CSS file to include in your project. These optimised CSS assets can be included in your project and they include the Scottish Government Design System CSS in the generated CSS files. **You therefore don't need to include the design system separately in your project.**

Run:

```
npm run sass-min
```

This will compile the various Sass files and update the contents of the `/dist` directory with the newly generated compressed CSS file.

To create a non-compressed CSS file, run:

```
npm run sass
```
npm package: @scottish-government-design-system/prototype-templates
Description: Construct prototypes using the Scottish Government Design System.
Author: Scottish Government Digital Design system team
Latest version: 0.4.0

# Scottish Government Design System templates for GOV.UK Prototype Kit

This plugin for the [GOV.UK Prototype Kit](https://github.com/alphagov/govuk-prototype-kit) lets you create prototypes using the [Scottish Government Design System](https://github.com/scottish-government-design-system/design-system). It contains a set of common page templates and has the Scottish Government Design System as a dependency.

## How to install the Scottish Government Design System Prototype Templates plugin
1. follow the [instructions on creating a new GOV.UK prototype](https://prototype-kit.service.gov.uk/docs/create-new-prototype)
2. open a terminal window within that folder and run the following command to install the plugin
``` npm install @scottish-government-design-system/prototype-templates ```
3. in the same terminal window then run the following command, to install the Scottish Government Design System dependency,
``` npm install @scottish-government/design-system ```
4. in your text editor create a `settings.scss` file in `app/assets/sass` and add `$govuk-global-styles: false;` to it to prevent GOV.UK Frontend styles overriding other styling that you have

### Optionally uninstall the GOV.UK Frontend plugin
The Scottish Government Design System does not require the GOV.UK Design System code (GOV.UK Frontend) so you may wish to uninstall this to reduce the file size of your prototype.
1. add `"allowGovukFrontendUninstall": true` to your prototype config file at `app/config.json` to unlock the option to uninstall the plugin
2. in the browser, navigate to the 'Manage your prototype' section and go to 'Plugins'
3. click on the uninstall button of the plugins you wish to remove

## Alternative install using online code editors
If you are unable to install Node on your machine, it is possible to use the GOV.UK Prototype Kit with online code editors such as [GitHub Codespaces](https://github.com/codespaces).
1. Sign up for a [GitHub account](https://github.com/signup) if you don't have one
2. Go to [GitHub Codespaces](https://github.com/codespaces)
3. Use the 'Blank' quick start template to create a new codespace
4. Follow the installation instructions above to install the GOV.UK Prototype Kit and then the Scottish Government plugins

## How to use the Scottish Government Design System Prototype Templates plugin
1. in the browser, navigate to the 'Manage your prototype' section and go to 'Templates'
2. create pages using the available templates

View [more information on templates](https://github.com/scottish-government-design-system/prototype-templates/blob/main/docs/templates.md).

## Feedback, help and support
If you need help or support you can e-mail us at [designsystem@gov.scot](mailto:designsystem@gov.scot)
npm package: @scottish-government/designsystem-react
Description: A React/JSX implementation of the Scottish Government Design System
Author: Scottish Government Digital Design System team
Latest version: 0.13.0

# @scottish-government/designsystem-react

This repository contains a React implementation of the [Scottish Government Design System](https://designsystem.gov.scot/).

There is a documentation site showing what is in this implementation and how to use it here: https://designsystem-react.vercel.app/

## 🚧 Under construction 🚧

Warning: This project is in an alpha state and could potentially receive large breaking changes with little warning while it is being developed.

## Feedback, help or support

If you need any help or want to give any feedback you can e-mail the Design System team at: [designsystem@gov.scot](mailto:designsystem@gov.scot).

## Installation

We recommend installing the package using npm. The npm package includes the SG Design System as a dependency.

`npm install @scottish-government/designsystem-react`

## Run tasks

`npm run tsc`  
Compile the source code from TypeScript/TSX into JavaScript/JSX files, located in `/dist`

`npm run test`  
Run unit tests

`npm run coverage`  
Run unit tests and output a coverage report, located in `/coverage`

`npm run storybook`  
Start a local server running the Storybook for the project

`npm run svgr`
Create icon components for each SVG icon used by the Design System. These icon components are present in the repository. You likely will never need to run this command as an end user.
npm package: @scottish-government/pattern-library
Description: Design System for Scottish public sector websites
Author: mygov.scot Digital Engineering team
Latest version: 0.0.381
Deprecated: This package has been renamed to @scottish-government/design-system

# Digital Scotland Design System Pattern Library

This pattern library contains all the code needed to start building user interfaces for websites and web applications for the Scottish Government and other Scottish public sector bodies.

See live examples of the available components, alongside guidance on how and when to use them in the [Digital Scotland Design System](https://designsystem.gov.scot/).

## Feedback, help or support

If you need any help or want to give any feedback you can e-mail the Design System team at: [designsystem@gov.scot](mailto:designsystem@gov.scot).

## How to use in your project

We recommend [installing the pattern library using node package manager (npm)](https://designsystem.gov.scot/get-started/installation/).

### Install

To install your own local copy of the pattern library follow these steps:

1. Ensure you have [node.js](https://nodejs.org/en/) installed. We recommend using the latest Long Term Support (LTS) version, or a minimum of version 8.10.0.
2. Run the command `npm install @scottish-government/pattern-library` in your chosen directory. This will install the project and its dependencies.

### Run tasks

Once installed the following tasks can be run:

#### Build production files

These are the optimised CSS, JavaScript files and static assets that should be included in your project.

Run:

```
npm run prepare
```

This will compile the various files and conduct a series of automated tests and update the contents of the `/dist` directory with the newly generated files.
npm package: @scottishcyclops/node-player
Description: Higher level abstraction on top of libgroove for node. Essentially a simple music player
Author: Scott Winkelmann
Latest version: 1.0.0

# node-player

Higher level abstraction on top of libgroove for node.
Essentially a simple music player

## Usage

```javascript
const player = require("node-player")

const musics = [ "/home/me/Music/a.ogg", "/home/me/Music/b.wav" ]

async function main()
{
    // start playing the musics, shuffled
    await player.start(musics, true)

    // skip the music every 5 secondes
    setInterval(player.next, 5000)

    // stop it after 20 secondes
    setTimeout(player.stop, 20000)
}

main().catch(console.error)
```

## Functions

*More documentation is visible when calling the functions*

__start__: play the given musics, possibly shuffled

__stop__: stop the playback

__pause__: pause the playback

__resume__: resume the playback

__next__: skip the current music in the playlist

__getCurrentMusicInfos__: get infos about the music playing

__setGain__: set the volume gain between 0 and 1

__isPaused__: is the playback paused

__isPlaying__: is anything in the playlist

## End

Please report any bugs or feature request on [Github](https://github.com/ScottishCyclops/node-player/issues)
npm package: @scottishcyclops/node-recorder
Description: A simple cross-platform audio recoding utility for node
Author: Scott Winkelmann
Latest version: 1.1.1

# node-recorder

A simple cross-platform audio recoding utility for node

It requires the installation of the command line utility `rec`, which is part of `sox`

## Examples

__Record audio, trimming the beginning and the end to `audio.wav`__

```javascript
const mic = require('@scottishcyclops/node-recorder')
const audio = require('@scottishcyclops/node-audio')
const { createWriteStream } = require('fs')

async function main()
{
  const audiofile = __dirname + '/audio.wav'
  const out = createWriteStream(audiofile, { flags: 'w+', encoding: 'binary' })

  const recorder = mic.start({ trimEnd: true })

  recorder.stdout.pipe(out)

  out.once('close', async () => {
    mic.stop(recorder)
    await audio.play(audiofile)
  })
}

main().catch(console.error)
```

Please report any bugs [here](https://github.com/ScottishCyclops/node-recorder/issues)
npm package: @scottjg/auto-complete-element
Description: Auto-complete input values from server results
Latest version: 1.0.13

# &lt;auto-complete&gt; element

Auto-complete input values from server search results.

## Installation

```
$ npm install --save @github/auto-complete-element
```

## Usage

```js
import '@github/auto-complete-element'
```

```html
<auto-complete src="/users/search" aria-owns="users-popup">
  <input type="text">
  <ul id="users-popup"></ul>
</auto-complete>
```

The server response should include the items that matched the search query.

```html
<li role="option">Hubot</li>
<li role="option">Bender</li>
<li role="option">BB-8</li>
<li role="option" aria-disabled="true">R2-D2 (powered down)</li>
```

The `data-autocomplete-value` attribute can be used to define the value for an
item whose display text needs to be different:

```html
<li role="option" data-autocomplete-value="bb8">BB-8 (astromech)</li>
```

## Attributes

- `open` is true when the auto-complete result list is visible
- `value` is the selected value from the list or the empty string when cleared

## Events

### Network request lifecycle events

Request lifecycle events are dispatched on the `<auto-complete>` element. These events do not bubble.

- `loadstart` - The server fetch has started.
- `load` - The network request completed successfully.
- `error` - The network request failed.
- `loadend` - The network request has completed.

Network events are useful for displaying progress states while the request is in-flight.

```js
const completer = document.querySelector('auto-complete')
const container = completer.parentElement
completer.addEventListener('loadstart', () => container.classList.add('is-loading'))
completer.addEventListener('loadend', () => container.classList.remove('is-loading'))
completer.addEventListener('load', () => container.classList.add('is-success'))
completer.addEventListener('error', () => container.classList.add('is-error'))
```

### Auto-complete events

**`auto-complete-change`** is dispatched after a value is selected. In `event.detail` you can find:

- `relatedTarget`: The HTMLInputElement controlling the auto-complete result list.

```js
completer.addEventListener('auto-complete-change', function(event) {
  console.log('Auto-completed value chosen or cleared', completer.value)
  console.log('Related input element', event.relatedTarget)
})
```

## Browser support

Browsers without native [custom element support][support] require a [polyfill][].

- Chrome
- Firefox
- Safari
- Microsoft Edge

[support]: https://caniuse.com/#feat=custom-elementsv1
[polyfill]: https://github.com/webcomponents/custom-elements

## Development

```
npm install
npm test
```

## License

Distributed under the MIT license. See LICENSE for details.
npm package: @scottjgilroy/no-sleep
Description: Prevent display sleep and enable wake lock in any Android or iOS web browser
Author: Scott Gilroy
Latest version: 0.18.0

# no-sleep

Prevent display sleep and enable wake lock in all Android and iOS web browsers.

Initially written by [Rich Tibbet](https://github.com/richtr/NoSleep.js)

## Installation

This package is published to npm as **@zakj/no-sleep** and can be installed
with:

`npm install @zakj/no-sleep`

## Build from source

Install all development dependencies with:

`pnpm install`

To build this library run:

`pnpm run build`

## Usage

Import ES6 module:

```javascript
import NoSleep from '@zakj/no-sleep';
```

Create a new NoSleep object and then enable or disable it when needed.

To create a new NoSleep object:

```javascript
var noSleep = new NoSleep();
```

To enable wake lock:

**NOTE: This function call must be wrapped in a user input event handler e.g. a
mouse or touch handler**

```javascript
// Enable wake lock.
// (must be wrapped in a user input event handler e.g. a mouse or touch handler)
document.addEventListener(
  'click',
  function enableNoSleep() {
    document.removeEventListener('click', enableNoSleep, false);
    noSleep.enable();
  },
  false,
);
```

To disable wake lock:

```javascript
// Disable wake lock at some point in the future.
// (does not need to be wrapped in any user input event handler)
noSleep.disable();
```
npm package: @scottmunday84/combine-reducers
Description: A simple shim for combining reducers. Built for React, but it doesn't have to be.
Author: Scott Munday
Latest version: 1.0.6

# combine-reducers [![npm version](https://badge.fury.io/js/%40scottmunday84%2Fcombine-reducers.svg)](https://badge.fury.io/js/%40scottmunday84%2Fcombine-reducers) 

A simple shim for combining reducers. Built for React, but it doesn't have to be.

### Installation and use

Install npm packages:

```
yarn install -S @scottmunday84/combine-reducers
```

If you want to use this with React hooks, you should install my react-consumer package too:

```
yarn install -S @scottmunday84/react-consumer
```

And to use:
```jsx harmony
import combineReducers from '@scottmunday84/combine-reducers';
import React, {createContext, useReducer} from 'react';

/* First Reducer */
const firstReducer = (state, action) => {
  switch (action.type) {
    case 'ACTION_FOO':
      return {
        ...state,
        foo: action.payload
      };
    default:
      return state;
  }
};

/* Second Reducer */
const secondReducer = (state, action) => {
  switch (action.type) {
    case 'ACTION_BAR':
      return {
        ...state,
        bar: action.payload
      };
    default:
      return state;
  }
};

// Context is empty; will be replaced by initialState later
export const store = createContext(null);   
const {Provider} = store;

const initialState = {
  firstReducer: {
    foo: true
  },
  secondReducer: {
    bar: false
  }
};

const StoreProvider = ({children}) => {
  // Use useReducer hook with combineReducers() function
  const [state, dispatch] = useReducer(combineReducers({
    firstReducer,
    secondReducer
  }), initialState);
  
  return (
    <Provider value={{state, dispatch}}>
      {children}
    </Provider>
  );
}

export default StoreProvider;
```

Use the StoreProvider (like normal): 
```jsx harmony
import Layout from "./components/Layout";
import StoreProvider from "./reducers/store";
import React from 'react';

let App = () => {
  // Wrap component with StoreProvider
  return (
    <StoreProvider>
      <Layout />
    </StoreProvider>
  );
};

export default App;
```

And work from the combined context:
```jsx harmony
import {store} from "../reducers/store";
import Consumer from '@scottmunday84/react-consumer';
import React from 'react';

const Layout = () => {
  const map = ({state, dispatch}) => {
    const {firstReducer, secondReducer} = state;

    return {
      foo: firstReducer.foo,
      bar: secondReducer.bar,
      dispatchFoo: payload => dispatch('ACTION_FOO', payload),
      dispatchBar: payload => dispatch('ACTION_BAR', payload)
    };
  };
  
  return (
    <Consumer store={store} map={map}>
      {({foo, bar, dispatchFoo, dispatchBar}) => [
          <button onClick={() => dispatchFoo(!foo)}>Cal Foo</button>,
          <button onClick={() => dispatchBar(!bar)}>Call Bar</button>]}
    </Consumer>);
};


export default Layout;
```

It really is THAT easy!
npm package: @scottmunday84/react-consumer
Description: A simple approach to responding from a React context through a quick consumer.
Author: Scott Munday
Latest version: 1.0.1

# react-consumer [![npm version](https://badge.fury.io/js/%40scottmunday84%2Freact-consumer.svg)](https://badge.fury.io/js/%40scottmunday84%2Freact-consumer)

A simple approach to responding from a React context through a quick consumer.

### Installation and use

Install npm packages:

```
yarn install -S @scottmunday84/react-consumer
```

And to use:
```jsx harmony
import store from '../reducers/store';
import Consumer from '@scottmunday84/react-consumer';
import React from 'react';

const Layout = () => {
  const map = ({state, dispatch}) => {
    return {
      foo: state.foo,
      dispatchFoo: payload => dispatch('ACTION_FOO', payload)      
    };
  };
    
  return (
    <Consumer store={store} map={map}>
      {({foo, dispatchFoo}) => <button onClick={() => dispatchFoo(!foo)}>Dispatch Foo</button>}
    </Consumer>);
};

export default Layout;
```

Happy coding!