构建并发布React UI组件库到NPM / Build and Publish React UI Component Library to NPM

[WangShuXian6]

构建并发布React UI组件库到NPM / Build and Publish React UI Component Library to NPM

---

课程大纲：

1 - 宣传与演示

• 1.1 - 课程宣传视频
• 1.2 - UI 组件库演示

2 - 介绍

• 2.1 - 项目设置
• 2.2 - 创建第一个组件

3 - 配置 Rollup 并将库发布到 npm

• 3.1 - 什么是 Rollup
• 3.2 - 安装 Rollup
• 3.3 - 创建 Rollup 配置
• 3.4 - 使用 Rollup 构建
• 3.5 - 发布到 npm

4 - 测试与升级

• 4.1 - 测试已发布的库
• 4.2 - 升级已发布的库
• 4.3 - 无需重新发布即可测试库

5 - 添加 Tailwind CSS

• 5.1 - 添加纯 CSS 并构建
• 5.2 - 添加 Tailwind CSS 并构建
• 5.3 - 添加 classnames 库以实现条件类样式

6 - 增强按钮组件

• 6.1 - 添加尺寸和边框半径属性
• 6.2 - 添加图标属性

7 - Storybook

• 7.1 - Storybook 简介
• 7.2 - 了解 story 并学习如何编写
• 7.3 - 为按钮组件编写 story - 第 1 部分
• 7.4 - 为按钮组件编写 story - 第 2 部分
• 7.5 - 为按钮组件编写 story - 第 3 部分

8 - 输入框 (Input)

• 8.1 - 创建 Input 组件
• 8.2 - Input 组件的 story

9 - 主题提供器

• 9.1 - 创建主题提供器包装组件
• 9.2 - 测试主题提供器

10 - 选择框 (Select)

• 10.1 - 创建 Select 组件
• 10.2 - Select 组件的 story - 第 1 部分
• 10.3 - Select 组件的 story - 第 2 部分
• 10.4 - Select 组件的 story - 第 3 部分

11 - 单选框 (Radio)

• 11.1 - 创建 Radio 组件
• 11.2 - Radio 组件的 story - 第 1 部分
• 11.3 - Radio 组件的 story - 第 3 部分

12 - 开关 (Switch)

• 12.1 - 创建 Switch 组件
• 12.2 - Switch 组件的 story

13 - 模态框 (Modal)

• 13.1 - 创建 Modal 组件
• 13.2 - Modal 组件的 story 和 UI

14 - 标签页 (Tabs)

• 14.1 - 创建 Tabs 组件
• 14.2 - Tabs 组件的 UI 和 story - 第 1 部分
• 14.3 - Tabs 组件的 UI 和 story - 第 2 部分

15 - 警告框 (Alert)

• 15.1 - 创建 Alert 组件
• 15.2 - Alert 组件的 story - 第 1 部分
• 15.3 - Alert 组件的 story - 第 2 部分

16 - 加载动画 (Spinner)

• 16.1 - 创建 Spinner 组件
• 16.2 - Spinner 组件的 story

17 - 弹性容器 (Flex Container)

• 17.1 - 创建 Flex 容器组件
• 17.2 - Flex 容器组件的 story

18 - 文档编写与部署

• 18.1 - 为 story 添加文档
• 18.2 - 将 Storybook 应用部署到 Chromatic

---

这个大纲带你从项目设置和创建第一个组件开始，一步步指导如何发布到 npm、为库编写 story 并测试、添加 Tailwind CSS 和部署最终文档，让你能够顺利完成一个完整的 UI 组件库开发项目。

---

1 - Promo & Demo 1 -Course promo 2 -UI Component library demo

2 - Introduction 1 -Project setup 2 -Create first component

3 - Setup rollup and publish library in npm 1 -What is rollup 2 -Rollup installation 3 -Create rollup config 4 -Build with rollup 5 -Publish to npm

4 - Testing and upgrading 1 -Test published library 2 -Upgrade published library 3 -Testing library without re-publish

5 - Adding tailwind css 1 -Add pure css and build 2 -Add tailwind css and build 3 -Add classnames library for conditional classes

6 - Enhance button component 1 -Add size and border radius props 2 -Add icon prop

7 - Storybook 1 -Storybook intro 2 -Learn what is story and how to write 3 -Write story for button component - part 1 4 -Write story for button component - part 2 5 -Write story for button component - part 3

8 - Input 1 -Input component 2 -Input stories

9 - Theme provider 1 -Create theme provider wrapper 2 -Testing theme provider

10 - Select 1 -Create select component 2 -Select component stories - part 1 3 -Select component stories - part 2 4 -Select component stories - part 3

11 - Radio 1 -Create radio component 2 -Radio component stories - part 1 3 -Radio component stories - part 3

12 - Switch 1 -Create switch component 2 -Switch component stories

13 - Modal 1 -Create modal component 2 -Modal stories and UI

14 - Tabs 1 -Tabs component 2 -Tabs component UI and stories - part 1 3 -Tabs component UI and stories - part 2

15 - Alert 1 -Alert component 2 -Alert component stories - part 1 3 -Alert component stories - part 2

16 - Spinner 1 -Spinner component 2 -Spinner component stories

17 - Flex container 1 -Flex container component 2 -Flex container stories

18 - Documentation and deployment 1 -Add documentation to stories 2 -Deploy storybook app to chromatic

[WangShuXian6]

1 - 宣传与演示

1.1 - 课程宣传视频

你好，欢迎你加入课程！

你是否曾在网页开发中想过创建自己的 UI 组件库？如果你的答案是肯定的，那么你来对地方了。欢迎参加“构建和发布 React UI 组件库到 NPM”的课程。

在演示组件库之前，我会先介绍项目的技术栈和学习曲线。开发组件其实并不复杂，只要你具备 HTML、CSS 和 React 的基础知识，就可以轻松开发这些组件。然而，更具挑战的是将其发布到 NPM、维护它并将其与 Storybook 集成。所以如果你想掌握所有这些内容，就需要全面了解项目的技术栈和学习曲线。

我将这个项目的学习过程分为六个阶段，每个阶段都介绍不同的技术。现在让我们从第一阶段开始吧！

1.2 - UI 组件库演示

大家好，现在我们进入我的 Storybook 应用程序，这里包含了所有组件。在详细介绍这些组件之前，先给大家看看 npm 库。

我们进入 npm，搜索 satya ui react。可以看到，这就是我开发的库。在页面中，我们可以看到 satya ui react 的详细信息。目前已经发布了三个版本，并显示了 npm 的安装命令。在这里我每周有 34 次下载量，展示了我的项目代码库。

接下来，我们回到 Storybook，看一下所有组件。可以看到，我们有 10 个 UI 组件和一个主题提供器。组件包括：Alert（警告）、Button（按钮）、Flex Container（弹性容器）、Input（输入）、Modal（模态框）、Radio（单选按钮）、Select（选择）、Spinner（加载动画）、Switch（开关）和 Tabs（选项卡）。

首先来看 Alert 组件。点击后，你可以看到所有变体：信息、成功、错误、警告、不带图标的、可关闭的。页面顶部有文档，可以在简单的文档页中查看所有变体。可以看到：信息（蓝色背景）、成功（绿色背景）、错误、警告、不带图标、可关闭。如果点击关闭按钮，组件会关闭。

然后是 Button 组件。可以看到这是所有的属性和可用选项：按钮、轮廓、小号、中号、大号、禁用、圆角、边框半径、带图标、加载状态。如果想单独查看某个变体，可以点击该变体的按钮。

接下来是 Flex Container，它通常用于对齐项目。默认情况下，所有项目都是左对齐并靠顶部。你可以调整属性来实时查看效果，比如将项目居中、靠右等。

Input 组件支持基本、大号、错误、禁用、圆角等状态。Modal 组件包含标题和内容，还有带页脚的模式，以及无关闭按钮的模式。

Radio 单选按钮支持水平和垂直对齐。Select 下拉菜单可以显示标签和值，可以选择带图标的选项，选择后会显示相应的图标。Spinner 提供小、中、大三种尺寸。Switch 开关支持基本、水平、禁用等状态。

Tabs 组件可以显示基础的选项卡或禁用某些选项，还支持垂直排列。在每个变体中，你都可以查看代码示例。

最后，我们来看 Theme Provider（主题提供器）。通过调整主题的主色，可以统一改变按钮、输入框等组件的颜色。所有组件的颜色和边框都随着主题的调整实时更新。

这就是我们组件库的内容，总共有 10 个组件和一个主题提供器。希望你对这些组件有更深入的了解。谢谢大家，我们课程见！

[WangShuXian6]

2 - 介绍

2.1 - 项目设置

欢迎回来！

在本视频中，我们将讨论 React UI 组件库的项目创建。在我的 VS Code 中，可以看到我已创建了一个名为 satya_ui 的空文件夹，这也将成为我的 UI 组件库的名称。

首先，我们需要使用 npm init 命令生成 package.json 文件。没有这个文件，我们无法在父文件夹中安装任何 npm 模块。如果希望在这里安装 npm 模块，必须先生成 package.json。

点击“终端”，选择“新终端”，然后输入命令 npm init。根据提示输入包名称 satya_ui，版本号 1.0.0，描述可以留空，入口文件为 index.js，测试命令、git 仓库和关键字留空，作者填写你的名字，许可证可以留空，确认后完成创建。现在可以看到我们生成了 package.json。

接下来，我们初始化 npm 模块。为了编写组件，首先需要安装 4 个 npm 模块：react、typescript、@types/react，以及 tslib。所有这些模块将作为开发依赖来安装，因此使用 --save-dev 选项。安装完成后，可以看到我们生成了 node_modules 文件夹和 package-lock.json 文件，它们会记录 npm 模块的版本信息。

接下来，我们设置 tsconfig.json 文件，因为我们将使用 TypeScript 编写组件。在文件中添加默认配置，这些配置包含 compilerOptions 和 include 两个属性。如果希望了解这些配置的详细作用，可以参考 TypeScript 的官方文档。

然后，我们创建项目的文件夹结构。在根目录中已有 tsconfig、package.json 和 node_modules。现在创建一个 src 文件夹，并在其中创建 components 文件夹和 index.ts 作为入口点。将来我们创建的组件将会导入到这里，并通过一条语句进行导出。

为了演示，我们先创建两个组件文件夹：button 和 input。在每个文件夹中创建 index.tsx 文件，添加基本的功能组件。在 src/index.ts 中导入这些组件，并用一行代码导出它们。

在下一个视频中，我会展示如何编写一个简单的组件语法，以便可以导出和使用。我们已经完成了基本的功能组件编写，接下来将编写 UI 组件语法。

谢谢观看！

2.2 - 创建第一个组件

欢迎回来！

在本视频中，我们将开始制作按钮组件。我们将从一些基础属性和基本样式开始，待组件成功发布到 npm 后，再回过头来完善更多的属性和对应样式。

首先，我们定义接口 ButtonProps，初期只设置两个属性：title 和 variant。其中，variant 属性可以有两个值：outlined 和 contained。

接着在组件中定义 title 和 variant，并为 variant 设置默认值为 contained。然后创建一个按钮，并显示 title。

目前我们不编写 CSS 文件，而是直接使用内联样式。我们将 padding 设置为上下 5px、左右 10px。接下来，根据 variant 属性来应用不同的背景颜色、文本颜色和边框样式：

• 若 variant 为 outlined，则设置背景颜色为透明，边框为 1px 黑色实线。
• 若 variant 为 contained，则背景色为黑色，文本颜色为白色。

将样式附加到按钮上后，组件就准备好了。由于暂时使用了内联样式，接下来我们会完成发布过程，并在后续视频中用 Tailwind CSS 替换掉内联样式。这样可以加速测试流程。

在下一个视频中，我们将使用 Rollup 库来导出此组件。

谢谢观看！

[WangShuXian6]

3 - 配置 Rollup 并将库发布到 npm

3.1 - 什么是 Rollup

欢迎回来！

在本视频中，我们将讨论什么是 Rollup 以及如何将其集成到当前项目中。

首先，Rollup 是一个 JavaScript 模块打包工具，它可以将项目源代码和所有依赖项打包为单一文件。Rollup 的作用是将代码中非 JavaScript 部分转换为纯 JavaScript，从而生成适合发布的版本。具体来说，像 JSX、TS、TSX 这些浏览器无法直接理解的代码，都会被 Rollup 转换为浏览器能理解的 JavaScript。

打个比方，如果我们的项目有多个 JavaScript 文件、JSX、TSX、CSS 和图片文件，那么在使用 Rollup 构建后，它会输出一个或多个 JavaScript 文件，同时保留原有的静态资源（如图片和 CSS）。

Rollup 的主要作用就是将非 JavaScript 代码转化为 JavaScript，确保可以直接发布到 npm 上。我们在项目发布之前需要进行这样的构建，以便得到纯 JavaScript 的输出。

接下来是如何在项目中设置 Rollup：

1. 首先，需要安装 Rollup 及其依赖模块，然后创建 rollup.config.ts 配置文件。
2. 该配置文件用于定义 Rollup 的构建指令，包括入口文件、输出目录和格式等。
3. 我们可以在配置文件中指定输出格式（如 CommonJS 或 ECMAScript），以及需要的插件，用来处理不同格式的文件。
4. 最后，可以在配置中选择是否启用 TypeScript 的特性，比如类型生成和属性验证等。

在下个视频中，我们将实际操作，完成 Rollup 的安装和项目中的配置。谢谢观看！

3.2 - 安装 Rollup

欢迎回来！

在本视频中，我们将讨论在当前应用中配置 Rollup 所需安装的 NPM 模块。

基本上，为了使用 Rollup，我们需要安装并配置七个 NPM 模块。接下来，我将依次介绍每个模块的用途：

1. Rollup：这是核心库，用于构建源代码并生成输出。没有这个库，其他 Rollup 功能都无法使用。

2. Rollup TypeScript Plugin：这个插件处理 TypeScript 语法并将其转换为 JavaScript。可以通过 npm install @rollup/plugin-typescript 命令安装。

3. Node Resolve Plugin：用于定位项目中的模块，并将非 JavaScript 代码转换为 JavaScript，这对于使用第三方模块很有用。

4. CommonJS：将 CommonJS 模块转换为 ES6 语法，以便在 Rollup 构建时包含它们。如果项目包含旧版 CommonJS 模块，这个插件会将它们转换为最新的 ES6 语法。

5. DTS：生成基于组件接口的类型文件，便于在使用时提供类型支持。

6. Terser Plugin：这个插件用于压缩代码。它能移除未使用的变量和导入语句，生成更小的打包文件。

7. Peer Dependencies External：用于从构建过程中排除指定的 npm 模块，避免与最终用户的应用重复加载模块。例如，如果最终用户应用中已经安装了 React，可以使用此插件防止重复打包。

接下来，我们将逐个安装这些模块，然后在下一视频中使用这些插件来编写 rollup.config.ts 配置文件。谢谢观看！

3.3 - 创建 Rollup 配置

欢迎回来！

本视频将讨论 Rollup 配置文件的设置。首先，在项目根目录下创建一个名为 rollup.config.ts 的文件。

接下来，引入上一视频中安装的插件：

• TypeScript：用于处理 TypeScript 代码。
• CommonJS：将 CommonJS 模块转换为 ES6 格式。
• Resolve：帮助 Rollup 解析模块位置。
• Terser：压缩代码。
• Peer Dependencies：排除构建过程中指定的依赖项。
• DTS：用于生成类型文件。

在配置文件中，首先指定 input 和 output，其中 input 指向入口文件路径，output 指定为两种输出格式：CommonJS 和 ES 模块。

export default [
  {
    input: 'src/index.ts',
    output: [
      {
        file: 'dist/cjs/index.js',
        format: 'cjs',
        sourcemap: true,
      },
      {
        file: 'dist/esm/index.js',
        format: 'esm',
        sourcemap: true,
      },
    ],
    plugins: [
      peerDepsExternal(),
      resolve(),
      commonjs(),
      typescript(),
      terser(),
    ],
  },
  {
    input: 'src/index.ts',
    output: {
      file: 'dist/index.d.ts',
      format: 'es',
    },
    plugins: [dts()],
  },
];

在 plugins 中引入所有插件以进行不同的功能处理，例如，terser 用于压缩代码，dts 生成类型文件。对每个配置部分添加注释，以帮助理解每一部分的功能。

接下来，我们将在下节讨论 package.json 中的配置修改以生成 Rollup 构建。谢谢观看！

3.4 - 使用 Rollup 构建

欢迎回来！

本视频中将介绍如何在 package.json 中进行更改，以便使用 Rollup 生成构建。

1. 更新主入口：将 main 属性从 index.js 更新为 dist/cjs/index.js，这与 Rollup 的 CommonJS 输出路径匹配。

2. 添加 ECMAScript 支持：为 ECMAScript 输出添加 module 属性，指向 dist/esm/index.js，确保与 Rollup 配置中的路径一致。

3. 类型支持：在 types 属性中指定类型文件路径，设置为 dist/index.d.ts。

更改完成后，可以使用 npm run build 命令进行构建。运行 build 命令时，若 Rollup 配置文件是 TypeScript 格式，则需添加参数 bundleConfigAsCJS，以确保 Rollup 正确地编译 TypeScript。

最终，生成的 dist 文件夹将包含以下内容：

• cjs 和 esm 文件夹：分别包含 CommonJS 和 ECMAScript 格式的构建输出和 source map 文件。
• index.d.ts 文件：位于根目录，用于类型支持。

下一节将演示如何导出和导入组件。谢谢观看！

3.5 - 发布到 npm

欢迎回来！

本视频将介绍如何将 React UI 组件库发布到 npm。

1. 创建和登录 npm 帐户：前往 npm 网站，若无账户请先注册并验证邮箱。登录账户后，在终端中使用 npm login 命令输入用户名、密码和邮箱验证代码完成登录。

2. 更新库名称：如果库名称与现有 npm 包冲突，可以在 package.json 中修改 name 属性以避免冲突。

3. 发布库：确保登录成功后，使用 npm publish --access public 命令将组件库发布到 npm。如果发布成功，您将在 npm 账户的 Packages 列表中看到新发布的库。

4. 检查发布结果：发布完成后，返回 npm 账户，刷新页面即可看到新发布的库。

接下来的视频将展示如何在独立的 React 应用中安装和测试该库的功能，确保库发布成功后再继续操作。

[WangShuXian6]

4 - 测试与升级

4.1 - 测试已发布的库

欢迎回来！

在上一个视频中，我们讨论了如何将 React UI 组件库发布到 npm。今天，我们将学习如何在一个独立的 React 应用中测试该发布的 npm 组件库。

1. 创建测试项目：

   • 打开终端，进入项目文件夹。
   • 使用以下命令创建新的 React 应用：npx create vite@latest satya-ui-testing。
   • 选择 React 和 TypeScript 作为模板，然后进入新项目。

2. 安装依赖：

   • 运行 npm install 安装应用依赖。
   • 接着，使用 npm install satya-ui-react 安装我们发布的组件库。

3. 启动开发服务器：

   • 运行 npm run dev 启动开发服务器。
   • 在浏览器中打开 localhost:5173 确认应用正常运行。

4. 导入组件并测试：

   • 打开 App.tsx 文件，清理不必要的代码。
   • 使用 import { Button } from 'satya-ui-react' 引入 Button 组件。
   • 在组件中添加 title 和 variant 属性，并观察组件渲染是否符合预期。

5. 验证类型检查：

   • 添加不存在的属性（如 size），观察 TypeScript 是否抛出错误。
   • 组件库正确验证了传入的属性，确保只接受定义的 title 和 variant 属性。

本视频展示了如何在独立 React 项目中测试组件库，验证其功能和类型检查的准确性。下一步，我们将学习如何在发布更新时调整版本号。

4.2 - 升级已发布的库

欢迎回来！

在本视频中，我们将学习在 npm 库中如何进行版本升级。以下是步骤：

1. 在组件库中做修改：

   • 进入 Button 组件，添加新的 onClick 属性，并添加一个光标样式，使按钮在悬停时显示为手形。
   • 更新样式，例如 cursor: pointer，以改善用户体验。

2. 生成最新构建：

   • 打开终端并运行 npm run build，生成包含最新更改的构建文件。

3. 更新 package.json 的版本号：

   • 在 package.json 中将版本号从 1.0.1 更新为 1.0.2。
   • 保存文件并运行 npm publish，发布更新的版本到 npm。

4. 在消费应用中更新版本：

   • 在测试应用中，运行 npm install satya-ui-react@latest。
   • 这样可以安装最新版本，并在应用中测试新属性和样式。
   • 重新启动开发服务器 npm run dev，确保应用加载最新库，并验证按钮组件的光标效果。

接下来的视频中，我们将介绍如何在不发布到 npm 的情况下测试组件更新，以便更快速地验证小的代码改动。

4.3 - 无需重新发布即可测试库

欢迎回来！

本视频将介绍如何在本地测试组件库的更改，而无需发布到 npm。以下是具体步骤：

1. 创建新应用程序：

   • 使用 npx create-vite@latest 创建一个新的 React 项目，如 satya-ui-testing-local，并选择 TypeScript 模板。

2. 在组件库中使用 npm link：

   • 在组件库的根目录中运行 npm link。这样，组件库将在本地全局注册，使其可以被其他应用程序引用。

3. 在测试应用程序中链接库：

   • 进入新的测试应用目录，运行 npm link satya-ui-react 以便在该应用中使用本地版本的 satya-ui-react，而无需从 npm 安装。

4. 构建组件库并测试更改：

   • 在组件库中运行 npm run build，生成最新构建。
   • 打开测试应用，导入 Button 组件并使用它来验证更改，例如添加 onClick 属性。

5. 动态更新样式和功能：

   • 可以在组件库中更改样式或逻辑（例如按钮的颜色或事件处理），重新运行 npm run build，并刷新测试应用查看效果。

6. 完成本地测试：

   • 确保所有更改在本地测试时都能按预期工作，然后再将最终版本发布到 npm。

这样，您可以高效地进行快速迭代，节省发布到 npm 的时间。完成本地验证后，就可以将更新推送到 npm 了。

[WangShuXian6]

5 - 添加 Tailwind CSS

5.1 - 添加纯 CSS 并构建

欢迎回来！

在本视频中，我们将介绍如何在组件库中构建和处理 CSS 文件。具体步骤如下：

1. 创建 CSS 文件并应用类样式：

   • 在 Button 组件目录下创建 index.css 文件，并在该文件中定义样式类。
   • 例如，btn 类定义通用样式，btn-outlined 和 btn-contained 类分别应用边框样式和背景色。
   • 在组件文件中，移除行内样式，改用 className 属性引用这些类。

2. 引入和应用 CSS 文件：

   • 在组件文件顶部引入 CSS 文件：import './index.css'。
   • 使用 JavaScript 动态设置 className，例如：

     let className = 'btn';
     if (variant === 'outlined') className += ' btn-outlined';
     else className += ' btn-contained';

3. 安装和配置 Rollup 的 PostCSS 插件：

   • 由于 Rollup 默认不处理 CSS 文件，我们需要安装 rollup-plugin-postcss 插件。
   • 在项目目录中运行：npm install rollup-plugin-postcss。
   • 在 rollup.config.js 中添加以下代码：

     import postcss from 'rollup-plugin-postcss';

   • 将 postcss() 插件添加到 Rollup 配置中的插件列表。

4. 更新 Rollup 配置以排除 CSS 类型：

   • 在导出类型配置时，通过 external 属性排除 .css 文件。
   • 使用正则表达式排除：exclude: /\.css$/，从而避免 CSS 文件在类型生成阶段出现。

5. 构建并验证输出：

   • 运行 npm run build 构建项目。构建成功后，输出将包含新的 CSS 文件和应用了 CSS 类样式的组件库。
   • 在消费应用中查看效果，确保样式应用正确。

下一步，我们将介绍如何在组件库中集成 Tailwind CSS。

5.2 - 添加 Tailwind CSS 并构建

欢迎回来！

在本视频中，我们将介绍如何在组件库中安装并设置 Tailwind CSS。以下是步骤：

1. 安装 Tailwind CSS

• 前往 Tailwind CSS 官网。
• 点击 "Get Started"，然后选择 "Post CSS" 选项，因为我们使用 Rollup 和 Post CSS 来处理 CSS。
• 按照官网上的指令运行安装命令：

   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init -p

• 完成后，您将看到 tailwind.config.js 和 postcss.config.js 文件生成在项目根目录。

2. 配置 Tailwind CSS

• 打开 tailwind.config.js 文件，在 content 属性中添加 src/**/*.{html,js,jsx,ts,tsx}，使 Tailwind 可以处理这些文件类型。
• 创建一个 main.css 文件，并添加以下内容：

   @tailwind base;
   @tailwind components;
   @tailwind utilities;

• 然后在项目的入口文件（如 index.ts）中引入这个 CSS 文件：

   import './main.css';

3. 修改 Tailwind 配置以兼容组件

• 在 tailwind.config.js 中，将 content 数组更新为：

   content: ["./src/**/*.{html,js,jsx,ts,tsx}"],

• 同时，为了避免与其他 CSS 库发生冲突，在 corePlugins 中设置 preflight: false：

   corePlugins: {
     preflight: false,
   },

• 这会让 Tailwind CSS 独立运行，不会影响其他 CSS 库。

4. 使用 Tailwind CSS 类

• 打开组件文件（如 Button.tsx），删除原有的普通 CSS 文件，并使用 Tailwind CSS 类：

   let className = `py-2 px-5 cursor-pointer`;
   if (variant === 'outlined') {
     className += ` border border-solid border-black bg-white text-black`;
   } else {
     className += ` bg-black text-white`;
   }

5. 运行构建并查看效果

• 执行以下命令以进行构建和查看输出：

   npm run build

• 在浏览器中查看生成的组件库样式，确保 Tailwind CSS 样式正确应用。

通过这些步骤，您现在可以在项目中使用 Tailwind CSS 来构建样式。在下一个视频中，我们将介绍如何通过一个库来简化具有多种样式变体的类名写法。

5.3 - 添加 classnames 库以实现条件类样式

欢迎回来！

本视频我们将介绍如何使用 classnames 库来简化条件渲染类名的流程。这一库的优势在于，可以帮助我们更轻松地基于条件动态应用样式类，而不必写很多 if-else 语句。以下是操作步骤：

1. 安装 classnames 库

• 在终端中输入以下命令进行安装：

   npm install classnames

2. 使用 classnames 库

• 安装完成后，在组件文件中导入该库：

   import classNames from 'classnames';

• 然后，可以替换原有的样式赋值逻辑，将基础样式和条件样式放在 classNames 函数中：

   const buttonClass = classNames(
     "py-2 px-5 cursor-pointer", // 基础样式
     {
       "border border-solid border-black bg-white text-black": variant === "outlined",
       "bg-black text-white": variant === "contained",
       "pointer-events-none bg-gray-300 cursor-not-allowed border-none": disabled,
     }
   );

• 在 JSX 代码中将 buttonClass 应用于 className 属性：

   <button className={buttonClass} onClick={disabled ? null : handleClick}>
     {label}
   </button>

3. 添加更多属性

• 若需要添加更多基于条件的类名，如禁用按钮时的样式：

   const buttonClass = classNames(
     "py-2 px-5 cursor-pointer", 
     {
       "border border-solid border-black bg-white text-black": variant === "outlined",
       "bg-black text-white": variant === "contained",
       "bg-gray-300 text-gray-700 border-none cursor-not-allowed": disabled,
     }
   );

4. 构建和测试

• 运行以下命令进行构建并测试样式：

   npm run build

• 查看浏览器输出，测试不同的 variant 和 disabled 属性的效果，确保所有条件样式都按预期应用。

5. 扩展应用

• 您可以继续为按钮组件添加更多属性，例如 width 和 height，并在 classnames 库中使用类似方式来管理这些样式。

通过 classnames 库，您可以简化条件渲染类名的代码，使代码更简洁、更易读。如果您有任何关于 CSS 安装、Tailwind CSS 设置或 classnames 库使用的疑问，请随时提出！

[WangShuXian6]

6 - 增强按钮组件

6.1 - 添加尺寸和边框半径属性

欢迎回来！

在本视频中，我们将继续完善功能完备的按钮组件，添加 大小（size）和 圆角（rounded）属性，并进行样式调整。

1. 定义 Size 和 Rounded 属性

• 我们首先为按钮添加 size 和 rounded 两个属性：
  • size：可选值为 small、medium、large，默认值为 medium。
  • rounded：可选值为 none、small、medium、large，默认值为 none，用于控制边角的圆润程度。
• 添加代码如下：

   const buttonClass = classNames(
     "px-5 cursor-pointer",
     {
       "h-8": size === "small",
       "h-10": size === "medium",
       "h-12": size === "large",
       "rounded-none": rounded === "none",
       "rounded-sm": rounded === "small",
       "rounded-md": rounded === "medium",
       "rounded-lg": rounded === "large",
     }
   );

2. 实现边角和大小样式

• 使用 tailwind 的 h- 类来设置按钮高度，以及 rounded- 类来控制边角：

   const buttonClass = classNames(
     {
       "h-8": size === "small",
       "h-10": size === "medium",
       "h-12": size === "large",
       "rounded-none": rounded === "none",
       "rounded-sm": rounded === "small",
       "rounded-md": rounded === "medium",
       "rounded-lg": rounded === "large",
     }
   );

• 设置按钮默认的边角和大小：未传递任何值时，size 默认使用 medium，rounded 默认使用 none，以保持矩形形状。

3. 测试大小和圆角属性

• 构建应用程序，并在页面上测试不同的 size 和 rounded 组合，确保每种情况下样式都能正确渲染。
• 可以使用以下代码来测试按钮大小：

   <Button size="large" rounded="large">Large Rounded Button</Button>

4. 使用 Google 字体

• 在 index.css 中导入 Poppins 字体，以提升按钮的整体美观性：

   @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
  
   body {
     font-family: 'Poppins', sans-serif;
   }

• 导入后，您将会看到按钮的文字和样式显得更加简洁、清晰。

5. 构建并查看结果

• 构建并运行应用以检查新的 size 和 rounded 属性的样式效果。通过改变 size 值，可以观察到按钮高度的变化，而改变 rounded 值则会使按钮的边角更圆滑或变为矩形。
• 使用不同的样式组合测试，确保 outline 和 contained 样式都能正确应用。

6. 下一步

• 在后续的视频中，我们将继续添加 图标 和 图标大小 属性，并进一步完善按钮组件的功能。

如果您对组件的 size 和 rounded 属性或 Tailwind CSS 的设置有任何疑问，请随时提问！

6.2 - 添加图标属性

欢迎回来！

在本视频中，我们将为按钮组件添加 图标 和 图标大小 属性。让我们逐步实现这些新功能。

1. 定义 Icon 和 Icon Position 属性

• 我们首先为按钮组件添加两个新属性：
  • icon：用于传递图标组件，可以是任意的 React 节点。
  • iconPosition：用于定义图标的位置，可选值为 left 和 right，默认值为 left。
• 属性定义如下：

   const Button = ({ icon, iconPosition = 'left', ...props }) => {
     const buttonClass = classNames(
       "px-5 cursor-pointer flex items-center",
       {
         "gap-3": icon, // 如果有图标，设置间距
         "flex-row-reverse": icon && iconPosition === "right" // 如果图标在右侧，则反转方向
       }
     );
   };

2. 使用 Icon 和 Flex 布局

• 设置按钮的 flex 布局和 gap 间距，方便图标和文本的组合展示。根据 iconPosition 值调整 flex 方向：

   return (
     <button className={buttonClass}>
       {icon && iconPosition === 'left' && <Icon size={iconSize} />}
       <span>{props.children}</span>
       {icon && iconPosition === 'right' && <Icon size={iconSize} />}
     </button>
   );

• 根据 iconPosition 值来控制图标的位置。

3. 安装图标库

• 我们选择使用 Lucide React 作为图标库，安装并导入所需的图标：

   npm install lucide-react

• 然后在代码中导入图标组件，并通过 icon 属性传递给按钮：

   import { User } from "lucide-react";
  
   <Button icon={<User size={16} />} iconPosition="left">
     Add User
   </Button>

4. 添加 Icon Size 控制

• 允许用户根据需要调整图标大小：

   <Button icon={<User size={16} />} iconPosition="left" />

• 通过图标组件本身的 size 属性控制其大小，以适应按钮的不同样式和尺寸。

5. 构建与测试

• 构建项目，并在页面上测试按钮组件的不同属性组合，以确保 icon 和 iconPosition 都能正确渲染：

   <Button variant="outline" icon={<User size={14} />} iconPosition="right">
     Add User
   </Button>

• 切换 variant、size 和 rounded 等属性，同时观察图标位置和样式效果。

6. 下一步

• 在接下来的内容中，我们将介绍 Storybook 设置，以便更方便地管理和测试组件。Storybook 允许我们在隔离环境中查看和调试所有组件的状态和样式。

如果您对按钮组件的 icon 和 iconSize 属性有任何疑问，或者对图标库的使用有问题，请随时提问！

[WangShuXian6]

7 - Storybook

7.1 - Storybook 简介

欢迎回来！

在本视频中，我们将介绍 Storybook 的安装、设置，以及如何为组件编写 Stories。让我们一步一步实现 Storybook 集成到我们的组件库中。

1. 回顾

• 我们已经完成了组件库 satyaui 的创建，包括按钮组件，并成功将其发布到 npm。
• 测试方法有两种：
  • 方法1：通过 npm 发布并安装到测试应用中。
  • 方法2：使用 npm link，通过软链接在本地开发环境中进行快速测试。
• 虽然这些方法有效，但它们涉及到频繁的构建和安装，流程较为繁琐。

2. 引入 Storybook

• Storybook 是一种在隔离环境中开发和测试 UI 组件的工具，允许我们在自己的应用中测试组件，而无需创建和维护单独的消费者应用。
• 这使得测试过程更快、更高效，并能为组件提供更清晰的文档。

3. 安装和设置 Storybook

• 使用以下命令安装 Storybook：

   npx storybook@latest init

• Storybook 会自动检测您的项目并安装所需的依赖。请根据提示选择构建工具（如 Vite 或 Webpack）。
• 安装完成后，您将看到 .storybook 文件夹，这里面包含了 Storybook 的配置文件。

4. 启动 Storybook

• 在终端中输入以下命令启动 Storybook：

   npm run storybook

• 默认情况下，Storybook 会在浏览器中打开并显示默认的组件视图。通过此界面，您可以交互式地测试您的 UI 组件。

5. 编写 Stories

• Storybook 使用称为 Stories 的文件来描述和测试组件的不同状态。

• 为按钮组件创建一个 .stories.js 文件，例如 Button.stories.js，并定义一些不同的状态：

   import React from 'react';
   import { Button } from './Button';
  
   export default {
     title: 'Example/Button',
     component: Button,
   };
  
   const Template = (args) => <Button {...args} />;
  
   export const Primary = Template.bind({});
   Primary.args = {
     variant: 'contained',
     label: 'Primary Button',
   };
  
   export const Secondary = Template.bind({});
   Secondary.args = {
     variant: 'outline',
     label: 'Secondary Button',
   };

6. 运行和测试

• 启动 Storybook，您将可以看到按钮组件的不同状态（如 Primary 和 Secondary）。通过此界面，您可以调整组件的属性，并在 Storybook 的隔离环境中进行交互式测试。

7. 后续步骤

• 现在我们已经成功安装并运行了 Storybook。在接下来的视频中，我们将学习如何在 Storybook 中自定义和优化组件视图，并使用 Storybook 的其他功能来更好地记录和测试组件。

如果您在安装或配置过程中有任何问题，请随时提问。

7.2 - 了解 story 并学习如何编写

欢迎回来！

在上一个视频中，我们介绍了 Storybook，并完成了 Storybook 的安装和设置。今天我们将探讨 story 的概念，并演示如何移除默认的 Storybook 示例。

1. 什么是 Story？

• Story 是一种用来描述组件在不同状态或配置下的表示方式。换句话说，Story 是组件的多种变体。
• 例如，一个按钮组件可能会有多种状态，如 primary、secondary、large、small 等。每种状态可以对应一个 story。
• Story 使得我们可以在不修改代码的情况下，通过调节 props 来测试和查看组件的不同表现。

2. Storybook 的优势

• 使用 Storybook 后，你可以直接在界面中修改组件的属性，而无需在代码中手动更改，保存并刷新。Storybook 提供了实时预览的功能，使测试更便捷、更高效。

3. 组件及其变体的展示

• 默认情况下，Storybook 安装后提供了一些示例故事，供我们参考。它们展示了如何通过不同的 props 来创建不同的组件状态。
• 每个变体都可以通过控制不同的 props 值来实现，如背景颜色、大小、标签文本等。

4. 如何移除默认 Story

• 默认安装的 Storybook 包含一些示例文件夹，如 stories 文件夹中的默认组件。
• 要移除它们，只需删除 src/stories 文件夹中的文件即可。保留 .mdx 和 .storybook 文件夹，因为它们包含配置和文档内容。
• 删除默认 stories 后，Storybook 界面将不再显示这些示例组件。

5. 创建自定义 Story

• 在下一个视频中，我们将学习如何从零开始编写自定义 Story。
• 我们将以按钮组件为例，通过定义不同的 props 和参数，创建属于自己的 Story。

通过以上步骤，你现在应该理解了 Story 的概念以及它在 Storybook 中的作用。在接下来的视频中，我们将亲手编写第一个按钮组件的 Story。

7.3 - 为按钮组件编写 story - 第 1 部分

欢迎回来！在本讲中，我们将学习如何为我们的按钮组件编写 story。

步骤：

1. 定位组件文件夹

   • 进入项目文件夹中的 SRC，找到 components 文件夹，并在其中找到按钮组件的文件夹。
   • 在这个按钮组件的文件夹中创建新的 story 文件： button.stories.tsx。

2. 编写基本故事

   • 在这个文件中，导入 Button 组件和 ButtonProps 接口。
   • 使用 export default 导出一个对象，其中包含 title 和 component 字段，定义 story 的名称和组件。

3. 编写第一个 story

   • 使用 export const 创建按钮的第一个变体 Contained。
   • 在 args 中设置按钮的属性，如 title 和 variant 等。
   • 例如：title 为“Primary Button”，variant 为“Contained”。

4. 扩展更多变体

   • 同样的方法可以创建其他变体，如 Outlined，并为不同的按钮样式指定不同的 args。
   • 你可以根据需求，创建诸如 Small、Medium、Large 的大小变体，或是 Disabled 状态的按钮。

5. 使用 Tailwind CSS

   • 如果你的项目中使用了 Tailwind CSS，还需要添加 PostCSS 插件以确保样式在 Storybook 中生效。
   • 在 .storybook/main.js 文件中，将插件 storybook/addon-postcss 添加到 addons 中，并根据 Storybook 的文档进行配置。
   • 最后，导入 main.css 文件到 Storybook 的 preview.js 中，以确保 Tailwind CSS 能够应用到 Storybook。

6. 运行 Storybook

   • 使用 npm run storybook 启动 Storybook，在浏览器中预览你创建的按钮故事。
   • 你可以实时修改按钮的属性（如文本、大小、状态等），观察 Storybook 界面上的效果变化。

7. 创建更多故事

   • 根据按钮的不同 props（例如 variant、size、disabled 等），创建多个故事以展示不同的配置效果。建议创建至少 5 个变体，帮助更好地测试和展示组件。

结论

通过以上步骤，你可以使用 Storybook 为按钮组件创建多个不同的故事，实时测试和展示组件的不同状态。如果有任何疑问，请在继续前进一步交流。

7.4 - 为按钮组件编写 story - 第 2 部分

欢迎回来！在本讲中，我们将为按钮组件添加两个新的 stories：一个是处理圆角属性，另一个是处理图标属性。

1. 添加圆角故事

• 这里的圆角属性控制按钮的边框半径。

• 为按钮创建一个新的 story rounded，在 args 中传入 borderRadius 为 large。

  示例代码：

  export const Rounded = {
     args: {
         title: 'Click Me',
         borderRadius: 'large',
     },
  };

• 这样，按钮将展示出较大的圆角样式。你也可以调整为 outline 样式，以便更好地对比效果。

2. 添加带图标的故事

• 使用 lucid-react 图标库为按钮添加一个图标。

• 如果还没有安装 lucid-react，请先安装。确认它已经添加到项目的依赖中。

  示例代码：

  import { User } from 'lucid-react';
  
  export const WithIcon = {
     args: {
         title: 'Click Me',
         icon: <User size={16} />,
     },
  };

• 这样，按钮上将显示一个用户图标。你可以根据需要调整图标大小和按钮样式。

3. 在 Storybook 中预览

• 启动 Storybook 并检查新添加的 Rounded 和 WithIcon 故事。
• 使用右侧的 props 调整，可以实时更改按钮的属性，并查看更新后的样式效果。

总结

我们已经成功地为按钮组件添加了两个新的变体，展示了按钮的圆角和带图标的样式。在接下来的讲座中，我们将讨论如何为按钮添加 loading 状态的故事，以进一步丰富其样式变体。如果有任何疑问，请随时提问！

7.5 - 为按钮组件编写 story - 第 3 部分

欢迎回来！在本视频中，我们将为按钮组件添加一个 loading 属性，以实现加载动画效果，并创建相应的 story。以下是实现过程：

1. 添加 Loading 属性

• 在按钮组件中新增一个 loading 属性，类型为布尔值，默认为 false。

• 当 loading 为 true 时，按钮旁边将显示一个旋转的加载指示器。

  示例代码：

  export const Button = ({ loading = false, ...props }) => {
     return (
         <button className="btn" {...props}>
             {props.children}
             {loading && (
                 <span className="spinner w-3 h-3 border-2 border-t-transparent rounded-full animate-spin ml-2"></span>
             )}
         </button>
     );
  };

• 这里我们使用了一个带旋转动画的 <span> 元素作为加载指示器。类 animate-spin 添加了旋转动画，border-t-transparent 隐藏顶部边框以形成旋转效果。
• 你可以根据按钮的 variant 样式来调整指示器颜色，例如：border-white 和 border-black。

2. 创建 Loading 的 Story

• 在 button.stories.js 文件中，为加载效果添加一个 story。

  示例代码：

  export const WithLoader = {
     args: {
         title: 'Click Me',
         loading: true,
         variant: 'contained', // 或 'outlined'，根据需要选择样式
     },
  };

• 现在你可以在 Storybook 中查看加载效果。当 loading 为 true 时，会在按钮旁边显示加载指示器。

3. 启动并查看

• 启动 Storybook 并查看 WithLoader story 的效果。可以尝试不同的 variant 和 size 属性值来测试加载指示器的外观。

4. 优化和调整

• 根据需要，可以使用 flex 布局来调整按钮文本和加载指示器的位置，以实现更整齐的对齐。
• 还可以通过调整 width 和 height 参数来更改加载指示器的大小。

总结

现在我们已经为按钮组件添加了一个 loading 效果，并创建了相应的 story。加载指示器会在加载时显示，并伴随旋转动画。您可以继续探索其他样式组合和故事以丰富组件功能！

如果有任何疑问，请随时提出！

[WangShuXian6]

8 - 输入框 (Input)

8.1 - 创建 Input 组件

欢迎回来！在本视频中，我们将开始创建输入框组件，并为其添加基本的故事。以下是实现过程的关键步骤：

1. 定义输入框组件 (Input Component)

• 创建 Input 组件并定义其属性 (props)，例如 value、onChange、name、placeholder、type、size、rounded、disabled 和 error。

• 使用 interface 定义输入框的属性类型，以确保输入框支持字符串或数字类型的值、各种尺寸、边框圆角、禁用状态和错误消息等。

  示例代码：

  interface InputProps {
     value: string | number;
     onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
     name: string;
     placeholder?: string;
     label?: string;
     disabled?: boolean;
     type?: 'text' | 'number' | 'password';
     size?: 'small' | 'medium' | 'large';
     rounded?: 'none' | 'small' | 'medium' | 'large';
     error?: string;
  }
  
  export const Input = ({ value, onChange, name, placeholder, label, disabled, type = 'text', size, rounded, error }: InputProps) => {
     return (
         <div className="flex flex-col max-w-xs">
             {label && <label htmlFor={name} className="mb-1">{label}</label>}
             <input
                 type={type}
                 name={name}
                 value={value}
                 onChange={onChange}
                 placeholder={placeholder}
                 disabled={disabled}
                 className={`px-5 ${size === 'small' ? 'h-8' : size === 'medium' ? 'h-10' : 'h-12'} 
                             ${rounded === 'small' ? 'rounded-sm' : rounded === 'medium' ? 'rounded-md' : rounded === 'large' ? 'rounded-lg' : ''} 
                             ${error ? 'border border-red-500' : 'border border-gray-300'}
                             ${disabled ? 'bg-gray-200 cursor-not-allowed' : ''}`}
             />
             {error && <p className="text-red-500 mt-1">{error}</p>}
         </div>
     );
  };

2. 创建基本故事 (Basic Story)

• 使用 storybook 为输入框创建一个基本的故事，测试默认样式、占位符和禁用状态等属性。

• 为了测试组件在 Storybook 中的显示效果，可以在 input.stories.tsx 文件中编写以下内容：

  示例代码：

  import { Input } from './Input';
  
  export default {
     title: 'Components/Input',
     component: Input,
  };
  
  export const BasicInput = {
     args: {
         label: 'Username',
         placeholder: 'Enter your username',
         value: '',
         disabled: false,
     },
  };

3. 测试和调试

• 启动 Storybook，查看 BasicInput 故事并验证输入框是否能正确显示占位符和禁用状态。
• 通过调整 Storybook 中的控制面板，可以方便地测试不同的属性组合，例如：size 和 rounded 等属性。
• 可通过修改类名动态设置组件的尺寸、圆角和边框颜色。

4. 添加其他属性 (如错误消息、禁用状态等)

• 如果存在错误消息，可以通过 error 属性显示红色文本和边框。
• 在禁用状态下，应用灰色背景颜色，设置 cursor-not-allowed 样式以禁止点击操作。

总结

我们已经创建了基本的输入框组件，并在 Storybook 中进行了测试。接下来，可以继续为该输入框组件添加更多的变体和故事，探索不同的属性组合！

如有任何疑问，欢迎随时提出！

8.2 - Input 组件的 story

本视频中，我们将为输入框组件编写不同的故事，并利用不同的属性来展示其多种变体。以下是步骤：

1. 创建不同大小的输入框故事

• 为不同尺寸的输入框（例如large）创建故事。这样可以清楚地展示每种尺寸的效果。
• 例如：

   export const Large = {
       args: {
           label: 'Username',
           placeholder: 'Enter your username',
           size: 'large',
       },
   };

2. 添加错误状态故事

• 通过设置error属性，我们可以在输入框中展示错误状态。
• 例如：

   export const ErrorState = {
       args: {
           label: 'Username',
           placeholder: 'Enter your username',
           error: 'Invalid username',
       },
   };

3. 创建禁用状态的输入框故事

• 使用disabled属性，设置输入框为禁用状态。
• 示例代码：

   export const Disabled = {
       args: {
           label: 'Username',
           placeholder: 'Enter your username',
           disabled: true,
           value: 'Satya', // 设定初始值为用户名称
       },
   };

4. 展示圆角属性的变体

• 使用rounded属性，设置输入框的圆角样式。可以选择不同的圆角级别，比如small、medium、large或full。
• 示例代码：

   export const Rounded = {
       args: {
           label: 'Username',
           placeholder: 'Enter your username',
           size: 'large',
           rounded: 'full', // 圆角样式为全圆
       },
   };

5. 将属性组合到Storybook中以便测试

• 将所有变体添加到Storybook，确保在不同的状态下查看输入框效果。

• 例如：

   export default {
       title: 'Components/Input',
       component: Input,
   };
  
   export const BasicInput = {
       args: {
           label: 'Username',
           placeholder: 'Enter your username',
       },
   };
  
   export const LargeInput = { ...Large };
   export const ErrorInput = { ...ErrorState };
   export const DisabledInput = { ...Disabled };
   export const FullRoundedInput = { ...Rounded };

6. 下一步：主题化和颜色设置

• 在下一个视频中，我们将探讨如何为组件应用主题化和自定义颜色。由于主题通常涉及多个组件，所以先创建按钮和输入框这两个组件，然后再统一调整颜色。
• 通过为多个组件设置主题，可以确保它们的样式风格一致，便于整体应用风格的管理。

通过这种方法，您可以创建多样化的输入框组件，并在Storybook中测试不同属性组合。接下来，我们将探索如何通过主题来统一控制组件的颜色和样式。

[WangShuXian6]

9 - 主题提供器

9.1 - 创建主题提供器包装组件

本视频中，我们讨论了如何在UI组件库中实现主题（theming）功能。以下是步骤概述：

1. 创建ThemeProvider组件

• 我们首先创建了一个ThemeProvider组件，该组件接受一个primaryColor属性，用于设置组件的主题颜色。如果没有传递此属性，默认颜色为黑色（#000）。

• 示例代码：

   import React, { useEffect } from 'react';
  
   export const ThemeProvider = ({ primaryColor = '#000', children }) => {
       useEffect(() => {
           document.documentElement.style.setProperty('--primary-color', primaryColor);
       }, [primaryColor]);
  
       return <>{children}</>;
   };

2. 定义CSS变量和样式

• 在主CSS文件中，我们定义了一个名为--primary-color的CSS变量，并设置默认值。
• 示例代码：

   :root {
       --primary-color: #000;
   }

3. 在Tailwind配置中使用CSS变量

• 使用tailwind.config.js文件中的extend选项，将--primary-color变量与Tailwind的colors配置结合，这样我们可以在Tailwind类中引用这个颜色变量。
• 示例代码：

   // tailwind.config.js
   module.exports = {
       theme: {
           extend: {
               colors: {
                   primary: 'var(--primary-color)',
               },
           },
       },
   };

4. 更新组件以使用主题颜色

• 在组件（例如按钮和输入框）中，将所有硬编码的颜色替换为primary。
• 示例代码：

   <button className="bg-primary text-white">Button</button>

5. 为Storybook添加ThemeProvider

• 将ThemeProvider包装在Storybook的组件故事中，以便能够在Storybook中动态更改主题颜色。

• 示例代码：

   import { ThemeProvider } from './ThemeProvider';
  
   export default {
       title: 'Components/Button',
       component: Button,
       decorators: [(Story) => <ThemeProvider primaryColor="#f00"><Story /></ThemeProvider>],
   };

6. 通过Storybook测试主题

• 在Storybook中，可以通过更改primaryColor属性来动态观察颜色变化。例如，可以将颜色更改为蓝色或绿色，来验证组件是否正确响应主题更改。

7. 在真实项目中测试主题

• 在下一个视频中，我们将进一步演示如何在真实React应用中测试此ThemeProvider，确保它在实际场景中能够为组件提供一致的主题颜色控制。

通过这些步骤，您可以实现一个可配置的主题系统，使组件在不同的项目中能方便地应用不同的主题。

9.2 - 测试主题提供器

在本视频中，我们演示了如何在原始React应用中测试ThemeProvider主题提供程序的概念。以下是关键步骤：

1. 配置本地链接

• 我们选择了一个本地测试应用，并确保ThemeProvider组件可用，随后通过以下命令建立本地链接，以便在应用中测试库。
• 使用npm link命令将本地SatyaUI库链接到应用程序中：

   npm run build
   npm link

• 然后在消费者应用中链接库：

   npm link satya-ui-react

2. 在消费者应用中使用ThemeProvider

• 打开应用主文件（例如App.js），并将组件放在ThemeProvider组件内，以便这些组件能够使用该主题。

• 示例：

   import { ThemeProvider, Button } from 'satya-ui-react';
  
   function App() {
       return (
           <ThemeProvider primaryColor="blue">
               <Button title="Add User" variant="contained" />
               <Button title="Submit" variant="outlined" />
           </ThemeProvider>
       );
   }

3. 检查依赖冲突并配置外部依赖

• 发现了与React的useEffect钩子有关的依赖冲突问题。为避免库中的React版本与消费者应用的React版本冲突，我们更新了rollup.config.js配置文件，使用external选项来排除React库。
• 更新配置：

   external: ['react']

4. 在应用中测试样式更新

• 在应用中测试时，我们将primaryColor属性更改为不同的颜色值，并看到所有被包裹在ThemeProvider中的组件的样式随之改变。这样可以确保ThemeProvider的主题颜色在所有子组件上都能应用。
• 示例：

   <ThemeProvider primaryColor="orange">
       <Button title="Add User" variant="contained" />
       <Button title="Submit" variant="outlined" />
       <Input placeholder="Enter your name" />
   </ThemeProvider>

• 通过更改primaryColor的值，观察所有按钮、输入框的边框和背景颜色实时变化。

5. 应用实践

• 在实际项目中，推荐将整个应用包裹在ThemeProvider中，这样各个页面和组件都能继承主题。可以在ThemeProvider内部创建路由和页面，以便所有内容都能一致地应用主题颜色。

通过这些步骤，我们成功地验证了ThemeProvider在React应用中的功能，并展示了如何通过简单的属性更改来动态更新整个应用的样式。

[WangShuXian6]

10 - 选择框 (Select)

10.1 - 创建 Select 组件

在本视频中，我们介绍了如何创建并测试SelectField组件，重点在于构建一个基础选择框组件。以下是关键步骤：

1. 组件创建

• 我们创建了Select组件，并在组件文件index.tsx中定义了必要的属性接口SelectProps，包括以下属性：
  • value: 当前选中的值，类型为string或number。
  • onChange: 值更改时的回调函数。
  • options: 选项列表，为对象数组，包括label（标签）和value（值），可选的image字段可以用来显示图标或国旗等。
  • placeholder: 占位符文本。
• 创建了组件的基础UI结构，包括选中的值或占位符，以及下拉选项列表。

2. 组件逻辑

• 使用showOptions状态控制选项列表的显示与隐藏。当用户点击选择框时，通过setShowOptions切换showOptions的布尔值，从而显示或隐藏选项列表。
• 使用.map()方法遍历options数组，将每个选项渲染为一个点击区域（div），点击选项时，调用onChange并将选项值传递给父组件。

3. Storybook测试

• 我们创建了SelectField的Storybook故事文件Select.stories.tsx，并将基本的Select组件故事定义为Basic。
• 在Storybook中，指定了placeholder为“Select a country”，并传入了一些示例国家作为选项。
• 运行Storybook后，确保SelectField组件在点击后显示下拉菜单，并在控制台上验证所选值。

4. 样式优化

• 为选项框和选项列表添加了一些样式，以便在交互时视觉上更清晰，例如：
  • 为主框和选项框添加了边框和填充。
  • 当用户悬停在选项上时，更改背景颜色。
  • 设置圆角和鼠标指针，以提高用户体验。
• 在组件内调整了样式，并添加了px和py类，以确保选项在移动端和桌面端都有良好的显示效果。

5. 进一步开发

• 我们将在后续视频中添加图标支持，以便选择项中包含图标或图像。此外，我们还将改进UI和功能，以便在选项被选中后在选择框内显示该选项的文本。

通过本次实现，我们搭建了SelectField组件的基本框架，并展示了如何在React中实现带有占位符、点击展开选项、点击选项回调等基本功能的选择框。

10.2 - Select 组件的 story - 第 1 部分

在本次视频中，我们扩展了 SelectField 组件的功能，使其支持在下拉选项中显示图像，比如各个国家的国旗。以下是关键步骤：

1. 获取国旗图片

• 使用Google搜索获取国家国旗的URL，比如通过访问 countryflags.com。
• 在Storybook的Advanced故事中，为每个国家（如印度、美国、英国和加拿大）添加对应的国旗图片链接。基本故事中没有图片，而高级故事则包括图片。

2. 在组件中显示图片

• 修改Select组件，在label之前添加img标签。检查选项对象中是否包含image属性，如果存在，就渲染图像。
• 设置img的大小为20px x 20px，并添加mr-5样式在图像和文本之间留出一些间距。

3. 组件样式优化

• 使用 flex items-center 样式，使图片和文本垂直居中对齐。
• 调整图片的高度以确保与文本保持一致，并减少不必要的样式设置。
• 添加 w-max 和 px-5 使组件显示效果更好，避免组件过度拉伸。

4. 添加下拉箭头图标

• 为选择框添加下拉箭头图标。使用了Lucide React库的ChevronDown 和 ChevronUp图标，分别用于表示选项展开和隐藏状态。
• 设置图标的大小为15px，并使其颜色与主题颜色一致。
• 在选择框中通过justify-between样式来调整图标与文本之间的间距。

5. 功能测试

• 在Storybook中测试 Advanced 组件，验证当选项展开时显示国旗和文本。
• 添加动画效果或转换效果时，可以考虑调整 transform 和 rotate 样式，以确保选项的展开和收起具有流畅的用户体验。

6. 后续步骤

• 在下一个视频中，我们将展示如何在Storybook中选择选项后动态更新组件状态，使用户选中的值能够实时显示在选择框内。这样可以更直观地展示选择结果。

通过这次实现，我们成功将SelectField组件扩展至包含图像，并实现了基本的样式和交互效果，使组件更加完善和实用。

10.3 - Select 组件的 story - 第 2 部分

在本次视频中，我们探索了如何在Storybook中处理组件的状态管理（如 useState 和 useEffect），并在选择项更改时动态显示选中的值。以下是实现步骤：

1. 创建组件模板

• 为组件创建一个模板 const template，并将 args 作为参数。使用此模板定义初始状态和状态更新逻辑。
• 通过 useState 钩子创建 value 状态和 setValue 更新函数。初始状态为空。
• 使用 onChange 函数来处理选择项的更改，每次选择更改时调用 setValue 更新状态。

2. 将模板附加到故事

• 在 Basic 和 Advanced 两个故事中添加 render: template，使故事能够使用模板的状态管理功能。
• 在 Storybook 中测试选择行为，确保选择项会更新显示值。

3. 显示选中的标签（label）

• 在 SelectField 组件中使用 find 方法查找当前选中的选项对象，并将 label（标签）作为显示内容。
• 如果 value 存在，则显示选项的 label；如果没有选项被选中，则显示占位符（placeholder）。

4. 在高级故事中显示图像和标签

• 为高级选项添加图片：如果选项对象中包含 image 属性，使用 img 标签显示图片。
• 将图像和标签包装在 div 中，并添加样式 flex、gap-2 和 items-center，以确保图片和文本对齐。

5. 选中项的高亮显示

• 在 options.map 中，根据每个选项的 value 是否等于当前 value 状态，添加 bg-gray-300 背景样式来高亮显示当前选中的选项。
• 这样，当用户打开选择列表时，可以直观地看到当前选中的选项。

6. 样式调整

• 使用 px-3 和 py-2 调整各个元素的内边距，使得组件在视觉上更加整齐。
• 调整对齐方式，确保选中的项与选项列表的起始位置一致。

7. 后续步骤

• 在下一个视频中，将继续添加更多的属性（如禁用状态、大小等），并为组件创建完整的故事集，以支持更全面的测试。

通过这些改进，组件能够动态显示选中内容，并在高级模式下显示图像，实现了更多的交互性和视觉效果。希望本视频帮助你在Storybook中更好地管理组件状态！

10.4 - Select 组件的 story - 第 3 部分

在这段视频中，我们添加了一个禁用（disabled）状态的故事给 SelectField 组件，并提出了一个小任务：为组件添加 size 和 rounded 属性。以下是具体步骤：

1. 禁用状态故事

• 在组件中添加 disabled 属性，并将默认值设为 false。
• 在 classNames 函数中，根据 disabled 状态添加禁用样式，例如：
  • 设置背景色为 bg-gray-200，并根据需要进行调整。
  • 禁用指针事件并将鼠标样式更改为 cursor-not-allowed。
• 测试组件是否正确地显示禁用状态，并确保在禁用时无法展开下拉框。

2. 添加大小和圆角属性

• 添加 size 和 rounded 属性：
  • size 属性接受值 small、medium 和 large，用于控制组件的大小。
  • rounded 属性接受值 small、medium、large 和 full，用于控制组件的圆角大小。
• 您可以通过样式类名来控制不同 size 和 rounded 值的效果。例如：

   className={`${size === 'small' ? 'py-1 px-2' : size === 'medium' ? 'py-2 px-4' : 'py-3 px-6'} ${rounded === 'full' ? 'rounded-full' : rounded === 'large' ? 'rounded-lg' : 'rounded-sm'}`}

• 视频中建议您自行实现这些样式，以完成 size 和 rounded 属性的任务。

通过这些改进，可以在使用 SelectField 组件时更好地适应不同的使用场景，包括设置组件的大小、圆角以及禁用状态。希望这些步骤对您有所帮助！

[WangShuXian6]

11 - 单选框 (Radio)

11.1 - 创建 Radio 组件

在本视频中，我们开始创建 RadioField 组件及其基本样式，主要功能包括：

1. 组件初始化

• RadioField 组件的核心实现与 SelectField 类似，但呈现方式不同。
• 我们定义了 radioProps 接口，包含了 label、options、disabled、size、rounded 等属性。
• 添加了 orientation 属性，用于控制组件的水平或垂直布局。

2. 样式与功能

• 组件中设置了每个选项的布局，并为选中的选项添加了高亮边框效果。
• 使用 classNames 库在 className 中实现条件样式，以便在选中时更改边框宽度和颜色。
• 在 RadioField 中，通过循环 options 数组来生成每个选项，默认情况下未选中的选项显示较浅的边框。

3. 交互逻辑

• 使用 useState 钩子保存当前选中的值，通过 onClick 事件更新选中状态。
• 添加了 onClick 事件，在用户点击时触发选项的边框样式更改。
• 为便于理解，我们在 RadioField 的 stories 文件中创建了模板，通过 args 和模板函数实现动态更新值。

4. 下一步

• 后续的视频将进一步优化样式，包括使用主色调、修改边框颜色、大小等细节。

这个组件的实现提供了良好的基础，您可以进一步使用不同的颜色和样式来提升视觉效果。如果您对组件的细节还有疑问，请随时告知。

11.2 - Radio 组件的 story - 第 1 部分

在本视频中，我们完成了 SelectField 组件的基础故事，并开始设计 RadioField 组件。主要要点如下：

1. 组件简介

• RadioField 和 SelectField 具有相似的结构，但 RadioField 使用不同的 UI 表现方式。
• 我们使用了 label 和 options 等属性来初始化 RadioField 组件，并添加了 orientation 属性来控制水平和垂直布局。
• 主要道具包括 orientation（水平或垂直）、disabled（是否禁用）、和 size（组件尺寸）。

2. 样式和交互

• 为选中的 radio 选项添加了自定义样式，包括高亮的边框和不同的颜色。
• 选中的选项会显示主色调边框，并增加边框宽度，使选中的状态更加明显。
• 使用 classNames 库对 className 进行条件渲染，在选中时动态更新样式。

3. 状态管理

• 组件内部使用 useState 钩子来存储当前选中项，并通过 onClick 事件处理点击交互。
• 在 RadioField 的 stories 文件中创建了一个模板，使得可以轻松管理和更新选项值。

4. 故障排查

• 我们解决了一些显示问题，例如通过 box-sizing: border-box 设置让边框内缩，从而避免超出问题。
• 对组件样式进行了调整，使选项的边框在选中时显示粗边。

5. 下一步

• 在后续视频中，我们将进一步优化样式，例如为选项分配主色调、动态调整尺寸等，以确保组件的完整性和视觉效果。

本视频为基础样式和交互逻辑打下了良好基础。如果对组件设计有疑问或建议，请随时告知！

11.3 - Radio 组件的 story - 第 3 部分

在本视频中，我们完善了 RadioButton 组件的样式，并创建了相应的故事。主要步骤和改进包括：

1. 字体设置

• 为组件应用了 Google 字体 Poppins，以提升整体视觉效果。
• 通过在 CSS 中导入并设置字体族，确保了全局一致的字体样式。

2. 边框宽度和颜色

• 使用了更大的边框宽度（如 border-4 和 border-5），以更清晰地指示选中状态。
• 在选择和禁用状态下动态设置边框颜色，分别应用主色（例如 border-primary）和灰色（例如 border-gray-300）。

3. 组件布局

• 添加了 orientation 属性，用于切换水平和垂直布局。
• 根据 orientation 值（水平或垂直），使用 classNames 库动态调整布局方向。

4. 禁用状态

• 为禁用状态的单选按钮设置了灰色背景和文本颜色（例如 bg-gray-100 和 text-gray-300）。
• 禁用状态下还禁用了 pointer events，并设置 cursor 为 not-allowed，表示不可点击。

5. 故事编写

• 创建了新的故事来展示不同的状态和布局，包括水平、垂直和禁用的 RadioButton。
• 使用共享的选项数据以减少代码重复，并应用统一的组件属性，使故事更简洁易读。

6. 后续改进

• 建议观众自行添加其他属性（如 size 和 rounded）的处理方式，以完成所有自定义需求。

本视频使 RadioButton 组件的外观更加美观，并且通过增强其状态指示和布局配置，实现了更好的用户体验。如果有更多的疑问或需求，可以继续在下一视频中探索！

[WangShuXian6]

12 - 开关 (Switch)

12.1 - 创建 Switch 组件

在本视频中，我们开发了开关 (Switch) 组件的基本功能，并编写了初始的故事。以下是主要步骤和实现细节：

1. 组件的基本功能

• 创建了一个 Switch 组件，包含 label、checked、onChange 和 disabled 属性。
• checked 属性用于决定开关的状态（开/关），onChange 函数处理状态切换。

2. 布局和样式

• 使用了 className 条件渲染背景颜色和位置，根据 checked 状态改变开关的背景色（例如，打开时主色，关闭时灰色）。
• 使用了 rounded 类使背景和白色圆形指示器的边缘更平滑。
• 设置了 flex 布局，使白色指示器在不同状态下分别对齐到左侧或右侧。
• 在组件关闭状态下将背景设为 bg-gray-400，而开启时使用 bg-primary（设置为蓝色）。

3. 添加故事

• 在 Storybook 中编写了基本故事，并设置 label 为“is active”，默认状态 checked 为 false。
• 使用 useState 创建模板以管理 checked 状态，确保点击组件时状态发生切换。

4. 功能验证

• 使用 onClick 和 onChange 切换状态，从 false 到 true 并反之，以显示切换效果。
• 在 Storybook 中测试切换是否生效，且背景颜色和指示器位置根据状态正确显示。

5. 组件优化

• 解决样式更新问题，通过 Storybook 刷新页面来确保 CSS 样式生效。
• 如果样式没有即时生效，建议重新启动 Storybook 以排查问题。

本视频中为 Switch 组件奠定了基础，并且初步实现了主要功能。在下一视频中，我们将进一步优化并扩展该组件的功能，以满足更多需求。

12.2 - Switch 组件的 story

在本视频中，我们进一步完善了开关 (Switch) 组件，增加了 orientation 和 disabled 属性，使其功能更加完整。以下是主要内容概述：

1. disabled 属性的实现

• 设置 disabled 属性后，即使 checked 为 true，用户也无法更改开关状态。
• 为了更好地显示 disabled 状态，使用了 opacity 降低组件透明度，并禁用了指针事件（pointer-events: none）以阻止交互操作。
• 在样式中添加了 cursor: not-allowed，进一步增强了禁用时的视觉提示。

2. orientation 属性的实现

• orientation 属性控制开关和标签的布局方向：
  • 默认设置为 vertical，开关在标签下方。
  • 如果设置为 horizontal，开关则会显示在标签右侧。
• 使用 flex 布局调整方向，当 orientation 为 horizontal 时，使用 flex-row，并通过 items-center 保证居中对齐。
• 调整后的 className 通过条件渲染，根据 orientation 的值灵活应用不同的 flex 样式。

3. 编写和测试新故事

• 在 Storybook 中添加了新的故事来展示组件的不同状态：
  • horizontal 和 vertical 布局。
  • 测试 checked 为 true 且 disabled 的组合状态，以确保组件在禁用状态下显示正确。
• 通过调整 Storybook 的状态，演示了如何动态切换 orientation 属性，并展示了组件的交互效果。

4. 问题排查

• 修复了默认 flex-col 导致布局方向不变的问题。
• 确保了横向排列时标签和开关的水平对齐，以及组件在不同方向下的流畅切换。

视频中为 Switch 组件引入了关键的交互属性，并通过 Storybook 展示了不同状态下的效果。若有任何疑问或需要进一步帮助，请随时提出。

[WangShuXian6]

13 - 模态框 (Modal)

13.1 - 创建 Modal 组件

在本视频中，我们开始开发模型弹出框 (Modal Popup) UI 组件，以下是主要内容的概述：

1. 组件创建

• 在组件文件夹中创建了一个 Modal 文件夹，并生成了主文件 index.tsx。
• 在该组件中定义了几个主要的 props，包括：
  • showModal：控制弹出框是否显示的布尔值。
  • onCancel：当点击关闭按钮时的回调函数。
  • footer：用于显示或隐藏弹出框底部的布尔值。
  • title 和 children：用于显示弹出框标题和内容。
• 如果 showModal 为 false，组件将直接返回 null，从而避免渲染。

2. Storybook 故事创建

• 创建了一个基本的 story，用于展示弹出框组件的基础内容和关闭按钮。
• 初始参数设置为 showModal 为 true，以便默认显示弹出框。
• children 设置为简单的字符串 "Modal Content"，可以替换为任何 HTML 内容。

3. 问题排查

• 在开发过程中，组件未能在 Storybook 中显示。通过重新启动 Storybook 服务来解决此问题。
• 最终成功加载了弹出框组件，并确认了其在 Storybook 中的正确显示位置。

4. 后续视频计划

• 在接下来的视频中，将继续完善此弹出框组件的模板和样式，包括实现居中显示、配置透明背景和控制尺寸等属性。

通过本视频的学习，我们搭建了模型弹出框组件的基础架构。在后续视频中，我们将继续改进组件，使其更具功能性和美观性。

13.2 - Modal 组件的 story 和 UI

在本视频中，我们继续为弹出框 (Modal Popup) UI 组件编写模板和样式。以下是关键步骤的概述：

1. 模板和按钮设置

• 首先，在 Storybook 的 stories 文件中创建模板函数 template，并引入按钮，用于触发弹出框。
• 当用户点击按钮时，设置 showModal 状态为 true 以显示弹出框。
• 按钮样式设置为 outline 变体，并使用中等圆角边框。

2. 样式设置

• 在弹出框中设置了主容器样式，以全屏模式覆盖背景。使用 position: absolute 和 inset: 0 实现，并将背景颜色设为半透明黑色 (透明度 20-30%)。
• 弹出框内容居中显示。设置父容器为 flex 布局，并使用 items-center 和 justify-center 实现水平和垂直居中。

3. 弹出框内容

• 主弹出框内容被放置在一个白色背景、带阴影和圆角的 div 中，并设置了内部间距。
• 标题和关闭按钮位于弹出框内容的顶部。标题为 h1 标签，显示在左侧，右侧显示一个关闭图标，用户可以通过点击图标关闭弹出框。
• 引入了 X 图标作为关闭按钮，添加 cursor-pointer 类名，以便图标显示为可点击状态。
• 内容部分为 children 元素，接受字符串或 HTML 元素，确保弹出框可以包含多种内容。

4. 尺寸调整

• 根据 size 属性 (小、中、大) 来动态调整弹出框的宽度。small 显示为 1/4 屏宽，medium 为 1/2 屏宽，large 为 3/4 屏宽。
• 默认尺寸设为 medium，并确保在故事文件中配置该默认值。

5. 后续视频计划

• 下一步计划在弹出框中添加页脚区域 (footer)，并配置确认和取消按钮。

通过本视频，我们实现了弹出框组件的模板和基础样式。在下一步中，将继续改进页脚部分，使弹出框更具功能性和实用性。

[WangShuXian6]

14 - 标签页 (Tabs)

14.1 - 创建 Tabs 组件

本视频中，我们开始构建一个标签 (Tabs) 组件。以下是主要的步骤：

1. 组件设置

• 创建了 Tabs 组件的文件和结构，并定义了接口 TabsProps。
• 该组件接受以下属性：
  • tabsData：包含多个对象的数组，每个对象代表一个标签页，包含 title 和 content。
  • activeTab：表示当前活动的标签页索引。
  • onTabChange：用于在标签页切换时更新活动标签。
  • disabledTabIndexes：包含禁用标签页索引的数组。
• 通过将标签页数据和状态放在一个对象数组中，可以更方便地管理标题和内容。

2. 基础故事的构建

• 使用 Storybook 创建 tabs.stories.tsx 文件来编写测试案例。
• 通过 tabsData 定义了三个基本标签页内容，分别为 tab1、tab2 和 tab3。
• 创建了一个模板函数 template，其中包含状态变量 activeTab 和 setActiveTab。
• 该模板通过 setActiveTab 函数处理标签切换，将 activeTab 传递给组件并更新标签页显示。

3. 下一个视频的计划

• 下一步将继续完善 Tabs 组件的样式，使其更具交互性和视觉效果，包括处理禁用标签页的样式和动态内容切换。

这个基础结构为标签组件的样式和功能增强打下了良好的基础，后续步骤将进一步提升其可用性和用户体验。

14.2 - Tabs 组件的 UI 和 story - 第 1 部分

本视频中，我们为标签组件 (Tabs) 添加了样式。以下是具体步骤：

1. 显示标签名称

• 将所有标签名称以 flex 布局显示，并在每个标签之间增加 gap 5。
• 使用 tabsData 循环遍历标签并渲染每个标签的标题。
• 为标题设置了初始样式，如 text-sm 和 text-primary。

2. 标签边框样式

• 在标签名称容器的底部增加了一条浅灰色的边框，以区分标签区域。
• 为活动标签增加了一个较粗的底部边框 (如 border-primary)，并通过条件渲染来控制活动标签的颜色和边框宽度。

3. 点击切换标签

• 添加 onClick 事件，在点击标签时更新 activeTab 值，使得该标签成为活动标签。
• 使用 onTabChange 函数进行切换，成功地实现了标签的切换效果。

4. 文本颜色更新

• 非活动标签的文字颜色为浅灰色 (如 text-gray-500)，只有活动标签具有主色。
• 通过 classNames 函数，动态切换标签的文本颜色和样式。

5. 内容显示

• 在标签容器的下方显示对应标签的内容 (tabsData[activeTab].content)，并确保每次切换时展示正确的内容。
• 添加 mt-5 用于控制内容与标签间的间距。

6. 主题颜色更新

• 在 theme provider 中更改主色以验证样式更新。
• 本视频使用了橙色作为主色，成功应用到了标签组件上。

下一步，我们将继续完善标签组件的功能，并为禁用的标签添加样式。

14.3 - Tabs 组件的 UI 和 story - 第 2 部分

在本视频中，我们实现了标签组件 (Tabs) 的禁用功能，并增加了垂直布局。以下是具体步骤：

1. 禁用标签

• 我们在标签的故事 (Story) 中定义了一个 withDisabledTabs 示例，禁用某个指定的标签（如第二个标签）。
• 在组件中添加了条件样式，当标签被禁用时，将其透明度设置为 50%，并将鼠标指针样式设为“不允许”。
• 使用 pointer-events: none 阻止禁用标签的点击事件，使其不可点击。

2. 实现垂直标签

• 添加了一个 orientation 属性，默认情况下标签为水平排列。
• 为标签的父容器增加条件样式：若 orientation 为 vertical，则使用 flex-row，否则使用 flex-column。
• 在垂直布局中，标签名显示在左侧，内容显示在右侧。通过调整 justify-start 和 border-right 来设置标签项和内容的对齐方式。
• 同时调整活动标签的边框样式为右侧边框，以匹配垂直布局。

3. 布局与样式的调整

• 对标签项的样式进行条件渲染，确保垂直布局时标签项在视觉上有分隔，使用 border-right 代替 border-bottom。
• 在横向与纵向布局之间添加统一的 gap 间距，使其在不同的布局下保持一致的视觉效果。
• 对于内容区域，移除了顶部多余的空白，并增加了适当的 padding 值，以优化组件的间距和对齐效果。

4. 小调整

• 对标签和内容之间的间距、边距进行细微调整，以确保视觉效果美观和一致。
• 检查所有状态的效果（包括基本、禁用和垂直状态）以确保一切正常显示。

总结

通过本次视频的讲解，我们顺利实现了标签的禁用功能和垂直排列。我们还优化了组件的样式，使得各个布局效果在视觉上清晰直观。下个视频中，我们将继续完善标签组件的其他功能。

[WangShuXian6]

15 - 警告框 (Alert)

15.1 - 创建 Alert 组件

在本视频中，我们实现了一个基础的 Alert 组件，用于向用户显示信息性消息（如成功、失败、警告或错误提示）。以下是主要步骤：

1. 创建 Alert 组件

• 在 components 目录下新建 Alert 组件文件 (index.tsx)。
• 定义组件的属性接口 AlertProps，包括：
  • message: 字符串，必填，表示警告信息。
  • type: 枚举类型，包括 success, error, warning, 和 info，表示消息类型。
  • description: 字符串，选填，作为消息的详细描述。
  • showIcon: 布尔值，表示是否显示图标（可选）。

2. 编写基本 Storybook 示例

• 创建 Alert.stories.tsx 文件，添加一个基础信息提示示例。
• 设置组件的默认属性（如消息内容、类型和描述），并在 Storybook 中展示 Alert 组件。

3. 实现基础样式

• 为不同类型的 Alert 添加相应的背景颜色和边框颜色，采用基于条件的 className 函数进行样式控制：
  • 信息提示（info）：蓝色背景和边框。
  • 成功提示（success）：绿色背景和边框。
  • 警告提示（warning）：黄色背景和边框。
  • 错误提示（error）：红色背景和边框。
• 使用 padding 和 rounded 样式，确保每个 Alert 消息有适当的边距和圆角样式。
• 设置字体颜色为黑色，并适当调整标题和描述的字体大小和样式，以保证所有类型的 Alert 显示一致。

4. 对 Alert 组件进行微调

• 设置 bg-opacity，以控制背景色的透明度，使其与内容形成适当的对比度。
• 根据消息类型不同，调节消息的 font-size 和 font-weight，以确保用户可以清晰区分标题和描述。
• 将标题设置为 text-sm，描述设置为 text-xs，并根据需要设置适当的加粗样式。

总结

通过本次视频的讲解，我们实现了一个基础的 Alert 组件，涵盖了消息类型的多样化显示及基本样式。下个视频中，我们将继续为组件添加更多的故事示例，以进一步完善其功能和可用性。

15.2 - Alert 组件的 story - 第 1 部分

在本视频中，我们继续完善了 Alert 组件的不同示例，添加了多种警报类型（成功、错误、警告）以及图标支持。以下是步骤总结：

1. 定义不同类型的警报

• 在 Alert.stories.tsx 中添加了四种类型的警报（info、success、error 和 warning）。
• 每种类型对应不同的背景和边框颜色，以更好地传达信息：
  • 信息提示：蓝色
  • 成功提示：绿色
  • 错误提示：红色
  • 警告提示：黄色

2. 配置背景透明度

• 调整了背景透明度值，将 bg-opacity 设为 10，以确保颜色看起来不太浓重，同时保留了边框颜色的清晰度，使背景与内容形成适当对比。

3. 添加图标支持

• 为 Alert 组件添加了图标支持，基于警报类型选择合适的图标：
  • 信息提示：信息图标
  • 成功提示：勾选图标
  • 错误提示：禁用图标
  • 警告提示：警告图标
• 使用 lucid-react 图标库，为每个警报类型选择合适的图标。通过 showIcon 属性控制图标的显示。

4. 实现图标条件渲染

• 在 Alert 组件中，通过条件渲染实现图标的显示，只有在 showIcon 设置为 true 时才渲染对应的图标。
• 对于不同的警报类型，设置了相应的 textColor 和图标大小，以确保整体外观的一致性。

5. 示例调整

• 为 Storybook 示例添加了“带图标”和“无图标”两个版本，以便用户能够看到两种使用场景。
• 调整了图标的颜色和间距，使其更贴合组件样式，并在 text 中增加 gap 和 item-center 等样式，以确保图标和文本之间有合适的空间。

总结

至此，我们已完成了 Alert 组件的不同类型和图标功能。在下个视频中，我们将添加关闭按钮的功能，使用户可以手动关闭警报消息。希望您喜欢这个演示！

15.3 - Alert 组件的 story - 第 2 部分

在本视频中，我们实现了 Alert 组件的关闭功能。以下是具体步骤：

1. 添加关闭属性

• 在 Alert 组件的属性中添加 closeable 作为布尔类型的属性。默认值为 false，这样用户可以选择是否需要显示关闭按钮。

2. 修改 Storybook

• 在 Alert.stories.tsx 中的一个示例中将 closeable 设置为 true，确保可以在故事中看到该功能。

3. 显示和隐藏组件

• 在 Alert 组件内部，添加了 showAlert 状态和 setShowAlert 函数。
• 当 showAlert 为 true 时，组件正常显示；当它为 false 时，组件不会渲染。
• 如果 closeable 属性为 true，在标题旁边添加了一个关闭按钮（一个 X 图标）。

4. 实现关闭功能

• 将关闭图标设置为 cursor pointer，并在点击时调用 setShowAlert(false)，从而隐藏警报。
• 使用条件渲染确保只有在 closeable 为 true 的情况下才会显示关闭图标。

最终效果

用户现在可以通过点击关闭图标来隐藏警报组件，从而实现了更好的用户交互。下一个步骤就是对这个功能进行全面测试并调整样式以确保一致性。

这就是 Alert 组件的关闭功能实现，感谢观看！

[WangShuXian6]

16 - 加载动画 (Spinner)

16.1 - 创建 Spinner 组件

在本视频中，我们实现了 Spinner 组件。以下是实现步骤：

1. 创建 Spinner 组件

• 在 components 文件夹中创建了 Spinner 组件文件 Spinner.tsx。
• 添加了 spinnerProps 接口，定义了 size（大小）、color（颜色）等属性，用于自定义 Spinner。

2. 创建故事文件

• 在 Spinner.stories.tsx 文件中为组件创建了不同的故事，以展示不同尺寸和颜色的 Spinner（如 small、medium 和 large）。

3. 实现样式和动画

• 使用 classNames 库添加条件样式，根据 size 值设置高度、宽度和边框大小。
• 设置了旋转动画 animate-spin 和圆形 rounded-full 样式，使其看起来像一个旋转的圆圈。
• 为边框颜色应用条件样式，其中一个边缘设置为透明 border-t-transparent，以便形成旋转效果。

4. 调整颜色和宽度

• 使用 style 属性设置 borderColor，使其可以动态变化颜色。
• 增加了 borderWidth 设置，通过调整不同尺寸的 Spinner 边框宽度来实现视觉差异。

5. 检查并测试

• 运行 Storybook 查看不同配置下的 Spinner 效果，确保 color 和 size 正常工作。
• 修复了一些样式问题并重新加载页面以确保显示正确。

现在，Spinner 组件可用于显示加载动画，并且可以根据需要定制尺寸和颜色。感谢观看！

16.2 - Spinner 组件的 story

在本视频中，我们为 Spinner 组件增加了辅助文本功能，用于在加载指示器下方显示文本，例如 "loading products"、"loading categories"、"loading users" 等。以下是实现步骤：

1. 添加文本属性

• 在 spinnerProps 中添加一个可选的 text 属性，用于传递要显示的加载文本。
• 设置默认值为空字符串，以便在没有提供文本时不会显示任何内容。

2. 更新组件布局

• 在 Spinner 组件中，添加一个 span 元素，用于显示辅助文本。
• 使用 Tailwind CSS 类 text-gray-500 和 text-sm 设置文本的颜色和大小。
• 为了在 Spinner 和文本之间增加空间，将外部容器设置为 flex-col 布局，并使用 gap-1 增加适当的间隔。

3. 测试功能

• 在 Spinner.stories.tsx 文件中添加示例故事，传递不同的 text 值，如 "loading products"，来测试 Spinner 的显示效果。
• 确认文本在 Spinner 下方正确显示，并根据需要修改颜色和间距，使其更符合设计需求。

通过这些步骤，我们的 Spinner 组件现在支持在指示器下方显示自定义文本，非常适用于不同的加载场景。感谢观看！

[WangShuXian6]

17 - 弹性容器 (Flex Container)

17.1 - 创建 Flex 容器组件

在这个视频中，我们实现了 Flex 容器的对齐和显示属性功能，帮助我们更灵活地控制组件的布局。以下是实现过程的概要：

1. 引入并配置 classNames 库

• 引入 classNames 库，并设置 Flex 容器的基本类名。
• 默认情况下，组件使用 flex 布局。

2. 配置方向属性

• 添加一个 direction 属性，以控制 Flex 容器的方向：
  • 如果 direction 是 "column"，添加 flex-col 类，否则默认使用行布局。

3. 水平和垂直对齐

• 使用 justify-start、justify-center 和 justify-end 类控制水平对齐。
• 使用 items-start、items-center 和 items-end 类控制垂直对齐。
• 水平对齐属性应用于 row 布局，垂直对齐属性应用于 column 布局。我们根据 align 和 justify 属性的值条件性地添加这些类。

4. 配置 Gap 属性

• 添加一个 gap 属性并将其应用到样式中，设置组件之间的间距。

5. 边框调试

• 添加一个 showBorder 布尔属性，用于在 Flex 容器和子项上显示边框，便于观察布局和对齐效果。

6. 测试属性效果

• 验证组件在不同方向、对齐方式和 gap 设置下的表现。确保每个属性和样式在 Flex 容器内都能正确响应。
• 提醒：当 Flex 方向为 column 时，justify 属性将影响垂直方向，而 align 属性将控制水平方向的对齐。

这样，我们就成功地实现了一个可以在不同方向和对齐方式之间切换的灵活布局组件。希望这个视频对你有所帮助！

17.2 - Flex 容器组件的 story

在这个视频中，我们探讨了 Flex 容器的对齐和显示属性的实现步骤。以下是要点总结：

1. 引入和设置 classNames 库

• 首先，引入 classNames 库，将 flex 设置为基础类名，因为组件本身是一个 Flex 容器。
• flex 类始终存在，无论传入的 props 是什么。

2. 方向设置

• 定义 direction 属性来控制 Flex 容器的方向：
  • 当 direction 为 "column" 时，使用 flex-col 类，否则默认方向为行。
• 不必显式地为行布局指定 flex-row 类。

3. 对齐设置

• 使用 justify-start、justify-center 和 justify-end 类来控制水平方向上的对齐。
• 使用 items-start、items-center 和 items-end 类来控制垂直方向上的对齐。
• 水平方向对齐适用于 row 布局，而垂直对齐适用于 column 布局。

4. 间距 (Gap) 属性

• 接收 gap 属性，并通过样式直接应用到组件中，以控制元素间的间距。
• 这可以为每个子元素之间提供一致的间距。

5. 边框调试

• 增加 showBorder 布尔属性，便于调试时观察布局效果。
• 当 showBorder 为 true 时，为容器及其子元素添加灰色边框。

6. 测试对齐和间距效果

• 验证了组件在不同方向、对齐和间距设置下的效果。
• 如果方向为 column，则 justify 用于控制垂直对齐，而 align 用于水平对齐。

该视频展示了如何配置和测试 Flex 布局的对齐方式，帮助我们灵活地控制组件内容的布局。

[WangShuXian6]

18 - 文档编写与部署

18.1 - 为 story 添加文档

在这个视频中，我们介绍了 Storybook 的 autodocs 功能及其在组件文档中的应用。以下是主要内容总结：

1. Autodocs 功能概述

• autodocs 功能可以根据编写的 stories 自动生成组件文档，将所有变体（variants）集中在一个页面上。
• 通过使用 autodocs，用户可以一目了然地查看组件的各个变体，而不需要逐个打开不同的 story。

2. 如何启用 Autodocs

• 在组件的 .stories 文件中，导出 component 和 title。
• 添加 tags 属性，将其设置为包含 "autodocs" 的字符串数组。
• Storybook 会读取这些 stories，并在组件目录下生成一个名为“docs”的新项，集中显示所有变体及其文档。

3. 文档内容

• 在文档页面中，用户可以查看组件的基本信息、代码示例和 props。
• 点击“显示代码 (show code)”可以查看每个变体的代码片段，了解如何使用特定的属性值。
• autodocs 还会显示每个 prop 的详细信息，例如类型、默认值以及控制说明等。

4. 在所有组件中使用

• 你可以将 autodocs 添加到其他组件中，例如 Button、Input、Spinner、Tabs 等，生成它们的集中文档。
• 对于较大的组件，autodocs 特别有用，因为它可以清晰地展示变体的用法，比如传递 Tabs 数据、激活选项卡、实现图标或加载效果等。

5. 实际操作示例

• 视频中演示了将 autodocs 功能应用于多个组件，并展示了生成的集中文档页面。
• 通过 show code，用户可以看到组件的实现细节，如如何传递图标和其他参数。

Autodocs 功能大大提高了组件文档的可读性和用户体验，非常适合更复杂的 UI 组件。

18.2 - 将 Storybook 应用部署到 Chromatic

在本次视频中，我们讲解了如何将 Storybook 应用部署到云服务 Chromatic 上，以便轻松分享和维护组件库的文档。以下是关键步骤和内容的总结：

1. Chromatic 简介

• Chromatic 是一种专为 Web UI 提供视觉测试和审查的云服务，由 Storybook 团队开发和维护，专门用于 Storybook 应用的部署。
• 用户可以使用 Chromatic 轻松将 Storybook 生成的静态文档发布到云端，从而获得一个可访问的 URL 来分享文档。

2. 注册和登录 Chromatic

• 在 Chromatic 注册账户，或使用现有账号登录。
• 登陆后，进入 Chromatic 仪表盘，你会看到你已经部署的项目，或者如果是第一次使用，界面将提示创建新项目。

3. 创建和部署项目

• 创建一个新项目并连接到你的 GitHub 账户，选择要部署的项目。
• 先构建 Storybook 项目：在终端运行 npm run build-storybook 来生成静态文档。
• 将 storybook-static 文件夹推送到 GitHub，并确保项目的 .gitignore 文件中忽略 node_modules 和其他不必要的文件夹。
• 在 Chromatic 仪表盘中选择项目并执行剩余步骤，包括安装 Chromatic CLI 并使用生成的项目 token 进行部署。运行命令 npx chromatic --project-token=<your-token> 来启动 Storybook 的云端部署。

4. 部署完成

• 部署过程完成后，Chromatic 会生成一个包含所有组件和 stories 的在线文档页面。
• 你可以点击项目名称查看详细内容，或点击“Show Storybook”获取 Storybook 的部署 URL。这个 URL 可以分享给团队成员或其他人，以便访问组件库文档。

5. 测试和分享

• 复制生成的 URL，在浏览器（包括无痕模式）中测试访问，确保文档加载正常。
• 完成后，即可通过该 URL 与他人分享组件库的在线文档。

通过这几个步骤，Chromatic 让我们能够快速部署和分享组件库的 Storybook 文档，简化了组件库的可访问性和可维护性。