Storybook, Tailwind 및 Typescript를 사용하여 구성 요소 라이브러리를 시작합니다.

React 프로젝트를 위한 구성 요소를 신속하게 구축합니다.
결승전 보세요 result

이야기책이 뭐예요?

Storybook은 독립적으로 UI 구성 요소를 개발하는 데 사용되는 도구입니다. 이것은 우리가 주 응용 프로그램 이외에 이 구성 요소를 사용하여 필요한 변경을 하고 응용 프로그램에서 그것들을 가져와 외관을 이해할 수 있음을 의미합니다.
디자인 시스템은 이미 모든 제품 개발 과정의 중요한 구성 부분이 되었고, 아마도 당신은 이미 그것을 사용하고 있을 것이다.이 시스템은 디자이너와 개발자에게 스타일 가이드를 제공했다.모드와 변형이 다른 UI 구성 요소가 많습니다.이것은 이야기책을 사용하는 완벽한 장면이다.

순풍의 우세

Tailwind CSS는 매우 사용자 정의 가능한 저급 CSS 프레임워크입니다.이것은 많은 다른 프레임워크처럼 UI 도구 패키지가 아니다. CSS 클래스를 통해 사이트의 외관을 완전히 제어할 수 있다.

react 프로그램을 설치하고tailwind를 설치합니다.

나는 create-react-appp로 처음부터 프로젝트를 시작할 것이다.

npx create-react-app storybook-ts --template typescript

의존항을 설치하겠습니다.

npm install tailwindcss postcss-cli autoprefixer

다음 코드로 응용 프로그램의 루트에 postcss.config.js 라는 새 파일을 만듭니다.

module.exports = {
  plugins: [require('tailwindcss'), require('autoprefixer')],
};

tailwind 로 처리하고 postcss CSS를 분석하고 브라우저를 지원하기 위해 공급업체 접두사를 추가합니다.
이 스크립트를 autoprefixer 파일에 추가합니다.

{
    "scripts": {
        ...
    "build:tailwind": "postcss src/scss/base.scss -o src/scss/tailwind.scss"
  },
  ...
}

package.json 내에 새 scss 폴더를 만듭니다.더 많은 클래스를 작성할 수 있기 때문에sass 파일을 사용할 것입니다. src 를 사용할 수 있습니다.
만약sass를 사용하기로 결정하신다면 설치base.scss를 잊지 마십시오.css 폴더에 이 내용을 포함하는 node-sass 파일을 만듭니다.

@tailwind base;
@tailwind components;
@tailwind utilities;

콘솔에서 이 명령을 실행하면 순풍 파일이 생성됩니다.

npm run build:tailwind

생성된 순풍 파일을 응용 프로그램 구성 요소에 배치합니다.

// App.tsx

import './scss/tailwind.scss';

이 강좌에서, 우리는 당신의 필요에 따라 조정할 수 있는 기본 순풍 설정을 사용할 것입니다.이 명령base.scss을 실행하면 더 적합한 값을 추가할 수 있는 순풍 프로필이 생성됩니다.이것은tailwind의 기본값 configuration 입니다. 참고하십시오.
새 scss 폴더 insider npx tailwind init 를 만들고 components 파일을 추가합니다.

import React, { FC } from 'react';

type ButtonTypes = {
  /**
   * Label of the button
  */
  label: string;
  /**
   * Boolean value to define the button style 
  */
  outlined?: boolean;
  /**
   * Button click action
  */
  onClick(): void;
}

const BASE_BUTTON = 'rounded outline-none shadow py-3 px-12 font-normal uppercase tracking-wider text-lg'
const CONTAINED_BUTTON = `${BASE_BUTTON} bg-teal-400 border border-teal-400 text-white`
const OUTLINED_BUTTON = `${BASE_BUTTON} border border-teal-400 text-teal-400`

export const Button:FC<ButtonTypes> = ({ onClick, label = "Some label", outlined }) => {
  return (
    <button
      onClick={onClick}
      className={outlined ? OUTLINED_BUTTON : CONTAINED_BUTTON}
    >
      <span>{label}</span>
    </button>
  )
};

우리 이야기책 속으로 깊이 들어가자

Storybook을 사용하여 typescript 파일을 처리하려면 웹 패키지 구성을 확장해야 합니다.프로젝트의 루트 디렉터리에 src 라는 새 폴더를 만들고 button.tsx 파일을 만듭니다.
그러나 우선, 우리가 필요로 하는 의존항을 설치합시다.

npm install --save-dev @storybook/react @storybook/preset-create-react-app babel-loader react-docgen-typescript-loader @storybook/addon-actions @storybook/addon-info @storybook/addon-knobs @storybook/addon-notes @storybook/addons

우리는 플러그인을 사용하여 우리의 이야기에 고급 기능을 제공할 것이다..storybook 파일에 다음 코드를 추가합니다.

module.exports = {
  stories: ['../src/stories/**/*.stories.tsx'],
  addons: [
    '@storybook/addon-actions/register',
    '@storybook/addon-knobs/register',
    '@storybook/addon-notes/register',
  ],
  webpackFinal: async config => {
    config.module.rules = [
      ...config.module.rules,
      {
        test: /\.(ts|tsx)$/,
        use: [
          {
            loader: require.resolve("babel-loader"),
            options: {
              presets: [require.resolve("babel-preset-react-app")]
            }
          },
          require.resolve("react-docgen-typescript-loader")
        ]
      }
    ],
    config.resolve.extensions.push('.ts', '.tsx');
    return config;
  },
};

첫 번째 이야기를 만들어 봅시다.main.js 내에 main.js 폴더와 stories 라는 파일을 만듭니다.우리는 이야기책에서 단추를 직접 바꾸는 플러그인을 추가할 것입니다.

import React from "react";
import { Button } from '../components/button';
import { action } from '@storybook/addon-actions';
import { withKnobs, text, boolean } from "@storybook/addon-knobs";

export default {
  title: "Button",
  decorators: [withKnobs]
};

export const primary = () => {
  const label = text("Label", "See now");
  const outlined = boolean("Oultined", false);
  return (
    <Button onClick={action('clicked')} outlined={outlined} label={label} />
  )
};

스토리북을 실행하기 위해 src 파일에 스크립트를 추가합니다.

{
    "scripts": {
        ...
    "build:tailwind": "postcss src/scss/base.scss -o src/scss/tailwind.scss",
    "storybook": "start-storybook -p 5000"
  },
  ...
}

현재, 만약 우리가 운행한다면 button.stories.tsx, 우리는 유사한 상황을 보게 될 것이다.

이거 우리 버튼이야!근데 스타일이 없어요.이 문제를 해결하기 위해 새로운 package.json 구성 요소를 만듭니다.지금부터 생성된 모든 파일은 npm run storybook 폴더에 있습니다.

import React from 'react';
import '../src/scss/tailwind.scss';

const Layout = ({ children }) => {
  return (
    <div className="px-20 py-10">
      {children}
    </div>
  )
}

export default Layout;

Layout 파일을 생성합니다.

import React from 'react';
import { addDecorator } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import Layout from './Layout';

addDecorator(storyFn => <Layout>{storyFn()}</Layout>);
addDecorator(withInfo({
  inline: true,
  propTablesExclude: [Layout]
}));

만약 네가 다시 이야기책을 운행한다면, 우리의 이야기는 지금 이렇게 보일 것이다.info 플러그인은 원본 코드와proptypes 테이블을 생성합니다.

메모:

tailwind 파일을 가져올 때 문제가 발생하면 .storybook 의 패키지 설정에 preview.js 을 추가해야 합니다.

아이템 종류가 보이지 않으면 구성 요소 파일을 확인하십시오.react 가져오기를 분해하거나 이렇게 가져오십시오.또는 가능한 한 sass-loader 을 구성 요소에 사용하지 마십시오.

  import * as React from 'react'; 

  import React, { FC } from 'react';

  export const Button = () => {} //don't use export default.

암흑 모드.

우리의 응용 프로그램은 보기에는 매우 좋아 보이지만, 너는 우리가 어떻게 그것을 더욱 좋아 보이게 하는지 아니?네, 어두운 모드를 사용합니다.
먼저 main.js 파일을 만들고 다음 코드를 추가합니다.

import { addons } from '@storybook/addons';
import { themes } from '@storybook/theming';

addons.setConfig({
  theme: themes.dark,
});

이것은 당신의 이야기책 프로그램에 검은색 테마를 추가할 것입니다.
이전 export default 파일에서 이 항목을 추가하여 정보의 스타일을 변경합니다.

import React from 'react';
import { addDecorator } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import Layout from './Layout';

addDecorator(storyFn => <Layout>{storyFn()}</Layout>);
addDecorator(withInfo({
  inline: true,
  styles: (base) => ({
    ...base,
    infoBody: {
      ...base.infoBody,
      backgroundColor: '#303030',
      color: 'white',
    },
    source: {
      h1: {
        margin: '20px 0',
        padding: '0 0 5px 0',
        fontSize: '25px',
        borderBottom: '1px solid #EEE',
      },
    },
  }),
  propTablesExclude: [Layout]
}));

우리는 거의 성공했다.하지만 현재 proptypes 테이블의 텍스트는 보기에 좋지 않습니다.
manager.js를 만들고 이 코드를 추가합니다.

<style>
  .info-table, .info-table td, .info-table th{ 
    color: #fff;
  }
</style>

이야기책을 다시 실행하다.
현재 가지고 있습니다.storybook이 시작되고 어둠 모드에서 실행되고tailwind 구성 요소와 typescript를 지원합니다.
이 코드를 확인합니다repo.