# @kanmu/popcorn-ui

Popcorn Design Kit で使用する React Native 製の UI コンポーネントライブラリ

![MIT license](https://img.shields.io/npm/l/@kanmu/popcorn-ui) ![npm](https://img.shields.io/npm/v/@kanmu/popcorn-ui)

## インストール

```bash
yarn add @kanmu/popcorn-ui
```

### Peer Dependencies

このパッケージには以下の peer dependencies が必要です。

```bash
yarn add react react-native react-native-svg react-native-safe-area-context @react-native-picker/picker react-native-actions-sheet react-native-modal-datetime-picker @kanmu/popcorn-tokens @kanmu/popcorn-icons
```

※ React 18 以上、React Native 0.73 以上、React Native SVG 15 以上が必要です。

## コンポーネント一覧

Coming soon...

## 使い方

### 基本的な使用例

```tsx
import {Text, Button, Badge, Space} from '@kanmu/popcorn-ui';
import {View} from 'react-native';

const MyComponent = () => {
  return (
    <View>
      <Text typographyStyle="heading/medium">見出しテキスト</Text>
      <Space.Stack size="small" />
      <Text typographyStyle="body/medium">本文テキスト</Text>
      <Space.Stack size="medium" />
      <Badge color="notice">
        <Text size="xxsmall" color="light">
          NEW
        </Text>
      </Badge>
      <Space.Stack size="medium" />
      <Button.Basic color="primary" startIcon="check" onPress={() => {}}>
        ボタン
      </Button.Basic>
    </View>
  );
};
```

## コンポーネントのプレビュー

コンポーネントのプレビューに [Storybook for React Native](https://github.com/storybookjs/react-native) を使用しています。`@kanmu/popcorn-tokens` と `@kanmu/popcorn-icons` の一覧は、Storybook の **foundations/PopcornTokens** と **foundations/PopcornIcons** で確認できます。

```bash
# popcorn-ui の Storybook は popcorn-tokens と popcorn-icons のビルド成果物（dist/）に依存しています。
# 初回セットアップ時に以下のコマンドですべてのパッケージをビルドしないと、
# Storybook 起動時にモジュール解決エラーが発生します。
yarn build  # プロジェクトルートで実行

# パッケージディレクトリに移動
cd packages/popcorn-ui

# Storybook でコンポーネントをプレビュー
yarn storybook-generate  # ストーリーを生成
yarn storybook           # Metro bundler を Storybook モードで起動

# 別のターミナルからアプリをビルド・起動
yarn storybook:ios       # iOS シミュレーターで起動
yarn storybook:android   # Android エミュレーターで起動

# テストを実行（コンポーネントテスト + Storyshots）
yarn test

# コンポーネントテストのみ / Storyshots のみ
yarn test:component
yarn test:storyshots

# ストーリースナップショットのみ更新（意図した UI 変更後）
yarn test:storyshots -u
```

Storyshots は `*.stories.storyshot` を各 `__stories__` に生成する。`src/foundations/**`（トークン・アイコン Gallery 等のカタログ）は テストから除外している。

## Contributing

UI コンポーネントパッケージの開発に貢献いただける方は、以下のドキュメントを参照してください。

- [コントリビューションガイド](../../CONTRIBUTING.md) - 開発環境のセットアップとワークフロー