# @easyv/react-components

[![NPM version](https://img.shields.io/npm/v/@easyv/react-components.svg?style=flat)](https://npmjs.org/package/@easyv/react-components)
[![NPM downloads](http://img.shields.io/npm/dm/@easyv/react-components.svg?style=flat)](https://npmjs.org/package/@easyv/react-components)

a react component library base on arco design

## Usage

### 安装包

基础包

```shell
pnpm add @arco-design/web-react @arco-plugins/vite-react
```

主题包，例如 `@arco-themes/react-easytwin`

```shell
pnpm add @arco-themes/react-easytwin
```

### 配置

以 vite 为例

配置 `vite.config.ts`

```js
import { vitePluginForArco } from '@arco-plugins/vite-react';

export default defineConfig({
  // ...
  plugins: [
    // ...
    vitePluginForArco({
      theme: '@arco-themes/react-easytwin',
    }),
  ],
});
```

如果是应用的暗色主题，请在 `index.html` 的 body 上添加 `arco-theme="dark"`，如果是亮色的，可以不加。

### 使用

可以统一在 `components` 目录下新建一个 `ui.ts` 文件，这个文件的主要作用就是从 `@easyv/react-components` 中导入组件并导出

```ts
export { Input } from '@easyv/react-components';
```

这样方便统一管理，后面如果要迁移组件库，只需要修改这个文件即可。

注意：不要引 `@arco-design/web-react`，这是依赖的基础库，但不是直接使用的库。`@easyv/react-components` 会基于它做一些定制。

## Options

TODO

## Development

```bash
# install dependencies
$ pnpm install

# develop library by docs demo
$ pnpm start

# build library source code
$ pnpm run build

# build library source code in watch mode
$ pnpm run build:watch

# build docs
$ pnpm run docs:build

# check your project for potential problems
$ pnpm run doctor
```

## Buglist

- radius 没有应用四种尺寸
- select 下的 tag 颜色没有应用对
- input disabled background-color 优先级问题
- radio 中心点的样式 为 color-white 暗色模式下 为透明色，应该为白色，文档中为 hsla(0,0%,100%,0.9)，实际配置 rgba(255,255,255,0)
- input 聚焦的输入框圆角问题

## LICENSE

MIT