# sun-ui

**Repository Path**: tmaofu/sun-ui

## Basic Information

- **Project Name**: sun-ui
- **Description**: 参考 antd，semi-design实现自己的React组件库，提升组件开发能力。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-01
- **Last Updated**: 2025-11-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 启动组件库文档

```bash
pnpm start
```

## 打包所有的包：ui组件库，图标库，工具库

```bash
pnpm build
```

## 打包组件库在 play 中进行测试

打包组件库：

```bash
cd components

pnpm build
```

在`play/src/App.tsx`中进行测试：

```tsx
// 组件库：
// 可以按需导入 js，但是会引入所有的组件 css 样式
// import { Button } from '@mao-fu/sun-ui';

// 可以按需导入组件的 css 和 js
import '@mao-fu/sun-ui/app.css'; // 必备的css
import Button from '@mao-fu/sun-ui/cps/button'; // 按需导入组件 + 组件css

// 图标库：
import Icon, { ArrowDownOutlined } from '@mao-fu/sun-ui-icon';

function App() {
  return (
    <div>
      <Button type="primary" theme="solid">
        按钮
      </Button>
      <hr />
      <Icon rotate={45}>icon</Icon>
      <hr></hr>
      <ArrowDownOutlined
        size="large"
        style={{ color: 'red' }}
        spin
      ></ArrowDownOutlined>
    </div>
  );
}

export default App;
```

运行 play 项目：

```bash
pnpm play
```

## 包名称的约定

工作空间中的包名使用 `@sun-ui/` 开头，比如，
打包工具库的包名为：`@sun-ui/build`

最终要发布到npm上的包名使用 `@mao-fu/` 开头，比如，
组件库的包名为：`@mao-fu/sun-ui`,
图标库的包名为：`@mao-fu/sun-ui-icon`,
工具库的包名为：`@mao-fu/sun-ui-util`,

## 注意事项

修改了 @mao-fu/ 开头的包中的源代码后，需要先打包构建该包，才能在其他使用该包的项目中生效。
如果需要监听 @mao-fu/ 开头的包中的源代码，在代码变化后重新打包构建，可以在该包的目录中运行命令：pnpm watch。

## tips

命令 `pnpm -r run build` ，这将从工作空间中每个包 package.json中的“scripts”中运行一个对应的 `build` 命令。如果包没有该命令，则跳过该命令。如果所有包都没有该命令，则该命令将失败。
默认情况下，pnpm 会根据子包的依赖拓扑排序，按顺序对子包执行命令，以避免在构建某个包的时候，出现子依赖的构建产物未生成的问题，进而引发比如类型错误等问题。另外如果两个子包没有依赖关系，pnpm 会并发进行构建。