jigsaw_engine 0.4.0

data/app/javascript/jigsaw/lib/generate_layout_css.js

@@ -0,0 +1,52 @@
+export function generateLayoutCss(config) {
+  if (!config.areas || !config.areas.length) return ""
+  return generateGridCss(config)
+}
+
+export function generateLayoutHtml(config) {
+  if (!config.areas || !config.areas.length) return ""
+  return generateGridHtml(config)
+}
+
+function generateGridCss(c) {
+  let css = `.container {\n  display: grid;\n`
+  css += `  width: ${c.gridWidth || "100%"};\n`
+  css += `  height: ${c.gridHeight || "100%"};\n`
+
+  const hasAreas = c.areas.flat().some(a => a !== ".")
+  if (hasAreas) {
+    css += `  grid-template-areas: ${c.areas.map(row => `"${row.join(" ")}"`).join("\n    ")};\n`
+  }
+
+  css += `  grid-template-columns: ${c.columns.join(" ")};\n`
+  css += `  grid-template-rows: ${c.rows.join(" ")};\n`
+  css += `  gap: ${c.rowGap}${c.rowGapUnit || "px"} ${c.colGap}${c.colGapUnit || "px"};\n`
+  css += `}\n`
+
+  if (hasAreas) {
+    const uniqueAreas = [...new Set(c.areas.flat())].filter(a => a !== ".")
+    for (const name of uniqueAreas) {
+      css += `\n.${name} { grid-area: ${name}; }`
+    }
+  }
+
+  return css
+}
+
+function generateGridHtml(c) {
+  const hasAreas = c.areas?.flat().some(a => a !== ".")
+
+  if (hasAreas) {
+    const uniqueAreas = [...new Set(c.areas.flat())].filter(a => a !== ".")
+    const children = uniqueAreas.map((name, i) =>
+      `  <div class="${name}">${name}</div>`
+    ).join("\n")
+    return `<div class="container">\n${children}\n</div>`
+  }
+
+  const count = c.childrenCount || 9
+  const children = Array.from({ length: count }, (_, i) =>
+    `  <div>${i + 1}</div>`
+  ).join("\n")
+  return `<div class="container">\n${children}\n</div>`
+}

data/app/javascript/seeds/blocks/authentication-forms-1/config.json

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

data/app/javascript/seeds/blocks/authentication-forms-1/data.js

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

data/app/javascript/seeds/blocks/authentication-forms-1/render.jsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+
+const loginSchema = z.object({
+  email: z.string().email("Invalid email address"),
+  password: z.string().min(8, "Password must be at least 8 characters long")
+});
+
+type LoginFormData = z.infer<typeof loginSchema>;
+
+export default function LoginForm() {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting }
+  } = useForm<LoginFormData>({
+    resolver: zodResolver(loginSchema)
+  });
+
+  const onSubmit = async (data: LoginFormData) => {
+    console.log("form data -->", data);
+  };
+
+  return (
+    <Card className="w-full md:w-[350px]">
+      <CardHeader>
+        <CardTitle>Login</CardTitle>
+        <CardDescription>Enter your credentials to access your account</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              placeholder="Enter your email"
+              {...register("email")}
+              aria-invalid={errors.email ? "true" : "false"}
+            />
+            {errors.email && <p className="mt-1 text-sm text-red-500">{errors.email.message}</p>}
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              type="password"
+              placeholder="Enter your password"
+              {...register("password")}
+              aria-invalid={errors.password ? "true" : "false"}
+            />
+            {errors.password && (
+              <p className="mt-1 text-sm text-red-500">{errors.password.message}</p>
+            )}
+          </div>
+        </form>
+      </CardContent>
+      <CardFooter>
+        <Button type="submit" className="w-full" disabled={isSubmitting}>
+          {isSubmitting ? "Logging in..." : "Login"}
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+}

data/app/javascript/seeds/blocks/authentication-forms-2/config.json

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

data/app/javascript/seeds/blocks/authentication-forms-2/data.js

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

data/app/javascript/seeds/blocks/authentication-forms-2/render.jsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { GithubIcon, MailIcon } from "lucide-react";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+
+const loginSchema = z.object({
+  email: z.string().email("Invalid email address"),
+  password: z.string().min(8, "Password must be at least 8 characters long")
+});
+
+type LoginFormData = z.infer<typeof loginSchema>;
+
+export default function LoginForm() {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting }
+  } = useForm<LoginFormData>({
+    resolver: zodResolver(loginSchema)
+  });
+
+  const onSubmit = async (data: LoginFormData) => {
+    console.log("form data -->", data);
+  };
+
+  return (
+    <Card className="w-full md:w-[350px]">
+      <CardHeader>
+        <CardTitle>Login</CardTitle>
+        <CardDescription>Enter your credentials to access your account</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-8">
+        <div className="grid grid-cols-2 gap-4">
+          <Button variant="outline" className="w-full">
+            <MailIcon />
+            Google
+          </Button>
+          <Button variant="outline" className="w-full">
+            <GithubIcon />
+            GitHub
+          </Button>
+        </div>
+        <div className="relative">
+          <div className="absolute inset-0 flex items-center">
+            <span className="w-full border-t" />
+          </div>
+          <div className="relative flex justify-center text-xs uppercase">
+            <span className="bg-background text-muted-foreground px-2">Or continue with</span>
+          </div>
+        </div>
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              placeholder="Enter your email"
+              {...register("email")}
+              aria-invalid={errors.email ? "true" : "false"}
+            />
+            {errors.email && <p className="mt-1 text-sm text-red-500">{errors.email.message}</p>}
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              type="password"
+              placeholder="Enter your password"
+              {...register("password")}
+              aria-invalid={errors.password ? "true" : "false"}
+            />
+            {errors.password && (
+              <p className="mt-1 text-sm text-red-500">{errors.password.message}</p>
+            )}
+          </div>
+          <Button type="submit" className="w-full" disabled={isSubmitting}>
+            {isSubmitting ? "Logging in..." : "Login with Email"}
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}

data/app/javascript/seeds/blocks/authentication-forms-3/config.json

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

data/app/javascript/seeds/blocks/authentication-forms-3/data.js

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

data/app/javascript/seeds/blocks/authentication-forms-3/render.jsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { GithubIcon, GitlabIcon, MailIcon } from "lucide-react";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+
+const loginSchema = z.object({
+  email: z.string().email("Invalid email address"),
+  password: z.string().min(8, "Password must be at least 8 characters long")
+});
+
+type LoginFormData = z.infer<typeof loginSchema>;
+
+export default function LoginForm() {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting }
+  } = useForm<LoginFormData>({
+    resolver: zodResolver(loginSchema)
+  });
+
+  const onSubmit = async (data: LoginFormData) => {
+    console.log("form data -->", data);
+  };
+
+  return (
+    <Card className="w-full md:w-[350px]">
+      <CardHeader>
+        <CardTitle>Login</CardTitle>
+        <CardDescription>Enter your credentials to access your account</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-8">
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              placeholder="Enter your email"
+              {...register("email")}
+              aria-invalid={errors.email ? "true" : "false"}
+            />
+            {errors.email && <p className="mt-1 text-sm text-red-500">{errors.email.message}</p>}
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              type="password"
+              placeholder="Enter your password"
+              {...register("password")}
+              aria-invalid={errors.password ? "true" : "false"}
+            />
+            {errors.password && (
+              <p className="mt-1 text-sm text-red-500">{errors.password.message}</p>
+            )}
+          </div>
+          <Button type="submit" className="w-full" disabled={isSubmitting}>
+            {isSubmitting ? "Logging in..." : "Login with Email"}
+          </Button>
+        </form>
+        <div className="relative">
+          <div className="absolute inset-0 flex items-center">
+            <span className="w-full border-t" />
+          </div>
+          <div className="relative flex justify-center text-xs uppercase">
+            <span className="bg-background text-muted-foreground px-2">Or continue with</span>
+          </div>
+        </div>
+        <div className="grid gap-3">
+          <Button variant="outline" className="w-full">
+            <MailIcon />
+            Continue with Google
+          </Button>
+          <Button variant="outline" className="w-full">
+            <GithubIcon />
+            Continue with GitHub
+          </Button>
+          <Button variant="outline" className="w-full">
+            <GitlabIcon />
+            Continue with Gitlab
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

data/app/javascript/seeds/blocks/authentication-forms-4/config.json

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

data/app/javascript/seeds/blocks/authentication-forms-4/data.js

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

data/app/javascript/seeds/blocks/authentication-forms-4/render.jsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ArrowLeftIcon, ArrowRightIcon, GithubIcon, GitlabIcon, MailIcon } from "lucide-react";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+
+const loginSchema = z.object({
+  email: z.string().email("Invalid email address"),
+  password: z.string().min(8, "Password must be at least 8 characters long")
+});
+
+type LoginFormData = z.infer<typeof loginSchema>;
+
+export default function LoginForm() {
+  const [isManuelForm, setIsManuelForm] = useState<boolean>(false);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting }
+  } = useForm<LoginFormData>({
+    resolver: zodResolver(loginSchema)
+  });
+
+  const onSubmit = async (data: LoginFormData) => {
+    console.log("form data -->", data);
+  };
+
+  return (
+    <Card className="w-full md:w-[350px]">
+      <CardHeader>
+        <CardTitle className="text-center">Log in to App</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-8">
+        {isManuelForm ? (
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <Input
+                id="email"
+                type="email"
+                placeholder="Enter your email"
+                {...register("email")}
+                aria-invalid={errors.email ? "true" : "false"}
+              />
+              {errors.email && <p className="mt-1 text-sm text-red-500">{errors.email.message}</p>}
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="password">Password</Label>
+              <Input
+                id="password"
+                type="password"
+                placeholder="Enter your password"
+                {...register("password")}
+                aria-invalid={errors.password ? "true" : "false"}
+              />
+              {errors.password && (
+                <p className="mt-1 text-sm text-red-500">{errors.password.message}</p>
+              )}
+            </div>
+            <Button type="submit" className="w-full" disabled={isSubmitting}>
+              {isSubmitting ? "Logging in..." : "Login with email"}
+            </Button>
+            <Button variant="ghost" className="w-full" onClick={() => setIsManuelForm(false)}>
+              <ArrowLeftIcon /> Other login options
+            </Button>
+          </form>
+        ) : (
+          <div className="grid gap-3">
+            <Button variant="outline" className="w-full">
+              <MailIcon />
+              Continue with Google
+            </Button>
+            <Button variant="outline" className="w-full">
+              <GithubIcon />
+              Continue with GitHub
+            </Button>
+            <Button variant="outline" className="w-full">
+              <GitlabIcon />
+              Continue with Gitlab
+            </Button>
+            <Button variant="ghost" className="w-full" onClick={() => setIsManuelForm(true)}>
+              Continue with Email <ArrowRightIcon className="ms-1 size-4" />
+            </Button>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

data/app/javascript/seeds/blocks/authentication-forms-5/config.json

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

data/app/javascript/seeds/blocks/authentication-forms-5/data.js

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

data/app/javascript/seeds/blocks/authentication-forms-5/render.jsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+
+const registerSchema = z.object({
+  name: z.string().email("Name field required"),
+  email: z.string().email("Invalid email address"),
+  password: z.string().min(8, "Password must be at least 8 characters long")
+});
+
+type RegisterFormData = z.infer<typeof registerSchema>;
+
+export default function RegisterForm() {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting }
+  } = useForm<RegisterFormData>({
+    resolver: zodResolver(registerSchema)
+  });
+
+  const onSubmit = async (data: RegisterFormData) => {
+    console.log("form data -->", data);
+  };
+
+  return (
+    <Card className="w-full md:w-[350px]">
+      <CardHeader>
+        <CardTitle className="text-xl">Create a new account</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-8">
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="name">Name</Label>
+            <Input
+              id="name"
+              type="name"
+              placeholder="Enter your name"
+              {...register("name")}
+              aria-invalid={errors.name ? "true" : "false"}
+            />
+            {errors.name && <p className="mt-1 text-sm text-red-500">{errors.name.message}</p>}
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              placeholder="Enter your email"
+              {...register("email")}
+              aria-invalid={errors.email ? "true" : "false"}
+            />
+            {errors.email && <p className="mt-1 text-sm text-red-500">{errors.email.message}</p>}
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              type="password"
+              placeholder="Enter your password"
+              {...register("password")}
+              aria-invalid={errors.password ? "true" : "false"}
+            />
+            {errors.password && (
+              <p className="mt-1 text-sm text-red-500">{errors.password.message}</p>
+            )}
+          </div>
+          <Button type="submit" className="w-full" disabled={isSubmitting}>
+            {isSubmitting ? "Please wait..." : "Register"}
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}

data/app/javascript/seeds/blocks/authentication-forms-6/config.json

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

data/app/javascript/seeds/blocks/authentication-forms-6/data.js

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

data/app/javascript/seeds/blocks/authentication-forms-6/render.jsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { REGEXP_ONLY_DIGITS } from "input-otp";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/input-otp";
+
+export default function OTPForm() {
+  return (
+    <Card className="w-full md:w-[350px]">
+      <CardHeader>
+        <CardTitle>Enter Verification Code</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <InputOTP
+          maxLength={6}
+          pattern={REGEXP_ONLY_DIGITS}
+          onComplete={(value) => alert(`value: ${value}`)}>
+          <InputOTPGroup className="space-x-4 *:rounded-lg! *:border!">
+            <InputOTPSlot index={0} />
+            <InputOTPSlot index={1} />
+            <InputOTPSlot index={2} />
+            <InputOTPSlot index={3} />
+            <InputOTPSlot index={4} />
+            <InputOTPSlot index={5} />
+          </InputOTPGroup>
+        </InputOTP>
+        <p className="text-muted-foreground text-sm">
+          You will be automatically redirected after the code is confirmed.
+        </p>
+      </CardContent>
+    </Card>
+  );
+}

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

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

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

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