克-反应-组件
CRUK设计系统的回放执行只使用回放HTML和CSS. 包含所有组件的下列主题
- 克鲁克
- 法语
- SU2C 双管
- 鲍尔巴贝
查看故事书
cruk-react-inform- storybook site 演示所有组件及其不同的变体和主题: https://master.d28a8la187lo73.amplifyapp.com/ (中文(中国大陆) )
开始
添加 cruk- react- 组件及其对等的依赖关系 对您的 package.json 文件的反应、 反应大小和样式的组件 .
"dependencies": {
"react": "^19",
"react-dom": "^19"
}
之后 npm i @cruk/cruk-react-components --save,您可以从库中导入组件 :
// Ideally you would import the css on the top level entry point on you app
// because you only need to import this once
import "@cruk/cruk-react-components/lib/index.css";
import { Button } from "cruk-react-components";
const MyComponent = () => (
<div>
<Button />
</div>
);
以自定义样式扩展您的组件
使用样式道具
import { Button } from "cruk-react-components";
const MyComponent = () => (
<div>
<Button style={{ color: "#ff0000" }} />
</div>
);
使用自己的 css 类
让我们说,我们想要预留和使用组件上存在的API,我们想要添加我们自己的CSS类,但我们不想覆盖已经样式组件的CSS类 溶液很简单,因为每个组件 CSS 在导入索引时已经曝光
import "@cruk/cruk-react-components/lib/index.css";
总是跟随同样的命名对流
.component-{componentName}
举个例子
.component-button.component-link.component-text-field.component-textarea-field
因此,我们需要包括组件类 和我们新的CSS类
import { Button } from "cruk-react-components";
const MyComponent = () => (
<div>
<Button
appearance="primary"
className={["component-button", "my-other-class-name"].join(" ")}
/>
</div>
);
公用事业类
目前共有3个通用CCS类
color-propsspacing-propstext-props
此功能 CSS 类可以像这样使用
const MyComponent = () => (
<div className="color-props" data-bg-color="primary">
<Button
appearance="primary"
className={["component-button", "spacing-props"].join(" ")}
data-margin-bottom="s"
/>
</div>
);
颜色道具
此 CSS 类将在主题中取出名称颜色并将其应用到以下数据属性
data-color: 文本和 svg 颜色data-bg-color: 背景颜色data-border-color: 边框颜色
文本道具
CSS 类将选择命名字体权重( vlight, light, medum, 普通, 重) , 命名字体家族( 碱基, 按钮, 链接, 标题, 标签) 和每个主题指定的字体大小( xs, s, m, l, xl, xxl, xxl, xxl) 等主题, 以及数据属性之后的文字包, 外溢包等
data-word-break: 断字data-overflow-wrap: 溢出错误data-text-font-family: 使用命名字体类别设置字体家族data-text-weight: 使用名称权重类别设置字体权重, 匹配 HTML 常规data-text-size: 使用来自主题的命名字体大小设置字体大小
间距道具
此 CSS 类将设置以下命名的相距值为不同的相距 CSS 属性 . 名称间隔值为:
none:0; (中文(简体) );auto: 自动;xxxs: 0.25雷姆; / 4px / (中文(简体) )xxs: 0.5雷姆; / 8px / (中文(简体) )xs: 1rem; / 16px (中文(简体) )s: 1.5雷姆; / 24px / (中文(简体) )m: 2rem; / 32px (中文(简体) )l: 2.5雷姆; / 40px /xl: 3rem; / 48px (中文(简体) )xxl: 3.5雷姆;/ 56px /full:100%;
现有属性为:
data-margin: 所有边距data-margin-vertical: 上下边距data-margin-horizontal: 左右边距data-margin-top: 上边距data-margin-bottom: 下边距data-margin-left: 左边距data-margin-right: 右边距data-padding: 所有粘贴data-padding-vertical: 上下粘贴data-padding-horizontal: 左右绑定data-padding-top: 上贴data-padding-bottom: 垫底data-padding-left: 左侧粘贴data-padding-right: 右补丁
从V5和V6迁移到V7
样式组件已进入维护模式 .
- 第一阶段是使用HTML元素上的CSS变量和数据属性来进行它们,而不是使用"样式组件"主题和"主题提供".
- 第二阶段是将用Styled组件所写的组件转换为html和css模块并去掉Styled组件.
主题
所以,代替主题 这样
import { Button, crukTheme } from "cruk-react-components";
import { ThemeProvider } from "styled-components";
const MyComponent = () => (
<ThemeProvider theme={crukTheme}>
<Button/>
<ThemeProvider />
);
您只需要使用 html 元素 data-theme="cruk",具有数据主题的最内在元素将覆盖外包元素.
const MyComponent = () => (
<span data-theme="su2c">
<Button/>
<span/>
);
有主题依赖内容的组件
由于新的主题策略只影响CSS而不是内容,因此具有主题特定内容的组件现在拥有"主题名"的必备属性. 使用这些组件的应用程序必须输入此道具 。 下列组件需要主题Name prop :
- 有远见
- 页眉
- 页脚
- 用户锁定
- 套期报告*
* Modal是一个特殊的案例,它需要主题 命名道具是因为任何主题提供者都不会工作. Modals使用将元素置于全新html上下文的回放门户.
主题变量命名公约
因为主题名称现在来自 CSS 变量而不是主题对象, 主题名称是骆驼案例, 现在被蛇案例 textDark 现在变成 text-dark
从V4向V5的迁移
因为现在Styped Parties在绝对Typed项目上依靠社区的努力来管理自己的类型,所以你可能需要在风格上Conceptents componets内部使用通用软件而不是内置道具类型定义.
在此之前:
export const StyledButton = styled(Button)`
border-radius: ${({ theme }: StyledButtonProps) => theme.button.borderRadius};
`;
现在:
export const StyledButton = styled(Button)<StyledButtonProps>`
border-radius: ${({ theme }) => theme.button.borderRadius};
`;
样式组件 6 也不再过滤出自定义道具, 所以为了阻止道具向子组件或基本的 html 元素出血, 在道具名称上加一美元前请参见下面的大小道具 :
在此之前:
<StyledAvatar
{...rest}
size={theme.avatar[size || "m"]}
src={avatarUrl()}
alt={alt}
/>
现在:
<StyledAvatar
{...rest}
$size={theme.avatar[size || "m"]}
src={avatarUrl()}
alt={alt}
/>
从V0到V1的迁移
- 查找所有 RadioGroup 实例并将其更改为 Radio Conservation 的新组件名称
- 旧按钮外观="tertiary"已去掉并被替换为旧按钮外观的变体="text"
建议的解决方案是找到所有外观实例="tertiary",取而代之的是外观实例="二级",并找到所有外观实例="text",取而代之的是外观实例="ttertiary"
发展
克隆此寄存器
git clone [email protected]:CRUKorg/cruk-react-components.git
通过故事书进行开发
npm run storybook
您可能需要运行
npm run build-storybook
测试
节点:单位测试, Playwright: 组件函数, 可访问性 Chromatic:图像快照比较服务,这在CI中发生,人们可以通过他们的Github登录获得这一服务.
运行所有测试单元和 Playwright
npm run test
运行 Playright 交互测试套件( 功能测试和访问测试) 您可能需要运行 npx playwright install 第一次使用 Playwright 时
test-ct:ui
维持
依赖关系
如果你改编成故事书 请在合并前在本地运行 如果你改编成卷
npm run rollup:build-lib
并查看它是否能够在运行发行脚本前成功构建库
释放
释放前
请更新软件包中的版本编号. json并遵循版本编号的 semver 标准.
运行 nvm use 确保您在正确的节点版本.
运行 npm i 以确保锁文件中的正确版本.
更新 ChangeGELOG.md 应列出发布时的更改, 指令位于文件底部 .
这些更改需要合并为主.
释放
确定您有正确的权限 。 @ cruk org 在国家预防机制.
运行发行脚本 npm run release 这应该使用 release-it 允许您选择与套件 JSON 中描述的相同的版本编号,它应该照顾其余的:
- 它运行 npm ci
- 它的建设
- 它制造和推出标签
- 释放了国家防范机制
- 如果您想要在 github 上记录释放内容, 并自动生成释放笔记, 它会请求.
同意所有这些步骤 释放它走过, 当Github打开 释放点击 Publish 按钮。 如果有什么不对的释放 - 它应该退后.