@godxjp/ui 31.31.7 → 32.0.0

package/docs/data-display/thumbnail.tsx

@@ -1,128 +0,0 @@
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  Thumbnail,
-} from "@godxjp/ui/data-display";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-
-import coverTerrain from "../assets/cover-terrain.svg";
-import portraitIris from "../assets/portrait-iris.svg";
-import shotLandscape from "../assets/shot-landscape.svg";
-import shotPortrait from "../assets/shot-portrait.svg";
-
-/* Committed SVG files under docs/assets, imported so the bundler rewrites each URL against
- * PREVIEW_BASE. A docs page must never fetch a third-party image: on CI the request never
- * settles, `networkidle` never fires, and the page load times out. */
-
-/** Four DIFFERENT intrinsic ratios — the case AspectRatio cannot express with one number. */
-const SHOTS = [
-  { src: shotPortrait, width: 360, height: 640, alt: "モバイル版の一覧画面" },
-  { src: shotLandscape, width: 960, height: 540, alt: "デスクトップ版のダッシュボード" },
-  { src: coverTerrain, width: 480, height: 270, alt: "ストア掲載用のカバー画像" },
-  { src: portraitIris, width: 96, height: 96, alt: "アプリアイコン" },
-];
-
-/**
- * Thumbnail — 高さは固定、幅は画像そのものの比率。囲みは画像に直接かかる hairline。
- *
- * AspectRatio は比率を固定して幅 100% に広げるので、比率の違う数枚を並べるとレターボックスか
- * 切り抜きになる。Avatar は人・組織の識別マーク、Card は囲みと画像のあいだに padding を入れる、
- * CardCover は Card の中のスロット。Composed only from real @godxjp/ui components.
- */
-export default function Demo() {
-  return (
-    <PageContainer title="Thumbnail" subtitle="高さ固定・幅は実寸比 · 画像に直接かかる hairline">
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>比率の違う画像を 1 行に並べる</CardTitle>
-            <CardDescription>
-              縦長・横長・ワイド・正方形が同じ行に並んでも、高さはそろい、幅はそれぞれの比率の
-              まま。切り抜きもレターボックスも起きません。狭い画面では折り返します。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex gap="sm" wrap align="start">
-              {SHOTS.map((shot) => (
-                <Thumbnail key={shot.alt} size="lg" {...shot} />
-              ))}
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>size · sm · md（既定）· lg</CardTitle>
-            <CardDescription>
-              sm 64px は添付ファイルの行に、md 96px はギャラリー行に、lg 160px は画像そのものが
-              本文である審査画面に。px 指定はありません。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex direction="col" gap="md">
-              <Flex gap="sm" wrap align="start">
-                <Thumbnail size="sm" {...SHOTS[0]} />
-                <Thumbnail size="sm" {...SHOTS[1]} />
-              </Flex>
-              <Flex gap="sm" wrap align="start">
-                <Thumbnail {...SHOTS[0]} />
-                <Thumbnail {...SHOTS[1]} />
-              </Flex>
-              <Flex gap="sm" wrap align="start">
-                <Thumbnail size="lg" {...SHOTS[0]} />
-                <Thumbnail size="lg" {...SHOTS[1]} />
-              </Flex>
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>読み込み前に幅を確保する</CardTitle>
-            <CardDescription>
-              幅が実寸比のままということは、画像が届くまで幅が決まらないということでもあります。
-              元ファイルの width / height をそのまま渡すと、ブラウザが比率を先に知るので、
-              高さが固定されている分だけ最初の描画から最終的な幅になります。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex gap="sm" wrap align="start">
-              <Thumbnail
-                src={shotPortrait}
-                width={360}
-                height={640}
-                alt="幅を先に確保した縦長の画面"
-              />
-              <Thumbnail
-                src={shotLandscape}
-                width={960}
-                height={540}
-                alt="幅を先に確保した横長の画面"
-                loading="lazy"
-              />
-            </Flex>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>alt は省略できない</CardTitle>
-            <CardDescription>
-              型の上で必須です。ページが既に述べていることしか写っていない画像には alt=&quot;&quot;
-              を渡します —— 空文字は著者が下す「決定」で、属性そのものを書き忘れるのとは違います
-              （WCAG 1.1.1）。
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Flex gap="sm" wrap align="start">
-              <Thumbnail src={coverTerrain} width={480} height={270} alt="" />
-            </Flex>
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}

package/docs/data-display/timeline-grid.tsx

@@ -1,119 +0,0 @@
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  TimelineGrid,
-  type TimelineGridColumnProp,
-  type TimelineGridEventProp,
-} from "@godxjp/ui/data-display";
-import { Flex, PageContainer } from "@godxjp/ui/layout";
-
-/**
- * TimelineGrid — a vertical hour axis, one column per day, and event blocks placed by start time
- * and duration. It is the time-axis half of the Timeline family; Timeline itself is one lane of
- * ordered events with no scale.
- */
-const WEEK: TimelineGridColumnProp[] = [
-  { id: "05-11", label: "月 11" },
-  { id: "05-12", label: "火 12" },
-  { id: "05-13", label: "水 13" },
-  { id: "05-14", label: "木 14", description: "本日", current: true },
-  { id: "05-15", label: "金 15" },
-];
-
-const SHIFTS: TimelineGridEventProp[] = [
-  { id: "s1", columnId: "05-11", start: "09:00", end: "22:00", title: "通し", description: "佐藤" },
-  { id: "s2", columnId: "05-12", start: "06:00", end: "22:00", title: "有給", description: "鈴木" },
-  { id: "s3", columnId: "05-14", start: "09:00", end: "17:30", title: "早番", description: "田中" },
-  { id: "s4", columnId: "05-14", start: "13:00", end: "22:00", title: "遅番", description: "高橋" },
-  // end at or before start = the shift runs into the next day (夜勤 22:00–06:00).
-  { id: "s5", columnId: "05-14", start: "22:00", end: "06:00", title: "夜勤", description: "伊藤" },
-  { id: "s6", columnId: "05-15", start: "09:00", end: "17:30", title: "早番", description: "佐藤" },
-  { id: "s7", columnId: "05-15", start: "18:00", end: "21:00", title: "残業", description: "鈴木" },
-];
-
-// One column, a finer axis, and a colour carried by the record itself — the day view of the same
-// data. `color` is decorative: the block still prints its hours and its title as text.
-const ROOMS: TimelineGridColumnProp[] = [
-  { id: "a", label: "会議室 A", description: "12名" },
-  { id: "b", label: "会議室 B", description: "6名" },
-];
-
-const BOOKINGS: TimelineGridEventProp[] = [
-  {
-    id: "b1",
-    columnId: "a",
-    start: "09:30",
-    end: "10:30",
-    title: "定例会",
-    description: "営業部",
-    color: "var(--wa-gunjo)",
-  },
-  {
-    id: "b2",
-    columnId: "a",
-    start: "10:00",
-    end: "11:00",
-    title: "面談",
-    description: "人事",
-    color: "var(--wa-akane)",
-  },
-  {
-    id: "b3",
-    columnId: "b",
-    start: "13:00",
-    end: "14:30",
-    title: "設計レビュー",
-    description: "開発部",
-    color: "var(--wa-wakatake)",
-  },
-];
-
-export default function Demo() {
-  return (
-    <PageContainer title="TimelineGrid" subtitle="時間軸に沿って予定ブロックを置く週／日グリッド">
-      <Flex direction="col" gap="lg">
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>週シフト</CardTitle>
-            <CardDescription>
-              start / end で軸を 06:00–24:00 に固定し、interval=2
-              で2時間ごとに目盛りを引きます。木曜の早番と遅番は時間が重なるため、自動で横に並びます。
-            </CardDescription>
-          </CardHeader>
-          <CardContent flush>
-            <TimelineGrid
-              label="週シフト 2026年5月11日〜15日"
-              columns={WEEK}
-              events={SHIFTS}
-              start="06:00"
-              end="24:00"
-              interval={2}
-              now="14:35"
-            />
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle level={2}>会議室の予約</CardTitle>
-            <CardDescription>
-              start / end を省略すると、軸は予定の範囲から自動で決まります。onEventSelect
-              を渡すと各ブロックが button になり、キーボードでも選べます。
-            </CardDescription>
-          </CardHeader>
-          <CardContent flush>
-            <TimelineGrid
-              label="会議室の予約 5月14日"
-              columns={ROOMS}
-              events={BOOKINGS}
-              onEventSelect={() => {}}
-            />
-          </CardContent>
-        </Card>
-      </Flex>
-    </PageContainer>
-  );
-}