Storybookを学ぶ
Reactのコンポーネントを提供しているnpmパッケージを含んでいるモノレポの中で、そのコンポーネントの動作を目視で確認できる仕組みが欲しかったのでStorybookでどうだろうかと思ってドキュメントを読んだりした。
monorepoを1つのStorybookで管理したい!その手順と遭遇した問題を解説します。 | ビジネスとIT活用に役立つ情報(株式会社アーティス)
現在開発中のフロントエンドのプロジェクトではアプリケーションを横断して使用するコンポーネントが必要なこともあり、pnpm workspace を利用した monorepo 構成を取っています。 アプリケーション開発では、...
asobou.co.jp
![monorepoを1つのStorybookで管理したい!その手順と遭遇した問題を解説します。 | ビジネスとIT活用に役立つ情報(株式会社アーティス)](/_next/image?url=https%3A%2F%2Fpublic-content.hackersheet.com%2Fwebsite-og-images%2Ff8620624-9c3c-46de-b621-20159f03b12f.jpeg&w=3840&q=75)
UIコンポーネント系のリポジトリはどうしているのか?
有名どころのUIコンポーネント系のリポジトリはどうしているのか?をまず調べたら良かったと気づく。
-
apps以下にドキュメント用のアプリケーションがある
GitHub - shadcn-ui/ui: Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source. - shadcn-ui/uigithub.comGitHub - nextui-org/nextui: ? Beautiful, fast and modern React UI library.? Beautiful, fast and modern React UI library. Contribute to nextui-org/nextui development by creating an account on GitHub.github.com -
example以下にフレームワーク毎のサンプルプロジェクトを作る
GitHub - kuma-ui/kuma-ui: ???? A Headless, Utility-First, and Zero-Runtime UI Component Library ????? A Headless, Utility-First, and Zero-Runtime UI Component Library ? - kuma-ui/kuma-uigithub.com -
Storybook使ってる
GitHub - chakra-ui/chakra-ui: ?? Simple, Modular & Accessible UI Components for your React Applications?? Simple, Modular & Accessible UI Components for your React Applications - chakra-ui/chakra-uigithub.comsandboxというディレクトリが存在する。こういうのでよさそう。
GitHub - yamada-ui/yamada-ui: React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion.React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion. - yamada-ui/yamada-uigithub.com
packages/eslint-config-customを作ったけど、ESLintの設定はkuma-uiの感じでも良いのではないかと思った。kuma-uiのリポジトリが全体的にシンプルでいい感じだったのでもう少ししっかり見る。
過去の日記
npmパッケージ公開に関する日記を整理する。