UI 组件库是一组现成的 UI 组件，例如按钮、输入、对话框等。它们用作布局的构建块。由于它们的模块化特性，我们可以以多种不同的方式排列组件以实现独特的效果。每个库都有独特的外观和感觉，但它们中的大多数都提供主题，并且它们的组件是可定制和可重用的。 我将引导您完成创建自己的 UI 组件库的过程：

  1. React
  2. TailwindCSS
  3. storybook
  4. NPM

创建一个新的 React 项目并安装 TailwindCSS

npx create-react-app storybook-postcss-tailwind

初始化 TailwindCSS。

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
  • 在tailwind.css文件中，添加以下行：
@tailwind base;
@tailwind components;
@tailwind utilities;

使用 npx创建tailwind.config.js。 --full与 Tailwind 内部使用的默认配置文件匹配的选项脚手架文件。

npx tailwindcss init --full
  • 在tailwind.config.js文件中，添加以下配置purge:[]：
"./src/**/*.{js,ts,jsx,tsx}"}

安装postcss-cli并创建postcss.config.js文件。

npm install -D postcss-cli
  • 在 postcss.config.js 中，添加以下内容：
        module.exports = {
        plugins: {
            tailwindcss: {},
            autoprefixer: {},
        },
    };

安装 Storybook 并创建一个新组件

使用以下命令初始化 Storybook：

npx sb init

创建示例组件src/lib/components/Button/Button.js，并带有一些样式：

    import React from ‘react’
    import PropTypes from 'prop-types'

    const Button = ({ label }) => {

        return (
            <div>

                <button 
                className='bg-red-500 text-white text-xl py-4 px-8 rounded-md'>{label}</button>

            </div>
        )
    };

    Button.propTypes = {
    label: PropTypes.string.isRequired
    };

    Button.defaultProps = {
    label: 'Button'
    };

    export default Button

src/lib/components/Button/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 Default = Template.bind({})
    Default.args = {
        label: 'Button'
    };
  • 在内部src/lib/index.js，添加以下行：
    import './styles/main.css';
    import Button from './lib/components/Button/Button'

    export { 
        Button 
    };

配置package.json和其他依赖项

npm i -D cross-env @babel/cli @babel/preset-env @babel/preset-react

创建babel.config.js文件：

    module.exports = function (api) {
    api.cache(true);

    const presets = [ "@babel/preset-env", "@babel/preset-react" ];
    const plugins = [ "macros" ];

        return {
            presets,
            plugins
        };
    }

为避免任何 React 冲突，您可以将以下 React 依赖项移动到对等依赖项：

"peerDependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3"
}
  • 在里面package.json，为 TailwindCSS 添加以下脚本：
    "scripts": {
        "build:tailwind": "postcss src/lib/styles/tailwind.css -o src/lib/styles/main.css",
        "build:tailwind-prod": "cross-env NODE_ENV=production postcss src/lib/styles/tailwind.css -o src/lib/styles/main.css"
    },
  • 为了准备生产，我们需要在顶部添加以下脚本package.json：
    "private": false,
    "main": "dist/index.js",
    "module": "dist/index.js",
    "files": [
        "dist",
        "README.md"
    ],
  • 仍然在里面package.json，在下面添加以下内容scripts：
    "scripts": {
        "clean": "rimraf dist",
        "compile": "npm run clean && cross-env NODE_ENV=production babel src/lib/ --out-dir dist --copy-files"
    },

为生产构建和发布到npm

为生产构建tailwindcss：

npm run build:tailwind-prod
  • 为生产编译组件：
npm run compile
  • 如果您没有npm帐户，请创建一个。
  • 执行以下命令：
npm login
  • 执行以下命令：
npm publish

*就是这样！*我们设法使用 Storybook 和 TailwindCSS 获得了一个简单的 UI 库。这是如何创建 UI 组件库的一种选择。从这里您可以：

  1. 添加更多组件
  2. 为组件创建故事
  3. 为组件创建测试用例
  4. 以及更多…