jigowatts_ui

開発に関する詳細なガイドラインと注意事項については、 DEVELOPMENT.md を参照してください。 エージェント向けのルールは .cursorrules に記載されています。

ライブラリ

pnpm install @Jigowatts/jigowatts-ui

で導入することができます

変更内容をアプリで確認する方法

このライブラリを変更したあと、実際のアプリ側で反映を確認したいときは、先に package.json の version を更新してからビルドと pack を実行します。
そうすると、ローカルに jigowatts-jigowatts-ui-<version>.tgz が作られます。

pnpm run vite:build
pnpm pack

pnpm run vite:build で dist/ を生成し、pnpm pack でローカル確認用の成果物を作れます。 アプリ側では package.json に次のように file: 形式で指定してインストールし直すことで、変更を反映した状態を確認できます。

{
  "@jigowatts/jigowatts-ui": "file:./jigowatts-jigowatts-ui-2.2.1.tgz"
}

この指定にしたあとで pnpm install を実行すると、ローカルの tgz を使って確認できます。

storybook

storybookによるドキュメントを生成できます。

pnpm run storybook

でサーバーが起動します。 http://localhost:6006にアクセスすることでカタログを見ることができます。

Map等動かないものがある場合

pnpm run build-storybook

でstorybook-staticに必要なHTMLファイル等が生成されます。

cd ./storybook-static
npx http-server .

や、vscodeのlivepreview機能を利用してhttpサーバ経由でカタログを確認することができます。

Theme

Theme の詳しい設定方法は docs/theme.md を見てください。 palette の詳細は docs/theme-palette.md、 semantic の詳細は docs/theme-semantic.md を見てください。 Storybook では theme/Theme の下に Palette、SideMenu、Semantic Token が並びます。