@aantonio/yoda 中文文档教程

Question

YODA

这是一个基于故事书教程的基础设计系统，是完整故事书设计系统的一个子集，创建为学习资源对于那些有兴趣学习如何使用最佳实践技术编写和发布设计系统的人。

在 Storybook 教程 中了解更多信息。

How it work

作为一个Design System基础，我们可以在另一个可以继承foundation的Design System中导入这个包。

或者直接在产品中导入。

1. 安装。

   # Install package
   npm install --save @aantonio/yoda
   

2. 集成到另一个 Storybook 中。

   在 .storybook/main.js

   module.exports = {
   stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
   refs: {
       "design-system": {
       title: "YODA",
       //The url provided by Chromatic when it was deployed
       url: "https://master--61dec7167fec2d003aa60e29.chromatic.com",
       },
   },
   addons: [
       "@storybook/addon-links",
       "@storybook/addon-essentials",
       "@storybook/preset-create-react-app",
   ],
   framework: "@storybook/react",
   staticDirs: ["../public"],
   core: {
       builder: "webpack5",
   },
   };
   

   在 .storybook/preview.js

   import React from 'react';
   
   // The styles imported from the design system.
   import { global as designSystemGlobal } from '@your-npm-username/learnstorybook-design-system';
   
   const { GlobalStyle } = designSystemGlobal;
   
   /*
   * Adds a global decorator to include the imported styles from the design system.
   * More on Storybook decorators at:
   * https://storybook.js.org/docs/react/writing-stories/decorators#global-decorators
   */
   export const decorators = [
   Story => (
       <>
       <GlobalStyle />
       <Story />
       </>
   ),
   ];
   /*
   * More on Storybook parameters at:
   * https://storybook.js.org/docs/react/writing-stories/parameters#global-parameters
   */
   export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   };
   

3. < strong>导入。

   import { Avatar } from '@aantonio/yoda';