jigsaw_engine 0.4.0

data/app/javascript/seeds/blocks/dashboard-ui/form-layouts-2/render.jsx

@@ -0,0 +1,332 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import { Textarea } from "@/components/ui/textarea";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { useState } from "react";
+
+const workspaces = [
+  {
+    id: 1,
+    title: "Starter",
+    description: "Up to 10,000 requests per day.",
+    users: "Free"
+  },
+  {
+    id: 2,
+    title: "Premium",
+    description: "500,000 requests per day¹",
+    users: "$900/month²"
+  },
+  {
+    id: 3,
+    title: "Enterprise",
+    description: "Based on your specific needs",
+    users: "Custom"
+  }
+];
+
+export default function Example() {
+  const [selectedWorkspace, setSelectedWorkspace] = useState(workspaces[0]);
+
+  return (
+    <div className="mx-auto flex max-w-3xl items-center justify-center p-10">
+      <form>
+        <div className="grid grid-cols-1 gap-10 md:grid-cols-3">
+          <div>
+            <h2 className="text-foreground dark:text-foreground font-semibold">
+              Personal information
+            </h2>
+            <p className="text-muted-foreground dark:text-muted-foreground mt-1 text-sm leading-6">
+              Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
+            </p>
+          </div>
+          <div className="sm:max-w-3xl md:col-span-2">
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-6">
+              <div className="col-span-full sm:col-span-3">
+                <Label
+                  htmlFor="first-name"
+                  className="text-foreground dark:text-foreground text-sm font-medium">
+                  First name
+                </Label>
+                <Input
+                  type="text"
+                  id="first-name"
+                  name="first-name"
+                  autoComplete="given-name"
+                  placeholder="Emma"
+                  className="mt-2"
+                />
+              </div>
+              <div className="col-span-full sm:col-span-3">
+                <Label
+                  htmlFor="last-name"
+                  className="text-foreground dark:text-foreground text-sm font-medium">
+                  Last name
+                </Label>
+                <Input
+                  type="text"
+                  id="last-name"
+                  name="last-name"
+                  autoComplete="family-name"
+                  placeholder="Crown"
+                  className="mt-2"
+                />
+              </div>
+              <div className="col-span-full">
+                <Label
+                  htmlFor="email"
+                  className="text-foreground dark:text-foreground text-sm font-medium">
+                  Email
+                </Label>
+                <Input
+                  type="email"
+                  id="email"
+                  name="email"
+                  autoComplete="email"
+                  placeholder="emma@company.com"
+                  className="mt-2"
+                />
+              </div>
+              <div className="col-span-full sm:col-span-3">
+                <Label
+                  htmlFor="birthyear"
+                  className="text-foreground dark:text-foreground text-sm font-medium">
+                  Birth year
+                </Label>
+                <Input
+                  type="number"
+                  id="birthyear"
+                  name="year"
+                  placeholder="1990"
+                  className="mt-2"
+                />
+              </div>
+              <div className="col-span-full sm:col-span-3">
+                <Label
+                  htmlFor="role"
+                  className="text-foreground dark:text-foreground text-sm font-medium">
+                  Role
+                </Label>
+                <Input
+                  type="text"
+                  id="role"
+                  name="role"
+                  placeholder="Senior Manager"
+                  disabled
+                  className="mt-2"
+                />
+                <p className="text-muted-foreground dark:text-muted-foreground mt-2 text-xs">
+                  Roles can only be changed by system admin.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <Separator className="my-8" />
+        <div className="grid grid-cols-1 gap-10 md:grid-cols-3">
+          <div>
+            <h2 className="text-foreground dark:text-foreground font-semibold">
+              Workspace settings
+            </h2>
+            <p className="text-muted-foreground dark:text-muted-foreground mt-1 text-sm leading-6">
+              Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
+            </p>
+          </div>
+          <div className="sm:max-w-3xl md:col-span-2">
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-6">
+              <div className="col-span-full sm:col-span-3">
+                <Label
+                  htmlFor="workspace-name"
+                  className="text-foreground dark:text-foreground text-sm font-medium">
+                  Workspace name
+                </Label>
+                <Input
+                  type="text"
+                  id="workspace-name"
+                  name="workspace-name"
+                  placeholder="Test workspace"
+                  className="mt-2"
+                />
+              </div>
+              <div className="col-span-full sm:col-span-3">
+                <Label
+                  htmlFor="visibility"
+                  className="text-foreground dark:text-foreground text-sm font-medium">
+                  Visibility
+                </Label>
+                <Select name="visibility" defaultValue="private">
+                  <SelectTrigger id="visibility" className="mt-2 w-full">
+                    <SelectValue placeholder="Select visibility" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="public">Public</SelectItem>
+                    <SelectItem value="private">Private</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="col-span-full">
+                <Label
+                  htmlFor="workspace-description"
+                  className="text-foreground dark:text-foreground text-sm font-medium">
+                  Workspace description
+                </Label>
+                <Textarea
+                  id="workspace-description"
+                  name="workspace-description"
+                  className="mt-2"
+                  rows={4}
+                />
+                <p className="text-muted-foreground dark:text-muted-foreground mt-2 text-xs">
+                  Note: description provided will not be displayed externally.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <Separator className="my-8" />
+        <div className="grid grid-cols-1 gap-10 md:grid-cols-3">
+          <div>
+            <h2 className="text-foreground dark:text-foreground font-semibold">
+              Notification settings
+            </h2>
+            <p className="text-muted-foreground dark:text-muted-foreground mt-1 text-sm leading-6">
+              Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
+            </p>
+          </div>
+          <div className="sm:max-w-3xl md:col-span-2">
+            <fieldset>
+              <legend className="text-foreground dark:text-foreground text-sm font-medium">
+                Team
+              </legend>
+              <p className="text-muted-foreground dark:text-muted-foreground mt-1 text-sm leading-6">
+                Configure the types of team alerts you want to receive.
+              </p>
+              <div className="mt-2">
+                <div className="flex items-center gap-x-3 py-1">
+                  <Checkbox id="team-requests" name="team-requests" defaultChecked />
+                  <Label
+                    htmlFor="team-requests"
+                    className="text-foreground dark:text-foreground text-sm font-medium">
+                    Team join requests
+                  </Label>
+                </div>
+                <div className="flex items-center gap-x-3 py-1">
+                  <Checkbox id="team-activity-digest" name="team-activity-digest" />
+                  <Label
+                    htmlFor="team-activity-digest"
+                    className="text-foreground dark:text-foreground text-sm font-medium">
+                    Weekly team activity digest
+                  </Label>
+                </div>
+                <div className="flex items-center gap-x-3 py-1">
+                  <Checkbox id="api-requests" name="api-requests" />
+                  <Label
+                    htmlFor="api-requests"
+                    className="text-foreground dark:text-foreground text-sm font-medium">
+                    API requests
+                  </Label>
+                </div>
+                <div className="flex items-center gap-x-3 py-1">
+                  <Checkbox id="workspace-execution" name="workspace-execution" defaultChecked />
+                  <Label
+                    htmlFor="workspace-execution"
+                    className="text-foreground dark:text-foreground text-sm font-medium">
+                    Workspace loading times
+                  </Label>
+                </div>
+                <div className="flex items-center gap-x-3 py-1">
+                  <Checkbox id="query-caching" name="query-caching" defaultChecked />
+                  <Label
+                    htmlFor="query-caching"
+                    className="text-foreground dark:text-foreground text-sm font-medium">
+                    Query caching
+                  </Label>
+                </div>
+                <div className="flex items-center gap-x-3 py-1">
+                  <Checkbox id="storage" name="storage" />
+                  <Label
+                    htmlFor="storage"
+                    className="text-foreground dark:text-foreground text-sm font-medium">
+                    Storage
+                  </Label>
+                </div>
+              </div>
+            </fieldset>
+          </div>
+        </div>
+        <Separator className="my-8" />
+
+        <div className="grid grid-cols-1 gap-10 md:grid-cols-3">
+          <div>
+            <h2 className="text-foreground dark:text-foreground font-semibold">
+              Select a workspace package
+            </h2>
+            <p className="text-muted-foreground dark:text-muted-foreground mt-1 text-sm leading-6">
+              Lorem ipsum dolor sit amet.
+            </p>
+          </div>
+          <div className="sm:max-w-3xl md:col-span-2">
+            <fieldset>
+              <RadioGroup
+                className="grid grid-cols-1 gap-5 sm:grid-cols-3"
+                defaultValue={selectedWorkspace.id.toString()}
+                onValueChange={(value) =>
+                  setSelectedWorkspace(
+                    workspaces.find((workspace) => workspace.id.toString() === value) ||
+                      workspaces[0]
+                  )
+                }>
+                {workspaces.map((item) => (
+                  <div
+                    key={item.id.toString()}
+                    className="border-input has-data-[state=checked]:border-ring relative flex flex-col gap-2 rounded-md border p-4 shadow-xs outline-none">
+                    <div className="flex justify-between">
+                      <RadioGroupItem
+                        id={item.id.toString()}
+                        value={item.id.toString()}
+                        className="order-1 after:absolute after:inset-0"
+                      />
+
+                      <Label
+                        htmlFor={item.id.toString()}
+                        className="text-foreground block text-sm font-medium">
+                        {item.title}
+                      </Label>
+                    </div>
+                    <div className="flex h-full flex-col justify-between">
+                      <p className="text-muted-foreground mt-1 text-sm">{item.description}</p>
+                      <span className="text-foreground mt-4 block text-sm font-medium">
+                        {item.users}
+                      </span>
+                    </div>
+                  </div>
+                ))}
+              </RadioGroup>
+            </fieldset>
+          </div>
+        </div>
+        <Separator className="my-8" />
+        <div className="flex items-center justify-end space-x-4">
+          <Button type="button" variant="outline" className="whitespace-nowrap">
+            Go back
+          </Button>
+          <Button type="submit" className="whitespace-nowrap">
+            Save settings
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+}

data/app/javascript/seeds/blocks/dashboard-ui/modal-dialogs-1/config.json

@@ -0,0 +1 @@
+{}

data/app/javascript/seeds/blocks/dashboard-ui/modal-dialogs-1/data.js

@@ -0,0 +1 @@
+export default function(shared, config) { return config }

data/app/javascript/seeds/blocks/dashboard-ui/modal-dialogs-1/render.jsx

@@ -0,0 +1,121 @@
+"use client";
+
+import React from "react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import Link from "next/link";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+
+const formSchema = z.object({
+  email: z.string().email(),
+  password: z
+    .string()
+    .min(8, { message: "Password must be at least 8 characters" }),
+});
+
+export default function LoginForm() {
+  const [open, setOpen] = React.useState(true);
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      email: "",
+      password: "",
+    },
+  });
+
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    console.log(values);
+  }
+
+  return (
+    <div className="flex h-screen w-full items-center justify-center px-4">
+      <div className="mx-auto flex w-full max-w-sm flex-col items-center gap-8">
+        <Dialog open={open} onOpenChange={setOpen}>
+          <DialogTrigger asChild>
+            <Button variant="outline">Login</Button>
+          </DialogTrigger>
+          <DialogContent className="sm:max-w-sm">
+            <div className="flex flex-col gap-4">
+              <div className="mb-6 space-y-4 text-center">
+                <img src="/logo.svg" className="mx-auto size-10" alt="" />
+                <h1 className="font-heading text-center text-2xl">
+                  Sign in to your account
+                </h1>
+              </div>
+
+              <Form {...form}>
+                <form
+                  onSubmit={form.handleSubmit(onSubmit)}
+                  className="w-full space-y-4 lg:space-y-6"
+                >
+                  <FormField
+                    control={form.control}
+                    name="email"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Email</FormLabel>
+                        <FormControl>
+                          <Input type="email" {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name="password"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel className="flex justify-between">
+                          Password{" "}
+                          <Link
+                            href="#"
+                            className="text-muted-foreground text-xs underline"
+                          >
+                            Forgot password?
+                          </Link>
+                        </FormLabel>
+
+                        <FormControl>
+                          <Input type="password" {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <Button type="submit" className="w-full">
+                    Sign in
+                  </Button>
+                </form>
+
+                <p className="text-muted-foreground text-center text-xs">
+                  Not a member?{" "}
+                  <Link href="#" className="underline">
+                    Start a 14 day free trial
+                  </Link>
+                </p>
+              </Form>
+            </div>
+          </DialogContent>
+        </Dialog>
+      </div>
+    </div>
+  );
+}

data/app/javascript/seeds/blocks/dashboard-ui/modal-dialogs-2/config.json

@@ -0,0 +1 @@
+{}

data/app/javascript/seeds/blocks/dashboard-ui/modal-dialogs-2/data.js

@@ -0,0 +1 @@
+export default function(shared, config) { return config }

data/app/javascript/seeds/blocks/dashboard-ui/modal-dialogs-2/render.jsx

@@ -0,0 +1,99 @@
+"use client";
+
+import React from "react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import {
+  Dialog,
+  DialogContent,
+  DialogTrigger,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/components/ui/input-group";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { CopyIcon } from "lucide-react";
+
+const formSchema = z.object({
+  email: z.string().email(),
+  password: z
+    .string()
+    .min(8, { message: "Password must be at least 8 characters" }),
+});
+
+export default function LoginForm() {
+  const [open, setOpen] = React.useState(true);
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      email: "",
+      password: "",
+    },
+  });
+
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    console.log(values);
+  }
+
+  return (
+    <div className="flex h-screen w-full items-center justify-center px-4">
+      <div className="mx-auto flex w-full max-w-sm flex-col items-center gap-8">
+        <Dialog open={open} onOpenChange={setOpen}>
+          <DialogTrigger asChild>
+            <Button variant="outline">Share Link</Button>
+          </DialogTrigger>
+          <DialogContent className="sm:max-w-md">
+            <DialogHeader>
+              <DialogTitle>Share link</DialogTitle>
+              <DialogDescription>
+                Anyone who has this link will be able to view this.
+              </DialogDescription>
+            </DialogHeader>
+            <div className="flex items-center gap-2">
+              <div className="grid flex-1 gap-2">
+                <Label htmlFor="link" className="sr-only">
+                  Link
+                </Label>
+                <InputGroup>
+                  <InputGroupInput
+                    defaultValue="https://ui.shadcn.com/docs/installation"
+                    readOnly
+                    placeholder="Search..."
+                  />
+                  <InputGroupAddon align="inline-end">
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <InputGroupButton
+                          className="rounded-full"
+                          size="icon-xs"
+                        >
+                          <CopyIcon />
+                        </InputGroupButton>
+                      </TooltipTrigger>
+                      <TooltipContent>Copy to link</TooltipContent>
+                    </Tooltip>
+                  </InputGroupAddon>
+                </InputGroup>
+              </div>
+            </div>
+          </DialogContent>
+        </Dialog>
+      </div>
+    </div>
+  );
+}

data/app/javascript/seeds/blocks/dashboard-ui/modal-dialogs-3/config.json

@@ -0,0 +1 @@
+{}

data/app/javascript/seeds/blocks/dashboard-ui/modal-dialogs-3/data.js

@@ -0,0 +1 @@
+export default function(shared, config) { return config }