基于react+typescript的前端组件库violet-design（字节青训营项目）

前言

大家好久不见呀！近一年没发文了。
本文简单介绍了，参加字节青训营和小伙伴们一起实现的项目：基于react+typescript技术栈实现的组件库violet-design 。希望大家支持鸭（给个start叭）。

一、项目介绍

• violet-design 是基于react+typescript技术栈实现的组件库，包含7类共21个交互样式统一的组件，致力于提供功能丰富，使用简单，界面精美的UI解决方案。
• 项目服务地址
  https://zhaoyuuu.github.io/violet-design/
• Github 地址（走过路过给个star叭 OvO）
  https://github.com/zhaoyuuu/violet-design
• Demo 演示视频
  https://www.bilibili.com/video/BV1fR4y1v7VU

介绍

为了满足设计规范要求，本团队自行开发了「 Violet Design 」—— 一套基于 React 的 UI 组件库。 Violet Design 提供了丰富的组件和功能，在满足不同业务需求的同时，也极具美观和协调性。

特性

• 自主设计的符合直觉的交互语言和视觉风格。
• 开箱即用的高质量 React 组件。
• ️ 使用 TypeScript 开发，提供完整的类型定义文件。
• ☀️ 友好的 API ，自由灵活地使用空间。
• 细致、漂亮的 UI。
• 清晰明了的演示站点，细致的文档。
  
  

兼容性

Edge	Firefox	Chrome	Safari	Opera
Edge	Last two versions	Last two versions	Last two versions	Last two versions

安装

使用 npm 安装

推荐使用** npm **来安装，享受生态圈和工具带来的便利，可以在开发环境轻松调试，也可以在生态环境打包部署使用。

$ npm install violet-design

使用 yarn 安装

$ yarn add violet-design

浏览器引入

在浏览器中使用 script 和 link 标签直接引入文件，并使用全局变量 VioletDesign。

注意：index.umd.js 依赖 react、react-dom，请确保提前引入这些文件。

引入 css：

<link rel="stylesheet" href="https://unpkg.com/violet-design/dist/index.css">

引入 js:

<script src="https://unpkg.com/violet-design/dist/index.umd.js">script>

示例

1. 引入样式

在index.tsx(.jsx)中：

import 'violet-design/dist/index.css'

2. 使用组件

import React from 'react';
import { Button } from 'violet-design';

const App = () => (
  <>
    <Button btnType="primary" size="lg">PRESS ME</Button>
  </>
);

按需加载

violet-design 默认支持基于 ES modules 的 tree shaking。

TypeScript

violet-design使用 TypeScript 进行书写并提供了完整的定义文件。

✨ 组件

• 通用型组件：Button 按钮、Icon 图标
• ️ 导航型组件：Menu 导航菜单
• 数据录入型组件：AutoComplete 自动完成、Cascader 级联选择、CheckBox 多选框、DatePicker 日期选择器、RangeDatePicker 日期范围选择器、Form 表单、Input 输入框、InputNumber 数字输入框、RadioGroup 单选按钮组、Select 选择器、Switch 开关、Upload 上传
• 数据展示型组件：Calendar 日历、Tabs 标签页
• 反馈型组件：Progress 进度条
• 其他组件：Affix 图钉、Transition、Grid栅格
  
  

链接

• 文档站
• 组件库
  
  

二、项目实现

2.1 技术选型

React 18

• 在 vue 和 react 中选择了 react
  • 组内对 react 更为熟悉
  • 目前在大厂中 react 的出现频率稍微高一些
• React18比之前的版本在性能和体积上有较大提升，而且语法和 API 更加清晰，支持 hooks 和更少的函数式编程，而且基于 Hook API 的代码比以往的 HOC / renderProps 易于测试、读取和易用。考虑到以上原因，我们决定选择 React18 作为本项目的技术支撑。

TypeScript
TypeScript 已经被广泛应用，可以帮助开发者更快地构建稳定、可靠的应用，并具有智能化提示等便利功能。
本项目的复杂度和规模需要更高的代码质量，因此我们决定选择 TypeScript 作为本项目的开发语言。

Webpack：

• create-react-app 默认支持 webpack 作为构建工具，因此省去很多手动配置的工作，让我们得以更专注于实际开发
• webpack 是经典的构建工具，社区成熟，遇到问题可以快速定位并解决

Rollup：

• Rollup 设计之初就是面向 ES Module 的，构建出结构扁平，性能出众的类库
• 本项目是类库（纯js），适合使用 Rollup
• 配置简单，通过简单的配置就可以打包出 esm umd 等格式js文件、css文件

Scss：

• Scss 支持变量、混合、嵌套、运算等高级特性，能够极大地简化 CSS 代码的编写和维护。
• 组内对 Scss 相较于 Less 更为熟悉

React-testing-library：

• 组件库项目对组件的质量要求很高，React-testing-library 可以帮助开发人员更方便地测试 React 组件的功能和交互，从而确保代码的质量和可靠性
• React-testing-library 是 create-react-app 内置的单元测试工具，无需手动搭建环境，社区成熟可靠

Eslint + Prettier：

• Eslint 是一个 JavaScript 代码检查工具，采用它来帮助团队的开发人员避免代码中的常见错误和不规范的用法
• 团队代码风格的统一很重要，Prettier 是一个代码格式化工具，它可以一键自动帮助开发人员格式化代码

Storybook：
为更好地展示组件供开发人员参考、使用，我们采用 Storybook 构建文档站。它提供了一个可视化的环境，方便开发人员编写、测试和维护 UI 组件。

• 配置简单，可以在项目内快速搭建起一套业务组件文档项目
• 无代码侵入性，独立于原有项目的一套打包、运行机制
• 交互式测试组件
• 组件文档书写方式多样化

Github-Actions

• Github 内置的 cicd 工具，对于储存在github的项目来说，操作起来方便快捷，并且玩法多样且实用
• 配置简单，入门教程详细
• 运行自动化流程的演示画面直观

Husky(+Lint-staged)：
在 pre-commit 时运行 npm run test:nowatch 和 npx lint-staged ，防止不合格的代码进入远程仓库，保证了仓库代码的可靠性

2.2 架构设计

2.2.1 目标用户和场景

• 目标用户：前端开发人员、UI设计师
• 场景：企业级Web应用、移动Web应用

2.2.2 组件库组织架构

violet-design组件库的范围清晰明确，在设计初期就定义了支持的技术栈、组件的类型和数量、所需的设计资源和文档等等，以确保组件库的实现和开发方向一致。

在本组件库的制作中，我们的violet-design组件库定义范围如下：

• 技术栈：React, TypeScript,
• 组件类型：
  • 通用组件：Button 按钮、Icon 图标
  • 导航组件：Menu 导航菜单
  • 数据录入：AutoComplete 自动完成、Cascader 级联选择、CheckBox 多选框、DataPicker 日期选择器、RangeDataPicker 日期范围选择器、Form 表单、Input 输入框、InputNumber 数字输入框、 RadioGroup 单选按钮组、 Select 选择器、 Switch 开关、Upload 上传
  • 数据展示：Calendar 日历、Tabs 标签页
  • 反馈：Progress 进度条
  • 布局：Grid 栅格
  • 其他：Affix 固钉
• 设计资源：violet-design组件库主题图标、样式设计、violet主题配色方案
• 文档：storybook文档站

2.2.3 组件库架构类型

面向组件(COP，Component-Oriented Programming)编程是一种编程思想，它来源于软件工程领域，是高级语言编程中的概念。面向组件技术建立在面向对象技术（OOP，Object-Oriented Programming）之上，它是面向对象技术的进一步发展。
组件和组件接口是面向组件编程的的两个重要概念。组件是一个明确定义了接口和相关功能的可组合的单元，它可以独立的发行并供第三方使用及再进一步组装。组件接口描述了组件对外提供的服务，组件和组件之间、组件和客户之间同时通过组件接口进行交互。组件发布后只能通过预定义的接口提供服务，因此组件的接口应具有稳定性、合理性，组件的接口必须标准化，这是组件是否成熟的标志之一。
在violet-design的组件库架构设计中，一直遵循着以上原则，自有组件的接口稳定合理，标准化，使用简单，可复用程度高。

2.2.4 组件库测试和部署方案

组件库的测试和部署是开发过程中不可或缺的环节，需要制定相应的测试和部署方案。
在violet-design设计中，利用React-testing-library对每个组件都编写了详细、可维护的单元测试，确保了组件的可靠性与稳定性；
在持续集成和持续交付方面，采用github-actions进行cicd，实现release新版本的时候自动更新远程npm，以及push新代码到master分之的时候自动部署、更新文档站。

2.2.5 组件库文档和示例

组件库的文档和示例是用户学习和使用组件库的重要资源，violet-design编写了清晰明确的storybook文档和示例。包括组件的使用方法，设计原则、样式规范等,提供了示例代码和演示，帮助用户更好地理解和使用组件库。

2.2.5 组件库的版本管理

1. 语义化版本控制：使用语义化版本号（Semantic Versioning），即版本号由主版本号、次版本号和修订号组成，每次升级版本号都遵循一定规则。这样可以让开发者更容易地理解版本号的意义，从而更好地管理组件库的版本。当前violet-design正在持续迭代中。
2. 版本号规划：在设计violet-design组件库时，事先规划好了版本号的使用方式。定义何时需要升级主版本号、何时需要升级次版本号、何时需要升级修订号等。这样可以确保版本号的使用方式一致，避免出现混乱的版本号管理。
3. 发布流程：violet-design制定了合理的发布流程，包括代码审查、测试、文档更新、版本号升级、发布到中央仓库等流程。这样可以确保组件库的版本质量和稳定性，并且让开发者更容易地使用新版本。
4. 自动化版本管理：使用自动化工具来管理组件库的版本，例如使用CI/CD工具自动化构建和发布组件库的新版本。可以降低发布过程中的人工错误，提高发布效率和可靠性。

三、项目截图

更多见文档站