Braid Design System 使用教程

项目介绍

Braid Design System 是由 SEEK Group 开发的一个可主题化的设计系统，旨在为跨品牌的 UI 开发提供快速且高质量的解决方案。Braid 提供了一组 React 组件和基于 CSS 变量的样式主题，使用 vanilla-extract 进行样式管理。Braid 的设计理念是尽可能简化 API，使其对非开发者也易于理解，并且通过 Playroom 工具，设计师和开发者可以在同一环境中协作，减少高保真原型制作的需求。

项目快速启动

安装

首先，确保你的项目已经配置了 sku，因为 sku 已经预先配置好支持 Braid。如果你的项目有自定义的构建设置，你可能需要额外的指导来配置你的打包工具。

在你的 sku 项目中，首先安装 Braid Design System：

npm install --save braid-design-system

引入和使用

在你的应用程序的顶部引入重置样式、所需的主题以及 BraidProvider 组件。注意：重置样式必须首先引入，以避免 CSS 顺序问题。

import 'braid-design-system/reset'; // 必须首先引入
import apacTheme from 'braid-design-system/themes/apac';
import { BraidProvider, Text } from 'braid-design-system';

export default () => (
  <BraidProvider theme={apacTheme}>
    <Text>Hello World</Text>
  </BraidProvider>
);

如果你在另一个应用程序的上下文中渲染，你可能希望选择退出提供的 body 样式，这些样式设置了背景颜色并重置了 margin 和 padding：

<BraidProvider theme={apacTheme} styleBody={false}>
  <Text>Hello World</Text>
</BraidProvider>

如果你希望自定义 Braid 中所有 Link 和 TextLink 组件的技术实现，你可以将自定义组件传递给 BraidProvider 的 linkComponent 属性。例如，如果你想确保所有相对链接都是 React Router 链接：

import React from 'react';
import { Link as ReactRouterLink } from 'react-router-dom';
import { BraidProvider, makeLinkComponent } from 'braid-design-system';
import wireframe from 'braid-design-system/themes/wireframe';

// 首先创建自定义链接实现
const CustomLink = makeLinkComponent(({ href, ...restProps }, ref) =>
  href[0] === '/' ? (
    <ReactRouterLink ref={ref} to={href} {...restProps} />
  ) : (
    <a ref={ref} href={href} {...restProps} />
  )
);

// 然后将其传递给 BraidProvider
export const App = () => (
  <BraidProvider theme={wireframe} linkComponent={CustomLink}>
    {/* 你的应用代码 */}
  </BraidProvider>
);

应用案例和最佳实践

Braid Design System 广泛应用于 SEEK Group 的在线招聘市场产品中。通过使用 Braid，开发团队能够快速构建一致且高质量的用户界面，同时保持设计的灵活性和可扩展性。Braid 的组件库涵盖了从基础的布局组件到复杂的交互组件，使得开发者能够轻松实现各种设计需求。

最佳实践

1. 一致性：在整个应用中保持一致的设计风格和交互模式，使用 Braid 提供的组件和主题来确保一致性。
2. 可访问性：Braid 的设计系统内置了对可访问性的支持，确保你的应用对所有用户都是友好的。
3. 性能优化：通过使用 Braid 的轻量级组件和优化的样式管理，减少不必要的渲染和加载时间。

典型生态项目

Braid Design System 作为一个开源项目，与其他开源项目和工具集成良好，以下是一些典型的生态项目：

1. Playroom：一个用于 Braid 组件的交互式设计工具，允许设计师和开发者在同一环境中协作。
2. vanilla-extract：Braid 使用的样式管理工具，提供了基于 CSS 变量的样式解决方案。
3. React Router：与 Braid 集成，用于管理应用的路由和导航。

通过这些生态项目的集成，Braid Design System 能够提供更加完整和高效的开发体验。