formcn 1.0.0

package/generators/multi-form-generator.js

@@ -0,0 +1,257 @@
+import fs from "fs-extra";
+import path from "path";
+import {
+  toCamelCaseForm,
+  toKebabCaseForm,
+  toPascalCaseForm,
+} from "../utils/lib.js";
+import {
+  generateImports,
+  getComponentUsage,
+  getDefaultValue,
+  renderError,
+  renderInputByType,
+} from "./form-ui-templates.js";
+import { generateZodSchema } from "./schema-generator.js";
+import { multiFormPresets } from "../utils/tailwind-presets.js";
+import { confirm, isCancel } from "@clack/prompts";
+
+export async function generateMultiForm({ formName, steps, presetKey }) {
+  if (!Array.isArray(steps)) {
+    throw new Error("steps must be an array");
+  }
+
+  const baseDir = fs.existsSync(path.resolve("src"))
+    ? path.resolve("src/components/forms")
+    : path.resolve("components/forms");
+
+  const formDir = path.join(baseDir, formName);
+
+  const exists = await fs.pathExists(formDir);
+
+  if (exists) {
+    const overwrite = await confirm({
+      message: `Form "${formName}" already exists. Overwrite it?`,
+      initialValue: false,
+    });
+
+    if (isCancel(overwrite) || !overwrite) {
+      console.log("❌ Operation cancelled.");
+      process.exit(0);
+    }
+
+    await fs.remove(formDir);
+  }
+
+  try {
+    await fs.ensureDir(formDir);
+
+    const stepMetas = [];
+
+    for (const step of steps) {
+      const stepFileName = toCamelCaseForm(step.stepName);
+      const stepComponentName = `${toPascalCaseForm(step.stepName)}Step`;
+      const schemaName = `${stepFileName}Schema`;
+
+      await fs.writeFile(
+        path.join(formDir, `${toKebabCaseForm(step.stepName)}-schema.ts`),
+        generateZodSchema(step.fields, schemaName)
+      );
+
+      const uses = getComponentUsage(step.fields);
+
+      const stepComponentContent = `
+    "use client";
+    
+    ${generateImports(uses, "step")}
+    import type {${toPascalCaseForm(
+      schemaName
+    )}Values } from "./${toKebabCaseForm(step.stepName)}-schema";
+    
+    export default function ${stepComponentName}() {
+    const form = useFormContext<${toPascalCaseForm(schemaName)}Values>();
+    
+      return (
+        <FieldGroup>
+          ${step.fields
+            .map((f) => {
+              const isCheckbox = f.type === "checkbox";
+
+              return `
+            <Controller
+              name="${f.name}"
+              control={form.control}
+              render={({ field, fieldState }) => (
+                ${
+                  isCheckbox
+                    ? `
+                <>
+                  ${renderInputByType(f)}
+                  ${renderError()}
+                </>
+                `
+                    : `
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel htmlFor="${f.name}">${f.label}${
+                        f.required
+                          ? ' <span className="text-red-500">*</span>'
+                          : ""
+                      }
+                  </FieldLabel>
+                  ${renderInputByType(f)}
+                  ${renderError()}
+                </Field>
+                `
+                }
+              )}
+            />
+            `;
+            })
+            .join("\n")}
+        </FieldGroup>
+      );
+    }
+    `.trim();
+
+      await fs.writeFile(
+        path.join(formDir, `${stepFileName}Step.tsx`),
+        stepComponentContent
+      );
+
+      stepMetas.push({
+        id: stepFileName,
+        title: step.stepName,
+        component: stepComponentName,
+        schema: schemaName,
+        fields: step.fields,
+      });
+    }
+
+    let formComponentName = toPascalCaseForm(formName);
+    if (!formComponentName.endsWith("Form")) {
+      formComponentName += "Form";
+    }
+
+    const schemaImports = stepMetas
+      .map(
+        (s) => `import { ${s.schema} } from "./${toKebabCaseForm(s.schema)}";`
+      )
+      .join("\n");
+
+    const stepImports = stepMetas
+      .map(
+        (s) => `import ${s.component} from "./${toCamelCaseForm(s.title)}Step";`
+      )
+      .join("\n");
+
+    const combinedSchema = stepMetas
+      .map((s) => s.schema)
+      .join(".and(")
+      .concat(")".repeat(stepMetas.length - 1));
+
+    const allFields = stepMetas.flatMap((s) => s.fields);
+
+    const formUses = getComponentUsage(allFields);
+
+    const preset = multiFormPresets[presetKey];
+    if (!preset)
+      throw new Error(`Single form preset "${formPreset}" not found`);
+
+    const stepperTemplate = preset.stepper;
+
+    const formContent = `
+"use client";
+
+  import { useState } from "react";
+  import { z } from "zod";
+  
+  ${schemaImports}
+  ${stepImports}
+  ${generateImports(formUses, "multi")}
+
+const fullFormSchema = ${combinedSchema};
+export type FullFormData = z.infer<typeof fullFormSchema>;
+
+export default function ${formComponentName}() {
+  const [currentStep, setCurrentStep] = useState(0);
+  
+  const form = useForm({
+    resolver: zodResolver(fullFormSchema),
+    mode: "onChange",
+    defaultValues: {
+      ${allFields.map(getDefaultValue).join(",\n      ")}
+    },
+  });
+
+  const steps = ${JSON.stringify(
+    stepMetas.map((s) => ({
+      id: s.id,
+      title: s.title,
+      description: s.description,
+    })),
+    null,
+    2
+  )};
+
+  const stepSchemas = [${stepMetas.map((s) => s.schema).join(", ")}];
+  const stepComponents = [${stepMetas.map((s) => s.component).join(", ")}];
+
+  const CurrentStep = stepComponents[currentStep];
+  ${
+    presetKey === "minimal" || presetKey === "softType"
+      ? `const currentStepData = steps[currentStep];`
+      : ""
+  }
+
+  async function next() {
+    const schema = stepSchemas[currentStep];
+    const fields = Object.keys(schema.shape) as (keyof FullFormData)[];
+    const valid = await form.trigger(fields);
+    if (valid) setCurrentStep((s) => s + 1);
+  }
+
+  function prev() {
+    setCurrentStep((s) => s - 1);
+  }
+
+  function onSubmit(data: FullFormData) {
+    console.log("Submitted:", data);
+  }
+
+  return (
+    <FormProvider {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="${preset.form}">
+         ${stepperTemplate} 
+         <div className="${preset.step ?? ""}">
+         <CurrentStep />
+ 
+         <div className="${preset.buttonsWrapper}">
+            <Button type="button" onClick={prev} disabled={currentStep === 0}>
+              Previous
+            </Button>
+           {currentStep < steps.length - 1 && (
+             <Button type="button" onClick={next}>
+               Next
+             </Button>
+           )}
+           {currentStep === steps.length - 1 && <Button type="submit">Submit</Button>}
+         </div>
+         </div>
+      </form>
+    </FormProvider>
+  );
+}
+`.trim();
+
+    await fs.writeFile(
+      path.join(formDir, `${formComponentName}.tsx`),
+      formContent
+    );
+
+    console.log(`✅ Multi-step form generated at ${formDir}`);
+  } catch (error) {
+    await fs.remove(formDir);
+    console.error("❌ Failed to generate multi-step form. Changes reverted.");
+    throw error;
+  }
+}

package/generators/schema-generator.js

@@ -0,0 +1,89 @@
+import { toPascalCaseForm } from "../utils/lib.js";
+
+export function generateZodSchema(fields, schemaName = "schema") {
+  const getLabel = (field) => field.label || field.name;
+
+  const TYPE_SCHEMAS = {
+    email: (f) =>
+      f.required
+        ? `z.email("Invalid email")`
+        : `z.email("Invalid email").optional().or(z.literal(""))`,
+
+    password: (f) =>
+      f.required
+        ? `z.string().min(8, "Password must be at least 8 characters")`
+        : `z.string().min(8).optional()`,
+
+    number: (f) =>
+      f.required
+        ? `z.number({ error: "${getLabel(f)} is required" })`
+        : `z.number().optional()`,
+
+    phone: (f) =>
+      f.required
+        ? `z.coerce.number({ error: "${getLabel(f)} is required" })`
+        : `z.coerce.number().optional()`,
+
+    checkbox: (f) =>
+      f.required
+        ? `z.boolean().refine(val => val === true, "${getLabel(
+            f
+          )} must be checked")`
+        : `z.boolean().optional()`,
+
+    date: (f) =>
+      f.required
+        ? `z.string().min(1, "${getLabel(f)} is required")`
+        : `z.string().optional()`,
+
+    select: (f) => {
+      const options = f.options
+        .map((o) => `z.literal("${o.value}")`)
+        .join(", ");
+      return f.required
+        ? `z.union([${options}], { error: "Please select ${getLabel(f)}" })`
+        : `z.union([${options}]).optional()`;
+    },
+
+    url: (f) =>
+      f.required
+        ? `z.url("Invalid URL")`
+        : `z.url("Invalid URL").optional().or(z.literal(""))`,
+
+    default: (f) =>
+      f.required
+        ? `z.string().min(1, "${getLabel(f)} is required")`
+        : `z.string().optional()`,
+  };
+
+  const getSchema = (field) => {
+    if (field.isConfirmation) return TYPE_SCHEMAS.default(field);
+    return (TYPE_SCHEMAS[field.type] || TYPE_SCHEMAS.default)(field);
+  };
+
+  const shape = fields.map((f) => `${f.name}: ${getSchema(f)}`).join(",\n");
+
+  const passwordRefinements = fields
+    .filter((f) => f.isConfirmation)
+    .map(
+      (f) => `
+  .refine((data) => data.${f.confirmationFor} === data.${f.name}, {
+    message: "Passwords do not match",
+    path: ["${f.name}"],
+  })`
+    )
+    .join("");
+
+  const typeName = `${toPascalCaseForm(schemaName)}Values`;
+
+  return `
+import { z } from "zod";
+
+export const ${schemaName} = z
+  .object({
+${shape},
+  })${passwordRefinements};
+
+export type ${typeName} = z.infer<typeof ${schemaName}>;
+`.trim();
+}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "formcn",
+  "version": "1.0.0",
+  "description": "Schema-driven React form generator using React Hook Form, Zod, and shadcn/ui",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "bin": {
+    "formcn": "./bin/index.js"
+  },
+  "keywords": [
+    "react",
+    "forms",
+    "typescript",
+    "react-hook-form",
+    "zod",
+    "shadcn",
+    "cli",
+    "generator"
+  ],
+  "author": "Fares Galal",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/F-47/formcn.git"
+  },
+  "bugs": {
+    "url": "https://github.com/F-47/formcn/issues"
+  },
+  "homepage": "https://github.com/F-47/formcn#readme",
+  "dependencies": {
+    "@clack/prompts": "^0.11.0",
+    "@hookform/resolvers": "^5.2.2",
+    "chalk": "^5.6.2",
+    "chalk-animation": "^2.0.3",
+    "commander": "^14.0.2",
+    "figlet": "^1.9.4",
+    "fs-extra": "^11.3.3",
+    "inquirer": "^13.1.0",
+    "nanospinner": "^1.2.2",
+    "react-hook-form": "^7.69.0",
+    "zod": "^4.2.1"
+  }
+}

package/test/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

package/test/components.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

package/test/eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

package/test/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>test</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>