jigsaw_engine 0.4.0

data/app/javascript/seeds/blocks/dashboard-ui/stat-cards-8/render.jsx

@@ -0,0 +1,234 @@
+"use client";
+
+import { Card, CardContent } from "@/components/ui/card";
+import { ChartContainer } from "@/components/ui/chart";
+import { cn } from "@/lib/utils";
+import { Area, AreaChart, XAxis } from "recharts";
+
+const data = [
+  {
+    date: "Nov 24, 2023",
+    "Alpha Corp": 142.87,
+    "Beta Solutions": 65.32,
+    "Gamma Industries": 83.25,
+  },
+  {
+    date: "Nov 25, 2023",
+    "Alpha Corp": 151.43,
+    "Beta Solutions": 59.78,
+    "Gamma Industries": 79.64,
+  },
+  {
+    date: "Nov 26, 2023",
+    "Alpha Corp": 157.28,
+    "Beta Solutions": 64.21,
+    "Gamma Industries": 76.19,
+  },
+  {
+    date: "Nov 27, 2023",
+    "Alpha Corp": 162.94,
+    "Beta Solutions": 57.46,
+    "Gamma Industries": 72.84,
+  },
+  {
+    date: "Nov 28, 2023",
+    "Alpha Corp": 148.37,
+    "Beta Solutions": 49.82,
+    "Gamma Industries": 81.56,
+  },
+  {
+    date: "Nov 29, 2023",
+    "Alpha Corp": 139.56,
+    "Beta Solutions": 55.63,
+    "Gamma Industries": 92.38,
+  },
+  {
+    date: "Nov 30, 2023",
+    "Alpha Corp": 145.83,
+    "Beta Solutions": 61.27,
+    "Gamma Industries": 88.75,
+  },
+  {
+    date: "Dec 01, 2023",
+    "Alpha Corp": 138.29,
+    "Beta Solutions": 68.94,
+    "Gamma Industries": 93.42,
+  },
+  {
+    date: "Dec 02, 2023",
+    "Alpha Corp": 129.64,
+    "Beta Solutions": 74.56,
+    "Gamma Industries": 97.18,
+  },
+  {
+    date: "Dec 03, 2023",
+    "Alpha Corp": 119.82,
+    "Beta Solutions": 71.38,
+    "Gamma Industries": 89.43,
+  },
+  {
+    date: "Dec 04, 2023",
+    "Alpha Corp": 128.54,
+    "Beta Solutions": 63.95,
+    "Gamma Industries": 92.76,
+  },
+  {
+    date: "Dec 05, 2023",
+    "Alpha Corp": 137.21,
+    "Beta Solutions": 58.47,
+    "Gamma Industries": 84.29,
+  },
+  {
+    date: "Dec 06, 2023",
+    "Alpha Corp": 134.68,
+    "Beta Solutions": 69.12,
+    "Gamma Industries": 79.38,
+  },
+  {
+    date: "Dec 07, 2023",
+    "Alpha Corp": 152.73,
+    "Beta Solutions": 73.89,
+    "Gamma Industries": 81.42,
+  },
+  {
+    date: "Dec 08, 2023",
+    "Alpha Corp": 168.59,
+    "Beta Solutions": 78.54,
+    "Gamma Industries": 75.68,
+  },
+];
+
+const summary = [
+  {
+    name: "Alpha Corp",
+    tickerSymbol: "ACP",
+    value: "$168.59",
+    change: "+15.86",
+    percentageChange: "+10.4%",
+    changeType: "positive", 
+  },
+  {
+    name: "Beta Solutions",
+    tickerSymbol: "BTS",
+    value: "$78.54",
+    change: "+4.65",
+    percentageChange: "+6.3%",
+    changeType: "positive",
+  },
+  {
+    name: "Gamma Industries",
+    tickerSymbol: "GMI",
+    value: "$75.68",
+    change: "-5.74",
+    percentageChange: "-7.1%",
+    changeType: "negative",
+  },
+];
+
+const sanitizeName = (name: string) => {
+  return name
+    .replace(/\\s+/g, "-")
+    .replace(/[^a-zA-Z0-9-]/g, "_")
+    .toLowerCase();
+};
+
+export default function Stats10() {
+  return (
+    <div className="bg-muted flex w-full items-center justify-center p-10">
+      <dl className="mx-auto grid w-full max-w-7xl grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {summary.map((item) => {
+          const sanitizedName = sanitizeName(item.name);
+          const gradientId = `gradient-${sanitizedName}`;
+
+          const color =
+            item.changeType === "positive"
+              ? "hsl(142.1 76.2% 36.3%)"
+              : "hsl(0 72.2% 50.6%)";
+
+          return (
+            <Card key={item.name} className="p-0 shadow-none">
+              <CardContent className="p-4 pb-0">
+                <div>
+                  <dt className="text-foreground text-sm font-medium">
+                    {item.name}{" "}
+                    <span className="text-muted-foreground font-normal">
+                      ({item.tickerSymbol})
+                    </span>
+                  </dt>
+                  <div className="flex items-baseline justify-between">
+                    <dd
+                      className={cn(
+                        item.changeType === "positive"
+                          ? "text-green-600 dark:text-green-500"
+                          : "text-red-600 dark:text-red-500",
+                        "text-lg font-semibold",
+                      )}
+                    >
+                      {item.value}
+                    </dd>
+                    <dd className="flex items-center space-x-1 text-sm">
+                      <span className="text-foreground font-medium">
+                        {item.change}
+                      </span>
+                      <span
+                        className={cn(
+                          item.changeType === "positive"
+                            ? "text-green-600 dark:text-green-500"
+                            : "text-red-600 dark:text-red-500",
+                        )}
+                      >
+                        ({item.percentageChange})
+                      </span>
+                    </dd>
+                  </div>
+                </div>
+              </CardContent>
+              <div className="h-16 overflow-hidden">
+                <ChartContainer
+                  className="aspect-auto h-full w-full justify-start [&_.recharts-surface]:overflow-visible"
+                  config={{
+                    [item.name]: {
+                      label: item.name,
+                      color: color,
+                    },
+                  }}
+                >
+                  <AreaChart
+                    data={data}
+                    margin={{ top: 0, right: 0, left: 0, bottom: 0 }}
+                  >
+                    <defs>
+                      <linearGradient
+                        id={gradientId}
+                        x1="0"
+                        y1="0"
+                        x2="0"
+                        y2="1"
+                      >
+                        <stop offset="5%" stopColor={color} stopOpacity={0.3} />
+                        <stop offset="95%" stopColor={color} stopOpacity={0} />
+                      </linearGradient>
+                    </defs>
+                    <XAxis
+                      dataKey="date"
+                      hide
+                      padding={{ left: 0, right: 0 }}
+                    />
+                    <Area
+                      dataKey={item.name}
+                      stroke={color}
+                      fill={`url(#${gradientId})`}
+                      fillOpacity={0.4}
+                      strokeWidth={1.5}
+                      type="monotone"
+                    />
+                  </AreaChart>
+                </ChartContainer>
+              </div>
+            </Card>
+          );
+        })}
+      </dl>
+    </div>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,295 @@
+"use client";
+
+import { CheckCircle, FileTextIcon, Loader2, PauseIcon, PlayIcon, Trash2Icon } from "lucide-react";
+import { useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from "@/components/ui/table";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+
+interface Task {
+  id: string;
+  title: string;
+  assignee: string;
+  status: "pending" | "in-progress" | "completed" | "blocked";
+  priority: "low" | "medium" | "high" | "urgent";
+  dueDate: string;
+  notes: string;
+}
+
+type TaskActionType = "start" | "pause" | "complete" | "delete" | "view";
+
+const tasks: Task[] = [
+  {
+    id: "TASK-001",
+    title: "Implement User Authentication",
+    assignee: "Sarah Chen",
+    status: "in-progress",
+    priority: "high",
+    dueDate: "2024-03-25",
+    notes: "OAuth 2.0 integration with Google and GitHub providers"
+  },
+  {
+    id: "TASK-002",
+    title: "Design Dashboard UI",
+    assignee: "Michael Torres",
+    status: "completed",
+    priority: "medium",
+    dueDate: "2024-03-20",
+    notes: "Finalize dashboard layout with responsive grid system"
+  },
+  {
+    id: "TASK-003",
+    title: "API Performance Optimization",
+    assignee: "Emma Rodriguez",
+    status: "pending",
+    priority: "urgent",
+    dueDate: "2024-03-22",
+    notes: "Reduce API response time by implementing caching strategy"
+  },
+  {
+    id: "TASK-004",
+    title: "Write Unit Tests",
+    assignee: "James Wilson",
+    status: "in-progress",
+    priority: "medium",
+    dueDate: "2024-03-28",
+    notes: "Achieve 80% code coverage for authentication module"
+  },
+  {
+    id: "TASK-005",
+    title: "Database Migration",
+    assignee: "Olivia Martinez",
+    status: "blocked",
+    priority: "high",
+    dueDate: "2024-03-24",
+    notes: "Waiting for infrastructure team approval before proceeding"
+  },
+  {
+    id: "TASK-006",
+    title: "Update Documentation",
+    assignee: "Lucas Anderson",
+    status: "pending",
+    priority: "low",
+    dueDate: "2024-03-30",
+    notes: "Document new API endpoints and authentication flow"
+  },
+  {
+    id: "TASK-007",
+    title: "Security Audit",
+    assignee: "Sophia Taylor",
+    status: "completed",
+    priority: "urgent",
+    dueDate: "2024-03-19",
+    notes: "Conducted comprehensive security review and vulnerability assessment"
+  }
+];
+
+function getStatusBadge(status: Task["status"]) {
+  switch (status) {
+    case "pending":
+      return (
+        <Badge
+          variant="outline"
+          className="border-0 bg-amber-500/15 text-amber-700 hover:bg-amber-500/25 dark:bg-amber-500/10 dark:text-amber-300 dark:hover:bg-amber-500/20">
+          Pending
+        </Badge>
+      );
+    case "in-progress":
+      return (
+        <Badge
+          variant="outline"
+          className="border-0 bg-blue-500/15 text-blue-700 hover:bg-blue-500/25 dark:bg-blue-500/10 dark:text-blue-400 dark:hover:bg-blue-500/20">
+          In Progress
+        </Badge>
+      );
+    case "completed":
+      return (
+        <Badge
+          variant="outline"
+          className="border-0 bg-green-500/15 text-green-700 hover:bg-green-500/25 dark:bg-green-500/10 dark:text-green-400 dark:hover:bg-green-500/20">
+          Completed
+        </Badge>
+      );
+    case "blocked":
+      return (
+        <Badge
+          variant="outline"
+          className="border-0 bg-rose-500/15 text-rose-700 hover:bg-rose-500/25 dark:bg-rose-500/10 dark:text-rose-400 dark:hover:bg-rose-500/20">
+          Blocked
+        </Badge>
+      );
+    default:
+      return <Badge variant="secondary">{status}</Badge>;
+  }
+}
+
+export default function Table02() {
+  const [pendingAction, setPendingAction] = useState<{
+    id: string;
+    type: TaskActionType;
+  } | null>(null);
+
+  const isTaskActionPending = (action: TaskActionType, taskId: string) =>
+    pendingAction?.id === taskId && pendingAction.type === action;
+
+  const isTaskBusy = (taskId: string) => pendingAction?.id === taskId;
+
+  const handleAction = (task: Task, actionType: TaskActionType) => {
+    setPendingAction({ id: task.id, type: actionType });
+    setTimeout(() => {
+      setPendingAction(null);
+      console.log(`Action "${actionType}" completed for task:`, task.title);
+    }, 1000);
+  };
+
+  const renderTaskRow = (task: Task) => {
+    const busy = isTaskBusy(task.id);
+    const startPending = isTaskActionPending("start", task.id);
+    const pausePending = isTaskActionPending("pause", task.id);
+    const completePending = isTaskActionPending("complete", task.id);
+    const deletePending = isTaskActionPending("delete", task.id);
+
+    return (
+      <TableRow key={task.id} className="hover:bg-muted/50">
+        <TableCell className="h-16 px-4 font-medium">{task.title}</TableCell>
+        <TableCell className="text-muted-foreground h-16 px-4 text-sm">{task.assignee}</TableCell>
+        <TableCell className="h-16 px-4">{getStatusBadge(task.status)}</TableCell>
+
+        <TableCell className="text-muted-foreground h-16 px-4 text-sm">{task.dueDate}</TableCell>
+        <TableCell className="text-muted-foreground h-16 max-w-[300px] px-4 text-sm">
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span className="block cursor-help truncate">{task.notes}</span>
+              </TooltipTrigger>
+              <TooltipContent className="max-w-md">{task.notes}</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </TableCell>
+        <TableCell className="h-16 px-4">
+          <TooltipProvider>
+            <div className="flex items-center gap-1">
+              {(task.status === "pending" || task.status === "blocked") && (
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant="outline"
+                      size="icon"
+                      className="h-8 w-8"
+                      onClick={() => handleAction(task, "start")}
+                      disabled={busy}>
+                      {startPending ? (
+                        <Loader2 className="size-4 animate-spin" />
+                      ) : (
+                        <PlayIcon className="size-4" />
+                      )}
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>Start</TooltipContent>
+                </Tooltip>
+              )}
+              {task.status === "in-progress" && (
+                <>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button
+                        variant="outline"
+                        size="icon"
+                        className="h-8 w-8"
+                        onClick={() => handleAction(task, "pause")}
+                        disabled={busy}>
+                        {pausePending ? (
+                          <Loader2 className="size-4 animate-spin" />
+                        ) : (
+                          <PauseIcon className="size-4" />
+                        )}
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>Pause</TooltipContent>
+                  </Tooltip>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button
+                        variant="outline"
+                        size="icon"
+                        className="h-8 w-8"
+                        onClick={() => handleAction(task, "complete")}
+                        disabled={busy}>
+                        {completePending ? (
+                          <Loader2 className="size-4 animate-spin" />
+                        ) : (
+                          <CheckCircle className="size-4" />
+                        )}
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>Complete</TooltipContent>
+                  </Tooltip>
+                </>
+              )}
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    className="text-destructive hover:bg-destructive h-8 w-8 hover:text-white"
+                    onClick={() => handleAction(task, "delete")}
+                    disabled={busy}>
+                    {deletePending ? (
+                      <Loader2 className="size-4 animate-spin" />
+                    ) : (
+                      <Trash2Icon className="size-4" />
+                    )}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Delete</TooltipContent>
+              </Tooltip>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    className="h-8 w-8"
+                    onClick={() => handleAction(task, "view")}
+                    disabled={busy}>
+                    <FileTextIcon className="size-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>View Details</TooltipContent>
+              </Tooltip>
+            </div>
+          </TooltipProvider>
+        </TableCell>
+      </TableRow>
+    );
+  };
+
+  return (
+    <div className="container mx-auto px-4 py-6 lg:py-10">
+      <div className="rounded-lg border">
+        <Table>
+          <TableHeader>
+            <TableRow className="border-b hover:bg-transparent">
+              <TableHead className="h-12 px-4 font-medium">Title</TableHead>
+              <TableHead className="h-12 px-4 font-medium">Assignee</TableHead>
+              <TableHead className="h-12 w-[120px] px-4 font-medium">Status</TableHead>
+
+              <TableHead className="h-12 px-4 font-medium">Due Date</TableHead>
+              <TableHead className="h-12 px-4 font-medium">Notes</TableHead>
+              <TableHead className="h-12 w-[180px] px-4 font-medium">Actions</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>{tasks.map(renderTaskRow)}</TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}

data/app/javascript/seeds/blocks/datepicker-1/config.json

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

data/app/javascript/seeds/blocks/datepicker-1/data.js

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

data/app/javascript/seeds/blocks/datepicker-1/render.jsx

@@ -0,0 +1,14 @@
+"use client";
+
+import * as React from "react";
+import { Calendar } from "@/components/ui/calendar";
+
+export default function BasicDatePicker() {
+  const [date, setDate] = React.useState<Date | undefined>(new Date());
+
+  return (
+    <div className="border rounded-lg">
+      <Calendar mode="single" selected={date} onSelect={setDate} />
+    </div>
+  );
+}

data/app/javascript/seeds/blocks/datepicker-2/config.json

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

data/app/javascript/seeds/blocks/datepicker-2/data.js

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

data/app/javascript/seeds/blocks/datepicker-2/render.jsx

@@ -0,0 +1,29 @@
+"use client";
+
+import * as React from "react";
+import { startOfDay, subDays, endOfDay } from "date-fns";
+import { DateRange } from "react-day-picker";
+
+import { Calendar } from "@/components/ui/calendar";
+
+export default function DatePickerWithRange() {
+  const today = new Date();
+  const sevenDaysAgo = subDays(today, 6);
+
+  const [date, setDate] = React.useState<DateRange | undefined>({
+    from: startOfDay(sevenDaysAgo),
+    to: endOfDay(today)
+  });
+
+  return (
+    <div className="border rounded-lg">
+      <Calendar
+        mode="range"
+        defaultMonth={date?.from}
+        selected={date}
+        onSelect={setDate}
+        numberOfMonths={2}
+      />
+    </div>
+  );
+}

data/app/javascript/seeds/blocks/datepicker-3/config.json

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

data/app/javascript/seeds/blocks/datepicker-3/data.js

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