jigsaw_engine 0.4.0

data/app/javascript/seeds/examples/stat-cards-4/render.jsx

@@ -0,0 +1,117 @@
+"use client";
+
+import * as React from "react";
+import { Bar, BarChart, XAxis } from "recharts";
+import { ChevronUpIcon, DollarSignIcon, HandCoinsIcon } from "lucide-react";
+import { useIsMobile } from "@/hooks/use-mobile";
+
+import { Card, CardAction, CardContent, CardDescription, CardHeader } from "@/components/ui/card";
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent
+} from "@/components/ui/chart";
+import { Badge } from "@/components/ui/badge";
+
+const chartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 }
+];
+
+const chartConfig = {
+  desktop: {
+    label: "Revenue",
+    color: "var(--chart-1)"
+  },
+  mobile: {
+    label: "Sales",
+    color: "var(--chart-2)"
+  }
+} satisfies ChartConfig;
+
+export default function StatCard() {
+  const isMobile = useIsMobile();
+
+  return (
+    <Card className="w-full shadow-none md:w-[450px]">
+      <CardHeader>
+        <CardDescription>Total Earning</CardDescription>
+        <CardAction>
+          <Badge variant="outline" className="text-green-600">
+            <ChevronUpIcon className="size-4" /> 24.2%
+          </Badge>
+        </CardAction>
+        <div className="flex items-center gap-4">
+          <div className="text-2xl font-bold lg:text-3xl">83%</div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer className="aspect-21/9! w-full" config={chartConfig}>
+          <BarChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: -8,
+              right: -8
+            }}>
+            <Bar
+              dataKey="desktop"
+              stackId="a"
+              fill="var(--color-desktop)"
+              radius={[0, 0, 5, 5]}
+              barSize={50}
+            />
+            <Bar
+              dataKey="mobile"
+              stackId="a"
+              fill="var(--color-mobile)"
+              radius={[5, 5, 0, 0]}
+              barSize={isMobile ? 30 : 50}
+            />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+            <defs>
+              <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="5%" stopColor="var(--color)" />
+                <stop offset="95%" stopColor="var(--chart-1)" />
+              </linearGradient>
+            </defs>
+          </BarChart>
+        </ChartContainer>
+        <div className="mt-5 space-y-4">
+          <div className="flex items-center gap-3">
+            <div className="bg-muted flex size-10 items-center justify-center rounded-md border">
+              <HandCoinsIcon className="size-4" />
+            </div>
+            <div className="space-y-1">
+              <div className="font-medium text-sm">Total Revenue</div>
+              <div className="text-muted-foreground text-xs">Client Payment</div>
+            </div>
+            <div className="ms-auto text-sm text-green-600">+$126</div>
+          </div>
+          <div className="flex items-center gap-3">
+            <div className="bg-muted flex size-10 items-center justify-center rounded-md border">
+              <DollarSignIcon className="size-4" />
+            </div>
+            <div className="space-y-1">
+              <div className="font-medium text-sm">Total Sales</div>
+              <div className="text-muted-foreground text-xs">Refund</div>
+            </div>
+            <div className="ms-auto text-sm text-red-600">-$98</div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,133 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import { CalendarDays, MoreVertical } from "lucide-react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardFooter } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger
+} from "@/components/ui/dropdown-menu";
+
+type TaskPriority = "high" | "medium" | "low";
+
+type Task = {
+  id: string;
+  title: string;
+  description: string;
+  completed: boolean;
+  dueDate: string;
+  priority: TaskPriority;
+  assignee: {
+    name: string;
+    avatar: string;
+  };
+};
+
+const data: Task = {
+  id: "task-1",
+  title: "Implement new feature",
+  description: "Add user authentication functionality to the application",
+  dueDate: "10 May 2025",
+  priority: "medium",
+  assignee: {
+    name: "Toby Belhome",
+    avatar: "/images/avatars/01.png"
+  },
+  completed: false
+};
+
+const priorityColor = {
+  low: "bg-green-100 dark:bg-green-900 dark:text-green-200 text-green-800 hover:bg-green-100",
+  medium:
+    "bg-yellow-100 dark:bg-yellow-900 dark:text-yellow-200 text-yellow-800 hover:bg-yellow-100",
+  high: "bg-red-100 dark:bg-red-900 dark:text-red-200 text-red-800 hover:bg-red-100"
+};
+
+export default function TaskCard() {
+  const [checked, setChecked] = React.useState(data.completed);
+
+  return (
+    <Card className={cn("w-full shadow-none md:w-[400px]", { "opacity-50": checked })}>
+      <CardContent className="space-y-4">
+        <div className="flex items-start justify-between">
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id={`task-${data.id}`}
+              defaultChecked={checked}
+              onCheckedChange={(value) => setChecked(value as boolean)}
+            />
+            <label
+              htmlFor={`task-${data.id}`}
+              className={`text-lg font-medium ${data.completed ? "text-muted-foreground line-through" : ""}`}>
+              {data.title}
+            </label>
+          </div>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button size="icon" variant="ghost">
+                <MoreVertical />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuGroup>
+                <DropdownMenuItem>
+                  <span>Edit</span>
+                  <DropdownMenuShortcut>⌘E</DropdownMenuShortcut>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <span>Archive</span>
+                  <DropdownMenuShortcut>⌘A</DropdownMenuShortcut>
+                </DropdownMenuItem>
+              </DropdownMenuGroup>
+              <DropdownMenuSeparator />
+              <DropdownMenuGroup>
+                <DropdownMenuItem>Share</DropdownMenuItem>
+                <DropdownMenuItem>Add to favorites</DropdownMenuItem>
+              </DropdownMenuGroup>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem variant="destructive">
+                <span>Delete</span>
+                <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+        <p className="text-muted-foreground">{data.description}</p>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center space-x-2">
+            <CalendarDays className="text-muted-foreground h-4 w-4" />
+            <span className="text-muted-foreground text-sm">{data.dueDate}</span>
+          </div>
+          <Badge className={cn("capitalize", priorityColor[data.priority])}>{data.priority}</Badge>
+        </div>
+      </CardContent>
+      <CardFooter className="flex items-center justify-between">
+        <div className="flex items-center space-x-4">
+          <Avatar className="size-8">
+            <AvatarImage src={data.assignee.avatar} alt={data.assignee.name} />
+            <AvatarFallback>
+              {data.assignee.name
+                .split(" ")
+                .map((n) => n[0])
+                .join("")}
+            </AvatarFallback>
+          </Avatar>
+          <span className="text-muted-foreground text-sm">{data.assignee.name}</span>
+        </div>
+      </CardFooter>
+    </Card>
+  );
+}

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

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

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

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

data/app/javascript/seeds/examples/task-cards-2/render.jsx

@@ -0,0 +1,122 @@
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+import { PlusIcon } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+
+type Task = {
+  id: string;
+  title: string;
+  description: string;
+  completed: boolean;
+  dueDate: string;
+  priority: "high" | "medium" | "low";
+};
+
+const initialTasks: Task[] = [
+  {
+    id: "1",
+    title: "Follow up with Acme Inc.",
+    description: "Send proposal and schedule meeting",
+    completed: false,
+    dueDate: "Today",
+    priority: "high"
+  },
+  {
+    id: "2",
+    title: "Prepare quarterly report",
+    description: "Compile sales data and forecasts",
+    completed: false,
+    dueDate: "Tomorrow",
+    priority: "medium"
+  },
+  {
+    id: "3",
+    title: "Update customer profiles",
+    description: "Verify contact information and preferences",
+    completed: true,
+    dueDate: "Oct 15",
+    priority: "low"
+  }
+];
+
+export default function TaskCard() {
+  const [tasks, setTasks] = React.useState<Task[]>(initialTasks);
+
+  const toggleTaskStatus = (id: string) => {
+    setTasks(
+      tasks.map((task) => (task.id === id ? { ...task, completed: !task.completed } : task))
+    );
+  };
+
+  return (
+    <Card className="w-full shadow-none md:w-[450px]">
+      <CardHeader>
+        <CardTitle>Tasks</CardTitle>
+        <CardDescription>Track and manage your upcoming tasks.</CardDescription>
+        <CardAction>
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger>
+                <Button variant="outline" className="rounded-full" size="icon">
+                  <PlusIcon />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Add Task</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </CardAction>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {tasks.map((task) => (
+          <div
+            key={task.id}
+            className={cn(
+              "flex items-start space-x-4 rounded-md border p-4 transition-colors",
+              task.completed && "opacity-70"
+            )}>
+            <Checkbox checked={task.completed} onCheckedChange={() => toggleTaskStatus(task.id)} />
+            <div className="space-y-1">
+              <p
+                className={cn(
+                  "text-sm leading-none font-medium",
+                  task.completed && "text-muted-foreground line-through"
+                )}>
+                {task.title}
+              </p>
+              <p className={cn("text-muted-foreground text-xs", task.completed && "line-through")}>
+                {task.description}
+              </p>
+              <div className="flex items-center pt-1">
+                <div
+                  className={cn(
+                    "mr-2 rounded-full px-2 py-0.5 text-xs font-medium",
+                    task.priority === "high" && "bg-red-100 text-red-700",
+                    task.priority === "medium" && "bg-amber-100 text-amber-700",
+                    task.priority === "low" && "bg-green-100 text-green-700"
+                  )}>
+                  {task.priority.charAt(0).toUpperCase() + task.priority.slice(1)}
+                </div>
+                <span className="text-muted-foreground text-xs">Due {task.dueDate}</span>
+              </div>
+            </div>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,40 @@
+import Image from "next/image";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+export default function WelcomeCard() {
+  return (
+    <Card className="relative w-full overflow-hidden shadow-none md:w-[450px]">
+      <CardHeader>
+        <CardTitle className="text-2xl">Congratulations Toby! 🎉</CardTitle>
+        <CardDescription>Best seller of the month</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="flex items-center justify-between">
+          <div>
+            <div className="text-3xl font-semibold">$15,231.89</div>
+            <div className="text-muted-foreground text-xs">
+              <span className="text-green-500">+65%</span> from last month
+            </div>
+          </div>
+          <Button variant="outline">View Sales</Button>
+        </div>
+      </CardContent>
+      <Image
+        width={800}
+        height={300}
+        src={`${process.env.DASHBOARD_BASE_URL}/star-shape.png`}
+        className="pointer-events-none absolute inset-0 aspect-auto"
+        unoptimized
+        alt="..."
+      />
+    </Card>
+  );
+}

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

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

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

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

data/app/javascript/seeds/examples/welcome-cards-2/render.jsx

@@ -0,0 +1,58 @@
+import Image from "next/image";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+
+export default function WelcomeCard() {
+  return (
+    <Card className="relative w-full overflow-hidden shadow-none md:w-[600px]">
+      <CardHeader>
+        <CardTitle className="text-3xl font-semibold">
+          Hi, Andrew <span className="text-4xl">👋</span>
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="relative">
+        <div className="grid items-center lg:grid-cols-3">
+          <div className="space-y-4 lg:col-span-2">
+            <div className="text-2xl">
+              What do you want to learn today with your partner?
+            </div>
+            <div className="text-muted-foreground">
+              Discover courses, track progress, and achieve your learning goods
+              seamlessly.
+            </div>
+            <div className="pt-2">
+              <Button>Explorer Course</Button>
+            </div>
+          </div>
+          <figure className="hidden lg:col-span-1 lg:block">
+            <Image
+              width={100}
+              height={50}
+              src={`${process.env.DASHBOARD_BASE_URL}/academy-dashboard-light.svg`}
+              className="block w-full dark:hidden"
+              unoptimized
+              alt="shadcn/ui"
+            />
+            <Image
+              width={100}
+              height={50}
+              src={`${process.env.DASHBOARD_BASE_URL}/academy-dashboard-dark.svg`}
+              className="hidden w-full dark:block"
+              unoptimized
+              alt="shadcn/ui"
+            />
+          </figure>
+          <Image
+            width={800}
+            height={300}
+            src={`${process.env.DASHBOARD_BASE_URL}/star-shape.png`}
+            className="pointer-events-none absolute inset-0 aspect-auto"
+            unoptimized
+            alt="shadcn/ui"
+          />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

data/app/javascript/seeds/examples/welcome-cards-3/config.json

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

data/app/javascript/seeds/examples/welcome-cards-3/data.js

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

data/app/javascript/seeds/examples/welcome-cards-3/render.jsx

@@ -0,0 +1,91 @@
+"use client";
+
+import {
+  Label,
+  PolarGrid,
+  PolarRadiusAxis,
+  RadialBar,
+  RadialBarChart,
+} from "recharts";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { ChartConfig, ChartContainer } from "@/components/ui/chart";
+
+const chartData = [
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+];
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  safari: {
+    label: "Safari",
+    color: "var(--primary)",
+  },
+} satisfies ChartConfig;
+
+export default function WelcomeCard() {
+  return (
+    <Card className="relative w-full overflow-hidden shadow-none md:w-[370px]">
+      <CardHeader>
+        <CardTitle className="text-xl font-semibold">
+          Your target is incomplete
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="flex items-center gap-2">
+          <div>
+            <ChartContainer
+              config={chartConfig}
+              className="mx-auto aspect-square h-[60px]"
+            >
+              <RadialBarChart
+                data={chartData}
+                startAngle={0}
+                endAngle={250}
+                innerRadius={25}
+                outerRadius={20}
+              >
+                <PolarGrid
+                  gridType="circle"
+                  radialLines={false}
+                  stroke="none"
+                  polarRadius={[86, 74]}
+                />
+                <RadialBar dataKey="visitors" background cornerRadius={10} />
+                <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
+                  <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 font-bold"
+                            >
+                              %48
+                            </tspan>
+                          </text>
+                        );
+                      }
+                    }}
+                  />
+                </PolarRadiusAxis>
+              </RadialBarChart>
+            </ChartContainer>
+          </div>
+          <p className="text-muted-foreground text-sm">
+            You have completed <span className="text-orange-500">48%</span> of
+            the given target, you can also check your status
+          </p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

data/app/javascript/seeds/ide-editor/config.json

@@ -0,0 +1,4 @@
+{
+  "shares": ["editor"],
+  "resizable": true
+}

data/app/javascript/seeds/ide-editor/data.js

@@ -0,0 +1,16 @@
+export default async function(shared, config) {
+
+  console.log("[editor] data_source called", {
+    openFiles: shared.editor.proxy.openFiles,
+    activeFile: shared.editor.proxy.activeFile
+  })
+
+  const p = shared.editor.proxy
+
+  return {
+    openFiles: p.openFiles || [],
+    activeFile: p.activeFile || null,
+    fileContents: p.fileContents || {},
+    _shared: shared,
+  }
+}