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