formcn 1.0.0

package/utils/prompts.js

@@ -0,0 +1,200 @@
+import fs from "fs-extra";
+import path from "path";
+import { select, text, confirm, isCancel } from "@clack/prompts";
+
+export async function askFormName() {
+  const baseDir = fs.existsSync(path.resolve("src"))
+    ? path.resolve("src/components/forms")
+    : path.resolve("components/forms");
+
+  const formName = await text({
+    message: "Form name (the component will be suffixed with 'Form')",
+    placeholder: "register → RegisterForm",
+    validate(value) {
+      if (!value) return "Form name is required";
+
+      if (!/^[a-zA-Z0-9-_]+$/.test(value)) {
+        return "Use only letters, numbers, dashes or underscores";
+      }
+
+      const formDir = path.join(baseDir, value);
+
+      if (fs.pathExistsSync(formDir)) {
+        return `A form named "${value}" already exists`;
+      }
+    },
+  });
+
+  if (isCancel(formName)) {
+    console.log("❌ Operation cancelled.");
+    process.exit(0);
+  }
+
+  return formName;
+}
+export async function askFormType() {
+  const result = await select({
+    message: "Form type?",
+    options: [
+      { value: "single", label: "Single step" },
+      { value: "multi", label: "Multi step" },
+    ],
+  });
+
+  if (isCancel(result)) {
+    console.log("❌ Operation cancelled.");
+    process.exit(0);
+  }
+  return result;
+}
+
+export async function askFormTemplate(formType) {
+  const choice = await select({
+    message: `Do you want a ready template for the ${formType} form, or create manually?`,
+    options: [
+      { value: "template", label: "Use ready template" },
+      { value: "manual", label: "Create manually" },
+    ],
+  });
+
+  if (isCancel(choice)) {
+    console.log("❌ Operation cancelled.");
+    process.exit(0);
+  }
+
+  return choice;
+}
+
+const FIELD_TYPES = [
+  { value: "text", label: "Text" },
+  { value: "email", label: "Email" },
+  { value: "password", label: "Password" },
+  { value: "number", label: "Number" },
+  { value: "url", label: "URL" },
+  { value: "textarea", label: "Textarea" },
+  { value: "select", label: "Select" },
+  { value: "checkbox", label: "Checkbox" },
+  { value: "radio", label: "Radio" },
+  { value: "date", label: "Date" },
+];
+
+export async function askFields() {
+  const fields = [];
+
+  while (true) {
+    const type = await select({
+      message: "Field type?",
+      options: FIELD_TYPES,
+    });
+    if (isCancel(type)) {
+      console.log("❌ Operation cancelled.");
+      process.exit(0);
+    }
+
+    const label = await text({
+      message: 'Label (e.g. "First Name" → "first_name" as field name)',
+      validate(value) {
+        if (!value.trim()) return "Label cannot be empty.";
+      },
+    });
+    if (isCancel(label)) {
+      console.log("❌ Operation cancelled.");
+      process.exit(0);
+    }
+
+    const name = label.trim().toLowerCase().replace(/\s+/g, "_");
+
+    const required = await confirm({ message: "Required?" });
+    if (isCancel(required)) {
+      console.log("❌ Operation cancelled.");
+      process.exit(0);
+    }
+
+    let options;
+
+    if (type === "select" || type === "radio") {
+      options = [];
+
+      while (true) {
+        const labelInput = await text({
+          message: 'Option label? (e.g. "Active User" → "active_user")',
+          validate(value) {
+            const transformed = value.trim().toLowerCase().replace(/\s+/g, "_");
+            if (!value.trim()) return "Option label cannot be empty.";
+            if (options.some((o) => o.value === transformed))
+              return `Option "${transformed}" already exists.`;
+          },
+        });
+        if (isCancel(labelInput)) {
+          console.log("❌ Operation cancelled.");
+          process.exit(0);
+        }
+
+        const label = labelInput
+          .split(" ")
+          .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+          .join(" ");
+
+        const value = label.trim().toLowerCase().replace(/\s+/g, "_");
+
+        options.push({ label, value });
+
+        const more = await confirm({ message: "Add another option?" });
+        if (isCancel(more) || !more) break;
+      }
+    }
+
+    fields.push({
+      type,
+      name,
+      label,
+      required,
+      options,
+    });
+
+    const addMore = await confirm({ message: "Add another field?" });
+    if (isCancel(addMore) || !addMore) break;
+  }
+
+  return fields;
+}
+
+export async function askSteps() {
+  const steps = [];
+
+  while (true) {
+    const stepName = await text({
+      message: "Step name?",
+      validate(value) {
+        if (!value.trim()) return "Step Name cannot be empty.";
+      },
+    });
+    if (isCancel(stepName)) {
+      console.log("❌ Operation cancelled.");
+      process.exit(0);
+    }
+
+    console.log(`\nAdd fields for step: ${stepName}\n`);
+    const fields = await askFields();
+
+    steps.push({ stepName, fields });
+
+    const addMoreSteps = await confirm({ message: "Add another step?" });
+    if (isCancel(addMoreSteps) || !addMoreSteps) break;
+  }
+
+  return steps;
+}
+
+export async function askFormPreset(presets) {
+  const choices = Object.keys(presets).map((key) => ({
+    value: key,
+    label: key,
+  }));
+  const preset = await select({
+    message: "Choose a form preset:",
+    options: choices,
+  });
+
+  return preset;
+}

package/utils/tailwind-presets.js

@@ -0,0 +1,132 @@
+export const singleFormPresets = {
+  default: {
+    form: "space-y-6 max-w-3xl mx-auto bg-white p-6 rounded-lg border border-slate-200 shadow-sm",
+    buttonsWrapper: "flex justify-end gap-2 pt-4 border-t border-slate-100",
+  },
+};
+
+export const multiFormPresets = {
+  minimal: {
+    form: "w-full max-w-4xl mx-auto bg-white text-zinc-900 p-8 rounded-2xl border border-zinc-200 shadow-xl",
+    buttonsWrapper: "flex justify-between mt-10",
+    stepper: `<div className="mb-4 space-y-2">
+    <div className="flex gap-1 mb-4">
+      {steps.map((_, i) => (
+        <div
+          key={i}
+        className={\`h-1 flex-1 rounded-full transition-all duration-500 \${
+                  i <= currentStep ? "bg-zinc-900" : "bg-zinc-100"
+                }\`}
+        />
+      ))}
+    </div>
+    <h2 className="text-2xl font-bold tracking-tight capitalize text-start">
+      {currentStepData.title}
+    </h2>
+  </div>`,
+  },
+  sidebarStepper: {
+    form: "w-full max-w-4xl mx-auto flex bg-white rounded-2xl border border-slate-200 shadow-xl overflow-hidden min-h-[500px]",
+    buttonsWrapper:
+      "flex justify-between items-center mt-10 pt-8 border-t border-slate-100",
+    step: "flex-1 p-8",
+    stepper: `
+    <div className="w-72 bg-slate-900 p-8 text-white space-y-8">
+      <div className="space-y-1 flex flex-col items-start">
+        <h3 className="text-lg font-bold">Registration</h3>
+        <p className="text-slate-400 text-xs">Complete all steps to join us.</p>
+      </div>
+    
+      <div className="space-y-6">
+        {steps.map((step, i) => {
+          const isCompleted = i < currentStep
+          const isActive = i === currentStep
+    
+          return (
+            <div key={i} className="flex gap-4 items-center">
+              <div className="mt-1">
+                {isCompleted ? (
+                  <div className="w-5 h-5 rounded-full bg-emerald-400 flex items-center justify-center text-[10px] font-bold text-slate-900">
+                    ✓
+                  </div>
+                ) : (
+                  <div
+                    className={
+                      "w-5 h-5 rounded-full border-2 flex items-center justify-center text-[10px] font-bold " +
+                      (isActive
+                        ? "border-white bg-white text-slate-900"
+                        : "border-slate-700 text-slate-500")
+                    }
+                  >
+                    {i + 1}
+                  </div>
+                )}
+              </div>
+    
+              <p
+                className={
+                  "text-xs font-bold uppercase tracking-wider " +
+                  (i <= currentStep ? "text-white" : "text-slate-600")
+                }
+              >
+                {step.title}
+              </p>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+    `,
+  },
+  softType: {
+    form: "w-full max-w-2xl mx-auto bg-white p-12 rounded-[2.5rem] shadow-[0_20px_50px_rgba(0,0,0,0.05)] border border-slate-50/50",
+    buttonsWrapper: "flex gap-4 mt-10",
+    stepper: ` <div className="flex flex-col items-start justify-start mb-4">
+          <h2 className="text-xl font-bold text-slate-800">
+            Step {currentStep + 1} of {steps.length}
+          </h2>
+          <p className="text-slate-400 text-sm capitalize">{currentStepData.title}</p>
+        </div>`,
+  },
+  stepperTop: {
+    form: "w-full max-w-2xl mx-auto bg-white rounded-2xl border p-8 border-slate-200 shadow-sm overflow-hidden",
+    buttonsWrapper: "flex justify-end gap-3 mt-10",
+    stepper: `
+    <div className="py-6">
+      <div className="relative flex justify-between">
+        <div className="absolute top-4 left-0 w-full h-0.5 bg-slate-200 z-0">
+          <div
+            className="h-full bg-slate-600 transition-all duration-500"
+            style={{ width: \`\${(currentStep / (steps.length - 1)) * 100}%\` }}
+          />
+        </div>
+    
+        {steps.map((step, i) => (
+          <div key={i} className="relative z-10 flex flex-col items-center group">
+          <div
+            className={
+              "w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold transition-all duration-300 border-2 " +
+              (i < currentStep
+                ? "bg-slate-600 border-slate-600 text-white"
+                : i === currentStep
+                ? "bg-white border-slate-600 text-slate-600"
+                : "bg-white border-slate-300 text-slate-400")
+            }
+          >
+            {i + 1}
+       </div>
+        <span
+          className={
+            "mt-2 text-[10px] font-bold uppercase tracking-wider transition-colors " +
+            (i <= currentStep ? "text-slate-600" : "text-slate-400")
+          }
+        >
+          {step.title.split(" ")[0]}
+        </span>
+        </div>
+        ))}
+      </div>
+    </div>
+    `,
+  },
+};

package/utils/templates.js

@@ -0,0 +1,103 @@
+export const SINGLE_FIELD_TEMPLATES = {
+  registration: [
+    { name: "first_name", type: "text", label: "First Name", required: true },
+    { name: "last_name", type: "text", label: "Last Name", required: true },
+    { name: "email", type: "email", label: "Email", required: true },
+    {
+      name: "password",
+      type: "password",
+      label: "Password",
+      required: true,
+      confirm: true,
+    },
+  ],
+  login: [
+    { name: "email", type: "email", label: "Email", required: true },
+    {
+      name: "password",
+      type: "password",
+      label: "Password",
+      required: true,
+      confirm: false,
+    },
+  ],
+  contact: [
+    { name: "full_name", type: "text", label: "Full Name", required: true },
+    { name: "email", type: "email", label: "Email", required: true },
+    { name: "subject", type: "text", label: "Subject", required: true },
+    { name: "message", type: "textarea", label: "Message", required: true },
+  ],
+};
+
+export const MULTI_STEP_TEMPLATES = {
+  registration: [
+    {
+      stepName: "Personal Info",
+      fields: [
+        {
+          name: "first_name",
+          type: "text",
+          label: "First Name",
+          required: true,
+        },
+        { name: "last_name", type: "text", label: "Last Name", required: true },
+        {
+          name: "gender",
+          type: "radio",
+          label: "Gender",
+          required: true,
+          options: [
+            { label: "Male", value: "male" },
+            { label: "Female", value: "female" },
+            { label: "Other", value: "other" },
+          ],
+        },
+        { name: "birthdate", type: "date", label: "Birthdate", required: true },
+      ],
+    },
+    {
+      stepName: "Account Details",
+      fields: [
+        { name: "email", type: "email", label: "Email", required: true },
+        {
+          name: "password",
+          type: "password",
+          label: "Password",
+          required: true,
+        },
+        {
+          name: "password_confirmation",
+          type: "password",
+          label: "Confirm Password",
+          required: true,
+          isConfirmation: true,
+          confirmationFor: "password",
+        },
+      ],
+    },
+    {
+      stepName: "Contact Info",
+      fields: [
+        {
+          name: "phone",
+          type: "number",
+          label: "Phone Number",
+          required: true,
+        },
+        { name: "address", type: "text", label: "Address", required: true },
+        { name: "city", type: "text", label: "City", required: true },
+        {
+          name: "country",
+          type: "select",
+          label: "Country",
+          required: true,
+          options: [
+            { label: "United States", value: "us" },
+            { label: "Canada", value: "ca" },
+            { label: "United Kingdom", value: "uk" },
+          ],
+        },
+      ],
+    },
+  ],
+};

package/utils/test.js

@@ -0,0 +1,136 @@
+export const FAST_MODE = false;
+
+export const FAST_FORMS = [
+  {
+    formName: "testSingleAllTypes",
+    type: "single",
+    presetKey: "default",
+    steps: [
+      {
+        stepName: "main",
+        fields: [
+          {
+            name: "first_name",
+            label: "First Name",
+            type: "text",
+            required: true,
+          },
+          { name: "email", label: "Email", type: "email", required: true },
+          {
+            name: "password",
+            label: "Password",
+            type: "password",
+            required: true,
+          },
+          { name: "age", label: "Age", type: "number", required: false },
+          {
+            name: "birthdate",
+            label: "Birthdate",
+            type: "date",
+            required: true,
+          },
+          { name: "website", label: "Website", type: "url", required: false },
+          {
+            name: "subscribe",
+            label: "Subscribe",
+            type: "checkbox",
+            required: false,
+          },
+          {
+            name: "gender",
+            label: "Gender",
+            type: "radio",
+            required: true,
+            options: [
+              { label: "Male", value: "male" },
+              { label: "Female", value: "female" },
+            ],
+          },
+          {
+            name: "country",
+            label: "Country",
+            type: "select",
+            required: true,
+            options: [
+              { label: "USA", value: "usa" },
+              { label: "UK", value: "uk" },
+              { label: "UAE", value: "uae" },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+
+  // Multi-step form with all types split across steps
+  {
+    formName: "test",
+    type: "multi",
+    presetKey: "minimal", // stepperTop | minimal | sidebarStepper | softType
+    steps: [
+      {
+        stepName: "personal",
+        fields: [
+          {
+            name: "first_name",
+            label: "First Name",
+            type: "text",
+            required: true,
+          },
+          { name: "email", label: "Email", type: "email", required: true },
+          {
+            name: "password",
+            label: "Password",
+            type: "password",
+            required: true,
+          },
+        ],
+      },
+      {
+        stepName: "details",
+        fields: [
+          { name: "age", label: "Age", type: "number", required: false },
+          {
+            name: "birthdate",
+            label: "Birthdate",
+            type: "date",
+            required: true,
+          },
+          { name: "website", label: "Website", type: "url", required: false },
+        ],
+      },
+      {
+        stepName: "preferences",
+        fields: [
+          {
+            name: "subscribe",
+            label: "Subscribe",
+            type: "checkbox",
+            required: false,
+          },
+          {
+            name: "gender",
+            label: "Gender",
+            type: "radio",
+            required: true,
+            options: [
+              { label: "Male", value: "male" },
+              { label: "Female", value: "female" },
+            ],
+          },
+          {
+            name: "country",
+            label: "Country",
+            type: "select",
+            required: true,
+            options: [
+              { label: "USA", value: "usa" },
+              { label: "UK", value: "uk" },
+              { label: "UAE", value: "uae" },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];