jigsaw_engine 0.4.0

data/app/javascript/seeds/blocks/project-management-charts-1/render.jsx

@@ -0,0 +1,172 @@
+"use client";
+
+import * as React from "react";
+import { Label, Pie, PieChart, Sector } from "recharts";
+import { PieSectorDataItem } from "recharts/types/polar/Pie";
+
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from "@/components/ui/card";
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent
+} from "@/components/ui/chart";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@/components/ui/select";
+
+const desktopData = [
+  { month: "january", desktop: 186, fill: "var(--color-january)" },
+  { month: "february", desktop: 305, fill: "var(--color-february)" },
+  { month: "march", desktop: 237, fill: "var(--color-march)" },
+  { month: "april", desktop: 173, fill: "var(--color-april)" },
+  { month: "may", desktop: 209, fill: "var(--color-may)" }
+];
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors"
+  },
+  desktop: {
+    label: "Desktop"
+  },
+  mobile: {
+    label: "Mobile"
+  },
+  january: {
+    label: "January",
+    color: "var(--chart-1)"
+  },
+  february: {
+    label: "February",
+    color: "var(--chart-2)"
+  },
+  march: {
+    label: "March",
+    color: "var(--chart-3)"
+  },
+  april: {
+    label: "April",
+    color: "var(--chart-4)"
+  },
+  may: {
+    label: "May",
+    color: "var(--chart-5)"
+  }
+} satisfies ChartConfig;
+
+export default function ChartProjectEfficiency() {
+  const id = "pie-interactive";
+  const [activeMonth, setActiveMonth] = React.useState(desktopData[0].month);
+
+  const activeIndex = React.useMemo(
+    () => desktopData.findIndex((item) => item.month === activeMonth),
+    [activeMonth]
+  );
+  const months = React.useMemo(() => desktopData.map((item) => item.month), []);
+
+  return (
+    <Card className="w-full md:w-[500px]">
+      <CardHeader>
+        <CardTitle className="font-display text-xl">Project Efficiency</CardTitle>
+        <CardDescription>January - June 2026</CardDescription>
+        <CardAction className="relative col-start-auto row-start-auto justify-self-start lg:col-start-2 lg:row-start-1 lg:justify-self-end">
+          <div className="end-0 top-0 mt-2 flex flex-col items-stretch space-y-0 p-0 sm:flex-row lg:absolute lg:mt-0">
+            <Select value={activeMonth} onValueChange={setActiveMonth}>
+              <SelectTrigger className="ml-auto w-full lg:w-auto" aria-label="Select a value">
+                <SelectValue placeholder="Select month" />
+              </SelectTrigger>
+              <SelectContent align="end">
+                {months.map((key) => {
+                  const config = chartConfig[key as keyof typeof chartConfig];
+                  if (!config) return null;
+
+                  const color = "color" in config ? config.color : undefined;
+
+                  return (
+                    <SelectItem key={key} value={key}>
+                      <div className="flex items-center gap-2 text-xs">
+                        <span
+                          className="flex h-3 w-3 shrink-0 rounded-sm"
+                          style={{
+                            backgroundColor: color
+                          }}
+                        />
+                        {config?.label}
+                      </div>
+                    </SelectItem>
+                  );
+                })}
+              </SelectContent>
+            </Select>
+          </div>
+        </CardAction>
+      </CardHeader>
+      <CardContent className="flex flex-1 justify-center pb-0">
+        <ChartContainer
+          id={id}
+          config={chartConfig}
+          className="mx-auto aspect-square w-full max-w-[230px]">
+          <PieChart>
+            <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+            <Pie
+              data={desktopData}
+              dataKey="desktop"
+              nameKey="month"
+              innerRadius={45}
+              strokeWidth={5}
+              activeIndex={activeIndex}
+              activeShape={({ outerRadius = 0, ...props }: PieSectorDataItem) => (
+                <g>
+                  <Sector {...props} outerRadius={outerRadius + 5} />
+                  <Sector
+                    {...props}
+                    outerRadius={outerRadius + 20}
+                    innerRadius={outerRadius + 12}
+                  />
+                </g>
+              )}>
+              <Label
+                content={({ viewBox }) => {
+                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                    return (
+                      <text
+                        x={viewBox.cx}
+                        y={viewBox.cy}
+                        textAnchor="middle"
+                        dominantBaseline="middle">
+                        <tspan
+                          x={viewBox.cx}
+                          y={viewBox.cy}
+                          className="fill-foreground text-3xl font-bold">
+                          {desktopData[activeIndex].desktop.toLocaleString()}
+                        </tspan>
+                        <tspan
+                          x={viewBox.cx}
+                          y={(viewBox.cy || 0) + 24}
+                          className="fill-muted-foreground">
+                          Visitors
+                        </tspan>
+                      </text>
+                    );
+                  }
+                }}
+              />
+            </Pie>
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+}

data/app/javascript/seeds/blocks/project-management-charts-2/config.json

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

data/app/javascript/seeds/blocks/project-management-charts-2/data.js

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

data/app/javascript/seeds/blocks/project-management-charts-2/render.jsx

@@ -0,0 +1,147 @@
+"use client";
+
+import { Bar, BarChart, LabelList, XAxis, YAxis } from "recharts";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { ChartContainer } from "@/components/ui/chart";
+
+export default function ChartAchievementByYear() {
+  return (
+    <Card className="w-full md:w-[400px]">
+      <CardHeader>
+        <CardTitle>Achievement by Year</CardTitle>
+        <CardDescription>
+          You completed more projects per day on average this year than last year.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="grid gap-4">
+        <div className="grid auto-rows-min gap-2">
+          <div className="flex items-baseline gap-1 text-2xl leading-none font-semibold tabular-nums">
+            57
+            <span className="text-muted-foreground text-xs font-normal">projects</span>
+          </div>
+          <ChartContainer
+            config={{
+              steps: {
+                label: "Steps",
+                color: "var(--chart-1)"
+              }
+            }}
+            className="aspect-auto h-[32px] w-full">
+            <BarChart
+              accessibilityLayer
+              layout="vertical"
+              margin={{
+                left: 0,
+                top: 0,
+                right: 0,
+                bottom: 0
+              }}
+              data={[
+                {
+                  date: "2024",
+                  steps: 57
+                }
+              ]}>
+              <Bar dataKey="steps" fill="var(--color-steps)" radius={4} barSize={32}>
+                <LabelList
+                  position="insideLeft"
+                  dataKey="date"
+                  offset={8}
+                  fontSize={12}
+                  fill="var(--primary-foreground)"
+                />
+              </Bar>
+              <YAxis dataKey="date" type="category" tickCount={1} hide />
+              <XAxis dataKey="steps" type="number" hide />
+            </BarChart>
+          </ChartContainer>
+        </div>
+        <div className="grid auto-rows-min gap-2">
+          <div className="flex items-baseline gap-1 text-2xl leading-none font-semibold tabular-nums">
+            29
+            <span className="text-muted-foreground text-xs font-normal">projects</span>
+          </div>
+          <ChartContainer
+            config={{
+              steps: {
+                label: "Steps",
+                color: "var(--chart-2)"
+              }
+            }}
+            className="aspect-auto h-[32px] w-full">
+            <BarChart
+              accessibilityLayer
+              layout="vertical"
+              margin={{
+                left: 0,
+                top: 0,
+                right: 0,
+                bottom: 0
+              }}
+              data={[
+                {
+                  date: "2023",
+                  steps: 48
+                }
+              ]}>
+              <Bar dataKey="steps" fill="var(--color-steps)" radius={4} barSize={32}>
+                <LabelList
+                  position="insideLeft"
+                  dataKey="date"
+                  offset={8}
+                  fontSize={12}
+                  fill="var(--primary-foreground)"
+                />
+              </Bar>
+              <YAxis dataKey="date" type="category" tickCount={1} hide />
+              <XAxis dataKey="steps" type="number" hide />
+            </BarChart>
+          </ChartContainer>
+        </div>
+        <div className="grid auto-rows-min gap-2">
+          <div className="flex items-baseline gap-1 text-2xl leading-none font-semibold tabular-nums">
+            35
+            <span className="text-muted-foreground text-xs font-normal">projects</span>
+          </div>
+          <ChartContainer
+            config={{
+              steps: {
+                label: "Steps",
+                color: "var(--chart-3)"
+              }
+            }}
+            className="aspect-auto h-[32px] w-full">
+            <BarChart
+              accessibilityLayer
+              layout="vertical"
+              margin={{
+                left: 0,
+                top: 0,
+                right: 0,
+                bottom: 0
+              }}
+              data={[
+                {
+                  date: "2022",
+                  steps: 42
+                }
+              ]}>
+              <Bar dataKey="steps" fill="var(--color-steps)" radius={4} barSize={32}>
+                <LabelList
+                  position="insideLeft"
+                  dataKey="date"
+                  offset={8}
+                  fontSize={12}
+                  fill="var(--primary-foreground)"
+                />
+              </Bar>
+              <YAxis dataKey="date" type="category" tickCount={1} hide />
+              <XAxis dataKey="steps" type="number" hide />
+            </BarChart>
+          </ChartContainer>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

data/app/javascript/seeds/blocks/switch-cards-1/config.json

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

data/app/javascript/seeds/blocks/switch-cards-1/data.js

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

data/app/javascript/seeds/blocks/switch-cards-1/render.jsx

@@ -0,0 +1,116 @@
+"use client";
+
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel
+} from "@/components/ui/form";
+import { Switch } from "@/components/ui/switch";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+const formSchema = z.object({
+  type: z.enum(["all", "mentions", "none"], {
+    required_error: "You need to select a notification type."
+  }),
+  mobile: z.boolean().default(false).optional(),
+  communication_emails: z.boolean().default(false).optional(),
+  social_emails: z.boolean().default(false).optional(),
+  marketing_emails: z.boolean().default(false).optional(),
+  security_emails: z.boolean()
+});
+
+type NotificationsFormValues = z.infer<typeof formSchema>;
+
+export default function NotificationSettingsSwitchExample() {
+  const form = useForm<NotificationsFormValues>({
+    resolver: zodResolver(formSchema)
+  });
+
+  return (
+    <>
+      <Form {...form}>
+        <form className="space-y-8">
+          <h3 className="mb-4 text-lg font-medium">Email Notifications</h3>
+          <div className="space-y-4">
+            <FormField
+              control={form.control}
+              name="communication_emails"
+              render={({ field }) => (
+                <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+                  <div className="space-y-0.5">
+                    <FormLabel className="text-base">Communication emails</FormLabel>
+                    <FormDescription>Receive emails about your account activity.</FormDescription>
+                  </div>
+                  <FormControl>
+                    <Switch checked={field.value} onCheckedChange={field.onChange} />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="marketing_emails"
+              render={({ field }) => (
+                <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+                  <div className="space-y-0.5">
+                    <FormLabel className="text-base">Marketing emails</FormLabel>
+                    <FormDescription>
+                      Receive emails about new products, features, and more.
+                    </FormDescription>
+                  </div>
+                  <FormControl>
+                    <Switch checked={field.value} onCheckedChange={field.onChange} />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="social_emails"
+              render={({ field }) => (
+                <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+                  <div className="space-y-0.5">
+                    <FormLabel className="text-base">Social emails</FormLabel>
+                    <FormDescription>
+                      Receive emails for friend requests, follows, and more.
+                    </FormDescription>
+                  </div>
+                  <FormControl>
+                    <Switch checked={field.value} onCheckedChange={field.onChange} />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="security_emails"
+              render={({ field }) => (
+                <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+                  <div className="space-y-0.5">
+                    <FormLabel className="text-base">Security emails</FormLabel>
+                    <FormDescription>
+                      Receive emails about your account activity and security.
+                    </FormDescription>
+                  </div>
+                  <FormControl>
+                    <Switch
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                      disabled
+                      aria-readonly
+                    />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+          </div>
+        </form>
+      </Form>
+    </>
+  );
+}

data/app/javascript/seeds/blocks/theme-switchers-1/config.json

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

data/app/javascript/seeds/blocks/theme-switchers-1/data.js

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

data/app/javascript/seeds/blocks/theme-switchers-1/render.jsx

@@ -0,0 +1,22 @@
+"use client";
+
+import React from "react";
+import { Moon, Sun } from "lucide-react";
+
+import { Switch } from "@/components/ui/switch";
+
+export default function ThemeSwitcher() {
+  const [checked, setChecked] = React.useState(false);
+
+  return (
+    <div className="flex items-center space-x-3">
+      <Sun className="size-4" />
+      <Switch
+        checked={checked}
+        onCheckedChange={(value) => setChecked(value)}
+        aria-label="Toggle theme"
+      />
+      <Moon className="size-4" />
+    </div>
+  );
+}

data/app/javascript/seeds/blocks/theme-switchers-2/config.json

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

data/app/javascript/seeds/blocks/theme-switchers-2/data.js

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

data/app/javascript/seeds/blocks/theme-switchers-2/render.jsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+
+export default function ThemeSwitcher() {
+  return (
+    <RadioGroup defaultValue="light" className="flex max-w-md gap-6 pt-2">
+      <label className="[&:has([data-state=checked])>div]:border-primary flex-col">
+        <RadioGroupItem value="light" className="sr-only" />
+        <div className="hover:border-accent items-center rounded-lg border-2 p-1">
+          <div className="space-y-2 rounded-lg bg-[#ecedef] p-2">
+            <div className="space-y-2 rounded-md bg-white p-2 shadow-xs">
+              <div className="h-2 w-[80px] rounded-lg bg-[#ecedef]" />
+              <div className="h-2 w-[100px] rounded-lg bg-[#ecedef]" />
+            </div>
+            <div className="flex items-center space-x-2 rounded-md bg-white p-2 shadow-xs">
+              <div className="h-4 w-4 rounded-full bg-[#ecedef]" />
+              <div className="h-2 w-[100px] rounded-lg bg-[#ecedef]" />
+            </div>
+            <div className="flex items-center space-x-2 rounded-md bg-white p-2 shadow-xs">
+              <div className="h-4 w-4 rounded-full bg-[#ecedef]" />
+              <div className="h-2 w-[100px] rounded-lg bg-[#ecedef]" />
+            </div>
+          </div>
+        </div>
+        <span className="block w-full p-2 text-center text-sm font-normal">Light</span>
+      </label>
+
+      <label className="[&:has([data-state=checked])>div]:border-primary flex-col">
+        <RadioGroupItem value="dark" className="sr-only" />
+        <div className="bg-popover hover:bg-accent hover:text-accent-foreground items-center rounded-lg border-2 p-1">
+          <div className="space-y-2 rounded-lg bg-slate-950 p-2">
+            <div className="space-y-2 rounded-md bg-slate-800 p-2 shadow-xs">
+              <div className="h-2 w-[80px] rounded-lg bg-slate-400" />
+              <div className="h-2 w-[100px] rounded-lg bg-slate-400" />
+            </div>
+            <div className="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-xs">
+              <div className="h-4 w-4 rounded-full bg-slate-400" />
+              <div className="h-2 w-[100px] rounded-lg bg-slate-400" />
+            </div>
+            <div className="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-xs">
+              <div className="h-4 w-4 rounded-full bg-slate-400" />
+              <div className="h-2 w-[100px] rounded-lg bg-slate-400" />
+            </div>
+          </div>
+        </div>
+        <span className="block w-full p-2 text-center text-sm font-normal">Dark</span>
+      </label>
+    </RadioGroup>
+  );
+}

data/app/javascript/seeds/blocks/theme-switchers-3/config.json

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

data/app/javascript/seeds/blocks/theme-switchers-3/data.js

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

data/app/javascript/seeds/blocks/theme-switchers-3/render.jsx

@@ -0,0 +1,37 @@
+"use client";
+
+import React from "react";
+import { LaptopMinimalIcon, MoonIcon, SunIcon } from "lucide-react";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+
+export default function ThemeSwitcher() {
+  const [open, setOpen] = React.useState(true);
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>
+        <Button size="icon" variant="outline">
+          <SunIcon />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuItem>
+          <SunIcon /> Light
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <LaptopMinimalIcon /> System
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <MoonIcon /> Dark
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

data/app/javascript/seeds/examples/blog-cards-1/config.json

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

data/app/javascript/seeds/examples/blog-cards-1/data.js

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

data/app/javascript/seeds/examples/blog-cards-1/render.jsx

@@ -0,0 +1,81 @@
+import Image from "next/image";
+import { Clock, MessageCircle } from "lucide-react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import Link from "next/link";
+
+const data = {
+  title: "Building Scalable Design Systems with React",
+  excerpt:
+    "Learn how to create and maintain a robust design system that scales with your team and product. Best practices and real-world examples included.",
+  coverImage:
+    "https://images.unsplash.com/photo-1618477388954-7852f32655ec?w=800&q=80",
+  author: {
+    name: "Sarah Chen",
+    avatar: "https://i.pravatar.cc/150?img=47",
+  },
+  date: "2 hours ago",
+  readTime: "8 min",
+  category: "Design Systems",
+  commentCount: 24,
+};
+
+export default function BlogCard() {
+  return (
+    <Card className="max-w-2xl overflow-hidden p-0 shadow-none">
+      <div className="flex flex-col sm:flex-row">
+        <Link
+          href="#"
+          className="relative aspect-video w-full @min-[theme(--breakpoint-lg)]:w-1/3"
+        >
+          <figure>
+            <Image
+              src={data.coverImage}
+              fill
+              className="object-cover sm:h-full"
+              alt={data.title}
+            />
+          </figure>
+        </Link>
+        <div className="flex flex-col justify-between p-6 @min-[theme(--breakpoint-lg)]:w-2/3">
+          <CardContent className="space-y-4 p-0">
+            <h4 className="text-2xl">{data.title}</h4>
+            <p className="text-muted-foreground text-sm">{data.excerpt}</p>
+            <div className="flex flex-col justify-between space-y-4 md:flex-row md:items-center md:space-y-0">
+              <div className="flex items-center space-x-3">
+                <Avatar>
+                  <AvatarImage
+                    src={data.author.avatar}
+                    alt={data.author.name}
+                  />
+                  <AvatarFallback>
+                    {data.author.name
+                      .split(" ")
+                      .map((n) => n[0])
+                      .join("")}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="space-y-1">
+                  <p className="text-sm leading-none font-medium">
+                    {data.author.name}
+                  </p>
+                  <div className="text-muted-foreground flex items-center text-xs">
+                    <Clock className="me-1 size-3" />
+                    {data.readTime} read
+                    <MessageCircle className="ms-3 me-1 size-3" />
+                    {data.commentCount}
+                  </div>
+                </div>
+              </div>
+              <Button variant="outline" size="sm" className="w-full sm:w-auto">
+                Read More
+              </Button>
+            </div>
+          </CardContent>
+        </div>
+      </div>
+    </Card>
+  );
+}

data/app/javascript/seeds/examples/blog-cards-2/config.json

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

data/app/javascript/seeds/examples/blog-cards-2/data.js

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