react ui 组件_使用React和Storybook构建UI组件

react ui 组件

In the previous article, I gave an Introduction to Storybook and how it can be used to organize and build JavaScript components. Storybook is a UI library that can be used to document components. In this article, I’ll be explaining how to build an interactive UI component using React and Storybook. We’ll be creating a UI component using Storybook and React and at the end of the tutorial, we’ll deploy the storybook as a stand-alone application to serve as a style guide.

在上一篇文章中，我对Storybook进行了介绍，并介绍了如何将其用于组织和构建JavaScript组件。 故事书是一个UI库，可用于记录组件。 在本文中，我将解释如何使用React和Storybook构建交互式UI组件。 我们将使用Storybook和React创建一个UI组件，并在本教程的最后，将Storybook部署为独立的应用程序，以用作样式指南。

TLDR ( TLDR )

• Create a React Project
  创建一个React项目
• Add storybook/react as a dependency
  将故事书/React添加为依赖项
• Create a UI component Library with Storybook
  使用Storybook创建UI组件库
• Customize themes
  自定义主题
• Deploy as a static site
  部署为静态站点

安装指南 ( Installation Guide )

To get started we’ll need to create a new react project and for this, we’ll be using create-react-app which is a great tool for scaffolding react applications and then go ahead to install storybook.

首先，我们需要创建一个新的react项目，为此，我们将使用create-react-app ，它是搭建React应用程序的绝佳工具，然后继续安装Storybook。

//command to scaffold a react app
npx create-react-app storybook-app
cd storybook-app
yarn or npm start

And the next step will be to install the storybook package into our project.

下一步将是将故事书包安装到我们的项目中。

//command to install storybook
npx -p @storybook/cli sb init

The command can automatically detect the framework we are using from the package.json file and install the storybook version of that framework. After running both commands simultaneously, we can confirm we have storybook-react dependencies installed by going over to the package.json file to see if the packages are installed and then we can go ahead and run the application as well as run storybook.

该命令可以从package.json文件自动检测我们正在使用的框架，并安装该框架的故事书版本。 在同时运行两个命令之后，我们可以转到package.json文件以查看是否已安装软件包，从而确定我们已安装了Storybook-React依赖项，然后可以继续运行应用程序以及运行Storybook。

// start the app
yarn start
// run storybookcommand
yarn storybook

After running both commands, We’ll have both the react app and the storybook app running on different ports.

运行这两个命令后，我们将在不同的端口上运行react应用程序和Storybook应用程序。

向React App添加故事 ( Adding Stories To React App )

Now that we are done with the setup, we can go ahead and create components using Storybook. The idea here is to first setup storybook if we followed the steps outlined above, then it’s already preconfigured for us else if we installed the storybook/react package in an already existing react project then we’ll need to follow these steps to setup storybook. we’ll first want to create a folder .storybook in the root directory of our React project and then create a file within the folder called config.js file and add the following lines of code to the file.

现在我们完成了设置，我们可以继续使用Storybook创建组件。 这里的想法是，如果我们按照上面概述的步骤安装故事书，那么它已经为我们进行了预配置，否则，如果我们在已经存在的react项目中安装了storybook/react包，则需要按照以下步骤来安装故事书。 我们首先要在React项目的根目录中创建一个文件夹.storybook ，然后在名为config.js文件的文件夹中创建一个文件，并将以下代码行添加到该文件中。

import { configure } from '@storybook/react';
function loadStories() {
  require('../src/stories');
}
configure(loadStories, module);

The block of code above is a configuration for storybook and it tells Storybook to find the stories in the src/stories directory. We’ll go ahead and create that folder if we don’t have it already set up. Within the src folder create a folder called stories. This is where all the components we will create stories for will eventually be located. In this tutorial, I’ll be creating a Button component and for this component, we will document stories for them within the stories folder. I’ll go ahead and create a Button Component within the component directory with the following lines of code.

上面的代码块是故事书的配置，它告诉故事书在src/stories目录中找到src/stories 。 如果尚未设置该文件夹，我们将继续创建该文件夹。 在src文件夹中，创建一个名为stories的文件夹。 这是我们将为其创建故事的所有组件的最终位置。 在本教程中，我将创建一个Button组件，为此组件，我们将在stories文件夹中为它们记录故事。 我将继续使用以下代码行在component目录中创建一个Button Component。

import React from 'react';
import './Button.css';
const Button = props => (
  <button onClick={props.onClick} style={props.style}>
    {props.label && <span>{props.label}</span>}
  </button>
)
export default Button;

Now, we can go ahead and add a story for the button component created. Within the stories directory create a file and call it buttonStories.js and then we’ll add the following lines of code into the file.

现在，我们可以继续并为创建的按钮组件添加一个故事。 在stories目录中创建一个文件，并将其命名为buttonStories.js ，然后将以下代码行添加到该文件中。

import React from 'react';
import { storiesOf } from '@storybook/react';

import Button from '../components/Button';

storiesOf('Button', module)
  .add('with primary', () => <Button label="Primary Button" />)
  .add('with outline', () => <Button
    label="Ouline Button"
    style={{ background: 'transparent', border: '3px solid #fecd43' }}
  />)
  .add('with rounder corners', () => <Button
    label="Rounded Button"
    style={{ borderRadius: '15px' }}
  />)
  .add('disabled', () => <Button disabled
    label="Disabled Button"
    style={{ background: 'gray' , border: 'gray', cursor: 'not-allowed' }}
  />)

Next, We’ll create an index.js file which will serve as a base file with all stories, then we can import all into this file. Go ahead and import the buttonStories.js file and then for every new file created under stories directory we will import them into this file.

接下来，我们将创建一个index.js文件，该文件将用作包含所有故事的基本文件，然后可以将其全部导入到该文件中。 继续并导入buttonStories.js文件，然后对于在buttonStories.js目录下创建的每个新文件，我们都将它们导入到该文件中。

import './buttonStories';

集成插件 ( Integrating Addons )

Addons with Storybook helps implement extra features to make them more useful and interactive. In this article, we will be adding the Action addon to the stories created. The Actions Addon can be used to display data received by event handlers in Storybook. A full list of all addons available with Storybook can be found here. We can go ahead and set up the addon if it’s not already done by default you will need to follow these steps. Install the addon package with this command.

带有Storybook的附加组件有助于实现额外的功能，以使其更加有用和互动。 在本文中，我们将把Action插件添加到创建的故事中。 Actions插件可用于显示Storybook中事件处理程序接收的数据。 可在此处找到Storybook可用的所有附加组件的完整列表。 如果默认情况下尚未完成插件，我们可以继续进行设置。您将需要执行以下步骤。 使用此命令安装插件软件包。

npm i -D @storybook/addon-actions or yarn add @stroybook/addon-actions

Then, add the following content to .storybook/addons.js

然后，将以下内容添加到.storybook/addons.js

import '@storybook/addon-actions/register';

To make our Button story interactive with Storybook we can add the following code to buttonStories.js

为了使Button故事与Storybook互动，我们可以将以下代码添加到buttonStories.js

import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';

import Button from '../components/Button';

storiesOf('Button', module)
  .add('with primary', () => <Button
    onClick={action('click')}
    label="Primary Button"
  />)
  .add('with outline', () => <Button
    label="Ouline Button"
    onClick={action('click')}
    style={{ background: 'transparent', border: '3px solid #fecd43' }}
  />)
  .add('with rounder corners', () => <Button
    label="Rounded Button"
    onClick={action('click')}
    style={{ borderRadius: '15px' }}
  />)
  .add('disabled', () => <Button disabled
    label="Disabled Button"
    onClick={action('click')}
    style={{ background: 'gray' , border: 'gray', cursor: 'not-allowed' }}
  />)

There you have it. To see this in action when you run storybook, on the tab below you’ll see an Actions tab where the action is logged anytime we interact with the buttons.

你有它。 要在运行故事书时查看此操作的实际效果，请在下面的标签上看到一个“ Actions tab ，只要我们与这些按钮进行交互，便会记录该操作。

自定义主题 ( Customizing Themes )

With storybook, we have the ability to customize the default theme used and storybook comes bundled with a default light theme. Now let’s see how we can customize this to something different. Dark theme maybe or something entirely different. To get started we’ll need to modify the configurations we have set in config.js file by adding the following lines of code.

使用Storybook，我们可以自定义使用的默认主题，并且Storybook与默认的light主题捆绑在一起。 现在，让我们看一下如何自定义其他内容。 黑暗主题也许或完全不同的东西。 首先，我们需要通过添加以下代码行来修改在config.js文件中设置的配置。

import { addParameters } from '@storybook/react';
import { themes } from '@storybook/theming'
addParameters({
  options: {
    theme: themes.dark
  }
})

With the dark theme configured, we can see the entire storybook theme look different and have switched to the dark theme. At any point, this can be switched back to either light or dark theme depending on our preference. We can also go ahead and define a dynamic theme out of the box if we want a different theme entirely. Let’s take a look at how we can achieve this. The first step is to create a file for our theme, within .storybook folder create a new file called yourTheme.js. I’ll be using pinkPanther as the name of our theme. Next step is to generate a new theme using the create() function from storybook/theming

配置了深色主题后，我们可以看到整个故事书主题看起来都不同，并且切换到了深色主题。 在任何时候，都可以根据我们的喜好将其切换回浅色或深色主题。 如果我们想要完全不同的主题，我们也可以直接定义一个动态主题。 让我们看看如何实现这一目标。 第一步是为我们的主题创建一个文件，在.storybook文件夹中创建一个名为yourTheme.js的新文件。 我将使用pinkPanther作为我们主题的名称。 下一步是使用storybook/theming的create()函数生成一个新storybook/theming

import {create} from '@storybook/theming'
export default create ({
  base: 'light',
  colorPrimary: 'hotpink',
  colorSecondary: 'deepskyblue',
  // UI
  appBg: 'rgb(234, 0, 133)',
  appContentBg: 'white',
  appBorderColor: 'white',
  appBorderRadius: 4,
  // Typography
  fontBase: '"Open Sans", sans-serif',
  fontCode: 'monospace',
  // Text colors
  textColor: 'rgb(255, 250, 250)',
  textInverseColor: 'white',
  // Toolbar default and active colors
  barTextColor: 'white',
  barSelectedColor: 'white',
  barBg: 'rgb(246, 153, 190)',
  // Form colors
  inputBg: 'white',
  inputBorder: 'silver',
  inputTextColor: 'black',
  inputBorderRadius: 4,
  brandTitle: 'Pink Panther Storybook',
  brandUrl: 'https://example.com',
  brandImage: 'https://botw-pd.s3.amazonaws.com/styles/logo-thumbnail/s3/0019/2539/brand.gif?itok=97rSwE0a',
});

Then we can go ahead and import pinkPanther.js in our storybook config file.

然后，我们可以继续在我们的故事书配置文件中导入pinkPanther.js 。

import pinkPanther from  './pinkPanther';
addParameters({
  options: {
    theme: pinkPanther
  }
})

This gives us a completely different theme as seen above. The possibilities with how we can customize our storybook is up to us and our design team if we want something fancy. I hope we can find my pink panther obsession helpful in this context.

如上所述，这给了我们一个完全不同的主题。 如果我们想要一些奇特的东西，如何定制故事书的可能性取决于我们和我们的设计团队。 我希望在这种情况下，我对粉红豹的痴迷有所帮助。

部署故事书 ( Deploying Storybook )

One feature that comes bundled with Storybook is the fact that we can deploy our storybook as a static site isolated on its own that we can deploy to either Netlify or any hosting option of our choice. To configure this we will need to add a build-storybook script to our package.json.

Storybook附带的一项功能是，我们可以将Storybook部署为一个独立的静态站点，然后将其部署到Netlify或我们选择的任何托管选项。 要配置这一点，我们需要一个添加build-storybook剧本给我们package.json 。

{
  "scripts": {
    "build-storybook": "build-storybook -c .storybook -o .out"
  }
}

What this script will do is that it’ll build our storybook directory into a static web app and output it in a .out directory. We can run this script and deploy the content of the .out directory when the build is complete. Go ahead and run the command.

该脚本将执行的操作是将故事书目录构建到静态Web应用程序中，并将其输出到.out目录中。 构建完成后，我们可以运行此脚本并部署.out目录的内容。 继续运行命令。

yarn build-storybook

When the build is complete we can now deploy the content of the directory using any hosting of our choice. To test this works locally, we can run the following command and it’ll serve the content of the folder as a static site.

构建完成后，我们现在可以使用我们选择的任何托管来部署目录的内容。 要在本地测试此功能，我们可以运行以下命令，它将以静态站点的形式提供文件夹的内容。

npx http-server .out

结语 ( Wrapping Up )

In this article, We’ve learned how to build interactive components using Storybook and React. Now we have seen what is possible with Storybook and also have a guide on how to integrate storybook as a component library in our react projects. Developing with Storybook serves as a single source of truth for both developers and designers working in a team and it can be integrated with other front end frameworks this post only outlines how it is used with React, In case you’re looking out for a guide on other frameworks feel free to check Storybook’s docs. You can also find the code for this article on GitHub.

在本文中，我们学习了如何使用Storybook和React构建交互式组件。 现在，我们已经看到了Storybook的功能，并提供了有关如何将Storybook作为组件库集成到我们的React项目中的指南。 使用Storybook进行开发对于团队中的开发人员和设计师而言都是唯一的真理来源，并且可以与其他前端框架集成，本文仅概述了它如何与React结合使用，以防您寻找指南。在其他框架上，请随时查看Storybook的文档 。 您还可以在GitHub上找到本文的代码。

翻译自: https://scotch.io/tutorials/building-a-ui-component-with-react-and-storybook

react ui 组件