@squadbase/vantage-template 0.1.0-dev.a6b88b8 → 0.1.0-dev1.23da1b2

package/base-template/package.json

@@ -12,8 +12,8 @@
   },
   "dependencies": {
     "@squadbase/react": "^0.1.0",
-    "@squadbase/vantage": "0.6.0-dev.3cc6138",
-    "@squadbase/vantage-sdk": "^0.1.0",
+    "@squadbase/vantage": "0.6.1-dev1.354b39b",
+    "@squadbase/vantage-sdk": "0.1.1-dev1.25f1dd3",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.468.0",
     "react": "^19.2.7",

package/base-template/pipelines/pyproject.toml

@@ -2,4 +2,4 @@
 name = "pipelines"
 version = "0.1.0"
 requires-python = ">=3.11"
-dependencies = ["adamas>=0.2.0", "pandas", "requests"]
+dependencies = ["adamas>=0.3.0", "pandas", "requests"]

package/base-template/squadbase.yml

@@ -3,3 +3,4 @@ version: "1"
 build:
   framework: squadbase-vantage
   runtime: node20
+  package_manager: bun

package/base-template/src/_layout.tsx

@@ -1,6 +1,6 @@
 import type { ComponentProps } from "react"
 import { SquadbaseProvider } from "@squadbase/react"
-import { Link, Outlet, useCurrentRoute, useRoutes } from "@squadbase/vantage/router"
+import { Link, Outlet, useCurrentRoute, useNavigate, useRoutes } from "@squadbase/vantage/router"
 import { AppShell } from "@squadbase/vantage/components"
 import type { NavGroup } from "@squadbase/vantage/components"
 
@@ -50,6 +50,7 @@ function useNavGroups(): NavGroup[] {
  * 「Something went wrong」のままリロードするまで残る。
  */
 export default function RootLayout() {
+  const navigate = useNavigate()
   return (
     <SquadbaseProvider>
       <AppShell
@@ -57,6 +58,7 @@ export default function RootLayout() {
         groups={useNavGroups()}
         actions={<UserCard />}
         linkComponent={RouterLink}
+        onNavigate={(href) => navigate({ to: href })}
       >
         <BuildRecovery>
           <Outlet />

package/base-template/src/index.tsx

@@ -1,6 +1,7 @@
 import { definePage } from "@squadbase/vantage"
 import {
   DashboardCardPreset,
+  EChart,
   PageShell,
   PageShellContent,
   PageShellDescription,
@@ -8,6 +9,8 @@ import {
   PageShellHeading,
   PageShellTitle,
   Placeholder,
+  Sparkline,
+  type EChartsOption,
 } from "@squadbase/vantage/components"
 
 export const page = definePage({
@@ -17,13 +20,49 @@ export const page = definePage({
 })
 
 const METRICS = [
-  { label: "Metric 1", value: "1,234" },
-  { label: "Metric 2", value: "5,678" },
-  { label: "Metric 3", value: "90.1%" },
-  { label: "Metric 4", value: "$12.3k" },
+  { label: "Metric 1", value: "1,234", trend: [3, 4, 3, 5, 6, 5, 7] },
+  { label: "Metric 2", value: "5,678", trend: [6, 5, 6, 4, 5, 6, 6] },
+  { label: "Metric 3", value: "90.1%", trend: [2, 3, 5, 4, 6, 7, 8] },
+  { label: "Metric 4", value: "$12.3k", trend: [5, 6, 4, 6, 5, 7, 6] },
 ]
 
-const CHARTS = ["Chart 1", "Chart 2"]
+// Sample charts. `EChart` paints series with `--chart-1..5` and the sparklines
+// use `--primary` (both from `styles.css`), so a theme change shows up here.
+const BAR_OPTION: EChartsOption = {
+  legend: { top: 0 },
+  grid: { top: 36, right: 8, bottom: 24, left: 36 },
+  xAxis: { type: "category", data: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"] },
+  yAxis: { type: "value" },
+  series: [
+    { name: "Series A", type: "bar", data: [12, 18, 15, 22, 26, 24] },
+    { name: "Series B", type: "bar", data: [8, 11, 13, 12, 16, 19] },
+    { name: "Series C", type: "bar", data: [5, 7, 6, 9, 8, 11] },
+  ],
+}
+
+const PIE_OPTION: EChartsOption = {
+  legend: { bottom: 0 },
+  series: [
+    {
+      type: "pie",
+      radius: ["45%", "70%"],
+      center: ["50%", "45%"],
+      label: { show: false },
+      data: [
+        { name: "Category A", value: 35 },
+        { name: "Category B", value: 25 },
+        { name: "Category C", value: 18 },
+        { name: "Category D", value: 12 },
+        { name: "Category E", value: 10 },
+      ],
+    },
+  ],
+}
+
+const CHARTS = [
+  { title: "Chart 1", option: BAR_OPTION },
+  { title: "Chart 2", option: PIE_OPTION },
+]
 
 export default function HomePage() {
   return (
@@ -42,14 +81,20 @@ export default function HomePage() {
           {METRICS.map((metric) => (
             <DashboardCardPreset key={metric.label} title={metric.label}>
               <Placeholder className="text-2xl font-bold">{metric.value}</Placeholder>
+              <Sparkline
+                className="mt-2"
+                data={metric.trend.map((value) => ({ value }))}
+                color="text-primary"
+                area
+              />
             </DashboardCardPreset>
           ))}
         </section>
 
         <section className="grid grid-cols-1 gap-4 lg:grid-cols-2">
-          {CHARTS.map((title) => (
-            <DashboardCardPreset key={title} title={title}>
-              <Placeholder className="h-64 w-full" />
+          {CHARTS.map((chart) => (
+            <DashboardCardPreset key={chart.title} title={chart.title}>
+              <EChart option={chart.option} height={256} ariaLabel={chart.title} />
             </DashboardCardPreset>
           ))}
         </section>

package/dist/index.js

@@ -1022,27 +1022,36 @@ function initProject(options) {
     applyChartPreset(targetDir, options.chart);
     log("cyan", `  chart preset: ${options.chart}`);
   }
+  const packageManager = isBunAvailable() ? "bun" : "npm";
   if (options.skipInstall) {
     log("green", "\nProject initialized successfully!");
     log("dim", "\nNext steps:");
-    log("dim", "  npm install");
-    log("dim", "  npm run dev");
+    log("dim", `  ${packageManager} install`);
+    log("dim", `  ${packageManager} run dev`);
     return;
   }
-  log("green", "\nInstalling dependencies...");
-  const install = spawnSync("npm", ["install"], {
+  log("green", `
+Installing dependencies with ${packageManager}...`);
+  const install = spawnSync(packageManager, ["install"], {
     cwd: targetDir,
     stdio: "inherit",
     shell: process.platform === "win32"
   });
   if (install.error || install.status !== 0) {
     log("red", "\nDependency installation failed.");
-    log("yellow", "Run 'npm install' manually in the project directory.");
+    log("yellow", `Run '${packageManager} install' manually in the project directory.`);
     process.exit(1);
   }
   log("green", "\nProject initialized successfully!");
   log("dim", "\nNext steps:");
-  log("dim", "  npm run dev");
+  log("dim", `  ${packageManager} run dev`);
+}
+function isBunAvailable() {
+  const probe = spawnSync("bun", ["--version"], {
+    stdio: "ignore",
+    shell: process.platform === "win32"
+  });
+  return !probe.error && probe.status === 0;
 }
 
 // src/commands/list.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squadbase/vantage-template",
-  "version": "0.1.0-dev.a6b88b8",
+  "version": "0.1.0-dev1.23da1b2",
   "description": "CLI tool for initializing and customizing Squadbase Vantage projects.",
   "keywords": [
     "squadbase",
@@ -42,7 +42,7 @@
     "type-check": "tsc",
     "agents": "node scripts/build-agents.cjs",
     "agents:check": "node scripts/build-agents.cjs --check",
-    "template:install": "npm --prefix template ci",
+    "template:install": "bun install --cwd template --frozen-lockfile",
     "template:build": "npm --prefix template run build",
     "prepublishOnly": "npm run agents:check && npm run build",
     "release": "npm publish --@squadbase:registry=https://registry.npmjs.org",

package/ui-templates/chart-grid/pages/index.tsx

@@ -223,7 +223,7 @@ function heatmapOption(
         type: "heatmap",
         data: data.map((c) => [xAxis.indexOf(c.x), yAxis.indexOf(c.y), c.value]),
         label: { show: false },
-        emphasis: { itemStyle: { shadowBlur: 8, shadowColor: "rgba(0,0,0,0.4)" } },
+        emphasis: { itemStyle: { shadowBlur: 8 } },
       },
     ],
   }

package/ui-templates/chart-grid-ja/pages/index.tsx

@@ -223,7 +223,7 @@ function heatmapOption(
         type: "heatmap",
         data: data.map((c) => [xAxis.indexOf(c.x), yAxis.indexOf(c.y), c.value]),
         label: { show: false },
-        emphasis: { itemStyle: { shadowBlur: 8, shadowColor: "rgba(0,0,0,0.4)" } },
+        emphasis: { itemStyle: { shadowBlur: 8 } },
       },
     ],
   }

package/ui-templates/funnel/pages/index.tsx

@@ -113,13 +113,13 @@ const summaryCards = [
     label: "Best step",
     value: "31.9%",
     sub: "Highest step conversion",
-    icon: <TrendingUp className="size-4 text-emerald-600" />,
+    icon: <TrendingUp className="size-4 text-chart-2" />,
   },
   {
     label: "Biggest drop",
     value: "68.2%",
     sub: "Largest step drop-off",
-    icon: <TrendingDown className="size-4 text-rose-600" />,
+    icon: <TrendingDown className="size-4 text-destructive" />,
   },
 ]
 

package/ui-templates/funnel-ja/pages/index.tsx

@@ -112,13 +112,13 @@ const summaryCards = [
     label: "最良ステップ",
     value: "31.9%",
     sub: "最も高いステップ転換率",
-    icon: <TrendingUp className="size-4 text-emerald-600" />,
+    icon: <TrendingUp className="size-4 text-chart-2" />,
   },
   {
     label: "最大の離脱",
     value: "68.2%",
     sub: "最大のステップ離脱率",
-    icon: <TrendingDown className="size-4 text-rose-600" />,
+    icon: <TrendingDown className="size-4 text-destructive" />,
   },
 ]