【コンポーネント #2】依存ライブラリの導入 - スマレジエンジニアyushiのブログ

引き続きComponentライブラリを作っていきます。

yushi-dev.hatenablog.com

TypeScriptとReactベースで、CSSはBulmaを利用します。下記のツール等を利用します。

TypeScript
React
Bulma
vite
Storybook
ESLint
Prettier
asdf

Storybookの導入

下記のコマンドを実行します。

npx storybook@latest init

依存ライブラリが導入されます。

@storybook/addon-essentials
@storybook/addon-interactions
@storybook/addon-links
@storybook/addon-onboarding
@storybook/blocks
@storybook/react
@storybook/react-vite
@storybook/test
eslint-plugin-storybook
storybook

storybook 本体のライブラリの他、
React・Vite・ESLint 関連のライブラリが導入されました。

ESLint の設定ファイルで、storybook用の設定がextendsされます。

(.eslintrc.cjs)

extends: [
+ 'plugin:storybook/recommended',
],

設定ファイルである.storybook/main.ts、.storybook/preview.ts が作成されます。

src/stories 以下に例のstorybookのコードが作成されます。
これらは不要のため削除します。

Pull Request

https://github.com/nek0meshi/components/pull/3

Bulmaの導入

下記のコマンドを実行します。

npm i bulma

ライブラリ・storybookのそれぞれのコードでCSSを導入します。

(src/main.tsx, .storybook/preview.ts)

import '../node_modules/bulma/css/bulma.css'

動作確認のため、stories ファイルを書き換えて適用してみます。

-  size?: 'small' | 'medium' | 'large';
+  size?: '' | 'small' | 'normal' | 'medium' | 'large';

export const Button = ({
-  size = 'medium',
+  size = '',
}: ButtonProps) => {
-  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  const mode = primary ? 'button is-primary' : 'button is-light';

   return (
     <button
       type="button"
-      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      className={[`is-${size}`, mode].join(' ')}
       style={{ backgroundColor }}
       {...props}
    >
      {label}
    </button>
  );
};