open-index/open-npm huggingface dataset:
npm package: @react-script/normal
Description: Configuration and scripts for Create React App.
Latest version: 0.0.8

# xuan-react-scripts

自己定制的 react-scripts   
兼容 create-react-app 2.0.4 版本

# 使用指南

## 基于`xuan-react-scripts`创建项目

```bash
create-react-app [project-name] --scripts-version @react-script/normal
```

## 样式

- 支持 sass scss stylus

- 支持 css-module

- 支持 variables mixins 自动注入


## 路由支持支持

演示路径： /demo

## redux、redux-saga 的支持

演示路径： /demo/saga
npm package: @react-script/test
Description: Vic 定制
Latest version: 0.0.14

## 如何使用

```bash
npx create-react-app <project-name> --scripts-version=@react-script/test --typescript
```

## 禁用依赖树的检查

添加 **.env** 文件
```
SKIP_PREFLIGHT_CHECK=true
```

## 开启 eslint、eslintignore

```
{
  test: /\.(js|mjs|jsx|ts|tsx)$/,
  enforce: 'pre',
  use: [
    {
      options: {
        ignore: true,
        useEslintrc: true,
      }
    }
  ]
}
```

## 添加 stylus，全局自动注入 `less sass stylus` 变量

```
const stylusRegex = /\.(styl|stylus)$/
const stylusModuleRegex = /\.module\.(styl|stylus)$/

{
  test: stylusRegex,
  exclude: stylusModuleRegex,
  use: [
    {
      loader: 'style-resources-loader',
      options: {
        patterns: [
          path.resolve(paths.appSrc, 'assets/styles/auto-inject/*.styl'),
        ]
      }
    }
  ],
},
{
  test: stylusModuleRegex,
  use: [
    {
      loader: 'style-resources-loader',
      options: {
        patterns: [
          path.resolve(paths.appSrc, 'assets/styles/auto-inject/*.styl'),
        ]
      }
    }
  ],
}
```
npm package: @react-sextant/event-loop-delay
Description: Call at constant intervals in event-loop, same like a configurable `wait` requestAnimationFrame.
Author: 1uokun
Latest version: 0.1.1

# event-loop-delay

[![npm version](https://img.shields.io/npm/v/@react-sextant/event-loop-delay.svg)](https://www.npmjs.com/package/@react-sextant/event-loop-delay)
[![Downloads/month](https://img.shields.io/npm/dm/@react-sextant/event-loop-delay.svg)](http://www.npmtrends.com/@react-sextant/event-loop-delay)
[![Build Status](https://travis-ci.org/1uokun/event-loop-delay.svg?branch=master)](https://travis-ci.org/1uokun/event-loop-delay)
[![Coverage Status](https://codecov.io/gh/1uokun/event-loop-delay/branch/master/graph/badge.svg)](https://codecov.io/gh/1uokun/event-loop-delay)
[![Dependency Status](https://david-dm.org/1uokun/event-loop-delay.svg)](https://david-dm.org/1uokun/event-loop-delay)


Call at constant intervals in event-loop

## 💿 Installation

Use [npm](https://www.npmjs.com/) to install then use a bundler.

```
npm install @react-sextant/event-loop-delay
```

Or download from [`dist` directory](./dist).

- [dist/event-loop-delay.mjs](dist/event-loop-delay.mjs) ... ES modules version.
- [dist/event-loop-delay.js](dist/event-loop-delay.js) ... Common JS version.
- [dist/event-loop-delay.umd.js](dist/event-loop-delay.umd.js) ... UMD (Universal Module Definition) version. This is transpiled by [Babel](https://babeljs.io/) for IE 11.


# 📖 Usage

```javascript 1.5
import {Delay} from '@react-sextant/event-loop-delay'

let delay = new Delay(500); // Call at interval 500ms

delay(function(){
  //...
})
```

# 🔧 Contribution

before `npm run build` need `npm run regenerator` to make a `Delay-es5.js` for UMD version
npm package: @react-sextant/react-sextant
Description: UI components for React Native，Embrace agile development
Author: https://github.com/1uokun
Latest version: 1.0.0

# react-sextant
🐰️UI components for React Native，Embrace agile development

# Install <a href="https://npmjs.org/package/@react-sextant/react-sextant"><img alt="npm version" src="http://img.shields.io/npm/v/@react-sextant/react-sextant.svg?style=flat-square"></a> <a href="https://npmjs.org/package/@react-sextant/react-sextant"><img alt="npm version" src="http://img.shields.io/npm/dm/@react-sextant/react-sextant.svg?style=flat-square"></a>
```bash
npm i @react-sextant/react-sextant
```

## What is react-sextant?
react-sextant is a UI Components for quickly and agile development of APP.
Some of its component API design reference [ant-design-mobile]() , 
but no eggs, more code readability, more free modification.

We hope [react-sextant]() to **not only** reduce development time, **but also** be highly customizable.

## docs

#### Components
 - [Button 按钮](https://github.com/React-Sextant/react-sextant/tree/master/docs/button.md)
 - [InputItem 文本输入框](https://github.com/React-Sextant/react-sextant/tree/master/docs/input-item.md)
 - [ModalView 模拟模态框](https://github.com/React-Sextant/react-sextant/tree/master/docs/modal-view.md)
 - [RootView 根视图](https://github.com/React-Sextant/react-sextant/tree/master/docs/root-view.md)
 
#### 辅助函数
 - [_fetch 拓展fetch函数](https://github.com/React-Sextant/react-sextant/tree/master/docs/_fetch.md)

## License

 [![LICENSE](https://img.shields.io/badge/license-Anti%20996-blue.svg)](https://github.com/996icu/996.ICU/blob/master/LICENSE)
npm package: @react-shamsi-salmanfood/datepicker
Description: Let's start by displaying a very simple Jalali date picker using react-jalali. We do it by import the styles and the component itself like so:
Latest version: 2.3.0

## Jalali date picker

Let's start by displaying a very simple Jalali date picker using react-jalali. We do it by import the styles and the component itself like so:

```jsx
import { DatePicker } from "@react-shamsi/datepicker";
import "@react-shamsi/calendar/dist/styles.css";
import "@react-shamsi/datepicker/dist/styles.css";

export default function Example() {
  return <DatePicker />;
}
```

### Configuration

Now we are going to explore every single prop that could be passed to DatePicker.
| Prop name | Description | Default value
|--|--| --|
|autoUpdate|Automatically updates the input whenever the user changes the active date. This means that the confirm button won't be needed for saving the date anymore.| false|
|defaultDate| The date that will be displayed on the input by default| n/a |
|calendarProps| Every prop for configuring the calendar component| n/a|
|date| Changes the date in a controlled manner | n/a |
|dateFormat| The format that the date will be displayed in | "yyyy/MM/dd" |
|onChange|Function that gets called whenever the user selects a date. The new date will be passed as it's argument| n/a |
|persianDigits|Will convert the input's date to persian digits|false|
|...Input element props| Every other prop that can be passed to an input can be also passed to this component.| n/a |
npm package: @react-shamsi/datepicker
Description: Let's start by displaying a very simple Jalali date picker using react-jalali. We do it by import the styles and the component itself like so:
Latest version: 0.2.1

## Jalali date picker

Let's start by displaying a very simple Jalali date picker using react-jalali. We do it by import the styles and the component itself like so:

```jsx
import { DatePicker } from "@react-shamsi/datepicker";
import "@react-shamsi/calendar/dist/styles.css";
import "@react-shamsi/datepicker/dist/styles.css";

export default function Example() {
  return <DatePicker />;
}
```

### Configuration

Now we are going to explore every single prop that could be passed to DatePicker.
| Prop name | Description | Default value
|--|--| --|
|autoUpdate|Automatically updates the input whenever the user changes the active date. This means that the confirm button won't be needed for saving the date anymore.| false|
|defaultDate| The date that will be displayed on the input by default| n/a |
|calendarProps| Every prop for configuring the calendar component| n/a|
|date| Changes the date in a controlled manner | n/a |
|dateFormat| The format that the date will be displayed in | "yyyy/MM/dd" |
|onChange|Function that gets called whenever the user selects a date. The new date will be passed as it's argument| n/a |
|persianDigits|Will convert the input's date to persian digits|false|
|...Input element props| Every other prop that can be passed to an input can be also passed to this component.| n/a |
npm package: @react-shamsi/timepicker
Description: Let's start by displaying a very simple Jalali date picker using react-jalali. We do it by import the styles and the component itself like so:
Latest version: 0.1.1

## Jalali date picker

Let's start by displaying a very simple Jalali date picker using react-jalali. We do it by import the styles and the component itself like so:

```jsx
import { DatePicker } from "@react-shamsi/datepicker";
import "@react-shamsi/calendar/dist/styles.css";
import "@react-shamsi/datepicker/dist/styles.css";

export default function Example() {
  return <DatePicker />;
}
```

### Configuration

Now we are going to explore every single prop that could be passed to DatePicker.
| Prop name | Description | Default value
|--|--| --|
|autoUpdate|Automatically updates the input whenever the user changes the active date. This means that the confirm button won't be needed for saving the date anymore.| false|
|defaultDate| The date that will be displayed on the input by default| n/a |
|calendarProps| Every prop for configuring the calendar component| n/a|
|date| Changes the date in a controlled manner | n/a |
|dateFormat| The format that the date will be displayed in | "yyyy/MM/dd" |
|onChange|Function that gets called whenever the user selects a date. The new date will be passed as it's argument| n/a |
|persianDigits|Will convert the input's date to persian digits|false|
|...Input element props| Every other prop that can be passed to an input can be also passed to this component.| n/a |
npm package: @react-shared/click-outside
Description: ClickOutside component for React
Author: TJ Holowaychuk
Latest version: 1.1.1


# ClickOutside

React click outside component.

## Installation

```
$ npm install tj/react-click-outside
```

## Example

```js
<ClickOutside onClickOutside={::this.close}>
  <p>Im a menu or something that you want to hide when clicking outside.</p>
</ClickOutside>
```

## Badges

![](https://img.shields.io/badge/license-MIT-blue.svg)
![](https://img.shields.io/badge/status-stable-green.svg)

---

> [tjholowaychuk.com](http://tjholowaychuk.com) &nbsp;&middot;&nbsp;
> GitHub [@tj](https://github.com/tj) &nbsp;&middot;&nbsp;
> Twitter [@tjholowaychuk](https://twitter.com/tjholowaychuk)
npm package: @react-shared/hover
Author: heineiuo
Latest version: 0.1.1

# react-withhover


## Install

```bash
yarn add react-withhover # or npm install react-withhover
```

## Usage

### high order component
```javascript
import React, {Component} from 'react'
import {withHover} from 'react-withhover'

class Example extends Component {
  render(){
    return (
      <div>
        {this.props.isHovered ? 'hovered': 'not hovered'}
      </div>
    )
  }
}

export default withHover(Example)



```

### component

```javascript
import React, {Component} from 'react'
import {Hover} from 'react-withhover'

class Example extends Component {
  render() {
    return (
      <Hover>
        {(props) => {
          return (
            <div>
              {this.props.isHovered ? 'hovered': 'not hovered'}
            </div>
          )
        }}
      </Hover>
    )
  }
}

export default Example

```


#### props

* *tagName* the wrapper tagName, default 'dev'
* *className* only work when children is string or array
* *style* only work when children is string or array
* **onStateChange** the hover state, example: 

    ```javascript
      onStateChange = (state) => {console.log(state.isHovered)}
    ``` 

## License

MIT
npm package: @react-shared/platform
Description: <Platform> for browser
Author: @heineiuo
Latest version: 0.0.1

# react-platform-js

## Install

```bash
yarn add react-platform-js # or npm install react-platform-js
```

## Usage

### method
```javascript
import Platform from 'react-platform-js'

Platform.OS // OS name, Mac OS
Platform.OSVersion // OS version, 10.11
Platform.Browser // Browser name, Chrome
Platform.BrowserVersion // Browser Version
Platform.Engine // browser engine name
// and ...
Platform.CPU
Platform.DeviceType
Platform.DeviceModel
Platform.DeviceVendor
Platform.UA

```

### component

```javascript
import React, {Component} from 'react'
import Platform from 'react-platform-js'

class App extends Component {
  render() {
    return (
      <Platform rules={{OS: 'Mac OS'}}>
        Only Mac OS computer will see this text.
      </Platform>
    )
  }
}

/**
 * use function children
 * *important* in this way, prop 'rules' will not work
 */
class App2 extends Component {
  render() {
    return (
      <Platform>
        {props => {
          return (
            <div>
              OS: {props.OS},
              OSVersion: {props.OSVersion},
              Browser: {props.Browser},
              BrowserVersion: {props.BrowserVersion},
              DeviceType: {props.DeviceType},
              DeviceModel: {props.DeviceModel},
              DeviceVendor: {props.DeviceVendor},
              Engine: {props.Engine},
              EngineVersion: {props.EngineVersion},
              CPU: {props.CPU},
              UA: {props.UA},
            </div>
          )
        }}
      </Platform>
    )
  }
}
```


#### props

* *rules*
* *className* only work when children is string or array
* *style* only work when children is string or array

## License

MIT
npm package: @react-simple-component/calendar
Description: A Simple React Calendar Panel Component
Author: Xiao Xiong
Latest version: 0.0.2

# react-simple-component-calendar

English | [中文](./README-zh.md)

A simple calendar component build for react. Simple style, simple use, & powerless.

[Online Demo](http://demo.xiaoxiaoxiaoxiong.com/react-simple-component-calendar/)

## Usage

```bash
npm install --save @react-simple-component/calendar
```

```javascript
<Calendar
  list={[
    {
      className: "active",
      time: 1560787200000
      // & every what fuck you want set on date element
    },
    {
      className: "active",
      time: 1553881332850
    }
  ]}
  now={new Date().valueOf()}
  onClick={(date: Date, item: ListItem): void => {
    console.log(date, item);
  }}
/>
```

## Documentation

| Prop    | Type       | Description                                                    |
| :------ | :--------- | :------------------------------------------------------------- |
| list    | `Array`    | Every props you what to apply to button element                |
| now     | `String`   | Timestamp which you what to mark today (will border highlight) |
| onClick | `Function` | When your click date element will trigger                      |
npm package: @react-simple-maps/usa
Description: Simple map of the usa.
Author: Jules Vigy
Latest version: 1.0.7

# @react-simple-maps/usa

Simple and easy to use map of the usa for React. Quickly display a heat map of the usa.

### Install using:

```
npm i @react-simple-maps/usa
```

### Example usage:

```
import { USA } from "@react-simple-maps/usa";

function App() {
  const values = {
    size: "50%",
    wi: {
      color: "green",
    },
    tx: {
      color: "blue",
    },
    al: {
      color: "red",
    },
  };
  return (
    <div className="App">
      <h1>Map Demo</h1>
      <USA values={values} />
    </div>
  );
}

export default App;
```

### Result

![result map](https://github.com/julesvigy/react-simple-maps/blob/master/packages/usa/images/map_demo.png?raw=true)

### Props

Props can be passed in to specify the color of the state and the size of the map. Every state is a key in the object. Every state in the object should be abreviated and lowercase. The Props object name and value should be named `values`.

example object:

```
{
    size: "50%",
    wi: {
      color: "green",
    },
    tx: {
      color: "blue",
    },
    al: {
      color: "red",
    },
    pa: {
        color: "yellow",
        },
    }
  };
```

### Credits

I would like to thank [simple maps](https://simplemaps.com/resources/svg-maps) for the open source SVG maps.
npm package: @react-simplifier/babel-plugin
Description: A Babel plugin that makes writing React components concise and fast.
Author: Marcin Lasecki
Latest version: 0.0.1-alpha.1

# @react-simplifier/babel-plugin
A Babel plugin that makes writing React components concise and fast.

:warning: **WARNING: This project is still in early develop stage! DO NOT use it on production!** :warning:

## How it works?
Let's have a look on an example. This is a simple React component:
```jsx
const Counter = () => {
  const [counter, setCounter] = useState(0);

  const increment = () => {
    setCounter((prevValue) => prevValue + 1);
  };

  return (
    <div>
      <span>{counter}</span>
      <button onClick={increment}>Increment</button>
    </div>
  )
};
```
And here, the same component but with React Simplifier:
```jsx
const Counter = () => {
  const $counter = 0;

  const increment = () => { counter++; }

  return (
    <div>
      <span>{counter}</span>
      <button onClick={increment}>Increment</button>
    </div>
  )
};
```
As you can see, working with this plugin is much easier, because you don't have to import `useState` and use the `useState` getter/setter. You can deal with the component's state as with normal JS variables. Under the hood the React `useState` hook is still used so the compiled code will look like this:
```jsx
import { useState } from 'react';

const Counter = () => {
  const [$counter, ____set$counter] = useState(0);

  const increment = () => ____set$counter((prevValue) => prevValue + 1);

  return (
    <div>
      <span>{counter}</span>
      <button onClick={increment}>Increment</button>
    </div>
  )
};

```
But you don't need to care, because the plugin does it for you. :wink:

## Installation
The plugin is available as an npm package.
```
npm i @react-simplifier/babel-plugin
```
After installation you have to add the plugin to your Babel config file.

```js
module.exports = {
  ...
  plugins: [
    '@react-simplifier/babel-plugin'
  ]
}
```

## Configuration
| Property | Required | Type | Default value | Description |
| -------- | -------- | ---- | ------------- | ----------- |
| `stateVariablePattern` | :x: | `RegExp` | `/^\$\w+/` | Set pattern to recognize React state variables. The default pattern starts with the dollar sign - `$foo` |

## FAQ
### Does the plugin work with class components?
Not yet, we plan to add support for class components in the future - this is one of our priorities.
npm package: @react-simply/state
Description: Super simple state management for React apps
Author: Luke Hall
Latest version: 1.0.2

# @react-simply/state

Super simple state management for React apps.

## Install

```sh
npm i @react-simply/state
```

## Usage

Read my [State Management with React Hooks and Context API at 10 lines of code!](https://medium.com/simply/state-management-with-react-hooks-and-context-api-at-10-lines-of-code-baf6be8302c) article on Medium or follow these steps:

1. Wrap your React App into `StateProvider`.

2. Pass default state and reducer (simple function that accepts `state` object and `action` object):

```jsx harmony
import { StateProvider } from '@react-simply/state';

const App = () => {
  const initialState = {
    theme: { primary: 'green' }
  };
  
  const reducer = (state, action) => {
    switch (action.type) {
      case 'changeTheme':
        return {
          ...state,
          theme: action.newTheme
        };
        
      default:
        return state;
    }
  };
  
  return (
    <StateProvider initialState={initialState} reducer={reducer}>
        // App content ...
    </StateProvider>
  );  
}
```

3\. Use and update your state in any component inside your App.
`getState` function returns array, where first item is `state` object and second item is `dispatch` function that accepts the `action` as a parameter. 

```jsx harmony
import getState from '@react-simply/state';

const ThemedButton = () => {
  const [{ theme }, dispatch] = getState();
  
  return (
    <Button
      primaryColor={theme.primary}
      onClick={() => dispatch({
        type: 'changeTheme',
        newTheme: { primary: 'blue'}
      })}
    >
      Make me blue!
    </Button>
  );
}
```

That's it. State management have never been easier!
npm package: @react-slate/components
Description: Standard component library for react-slate
Author: Paweł Trysła
Latest version: 0.2.0

<p align="center">
  <img alt="react-slate" src="../../website/static/img/react_slate_logo.png" width="700">
</p>

<p align="center">
  Write React apps for terminal
</p>

---

# `@react-slate/components`

[![Version][version-badge]][package]
[![Build Status][build-badge]][build]
[![MIT License][license-badge]][license]

[![PRs Welcome][prs-welcome-badge]][prs-welcome]
[![Chat][chat-badge]][chat]
[![Code of Conduct][coc-badge]][coc]

Standard component library for [`react-slate`](https://www.npmjs.com/package/@react-slate/core).

---

![Prototype of Haul CLI](https://raw.githubusercontent.com/zamotany/react-slate/master/haul-cli-preview.gif)

Prototype of [Haul CLI](https://github.com/callstack/haul). You can see the [source here](https://github.com/callstack/haul/blob/b5de93c580128a8f5be48c01e4f87211d7e70435/src/server/ui.js#L74-L346).

### Installation

```bash
yarn add @react-slate/core @react-slate/components
```

### Documentation

Documentation can be found here: http://react-slate.surge.sh/

<!-- badges -->

[build-badge]: https://img.shields.io/circleci/project/github/zamotany/react-slate/master.svg?style=flat-square
[build]: https://circleci.com/gh/zamotany/react-slate
[license-badge]: https://img.shields.io/npm/l/@react-slate/components.svg?style=flat-square
[license]: https://opensource.org/licenses/MIT
[version-badge]: https://img.shields.io/npm/v/@react-slate/components.svg?style=flat-square
[package]: https://www.npmjs.com/package/@react-slate/components
[prs-welcome-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
[prs-welcome]: http://makeapullrequest.com
[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
[coc]: https://github.com/zamotany/react-slate/blob/master/CODE_OF_CONDUCT.md
[chat-badge]: https://img.shields.io/badge/chat-discord-brightgreen.svg?style=flat-square&colorB=7289DA&logo=discord
[chat]: https://discord.gg/zwR2Cdh
npm package: @react-slate/core
Description: Write interactive CLI apps with React
Author: Paweł Trysła
Latest version: 1.0.1

<p align="center">
  <img alt="react-slate" src="https://raw.githubusercontent.com/zamotany/react-slate/master/docs/_assets/react_slate_logo.png" width="700">
</p>

<p align="center">
  Write interactive CLI apps with React
</p>

---

### Website & documentation

https://zamotany.github.io/react-slate/

### Features

* Render React apps to terminal (`render`), string (`renderToString`) or as a JSON tree (`renderToJson`).
* Build layouts with FlexBox (https://github.com/vislyhq/stretch).
* Render your app to alternative screen buffer and go back to the previous content upon exit.
* Log messages to main screen buffer with `console` when exiting.
* Disable colors with [`NO_COLOR`](https://no-color.org/) environment variable.
* Use standard ANSI colors, RBG, Hex and CSS keywords to style your app.
* Use built-in `<Progress />` and `<Spinner />` components.
* Get layout information using `onLayout` prop.
* Handle clicks using `onClick` prop.
* Detect mouse wheel events using `onWheel` prop.
* Use `for await` to continuously render your app using `renderToString` or `renderToJson`.
* Support for absolute positioning and depth (`zIndex`).
* Built with TypeScript.

Please check out [Roadmap](https://github.com/zamotany/react-slate/issues/99) for in-progress and planned features. 

### Limitations

* Web components are not compatible.
* Strings must be wrapped in a `<Text>` component.

## Installation

```bash
yarn add react @react-slate/core
```
npm package: @react-slate/interactive
Description: Components to interact with TTY stream in react-slate apps
Author: Paweł Trysła
Latest version: 0.1.0
Deprecated: Package was migrated to @react-slate/components

# @react-slate/interactive

[![Version][version-badge]][package]
[![Build Status][build-badge]][build]
[![MIT License][license-badge]][license]

[![PRs Welcome][prs-welcome-badge]][prs-welcome]
[![Chat][chat-badge]][chat]
[![Code of Conduct][coc-badge]][coc]

Utilities for altering/enhancing terminal for [`react-slate`](https://www.npmjs.com/package/@react-slate/core).

---

![Prototype of Haul CLI](https://raw.githubusercontent.com/zamotany/react-slate/master/haul-cli-preview.gif)

Prototype of [Haul CLI](https://github.com/callstack/haul). You can see the [source here](https://github.com/callstack/haul/blob/b5de93c580128a8f5be48c01e4f87211d7e70435/src/server/ui.js#L74-L346).

### Installation

```bash
yarn add @react-slate/core @react-slate/interactive
```

### Documentation

Documentation can be found here: http://react-slate.surge.sh/

<!-- badges -->

[build-badge]: https://img.shields.io/circleci/project/github/zamotany/react-slate/master.svg?style=flat-square
[build]: https://circleci.com/gh/zamotany/react-slate
[license-badge]: https://img.shields.io/npm/l/@react-slate/interactive.svg?style=flat-square
[license]: https://opensource.org/licenses/MIT
[version-badge]: https://img.shields.io/npm/v/@react-slate/interactive.svg?style=flat-square
[package]: https://www.npmjs.com/package/@react-slate/interactive
[prs-welcome-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
[prs-welcome]: http://makeapullrequest.com
[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
[coc]: https://github.com/zamotany/react-slate/blob/master/CODE_OF_CONDUCT.md
[chat-badge]: https://img.shields.io/badge/chat-discord-brightgreen.svg?style=flat-square&colorB=7289DA&logo=discord
[chat]: https://discord.gg/zwR2Cdh
npm package: @react-slate/reflow
Description: Layout and rendering engine for terminals.
Author: Paweł Trysła
Latest version: 0.2.0-alpha.0

<p align="center">
  <img alt="react-slate" src="../../website/static/img/react_slate_logo.png" width="700">
</p>

<p align="center">
  Write React apps for terminal
</p>

---

# `@react-slate/reflow`

[![Version][version-badge]][package]
[![Build Status][build-badge]][build]
[![MIT License][license-badge]][license]

[![PRs Welcome][prs-welcome-badge]][prs-welcome]
[![Chat][chat-badge]][chat]
[![Code of Conduct][coc-badge]][coc]

Layout and rendering engine for terminals, used by [`react-slate`](https://www.npmjs.com/package/@react-slate/core).

---

![Prototype of Haul CLI](https://raw.githubusercontent.com/zamotany/react-slate/master/haul-cli-preview.gif)

Prototype of [Haul CLI](https://github.com/callstack/haul). You can see the [source here](https://github.com/callstack/haul/blob/b5de93c580128a8f5be48c01e4f87211d7e70435/src/server/ui.js#L74-L346).

### Installation

```bash
yarn add @react-slate/core @react-slate/components
```

### Documentation

Documentation can be found here: http://react-slate.surge.sh/

<!-- badges -->

[build-badge]: https://img.shields.io/circleci/project/github/zamotany/react-slate/master.svg?style=flat-square
[build]: https://circleci.com/gh/zamotany/react-slate
[license-badge]: https://img.shields.io/npm/l/@react-slate/reflow.svg?style=flat-square
[license]: https://opensource.org/licenses/MIT
[version-badge]: https://img.shields.io/npm/v/@react-slate/reflow.svg?style=flat-square
[package]: https://www.npmjs.com/package/@react-slate/reflow
[prs-welcome-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
[prs-welcome]: http://makeapullrequest.com
[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
[coc]: https://github.com/zamotany/react-slate/blob/master/CODE_OF_CONDUCT.md
[chat-badge]: https://img.shields.io/badge/chat-discord-brightgreen.svg?style=flat-square&colorB=7289DA&logo=discord
[chat]: https://discord.gg/zwR2Cdh
npm package: @react-slate/utils
Description: react-slate utils for altering a TTY stream
Author: Paweł Trysła
Latest version: 0.2.2

# @react-slate/utils

[![Version][version-badge]][package]
[![Build Status][build-badge]][build]
[![MIT License][license-badge]][license]

[![PRs Welcome][prs-welcome-badge]][prs-welcome]
[![Chat][chat-badge]][chat]
[![Code of Conduct][coc-badge]][coc]

Utilities for altering/enhancing terminal for [`react-slate`](https://www.npmjs.com/package/@react-slate/core).

---

![Prototype of Haul CLI](https://raw.githubusercontent.com/zamotany/react-slate/master/haul-cli-preview.gif)

Prototype of [Haul CLI](https://github.com/callstack/haul). You can see the [source here](https://github.com/callstack/haul/blob/b5de93c580128a8f5be48c01e4f87211d7e70435/src/server/ui.js#L74-L346).

### Installation

```bash
yarn add @react-slate/core @react-slate/utils
```

### Documentation

Documentation can be found here: http://react-slate.surge.sh/

<!-- badges -->

[build-badge]: https://img.shields.io/circleci/project/github/zamotany/react-slate/master.svg?style=flat-square
[build]: https://circleci.com/gh/zamotany/react-slate
[license-badge]: https://img.shields.io/npm/l/@react-slate/utils.svg?style=flat-square
[license]: https://opensource.org/licenses/MIT
[version-badge]: https://img.shields.io/npm/v/@react-slate/utils.svg?style=flat-square
[package]: https://www.npmjs.com/package/@react-slate/utils
[prs-welcome-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
[prs-welcome]: http://makeapullrequest.com
[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
[coc]: https://github.com/zamotany/react-slate/blob/master/CODE_OF_CONDUCT.md
[chat-badge]: https://img.shields.io/badge/chat-discord-brightgreen.svg?style=flat-square&colorB=7289DA&logo=discord
[chat]: https://discord.gg/zwR2Cdh
npm package: @react-slices/components
Description: React Component library
Author: @satishborkar
Latest version: 0.0.5

# @react-slices/components

React helper components for small functionalities and some CSS interactive modified HTML components

-   `CopyToClipboardIcon`

```javascript
import { CopyToClipboardIcon } from '@react-slices/components';

<CopyToClipboardIcon text={'text to copy onclick'} containerClassName="" iconClassName="" style={{ color: 'red' }} inline={true || false} />;
```

Example with children

```javascript
<CopyToClipboardIcon text={'text to copy onclick'} containerClassName="" iconClassName="">
    Copy Text or your icon
</CopyToClipboardIcon>
```

-   `Button`

```javascript
import { Button } from '@react-slices/components';

<Button label={'Button Initial Label'} hoverText={'Text on hover'} containerClassName="" buttonClassName="" style={{ color: 'red' }} />;
```

Example with children

```javascript
<Button text={'text to copy onclick'} containerClassName="" buttonClassName="">
    any child
</Button>
```
npm package: @react-spa-scaffold/eslint-config
Description: Shared ESLint configuration for react-spa-scaffold projects
Author: Mariusz Kaczkowski
Latest version: 1.1.0

# @react-spa-scaffold/eslint-config

Shared ESLint configuration for react-spa-scaffold projects.

## Installation

```bash
npm install -D @react-spa-scaffold/eslint-config eslint typescript-eslint @eslint/js eslint-config-prettier
```

For React projects, also install:

```bash
npm install -D eslint-plugin-react-hooks eslint-plugin-react-refresh eslint-plugin-lingui
```

## Usage

### React Projects (default)

```javascript
// eslint.config.js
import config from '@react-spa-scaffold/eslint-config';

export default config;
```

### Node.js Projects

```javascript
// eslint.config.js
import config from '@react-spa-scaffold/eslint-config/node';

export default config;
```

### With Customization

```javascript
// eslint.config.js
import config from '@react-spa-scaffold/eslint-config';

export default [
  ...config,
  {
    rules: {
      // Your overrides
      'no-console': 'off',
    },
  },
];
```

## Available Configs

| Config          | Import                                   | Description                          |
| --------------- | ---------------------------------------- | ------------------------------------ |
| React (default) | `@react-spa-scaffold/eslint-config`      | React + TypeScript + LinguiJS        |
| Node.js         | `@react-spa-scaffold/eslint-config/node` | Node.js servers (no React/i18n)      |
| Base            | `@react-spa-scaffold/eslint-config/base` | TypeScript only (for custom configs) |

## What's Included

### React Config

- TypeScript strict rules
- React Hooks rules
- React Refresh (HMR support)
- LinguiJS i18n enforcement
- Prettier compatibility

### Node.js Config

- TypeScript strict rules
- Console logging allowed
- No React/i18n rules
- Prettier compatibility
npm package: @react-spa-scaffold/prettier-config
Description: Shared Prettier configuration for react-spa-scaffold projects
Author: Mariusz Kaczkowski
Latest version: 1.0.0

# @react-spa-scaffold/prettier-config

Shared Prettier configuration for react-spa-scaffold projects.

## Installation

```bash
npm install -D @react-spa-scaffold/prettier-config prettier
```

For Tailwind CSS class sorting:

```bash
npm install -D prettier-plugin-tailwindcss
```

## Usage

### In package.json (simplest)

```json
{
  "prettier": "@react-spa-scaffold/prettier-config"
}
```

### In prettier.config.js

```javascript
// Base config (no Tailwind)
export { default } from '@react-spa-scaffold/prettier-config';

// With Tailwind class sorting
export { default } from '@react-spa-scaffold/prettier-config/tailwind';
```

### With Customization

```javascript
import config from '@react-spa-scaffold/prettier-config';

export default {
  ...config,
  printWidth: 80, // Override
};
```

## Available Configs

| Config   | Import                                         | Description              |
| -------- | ---------------------------------------------- | ------------------------ |
| Base     | `@react-spa-scaffold/prettier-config`          | Standard formatting      |
| Tailwind | `@react-spa-scaffold/prettier-config/tailwind` | + Tailwind class sorting |

## Configuration

Both configs include:

- `semi: true` - Semicolons
- `singleQuote: true` - Single quotes
- `trailingComma: 'all'` - Trailing commas everywhere
- `printWidth: 120` - Line width
- `tabWidth: 2` - 2-space indentation
- `useTabs: false` - Spaces, not tabs
npm package: @react-spa-scaffold/tsconfig
Description: Shared TypeScript configurations for react-spa-scaffold projects
Author: Mariusz Kaczkowski
Latest version: 1.0.0

# @react-spa-scaffold/tsconfig

Shared TypeScript configurations for react-spa-scaffold projects.

## Installation

```bash
npm install -D @react-spa-scaffold/tsconfig typescript
```

## Usage

### React Applications

```json
{
  "extends": "@react-spa-scaffold/tsconfig/react",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src", "tests"]
}
```

### Node.js Projects

```json
{
  "extends": "@react-spa-scaffold/tsconfig/node",
  "compilerOptions": {
    "outDir": "dist",
    "rootDir": "src"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}
```

### Vite Config Files

```json
{
  "extends": "@react-spa-scaffold/tsconfig/vite",
  "include": ["vite.config.ts", "vitest.config.ts"]
}
```

## Available Configs

| Config  | Import                               | Description                           |
| ------- | ------------------------------------ | ------------------------------------- |
| Base    | `@react-spa-scaffold/tsconfig/base`  | Shared foundation (not used directly) |
| React   | `@react-spa-scaffold/tsconfig/react` | React apps with DOM types             |
| Node.js | `@react-spa-scaffold/tsconfig/node`  | Node.js with NodeNext modules         |
| Vite    | `@react-spa-scaffold/tsconfig/vite`  | Vite/Vitest config files              |

## Path Aliases

Path aliases like `@/*` must be configured per-project since they depend on your directory structure:

```json
{
  "extends": "@react-spa-scaffold/tsconfig/react",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
```

## What's Included

### All Configs

- `strict: true`
- `noUnusedLocals: true`
- `noUnusedParameters: true`
- `skipLibCheck: true`

### React Config

- DOM and DOM.Iterable libs
- `jsx: "react-jsx"`
- `verbatimModuleSyntax: true`

### Node.js Config

- `module: "NodeNext"`
- Declaration files enabled
- Source maps enabled
npm package: @react-spectre/accordion
Description: React components for Spectre.css accordion element.
Author: Rubens Mariuzzo
Latest version: 1.0.0-16

<div align=center>
<img src="assets/react-spectre-logo.png" width="256" height="256">

# `@react-spectre/accordion`
React components for Spectre.css accordion element.

<br><br><br>
</div>

## Installation

```shell
yarn add @react-spectre/accordion
```

```shell
npm install @react-spectre/accordion --save
```

<br>

## Usage

### Accordion

Accordions are used to toggle sections of content.

```js
import { Accordion, Header, Body } from '@react-spectre/accordion'
```

```jsx
<Accordion>
  <Accordion.Header id="acc-1">Element</Accordion.Header>
  <Accordion.Body>
    <ul className="menu menu-nav">
      <li className="menu-item">
        <a href="#accordions">Element 1</a>
      </li>
      <li className="menu-item">
        <a href="#accordions">Element 2</a>
      </li>
    </ul>
  </Accordion.Body>
</Accordion>
<Accordion>
  <Accordion.Header id="acc-2">Layout</Accordion.Header>
  <Accordion.Body>
    <ul className="menu menu-nav">
      <li className="menu-item">
        <a href="#accordions">Layout 1</a>
      </li>
      <li className="menu-item">
        <a href="#accordions">Layout 2</a>
      </li>
    </ul>
  </Accordion.Body>
</Accordion>
<Accordion>
  <Accordion.Header id="acc-3">Component</Accordion.Header>
  <Accordion.Body>
    <ul className="menu menu-nav">
      <li className="menu-item">
        <a href="#accordions">Component 1</a>
      </li>
      <li className="menu-item">
        <a href="#accordions">Component 2</a>
      </li>
    </ul>
  </Accordion.Body>
</Accordion>
```

> **Note:** The main component is `Accordion`, other component can be accessed through it, for example: `Accordion.Header` or `Accordion.Body`.


<div align=center>
<br><br><br>

Made with :heart: by [Rubens Mariuzzo](https://github.com/rmariuzzo).

[MIT License](LICENSE)

</div>
npm package: @react-spectre/autocomplete
Description: React components for Spectre.css autocomplete element.
Author: Rubens Mariuzzo
Latest version: 1.0.0-16

<div align=center>
<img src="assets/react-spectre-logo.png" width="256" height="256">

# `@react-spectre/autocomplete`
React components for Spectre.css autocomplete element.

<br><br><br>
</div>

## Installation

```shell
yarn add @react-spectre/autocomplete
```

```shell
npm install @react-spectre/autocomplete --save
```

<br>

## Usage

### Autocomplete

Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input.

The component does NOT include JavaScript code, you will need to implement your JS to interact with the autocomplete. Nevertheless [here's](assets/js_autocomplete.js) an example with JS.

```js
import { Autocomplete, Input, Menu } from '@react-spectre/autocomplete'
```

```jsx
<Autocomplete>
  <Autocomplete.Input focus>
    <div className="chip">
      <img className="avatar avatar-sm" alt="Thor Odinson" />
      Thor Odinson
      <a href="#" className="btn btn-clear" aria-label="Close" role="button" />
    </div>

    <input className="form-input" type="text" placeholder="typing here" />
  </Autocomplete.Input>
  <Autocomplete.Menu>
    <li className="menu-item">
      <a href="#">
        <div className="tile tile-centered">
          <div className="tile-icon">
            <img className="avatar avatar-sm" alt="Steve Rogers" />
          </div>
          <div className="tile-content">
            Steve Rogers
          </div>
        </div>
      </a>
    </li>
  </Autocomplete.Menu>
</Autocomplete>
```

> **Note:** The main component is `Autocomplete`, other component can be accessed through it, for example: `Autocomplete.Input` or `Autocomplete.Menu`.

<div align=center>
<br><br><br>

Made with :heart: by [Rubens Mariuzzo](https://github.com/rmariuzzo).

[MIT License](LICENSE)

</div>
npm package: @react-spectre/avatar
Description: React components for Spectre.css avatar element.
Author: Rubens Mariuzzo
Latest version: 1.0.0-16

<div align=center>
<img src="assets/react-spectre-logo.png" width="256" height="256">

# `@react-spectre/avatar`
React components for Spectre.css avatar element.

<br><br><br>
</div>

## Installation

```shell
yarn add @react-spectre/avatar
```

```shell
npm install @react-spectre/avatar --save
```

<br>

## Usage

### Avatar

Avatars are user profile pictures.

```js
import { Avatar, Presence, Icon } from '@react-spectre/avatar'
```

```jsx
<Avatar src="img/avatar-1.png" icon />
```

```jsx
<Avatar src="assets/react-spectre-logo.png" lg>
  <Avatar.Icon src="img/avatar-2.png" />
</Avatar>
```

```jsx
<Avatar initial={'YZ'} style={{ backgroundColor: '#5755d9' }} xl>
  <Avatar.Presence online />
</Avatar>
```

> **Note:** The main component is `Avatar`, other component can be accessed through it, for example: `Avatar.Presence` and `Avatar.Icon`.


<div align=center>
<br><br><br>

Made with :heart: by [Rubens Mariuzzo](https://github.com/rmariuzzo).

[MIT License](LICENSE)

</div>
npm package: @react-spectre/badge
Description: React components for Spectre.css's badge elements.
Author: Rubens Mariuzzo
Latest version: 1.0.0-16

<div align=center>
<img src="assets/react-spectre-logo.png" width="256" height="256">

# `@react-spectre/badge`
React components for Spectre.css's badges.

<br><br><br>
</div>

## Installation

```shell
yarn add @react-spectre/badge
```

```shell
npm install @react-spectre/badge --save
```

<br><br><br>

## Usage
### Badges

There is 1 single component used for badges: `Badge`.

```js
import { Badge } from '@react-spectre/badge'
```

Badges are used as wrapper components with the label property (this property is optional, badge will appear empty if the label is not specified). You can use badge for span, buttons and figures.

```jsx
<Badge label={1}>
  <span>Notifications</span>
</Badge>
    
<Badge label={2}>
  <Button>Badge Button</Button>
</Badge>
  
<Badge label={11}>
  <Figure className="avatar">
    <Image
      responsive
      src="https://picturepan2.github.io/spectre/img/avatar-1.png"
    />
  </Figure>
</Badge>
```


<div align=center>
<br><br><br>

Made with :heart: by [Rubens Mariuzzo](https://github.com/rmariuzzo).

[MIT License](LICENSE)

</div>
npm package: @react-spectre/bar
Description: React components for Spectre.css bar.
Author: Rubens Mariuzzo
Latest version: 1.0.0-16

<div align=center>
<img src="assets/react-spectre-logo.png" width="256" height="256">

# `@react-spectre/bar`
React components for Spectre.css's bar

<br><br><br>
</div>

## Installation

```shell
yarn add @react-spectre/bar
```

```shell
npm install @react-spectre/bar --save
```

<br><br><br>

## Usage

There are 2 components used for bar: `Bar` and `Slider`.

```js
import { Bar, Slider } from '@react-spectre/bar'
```

### Bar

```jsx
<Bar progress={20}>

<Bar>
  <Bar.Item progress={20} />
</Bar>

<Bar>
  <Bar.Item progress={20} />
  <Bar.Item progress={20} />
</Bar>
```

### Slider

```jsx
<Slider progress={20}>

<Slider>
  <Slider.Item progress={20} />
</Slider>

<Slider>
  <Slider.Item progress={20} />
  <Slider.Item progress={20} />
</Slider>
```

<div align=center>
<br><br><br>

Made with :heart: by [Rubens Mariuzzo](https://github.com/rmariuzzo).

[MIT License](LICENSE)

</div>
npm package: @react-spectre/button
Description: React components for Spectre.css's buttons.
Author: Rubens Mariuzzo
Latest version: 1.0.0-16

<div align=center>
<img src="assets/react-spectre-logo.png" width="256" height="256">

# `@react-spectre/button`
React components for Spectre.css's buttons.

<br><br><br>
</div>

## Installation

```shell
yarn add @react-spectre/button
```

```shell
npm install @react-spectre/button --save
```

<br><br><br>

## Usage

### Buttons

There is 1 single component used for buttons: `Button`.

```js
import { Button } from '@react-spectre/button'
```

Buttons can have 3 different base styles: default, primary and link. The two latter can be specifed using props with the same name:

```jsx
<Button>Default</Button>
<Button primary>Primary</Button>
<Button link>Link</Button>
```

#### Colors

Buttons can be colored using: `success` or `error` props:

```jsx
<Button success>Success</Button>
<Button error>Error</Button>
```

#### Sizes

Buttons can have two sizes using: `small` or `large` props:

```jsx
<Button small>Small</Button>
<Button large>Large</Button>
```

Buttons can have fixed sizes using: `action` or `circle` props:

```jsx
<Button action>Action</Button>
<Button circle>Circle</Button>
```

#### States

Buttons can have 3 different states using: `active`, `disabled` or `loading`:

```jsx
<Button active>Active</Button>
<Button disabled>Disabled</Button>
<Button loading>Loading</Button>
```

#### Groups

Two or more buttons can be group when nested inside a `Group` or `Button.Group`:

```jsx
<Button.Group>
  <Button>First</Button>
  <Button>Second</Button>
  <Button>Third</Button>
</Button.Group>
```

<div align=center>
<br><br><br>

Made with :heart: by [Rubens Mariuzzo](https://github.com/rmariuzzo).

[MIT License](LICENSE)

</div>
npm package: @react-spectre/components
Description: React components for Spectre.css components.
Author: Rubens Mariuzzo
Latest version: 1.0.0-16

<div align=center>
<img src="assets/react-spectre-logo.png" width="256" height="256">

# `@react-spectre/components`
React components for Spectre.css's components.

<br><br><br>
</div>

## Installation

```shell
yarn add @react-spectre/components
```

```shell
npm install @react-spectre/components --save
```

<br><br><br>

## Usage

This package groups 20 React Spectre packages, refers to them for usage.

  - [**Accordion**](packages/accordion)
  - [**Autocomplete**](packages/autocomplete)
  - [**Avatar**](packages/avatar)
  - [**Bar**](packages/bar)

<div align=center>
<br><br><br>

Made with :heart: by [Rubens Mariuzzo](https://github.com/rmariuzzo).

[MIT License](LICENSE)

</div>
npm package: @react-spectre/elements
Description: React components for Spectre.css elements.
Author: Rubens Mariuzzo
Latest version: 1.0.0-16

<div align=center>
<img src="assets/react-spectre-logo.png" width="256" height="256">

# `@react-spectre/elements`
React components for Spectre.css's elements

<br><br><br>
</div>

## Installation

```shell
yarn add @react-spectre/elements
```

```shell
npm install @react-spectre/elements --save
```

<br><br><br>

## Usage

This package groups 7 React Spectre packages, refers to them for usage.

  - [**Typography**](packages/typography) <sup>1</sup>
  - [**Table**](packages/table)
  - [**Button**](packages/button)
  - [**Form**](packages/form)
  - [**Icon**](packages/icon)
  - [**Label**](packages/label)
  - [**Media**](packages/media)

**Note:** <sup>1</sup> The `Label` is not exported, instead use it from its alias: `H1.Label`, `H2.Label` and so on...

<div align=center>
<br><br><br>

Made with :heart: by [Rubens Mariuzzo](https://github.com/rmariuzzo).

[MIT License](LICENSE)

</div>