open-index/open-npm huggingface dataset:
npm package: @pod-point/form-fields
Description: Focus/change form field interactions
Author: POD Point
Latest version: 1.3.0

# Form fields

Provides the logic for `input` and `textarea` label and size behaviours.

## Use

    import formFields from '@pod-point/form-fields';

    formFields.init();

If you're using [Module Loader](https://github.com/Pod-Point/javascript-modules/tree/master/module-loader), you can pass this module to that as a `persistent` module:

    moduleLoader({
        persistent: {
            formFields
        }
    });
npm package: @pod-point/google-maps-marker-cluster
Description: Cluster Google Maps markers
Author: POD Point
Latest version: 1.0.2

# Cluster Google Map Markers

Modified from Luke Mahe's MarkerClusterer for Google Maps v3.

## Usage

```javascript
import MarkerCluster from '@pod-point/google-maps-marker-cluster';

new MarkerCluster(map [Map], markers [array], options [object]);
```
npm package: @pod-point/module-loader
Description: Module loader.
Author: POD Point
Latest version: 2.2.0

# Module loader

The module loader is used for managing the lifecycle of JavaScript modules on traditional or dynamic-content websites.

## Init

    import loadModules from '@pod-point/module-loader';

    loadModules({
        foo,
        bar
    });

## Use

#### Modules:
- Export `init` methods.
- Can optionally export a `refresh` method, which is called on all persistent modules on subsequent `load`.
- Can be initialised once per page.
- Are maintained between page transitions.

### Handling dynamic page transitions

    loadModules();

Rerunning `loadModules` (without arguments) will run through all active persistent modules and fire their `refresh` method (if present).
npm package: @pod-point/notifications-js
Description: A notification service for JS.
Author: Pod Point Software Team
Latest version: 1.0.1-1

# Notifications JS

[![Build Status](https://travis-ci.com/Pod-Point/notifications-js.svg?branch=master)](https://travis-ci.com/Pod-Point/notifications-js)
[![codecov](https://codecov.io/gh/Pod-Point/notifications-js/branch/master/graph/badge.svg)](https://codecov.io/gh/Pod-Point/notifications-js)

A notifications service for JS.

## Usage

To install this package, run the following command:
```bash
npm install @pod-point/notifications-js
```

Once installed, simply create a new instance of the Notifications service and begin using it e.g.
```js
import { SNS } from '@pod-point/notifications-js';

const notificationService = new SNS();

const notification = await notificationService.publish('message', 'topic');
```

## Development

### Installation

To install this packages dependencies, run the following command:
```bash
npm install
```

### Testing

This package uses jest. To run the test suites for this project, run the following command:

```bash
npm run test
```

### Releases

This package is distributed via NPM and published automatically by Travis when creating a tagged commit. This can be done in one of 2 ways:

#### 1. Pre-merge via the CLI

**Before** merging your PR following code review & QA, run the following commands to update the package version and create a new release/tag.
```
npm version <major|minor|patch|prerelease>
git push && git push --tags
```

If you forget to do this before merging, this is not a problem, just create a new branch from master and run these same commands, remembering to open and merge a PR for this branch so that the `package.json` file is updated, alternatively, see option 2.

#### 2. Post-merge via code & GitHub

**After** merging your code changes, create a new branch/PR from master and update the package version in `package.json` to whatever you wish the next release to be.

**Before** merging this PR, create a release via GitHub with a tag version to match this package version number, this will trigger the tagged commit and in turn the automatic deployment to NPM.
npm package: @pod-point/pod-point-ui-toolkit
Description: A prototyping framework based on the pod point website, that can be used for getting a project off the ground quickly.
Author: Software Team
Latest version: 2.13.0

# pod-point-ui-toolkit

[![npm](https://img.shields.io/npm/v/@pod-point/pod-point-ui-toolkit.svg)](https://www.npmjs.com/package/@pod-point/pod-point-ui-toolkit) [![test](https://github.com/Pod-Point/pod-point-ui-toolkit/actions/workflows/test.yml/badge.svg)](https://github.com/Pod-Point/pod-point-ui-toolkit/actions/workflows/test.yml)

The Pod Point frontend framework is a library of base styles and components designed for rapid prototyping.

## Installation

```bash
npm install --save @pod-point/pod-point-ui-toolkit
```

## Development

First, install all of the Node modules needed:

```bash
git clone git@github.com:Pod-Point/pod-point-ui-toolkit.git
cd pod-point-ui-toolkit
npm install
```

## Versioning

Use NPM to create a new version in your PR branch:

```bash
npm version [major | minor | patch]
```

Then you need to push the version commit and the tags up:

```bash
git push && git push --tags
```

Once your version change in `package.json` is merged into master Travis will deploy this to NPM for you.

## Gulp tasks

Gulp and gulp dev - compiles pages, assets and creates Sass sourcemaps

```bash
gulp
```

```bash
gulp dev
```

Gulp watch - compiles pages and assets and spins up a new development server at [http://localhost:3000](http://localhost:3000) with `/dist` as the document root.

```bash
gulp watch
```

Gulp prod - compiles pages and assets, minifies CSS and JS and creates SASS sourcemaps

```bash
gulp prod
```

## Documentation

See full docs [here](https://pod-point.github.io/pod-point-ui-toolkit)
npm package: @pod-point/react-dom-components
Description: The Pod Point React DOM Components is a library of base styles and components designed for rapid prototyping for React Web projects.
Author: Pod Point Software Team
Latest version: 1.0.4

## Getting Started
The Pod Point React DOM Components is a library of base styles and components designed for rapid prototyping for React Web projects.

### Installation
```
npm install --save @pod-point/react-dom-components
```

### Development
```
git clone git@github.com:Pod-Point/react-dom-components.git
cd react-dom-components
npm install
```

### Tasks
To run a local development version of the components in Docz
```
npm install run docz:dev
```

To run a build version of the components in Docz
```
npm install run docz:build
```

To make edits to the TailwindCSS config or styles
```
npm install run tailwind:watch
```

To build the TailwindCSS config or styles
```
npm install run tailwind:build
```

### Linters and IDE setup
We use [Pod Point's React ESLint package](https://github.com/Pod-Point/eslint-config-podpoint-react) for React projects.
For CSS pattern consistency, we use a third party package called ```stylelint```. This is required as we are using Tailwind's ```@apply``` method in the custom CSS files.
To see how to set this up in VS Code, please refer to [this article.](https://www.meidev.co/blog/visual-studio-code-css-linting-with-tailwind/)
npm package: @pod-point/react-native-page-swiper
Description: Page Swiper component for React Native.
Author: Christopher Garvis
Latest version: 1.0.0

# react-native-page-swiper

Page Swiper component for React Native.

## Getting Started

- [Installation](#installation)
- [Basic Usage](#basic-usage)
- [Properties](#properties)
- [Examples](#examples)
- [Development](#development)

### Installation

```bash
$ npm i react-native-page-swiper --save
```

### Basic Usage

- Install `react-native` first

```bash
$ npm i react-native -g
```

- Initialization of a react-native project

```bash
$ react-native init myproject
```

- Then, edit `myproject/index.ios.js`, like this:

```jsx
var Swiper = require('react-native-page-swiper')
// es6
// import Swiper from 'react-native-page-swiper'

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

var styles = StyleSheet.create({
  wrapper: {
  },
  slide1: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#9DD6EB',
  },
  slide2: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#97CAE5',
  },
  slide3: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#92BBD9',
  },
  text: {
    color: '#fff',
    fontSize: 30,
    fontWeight: 'bold',
  }
})

var swiper = React.createClass({
  render: function() {
    return (
      <Swiper style={styles.wrapper}>
        <View style={styles.slide1}>
          <Text style={styles.text}>Hello Swiper</Text>
        </View>
        
        <View style={styles.slide2}>
          <Text style={styles.text}>Beautiful</Text>
        </View>
        
        <View style={styles.slide3}>
          <Text style={styles.text}>And simple</Text>
        </View>
      </Swiper>
    )
  }
})

AppRegistry.registerComponent('swiper', () => swiper)
```

### Properties

| Prop  | Default  | Type | Description |
| :------------ |:---------------:| :---------------:| :-----|
| index | `0` | `number` | Index number of initial slide. |
| pager | `true` | `boolean` | Show pager. |
| onPageChange |  | `function` | Callback when page changes. |
| activeDotColor | `blue` | `string` | CSS color of the dot for the current page. |
| threshold | `25` | `number` | Threshold before the swiper captures the pan responder |


### Examples

See code in [examples](https://github.com/fixt/react-native-page-swiper/tree/master/examples/swiper).

## Questions

Feel free to [contact us](mailto:code@fixt.co) or [create an issue](https://github.com/fixt/react-native-page-swiper/issues/new)

> Inspired by [leecade/react-native-swiper](https://github.com/leecade/react-native-swiper/) & [brentvatne/react-native-scrollable-tab-view](https://github.com/brentvatne/react-native-scrollable-tab-view).
npm package: @pod-point/react-native-swipeout
Description: iOS-style swipeout buttons behind component
Author: POD Point
Latest version: 3.1.0

# react-native-swipeout
iOS-style swipeout buttons that appear from behind a component

![swipeout preview](http://i.imgur.com/oCQLNFC.gif)

## Installation
```
npm install --save react-native-swipeout
```

## Usage example

See example/index.ios.js for a more detailed example.
See the [Wiki](https://github.com/dancormier/react-native-swipeout/wiki) usage tips.
To use swipeout behind a iOS-style listitem, try [react-native-listitem](https://github.com/dancormier/react-native-listitem).

```
var Swipeout = require('react-native-swipeout')

// Buttons
var swipeoutBtns = [
  {
    text: 'Button'
  }
]

// Swipeout component
<Swipeout right={swipeoutBtns}>
  <View>
    <Text>Swipe me left</Text>
  </View>
</Swipeout>

```

## Props

Prop            | Type   | Optional | Default   | Description
--------------- | ------ | -------- | --------- | -----------
autoClose       | bool   | Yes      | false     | auto close on button press
backgroundColor | string | Yes      | '#dbddde' |
close           | bool   | Yes      |           | close swipeout
left            | array  | Yes      | []        | swipeout buttons on left
onOpen          | func   | Yes      |           |
right           | array  | Yes      | []        | swipeout buttons on right
scroll          | func   | Yes      |           | prevent parent scroll

##### Button props

Prop            | Type   | Optional | Default   | Description
--------------- | ------ | -------- | --------- | -----------
backgroundColor | string | Yes      | '#b6bec0' | background color
color           | string | Yes      | '#ffffff' | text color
component       | string | Yes      | null      | pass custom component to button
onPress         | func   | Yes      | null      | function executed onPress
text            | string | Yes      | 'Click Me'| text
type            | string | Yes      | 'default' | default, primary, secondary
underlayColor   | string | Yes      | null      | button underlay color on press

## To Do

[https://github.com/dancormier/react-native-swipeout/issues](https://github.com/dancormier/react-native-swipeout/issues)
npm package: @pod-point/redux-utils
Description: Common Redux utils
Author: POD Point
Latest version: 1.0.1

# Redux utils

## bindSelectors

### Bind state selectors to specific Redux store

```javascript
const selectors = bindSelectors(unboundSelectors, store.getState);
```

A selector is a function that takes a state, and returns a specific part of that state. Eg: 

```javascript
export const getLoggedInUser = state => state.loggedInUser;
```

`bindSelectors` is provided the `store.getState` function - the Redux state getter. So by binding the selectors to the state with `bindSelectors` we can run `getLoggedInUser()` without an explicit `state` argument.

## createSubscriber

### Create a subscriber that runs when the selected state changes

```javascript
const onStateChange = createSubscriber(store.subscribe);

onStateChange(boundSelector, (selectedState) => console.log("Current state is: ", selectedState));
```

`createSubscriber` takes the `store.subscribe` functions and returns a new function that can be provided with a subscriber bound to that `state` (see: `bindSelectors`) and a callback.

`callback` will run **only when the portion of the state returned by the selector changes**.

## bindComponentToState

### Binds Redux state to React Component state

```javascript
const store = createStore(reducers);

export default class ExampleApp extends Component {
    constructor() {
        super(props);
        bindComponentToState(this, store);
    }
}
```

`bindComponentToState` takes a reference to the highest-level React Component and a Redux store and creates a subscriber that updates the Component state when the store's state changes.
npm package: @pod-point/tech-test-mirage-api
Description: MirageJS API for use in front end and mobile tech tests
Author: Pod Point Software Team
Latest version: 0.2.0

# Tech Test Mirage API

![run-tests](https://github.com/Pod-Point/tech-test-mirage-api/actions/workflows/run-tests.yml/badge.svg)

This package provides a [MirageJS](https://miragejs.com/) API for use in mobile and front-end tech tests.

## Installation

```
npm install --save @pod-point/tech-test-mirage-api
```

## Usage

Import `createServer` and call from the root of your application.

### React

Example:

```javascript
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { createServer } from "@pod-point/tech-test-mirage-api";

if (process.env.NODE_ENV === "development") {
  createServer();
}

ReactDOM.render(<App />, document.getElementById("root"));
```

See the [Mirage docs](https://miragejs.com/quickstarts/react/develop-an-app/#step-3-start-your-server-in-development) for more information.

### React Native

Example:

```javascript
import React from "react"
import { createServer } from "@pod-point/tech-test-mirage-api"

if (window.server) {
  server.shutdown()
}

window.server = createServer();

export default function App() {
  [...]
}
```

See the [Mirage docs](https://miragejs.com/quickstarts/react-native/development/#step-2-create-a-server-alongside-your-networking-code) for more information.

## Development

### Formatting

Code formatting is provided via [Prettier](https://prettier.io/) and can code can automatically be formatted using:

```
npm run prettier
```

### Tests

Jest tests can be run as follows:

```
npm run test
```

### Publishing

To publish a new version of the package on NPM:

- Run `npm version` to bump the version number and tag a new version:

```
npm version <major|minor|patch>
```

- Push the new version:

```
git push --follow-tags
```

- Create a release on GitHub using the new tag. The `npm-publish` workflow will automatically publish this to NPM.