@8sistemas/design-system 中文文档教程

Question

完整的文档可以在这个存储库生成的 Storybook 页面中找到： https://eightsystems.github.io/design-system/

Using as a library

1. To install the component library, run:

yarn add @8sistemas/design-system

2. Inject the ThemeProvider in the project root. By default, the ThemeProvider uses the default Theme object included in the package. If you wish, you can specify your custom theme to match the project's needs (see more about theming and customization here.

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { Theme, ThemeProvider } from "@8sistemas/design-system";

ReactDOM.render(
    <React.StrictMode>
        <ThemeProviderInjector theme={Theme}>
            <App />
        </ThemeProviderInjector>
    </React.StrictMode>,
    document.getElementById("root")
);

3. Import the fonts specified on the fontFaces object of the Theme in the way that makes the most sense for your project. These are the font imports for the default Theme object:

<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=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap"
    rel="stylesheet"
/>

4. Use the components in any place of the project that is in the scope of ThemeProvider and the project root. Use the Storybook generated documentation as reference for the components, props, and API's available.

import React from "react";
import { Button } from "@8sistemas/design-system";

const Example = () => <Button color="primary">Hello World</Button>;

Local Testing with Yalc

编写包的本地开发和测试可能会出现问题由于限制使用 yarn/npm 链接 以及文件系统之间的依赖关系解析和符号链接互操作性问题。

Yalc 试图通过充当本地开发包的简单本地存储库来解决这个问题。 那样， 它们的行为就像从远程包存储库中使用常规 npm install / yarn add 一样，我们不需要 处理重复的依赖关系和符号链接恶作剧。

Usage

全局安装：

yarn global add yalc

运行：

yarn local:publish

Yalc 将复制所有应该在远程 NPM 注册表中发布的文件，并生成一个日志 包含在已发布的包中。

现在，在将使用设计系统组件的项目中：

yalc add @8sistemas/design-system

在活动开发期间更新：

# Publish a new version to the yalc "store" from the design system directory:
yarn local:publish

# Uptade the package from the newly published version on the consumer project:
yalc update @8sistemas/design-system

Managing installations:

• Run yalc installations clean @8sistemas/design-system to unpublish a package published with yalc publish
• Run yalc installations show @8sistemas/design-system to show all packages to which @8sistemas/design-system has been installed.