【コンポーネント #3】CIの導入・ClassName管理のHook化 - スマレジエンジニアyushiのブログ

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

yushi-dev.hatenablog.com

技術スタックは下記の通りです。

TypeScript
React
Bulma
vite
Bulma
Storybook
ESLint
Prettier
asdf

Prettier・CIの導入

プロジェクトを作ったらとりあえずPrettierを入れておきます。

npm i -D prettier

prettierの設定ファイルを導入します。

semi: false
singleQuote: true

package.json に登録します。

"scripts": {
  "prettier": "prettier -c .",
  "lint": "npm run eslint && npm run prettier",
}

CIで実行されるようにします。

name: Inspection

on:
  pull_request:
    branches:
      - master

jobs:
  frontend-lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version-file: '.tool-versions'
          cache: 'npm'
          cache-dependency-path: 'package-lock.json'
      - run: npm ci
      - run: npm run lint

Pushすると、無事に実行されました。

Pull Request

ClassName 管理用のHookの追加

React Componentを作成するとき、必ずclass要素（React上ではclassName）の管理が必要になります。

便利なライブラリがあるので、まずは導入します。

npm i --save clsx

github.com

Hookにまとめて抽象化します。

import { useMemo } from 'react'
import clsx from 'clsx/lite'

export const useClassName = (
  ...classNames: (string | undefined | false)[]
): string => {
  return useMemo(() => clsx(...classNames), [classNames])
}

下記のように利用できます。

export const Button = ({
  children,
  className,
  isOutlined = false,
  onClick,
  size,
}: Props) => {
  const _className = useClassName(className, 'button', isOutlined && 'is-outlined')

  return (
    <button className={_className} onClick={onClick} >
      {children}
    </button>
  )
}