@alexgorbatchev/shadcn 0.0.38 → 0.0.42

package/templates/prototype/src/prototypes/projects/components/Projects.tsx

@@ -0,0 +1,151 @@
+import { useState, type ReactElement } from "react";
+import {
+  AppShell,
+  Button,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  Field,
+  FieldGroup,
+  FieldLabel,
+  Input,
+  PageHeader,
+  Table,
+  TableHeader,
+  TableHead,
+  TableBody,
+  TableRow,
+  TableCell,
+} from "@alexgorbatchev/shadcn";
+import type { PrototypeProps } from "../../../types";
+import { ScenarioContent } from "../../../components/ScenarioContent";
+import { projects } from "../data";
+
+type Project = (typeof projects)[number];
+
+export function Projects({ scenario }: PrototypeProps): ReactElement {
+  const [records, setRecords] = useState(projects);
+  const [search, setSearch] = useState("");
+  const [editing, setEditing] = useState<Project | null>(null);
+  const [message, setMessage] = useState("");
+  const visible = records.filter((project) =>
+    `${project.name} ${project.owner}`.toLowerCase().includes(search.toLowerCase()),
+  );
+  return (
+    <AppShell brand="Northstar" header="Projects" navigation={[]}>
+      <PageHeader title="Projects" description="Find a project and update its details." />
+      <ScenarioContent scenario={scenario}>
+        <FieldGroup>
+          <Field>
+            <FieldLabel htmlFor="search">Search projects</FieldLabel>
+            <Input id="search" value={search} onChange={(event) => setSearch(event.target.value)} />
+          </Field>
+        </FieldGroup>
+        <Card>
+          <CardHeader>
+            <CardTitle>Project directory</CardTitle>
+            <CardDescription>{visible.length} projects</CardDescription>
+          </CardHeader>
+          <CardContent>
+            {visible.length ? (
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Project</TableHead>
+                    <TableHead>Owner</TableHead>
+                    <TableHead>Action</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {visible.map((project) => (
+                    <TableRow key={project.id}>
+                      <TableCell>{project.name}</TableCell>
+                      <TableCell>{project.owner}</TableCell>
+                      <TableCell>
+                        <Button
+                          variant="outline"
+                          aria-label={`Edit ${project.name}`}
+                          onClick={() => setEditing({ ...project })}
+                        >
+                          Edit
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            ) : (
+              <Empty>
+                <EmptyHeader>
+                  <EmptyTitle>No matching projects</EmptyTitle>
+                </EmptyHeader>
+              </Empty>
+            )}
+          </CardContent>
+        </Card>
+        <p role="status">{message}</p>
+        <Dialog
+          open={editing !== null}
+          onOpenChange={(open) => {
+            if (!open) setEditing(null);
+          }}
+        >
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Edit project</DialogTitle>
+              <DialogDescription>Changes stay in this prototype until you reset it.</DialogDescription>
+            </DialogHeader>
+            {editing && (
+              <form
+                onSubmit={(event) => {
+                  event.preventDefault();
+                  setRecords((current) => current.map((project) => (project.id === editing.id ? editing : project)));
+                  setMessage(`Saved ${editing.name}`);
+                  setEditing(null);
+                }}
+              >
+                <FieldGroup>
+                  <Field>
+                    <FieldLabel htmlFor="project-name">Project name</FieldLabel>
+                    <Input
+                      id="project-name"
+                      required
+                      value={editing.name}
+                      onChange={(event) => setEditing({ ...editing, name: event.target.value })}
+                    />
+                  </Field>
+                  <Field>
+                    <FieldLabel htmlFor="project-owner">Owner</FieldLabel>
+                    <Input
+                      id="project-owner"
+                      required
+                      value={editing.owner}
+                      onChange={(event) => setEditing({ ...editing, owner: event.target.value })}
+                    />
+                  </Field>
+                </FieldGroup>
+                <DialogFooter>
+                  <Button type="button" variant="outline" onClick={() => setEditing(null)}>
+                    Cancel
+                  </Button>
+                  <Button type="submit">Save project</Button>
+                </DialogFooter>
+              </form>
+            )}
+          </DialogContent>
+        </Dialog>
+      </ScenarioContent>
+    </AppShell>
+  );
+}

package/templates/prototype/src/prototypes/projects/data.ts

@@ -0,0 +1,5 @@
+export const projects = [
+  { id: "onboarding", name: "Onboarding redesign", owner: "Ada Lovelace" },
+  { id: "reporting", name: "Usage reporting", owner: "Grace Hopper" },
+  { id: "interviews", name: "Customer interviews", owner: "Margaret Hamilton" },
+];

package/templates/prototype/src/prototypes/projects/prototype.ts

@@ -0,0 +1,9 @@
+import type { PrototypeDefinition } from "../../types";
+import { Projects } from "./components/Projects";
+
+const prototype: PrototypeDefinition = {
+  title: "Projects",
+  description: "Search projects and edit their details.",
+  component: Projects,
+};
+export default prototype;

package/templates/prototype/src/prototypes/settings/components/Settings.tsx

@@ -0,0 +1,72 @@
+import { useState, type ReactElement } from "react";
+import {
+  AppShell,
+  Button,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  Field,
+  FieldGroup,
+  FieldLabel,
+  Input,
+  PageHeader,
+  Switch,
+} from "@alexgorbatchev/shadcn";
+import type { PrototypeProps } from "../../../types";
+import { ScenarioContent } from "../../../components/ScenarioContent";
+
+export function Settings({ scenario }: PrototypeProps): ReactElement {
+  const [name, setName] = useState("Northstar");
+  const [email, setEmail] = useState("team@example.com");
+  const [notifications, setNotifications] = useState(true);
+  const [message, setMessage] = useState("");
+  return (
+    <AppShell brand="Northstar" header="Settings" navigation={[]}>
+      <PageHeader title="Workspace settings" description="Manage the profile and preferences for your team." />
+      <ScenarioContent scenario={scenario}>
+        <form
+          onSubmit={(event) => {
+            event.preventDefault();
+            setMessage(`Saved ${name}. Email updates ${notifications ? "enabled" : "disabled"} for ${email}.`);
+          }}
+        >
+          <Card>
+            <CardHeader>
+              <CardTitle>Workspace profile</CardTitle>
+              <CardDescription>These settings use local sample data.</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <FieldGroup>
+                <Field>
+                  <FieldLabel htmlFor="workspace-name">Workspace name</FieldLabel>
+                  <Input id="workspace-name" required value={name} onChange={(event) => setName(event.target.value)} />
+                </Field>
+                <Field>
+                  <FieldLabel htmlFor="email">Contact email</FieldLabel>
+                  <Input
+                    id="email"
+                    type="email"
+                    required
+                    value={email}
+                    onChange={(event) => setEmail(event.target.value)}
+                  />
+                </Field>
+                <Field orientation="horizontal">
+                  <Switch id="notifications" checked={notifications} onCheckedChange={setNotifications} />
+                  <FieldLabel htmlFor="notifications">Email updates</FieldLabel>
+                </Field>
+              </FieldGroup>
+            </CardContent>
+            <CardFooter>
+              <Button type="submit">Save settings</Button>
+            </CardFooter>
+          </Card>
+        </form>
+        <p role="status">{message}</p>
+      </ScenarioContent>
+    </AppShell>
+  );
+}

package/templates/prototype/src/prototypes/settings/prototype.ts

@@ -0,0 +1,9 @@
+import type { PrototypeDefinition } from "../../types";
+import { Settings } from "./components/Settings";
+
+const prototype: PrototypeDefinition = {
+  title: "Settings",
+  description: "Edit a workspace profile and notification preferences.",
+  component: Settings,
+};
+export default prototype;

package/templates/prototype/src/styles.css

@@ -0,0 +1,7 @@
+@import "tailwindcss";
+@import "@alexgorbatchev/shadcn/theme.css";
+@source "../node_modules/@alexgorbatchev/shadcn/dist";
+
+#root {
+  isolation: isolate;
+}

package/templates/prototype/src/types.ts

@@ -0,0 +1,9 @@
+import type { ComponentType } from "react";
+
+export type Scenario = "populated" | "empty" | "loading" | "error";
+export type PrototypeProps = { scenario: Scenario };
+export type PrototypeDefinition = {
+  title: string;
+  description: string;
+  component: ComponentType<PrototypeProps>;
+};

package/templates/prototype/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "types": ["vite/client", "bun"]
+  },
+  "include": ["src", "vite.config.ts"]
+}

package/templates/prototype/vite.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  server: { host: "127.0.0.1", strictPort: true, headers: { "Cache-Control": "no-store" } },
+});