使用ts+react实现一个“组件库”

最新推荐文章于 2024-05-01 23:18:43 发布
最新推荐文章于 2024-05-01 23:18:43 发布
阅读量1k 收藏
点赞数
分类专栏： web前端 文章标签： 从零实现组件库
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ky1in93/article/details/119297237
版权

写在前面

组件库源码地址：https://github.com/Kylin93CN/kylin-design 求star✨~

文档地址：https://kylin93cn.github.io/kylin-design/

npm地址：https://www.npmjs.com/package/kylin-design

设计与色彩学

设计

关于设计，可以参考antd中的文档：https://ant.design/docs/spec/overview-cn

色彩

既然要开发组件库，首先我们得知道开发的组件长什么样，是什么颜色。一个优秀的组件库肯定离不开她的色彩搭配与设计。

antd官方文档中单独有一个头部导航 来介绍设计，可想而知这块也是组件开发的一个头等大事。

我参考了国内主流的UI组件库：

p.s. 可以打开网站，对应的就是组件库中关于色彩描述的文档

总结下来就是我们要有以下几个色板：

  1. 基础色板
  2. 中性色板
  1. 功能色板

关于基础色板，就是根据一个主题核心的颜色，通过算法得到一组渐进的颜色组。

我们可以通过antd的色板生成工具 帮我们计算得出

可以通过这个网站计算得到：https://mycolor.space/

关于中性色板，就是#fff到#000的一个过程，中间的渐变颜色可以自己定义。

关于功能色板，就是一些功能性组件所使用的的颜色。比如，警告⚠️类型的，一般都是黄色；提示类型的，一般都是蓝色；危险或者错误❌，一般都是红色。

当然，除了颜色之外，还有字体、阴影、布局中，本文不做过多探讨。

P.S.关于色彩的详情，可参考：https://www.yuque.com/kylin93/uayuig/qypb6u

开发

起名

首先，给我们的组件起一个响亮的名字！！

那就叫做：kylin-design

创建项目

通过cra脚手架创建项目：

npx create-react-app kylin-design --template typescript
# or
yarn create react-app kylin-design --template typescript

配置色彩颜色

step1

本项目使用的scss,涉及一些scss的特性，比如：文件模块化、mixin、变量等。

首先我们在src下创建一个styles文件夹，用于存放样式文件。

创建第一个scss文件：_variables.scss 文件名前添加了一个下划线“_”表示这个只是部分文件，打包时，不会生成对应的css文件。

在这个文件中，我们会定义各种颜色，包含中性色、基本色、功能色以及各种预设样式，比如字体大小、行高、按钮的border-radius等。详情可见：https://raw.githubusercontent.com/Kylin93CN/kylin-design/main/src/styles/_variables.scss

下面代码为文件的部分：

/*********   中性色--start   *********/
$gray-1: #fff !default;
$gray-2: #f5f5f5 !default;
$gray-3: #f0f0f0 !default;
$gray-4: #d9d9d9 !default;
$gray-5: #8c8c8c !default;
$gray-6: #595959 !default;
$gray-7: #434343 !default;
$gray-8: #262626 !default;
$gray-9: #1f1f1f !default;
$gray-10: #000 !default;
/*********   中性色--end   ***********/

/*********   基础色--start   *********/
// 使用antd-Dust Red / 薄暮
$red-1: #fff1f0 !default;
$red-2: #ffccc7 !default;
$red-3: #ffa39e !default;
$red-4: #ff7875 !default;
$red-5: #ff4d4f !default;
$red-6: #f5222d !default;
$red-7: #cf1322 !default;
$red-8: #a8071a !default;
$red-9: #820014 !default;
$red-10: #5c0011 !default;
$transparent: transparent !default;

关于组件的基础色，那肯定跟我们的组件名称有关系，麒麟属火，我就选择了antd提供的一套：

然后组件的设计风格也是根据这个主题仿照的：

 

p.s. 可在antd官网底部选择主题修改查看

step2

引入normalize.css文件，帮我们抹平里浏览器之间的差异。

github地址：https://github.com/necolas/normalize.css/

它的作用：

  • 与reset.css不同，normalize会保留有用的默认值。
  • 标准化各种元素的样式。
  • 通过细微的修改提高可用性。

对主流浏览器也是支持的。

这里我会基于normalize.css，修改为_normalize.scss，并将一些变量加载进去。

step3

创建_mixin.scss， 用于复用

step4

创建index.scss(注意这个没有下划线)，将上述3个文件导入。

开发组件--Button

在src下创建components的文件夹，然后再创建一个Button的文件夹，接下来创建下面几个文件：

  • _button.scss——文件用于button组件的样式；
  • button.test.tsx——用于组件测试
  • button.tsx——是组件的主体
  • index.tsx——是组件的导出文件，对于Menu这种组件，我们会统一把MenuItem等挂在Menu上，方便导出。

对于组件的开发，我们首先要提前定义好或者设计好组件到底有哪些属性。对于经常使用antd-button的小伙伴们来说，常用的属性就是type、size、disabled等。

那么我们以实现最小MVP来说，就先定义几个常用的：

export type ButtonSize = "lg" | "sm";
export type ButtonType = "primary" | "default" | "danger" | "link" | "ghost";
interface BaseButtonProps {
  /** 设置 Button 的classname */
  className?: string;
  /** 设置 Button 的尺寸 */
  size?: ButtonSize;
  /** 设置 Button 是否禁用 */
  disabled?: boolean;
  /**设 置 Button 类型 */
  btnType?: ButtonType;
  /** 设置 Button 文案 */
  children?: React.ReactNode;
  /** 设置 Button 类型为link时的跳转地址 */
  href?: string;
}

按钮的实现我们用到了button跟a标签(用于link类型)，除了我们制定的属性，还需要标签的原生属性，比如button的onClick，因此我们需要把a标签的原生属性、button的原生属性还有我们定义的按钮属性联合起来。使用的ts类型定义代码如下：

type NativeButtonProps = BaseButtonProps &
  React.ButtonHTMLAttributes<HTMLElement>;
type NativeAnchorProps = BaseButtonProps &
  React.AnchorHTMLAttributes<HTMLElement>;
export type ButtonProps = Partial<NativeButtonProps & NativeAnchorProps>;

p.s. 涉及到ts的 & 用法与Partial的用法

按钮的不同尺寸、类型，其实就是css不同，我们借助classnames库，帮我们处理这个逻辑：

// 按钮默认有btn的类  
const classes = classnames("btn", className, {
    [`btn-${btnType}`]: btnType, // 根据类型追加类
    [`btn-${size}`]: size, // 同上
    disabled: btnType === "link" && disabled, // link使用css处理，btn使用原生属性处理
  });

渲染组件就通过type判断下，如果是link就使用a标签，其他就使用button

 if (btnType === "link" && href) {
    return (
      <a className={classes} href={href} {...restProps}>
        {children}
      </a>
    );
  }
  return (
    <button className={classes} disabled={disabled} {...restProps}>
      {children}
    </button>
  );

接下来我们开始去编写样式文件，默认的btn，不同类型的btn-primary、btn-danger、btn-lg等

这些根据我们之前定义的变量去使用就好了。

.btn-danger {
  // 使用mixin，在styles/_mixin.scss中定义的
  @include btn-style($gray-1, $red-5,$red-5);
}

.btn-default {
  @include btn-style($gray-1, $gray-4,$gray-10,);
}

.btn-ghost {
  @include btn-style($transparent, $gray-1,$gray-1,);
}

测试

react推荐的testing-library，cra(貌似是3.3+)也默认集成的库。yyds！

关于测试，会用到2个库：

提供了一些match，比如toBeEmptyDOMElement、toBeInTheDocument、toHaveClass

帮助我们将jsx转化为真实dom，并提供一些辅助的事件模拟方法等。

比如我们可以写一个简单的测试用例：

import React from "react";
import { render, fireEvent } from "@testing-library/react";
import Button from "./button";
// 组件的默认属性
const defaultBtnProps: ButtonProps = {
  btnType: "default",
  className: "test-cls",
  onClick: jest.fn(),
};
// 测试默认button
it("test default button", () => {
  // 通过render将button渲染为真实dom
    const btnDom = render(
      <Button {...defaultProps}>
        Default Button
      </Button>
    );
		// 通过getByText方法获取btn的实例
    const ele = btnDom.getByText("Default Button");
    // button是否存在--@testing-library/jest-dom提供的match
    expect(ele).toBeInTheDocument();
    // dom属性是否是BUTTON
    expect(ele.tagName).toEqual("BUTTON");
		// --@testing-library/jest-dom提供的match
    expect(ele).toHaveClass("btn btn-default test-cls");
    // 模拟点击
    fireEvent.click(ele);
		// --@testing-library/jest-dom提供的match
    expect(defaultProps.onClick).toHaveBeenCalled();
  });

文档生成

组件库肯定是写给人用的，但是使用者肯定不能通过看源码来查看btn的type属性有哪些、设置大小的枚举值有哪些吧，这里我们使用的storybook 来生成文档库。

直接运行npx sb init

During its install process, Storybook will look into your project's dependencies and provide you with the best configuration available.

我们尽管安装，sb会根据我们项目的依赖帮我们安装最合适的配置，比如我们项目是ts的，它就会生成ts的文件。

新版本的sb(6.x)新增了control的功能，简单的配置，就可以帮我们在页面上动态修改组件的属性，实时渲染。可到 此link 体验尝鲜。

sb默认集成的addon(插件)已满足我目前的需求，如有其它需求，也可到插件市场逛逛，地址是：

https://storybook.js.org/addons/

在.storybook/main.js 中，追加了一行代码，用于把css文件导入。

  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)",
  + "../src/styles/index.scss"
  ],

sb默认会在src下创建一个stories文件夹，里面会有一些示例，我们可以运行npm run storybook启动本地服务，查看生成的文档库。

Introduction.stories.mdx mdx就是markdown + jsx，这里我当做了介绍页，把文件中没用的都删掉了。

sb会根据文件名规则约束，以文件名格式为：XXX.stories.XXX的文件当做一个story，删除无用的文件，然后我们保留Button.stories.tsx这个文件，将button组件改为我们写的组件，然后根据示例补充我们的属性即可。

    btnType: {
      name: "btnType",
      description: "button type",
      type: "radio",
      options: ["primary", "default", "danger", "link", "ghost"],
      table: {
        type: { summary: "string" },
        defaultValue: { summary: "default" },
      },
    },

生成的结果如下,我们可以在单选框中选择，实时修改组件的类型等属性

点击docs，可以查看属性的文档详情，比如默认值、类型、详情介绍等

组件发布

项目配置

1. 配置scripts

  • "build": "npm run clear && npm run build-css && npm run build-ts",
  • "build-ts": "tsc -p tsconfig.build.json",
  • "build-css": "node-sass ./src/styles/index.scss ./dist/index.css",
  • "clear": "rimraf ./dist",
  • "prepublishOnly": "npm run build",
  • "test-ci": "cross-env CI=true react-scripts test",

clear命令，我们安装rimraf库，帮我们抹平操作系统的命令差异，该命令执行删除./dist文件夹下面的内容；

build-css命令，通过node-sass打包css文件；

build-ts命令，这里我们新增了一个tsconfig.build.json文件用于build时使用，用于打包组件库js文件；

build命令，首先清空./dist下的内容，然后打包css、js

test-ci命令执行测试用例

prepublishOnly命令，发布前执行打包操作

2.添加husky

用于我们提交commit时，强执行测试用例，保证组件库的稳定性。

目前husky是7.x版本，会使用到set-script,因此需要保证你的Npm也是7.x版本。

npm -v 可查看当前npm版本，升级的话执行:

npm i npm -g

详细安装可参考官方文档：https://github.com/typicode/husky#usage

然后我们在pre-commit 中添加需要执行的脚本为：

npm run test-ci && npm run lint

3. 完善readme.md

必不可少

4. 修改依赖

目前dependencies我只保留了一个classnames，其他的依赖库都塞到了devDependencies中，

一些是因为都是开发依赖，还有一些比如react、react-dom，这些的话，如果组件使用的话，会使用安装组件库项目中的react，而不是组件库的react。

特此，加了peerDependencies ,如果使用的项目没有这个库或者版本不对，会有warning提示。

"peerDependencies": {
    "react": ">=16.8.0",
    "react-dom": ">=16.8.0"
  },

5.修改package.json

  • 修改版本号
  • 添加一些字段，比如author、desc、keywords、license、homepage等
  • 修改private为false
  • 添加入口信息字段
  • main
  • modules
  • types
  • 添加files字段
  • 内容为['dist']

发布NPM

首先需要登录npm，执行命令 npm whoami ，如果没有，则需要登录,没有账号的自行去npm官网注册，有账号的执行npm login进行登录。

p.s. 登录时不能把源改为淘宝的。

万事俱备，执行：

npm publish

大功告成！！！

部署

项目部署CI/CD & 文档库部署

本项目使用的github actions

创建文件：.github/workflows/ci.yml

name: KYLIN-DESIGN CI   # 名称
on:
  push:
    branches:
      - main   # main分支push时触发
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest  # 运行环境为乌班图
    steps:  # actions/checkout@v2 是一个官方的actions,用于下载项目代码
    - name: Checkout
      uses: actions/checkout@v2 # If you're using actions/checkout@v2 you must set persist-credentials to false in most cases for the deployment to work correctly.
      with:
        persist-credentials: false
    - name: Install and Build # step的名称
      run: |    # 需要执行的脚本命令
        npm install  # 安装依赖
        npm run test-ci # 运行测试
        npm run-script build # 打包组件库的静态资源
        npm run build-storybook # 打包文档库资源
    - name: Deploy # 这是一个别人写的actions，用于静态资源的部署
      uses: JamesIves/github-pages-deploy-action@releases/v3
      with:
        ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} # 环境变量
        BRANCH: gh-pages # 部署的分支
        FOLDER: storybook-static # sb的dist目录

如何生成ACCESS_TOKEN

打开https://github.com/settings/tokens，点击生成新的token

使用ACCESS_TOKEN

在项目的Settings中，点Scerets


 

配置好之后，我们下次提交的时候就会发出ci/cd，然后执行命令部署sb。

允潇的博客
关注
专栏目录
jinle-ui：react + ts封装UI组件库
02-14
第三方库 normalize.css ---一个很小的css文件，在默认HTML元素样式上提供了跨浏览器的高度一致 类名---使用js来动态判断是否为组件添加类 React-testing-library ---组件单元测试 jest-dom ---增加DOM测试断言 fontawesome --- svg图标库 react-transition-group ---动画库 故事书---本地调试组件和生成文档 解决方法 获取原生组件上的属性 类如button，React已经封装好了原生按钮的属性集合ButtonHTMLAttributes import React , { ButtonHTMLAttributes , AnchorHTMLAttributes } from 'react' ; // 加入 btn 默认属性 type NativeButtonProps = BaseButto
react-component-library:react + ts组件库高仿ant design
03-17
Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 yarn test 在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。 yarn build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 最小化内部版本，文件名包含哈希值。 您的应用已准备好进行部署！ 有关更多信息，请参见关于的部分。 yarn eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从您的项目中删除单个生成依赖项。 相反，它将所有配置文件和传递依赖项（webpack
使用ts实现一个简单类库并发布到npm中
阿豪
10-09 283
原文链接: 使用ts实现一个简单类库并发布到npm中 ...
React组件抽象
weixin_34041003的博客
04-16 151
组件抽象指的是让不同组件公用同一类功能，可以说成组件功能复用，在不同的设计理念下，有许多抽象方法，而对于React，主要有两种：mixin和高阶组件。mixin在createClass中可以使用，但在ES6 classes中已抛弃（因为它存在很多副作用），但是我们可以通过decorator语法糖来封装mixin,这样就可以在ES6中使用mixin了。现在更常用的抽象方法是利用高阶组件的方式，它不仅...
[react+ts打造组件库项目】1.typescript的学习
shenruiaaa的博客
02-20 198
去官网上去搜索对应的类型文件。
vite+ts+react组件库，一套适合开发者使用的轻量级UI组件库，完美支持React18+TS+Vite.zip
02-09
总结来说，Vite+TS+React组件库是一个结合了现代前端技术的优秀解决方案，它利用React 18的高性能特性、TypeScript的安全性和Vite的开发效率，为快应用和企业级项目提供了优质的UI组件。通过深入理解和熟练运用这个...
2022升级 React18+TS高仿AntD从零到一打造组件库
09-02
在本课程"2022升级 React18+TS高仿AntD从零到一打造组件库"中，我们将深入探讨React最新版本18的特性，结合TypeScript（TS）的强大类型系统，以及如何模仿流行的Ant Design（AntD）框架，来创建一个自定义的组件库。...
react+ts+antd cron表达式组件
11-16
在这个"react+ts+antd cron表达式组件"项目中，开发者整合了这些技术来实现一个特定功能——Cron表达式编辑器。 Cron表达式是一种用于配置定时任务的格式，常见于Unix和Linux系统。它由七个字段组成，从左到右分别...
基于React+TS+Antd+NodeJS+MySQL实现的全栈项目实战【100012591】
06-05
通过React组件化开发，我们可以将UI拆分为可复用的模块，提高代码的可维护性和开发效率。 2. **TypeScript**：TypeScript是JavaScript的超集，它引入了静态类型系统，提供了更好的代码提示、错误检查和重构支持。在...
React 中使用 TS
最新发布
qq_40147756的博客
05-01 2418
在 react 中使用 ts
jasmine-dom::sloth:自定义茉莉花匹配器以测试DOM的状态
04-28
[！[所有贡献者]（ )](# ） 茉莉花 自定义茉莉花匹配器以测试DOM的状态 问题 您想使用Jasmine编写测试来断言有关DOM状态的各种事情。 作为该目标的一部分，您希望避免这样做时出现的所有重复模式。 检查元素的属性，其文本内容，其CSS类，然后为其命名。 这个解决方案 jasmine-dom库提供了一组可用于扩展Jasmine的自定义Jasmine匹配器。 这些将使您的测试更具声明性，易于阅读和维护。 目录 安装 用法 自定义匹配器 toBeDisabled toBeEnabled toBeEmptyDOMElement toBeInTheDocument toBeInvalid toBeRequired toBeValid toBeVisible toContainElement toHaveAttribute toHaveClassNa
【React+TS-tree组件】
limuzhixing的博客
04-24 903
React+TS-tree组件
react ts版 组件封装总结
Zeng_Z_H的博客
02-23 993
/* 学习目标：组件封装总结 步骤： 1. 一般组件要支持style与className，👍方便组件自定义样式 2. 考虑联合字面量+字符串，提供代码提示 3. 复用React或第三方的类型，快速获得代码提示 4. 🔔自己写代码的技巧：TSX中封装组件，一般需要先定义props类型，后使用。类似vue中的props 组件封装要考虑的（三种）四种状态 */ ...
React+TS基础
qq_45897636的博客
10-31 1972
项目的初始化 JSX的命名约定 JSX中的模块化CSS 组件的类型 State和Props react的事件处理 React的生命周期 hooks构子 useState的基本使用 useEffect的基本使用 useContext的基本使用 介绍HOC HOC组件的简单应用 props父传子 props子传父 props插槽 跨级传输 React的依赖注入 使用useContext消费 使用依赖注入实现全局状态管理 跨级传输
React集成TS
Raccon_的博客
03-23 1201
React集成 构建React-TS项目 create-react-app demo --template typescript 声明文档 当在ts项目中使用依赖包时需要声明文档 部分依赖包的声明文档在依赖包的根目录下 因此不需要额外下载 当需要声明文档时需要另外安装 npm i @types/jquery # @types 是npm的一个分支，用来存放 *.d.ts文件声明文档 在React中使用TS 接口 类中的状态及属性接口 import { Component } from 'reac
使用 TS 开发 React 项目起手式
超超超Man的博客
12-19 1787
创建项目实际开发过程中，我们一般会使用 Typescript 开发 React 应用，所以不要直接运行 create-react-app 脚手架命令，而应该使用如下方式：// 1. 全局安装 create-react-app yarn global add create-react-app // 2. 创建支持 TS 语法的 React 应用 create-react-app my-app --template typescript 参考文档： https://create-react-app.dev/do
React 定义组件
weixin_53588068的博客
11-10 923
定义组件有两种： 第一种：函数组件； 第二种：类组件； 函数组件定义： <div id='test'></div> <script type="text/babel"> function MyComponent(){ console.log(this); return <h1>函数组件定义</h1> } const vDom = .
【react+ts项目】】组件库启航
shenruiaaa的博客
02-22 361
添加 normalize.css：一般化大部分浏览器的默认样式。样式入口文件：引入成果。
Storybook + react + ts 配置全局样式
weixin_38303684的博客
02-21 1626
Storybook + react + ts 配置全局样式 react 中配置storybook 网上一大片, 这里主要提一下作者使用时遇到的一些小坑. 首先要注意你使用的storybook 版本， 因为不同版本之间， 出现的配置文件格式及命名有点差别. 本人使用的是 “devDependencies”: { “@storybook/react”: “^6.1.18”, “babel-core”: “^6.26.3”, “babel-loader”: “^8.2.2” } storybook默认配置如下:
2022最新版React18+TS打造仿AntD组件库指南
资源摘要信息: "新升级TS+ React18高仿AntD从零到一打造组件库" ### 一、React18和TypeScript...开发者不仅可以学习到如何使用这些技术和工具，还能了解到如何将它们融合在实际的项目中，实现一个高质量的组件库产品。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值