@squadbase/vantage-template 0.1.1-dev1.3f269fd → 0.1.1-dev1.4031dbf

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squadbase/vantage-template",
-  "version": "0.1.1-dev1.3f269fd",
+  "version": "0.1.1-dev1.4031dbf",
   "description": "CLI tool for initializing and customizing Squadbase Vantage projects.",
   "keywords": [
     "squadbase",

package/ui-templates/CLAUDE.md

@@ -96,6 +96,8 @@ server/api/<endpoint>.ts                 # ★ サンプルデータ + GET ハ
 | --- | --- |
 | `PageShell*` / `DashboardCard*` / `EChart` / `EChartsOption` / `DataTable*` / `ColumnDef` / `DateRangePicker` / `FilterBar*` / `FunnelSteps` / `MetricValue` / `TrendIndicator` / `StatusBadge` / `SegmentedControl` / `MultiSelect` / `SearchableSelect` / `SectionHeader` / `AppShell` / `Placeholder` / `Sparkline` | `@squadbase/vantage/components` |
 | `Button` / `Input` / `Badge` / `Tabs*` / `ToggleGroup*` / `Table*` / `Select*` / `Dialog*` / `cn` ほか shadcn プリミティブ | `@squadbase/vantage/ui` |
+
+型付きチャート(`LineChart` / `AreaChart` / `BarChart` / `DonutChart` / `BarList` / `CategoryBar` / `ProgressCircle` / `Tracker`、`@squadbase/vantage/components`)と `Avatar` / `Pagination` / `RadioGroup` / `AlertDialog` / `Drawer` / `Toaster` / `Field` / `Combobox` / `HoverCard` / `Kbd`(`@squadbase/vantage/ui`)は 0.6.3 で入った。雛形の依存が `^0.5.3` の間は使わない(上の EChart の書き方のまま)。
 | `definePage` | `@squadbase/vantage` |
 | `Link` / `Outlet` / `useParams` / `useSearch` / `useNavigate` / `useRoutes` / `useCurrentRoute` / `useSearchParam` / `useSearchState` | `@squadbase/vantage/router` |
 | `useApiQuery` / `useApiMutation` / `useQuery` / `useMutation` / `apiFetch` | `@squadbase/vantage/query` |

package/ui-templates/kpi-chart-simple/pages/index.tsx

@@ -104,6 +104,53 @@ const RANGE_OPTIONS: SegmentOption[] = [
   { label: "90 days", value: "90d" },
 ]
 
+export default function HomePage() {
+  // Filter state belongs in the URL rather than `useState`: it survives a
+  // reload, and a pasted link reproduces exactly what you were looking at.
+  const [range, setRange] = useSearchParam("range", "30d")
+
+  // `search` goes into the query string *and* the cache key, so changing the
+  // range refetches instead of serving the previous window.
+  const summary = useApiQuery<KpiSummary>("/api/kpi-summary", { search: { range } })
+
+  return (
+    <PageShell>
+      <PageShellHeader>
+        <PageShellHeading>
+          <PageShellTitle>[Template] Performance overview</PageShellTitle>
+          <PageShellDescription>
+            Key metrics and trends for the selected period.
+          </PageShellDescription>
+        </PageShellHeading>
+        <PageShellHeaderEnd>
+          <SegmentedControl
+            options={RANGE_OPTIONS}
+            value={range}
+            onChange={setRange}
+            ariaLabel="Period"
+          />
+        </PageShellHeaderEnd>
+      </PageShellHeader>
+
+      <PageShellContent className="space-y-6">
+        {summary.isPending ? (
+          <Loading />
+        ) : summary.isError ? (
+          // `summary.error` is an `ApiError`: `message` is the text the handler
+          // passed to `HttpError`, so there is no cast and no generic wording.
+          <ErrorState
+            title="Could not load the dashboard"
+            message={summary.error.message}
+            action={<Button onClick={() => void summary.refetch()}>Retry</Button>}
+          />
+        ) : (
+          <DashboardBody data={summary.data} />
+        )}
+      </PageShellContent>
+    </PageShell>
+  )
+}
+
 function DashboardBody({ data }: { data: KpiSummary }) {
   return (
     <>
@@ -151,50 +198,3 @@ function DashboardBody({ data }: { data: KpiSummary }) {
     </>
   )
 }
-
-export default function HomePage() {
-  // Filter state belongs in the URL rather than `useState`: it survives a
-  // reload, and a pasted link reproduces exactly what you were looking at.
-  const [range, setRange] = useSearchParam("range", "30d")
-
-  // `search` goes into the query string *and* the cache key, so changing the
-  // range refetches instead of serving the previous window.
-  const summary = useApiQuery<KpiSummary>("/api/kpi-summary", { search: { range } })
-
-  return (
-    <PageShell>
-      <PageShellHeader>
-        <PageShellHeading>
-          <PageShellTitle>[Template] Performance overview</PageShellTitle>
-          <PageShellDescription>
-            Key metrics and trends for the selected period.
-          </PageShellDescription>
-        </PageShellHeading>
-        <PageShellHeaderEnd>
-          <SegmentedControl
-            options={RANGE_OPTIONS}
-            value={range}
-            onChange={setRange}
-            ariaLabel="Period"
-          />
-        </PageShellHeaderEnd>
-      </PageShellHeader>
-
-      <PageShellContent className="space-y-6">
-        {summary.isPending ? (
-          <Loading />
-        ) : summary.isError ? (
-          // `summary.error` is an `ApiError`: `message` is the text the handler
-          // passed to `HttpError`, so there is no cast and no generic wording.
-          <ErrorState
-            title="Could not load the dashboard"
-            message={summary.error.message}
-            action={<Button onClick={() => void summary.refetch()}>Retry</Button>}
-          />
-        ) : (
-          <DashboardBody data={summary.data} />
-        )}
-      </PageShellContent>
-    </PageShell>
-  )
-}

package/ui-templates/kpi-chart-simple-ja/pages/index.tsx

@@ -104,6 +104,53 @@ const RANGE_OPTIONS: SegmentOption[] = [
   { label: "90日", value: "90d" },
 ]
 
+export default function HomePage() {
+  // 絞り込み状態は useState ではなく URL に置く。リロードで消えず、URL を
+  // そのまま共有すれば相手も同じ画面を見られる。
+  const [range, setRange] = useSearchParam("range", "30d")
+
+  // search はクエリ文字列とキャッシュキーの両方に入るので、期間を変えると
+  // 前の期間のデータを返さずに再取得される。
+  const summary = useApiQuery<KpiSummary>("/api/kpi-summary", { search: { range } })
+
+  return (
+    <PageShell>
+      <PageShellHeader>
+        <PageShellHeading>
+          <PageShellTitle>[テンプレート] パフォーマンス概要</PageShellTitle>
+          <PageShellDescription>
+            選択期間の主要指標とトレンド。
+          </PageShellDescription>
+        </PageShellHeading>
+        <PageShellHeaderEnd>
+          <SegmentedControl
+            options={RANGE_OPTIONS}
+            value={range}
+            onChange={setRange}
+            ariaLabel="期間"
+          />
+        </PageShellHeaderEnd>
+      </PageShellHeader>
+
+      <PageShellContent className="space-y-6">
+        {summary.isPending ? (
+          <Loading />
+        ) : summary.isError ? (
+          // summary.error は ApiError。message にはハンドラが HttpError に
+          // 渡した文言がそのまま入るので、キャストも汎用文言も要らない。
+          <ErrorState
+            title="ダッシュボードを読み込めませんでした"
+            message={summary.error.message}
+            action={<Button onClick={() => void summary.refetch()}>再試行</Button>}
+          />
+        ) : (
+          <DashboardBody data={summary.data} />
+        )}
+      </PageShellContent>
+    </PageShell>
+  )
+}
+
 function DashboardBody({ data }: { data: KpiSummary }) {
   return (
     <>
@@ -151,50 +198,3 @@ function DashboardBody({ data }: { data: KpiSummary }) {
     </>
   )
 }
-
-export default function HomePage() {
-  // 絞り込み状態は useState ではなく URL に置く。リロードで消えず、URL を
-  // そのまま共有すれば相手も同じ画面を見られる。
-  const [range, setRange] = useSearchParam("range", "30d")
-
-  // search はクエリ文字列とキャッシュキーの両方に入るので、期間を変えると
-  // 前の期間のデータを返さずに再取得される。
-  const summary = useApiQuery<KpiSummary>("/api/kpi-summary", { search: { range } })
-
-  return (
-    <PageShell>
-      <PageShellHeader>
-        <PageShellHeading>
-          <PageShellTitle>[テンプレート] パフォーマンス概要</PageShellTitle>
-          <PageShellDescription>
-            選択期間の主要指標とトレンド。
-          </PageShellDescription>
-        </PageShellHeading>
-        <PageShellHeaderEnd>
-          <SegmentedControl
-            options={RANGE_OPTIONS}
-            value={range}
-            onChange={setRange}
-            ariaLabel="期間"
-          />
-        </PageShellHeaderEnd>
-      </PageShellHeader>
-
-      <PageShellContent className="space-y-6">
-        {summary.isPending ? (
-          <Loading />
-        ) : summary.isError ? (
-          // summary.error は ApiError。message にはハンドラが HttpError に
-          // 渡した文言がそのまま入るので、キャストも汎用文言も要らない。
-          <ErrorState
-            title="ダッシュボードを読み込めませんでした"
-            message={summary.error.message}
-            action={<Button onClick={() => void summary.refetch()}>再試行</Button>}
-          />
-        ) : (
-          <DashboardBody data={summary.data} />
-        )}
-      </PageShellContent>
-    </PageShell>
-  )
-}