设计系统
真相来源： https://zeroheight.com/239aea73f
安装
为了让你的应用的设计系统功能齐全，你需要
- 安装它
npm i --save -E @stordata/design-system - 添加样式在你的
<App>->import '@stordata/design-system/style.css'; - 添加一个
<DSProvider>对你<App>-><DSProvider><App /></DSProvider> - 可选地添加主题到您的
<DSProvider>重载默认属性 - 现在您已经准备好享受我们强大的DS组件的美丽和力量了！
可选
如果你想用 DSDataGrid，一个有样式的MaterialUI 数据表格 组件时，还请安装以下依赖项
npm i --save -E @mui/material @mui/x-data-grid-premium @emotion/react @emotion/styled
使用设计系统
DSProvider
在使用任何设计系统组件之前，需要在类中呈现应用程序 <DSProvider> 组件。
该组件为所有设计系统组件提供主题，以及一些其他实用功能，如定位、响应等。
import DSProvider from '@stordata/design-system/DSProvider';
export default function App() {
return (
<DSProvider>
<YourApp />
</DSProvider>
);
}
提供者接受 locale 由一些呈现本地化文本的组件使用的Prop。它也接受 theme 道具
您可以使用它来定制设计系统组件的外观和行为。更多细节见下文。
主题
这个 DSProvider 组件可以给定 Theme 对象进行定制
- 所有组件的默认属性
- 颜色模式，调色板，语义符号，排版等。
- 动画持续时间和缓动功能
- 响应断点、间距和其他一些与布局相关的设置
默认样式
要更改特定组件的默认样式，请在应用程序中包含一个针对该组件的样式表：
.ds.ds-stack {
flex-direction: row;
}
类名的约定是
- 所有的设计系统都有
ds类 - 全设计系统 组件 有
ds-component类 - 每个特定的组件都有一个
ds-<name>类,<name>组件的名称是小写的，蛇形的吗
灯泡：建议始终使用 .ds 上课，以防万一。
动态样式
所有组件都支持 sx 道具，这是一个增强 style 道具添加一些功能：
- 对所有属性的响应性支持。请参见下面的示例。
- 这个
mode属性，可用于覆盖单个组件的颜色模式（例如：在深色表面上呈现中性按钮）。
通过对象表示法支持响应性，其中键是断点，值是要使用的属性值
当相应的断点处于活动状态时。以移动优先的方式，从最小到最大地应用断点。
下面的例子将根据屏幕大小改变文本颜色：
<DSStack
sx={{
color: {
xs: 'red',
sm: 'blue',
md: 'green',
lg: 'yellow',
xl: 'purple'
}
}}
>
Responsive text color
</DSStack>
<DSButton sx{{ mode: 'dark' }}>
This button renders in dark mode
</DSButton>
约定
实现
组件应该
- 呈现原生HTML元素，或者
- 呈现由BaseUI提供的组件
所有组件都支持 render 来自BaseUI的道具在渲染组件时，该道具被转发到根组件
组件，或通过 useRender 钩子，允许进一步定制。
所有组件都支持一组公共属性：
- id
- 类名称
- 风格
- ref（一个React ref）
在实现新组件时，您应该
- 为组件props编写一个TypeScript接口，扩展常用属性和
HTMLAttributes<T>（或子接口）来继承默认的HTML道具。 - 使用
useMergeProps将来自主题的默认属性与传递给组件的属性合并。 - 中添加一个部分
Theme为新组件的默认道具设置接口，并选择默认值。
道具
除了特定于组件的道具(比如 variant， size等)，所有组件都应该支持根元素上的扩展道具。
自动处理 useRender 在呈现原生HTML元素时，但需要为BaseUI组件手动完成。
这允许所有的原生HTML道具(如 style， onClick等)被转发。
参考文献
所有组件都接受 ref 应该经常使用。要么
- 转发到BaseUI组件（它们都接受refs），或者
- 给
useRender钩子在渲染原生HTML元素时。看到 https://base-ui.com/react/utils/use-render#merging-refs
样式
样式化是使用每个组件的CSS模块来完成的。
通常，所有CSS模块都应该以根类开始 .<component name> 它被应用于组件的根元素。
键入常用样式属性时，例如 color 或者 size请始终为属性定义一个TypeScript类型，
并在组件道具界面中使用它。如果支持与通用值相同的值集，则可以使用类型别名。
例如
export type DSMyComponentSize = ComponentSize;
分级
在适用的情况下，组件应该支持 size 属性，可以设置为小、中或大。默认大小为中。
在组件的CSS模块中， .small， .medium 和 .large 应该定义类，以便为每种大小应用适当的样式。
在呈现组件时，使用 classNames 工具来应用适当的大小类 size 财产。
灯泡：只支持可用尺寸的一个子集是可以的。
变体
在适用的情况下，组件应该支持 variant 属性，该属性可设置为主要、次要或第三。默认的变量是primary。
在组件的CSS模块中， .primary， .secondary 和 .tertiary 应该定义类，以便为每个变体应用适当的样式。
在呈现组件时，使用 classNames 的基础上应用适当的变体类 variant 财产。
：bulb：只支持可用变体的一个子集是可以的。
行高
一般来说，不要重写 line-height CSS属性。它使垂直对齐变得困难，尤其是在文本旁边的图标。
在需要的时候，使用重写 DSTypography 在变体上设置自定义行高。
测试
要做测试，确保你有 码头工人 第一次安装。
运行 docker compose up -d 启动所需的容器，然后 npm test 来做Vitest测试
报道
运行 npm run coverage 用代码覆盖率运行一次测试（V8）。它打印摘要并在其中写入HTML报告 coverage/.
在CI中，覆盖率不能低于 main ，其报道报告可在网上浏览 https://coverage.stordata.dev/stordata/design-system/
更新Chromium容器以匹配最新的剧作家版本
拉出无浏览器的图像
docker pull ghcr.io/browserless/chrome:v2.xx.x
把它标记在我们的注册表上
docker tag ghcr.io/browserless/chrome:v2.xx.x docker.stordata.fr/docker.io/chrome:v2.xx.x
从我们的注册表中取出它来本地测试，如果现在一切都修复了
docker push docker.stordata.fr/docker.io/chrome:v2.xx.x