jp-ui Components

Name: jp-ui-components
Rating: 76
Author: yumehiko

方針

•既存のPageに合わせる: src/pages/ColorsPage.*, src/pages/IconsPage.*, src/pages/TypesettingPage.* を基準にする。
•Pageは基本「背景・文字色・上下余白」を持つラッパーで、中身は適切なmax-widthのコンテナで中央寄せする。
•「幅を満たす系（Field, InputBoxなど）」も、コンテナの幅はmax-widthで制限し、要素はコンテナ幅100% にする。
•ルールを守らない実装が出やすいので、幅・中央寄せ・コンテナ構造は明示的にコード化する。

実装ルール（必須）

•
Pageラッパー
- •padding と background/color を指定する。
- •例: padding: 32px 16px 80px; background-color: var(--surface); color: var(--on-surface);
•
中央寄せコンテナ
- •max-width は デフォルト 640px とする。
- •特別な指定がある場合のみ、その数値を使う（例: 一覧/グリッドで max-width: 960px）。
- •margin: 0 auto; width: 100%; を指定する。
•
幅を満たす系アイテム（Field, InputBox など）
- •コンテナ内で width: 100% とし、コンテナのmax-widthで制約する。
- •画面全幅に引き伸ばさない。必ず中央寄せコンテナの中に置く。

コンポーネント作成ルール（必須）

•
Base UIラッパーが原則
- •Base UIコンポーネントは原則ラッパーTSXを作り、利用体験を統一する（className自動付与・variant/slotの共通化など）。
- •例外として、ラッパーが不要なほど単純な場合のみBase UIを直接使用する。
•
render/useRenderの維持
- •Base UIのrenderの仕組みは壊さない。className が関数のときも必ずマージする。
- •自前コンポーネントはuseRenderを使い、renderを透過できるAPIにする。
•
テンプレ利用
- •Base UIラッパーは templates/base-ui-wrapper.tsx をベースに作成する。
- •自前コンポーネントは templates/custom-use-render.tsx をベースに作成する。
•
Exampleを正にする
- •各コンポーネントには Example.tsx を同階層に作り、Exampleを実装例の正とする。
- •StorybookのDefaultは render: () => <Example /> を基本とする。
- •docs/llm は Example を元に自動生成されるため、Exampleが実装例の唯一の情報源になる。
- •同一ディレクトリに複数コンポーネントがある場合は *Example.tsx で区別して良い。

推奨構成（最小形）

tsx

// src/pages/FooPage.tsx
import styles from './FooPage.module.css';

export function FooPage() {
  return (
    <div className={styles.Page}>
      <div className={styles.Container}>
        {/* contents */}
      </div>
    </div>
  );
}

css

/* src/pages/FooPage.module.css */
.Page {
  padding: 32px 16px 80px;
  background-color: var(--surface);
  color: var(--on-surface);
}

.Container {
  width: 100%;
  max-width: 640px; /* default. override when specified */
  margin: 0 auto;
}

追加メモ

•既存Pageの実装に合わせて、display: grid や gap は必要に応じて追加する。
•ルールがぶれそうな場合は、Containerの責務をコメントで短く明示する。