zenkigen-component

ZENKIGENのコンポーネントライブラリです。Reactコンポーネントと設定を提供し、ZENKIGENのデザインシステムに準拠したUIを簡単に構築できます。

目次

• インストール
• 基本的な使い方
• ライブラリの更新
• コンポーネント一覧・仕様書
• Storybook
• 開発者向け
  • プロジェクト詳細ドキュメント
  • ローカル開発環境でのStorybook
• ライセンス

インストール

1. パッケージのインストール

# npmの場合
npm install @zenkigen-inc/component-ui @zenkigen-inc/component-config

# yarnの場合
yarn add @zenkigen-inc/component-ui @zenkigen-inc/component-config

2. Tailwind CSSの設定

tailwind.config.js に以下の設定を追加してください：

module.exports = {
  content: [
    // 既存の設定...
    './node_modules/@zenkigen-inc/**/*.{js,ts,tsx}',
  ],
  presets: [
    // 既存のプリセット...
    require('@zenkigen-inc/component-config'),
  ],
};

基本的な使い方

import { useState } from 'react';
import type { IconName } from '@zenkigen-inc/component-icons';
import { Button, TextInput, Select } from '@zenkigen-inc/component-ui';

const MyComponent = () => {
  const [selectedOption, setSelectedOption] = useState<SelectOption | null>(null);
  const optionsList = [
    { id: '1', label: '選択肢A', value: 'A', icon: 'add' as IconName },
    { id: '2', label: '選択肢B', value: 'B', icon: 'add' as IconName },
    { id: '3', label: '選択肢C', value: 'C', icon: 'add' as IconName },
  ];

  return (
    <div>
      <TextInput placeholder="入力してください" />
      <Button>送信</Button>
      <Select
        size="x-small"
        variant="outline"
        placeholder="選択"
        selectedOption={selectedOption}
        onChange={(option) => setSelectedOption(option)}
        optionListMaxHeight={120}
      >
        {optionsList.map((option) => (
          <Select.Option key={option.id} option={option} />
        ))}
      </Select>
    </div>
  );
};

ライブラリの更新

重要: このライブラリのすべてのパッケージは、必ず同じバージョンで使用してください。

更新方法

最新バージョンに更新する場合：

# npmの場合
npm update @zenkigen-inc/component-ui @zenkigen-inc/component-config

# yarnの場合
yarn upgrade @zenkigen-inc/component-ui @zenkigen-inc/component-config

特定のバージョンにアップデートする場合：

# npmの場合（例: バージョン1.2.3にアップデート）
npm install @zenkigen-inc/[email protected] @zenkigen-inc/[email protected]

# yarnの場合（例: バージョン1.2.3にアップデート）
yarn add @zenkigen-inc/[email protected] @zenkigen-inc/[email protected]

依存パッケージ（component-theme、component-icons）も同じバージョンに自動的に更新されます。

バージョンの確認

インストールされているバージョンを確認するには：

# npmの場合
npm list @zenkigen-inc/component-ui @zenkigen-inc/component-config

# yarnの場合
yarn list --pattern "@zenkigen-inc/component-*"

または、package.json の dependencies セクションを確認してください。

コンポーネント一覧・仕様書

以下は利用可能なコンポーネントの一覧です。リンクがあるコンポーネントは詳細な仕様書が参照できます。

• Avatar
• Breadcrumb
• Button
• Checkbox
• Dropdown
• Evaluation Star
• File Input
• Heading
• Icon
• Icon Button
• Loading
• Modal
• Notification Inline
• Pagination
• Pagination Select
• Popover
• Popup
• Radio
• Search
• Segmented Control
• Select
• Select Sort
• Sort Button
• Tab
• Table
• Tag
• Text Area
• Text Input
• Password Input
• Popover
• Toast
• Toggle
• Tooltip
• Typography

Storybook

各コンポーネントの実装例とインタラクティブなデモは、Storybookで確認できます：

https://storybook.zenkigen.co.jp/

開発者向け

プロジェクト詳細ドキュメント

プロジェクトの詳細な技術資料は以下のドキュメントを参照してください：

• プロジェクト概要 - ドキュメント全体の概要
• プロジェクト構造 - パッケージ構成と相互関係
• コンポーネント実装パターン - 設計パターンと実装方針
• テーマシステム - テーマとTailwind CSS設定
• コーディングガイドライン - 開発時のコーディング標準と規約

ローカル開発環境でのStorybook

ローカル開発環境でStorybookを起動してコンポーネントの確認ができます：

# リポジトリのクローン
git clone https://github.com/zenkigen/zenkigen-component.git
cd zenkigen-component

# 依存関係のインストール
yarn install

# build
yarn build-lib:all

# Storybook起動
yarn storybook

ライセンス

zenkigen-component は MIT ライセンスに基づいています。
ただし、 @zenkigen-inc/component-icons の SVG ファイルは Shape の利用規約に準拠します。