Jp UI Components

jp-ui Components

方針

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

実装ルール（必須）

1. Pageラッパー

   • padding と background/color を指定する。
   • 例: padding: 32px 16px 80px; background-color: var(--surface); color: var(--on-surface);

2. 中央寄せコンテナ

   • max-width は デフォルト 640px とする。
   • 特別な指定がある場合のみ、その数値を使う（例: 一覧/グリッドで max-width: 960px）。
   • margin: 0 auto; width: 100%; を指定する。

3. 幅を満たす系アイテム（Field, InputBox など）

   • コンテナ内で width: 100% とし、コンテナのmax-widthで制約する。
   • 画面全幅に引き伸ばさない。必ず中央寄せコンテナの中に置く。

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

1. Base UIラッパーが原則

   • Base UIコンポーネントは原則ラッパーTSXを作り、利用体験を統一する（className自動付与・variant/slotの共通化など）。
   • 例外として、ラッパーが不要なほど単純な場合のみBase UIを直接使用する。

2. render/useRenderの維持

   • Base UIのrenderの仕組みは壊さない。className が関数のときも必ずマージする。
   • 自前コンポーネントはuseRenderを使い、renderを透過できるAPIにする。

3. テンプレ利用

   • Base UIラッパーは templates/base-ui-wrapper.tsx をベースに作成する。
   • 自前コンポーネントは templates/custom-use-render.tsx をベースに作成する。

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