npm package: @netjoy/njoyd
Description: njoy-design-react
Latest version: 1.0.2

## 背景

「组件化」一直是前端工程师绕不开的话题，不管是日常业务开发、封装业务组件，还是基础设施建设开发 UI 组件或基础组件；亦或者是 `React` 、`Vue`、`Angular` 等 MV\*框架，都是秉承着组件作为基础原子概念，所以可以肯定的是：  组件是下一代 web 技术的发展关键  。
但业界并没有对组件化有一个准确的定义，都是一些主观的意识，一般都是以程序模式设计思想里的“高内聚、低耦合、高扩展、可复用”的几个基本概念来描述，组件内部要保证逻辑的集中和完整，组件外部要提供可扩展性 api，并且独立性、简单可用性要保证。几个小的组件可层层嵌套，组合成一个大的组件，提供给外部使用，就像搭积木一样。
随着公司业务的不断增长，组件化除了为业务带来一致的设计语言和工作效率提升外，也为设计团队的产出和协作方式带来了影响和变化。UI 团队在进行需求设计的同时，前端团队也可逐步沉淀出一套适用于多平台、多业务的组件库，以此来提升设计和协同效率，并最终实现公司价值甚至商业价值。

## 介绍

[NjoyDesign](https://njoyd.netjoy.com/) 是云想科技提供的一个企业级业务组件库，通过长期的业务沉淀和积累打造的高性能、稳定、高复用性的组件库，目前已经在公司创新业务线、短剧业务线上落地应用，预计将组件库涵盖组件业务场景整体提升 65%以上，部分组件提效 200%以上。

## 需要的环境

```js
"antd": ">=4.0.0"
"react": ">=16.9.0"
"node": ">=16.18.0"
```

## 快速上手

- ### 安装

  ```sh
  # 通过npm安装
  $ npm install @nj/njoyd

  # 通过yarn安装
  $ yarn install @nj/njoyd
  ```

- ### 使用组件

  ```js
  # 引入组件
  $ import { Login, Preview } from '@nj/njoyd'

  # 引入样式
  $ import '@nj/njoyd/dist/esm/njoyd.less'
  ```

## 定制主题

- ### 全局主题

  在工程的 `index.tsx` 中添加全局主题配置，主题参数参考 [Antdtheme](#antdtheme)、[NjoydTheme](#njoydTheme)。

  ```js
  import { Config } from '@nj/njoyd';

  Config.set({
    theme: {
      colorPrimary: '#1677ff',
    },
  });
  ```

  ```jsx
  import { Config, SearchInput } from '@nj/njoyd';

  Config.set({
    theme: {
      colorPrimary: '#1677ff',
    },
  });

  export default () => {
    return <SearchInput></SearchInput>;
  };
  ```

- ### 单个组件主题

  在组件支持定制主题的前提下，使用 `theme` 传入主题参数配置单个组件主题，主题参数参考 [Antdtheme](#antdtheme)、[NjoydTheme](#njoydTheme)。

  ```js
  import { SearchInput } from '@nj/njoyd';

  export default () => {
    return <SearchInput theme={{ colorPrimary: 'red' }}></SearchInput>;
  };
  ```

  ```jsx
  import { Config, SearchInput } from '@nj/njoyd';

  export default () => {
    return <SearchInput theme={{ colorPrimary: 'red' }}></SearchInput>;
  };
  ```

- ### AntdTheme

  基于 [Antd 主题定制](https://ant.design/docs/react/customize-theme-cn#seedtoken) 字段，挑选出部分进行兼容支持，允许用户进行单独定制，其他未支持的字段则使用 `Antd` 默认值，只是不支持单独定制。

  | 属性名                 | 描述                                                    | 类型     | 默认值                                                                                                     |
  | ---------------------- | ------------------------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------- |
  | `colorPrimary`         | 品牌色是体现产品特性和传播理念最直观的视觉元素之一      | `string` | `#1677ff`                                                                                                  |
  | `borderRadius`         | 基础组件的圆角大小，例如按钮、输入框、卡片等            | `number` | `6`                                                                                                        |
  | `colorError`           | 失败按钮、错误状态提示（`Result`）组件                  | `string` | `#ff4d4f`                                                                                                  |
  | `colorInfo`            | `Alert` 、`Tag`、 `Progress` 等组件都有用到该组梯度变量 | `string` | `#1677ff`                                                                                                  |
  | `boxShadow`            | 控制元素阴影样式                                        | `string` | `0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)` |
  | `colorTextPlaceholder` | 控制占位文本的颜色                                      | `string` | `rgba(0, 0, 0, 0.25)`                                                                                      |

- ### NjoydTheme

  继承所有 `AntdTheme` 的属性

  | 属性名 | 描述 | 类型 | 默认值 |
  | ------ | ---- | ---- | ------ |
  |        |      |      |        |

<!-- ```jsx
// 开发者应该像用户一样使用组件(dumi 会为我们自动建立组件库 NPM 包 -> 组件库源代码的映射关系)
// NPM包名-njoy-design
import { Guide } from 'njoy-design';
export default () => {
  return <Guide />;
}; -->

```

```