@kanmu/popcorn-ui

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

インストール

yarn add @kanmu/popcorn-ui

Peer Dependencies

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

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...

使い方

基本的な使用例

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 を使用しています。@kanmu/popcorn-tokens と @kanmu/popcorn-icons の一覧は、Storybook の foundations/PopcornTokens と foundations/PopcornIcons で確認できます。

# 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 コンポーネントパッケージの開発に貢献いただける方は、以下のドキュメントを参照してください。

• コントリビューションガイド - 開発環境のセットアップとワークフロー