@craftzbay/create-app 1.0.1 → 1.0.2
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.
package/dist/index.js
CHANGED
|
@@ -5,22 +5,17 @@ import { existsSync, mkdirSync, readFileSync, readdirSync, statSync, writeFileSy
|
|
|
5
5
|
import path from "path";
|
|
6
6
|
import { fileURLToPath } from "url";
|
|
7
7
|
import { spawnSync } from "child_process";
|
|
8
|
-
import {
|
|
9
|
-
cancel,
|
|
10
|
-
confirm,
|
|
11
|
-
intro,
|
|
12
|
-
isCancel,
|
|
13
|
-
log,
|
|
14
|
-
outro,
|
|
15
|
-
select,
|
|
16
|
-
text
|
|
17
|
-
} from "@clack/prompts";
|
|
8
|
+
import { cancel, confirm, intro, isCancel, log, outro, select, text } from "@clack/prompts";
|
|
18
9
|
import kleur from "kleur";
|
|
19
10
|
var __dirname = path.dirname(fileURLToPath(import.meta.url));
|
|
20
11
|
var TEMPLATES_DIR = path.resolve(__dirname, "../templates");
|
|
21
12
|
var TEMPLATES = [
|
|
22
13
|
{ id: "vite-blank", label: "Vite + Blank", hint: "Minimal Vite + React + @craftzbay/ui starter" },
|
|
23
|
-
{
|
|
14
|
+
{
|
|
15
|
+
id: "vite-dashboard",
|
|
16
|
+
label: "Vite + Dashboard",
|
|
17
|
+
hint: "Sidebar + TopNav dashboard shell, ready to wire data"
|
|
18
|
+
}
|
|
24
19
|
];
|
|
25
20
|
function detectPackageManager() {
|
|
26
21
|
const ua = process.env.npm_config_user_agent ?? "";
|
package/package.json
CHANGED
|
@@ -4,6 +4,12 @@
|
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
6
|
<title>__PROJECT_NAME__</title>
|
|
7
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
8
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
9
|
+
<link
|
|
10
|
+
href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap"
|
|
11
|
+
rel="stylesheet"
|
|
12
|
+
/>
|
|
7
13
|
</head>
|
|
8
14
|
<body>
|
|
9
15
|
<div id="root"></div>
|
|
@@ -4,6 +4,12 @@
|
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
6
|
<title>__PROJECT_NAME__</title>
|
|
7
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
8
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
9
|
+
<link
|
|
10
|
+
href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap"
|
|
11
|
+
rel="stylesheet"
|
|
12
|
+
/>
|
|
7
13
|
</head>
|
|
8
14
|
<body>
|
|
9
15
|
<div id="root"></div>
|
|
@@ -1,26 +1,200 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { useState } from 'react';
|
|
2
|
+
import {
|
|
3
|
+
Avatar,
|
|
4
|
+
Badge,
|
|
5
|
+
Button,
|
|
6
|
+
Card,
|
|
7
|
+
CardContent,
|
|
8
|
+
CardDescription,
|
|
9
|
+
CardHeader,
|
|
10
|
+
CardTitle,
|
|
11
|
+
EmptyState,
|
|
12
|
+
Icons,
|
|
13
|
+
Input,
|
|
14
|
+
Sidebar,
|
|
15
|
+
SidebarItem,
|
|
16
|
+
SidebarSection,
|
|
17
|
+
Table,
|
|
18
|
+
TableBody,
|
|
19
|
+
TableCell,
|
|
20
|
+
TableHead,
|
|
21
|
+
TableHeader,
|
|
22
|
+
TableRow,
|
|
23
|
+
Toaster,
|
|
24
|
+
TooltipProvider,
|
|
25
|
+
TopNav,
|
|
26
|
+
toast,
|
|
27
|
+
} from '@craftzbay/ui';
|
|
28
|
+
|
|
29
|
+
type NavKey = 'overview' | 'projects' | 'customers' | 'billing' | 'settings';
|
|
30
|
+
|
|
31
|
+
const stats = [
|
|
32
|
+
{ label: 'Revenue', value: '$48,200', delta: '+12.4%', tone: 'success' as const },
|
|
33
|
+
{ label: 'Active users', value: '2,310', delta: '+3.1%', tone: 'success' as const },
|
|
34
|
+
{ label: 'Open tickets', value: '14', delta: '-2', tone: 'neutral' as const },
|
|
35
|
+
{ label: 'Churn', value: '1.8%', delta: '+0.2%', tone: 'warning' as const },
|
|
36
|
+
];
|
|
37
|
+
|
|
38
|
+
const orders = [
|
|
39
|
+
{ id: 'ORD-1042', customer: 'Alex Morgan', amount: '$1,200.00', status: 'Paid' },
|
|
40
|
+
{ id: 'ORD-1041', customer: 'Jamie Lee', amount: '$340.00', status: 'Pending' },
|
|
41
|
+
{ id: 'ORD-1040', customer: 'Sam Patel', amount: '$89.00', status: 'Failed' },
|
|
42
|
+
{ id: 'ORD-1039', customer: 'Riley Chen', amount: '$2,050.00', status: 'Paid' },
|
|
43
|
+
];
|
|
44
|
+
|
|
45
|
+
const statusTone = { Paid: 'success', Pending: 'warning', Failed: 'danger' } as const;
|
|
2
46
|
|
|
3
47
|
const Brand = () => (
|
|
4
48
|
<span className="flex items-center gap-2 text-sm font-semibold">
|
|
5
|
-
<span className="inline-flex size-6 items-center justify-center rounded-md
|
|
6
|
-
|
|
49
|
+
<span className="bg-accent text-on-accent inline-flex size-6 items-center justify-center rounded-md text-xs">
|
|
50
|
+
<Icons.Zap className="size-3.5" />
|
|
7
51
|
</span>
|
|
8
52
|
__PROJECT_NAME__
|
|
9
53
|
</span>
|
|
10
54
|
);
|
|
11
55
|
|
|
12
56
|
export function App() {
|
|
57
|
+
const [active, setActive] = useState<NavKey>('overview');
|
|
58
|
+
|
|
13
59
|
return (
|
|
14
60
|
<TooltipProvider>
|
|
15
|
-
<
|
|
16
|
-
<
|
|
17
|
-
<
|
|
18
|
-
|
|
19
|
-
|
|
61
|
+
<div className="bg-background text-foreground flex min-h-screen">
|
|
62
|
+
<Sidebar header={<Brand />}>
|
|
63
|
+
<SidebarSection label="Workspace">
|
|
64
|
+
<SidebarItem
|
|
65
|
+
icon={<Icons.Home />}
|
|
66
|
+
active={active === 'overview'}
|
|
67
|
+
onClick={() => setActive('overview')}
|
|
68
|
+
>
|
|
69
|
+
Overview
|
|
70
|
+
</SidebarItem>
|
|
71
|
+
<SidebarItem
|
|
72
|
+
icon={<Icons.Folder />}
|
|
73
|
+
active={active === 'projects'}
|
|
74
|
+
onClick={() => setActive('projects')}
|
|
75
|
+
>
|
|
76
|
+
Projects
|
|
77
|
+
</SidebarItem>
|
|
78
|
+
<SidebarItem
|
|
79
|
+
icon={<Icons.Users />}
|
|
80
|
+
active={active === 'customers'}
|
|
81
|
+
onClick={() => setActive('customers')}
|
|
82
|
+
trailing={<Badge tone="accent">3</Badge>}
|
|
83
|
+
>
|
|
84
|
+
Customers
|
|
85
|
+
</SidebarItem>
|
|
86
|
+
</SidebarSection>
|
|
87
|
+
<SidebarSection label="Account">
|
|
88
|
+
<SidebarItem
|
|
89
|
+
icon={<Icons.CreditCard />}
|
|
90
|
+
active={active === 'billing'}
|
|
91
|
+
onClick={() => setActive('billing')}
|
|
92
|
+
>
|
|
93
|
+
Billing
|
|
94
|
+
</SidebarItem>
|
|
95
|
+
<SidebarItem
|
|
96
|
+
icon={<Icons.Settings />}
|
|
97
|
+
active={active === 'settings'}
|
|
98
|
+
onClick={() => setActive('settings')}
|
|
99
|
+
>
|
|
100
|
+
Settings
|
|
101
|
+
</SidebarItem>
|
|
102
|
+
</SidebarSection>
|
|
103
|
+
</Sidebar>
|
|
104
|
+
|
|
105
|
+
<div className="flex min-w-0 flex-1 flex-col">
|
|
106
|
+
<TopNav
|
|
107
|
+
logo={<span className="text-sm font-medium capitalize">{active}</span>}
|
|
108
|
+
search={<Input type="search" placeholder="Search…" aria-label="Search" />}
|
|
109
|
+
actions={
|
|
110
|
+
<>
|
|
111
|
+
<Button
|
|
112
|
+
variant="ghost"
|
|
113
|
+
size="sm"
|
|
114
|
+
aria-label="Notifications"
|
|
115
|
+
onClick={() => toast({ title: 'No new notifications' })}
|
|
116
|
+
>
|
|
117
|
+
<Icons.Bell />
|
|
118
|
+
</Button>
|
|
119
|
+
<Avatar fallback="AM" alt="Alex Morgan" size="sm" />
|
|
120
|
+
</>
|
|
121
|
+
}
|
|
20
122
|
/>
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
123
|
+
|
|
124
|
+
<main className="flex flex-1 flex-col gap-6 p-6">
|
|
125
|
+
{active === 'overview' ? (
|
|
126
|
+
<>
|
|
127
|
+
<div className="flex items-center justify-between">
|
|
128
|
+
<div>
|
|
129
|
+
<h1 className="text-lg font-semibold">Overview</h1>
|
|
130
|
+
<p className="text-foreground-muted text-sm">
|
|
131
|
+
Replace this with your own data — every section is a primitive.
|
|
132
|
+
</p>
|
|
133
|
+
</div>
|
|
134
|
+
<Button onClick={() => toast({ title: 'Report queued', variant: 'success' })}>
|
|
135
|
+
<Icons.Download />
|
|
136
|
+
Export
|
|
137
|
+
</Button>
|
|
138
|
+
</div>
|
|
139
|
+
|
|
140
|
+
<div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
|
|
141
|
+
{stats.map((s) => (
|
|
142
|
+
<Card key={s.label}>
|
|
143
|
+
<CardHeader>
|
|
144
|
+
<CardDescription>{s.label}</CardDescription>
|
|
145
|
+
<CardTitle className="text-2xl tabular-nums">{s.value}</CardTitle>
|
|
146
|
+
</CardHeader>
|
|
147
|
+
<CardContent>
|
|
148
|
+
<Badge tone={s.tone}>{s.delta}</Badge>
|
|
149
|
+
</CardContent>
|
|
150
|
+
</Card>
|
|
151
|
+
))}
|
|
152
|
+
</div>
|
|
153
|
+
|
|
154
|
+
<Card>
|
|
155
|
+
<CardHeader>
|
|
156
|
+
<CardTitle>Recent orders</CardTitle>
|
|
157
|
+
<CardDescription>Last 24 hours.</CardDescription>
|
|
158
|
+
</CardHeader>
|
|
159
|
+
<CardContent>
|
|
160
|
+
<Table>
|
|
161
|
+
<TableHeader>
|
|
162
|
+
<TableRow>
|
|
163
|
+
<TableHead>Order</TableHead>
|
|
164
|
+
<TableHead>Customer</TableHead>
|
|
165
|
+
<TableHead>Status</TableHead>
|
|
166
|
+
<TableHead className="text-right">Amount</TableHead>
|
|
167
|
+
</TableRow>
|
|
168
|
+
</TableHeader>
|
|
169
|
+
<TableBody>
|
|
170
|
+
{orders.map((o) => (
|
|
171
|
+
<TableRow key={o.id}>
|
|
172
|
+
<TableCell className="font-mono text-xs">{o.id}</TableCell>
|
|
173
|
+
<TableCell>{o.customer}</TableCell>
|
|
174
|
+
<TableCell>
|
|
175
|
+
<Badge tone={statusTone[o.status as keyof typeof statusTone]} dot>
|
|
176
|
+
{o.status}
|
|
177
|
+
</Badge>
|
|
178
|
+
</TableCell>
|
|
179
|
+
<TableCell className="text-right tabular-nums">{o.amount}</TableCell>
|
|
180
|
+
</TableRow>
|
|
181
|
+
))}
|
|
182
|
+
</TableBody>
|
|
183
|
+
</Table>
|
|
184
|
+
</CardContent>
|
|
185
|
+
</Card>
|
|
186
|
+
</>
|
|
187
|
+
) : (
|
|
188
|
+
<EmptyState
|
|
189
|
+
title={`Nothing in ${active} yet`}
|
|
190
|
+
description="This page is a placeholder — build it from @craftzbay/ui primitives."
|
|
191
|
+
action={<Button onClick={() => setActive('overview')}>Back to overview</Button>}
|
|
192
|
+
/>
|
|
193
|
+
)}
|
|
194
|
+
</main>
|
|
195
|
+
</div>
|
|
196
|
+
</div>
|
|
197
|
+
<Toaster />
|
|
24
198
|
</TooltipProvider>
|
|
25
199
|
);
|
|
26
200
|
}
|