@squadbase/vantage-template 0.1.1-dev1.57af5cd → 0.1.1-dev1.93eba00

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squadbase/vantage-template",
-  "version": "0.1.1-dev1.57af5cd",
+  "version": "0.1.1-dev1.93eba00",
   "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,54 +104,6 @@ const RANGE_OPTIONS: SegmentOption[] = [
   { label: "90 days", value: "90d" },
 ]
 
-function DashboardBody({ data }: { data: KpiSummary }) {
-  return (
-    <>
-      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-        {data.kpis.map((kpi) => {
-          const { label, icon: Icon, format } = KPI_META[kpi.id]
-          return (
-            <DashboardCard key={kpi.id}>
-              <DashboardCardHeader>
-                <DashboardCardTitle className="text-muted-foreground">
-                  {label}
-                </DashboardCardTitle>
-                <DashboardCardAction>
-                  <Icon className="size-4 text-muted-foreground" />
-                </DashboardCardAction>
-              </DashboardCardHeader>
-              <DashboardCardContent>
-                <Placeholder className="text-2xl font-bold">
-                  {format(kpi.value)}
-                </Placeholder>
-                <div className="mt-2">
-                  <Placeholder className="text-sm font-medium">
-                    {kpi.change >= 0 ? `+${kpi.change}%` : `${kpi.change}%`}
-                  </Placeholder>
-                </div>
-                <Sparkline
-                  data={kpi.sparklineData.map((v) => ({ value: v }))}
-                  height={32}
-                  area
-                  className="mt-3"
-                />
-              </DashboardCardContent>
-            </DashboardCard>
-          )
-        })}
-      </div>
-
-      <DashboardCardPreset title="Trend" description="Values over the selected period">
-        <EChart option={trendOption(data.trend)} height="320px" />
-      </DashboardCardPreset>
-
-      <DashboardCardPreset title="Top items" description="Ranked by value">
-        <TopItemsTable data={data.topItems} />
-      </DashboardCardPreset>
-    </>
-  )
-}
-
 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.
@@ -198,3 +150,51 @@ export default function HomePage() {
     </PageShell>
   )
 }
+
+function DashboardBody({ data }: { data: KpiSummary }) {
+  return (
+    <>
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        {data.kpis.map((kpi) => {
+          const { label, icon: Icon, format } = KPI_META[kpi.id]
+          return (
+            <DashboardCard key={kpi.id} data-sq-ref={kpi.id}>
+              <DashboardCardHeader>
+                <DashboardCardTitle className="text-muted-foreground">
+                  {label}
+                </DashboardCardTitle>
+                <DashboardCardAction>
+                  <Icon className="size-4 text-muted-foreground" />
+                </DashboardCardAction>
+              </DashboardCardHeader>
+              <DashboardCardContent>
+                <Placeholder className="text-2xl font-bold">
+                  {format(kpi.value)}
+                </Placeholder>
+                <div className="mt-2">
+                  <Placeholder className="text-sm font-medium">
+                    {kpi.change >= 0 ? `+${kpi.change}%` : `${kpi.change}%`}
+                  </Placeholder>
+                </div>
+                <Sparkline
+                  data={kpi.sparklineData.map((v) => ({ value: v }))}
+                  height={32}
+                  area
+                  className="mt-3"
+                />
+              </DashboardCardContent>
+            </DashboardCard>
+          )
+        })}
+      </div>
+
+      <DashboardCardPreset data-sq-ref="trend" title="Trend" description="Values over the selected period">
+        <EChart option={trendOption(data.trend)} height="320px" />
+      </DashboardCardPreset>
+
+      <DashboardCardPreset data-sq-ref="top-items" title="Top items" description="Ranked by value">
+        <TopItemsTable data={data.topItems} />
+      </DashboardCardPreset>
+    </>
+  )
+}

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

@@ -104,54 +104,6 @@ const RANGE_OPTIONS: SegmentOption[] = [
   { label: "90日", value: "90d" },
 ]
 
-function DashboardBody({ data }: { data: KpiSummary }) {
-  return (
-    <>
-      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-        {data.kpis.map((kpi) => {
-          const { label, icon: Icon, format } = KPI_META[kpi.id]
-          return (
-            <DashboardCard key={kpi.id}>
-              <DashboardCardHeader>
-                <DashboardCardTitle className="text-muted-foreground">
-                  {label}
-                </DashboardCardTitle>
-                <DashboardCardAction>
-                  <Icon className="size-4 text-muted-foreground" />
-                </DashboardCardAction>
-              </DashboardCardHeader>
-              <DashboardCardContent>
-                <Placeholder className="text-2xl font-bold">
-                  {format(kpi.value)}
-                </Placeholder>
-                <div className="mt-2">
-                  <Placeholder className="text-sm font-medium">
-                    {kpi.change >= 0 ? `+${kpi.change}%` : `${kpi.change}%`}
-                  </Placeholder>
-                </div>
-                <Sparkline
-                  data={kpi.sparklineData.map((v) => ({ value: v }))}
-                  height={32}
-                  area
-                  className="mt-3"
-                />
-              </DashboardCardContent>
-            </DashboardCard>
-          )
-        })}
-      </div>
-
-      <DashboardCardPreset title="トレンド" description="選択期間の値">
-        <EChart option={trendOption(data.trend)} height="320px" />
-      </DashboardCardPreset>
-
-      <DashboardCardPreset title="上位項目" description="値で並べ替え">
-        <TopItemsTable data={data.topItems} />
-      </DashboardCardPreset>
-    </>
-  )
-}
-
 export default function HomePage() {
   // 絞り込み状態は useState ではなく URL に置く。リロードで消えず、URL を
   // そのまま共有すれば相手も同じ画面を見られる。
@@ -198,3 +150,51 @@ export default function HomePage() {
     </PageShell>
   )
 }
+
+function DashboardBody({ data }: { data: KpiSummary }) {
+  return (
+    <>
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        {data.kpis.map((kpi) => {
+          const { label, icon: Icon, format } = KPI_META[kpi.id]
+          return (
+            <DashboardCard key={kpi.id} data-sq-ref={kpi.id}>
+              <DashboardCardHeader>
+                <DashboardCardTitle className="text-muted-foreground">
+                  {label}
+                </DashboardCardTitle>
+                <DashboardCardAction>
+                  <Icon className="size-4 text-muted-foreground" />
+                </DashboardCardAction>
+              </DashboardCardHeader>
+              <DashboardCardContent>
+                <Placeholder className="text-2xl font-bold">
+                  {format(kpi.value)}
+                </Placeholder>
+                <div className="mt-2">
+                  <Placeholder className="text-sm font-medium">
+                    {kpi.change >= 0 ? `+${kpi.change}%` : `${kpi.change}%`}
+                  </Placeholder>
+                </div>
+                <Sparkline
+                  data={kpi.sparklineData.map((v) => ({ value: v }))}
+                  height={32}
+                  area
+                  className="mt-3"
+                />
+              </DashboardCardContent>
+            </DashboardCard>
+          )
+        })}
+      </div>
+
+      <DashboardCardPreset data-sq-ref="trend" title="トレンド" description="選択期間の値">
+        <EChart option={trendOption(data.trend)} height="320px" />
+      </DashboardCardPreset>
+
+      <DashboardCardPreset data-sq-ref="top-items" title="上位項目" description="値で並べ替え">
+        <TopItemsTable data={data.topItems} />
+      </DashboardCardPreset>
+    </>
+  )
+}