@uxf/form 11.31.0 → 11.31.1

package/_code-generator/form-code-generator.d.ts

@@ -0,0 +1,16 @@
+import { components } from "../components";
+export interface FieldDefinition {
+    type: keyof typeof components;
+    name: string;
+    label: string;
+    isRequired?: boolean;
+}
+export declare class FormCodeGenerator {
+    private formName;
+    private fields;
+    constructor(formName: string);
+    getFieldsCount(): number;
+    add(field: FieldDefinition): this;
+    generateComponent(field: FieldDefinition): string | null;
+    generate(): string;
+}

package/_code-generator/form-code-generator.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormCodeGenerator = void 0;
+function unique(value, index, array) {
+    return array.indexOf(value) === index;
+}
+function camelize(text) {
+    return text
+        .split(/[-_]+/)
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join("");
+}
+class FormCodeGenerator {
+    constructor(formName) {
+        this.fields = [];
+        this.formName = formName;
+    }
+    getFieldsCount() {
+        return this.fields.length;
+    }
+    add(field) {
+        this.fields.push(field);
+        return this;
+    }
+    generateComponent(field) {
+        return `<${camelize(field.type)} control={formApi.control} name="${field.name}" label="${field.label}" ${field.isRequired ? "isRequired " : ""}/>`;
+    }
+    generate() {
+        const componentName = camelize(this.formName);
+        return `import React from "react";
+import { Form } from "@uxf/form/form";
+import { useForm, SubmitHandler } from "react-hook-form";
+${this.fields
+            .map((field) => field.type)
+            .filter(unique)
+            .map((type) => `import { ${camelize(type)}, ${camelize(type)}Value } from "@uxf/form/${type}";`)
+            .join("\n")}
+
+export interface ${componentName}Data {
+${this.fields.map((field) => `    ${field.name}: ${camelize(field.type)}Value;`).join("\n")}
+}        
+
+export interface ${componentName}Props {
+    onSubmit: SubmitHandler<${componentName}Data>;
+    defaultValues: ${componentName}Data;
+}
+
+export function mapToFormData(values: any): ${componentName}Data  {
+    return {
+${this.fields.map((field) => `        ${field.name}: values.TODO`).join(",\n")}
+    }
+}
+        
+export function ${componentName}(props: ${componentName}Props) 
+{
+    const formApi = useForm({
+        defaultValues: props.defaultValues,
+    });
+    
+    return (
+        <Form formApi={formApi} onSubmit={props.onSubmit} id="${this.formName}">
+${this.fields.map((field) => `            ${this.generateComponent(field)}`).join("\n")}
+        </Form>
+    );
+}
+`;
+    }
+}
+exports.FormCodeGenerator = FormCodeGenerator;

package/bin/form-code-generator.d.ts

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

package/bin/form-code-generator.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable no-console */
+const fs_1 = require("fs");
+const node_readline_1 = require("node:readline");
+const form_code_generator_1 = require("../_code-generator/form-code-generator");
+const components_1 = require("../components");
+const rl = (0, node_readline_1.createInterface)({ input: process.stdin, output: process.stdout });
+function question(text) {
+    return new Promise((resolve) => rl.question(text, resolve));
+}
+async function run() {
+    const formName = await question("Zadejte název formuláře: ");
+    const formGenerator = new form_code_generator_1.FormCodeGenerator(formName);
+    const allowedComponents = Object.keys(components_1.components).filter((item) => item !== "form");
+    console.log();
+    console.log(allowedComponents.map((component, index) => `[${index}] ${component}`).join("\n"));
+    console.log();
+    let componentDefinition = null;
+    do {
+        // eslint-disable-next-line no-await-in-loop
+        componentDefinition = await question(`Komponenta ${formGenerator.getFieldsCount() + 1} [type, name, label, isRequired]: `);
+        if (componentDefinition) {
+            const [componentIndexString, name, label, required] = componentDefinition
+                .split(",")
+                .map((item) => item.trim());
+            const componentIndex = Number.parseInt(componentIndexString, 10);
+            const componentType = allowedComponents[componentIndex];
+            if (!name || !label) {
+                console.log("❗   Špatná definice. Komponenta nebyla přidána.\n");
+                continue;
+            }
+            const fieldDefinition = {
+                type: componentType,
+                name,
+                label,
+                isRequired: ["true", "1", "r", "required", "isRequired"].includes(required),
+            };
+            console.log(`✅   ${formGenerator.generateComponent(fieldDefinition)}\n`);
+            formGenerator.add(fieldDefinition);
+        }
+    } while (componentDefinition !== "");
+    const generatedFilename = `${process.cwd()}/${formName}.tsx`;
+    (0, fs_1.writeFileSync)(generatedFilename, formGenerator.generate());
+    console.log(`Generated file: ${generatedFilename}`);
+}
+run()
+    .then(() => {
+    process.exit(1);
+})
+    .catch(console.error);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/form",
-  "version": "11.31.0",
+  "version": "11.31.1",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,6 +10,9 @@
     "typecheck": "tsc --noEmit --skipLibCheck"
   },
   "author": "UX Fans s.r.o",
+  "bin": {
+    "uxf-form-code-generator": "bin/form-code-generator.js"
+  },
   "license": "MIT",
   "dependencies": {
     "@uxf/ui": "11.31.0",