npm - @craftzbay/create-app - Versions diffs - 1.0.1 → 1.0.3 - Mend

@craftzbay/create-app 1.0.1 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md +8 -8
package/dist/index.js +7 -12
package/package.json +2 -2
package/templates/vite-blank/index.html +6 -0
package/templates/vite-dashboard/index.html +6 -0
package/templates/vite-dashboard/src/App.tsx +185 -11

package/README.md CHANGED Viewed

@@ -21,10 +21,10 @@ pnpm dev
 ## Templates
-| ID                | What you get                                                          |
-| ----------------- | --------------------------------------------------------------------- |
-| `vite-blank`      | Minimal Vite + React + `@craftzbay/ui` starter (Card + Input + Switch) |
-| `vite-dashboard`  | `AppShell` + `Dashboard` template, ready to wire data                 |
+| ID               | What you get                                                           |
+| ---------------- | ---------------------------------------------------------------------- |
+| `vite-blank`     | Minimal Vite + React + `@craftzbay/ui` starter (Card + Input + Switch) |
+| `vite-dashboard` | `AppShell` + `Dashboard` template, ready to wire data                  |
 Pass `--template <id>` to skip the picker:
@@ -43,7 +43,7 @@ npm create @craftzbay/app my-app -- --template vite-dashboard
 ## Docs
-- Showcase: <https://components.runestonetechnologies.com>
-- Components: <https://components.runestonetechnologies.com/#components>
-- Templates: <https://components.runestonetechnologies.com/#templates>
-- Guides: <https://components.runestonetechnologies.com/#guides>
+- Showcase: <https://ui.gecore.mn>
+- Components: <https://ui.gecore.mn/#components>
+- Templates: <https://ui.gecore.mn/#templates>
+- Guides: <https://ui.gecore.mn/#guides>

package/dist/index.js CHANGED Viewed

@@ -5,22 +5,17 @@ import { existsSync, mkdirSync, readFileSync, readdirSync, statSync, writeFileSy
 import path from "path";
 import { fileURLToPath } from "url";
 import { spawnSync } from "child_process";
-import {
-  cancel,
-  confirm,
-  intro,
-  isCancel,
-  log,
-  outro,
-  select,
-  text
-} from "@clack/prompts";
+import { cancel, confirm, intro, isCancel, log, outro, select, text } from "@clack/prompts";
 import kleur from "kleur";
 var __dirname = path.dirname(fileURLToPath(import.meta.url));
 var TEMPLATES_DIR = path.resolve(__dirname, "../templates");
 var TEMPLATES = [
   { id: "vite-blank", label: "Vite + Blank", hint: "Minimal Vite + React + @craftzbay/ui starter" },
-  { id: "vite-dashboard", label: "Vite + Dashboard", hint: "AppShell + Dashboard template, ready to wire data" }
+  {
+    id: "vite-dashboard",
+    label: "Vite + Dashboard",
+    hint: "Sidebar + TopNav dashboard shell, ready to wire data"
+  }
 ];
 function detectPackageManager() {
   const ua = process.env.npm_config_user_agent ?? "";
@@ -197,7 +192,7 @@ async function run() {
       ...installNow ? [] : [`    ${kleur.cyan(`${pm} install`)}`],
       `    ${kleur.cyan(`${pm} run dev`)}`,
       "",
-      kleur.gray("  Docs: https://components.runestonetechnologies.com")
+      kleur.gray("  Docs: https://ui.gecore.mn")
     ].join("\n")
   );
 }

package/package.json CHANGED Viewed

@@ -1,10 +1,10 @@
 {
   "name": "@craftzbay/create-app",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Scaffold a new project preconfigured with @craftzbay/ui. Invoke via `npm create @craftzbay/app my-app`.",
   "license": "MIT",
   "author": "craftzbay",
-  "homepage": "https://components.runestonetechnologies.com",
+  "homepage": "https://ui.gecore.mn",
   "repository": {
     "type": "git",
     "url": "https://github.com/craftzbay/craftzbay-ui.git",

package/templates/vite-blank/index.html CHANGED Viewed

@@ -4,6 +4,12 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>__PROJECT_NAME__</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <div id="root"></div>

package/templates/vite-dashboard/index.html CHANGED Viewed

@@ -4,6 +4,12 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>__PROJECT_NAME__</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <div id="root"></div>

package/templates/vite-dashboard/src/App.tsx CHANGED Viewed

@@ -1,26 +1,200 @@
-import { AppShell, Dashboard, ToastProvider, ToastViewport, TooltipProvider } from '@craftzbay/ui';
+import { useState } from 'react';
+import {
+  Avatar,
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  EmptyState,
+  Icons,
+  Input,
+  Sidebar,
+  SidebarItem,
+  SidebarSection,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Toaster,
+  TooltipProvider,
+  TopNav,
+  toast,
+} from '@craftzbay/ui';
+type NavKey = 'overview' | 'projects' | 'customers' | 'billing' | 'settings';
+const stats = [
+  { label: 'Revenue', value: '$48,200', delta: '+12.4%', tone: 'success' as const },
+  { label: 'Active users', value: '2,310', delta: '+3.1%', tone: 'success' as const },
+  { label: 'Open tickets', value: '14', delta: '-2', tone: 'neutral' as const },
+  { label: 'Churn', value: '1.8%', delta: '+0.2%', tone: 'warning' as const },
+];
+const orders = [
+  { id: 'ORD-1042', customer: 'Alex Morgan', amount: '$1,200.00', status: 'Paid' },
+  { id: 'ORD-1041', customer: 'Jamie Lee', amount: '$340.00', status: 'Pending' },
+  { id: 'ORD-1040', customer: 'Sam Patel', amount: '$89.00', status: 'Failed' },
+  { id: 'ORD-1039', customer: 'Riley Chen', amount: '$2,050.00', status: 'Paid' },
+];
+const statusTone = { Paid: 'success', Pending: 'warning', Failed: 'danger' } as const;
 const Brand = () => (
   <span className="flex items-center gap-2 text-sm font-semibold">
-    <span className="inline-flex size-6 items-center justify-center rounded-md bg-accent text-on-accent text-xs">
-      ✦
+    <span className="bg-accent text-on-accent inline-flex size-6 items-center justify-center rounded-md text-xs">
+      <Icons.Zap className="size-3.5" />
     </span>
     __PROJECT_NAME__
   </span>
 );
 export function App() {
+  const [active, setActive] = useState<NavKey>('overview');
   return (
     <TooltipProvider>
-      <ToastProvider>
-        <AppShell brand={<Brand />} active="home">
-          <Dashboard
-            title="Overview"
-            subtitle="Replace this with your own data — every section is a prop."
+      <div className="bg-background text-foreground flex min-h-screen">
+        <Sidebar header={<Brand />}>
+          <SidebarSection label="Workspace">
+            <SidebarItem
+              icon={<Icons.Home />}
+              active={active === 'overview'}
+              onClick={() => setActive('overview')}
+            >
+              Overview
+            </SidebarItem>
+            <SidebarItem
+              icon={<Icons.Folder />}
+              active={active === 'projects'}
+              onClick={() => setActive('projects')}
+            >
+              Projects
+            </SidebarItem>
+            <SidebarItem
+              icon={<Icons.Users />}
+              active={active === 'customers'}
+              onClick={() => setActive('customers')}
+              trailing={<Badge tone="accent">3</Badge>}
+            >
+              Customers
+            </SidebarItem>
+          </SidebarSection>
+          <SidebarSection label="Account">
+            <SidebarItem
+              icon={<Icons.CreditCard />}
+              active={active === 'billing'}
+              onClick={() => setActive('billing')}
+            >
+              Billing
+            </SidebarItem>
+            <SidebarItem
+              icon={<Icons.Settings />}
+              active={active === 'settings'}
+              onClick={() => setActive('settings')}
+            >
+              Settings
+            </SidebarItem>
+          </SidebarSection>
+        </Sidebar>
+        <div className="flex min-w-0 flex-1 flex-col">
+          <TopNav
+            logo={<span className="text-sm font-medium capitalize">{active}</span>}
+            search={<Input type="search" placeholder="Search…" aria-label="Search" />}
+            actions={
+              <>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  aria-label="Notifications"
+                  onClick={() => toast({ title: 'No new notifications' })}
+                >
+                  <Icons.Bell />
+                </Button>
+                <Avatar fallback="AM" alt="Alex Morgan" size="sm" />
+              </>
+            }
           />
-        </AppShell>
-        <ToastViewport />
-      </ToastProvider>
+          <main className="flex flex-1 flex-col gap-6 p-6">
+            {active === 'overview' ? (
+              <>
+                <div className="flex items-center justify-between">
+                  <div>
+                    <h1 className="text-lg font-semibold">Overview</h1>
+                    <p className="text-foreground-muted text-sm">
+                      Replace this with your own data — every section is a primitive.
+                    </p>
+                  </div>
+                  <Button onClick={() => toast({ title: 'Report queued', variant: 'success' })}>
+                    <Icons.Download />
+                    Export
+                  </Button>
+                </div>
+                <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+                  {stats.map((s) => (
+                    <Card key={s.label}>
+                      <CardHeader>
+                        <CardDescription>{s.label}</CardDescription>
+                        <CardTitle className="text-2xl tabular-nums">{s.value}</CardTitle>
+                      </CardHeader>
+                      <CardContent>
+                        <Badge tone={s.tone}>{s.delta}</Badge>
+                      </CardContent>
+                    </Card>
+                  ))}
+                </div>
+                <Card>
+                  <CardHeader>
+                    <CardTitle>Recent orders</CardTitle>
+                    <CardDescription>Last 24 hours.</CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <Table>
+                      <TableHeader>
+                        <TableRow>
+                          <TableHead>Order</TableHead>
+                          <TableHead>Customer</TableHead>
+                          <TableHead>Status</TableHead>
+                          <TableHead className="text-right">Amount</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {orders.map((o) => (
+                          <TableRow key={o.id}>
+                            <TableCell className="font-mono text-xs">{o.id}</TableCell>
+                            <TableCell>{o.customer}</TableCell>
+                            <TableCell>
+                              <Badge tone={statusTone[o.status as keyof typeof statusTone]} dot>
+                                {o.status}
+                              </Badge>
+                            </TableCell>
+                            <TableCell className="text-right tabular-nums">{o.amount}</TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  </CardContent>
+                </Card>
+              </>
+            ) : (
+              <EmptyState
+                title={`Nothing in ${active} yet`}
+                description="This page is a placeholder — build it from @craftzbay/ui primitives."
+                action={<Button onClick={() => setActive('overview')}>Back to overview</Button>}
+              />
+            )}
+          </main>
+        </div>
+      </div>
+      <Toaster />
     </TooltipProvider>
   );
 }