@alexgorbatchev/shadcn 0.0.38 → 0.0.41

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" } },
+});