open-index/open-npm huggingface dataset:
npm package: @propeller-commerce/propeller
Description: <div align="center"> <img src="https://user-images.githubusercontent.com/1626923/137092657-fb398d20-b592-4661-a1f9-4135db0b61d5.png" height="80px"/>  <img src="https://propel.us/wp-content/themes/ecs-propeller/assets/build/images/theme/logo-blue.png" heig
Latest version: 1.5.0
npm package: @propeller-commerce/propeller-api
Description: <div align="center"> <img src="https://user-images.githubusercontent.com/1626923/137092657-fb398d20-b592-4661-a1f9-4135db0b61d5.png" height="80px"/>  <img src="https://propel.us/wp-content/themes/ecs-propeller/assets/build/images/theme/logo-blue.png" heig
Latest version: 1.5.0
npm package: @propeller-commerce/propeller-mollie
Description: <div align="center"> <a href="https://propel.us/"><img src="https://propel.us/wp-content/themes/ecs-propeller/assets/build/images/theme/logo-blue.png" height="100px" /></a>  </div>
Latest version: 1.0.0

# Propel.us Mollie Nuxt module

<div align="center">
<a href="https://propel.us/"><img src="https://propel.us/wp-content/themes/ecs-propeller/assets/build/images/theme/logo-blue.png" height="100px" /></a> 
</div>

## Overview

![propeller-mollie](https://user-images.githubusercontent.com/13923889/150364042-bcba5683-4ea1-4289-b9a4-ddb45d4b4ae1.png) <br>

## Extension module

The extension module acts as a middleware between Propeller platform and Payment Service Provider. Once Extensions is configured to call PSP, for every payment created or update, Propeller GraphQL API is called to register that transaction.

## Notification module

Notification module receives asynchronous notifications sent by Payment Service Provider. Through notifications, PSP provides asynchronously payment status changes like paid, authorization, charge, or refund of the payment. The notification module processes the notification sent by PSP and matches the Propeller payment for this notification, then modifies Propeller payment and order accordingly.

## How to install

1. Open your theme directory and run: -

```
yarn add @propeller-commerce/propeller-mollie
```

2. Open your `nuxt.config.js`
3. At the bottom of `modules` add:

```js
['@propeller-commerce/propeller-mollie/nuxt', {
    propellerKey: 'PROPELLER_KEY',
    propellerApiUrl: 'PROPELLER_API_URL',
    mollieKey: 'MOLLIE_KEY',
    mollieIsTest: true,
    mollieRedirectUrl: '/checkout/thank-you',
}],
```

`propellerKey` is used for authentication to Propeller GraphQL queries <br>
`propellerApiUrl` is Propeller GraphQL URL <br>
`mollieKey` is Mollie authentication key <br>
`mollieIsTest` allows to define if mollie if we are using Mollie test environment <br>
`mollieRedirectUrl` is the URL used for redirect after payment is finished <br>

## Render payment handlers & finalize payment

1. Import `useMollie`:

```js
import { useMollie } from "@propeller-commerce/propeller-mollie";
```

In this step you need:

```js
const { makePayment } = useMollie();
```

2. Calling `makePayment` and redirecting to payment page:

```js
const payment = await makePayment({
  amount: cartGetters.getTotals(cart.value).total,
  currency: "EUR",
  orderId: orderGetters.getId(order.value),
  userId: 146443,
});

const paymentUrl = payment.paymentUrl;
```
npm package: @propellerads/ad-format
Description: ![size](https://img.shields.io/bundlephobia/min/@propellerads/ad-format.svg) ![](https://img.shields.io/npm/v/@propellerads/ad-format.svg?style=flat-square)
Author: v.oleynik@propellerads.net
Latest version: 5.0.1

# AdFormat

![size](https://img.shields.io/bundlephobia/min/@propellerads/ad-format.svg)
![](https://img.shields.io/npm/v/@propellerads/ad-format.svg?style=flat-square)

[NPM](https://www.npmjs.com/package/@propellerads/ad-format) |
[Github](https://github.com/propellerads/ui-components/tree/master/Components/AdFormat)

## Installation

- `yarn add @propellerads/ad-format` or `npm install @propellerads/ad-format -S`

### How to use

- `import AdFormat, {AdFormatType} from '@propellerads/ad-format';`
- And render `<AdFormat name={AdFormatType.Website} />`
npm package: @propellerads/alert
Description: ![size](https://img.shields.io/bundlephobia/min/@propellerads/alert.svg) ![](https://img.shields.io/npm/v/@propellerads/alert.svg?style=flat-square)
Author: i.pasyuk@propellerads.net
Latest version: 5.0.1

# Alert

![size](https://img.shields.io/bundlephobia/min/@propellerads/alert.svg)
![](https://img.shields.io/npm/v/@propellerads/alert.svg?style=flat-square)

[NPM](https://www.npmjs.com/package/@propellerads/alert) |
[Github](https://github.com/propellerads/ui-components/tree/master/Components/Alert)

## Installation

- `yarn add @propellerads/alert` or `npm install @propellerads/alert -S`

### How to use

- `import Alert, {AlertType} from '@propellerads/alert';`
- And render `<Alert type={AlertType.Danger}>Your text</Alert>`
npm package: @propellerads/arrow-button
Description: Links: [NPM](https://www.npmjs.com/package/@propellerads/arrow-button) · [GitHub](https://github.com/propellerads/ui-components/tree/master/Components/ArrowButton)
Author: i.pasyuk@propellerads.net
Latest version: 4.0.2

# ArrowButton

Links: [NPM](https://www.npmjs.com/package/@propellerads/arrow-button) · [GitHub](https://github.com/propellerads/ui-components/tree/master/Components/ArrowButton)

## Install

- `yarn add @propellerads/arrow-button`
  or
- `npm install @propellerads/arrow-button --save`

## Usage

```tsx
import ArrowButton, {ArrowType} from '@propellerads/arrow-button';

<ArrowButton elementId="table-pagination-next" type={ArrowType.Next} onClick={() => console.log('Next clicked')} />;
```

## Props

- `elementId` (string, required): unique id for the component instance
- `type` (ArrowType, required): one of `First`, `Previous`, `Next`, `Last`
- `isDisabled` (boolean, default: false): disables the button
- `onClick` (() => void, required): click handler
npm package: @propellerads/button
Description: `Button` - is core component of UI-system.
Author: i.pasyuk@propellerads.net
Latest version: 9.0.2

# Button

`Button` - is core component of UI-system.

![size](https://img.shields.io/bundlephobia/min/@propellerads/button.svg)
![](https://img.shields.io/npm/v/@propellerads/button.svg?style=flat-square)

[NPM](https://www.npmjs.com/package/@propellerads/button) |
[Github](https://github.com/propellerads/ui-components/tree/master/Components/Button)

## Installation

- `yarn add @propellerads/button` or `npm install @propellerads/button -S`

### How to use

- `import Button, {BUTTON_TYPE, BUTTON_SIZE} from '@propellerads/button';`
- And render `<Button>Your text</Button>`

### isAsync prop

Using `isAsync` prop allows the component perform async operation disable `onclick behaviour` and show `loading` automatically
npm package: @propellerads/button-drop-down
Description: ![size](https://img.shields.io/bundlephobia/min/@propellerads/button-drop-down.svg) ![](https://img.shields.io/npm/v/@propellerads/button-drop-down.svg?style=flat-square)
Author: r.akhtyamov@propellerads.net
Latest version: 4.0.2

# ButtonDropDown

![size](https://img.shields.io/bundlephobia/min/@propellerads/button-drop-down.svg)
![](https://img.shields.io/npm/v/@propellerads/button-drop-down.svg?style=flat-square)

[NPM](https://www.npmjs.com/package/@propellerads/button-drop-down) |
[Github](https://github.com/propellerads/ui-components/tree/master/Components/ButtonDropDown)

## Installation

- `yarn add @propellerads/button-drop-down` or `npm install @propellerads/button-drop-down -S`

### How to use

- `import ButtonDropDown from '@propellerads/button-drop-down';`
- And render

```
<ButtonDropDown
    options={[{id: 'button-drop-down-0', title: 'Option'}]}
    elementId="button-drop-down"
    title="Title"
    type="isAdvanced"
    onClick={(value) => console.log(value.id)}
/>
```
npm package: @propellerads/card
Description: ![size](https://img.shields.io/bundlephobia/min/@propellerads/card.svg) ![](https://img.shields.io/npm/v/@propellerads/card.svg?style=flat-square)
Author: i.pasyuk@propellerads.net
Latest version: 5.0.0

# Card

![size](https://img.shields.io/bundlephobia/min/@propellerads/card.svg)
![](https://img.shields.io/npm/v/@propellerads/card.svg?style=flat-square)

[NPM](https://www.npmjs.com/package/@propellerads/card) |
[Github](https://github.com/propellerads/ui-components/tree/master/Components/Card)

## Installation

- `yarn add @propellerads/card` or `npm install @propellerads/card -S`

### How to use

- `import Card from '@propellerads/card';`
- And render `<Card>Your content</Card>`
npm package: @propellerads/checkbox-card-group
Description: [NPM](https://www.npmjs.com/package/@propellerads/checkbox-card-group) | [Github](https://github.com/propellerads/ui-components/tree/master/Components/CheckboxCardGroup)
Author: r.khizhenkov@propellerads.net
Latest version: 4.0.0

# CheckboxCardGroup

[NPM](https://www.npmjs.com/package/@propellerads/checkbox-card-group) |
[Github](https://github.com/propellerads/ui-components/tree/master/Components/CheckboxCardGroup)

## Installation

- `yarn add @propellerads/checkbox-card-group` or `npm install @propellerads/checkbox-card-group -S`
npm package: @propellerads/code-viewer
Description: Links: [NPM](https://www.npmjs.com/package/@propellerads/code-viewer) · [GitHub](https://github.com/propellerads/ui-components/tree/master/Components/CodeViewer)
Author: i.pasyuk@propellerads.net
Latest version: 4.0.0

# CodeViewer

Links: [NPM](https://www.npmjs.com/package/@propellerads/code-viewer) · [GitHub](https://github.com/propellerads/ui-components/tree/master/Components/CodeViewer)

## Install

- `yarn add @propellerads/code-viewer`
  or
- `npm install @propellerads/code-viewer --save`

## Usage

```tsx
import CodeViewer from '@propellerads/code-viewer';

<CodeViewer
  elementId="example-code"
  language="js"
  copyingEnabled
  tipCodeCopied="Copied!"
  onCopyClick={() => console.log('Code copied')}
>
  {`const sum = (a, b) => a + b;`}
</CodeViewer>;
```

## Props

- elementId (string, required): unique id for the component instance
- language (string, default: "markup"): Prism language id, e.g. "js", "javascript", "ts", "css". more at [PrismJS languages](https://prismjs.com/#supported-languages)
- copyingEnabled (boolean, default: true): shows the copy-to-clipboard button
- tipCodeCopied (ReactNode, default: "Copied!"): text or node for the tooltip on copy
- highlightCode (boolean, default: true): enables Prism highlighting
- onCopyClick (() => void, optional): called after text is copied
- children (string | ReactNode): code to render; only string children are copied

## Notes

- Highlighting is powered by PrismJS. For languages beyond the core set, import the language definition once in your app, e.g.:
  - `import 'prismjs/components/prism-json';`
- Since v2, the component is written in TypeScript and ships type definitions.
npm package: @propellerads/color-picker
Description: Color picker component
Latest version: 1.1.0

# ColorPicker

![size](https://img.shields.io/bundlephobia/min/@propellerads/color-picker.svg)
![](https://img.shields.io/npm/v/@propellerads/color-picker.svg?style=flat-square)

[NPM](https://www.npmjs.com/package/@propellerads/color-picker) |
[Github](https://github.com/propellerads/ui-components/tree/master/Components/ColorPicker)

## Installation

- `yarn add @propellerads/color-picker` or `npm install @propellerads/color-picker -S`

### How to use

- `import ColorPicker from '@propellerads/color-picker';`
- And render

```
<ColorPicker
  color={{
    b: 0,
    g: 105,
    r: 255
  }}
  colors={[
    '#D9E3F0',
    '#F47373',
    '#697689',
    '#37D67A',
    '#2CCCE4',
    '#555555',
    '#DCE775',
    '#FF8A65',
    '#BA68C8'
  ]}
  enabled
  handleChange={function noRefCheck() {}}
/>
```
npm package: @propellerads/cookie-message
Description: ![size](https://img.shields.io/bundlephobia/min/@propellerads/cookie-message.svg) ![](https://img.shields.io/npm/v/@propellerads/cookie-message.svg?style=flat-square)
Author: i.pasyuk@propellerads.net
Latest version: 4.0.1

# CookieMessage

![size](https://img.shields.io/bundlephobia/min/@propellerads/cookie-message.svg)
![](https://img.shields.io/npm/v/@propellerads/cookie-message.svg?style=flat-square)

[NPM](https://www.npmjs.com/package/@propellerads/cookie-message) |
[Github](https://github.com/propellerads/ui-components/tree/master/Components/CookieMessage)

## Installation

- `yarn add @propellerads/cookie-message` or `npm install @propellerads/cookie-message -S`

### How to use

- `import CookieMessage from '@propellerads/cookie-message';`
- And render `<CookieMessage title="My Cookie Title">Your text</CookieMessage>`
npm package: @propellerads/currency
Description: ![size](https://img.shields.io/bundlephobia/min/@propellerads/currency.svg) ![](https://img.shields.io/npm/v/@propellerads/currency.svg?style=flat-square)
Author: i.pasyuk@propellerads.net
Latest version: 5.0.1

# Currency

![size](https://img.shields.io/bundlephobia/min/@propellerads/currency.svg)
![](https://img.shields.io/npm/v/@propellerads/currency.svg?style=flat-square)

[NPM](https://www.npmjs.com/package/@propellerads/currency) |
[Github](https://github.com/propellerads/ui-components/tree/master/Components/Currency)

## Installation

- `yarn add @propellerads/currency` or `npm install @propellerads/currency -S`

### How to use

- `import Currency, {CurrencyCode} from '@propellerads/currency';`
- And render `<Currency currencyCode={CurrencyCode.USD} decimalPosition={3} value={1234.56} />`
npm package: @propellerads/editable-field
Description: ![size](https://img.shields.io/bundlephobia/min/@propellerads/editable-field.svg) ![](https://img.shields.io/npm/v/@propellerads/editable-field.svg?style=flat-square)
Author: i.pasyuk@propellerads.net
Latest version: 4.0.0

# EditableField

![size](https://img.shields.io/bundlephobia/min/@propellerads/editable-field.svg)
![](https://img.shields.io/npm/v/@propellerads/editable-field.svg?style=flat-square)

[NPM](https://www.npmjs.com/package/@propellerads/editable-field) |
[Github](https://github.com/propellerads/ui-components/tree/master/Components/editable-field)

## Installation

- `yarn add @propellerads/editable-field` or `npm install @propellerads/editable-field -S`

### How to use

- `import EditableField from '@propellerads/editable-field';`
- And render

```
<EditableField
    isEditable
    isLoading={false}
    value="value"
    onFocus={() => console.log('onFocus')}
    onSave={() => console.log('onSave')}
    onCancel={() => console.log('onCancel')}
    onChange={(value) => console.log('onChange', value)}
    elementId="stories-default-view"
/>
```
npm package: @propellerads/empty-state
Description: ![size](https://img.shields.io/bundlephobia/min/@propellerads/empty-state.svg) ![](https://img.shields.io/npm/v/@propellerads/empty-state.svg?style=flat-square)
Author: i.pasyuk@propellerads.net
Latest version: 4.0.1

# EmptyState

![size](https://img.shields.io/bundlephobia/min/@propellerads/empty-state.svg)
![](https://img.shields.io/npm/v/@propellerads/empty-state.svg?style=flat-square)

[NPM](https://www.npmjs.com/package/@propellerads/empty-state) |
[Github](https://github.com/propellerads/ui-components/tree/master/Components/EmptyState)

## Installation

- `yarn add @propellerads/empty-state` or `npm install @propellerads/empty-state -S`

### How to use

- `import EmptyState from '@propellerads/empty-state';`
- And render

```
<EmptyState
          icon={<Send color="blue" />}
          description={<Title>No payouts here yet</Title>}
          title="You’ll see regular payouts here as soon as you start working with us!"
          actions={<button>Button</button>}
      />
```
npm package: @propellerads/formatted-number
Description: `FormattedNumber` - is core component of UI-system.
Author: i.pasyuk@propellerads.net
Latest version: 3.0.1

# FormattedNumber

`FormattedNumber` - is core component of UI-system.

![size](https://img.shields.io/bundlephobia/min/@propellerads/formatted-number.svg)
![](https://img.shields.io/npm/v/@propellerads/formatted-number.svg?style=flat-square)

[NPM](https://www.npmjs.com/package/@propellerads/formatted-number) |
[Github](https://github.com/propellerads/ui-components/tree/master/Components/FormattedNumber)

## Installation

- `yarn add @propellerads/formatted-number` or `npm install @propellerads/formatted-number -S`

### How to use

- `import FormattedNumber from '@propellerads/formatted-number';`
- And render `<FormattedNumber value={1000} />`
npm package: @propellerads/header
Description: ![size](https://img.shields.io/bundlephobia/min/@propellerads/header.svg) ![](https://img.shields.io/npm/v/@propellerads/header.svg?style=flat-square)
Author: r.khizhenkov@propellerads.net
Latest version: 7.0.0

# Header

![size](https://img.shields.io/bundlephobia/min/@propellerads/header.svg)
![](https://img.shields.io/npm/v/@propellerads/header.svg?style=flat-square)

[NPM](https://www.npmjs.com/package/@propellerads/header) |
[Github](https://github.com/propellerads/ui-components/tree/master/Components/Header)

## Installation

- `yarn add @propellerads/header` or `npm install @propellerads/header -S`

### How to use

- `import Header from '@propellerads/header';`
- And render

```
<Header
    theme={themes[theme]}
    logo={logo}
    sidebarButton={SidebarButton}
>
    <Header.HeaderBalance
        balance={123456789.99}
        dailyEarned={newDailyEarned}
    />

    <Header.HeaderItem
        onClick={() => alert('Single notification has been shown')}
        component={customComponent}
    />

    <Header.HeaderDivider />

    <Header.HeaderItem icon={<Case size={SIZE.MEDIUM_SMALL} color={COLOR.GRAY}/>}>
        <Header.HeaderDropdown>
            {customDropDownContent}
        </Header.HeaderDropdown>
    </Header.HeaderItem>

    <Header.HeaderDivider />

    <Header.HeaderItem
        isRightDropdown
        title="Some text"
        icon={<User size={SIZE.MEDIUM_SMALL} color={COLOR.GRAY}/>}
    >
        <Header.HeaderDropdown>
            <Header.HeaderDropdownList items={userMenu} />
        </Header.HeaderDropdown>
    </Header.HeaderItem>
</Header>
```
npm package: @propellerads/hint
Description: ![size](https://img.shields.io/bundlephobia/min/@propellerads/hint.svg) ![](https://img.shields.io/npm/v/@propellerads/hint.svg?style=flat-square)
Author: i.pasyuk@propellerads.net
Latest version: 4.0.0

# Hint

![size](https://img.shields.io/bundlephobia/min/@propellerads/hint.svg)
![](https://img.shields.io/npm/v/@propellerads/hint.svg?style=flat-square)

[NPM](https://www.npmjs.com/package/@propellerads/hint) |
[Github](https://github.com/propellerads/ui-components/tree/master/Components/Hint)

## Installation

- `yarn add @propellerads/hint` or `npm install @propellerads/hint -S`

### How to use

- `import Hint from '@propellerads/hint';`
- And render

```
<Hint
    withIcon
    isVisible
    message="Lorem ipsum"
/>
```
npm package: @propellerads/icon
Description: ![size](https://img.shields.io/bundlephobia/min/@propellerads/icon.svg) ![](https://img.shields.io/npm/v/@propellerads/icon.svg?style=flat-square)
Author: i.pasyuk@propellerads.net
Latest version: 7.1.1

# Icons

![size](https://img.shields.io/bundlephobia/min/@propellerads/icon.svg)
![](https://img.shields.io/npm/v/@propellerads/icon.svg?style=flat-square)

[NPM](https://www.npmjs.com/package/@propellerads/icon) |
[Github](https://github.com/propellerads/ui-components/tree/master/Components/icon)

## Installation

- `yarn add @propellerads/icon` or `npm install @propellerads/icon -S`

### How to use

- `import {AmericanExpress, Size, Color} from '@propellerads/icon';`
- And render `<AmericanExpress size={Size.Medium} color={Color.Green}/>`
npm package: @propellerads/image-uploader
Description: ![size](https://img.shields.io/bundlephobia/min/@propellerads/image-uploader.svg) ![](https://img.shields.io/npm/v/@propellerads/image-uploader.svg?style=flat-square)
Author: r.akhtyamov@propellerads.net
Latest version: 4.0.0

# ImageUploader

![size](https://img.shields.io/bundlephobia/min/@propellerads/image-uploader.svg)
![](https://img.shields.io/npm/v/@propellerads/image-uploader.svg?style=flat-square)

[NPM](https://www.npmjs.com/package/@propellerads/image-uploader) |
[Github](https://github.com/propellerads/ui-components/tree/master/Components/ImageUploader)

## Installation

- `yarn add @propellerads/image-uploader` or `npm install @propellerads/image-uploader -S`

### How to use

- `import ImageUploader from '@propellerads/image-uploader';`
- And render

```tsx
<ImageUploader
  title="title"
  description="description"
  action="action"
  elementId="image-uploader-id"
  onDrop={(files) => console.log(files)}
  onDropAccepted={(files) => console.log(files)}
  onDropRejected={(fileRejections) => console.log(fileRejections)}
  acceptFormats={{
    'image/png': ['.png'],
    'image/jpeg': ['.jpg', '.jpe', '.jpeg'],
  }}
  maxSize={204800}
/>
```
npm package: @propellerads/input-checkbox
Description: ![size](https://img.shields.io/bundlephobia/min/@propellerads/input-checkbox.svg) ![](https://img.shields.io/npm/v/@propellerads/input-checkbox.svg?style=flat-square)
Author: i.pasyuk@propellerads.net
Latest version: 3.1.4

# InputCheckbox

![size](https://img.shields.io/bundlephobia/min/@propellerads/input-checkbox.svg)
![](https://img.shields.io/npm/v/@propellerads/input-checkbox.svg?style=flat-square)

[NPM](https://www.npmjs.com/package/@propellerads/input-checkbox) |
[Github](https://github.com/propellerads/ui-components/tree/master/Components/inputCheckbox)

## Installation

- `yarn add @propellerads/input-checkbox` or `npm install @propellerads/input-checkbox -S`

### How to use

- `import input-checkbox from '@propellerads/input-checkbox';`
- And render

```
<InputCheckbox
    description="Input Checkbox description"
    elementId="InputCheckbox"
    hasError={false}
    isChecked={false}
    isDisabled={false}
    label={<span><a href="#" onClick={function noRefCheck() {}}>Hi, bro</a> i am clickable</span>}
    onChange={() => {}}
/>
```
npm package: @propellerads/input-number
Description: ![size](https://img.shields.io/bundlephobia/min/@propellerads/input-number.svg) ![](https://img.shields.io/npm/v/@propellerads/input-number.svg?style=flat-square)
Author: i.pasyuk@propellerads.net
Latest version: 4.0.2

# InputNumber

![size](https://img.shields.io/bundlephobia/min/@propellerads/input-number.svg)
![](https://img.shields.io/npm/v/@propellerads/input-number.svg?style=flat-square)

[NPM](https://www.npmjs.com/package/@propellerads/input-number) |
[Github](https://github.com/propellerads/ui-components/tree/master/Components/input-number)

## Installation

- `yarn add @propellerads/input-number` or `npm install @propellerads/input-number -S`

### How to use

- `import InputNumber from '@propellerads/input-number';`
- And render

```
<InputNumber
    onChange={(value) => {}}
    label="My label"
    value={value}
/>
```
npm package: @propellerads/input-password
Description: ![size](https://img.shields.io/bundlephobia/min/@propellerads/input-password.svg) ![](https://img.shields.io/npm/v/@propellerads/input-password.svg?style=flat-square)
Author: i.pasyuk@propellerads.net
Latest version: 3.0.6

# InputPassword

![size](https://img.shields.io/bundlephobia/min/@propellerads/input-password.svg)
![](https://img.shields.io/npm/v/@propellerads/input-password.svg?style=flat-square)

[NPM](https://www.npmjs.com/package/@propellerads/input-password) |
[Github](https://github.com/propellerads/ui-components/tree/master/Components/input-password)

## Installation

- `yarn add @propellerads/input-password` or `npm install @propellerads/input-password -S`

### How to use

- `import InputPassword from '@propellerads/input-password';`
- And render

```
<InputPassword
    onChange={(value) => {}}
    label="My label"
    value={value}
/>
```
npm package: @propellerads/input-text
Description: Input text component
Author: i.pasyuk@propellerads.net
Latest version: 4.1.4

# InputText

![size](https://img.shields.io/bundlephobia/min/@propellerads/input-text.svg)
![](https://img.shields.io/npm/v/@propellerads/input-text.svg?style=flat-square)

[NPM](https://www.npmjs.com/package/@propellerads/input-text) |
[Github](https://github.com/propellerads/ui-components/tree/master/Components/input-text)

## Installation

- `yarn add @propellerads/input-text` or `npm install @propellerads/input-text -S`

### How to use

- `import InputText from '@propellerads/input-text';`
- And render

```
<InputText
    onChange={(value) => {}}
    label="My label"
    value={value}
/>
```
npm package: @propellerads/kyc-form
Description: `KycForm`.
Author: r.akhtyamov@propellerads.net
Latest version: 4.1.6

# KycForm

`KycForm`.

![size](https://img.shields.io/bundlephobia/min/@propellerads/kyc-form.svg)
![](https://img.shields.io/npm/v/@propellerads/kyc-form.svg?style=flat-square)

[NPM](https://www.npmjs.com/package/@propellerads/kyc-form) |
[Github](https://github.com/propellerads/ui-components/tree/master/Components/KycForm)

## Installation

- `yarn add @propellerads/kyc-form` or `npm install @propellerads/kyc-form -S`

### How to use

- `import KycForm from '@propellerads/kyc-form';`
- And render

```
<KycForm
    elementId="kyc-form-component"
    title="PropellerAds is integrating KYC systems into the business processes. To continue working we kindly ask you to provide the following documents:"
    uploadButtonLabel="Send documents"
    uploaderLabels={{
        title: 'Drag the file here or',
        action: 'upload from your computer',
        oversizeError: 'File is too big',
    }}
    documentsLabels={
        [DOCUMENT_TYPES.CARD]: {
            title: 'Photo of the account owner’s ID card.',
            description: '(Passport/driver’s license/aadhar card etc.)',
        }
    }
    documents={[{
        type: DOCUMENT_TYPES.ID,
        parts:[{
            type: PART_TYPES.ID_FRONT,
        }, {
            type: PART_TYPES.ID_BACK,
        }],
    }]}
    onUploadClick={console.log}
/>
```
npm package: @propellerads/money-dashboard
Description: Money dashboard widget
Author: a.stadnik@propellerads.net
Latest version: 2.1.3

# MoneyDashboard

![size](https://img.shields.io/bundlephobia/min/@propellerads/money-dashboard.svg)
![](https://img.shields.io/npm/v/@propellerads/money-dashboard.svg?style=flat-square)

[NPM](https://www.npmjs.com/package/@propellerads/money-dashboard) |
[Github](https://github.com/propellerads/ui-components/tree/master/Components/MoneyDashboard)

## Installation

- `yarn add @propellerads/money-dashboard` or `npm install @propellerads/money-dashboard -S`

### How to use

- `import MoneyDashboard from '@propellerads/money-dashboard';`
- And render

```
 <MoneyDashboard
            title={<span>Total balance</span>}
            tooltip={<span>Total balance tooltip'</span>}
            value={100}
            isLoading={boolean('isLoading', false)}
        />
```
npm package: @propellerads/multi-select
Description: MultiSelect component
Author: i.pasyuk@propellerads.net
Latest version: 4.0.5

# MultiSelect

![size](https://img.shields.io/bundlephobia/min/@propellerads/multi-select.svg)
![](https://img.shields.io/npm/v/@propellerads/multi-select.svg?style=flat-square)

[NPM](https://www.npmjs.com/package/@propellerads/multi-select) |
[Github](https://github.com/propellerads/ui-components/tree/master/Components/MultiSelect)

## Installation

- `yarn add @propellerads/multi-select` or `npm install @propellerads/multi-select -S`

### How to use

- `import MultiSelect from '@propellerads/multi-select';`
- And render

```
<MultiSelect
    onChange={() => {}}
    elementId="elementId"
    options={[{ value: 1, label: '1' }]}
/>
```
npm package: @propellerads/page-header
Description: ![size](https://img.shields.io/bundlephobia/min/@propellerads/page-header.svg) ![](https://img.shields.io/npm/v/@propellerads/page-header.svg?style=flat-square)
Author: i.pasyuk@propellerads.net
Latest version: 3.0.2

# PageHeader

![size](https://img.shields.io/bundlephobia/min/@propellerads/page-header.svg)
![](https://img.shields.io/npm/v/@propellerads/page-header.svg?style=flat-square)

[NPM](https://www.npmjs.com/package/@propellerads/page-header) |
[Github](https://github.com/propellerads/ui-components/tree/master/Components/page-header)

## Installation

- `yarn add @propellerads/page-header` or `npm install @propellerads/page-header -S`

### How to use

- `import PageHeader from '@propellerads/page-header';`
- And render

```
<PageHeader actions={<element>Your code</element>}>
  <element>Title</element>
</PageHeader>
```

### Development

- `yarn start` to run TSDX in watch mode
- `yarn build` to build the package
npm package: @propellerads/radio-card-group
Description: [NPM](https://www.npmjs.com/package/@propellerads/radio-card-group) | [Github](https://github.com/propellerads/ui-components/tree/master/Components/RadioCardGroup)
Author: r.khizhenkov@propellerads.net
Latest version: 3.0.3

# RadioCardGroup

[NPM](https://www.npmjs.com/package/@propellerads/radio-card-group) |
[Github](https://github.com/propellerads/ui-components/tree/master/Components/RadioCardGroup)

## Installation

- `yarn add @propellerads/radio-card-group` or `npm install @propellerads/radio-card-group -S`
npm package: @propellerads/radio-group
Description: ![size](https://img.shields.io/bundlephobia/min/@propellerads/radio-group.svg) ![](https://img.shields.io/npm/v/@propellerads/radio-group.svg?style=flat-square)
Author: i.pasyuk@propellerads.net
Latest version: 4.0.4

# RadioGroup

![size](https://img.shields.io/bundlephobia/min/@propellerads/radio-group.svg)
![](https://img.shields.io/npm/v/@propellerads/radio-group.svg?style=flat-square)

[NPM](https://www.npmjs.com/package/@propellerads/radio-group) |
[Github](https://github.com/propellerads/ui-components/tree/master/Components/radio-group)

## Installation

- `yarn add @propellerads/radio-group` or `npm install @propellerads/radio-group -S`

### How to use

- `import RadioGroup from '@propellerads/radio-group';`
- And render

```
<RadioGroup
    options={{}}
    onChange={(value) => {})}
    errors={['Errors']}
    activeState={'2'}
/>
```
npm package: @propellerads/slider
Description: Slider component
Latest version: 1.0.2

# Slider

![size](https://img.shields.io/bundlephobia/min/@propellerads/slider.svg)
![](https://img.shields.io/npm/v/@propellerads/slider.svg?style=flat-square)

[NPM](https://www.npmjs.com/package/@propellerads/slider) |
[Github](https://github.com/propellerads/ui-components/tree/master/Components/Slider)

## Installation

- `yarn add @propellerads/slider` or `npm install @propellerads/slider -S`

### How to use

- `import Slider from '@propellerads/slider';`
- And render

```
const marks = [
    {
        dot: 0,
        label: 0,
        markStyles: {
            position: 'relative',
            top: '-6px',
        },
    },
    {
        dot: 100,
        label: 100,
        markStyles: {
            position: 'relative',
            top: '-6px',
        },
    },
];

    <Slider
        value={number('Value', 0)}
        marks={marks}
        max={number('Max', 100)}
        min={number('Min', 0)}
        step={number('Step', 5)}
        onChange={(value) => {
            alert(value);
            action(value);
        }}
    />
```

## Props

- `value` (number, required): current slider value
- `marks` (IMark[], required): array of marks to display
  - IMark: `{ dot: number; label: string; text?: string; styles?: React.CSSProperties; markStyles?: React.CSSProperties; }`
- `max` (number, required): maximum value
- `min` (number, default: 0): minimum value
- `step` (number, default: 1): step between values
- `onChange` ((value: number) => void): change handler

## Notes

- Since v0.2.0 the component is written in TypeScript and ships type definitions.
npm package: @propellerads/smart-hint
Description: ![](https://img.shields.io/npm/v/@propellerads/smart-hint.svg?style=flat-square)
Author: i.pasyuk@propellerads.net
Latest version: 2.0.4

# SmartHint

![](https://img.shields.io/npm/v/@propellerads/smart-hint.svg?style=flat-square)

[NPM](https://www.npmjs.com/package/@propellerads/smart-hint) |
[Github](https://github.com/propellerads/ui-components/tree/master/Components/SmartHint)

## Installation

- `yarn add @propellerads/smart-hint`
  or
- `npm install @propellerads/smart-hint --save`

## Usage

```tsx
import SmartHint, {HINT_POSITION} from '@propellerads/smart-hint';

<SmartHint
  attachToElementId="my-target-id"
  title="Title"
  isVisible
  position={HINT_POSITION.TOP}
  onCloseCallback={() => console.log('closed')}
  smartHintCustomStyles={{zIndex: 1000}}
>
  Content goes here
</SmartHint>;
```
npm package: @propellerads/smart-tooltip
Description: [NPM](https://www.npmjs.com/package/@propellerads/smart-tooltip) | [Github](https://github.com/propellerads/ui-components/tree/master/Components/SmartTooltip)
Author: r.khizhenkov@propellerads.net
Latest version: 6.0.0

# SmartTooltip

[NPM](https://www.npmjs.com/package/@propellerads/smart-tooltip) |
[Github](https://github.com/propellerads/ui-components/tree/master/Components/SmartTooltip)

## Installation

- `yarn add @propellerads/smart-tooltip` or `npm install @propellerads/smart-tooltip -S`

### How to use

- `import {hideTooltip, showTooltip, Position} from '@propellerads/smart-tooltip';`
- invoke func on onMouseEnter event and pass target `showTooltip(e.currentTarget, 'tip'[, position])`
- invoke func on onMouseLeave event `hideTooltip()`
- use Position object to define proper Tooltip position `[right, left, top, bottom]`
npm package: @propellerads/spinner
Description: ![size](https://img.shields.io/bundlephobia/min/@propellerads/spinner.svg) ![](https://img.shields.io/npm/v/@propellerads/spinner.svg?style=flat-square)
Author: Vitaly Oleynik
Latest version: 3.0.2

# Spinner

![size](https://img.shields.io/bundlephobia/min/@propellerads/spinner.svg)
![](https://img.shields.io/npm/v/@propellerads/spinner.svg?style=flat-square)

[NPM](https://www.npmjs.com/package/@propellerads/spinner) |
[Github](https://github.com/propellerads/ui-components/tree/master/Components/Spinner)

## Installation

- `yarn add @propellerads/spinner` or `npm install @propellerads/spinner -S`

### How to use

- `import Spinner from '@propellerads/spinner';`
- Props:

##### `delay` The delay (in ms) before the spinner will appear

##### `center` Attempt to center the spinner in the parent element

##### `size` This is the width and height of the spinner, which can be specified before output (available sizes `'xs', 'sm', 'md', 'lg', 'xl'`)

##### `color` You can set a color in the colors (available colors `'black', 'white', 'gray', 'red', 'blue', 'gray_dark'`)

```
<Spinner
    delay={10}
    center={true}
    size="md"
    color="red"
/>
```
npm package: @propellerads/stylevariables
Description: Color & spacing variables
Author: i.pasyuk@propellerads.net
Latest version: 2.0.2

# Style variables

![size](https://img.shields.io/bundlephobia/min/@propellerads/stylevariables.svg)
![](https://img.shields.io/npm/v/@propellerads/stylevariables.svg?style=flat-square)

[NPM](https://www.npmjs.com/package/@propellerads/stylevariables) |
[Github](https://github.com/propellerads/ui-components/tree/master/Components/StyleVariables)

## Installation

- `yarn add @propellerads/stylevariables` or `npm install @propellerads/stylevariables -S`

### How to use

- `import {* as style} from '@propellerads/stylevariables';`
- And render `<Button>Your text</Button>`
npm package: @propellerads/success-label
Description: ![size](https://img.shields.io/bundlephobia/min/@propellerads/success-label.svg) ![](https://img.shields.io/npm/v/@propellerads/success-label.svg?style=flat-square)
Author: i.pasyuk@propellerads.net
Latest version: 3.1.4

# SuccessLabel

![size](https://img.shields.io/bundlephobia/min/@propellerads/success-label.svg)
![](https://img.shields.io/npm/v/@propellerads/success-label.svg?style=flat-square)

[NPM](https://www.npmjs.com/package/@propellerads/success-label) |
[Github](https://github.com/propellerads/ui-components/tree/master/Components/success-label)

## Installation

- `yarn add @propellerads/success-label` or `npm install @propellerads/success-label -S`

### How to use

- `import SuccessLabel from '@propellerads/success-label';`
- And render `<SuccessLabel show>Your text</SuccessLabel>`
npm package: @propellerads/switch
Description: ![](https://img.shields.io/npm/v/@propellerads/switch.svg?style=flat-square)
Author: i.pasyuk@propellerads.net
Latest version: 5.0.1

# Switch

![](https://img.shields.io/npm/v/@propellerads/switch.svg?style=flat-square)

Links: [NPM](https://www.npmjs.com/package/@propellerads/switch) · [GitHub](https://github.com/propellerads/ui-components/tree/master/Components/Switch)

## Install

- `yarn add @propellerads/switch`
  or
- `npm install @propellerads/switch --save`

## Usage

```tsx
import Switch from '@propellerads/switch';

<Switch
  isActive={true}
  onChange={(next) => console.log('changed:', next)}
  elementId="switch-id"
  isDisabled={false}
  containerClassName="my-root"
  controlClassName="my-control"
/>;
```

## Props

- isActive (boolean, required): current switch value
- onChange (function, required): called with next `boolean` value
- elementId (string): id to link `input` and `label`
- isDisabled (boolean, default: false): disables the control
- containerClassName (string): custom class for root container
- controlClassName (string): custom class for inner control
npm package: @propellerads/tabs
Description: `Tabs` - is core component of UI-system.
Author: Sergey Shevelev
Latest version: 1.4.5

# Tabs

`Tabs` - is core component of UI-system.

![size](https://img.shields.io/bundlephobia/min/@propellerads/tabs.svg)
![](https://img.shields.io/npm/v/@propellerads/tabs.svg?style=flat-square)

[NPM](https://www.npmjs.com/package/@propellerads/tabs) |
[Github](https://github.com/propellerads/ui-components/tree/master/Components/Tabs)

## Installation

- `yarn add @propellerads/tabs` or `npm install @propellerads/tabs -S`

### How to use

- `import Tabs from '@propellerads/tabs';`
- And render

```
<Tabs
    tabs={[
           {
             "id": withdraw,
             "label": "Withdraw"
           },
           {
             "id": 'bolling-settings',
             "label": "Billing settings"
           },
           {
             "id": 'payouts'
             "label": "Payouts"
           }
         ]}
/>
```
npm package: @propellerads/tags-input
Description: [NPM](https://www.npmjs.com/package/@propellerads/tags-input) | [Github](https://github.com/propellerads/ui-components/tree/master/Components/TagsInput)
Author: i.pasyuk@propellerads.net
Latest version: 6.0.2

# TagsInput

[NPM](https://www.npmjs.com/package/@propellerads/tags-input) |
[Github](https://github.com/propellerads/ui-components/tree/master/Components/TagsInput)

## Installation

- `yarn add @propellerads/tags-input` or `npm install @propellerads/tags-input -S`

### How to use

- `import TagsInput from '@propellerads/tags-input';`
- And render

```
<TagsInput
    elementId="tags-input-default-view"
    options={options}
    onChange={(value) => {
        setStateValue(value);
    }}
    value={stateValue}
    placeholder="Check 'Notes' section for viewing data examples..."
    isMulti
/>
```
npm package: @propellerads/textarea
Description: ![size](https://img.shields.io/bundlephobia/min/@propellerads/textarea.svg) ![](https://img.shields.io/npm/v/@propellerads/textarea.svg?style=flat-square)
Author: i.pasyuk@propellerads.net
Latest version: 5.0.1

# Textarea

![size](https://img.shields.io/bundlephobia/min/@propellerads/textarea.svg)
![](https://img.shields.io/npm/v/@propellerads/textarea.svg?style=flat-square)

[NPM](https://www.npmjs.com/package/@propellerads/textarea) |
[Github](https://github.com/propellerads/ui-components/tree/master/Components/textarea)

## Installation

- `yarn add @propellerads/textarea` or `npm install @propellerads/textarea -S`

### How to use

- `import Textarea from '@propellerads/textarea';`
- And render

```
<Textarea
    onChange={(value) => {}}
    label="My label"
    value={value}
/>
```