jp-ui Components

方針

• 既存の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 で区別して良い。

推奨構成（最小形）

// 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> ); }

/* 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の責務をコメントで短く明示する。