feat: init storybook

[lollipop-onl]

Summary by CodeRabbit

• 新機能

  • Storybookの設定を追加しました。これにより、コンポーネントのビジュアルテストが可能になりました。
  • HeaderコンポーネントにHeaderMenuLinkの使用を導入しました。

• その他

  • .envファイルを追加し、環境変数を導入しました。
  • .gitignoreファイルを更新し、*.logファイルと/storybook-staticディレクトリを除外しました。
  • TypeScriptの設定ファイルに.storybookディレクトリを含めるようにしました。

[coderabbitai]

Walkthrough

新しい環境設定ファイル、Storybookの設定と依存関係、ヘッダーコンポーネントの再構成と新しいリンクコンポーネントの追加が行われました。全体の変更は、再利用性とモジュール性を高め、ストーリーブックに基づいたコンポーネント開発環境を整備することを目的としています。

Changes

ファイル	変更内容
.env	新しい環境変数 MICROCMS_SERVICE_DOMAIN と MICROCMS_API_KEY を追加
.gitignore	*.log ファイルと /storybook-static ディレクトリを除外
.storybook/main.ts	Storybookの設定ファイルを新規追加
.storybook/preview.tsx	Storybookのプレビュー設定ファイルを新規追加
package.json	Storybook関連の新しいスクリプトと依存関係を追加
src/components/Header/index.tsx	HeaderMenuLinkコンポーネントを使用するようにヘッダーコンポーネントを更新
src/components/HeaderMenuLink/index.stories.tsx	新しいストーリーファイルを追加
src/components/HeaderMenuLink/index.tsx	新しいリンクコンポーネントを追加
tsconfig.json	.storybookディレクトリをTypeScriptのコンパイル対象に追加

Poem

新しい風がそよぐとき 🐇
環境設定は整い ✨
モジュールの力は増し 💪
ストーリーブックが輝く 🌟
コンポーネント、跳ねるように 🎨 
コードの世界、もっと楽しく 🌈

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

• X
• Mastodon
• Reddit
• LinkedIn

Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai generate interesting stats about this repository and render them as a table.
  • @coderabbitai show all the console.log statements in this repository.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (invoked as PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[cloudflare-workers-and-pages]

Deploying simochee-net-storybook with    Cloudflare Pages

Latest commit:	b646ac0
Status:	✅  Deploy successful!
Preview URL:	https://9217495e.simochee-net-storybook.pages.dev

View logs

[coderabbitai]

Actionable comments posted: 0

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between d037615 and b646ac0.

Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

Files selected for processing (9)

• .env (1 hunks)
• .gitignore (1 hunks)
• .storybook/main.ts (1 hunks)
• .storybook/preview.tsx (1 hunks)
• package.json (1 hunks)
• src/components/Header/index.tsx (2 hunks)
• src/components/HeaderMenuLink/index.stories.tsx (1 hunks)
• src/components/HeaderMenuLink/index.tsx (1 hunks)
• tsconfig.json (1 hunks)

Files not reviewed due to errors (1)

• src/components/Header/index.tsx (no review received)

Files skipped from review due to trivial changes (3)

• .env
• .gitignore
• .storybook/main.ts

Additional context used

Biome

src/components/Header/index.tsx

[error] 25-25: Missing key property for this element in iterable. (lint/correctness/useJsxKeyInIterable)

The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.

Additional comments not posted (10)

.storybook/preview.tsx (3)

1-2: storybook-framework-qwikのインポートと設定を確認してください。

qwikCityDecoratorが正しくインポートされており、ストーリーブックのデコレータとして設定されています。これにより、Qwik Cityのコンテキストがストーリーブックのプレビューで利用可能になります。

---

5-16: プレビュー設定の確認。

Preview オブジェクトの設定が適切です。特に、controls.matchers で色と日付のフィールドを正しく設定している点、Zeplinリンクの追加、そして qwikCityDecorator の使用が確認できます。これにより、UIコンポーネントの開発時にユーザーインターフェースの一貫性と再現性が向上します。

---

18-18: デフォルトエクスポートの確認。

preview オブジェクトをデフォルトでエクスポートしています。これにより、他の設定ファイルやコンポーネントからこの設定を簡単に利用できるようになります。

src/components/HeaderMenuLink/index.tsx (2)

1-2: インポートとフックの確認。

AnchorHTMLAttributes と Slot の型が正しくインポートされています。また、useLocation フックを使用して現在のURLのパス名を取得しています。これにより、コンポーネントの動的なスタイリングが可能になります。

---

4-19: コンポーネントの定義とエクスポート。

Props 型を正しく定義し、クラス属性を除外しています。コンポーネントは、与えられたプロパティに基づいて条件付きでスタイルを適用し、Slot を使用して子要素をレンダリングします。この設計により、再利用可能で保守が容易なコンポーネントが提供されます。

tsconfig.json (1)

24-24: TypeScriptの設定を確認してください。

.storybook ディレクトリが include 配列に追加されました。これにより、ストーリーブックの設定ファイルもTypeScriptのチェックの対象になり、プロジェクト全体の型安全性が向上します。

src/components/HeaderMenuLink/index.stories.tsx (2)

1-3: ストーリーブックの設定のインポートとコンポーネントの確認。

Meta と StoryObj の型が正しくインポートされています。また、HeaderMenuLink コンポーネントも適切にインポートされています。これにより、ストーリーの定義に必要な型安全性が保証されます。

---

4-33: ストーリーのメタデータとプライマリーストーリーの定義。

ストーリーのメタデータを定義しており、component, argTypes, args, render フィールドが設定されています。これにより、コンポーネントの振る舞いをカスタマイズしてプレビューすることが可能です。プライマリーストーリーも適切に設定されており、特定の引数が与えられた場合のコンポーネントの振る舞いを示しています。

package.json (2)

6-13: ストーリーブックのスクリプトの追加。

build-storybook と storybook スクリプトが追加されました。これにより、ストーリーブックのビルドと開発サーバの起動が簡単に行えるようになります。スクリプトの設定が正確であり、プロジェクトの構築とテストの効率が向上します。

---

19-39: ストーリーブック関連の依存関係の追加。

多数のストーリーブック関連の依存関係が追加されています。これにより、UIコンポーネントの開発とテストが容易になります。依存関係のバージョンが適切であり、プロジェクトの要件に合致していることを確認してください。