config-driven-form 1.1.2 → 1.3.0

package/README.md

@@ -16,6 +16,7 @@ Stop writing thousands of lines of boilerplate form code. Define your data struc
 - 🎨 **Beautiful by Default:** Includes a stunning, modern glassmorphic design system out of the box.
 - 🏗️ **Multi-Column Layouts:** Easily build complex 2, 3, or 4-column grid layouts using the `uiSchema`.
 - 🧩 **Rich Field Types:** Natively supports Text, Numbers, Passwords, Dropdowns, Radios, Checkboxes, File Uploads, and a Tiptap Rich Text Editor!
+- 🏗️ **Visual Form Builder:** Includes a powerful, Strapi-like Drag-and-Drop builder to visually construct schemas and UI schemas without writing code!
 
 ---
 
@@ -139,6 +140,90 @@ export default function AdvancedForm() {
 
 ---
 
+## 🎨 Deep Customization with Tailwind CSS (New!)
+
+If you want to use **Tailwind CSS** (or any other class-based framework) to completely reskin the form, `config-driven-form` exposes a deeply nested `classNames` API.
+
+This is a zero-dependency, standard headless UI approach. You can pass global classes via the `classNames` prop on `<SchemaForm>`, and even override specific individual fields using `ui:classNames` in your `uiSchema`!
+
+```tsx
+import React from 'react';
+import { SchemaForm, JSONSchema } from 'config-driven-form';
+// Note: You can skip importing the default CSS if you want pure Tailwind styling
+
+const schema: JSONSchema = {
+  type: 'object',
+  properties: {
+    email: { type: 'string', format: 'email', title: 'Email Address' },
+  },
+};
+
+export default function TailwindForm() {
+  return (
+    <SchemaForm
+      schema={schema}
+      classNames={{
+        container: 'max-w-xl mx-auto p-6 bg-white rounded-xl shadow-md',
+        label: 'block text-sm font-medium text-gray-700 mb-1',
+        input:
+          'w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500',
+        submitButton: 'w-full bg-blue-600 text-white py-2 rounded-md hover:bg-blue-700 transition',
+      }}
+      // You can override specific fields!
+      uiSchema={{
+        email: {
+          'ui:classNames': {
+            input: 'border-red-500 bg-red-50', // e.g. force error state styling statically
+          },
+        },
+      }}
+      onSubmit={(data) => console.log(data)}
+    />
+  );
+}
+```
+
+---
+
+## 🏗️ Visual Form Builder (New!)
+
+Tired of writing JSON by hand? We've built a world-class, **Drag-and-Drop Visual Form Builder** directly into the library!
+
+You can embed this builder into your own admin panels, let users visually construct their forms, set validation rules, pick themes, and then save the output as standard `JSONSchema` to store in your database!
+
+```tsx
+import React from 'react';
+import { FormBuilder } from 'config-driven-form';
+import 'config-driven-form/dist/index.css';
+
+export default function AdminFormBuilder() {
+  return (
+    <div style={{ height: '100vh', width: '100vw' }}>
+      <FormBuilder
+        // Optional: Pass existing schemas to edit them!
+        // initialSchema={existingSchema}
+        // initialUiSchema={existingUiSchema}
+        onSave={(schema, uiSchema, formSettings) => {
+          console.log('Generated Schema:', schema);
+          console.log('Generated UI Schema:', uiSchema);
+          console.log('Global Form Settings:', formSettings);
+
+          // Save to your database here!
+        }}
+      />
+    </div>
+  );
+}
+```
+
+### Builder Features:
+
+- **Drag & Drop Canvas:** Powered by `@dnd-kit` for buttery smooth reordering.
+- **Live Preview Mode:** Toggle between Editor and Preview mode to test validation instantly.
+- **Global Theme & Layout Controls:** Let your users pick their brand colors and column layouts visually.
+
+---
+
 ## 📚 Supported Field Types
 
 The library automatically inspects the `type`, `format`, and `enum` properties of your JSON Schema to render the correct UI component:
@@ -166,13 +251,14 @@ The library automatically inspects the `type`, `format`, and `enum` properties o
 | :-------------- | :------------------------- | :------: | :-------------------------------------------------------------------------------------- |
 | `schema`        | `JSONSchema`               |   Yes    | The standard JSON Schema defining your data.                                            |
 | `onSubmit`      | `(data: any) => void`      |   Yes    | Callback function triggered when the form is valid and submitted.                       |
-| `uiSchema`      | `Record<string, UISchema>` |    No    | Controls UI-specific rendering (widgets, column spans) without altering data structure. |
+| `uiSchema`      | `Record<string, UISchema>` |    No    | Controls UI-specific rendering (widgets, column spans, field-level classNames).         |
 | `columns`       | `1 \| 2 \| 3 \| 4`         |    No    | Defines the global CSS Grid columns for the form layout. Default: `1`.                  |
 | `theme`         | `Object`                   |    No    | An object to override CSS variables (`primary`, `background`, `text`, `error`, etc.).   |
+| `classNames`    | `FormClassNames`           |    No    | An object mapping internal elements to custom CSS classes (e.g., Tailwind CSS support). |
 | `defaultValues` | `Object`                   |    No    | Initial data to populate the form fields before rendering.                              |
 
 ---
 
 ## 🤝 Contributing
 
-We welcome contributions! If you want to fix a bug, add a new field type, or improve the documentation, please read our [Developer's Guide (CONTRIBUTING.md)](./CONTRIBUTING.md) to get started with your local development environment.
+We welcome contributions! If you want to fix a bug, add a new field type, or improve the documentation, please read our [Developer's Guide (CONTRIBUTING.md)](https://github.com/Aaditya-Rana/config-driven-form/blob/main/CONTRIBUTING.md) to get started with your local development environment.

package/dist/index.d.mts

@@ -18,9 +18,30 @@ interface JSONSchema {
     items?: JSONSchema | JSONSchema[];
     default?: any;
 }
+interface FormClassNames {
+    container?: string;
+    title?: string;
+    description?: string;
+    form?: string;
+    fieldGroup?: string;
+    label?: string;
+    input?: string;
+    inputError?: string;
+    errorText?: string;
+    submitButton?: string;
+    radioGroup?: string;
+    radioLabel?: string;
+    radioInput?: string;
+    checkboxGroup?: string;
+    checkboxLabel?: string;
+    checkboxInput?: string;
+    fileWrapper?: string;
+    fileText?: string;
+}
 interface UISchema {
     'ui:widget'?: 'radio' | 'checkboxes' | 'textarea' | 'color' | string;
     'ui:columnSpan'?: number;
+    'ui:classNames'?: FormClassNames;
     [key: string]: any;
 }
 
@@ -38,6 +59,7 @@ interface SchemaFormProps {
         surface?: string;
         border?: string;
     };
+    classNames?: FormClassNames;
 }
 declare const SchemaForm: React.FC<SchemaFormProps>;
 
@@ -49,4 +71,23 @@ interface FieldRendererProps {
 }
 declare const FieldRenderer: React.FC<FieldRendererProps>;
 
-export { type FieldFormat, FieldRenderer, type FieldType, type JSONSchema, SchemaForm, type UISchema };
+interface FormSettings {
+    columns: 1 | 2 | 3 | 4;
+    theme: {
+        primary?: string;
+        background?: string;
+        text?: string;
+        error?: string;
+    };
+}
+
+interface FormBuilderProps {
+    initialSchema?: JSONSchema;
+    initialUiSchema?: Record<string, UISchema>;
+    initialColumns?: 1 | 2 | 3 | 4;
+    initialTheme?: FormSettings['theme'];
+    onSave?: (schema: JSONSchema, uiSchema: Record<string, UISchema>, formSettings: FormSettings) => void;
+}
+declare const FormBuilder: React.FC<FormBuilderProps>;
+
+export { type FieldFormat, FieldRenderer, type FieldType, FormBuilder, type FormClassNames, type JSONSchema, SchemaForm, type UISchema };

package/dist/index.d.ts

@@ -18,9 +18,30 @@ interface JSONSchema {
     items?: JSONSchema | JSONSchema[];
     default?: any;
 }
+interface FormClassNames {
+    container?: string;
+    title?: string;
+    description?: string;
+    form?: string;
+    fieldGroup?: string;
+    label?: string;
+    input?: string;
+    inputError?: string;
+    errorText?: string;
+    submitButton?: string;
+    radioGroup?: string;
+    radioLabel?: string;
+    radioInput?: string;
+    checkboxGroup?: string;
+    checkboxLabel?: string;
+    checkboxInput?: string;
+    fileWrapper?: string;
+    fileText?: string;
+}
 interface UISchema {
     'ui:widget'?: 'radio' | 'checkboxes' | 'textarea' | 'color' | string;
     'ui:columnSpan'?: number;
+    'ui:classNames'?: FormClassNames;
     [key: string]: any;
 }
 
@@ -38,6 +59,7 @@ interface SchemaFormProps {
         surface?: string;
         border?: string;
     };
+    classNames?: FormClassNames;
 }
 declare const SchemaForm: React.FC<SchemaFormProps>;
 
@@ -49,4 +71,23 @@ interface FieldRendererProps {
 }
 declare const FieldRenderer: React.FC<FieldRendererProps>;
 
-export { type FieldFormat, FieldRenderer, type FieldType, type JSONSchema, SchemaForm, type UISchema };
+interface FormSettings {
+    columns: 1 | 2 | 3 | 4;
+    theme: {
+        primary?: string;
+        background?: string;
+        text?: string;
+        error?: string;
+    };
+}
+
+interface FormBuilderProps {
+    initialSchema?: JSONSchema;
+    initialUiSchema?: Record<string, UISchema>;
+    initialColumns?: 1 | 2 | 3 | 4;
+    initialTheme?: FormSettings['theme'];
+    onSave?: (schema: JSONSchema, uiSchema: Record<string, UISchema>, formSettings: FormSettings) => void;
+}
+declare const FormBuilder: React.FC<FormBuilderProps>;
+
+export { type FieldFormat, FieldRenderer, type FieldType, FormBuilder, type FormClassNames, type JSONSchema, SchemaForm, type UISchema };