@connect-soft/form-generator 1.0.0 → 1.1.0-alpha2

package/README.md

@@ -2,367 +2,61 @@
 
 > Type-safe form generator with Radix UI, Tailwind CSS, and react-hook-form
 
-[![Version](https://img.shields.io/npm/v/@connect-soft/form-generator)](https://www.npmjs.com/package/@connect-soft/form-generator)
-[![License](https://img.shields.io/npm/l/@connect-soft/form-generator)](./LICENSE)
-[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@connect-soft/form-generator)](https://bundlephobia.com/package/@connect-soft/form-generator)
-
 **v2.0.0** - Complete rewrite with Radix UI + Tailwind CSS
-**50-60% smaller bundle** | **No runtime CSS overhead** | **Modern, accessible UI**
-
----
 
 ## Features
 
-✨ **Modern UI Stack**: Radix UI primitives + Tailwind CSS (shadcn/ui approach)
-📦 **Lightweight**: <80 KB gzipped (50-60% reduction from v1)
-🎯 **Type-Safe**: Full TypeScript inference for form values
-🔧 **Flexible**: 10+ field types with extensible API
-♿ **Accessible**: Built on Radix UI's accessible primitives
-🎨 **Customizable**: Easy styling with Tailwind classes
-🚀 **Performance**: No runtime CSS-in-JS, field-level subscriptions
-🔄 **Backward Compatible**: v1→v2 adapter included
-
----
+- ✨ Modern UI with Radix primitives + Tailwind CSS
+- 📦 50-60% smaller bundle (<80 KB gzipped)
+- 🎯 Full TypeScript type inference
+- 🔧 10+ field types with extensible API
+- ♿ Built-in accessibility
+- 🎨 Easy Tailwind customization
+- 🚀 Zero runtime CSS overhead
+- 🔄 v1→v2 migration adapter included
 
 ## Installation
 
 ```bash
-npm install @connect-soft/form-generator react-hook-form zod
+pnpm add @connect-soft/form-generator react-hook-form zod
 ```
 
-### Peer Dependencies
-
-- `react` ^19.0.0
-- `react-dom` ^19.0.0
-- `zod` ^4.0.0
-
-### Tailwind CSS Setup
-
-This library requires Tailwind CSS. If you don't have it set up:
-
-```bash
-npm install -D tailwindcss postcss autoprefixer
-npx tailwindcss init -p
-```
-
-**tailwind.config.js:**
-```javascript
-module.exports = {
-  content: [
-    './src/**/*.{js,ts,jsx,tsx}',
-    './node_modules/@connect-soft/form-generator/dist/**/*.{js,mjs}',
-  ],
-  theme: {
-    extend: {
-      // Your custom theme
-    },
-  },
-  plugins: [],
-};
-```
-
-**Import the styles in your main file:**
-```typescript
-import '@connect-soft/form-generator/dist/styles.css';
-```
-
----
-
 ## Quick Start
 
 ```typescript
-import { FormGenerator, Field } from '@connect-soft/form-generator';
+import { FormGenerator } from '@connect-soft/form-generator';
 
-const fields: Field[] = [
+const fields = [
   {
     type: 'text',
     name: 'email',
     label: 'Email',
     fieldType: 'email',
     required: true,
-    placeholder: 'Enter your email',
   },
   {
     type: 'number',
     name: 'age',
     label: 'Age',
     min: 18,
-    max: 120,
-  },
-  {
-    type: 'select',
-    name: 'country',
-    label: 'Country',
-    options: [
-      { label: 'United States', value: 'us' },
-      { label: 'United Kingdom', value: 'uk' },
-      { label: 'Germany', value: 'de' },
-    ],
-  },
-  {
-    type: 'checkbox',
-    name: 'subscribe',
-    label: 'Subscribe to newsletter',
-  },
-] as const;
-
-function MyForm() {
-  return (
-    <FormGenerator
-      fields={fields}
-      onSubmit={(values) => {
-        // ✅ values is fully typed!
-        console.log(values.email);    // string
-        console.log(values.age);      // number
-        console.log(values.country);  // string
-        console.log(values.subscribe);// boolean
-      }}
-      submitText="Create Account"
-    />
-  );
-}
-```
-
----
-
-## Field Types
-
-| Type | Description | Value Type |
-|------|-------------|------------|
-| `text` | Text input (email, password, url, tel) | `string` |
-| `textarea` | Multi-line text input | `string` |
-| `number` | Number input with min/max/step | `number` |
-| `checkbox` | Checkbox input | `boolean` |
-| `switch` | Toggle switch | `boolean` |
-| `select` | Dropdown select | `string` |
-| `radio` | Radio button group | `string` |
-| `date` | Date picker (react-day-picker) | `Date` |
-| `dateRange` | Date range picker | `{from: Date, to?: Date}` |
-| `time` | Time picker (HH:mm) | `string` |
-
----
-
-## Advanced Components
-
-### MultiSelect
-
-```typescript
-import { MultiSelect } from '@connect-soft/form-generator/advanced';
-
-<MultiSelect
-  options={[
-    { label: 'React', value: 'react' },
-    { label: 'Vue', value: 'vue' },
-    { label: 'Angular', value: 'angular' },
-  ]}
-  value={selected}
-  onChange={setSelected}
-  placeholder="Select frameworks..."
-/>
-```
-
-### ColorPicker
-
-```typescript
-import { ColorPicker } from '@connect-soft/form-generator/advanced';
-
-<ColorPicker
-  value={color}
-  onChange={setColor}
-/>
-```
-
-### TransferList
-
-```typescript
-import { TransferList } from '@connect-soft/form-generator/advanced';
-
-<TransferList
-  options={allOptions}
-  value={selectedValues}
-  onChange={setSelectedValues}
-  leftTitle="Available"
-  rightTitle="Selected"
-  searchable={true}
-/>
-```
-
----
-
-## Custom Validation
-
-Use Zod for schema validation:
-
-```typescript
-import { z } from 'zod';
-
-const fields = [
-  {
-    type: 'text',
-    name: 'username',
-    label: 'Username',
-    validation: z.string().min(3).max(20).regex(/^[a-zA-Z0-9_]+$/),
-  },
-  {
-    type: 'text',
-    name: 'email',
-    label: 'Email',
-    fieldType: 'email',
-    validation: z.string().email().endsWith('@company.com'),
-  },
-  {
-    type: 'number',
-    name: 'age',
-    label: 'Age',
-    validation: z.number().min(18).max(120),
   },
 ] as const;
-```
-
----
 
-## Styling
-
-### Using Tailwind Classes
-
-```typescript
-{
-  type: 'text',
-  name: 'email',
-  className: 'bg-blue-50 border-blue-300 focus:ring-blue-500',
-}
+export const MyForm = () => (
+  <FormGenerator
+    fields={fields}
+    onSubmit={(values) => {
+      // values is fully typed!
+      console.log(values);
+    }}
+  />
+);
 ```
 
-### Form-Level Styling
+## Documentation
 
-```typescript
-<FormGenerator
-  fields={fields}
-  onSubmit={handleSubmit}
-  className="max-w-md mx-auto p-6 bg-white rounded-lg shadow"
-/>
-```
-
-### Custom Theme
-
-Override CSS variables in your global CSS:
-
-```css
-:root {
-  --primary: 220 90% 56%;
-  --primary-foreground: 0 0% 100%;
-  --radius: 0.5rem;
-}
-```
-
----
-
-## TypeScript Type Inference
-
-The library provides full type inference for form values:
-
-```typescript
-const fields = [
-  { type: 'text', name: 'email', fieldType: 'email' },
-  { type: 'number', name: 'age' },
-  { type: 'checkbox', name: 'terms' },
-  { type: 'date', name: 'birthdate' },
-] as const;
-
-<FormGenerator
-  fields={fields}
-  onSubmit={(values) => {
-    // ✅ Fully typed!
-    values.email;     // string
-    values.age;       // number
-    values.terms;     // boolean
-    values.birthdate; // Date
-  }}
-/>
-```
-
----
-
-## Migration from v1.x
-
-Migrating from `@connect-soft/mui-hook-form` v1.x? See the [MIGRATION.md](./MIGRATION.md) guide.
-
-### Quick Migration with Adapter
-
-```typescript
-import { FormGenerator } from '@connect-soft/form-generator';
-import { adaptV1FieldsToV2 } from '@connect-soft/form-generator/adapters';
-
-// Your existing v1 fields
-const v1Fields = [
-  {
-    type: 'textField',
-    props: { name: 'email', label: 'Email', required: true },
-  },
-];
-
-// Auto-convert to v2
-const v2Fields = adaptV1FieldsToV2(v1Fields);
-
-<FormGenerator fields={v2Fields} onSubmit={handleSubmit} />
-```
-
----
-
-## API Reference
-
-### FormGenerator Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `fields` | `Field[]` | **required** | Array of field definitions |
-| `onSubmit` | `(values) => void \| Promise<void>` | **required** | Form submission handler |
-| `defaultValues` | `Partial<InferFormValues<TFields>>` | `{}` | Initial form values |
-| `className` | `string` | - | Tailwind classes for form container |
-| `submitText` | `string` | `'Submit'` | Submit button text |
-| `submitButtonVariant` | `'default' \| 'destructive' \| 'outline' \| 'secondary' \| 'ghost' \| 'link'` | `'default'` | Submit button style |
-| `disabled` | `boolean` | `false` | Disable entire form |
-| `mode` | `'onChange' \| 'onBlur' \| 'onSubmit' \| 'onTouched' \| 'all'` | `'onChange'` | Validation trigger mode |
-
-### Field Base Properties
-
-| Property | Type | Description |
-|----------|------|-------------|
-| `type` | `string` | Field type (text, number, select, etc.) |
-| `name` | `string` | Field name (must be unique) |
-| `label` | `string` | Field label |
-| `description` | `string` | Helper text below field |
-| `required` | `boolean` | Mark field as required |
-| `disabled` | `boolean` | Disable field |
-| `hidden` | `boolean` | Hide field |
-| `defaultValue` | `any` | Default field value |
-| `validation` | `ZodType` | Zod validation schema |
-| `className` | `string` | Tailwind classes for field |
-
----
-
-## Links
-
-- [Migration Guide](./MIGRATION.md)
-- [GitLab Repository](https://gitlab.com/connect-soft/components/form-generator)
-- [Issues](https://gitlab.com/connect-soft/components/form-generator/issues)
-
----
+See [main README](../../README.md) for full documentation.
 
 ## License
 
 ISC © Connect Soft
-
----
-
-## Acknowledgments
-
-Built with:
-- [Radix UI](https://www.radix-ui.com/) - Accessible UI primitives
-- [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS framework
-- [react-hook-form](https://react-hook-form.com/) - Performant form library
-- [Zod](https://zod.dev/) - TypeScript-first schema validation
-- [react-day-picker](https://react-day-picker.js.org/) - Flexible date picker
-- [lucide-react](https://lucide.dev/) - Beautiful icons
-
-Inspired by [shadcn/ui](https://ui.shadcn.com/) component architecture.