open-index/open-npm huggingface dataset:
npm package: @repath-studio/react-color
Description: A Collection of Color Pickers from Sketch, Photoshop, Chrome & more
Author: case
Latest version: 2.19.4

# [React Color](http://casesandberg.github.io/react-color/)

[![Npm Version][npm-version-image]][npm-version-url]
[![Build Status][travis-svg]][travis-url]
[![License][license-image]][license-url]
[![Downloads][downloads-image]][downloads-url]

* **13 Different Pickers** - Sketch, Photoshop, Chrome and many more

* **Make Your Own** - Use the building block components to make your own

## Demo

![Demo](https://media.giphy.com/media/26FfggT53qE304CwE/giphy.gif)

[**Live Demo**](http://casesandberg.github.io/react-color/)

## Installation & Usage

```sh
npm install react-color --save
```

### Include the Component

```js
import React from 'react'
import { SketchPicker } from 'react-color'

class Component extends React.Component {

  render() {
    return <SketchPicker />
  }
}
```
You can import `AlphaPicker` `BlockPicker` `ChromePicker` `CirclePicker` `CompactPicker` `GithubPicker` `HuePicker` `MaterialPicker` `PhotoshopPicker` `SketchPicker` `SliderPicker` `SwatchesPicker` `TwitterPicker` respectively.

> 100% inline styles via [ReactCSS](http://reactcss.com/)

[travis-svg]: https://travis-ci.org/casesandberg/react-color.svg
[travis-url]: https://travis-ci.org/casesandberg/react-color
[license-image]: http://img.shields.io/npm/l/react-color.svg
[license-url]: LICENSE
[downloads-image]: http://img.shields.io/npm/dm/react-color.svg
[downloads-url]: http://npm-stat.com/charts.html?package=react-color
[npm-version-image]: https://img.shields.io/npm/v/react-color.svg
[npm-version-url]: https://www.npmjs.com/package/react-color
npm package: @repay/babel-preset
Description: Babel preset for front end applications
Latest version: 1.2.0

# `@repay/babel-preset`

Babel preset used by [@repaygithub](https://github.com/repaygithub/)

## Usage

Install via the command line using yarn or npm

> `@babel/core`, `@babel/runtime`, and `core-js` are peer dependencies, which means you must install them yourself.

```bash
yarn add --dev @repay/babel-preset @babel/core @babel/runtime core-js
# OR
npm install --save-dev @repay/babel-preset @babel/core @babel/runtime core-js
```

Add the preset to your .babelrc or equivalent

```.babelrc
{
  "presets": ["@repay/babel-preset"]
}
```

## EcmaScript Features Supported

- All Proposals that have reached stage-4 and are implemented by `@babel/preset-env`
- Class Properties (does not include private fields)

  ```jsx
  class Accordian extends Component {
    state = { isOpen: this.props.openOnMount || false };

    // using assignment like below,
    // `this` references the class instance always
    toggleOpen = () =>
      this.setState(s => {
        isOpen: !s.isOpen;
      });
  }
  ```

- Object rest spread (e.g. `let obj = {...props}`)

## Polyfills

There are two options you can pass to control polyfills:

- `coreJsPolyfill` (default: `false`): When this option is `true`, the [`useBuiltIns: 'usage'`](https://babeljs.io/docs/en/babel-preset-env#usebuiltins-usage) option will be passed into `@babel/preset-env` to automatically
add in only the necessary CoreJS polyfills needed.
- `regeneratorPolyfill` (default: `false`): When this option is `true`, the [`regenerator: true`](https://babeljs.io/docs/en/babel-plugin-transform-runtime#regenerator) option will be passed into the `@babel/plugin-transform-runtime` plugin.
npm package: @repay/cactus-form
Description: Wrapper for final-form/react-final-form
Latest version: 1.3.2

# `@repay/cactus-form`

A React library to wrap [react-final-form](https://final-form.org). It has one component similar to the `Field` component from `react-final-form` but geared more toward our use cases, and several others with functionality not included in that package.

## Documentation

Documentation is available in the [root of the repository](https://github.com/repaygithub/cactus/tree/master/docs/Forms/).
In particular, there's an optional set up step involving `patch-package`, which the docs cover in depth.


## Contributing

Use the example applications for implementation testing and UAT.

### Commands

> All of these commands can be run from the root of the repository using the `form` shortcut. (e.g. `yarn form test`)

Testing

`yarn test`

Testing in watch mode

`yarn tdd`

Build

`yarn build`

Building in watch mode

`yarn dev`
npm package: @repay/cactus-fwk
Description: Cactus Framework for React
Author: REPAY
Latest version: 0.5.8

# `@repay/cactus-fwk`

A React framework to implement common front-end requirements.

## Documentation

Documentation is available in the [root of the repository](https://github.com/repaygithub/cactus/tree/master/docs).

## Contributing

The example applications should be used for implementation testing and local usage.

### Commands

> All of these commands can be run from the root of the repository using the `fwk` shortcut. (e.g. `yarn fwk test`)

Running tests

`yarn test`

Running tests in watch mode

`yarn tdd`

Building

`yarn build`

Building in watch mode

`yarn dev`
npm package: @repay/cactus-i18n
Description: I18n library for React using Fluent
Latest version: 2.0.7

# `@repay/cactus-i18n`

A React library to implement i18n using Fluent.

## Documentation

Documentation is available in the [root of the repository](https://github.com/repaygithub/cactus/tree/master/docs/Internationalization/).

Note, the `@fluent` libraries used here are not transpiled, therefore any necessary compatibility must be provided and the `@fluent` libraries should be transpiled as described under [Internationalization - Getting Started](https://github.com/repaygithub/cactus/tree/master/docs/Internationalization/)

## Contributing

Use the example applications for implementation testing and UAT.

### Commands

> All of these commands can be run from the root of the repository using the `i18n` shortcut. (e.g. `yarn i18n test`)

Testing

`yarn test`

Testing in watch mode

`yarn tdd`

Build

`yarn build`

Building in watch mode

`yarn dev`
npm package: @repay/cactus-icons
Description: Cactus design-system icons as React elements
Author: REPAY
Latest version: 3.1.7

# `@repay/cactus-icons`

Cactus design-system icons as React elements for web.

## Usage

For usage, see the documentation for the [Cactus Design System Icons](../../docs/Icons/README.md).

## Contributing

### Commands

> All of these commands can be run from the root of the repository using the `web` shortcut. (e.g. `yarn web start`)

Running Storybook

```
yarn start
```

Testing the build

```
yarn test
```

Building the repository

```
yarn build
```

Running build in watch mode

> Does not currently watch for svg changes to rebuild the TypeScript files. (TODO)

```
yarn dev
```

You must build before the tests will pass.

### Publishing

During the build process, the svgs are converted to TypeScript files in a `ts` folder, and then everything is run through babel into the `i` folder.

The list of currently available icons will be automatically edited on build in the `docs/Icons` folder at the repository root.
npm package: @repay/cactus-theme
Description: The theme for the Cactus design-system at REPAY
Latest version: 3.2.5

# `@repay/cactus-theme`

Styled Components theme used at REPAY for the Cactus design system.

## Usage

For usage, see the documentation for [Cactus Theme](../../docs/Theme/README.md)

## Contributing

### Commands

> All of these commands can be run from the root of the repository using the `theme` shortcut. (e.g. `yarn theme test`)

Running tests

`yarn test`

Running tests in watch mode

`yarn tdd`

Building the repository

`yarn build`

Building in watch mode

`yarn dev`
npm package: @repay/create-ui
Description: A CLI to bootstrap a cactus project
Latest version: 0.5.0

# `@repay/create-ui`

This cli is used to create a basic react app with Typescript or Javascript. It uses the `@repay/scripts` tool for building and running the app and `@repay/eslint-config` to help you format your code.

## Usage

To use the our CLI, simply run the `create-repay-ui app-name` and follow instructions. After the process is done, you can find your app inside the `app-name` folder.
Use yarn start and yarn build inside the root folder to watch your app in development mode or build it.

The CLI will prompt you to chose between Javscript or Typescript. And will also ask you wheater you'd like to initialize a git repository or not.

In some cases, due to permissions on the user's computer, you might have to use `sudo`

## CLI Commands

```

create-repay-ui <command>

Commands:
 create-repay-ui <app-name>   Creates an app inside <app-name> folder

Options:
    --git, -g      Initialize git repository            [boolean] [default: false]
    --javascript   Use Javascript template              [boolean] [default: false]
    --typescript   Use Typescript template              [boolean] [default: false]
```
npm package: @repay/eslint-config
Description: eslint configuration from REPAY
Author: repaygithub
Latest version: 5.1.0

# `@repay/eslint-config`

The eslint-config used at REPAY.

## Usage

To use this configuration you will need to follow three steps:

1. install this package via your package manager of choice
   `yarn add -D @repay/eslint-config eslint`
1. install the peer dependencies and configurations
   `yarn repay-eslint install`
1. Ensure that your project has a Babel config file so that the included parser knows
   how to interpret your code.

To run the linter you should add a "script" to the root `package.json` such as:

```
{
  "scripts": {
    "lint": "eslint \"**/*.{js,jsx}\"",
    "fmt": "yarn lint --fix"
  }
}
```

You will then be able to run the linter using the command: `yarn lint`. Adding the `--fix` argument will auto fix any issues which can be listed as `yarn fmt` above.

## Configuring .eslintrc

You may want to extend from `@repay/eslint-config` in your project's `.eslintrc` file so that you can make project-specific adjustments.

### JS Project

```
// .eslintrc
{
  "extends": ["@repay/eslint-config"],
  "overrides": [{
    // override any linting rules here
  }]
}
```

### TS Project

```
// .eslintrc
{
  "extends": ["@repay/eslint-config/ts"],
  "overrides": [{
    // override any linting rules here
  }]
}
```

If you are configuring this eslint in a TypeScript project, we recommend that you follow the `typescript-eslint` guidelines for linting with type information found [here](https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/TYPED_LINTING.md).

## Design Principles

The following priciples should be considered when adding rules.

- Stylistic options are limited to those exposed by Prettier to reduce bike-shedding
- Rules should be added with specific purpose in mind to avoid bloat
- Rules should be either `"error"` or `"off"` save for the following two exceptions:
  - very complex rules which are not always accurate
  - new rules that are added in a patch, which will be an error in the next minor version.
npm package: @repaya/client
Description: <p>     <a href="https://www.npmjs.com/package/@repaya/client" rel="nofollow"><img src="https://img.shields.io/npm/v/@repaya/client" alt="npm"></a>     <img src="https://img.shields.io/bundlephobia/minzip/@repaya/client" alt="npm size">     <img src="http
Latest version: 1.1.0

# API Client Library

<p>
    <a href="https://www.npmjs.com/package/@repaya/client" rel="nofollow"><img src="https://img.shields.io/npm/v/@repaya/client" alt="npm"></a>
    <img src="https://img.shields.io/bundlephobia/minzip/@repaya/client" alt="npm size">
    <img src="https://img.shields.io/npm/l/@repaya/client" alt="license">
<p>

Typescript client library for [repaya.io](https://repaya.io) web3 payment APIs.

`yarn add @repaya/client`

Documentation [docs.repaya.io](https://docs.repaya.io/).

## Usage

Import the client

```js
import { Client } from '@repaya/client'
```

Create payment session

```js
const formId = '<FORM_ID>'

// Create payment session
const session = await client.sessions.create(formid, { customer: { id: '42' } })
```

After the session was created, use the `session.checkoutUrl` to redirect the customer to the payment page.

---

After the payment is completed, request its status and customer balances by the session ID.

```js
const payment = await client.payments.getBySession(session.id)
// payment.status === 'completed'    // check payment status

const balances = await client.balances.getAll(formId, { customerId: '42' })
```


## Command Line Interface

The package can be used via the `npx` command to access a convinient CLI:

```
Usage: npx @repaya/client [command] [params...] <key=value>
```