@adapt-design-system/core 中文文档教程

Question

adapt-design-system/core

实现 ADAPT 设计系统的 React 组件。

Getting Started

Using the ADAPT Design System in your project

1. Install library

yarn add @adapt-design-system/core @emotion/react

2. Use <AdaptThemeProvider /> with a theme file and set the global fonts.

import { Global, css, useTheme } from '@emotion/react';
import { AdaptThemeProvider, Button } from '@adapt-design-system/core';

const theme = useTheme();

const App = () => (
  <AdaptThemeProvider>
    <>
      <Global
        styles={css`
          body {
            font-family: ${theme.fonts.default};
            color: ${theme.colors.text};
          }
          @font-face {
            font-family: 'Graphik';
            src: url('/Graphik-Regular-Web.woff2') format('woff2');
            font-style: normal;
            font-weight: 400;
            font-display: fallback;
          }

          @font-face {
            font-family: 'Graphik';
            src: url('/Graphik-Semibold-Web.woff2') format('woff2');
            font-style: normal;
            font-weight: 600;
            font-display: fallback;
          }
        `}
      />
      <Button>Hi!</Button>
    </>
  </AdaptThemeProvider>
);

3. You're ready to go! Import components as you need them. Check out the docs

Developing

Install

1. Install dependencies (monorepo users: remember to be in the /packages/adapt-design-system-core folder).

yarn install

2. To actively develop components, you can run

yarn run build:watch

每次保存更改时，构建都会重新运行。 或者，您可以在每次要构建时运行 yarn run build。

Trying out changes locally

要在本地测试您对 DS 的更改，请在 this 存储库目录中运行 npm link 以在本地链接它。 然后，在您的新消费者项目（例如 Gatsby*）中运行 yarn add @adapt-design-system/core（如果它从未安装过），然后运行 ​​npm link @adapt- design-system/core 链接到本地​​版本。 如果您正在以 build:watch 模式运行设计系统，则每次您将更改保存到 DS 时，您的项目都应该重新加载。

Publish new version

要发布新版本运行 yarn publish-package。 如果你引入了一个破坏性的变化，提升主要版本（2.0.3 -> 3.0.0）。 如果您添加新的（非破坏性的）功能，则会增加次要版本（2.0.3 -> 2.1.0）。 否则在添加新图标时会遇到补丁 (2.0.3 -> 2.0.4)。 系统会要求您提供新版本。

⚠️ Important!

不要忘记升级使用包，在本例中为 /docs，以使用新版本。 像这样： 纱线升级@adapt-design-system/core@^2.0.4