@a-小世界/小世界设计系统
小世界设计系统的Web组件.
此系统使用 半径 以确保组件无障碍和自定义.
安装
pnpm add @a-little-world/little-world-design-system
使用量
import { Button, Text } from '@a-little-world/little-world-design-system';
export default function App() {
return (
<Button variant="primary">
<Text>Hello World</Text>
</Button>
);
}
字体
通过在 HTML 文件中列入所需的字体,确保您有可用的字体 :
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Signika+Negative:wght@300;600;700&family=Work+Sans:wght@700&display=swap"
rel="stylesheet"
/>
地方发展
QQ 重要: 从根来构建
总是从单列波的根来构建和发布,从不从单个包目录来构建和发布.
✅ 正确( 从根) :
pnpm build:web
pnpm --filter=@a-little-world/little-world-design-system publish
❌ 不正确( 从软件包目录) :
cd packages/web
pnpm run build
pnpm publish # This will break workspace dependencies!
快速启动
从一心起:
# Build the web package
pnpm build:web
# Start Storybook for development
pnpm storybook:web
# Build Storybook for production
pnpm storybook:web:build
发展 工作流量
- 进行修改 到网络组件
- 构建软件包 - 说吧
pnpm build:web - 故事书中的测试 - 说吧
pnpm storybook:web - 预览更改 - 在故事书中查看组件,http://localhost:6006
手动设置
如果您喜欢在网络包目录中直接工作 :
cd packages/web
pnpm install
pnpm run build
pnpm run storybook
故事书
网页包包括用于组件开发和测试的故事手册:
# From root
pnpm storybook:web
# Or from web package directory
cd packages/web
pnpm run storybook
大楼
# Build the web package
pnpm build:web
# Or from the web package directory
cd packages/web
pnpm run build
出版
自动释放(建议)
理想的情况是,释放应自动化,并通过合并到回收品的主要分支来处理.
见 Root README 中的版本和发布部分 以获取关于使用变换器自动发布进程的详细信息.
自动工作流程将:
- 检测软件包中的版本变化
- 发布到 GitHub 软件包注册
- 创建带有更改日志信息的 GitHub 发布
- 自动处理所有出版步骤
手动发布( Fallback)
如果需要手动发布( 不推荐):
# Ensure you're authenticated to GitHub Packages
pnpm login --registry=https://npm.pkg.github.com
pnpm build:web
pnpm --filter=@a-little-world/little-world-design-system publish
说明:手工出版绕过自动更改日志生成和发行管理. 尽可能使用自动进程.
依赖关系
此软件包取决于 :
@a-little-world/little-world-design-system-core- 核心设计标志和公用事业react- 反应框架styled-components- 造型图书馆@radix-ui/react-*- Radix UI原始的无障碍软件
抓到他们了! 从网络到本土...
在原始状态中, 设定时 minWidth 在一个组件上,它不会自动扩展 超过这个宽度 根据内容,它会像它在网络上。 React Industrial的弹性框执行对于尊重明确的维度更为严格.
建议: 在大多数情况下:
- 使用
flex: 1如果您想要一个组件来填充其父部分 - 使用
max-width以限制大小 - 否则使用明示
width并管理内容
捐款
检查 捐款准则。 。 。 .
版本和发行
此软件包使用 更改 用于版本管理。 关于发行过程的详细信息,请参见root README.
说明: 下述人工放出过程被贬值. 使用变换器代替 .
折旧的人工释放程序
为了发布这个软件包的新版本:
将版本跳入package.json运行pnpm install以更新相关发布分支中的 pnpm-lock.yaml.确保您的释放分支经过测试、批准并合并为main。 。 。 .转到"发布稿" 节 {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你还得去吗.创建一个与新版本相关的标签 .在标题中包含发行版本并给出适当的描述点击“ publish release” 按钮, 这将触发将发布新版本到 npm 的 github 动作 .