open-index/open-npm huggingface dataset:
npm package: @potoio/cli
Description: 提供组件开发命令行工具，包括预览(preview), 构建(build), 代码检查(lint), 单元测试(test), 创建组件/卡片/单页面应用模版(create)等命令。
Latest version: 1.0.5

# potoio Cli

提供组件开发命令行工具，包括预览(preview), 构建(build), 代码检查(lint), 单元测试(test), 创建组件/卡片/单页面应用模版(create)等命令。

### Installation

```shell
# 通过 npm
npm i @potoio/cli -D

# 通过 yarn
yarn add @potoio/cli -D

# 通过 pnpm
pnpm add @potoio/cli -D
```
npm package: @potoio/eslint-config
Description: eslint config of potoio
Latest version: 1.0.1

# Eslint Config of potoio

## Install

```shell
# with npm
npm i @potoio/eslint-config -D

# with yarn
yarn add @potoio/eslint-config -D

# with pnpm
pnpm add @potoio/eslint-config -D
```

## Usage

### Config .eslintrc
```json
{
  "extends": ["@potoio/eslint-config"]
}
```

### Config .eslintignore
```
dist
public
```


### Add script for package.json
```
{
  "scripts": {
    "lint": "eslint \"**/*.{vue,ts,js}\""
    "lint:fix": "eslint --fix \"**/*.{vue,ts,js}\""
  }
}
```

### Config VSCode auto fix

Create or update .vscode/settings.json

```
{
  "prettier.enable": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
```
npm package: @potoio/stylelint-config
Description: stylelint config of potoio.
Latest version: 1.0.2

# Stylelint Config of potoio

## Install

```shell
# with npm
npm i @potoio/stylelint-config -D

# with yarn
yarn add @potoio/stylelint-config -D

# with pnpm
pnpm add @potoio/stylelint-config -D
```

## Usage

```js
{
  "extends": ["@potoio/stylelint-config"]
}
```
npm package: @potok/icon-switch
Description: Potok.io UI Icon Switch component
Latest version: 0.0.19

Switch component

### Install

```bash
yarn add @potok/icon-switch
```

### Usage

```js static
import IconSwitch from '@potok/icon-switch';
import ApplicantFavIcon from '@potok/icons/glyph/misc/fav';
import ApplicantMoveIcon from '@potok/icons/glyph/misc/move';

const Example = () => (
  <div>
    <IconSwitch
      value={true}
      enabledIcon={<ApplicantFavIcon />}
      disabledIcon={<ApplicantMoveIcon />}
    />
  </div>
);
```

### Example

```js
const Locked = require('@potok/icons/glyph/clear/locked').default;
const Unlocked = require('@potok/icons/glyph/clear/unlocked').default;
const Lock = require('@potok/icons/glyph/clear/lock').default;
initialState = { checked: false };

<>
  <div>
    <IconSwitch
      enabledIcon={<Locked primaryColor="#fff" size="xsmall" />}
      disabledIcon={<Unlocked primaryColor="#fff" size="xsmall" />}
      label="Controllable"
      value={state.checked}
      onChange={e => setState({ checked: e.target.checked })}
    />
  </div>

  <div style={{ marginTop: 20 }}>
    <IconSwitch
      enabledIcon={<Lock primaryColor="#fff" size="xsmall" />}
      disabledIcon={<Lock primaryColor="#fff" size="xsmall" />}
      label="Uncontrollable"
    />
  </div>

  <div style={{ marginTop: 20 }}>
    <IconSwitch
      enabledIcon={<Locked primaryColor="#fff" size="xsmall" />}
      disabledIcon={<Unlocked primaryColor="#fff" size="xsmall" />}
      label="Disabled"
      value={true}
      disabled
    />
  </div>
</>;
```
npm package: @potok/icons
Description: Potok.io UI Kit icons
Latest version: 2.6.19

# Potok.io Icons

Potok.io UI Kit Icons package

## Available commands

### `yarn build`

Takes all SVGs from `/svg` folder, optimizes every item, and saves ready-to-use icon component file into `/glyph` directory.

### `yarn build:docs`

Generates docs for Clear icons pack. The command gets all icons from `/glyph/clear` folder and generates a React component for found components.

## Demo

Visit Icons demo [here](https://potokk.github.io/ui-kit/#icon)
npm package: @potok/switch
Description: Potok.io UI Switch component
Latest version: 0.0.12

Switch component

### Install

```bash
yarn add @potok/switch
```

### Usage

```js static
import Switch from "@potok/switch";

const Example = () => (
  <div>
    <Switch value={true} enabledContent="Enabled" disabledContent="Disabled" />
  </div>
);
```

### Example

```js
const CreateIcon = require("@potok/icons/glyph/clear/add").default;
const FavIcon = require("@potok/icons/glyph/misc/fav").default;
initialState = { checked: false, iconChecked: true };

<>
  <div>
    <Switch
      enabledContent="Enabled"
      disabledContent="Disabled"
      value={state.checked}
      onChange={e => setState({ checked: e.target.checked })}
    />
  </div>

  <div style={{ marginTop: 10 }}>
    <Switch
      enabledContent="Some enabled text"
      disabledContent="Some disabled text"
      value={true}
      disabled
    />
  </div>
</>;
```