@twintag/twintag-form 0.5.0 → 1.0.0-beta.0

package/.eslintrc.cjs

@@ -1,4 +1,9 @@
 module.exports = {
   root: true,
-  extends: ["custom"],
+  extends: ['custom'],
+  parserOptions: {
+    project: 'tsconfig.json',
+    tsconfigRootDir: __dirname,
+    sourceType: 'module',
+  },
 };

package/.turbo/turbo-build.log

@@ -1,16 +1,21 @@
 
-> @twintag/twintag-form@0.5.0 build /home/runner/work/twintag-templates/twintag-templates/packages/twintag-form
+> @twintag/twintag-form@1.0.0-beta.0 build C:\Users\daryl\Desktop\twintag-projects\twintag-admin\packages\twintag-form
 > tsc && vite build
 
-vite v4.3.9 building for production...
+vite v4.4.9 building for production...
 transforming...
-✓ 671 modules transformed.
+✓ 1358 modules transformed.
 rendering chunks...
-
-[vite:dts] Start generate declaration files...
+
+[vite:dts] Start generate declaration files...
 computing gzip size...
-dist/twintag-form.webcomponent.js  117.30 kB │ gzip: 33.19 kB
-dist/twintag-form.react.js         249.06 kB │ gzip: 56.76 kB
-[vite:dts] Declaration files built in 7200ms.
-
-✓ built in 10.74s
+[vite:dts] Outside emitted: C:/Users/daryl/Desktop/twintag-projects/twintag-admin/packages/twintag-form/tailwind.config.d.ts
+[vite:dts] Outside emitted: C:/Users/daryl/Desktop/twintag-projects/twintag-admin/packages/twintag-form/.eslintrc.d.cts
+[vite:dts] Outside emitted: C:/Users/daryl/Desktop/twintag-projects/twintag-admin/packages/twintag-form/prettier.config.d.mts
+[vite:dts] Outside emitted: C:/Users/daryl/Desktop/twintag-projects/twintag-admin/packages/twintag-form/dev/main.d.ts
+[vite:dts] Outside emitted: C:/Users/daryl/Desktop/twintag-projects/twintag-admin/packages/twintag-form/vite.config.d.ts
+dist/twintag-form.webcomponent.js  119.20 kB │ gzip: 33.33 kB
+dist/twintag-form.react.js         247.16 kB │ gzip: 56.86 kB
+[vite:dts] Declaration files built in 3617ms.
+
+✓ built in 6.81s

package/.turbo/turbo-lint.log

@@ -0,0 +1,4 @@
+
+> @twintag/twintag-form@0.6.0 lint C:\Users\daryl\Desktop\twintag-projects\twintag-admin\packages\twintag-form
+> eslint . --ext .ts,.tsx
+

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @twintag/twintag-form
 
+## 1.0.0-beta.0
+
+### Major Changes
+
+- d84b6f7: refactor: design system update
+
+## 0.6.0
+
+### Minor Changes
+
+- 04036a0: fix: styles update and code clean-up
+
+### Patch Changes
+
+- Updated dependencies [04036a0]
+  - @twintag/twintag-json-renderer@0.2.0
+
 ## 0.5.0
 
 ### Minor Changes

package/README.md

@@ -8,13 +8,8 @@
   - [Config](#config)
   - [Options](#options)
   - [Inputs](#inputs)
-    - [Input Options](#input-options)
-    - [Simple](#simple)
-    - [Textarea](#textarea)
-    - [File](#file)
-    - [Checkbox](#checkbox)
-    - [Toggle](#toggle)
-    - [Submit](#submit)
+    - [Options](#options)
+    - [Subtypes](#subtypes)
 - [Event Handling](#event-handling)
 - [CSS](#css)
 
@@ -43,16 +38,18 @@ The form component receives the following parameters:
 
 The `config` object contains the form structure. It is organized by the index of the items, where each item is an `Input` field represented by an object with the following properties:
 
-| Property          | Type     | Description                                                    |
-| ----------------- | -------- | -------------------------------------------------------------- |
-| `input:<subtype>` | `string` | Type of the input.                                             |
-| `label`           | `string` | Name of the form.                                              |
-| `bind`            | `string` | Unique identifier for the form. (Optional for `Submit` inputs) |
+| Property  | Type     | Description                                                                      |
+| --------- | -------- | -------------------------------------------------------------------------------- |
+| `type`    | `string` | Component type. The subtype is optional as part of the string: `input:<subtype>` |
+| `subtype` | `string` | Component subtype                                                                |
+| `label`   | `string` | Field label.                                                                     |
+| `bind`    | `string` | Field name.                                                                      |
 
 ```json
 [
   {
-    "type": "input:simple",
+    "type": "input",
+    "subtype": "simple",
     "label": "Email",
     "bind": "email"
   },
@@ -62,7 +59,8 @@ The `config` object contains the form structure. It is organized by the index of
     "bind": "message"
   },
   {
-    "type": "input:submit",
+    "type": "input",
+    "subtype": "submit",
     "label": "Submit"
   }
 ]
@@ -72,103 +70,121 @@ The `config` object contains the form structure. It is organized by the index of
 
 Twintag Form provides some options to customize the form:
 
-| Option          | Type         | Description                                                               |
-| --------------- | ------------ | ------------------------------------------------------------------------- |
-| `variant`       | `alpha/beta` | Variant of the form.                                                      |
-| `resetOnSubmit` | `boolean`    | If `true`, the form will be reset after submitting. (`false` per default) |
+| Option          | Type           | Description                                                               |
+| --------------- | -------------- | ------------------------------------------------------------------------- |
+| `variant`       | `default/beta` | Variant of the form.                                                      |
+| `resetOnSubmit` | `boolean`      | If `true`, the form will be reset after submitting. (`false` per default) |
 
 ### **Inputs**
 
-#### **Input Options**
+#### **Options**
 
-Each input can be customized with the following options:
+Each input can be customized with the following optional options:
 
-| Option          | Type         | Description                                                  |
-| --------------- | ------------ | ------------------------------------------------------------ |
-| `variant`       | `alpha/beta` | Variant of the input.                                        |
-| `placeholder`   | `string`     | Placeholder of the input.                                    |
-| `optionalField` | `boolean`    | If `true`, the field will be optional. (`false` per default) |
+| Option          | Type      | Description                                                  |
+| --------------- | --------- | ------------------------------------------------------------ |
+| `description`   | `string`  | Description of the input.                                    |
+| `error`         | `string`  | Error message.                                               |
+| `placeholder`   | `string`  | Placeholder of the input.                                    |
+| `optionalField` | `boolean` | If `true`, the field will be optional. (`false` per default) |
 
 ```json
 {
-  "type": "input:simple",
+  "type": "input",
+  "subtype": "simple",
   "label": "Email",
   "bind": "email",
   "options": {
-    "variant": "alpha",
-    "placeholder": "Enter your email",
+    "description": "Please enter you email",
+    "error": "The field is empty."
+    "placeholder": "Write here...",
     "optionalField": true
   }
 }
 ```
 
-#### **Simple**
+### **Subtypes**
 
-The `simple` input is a simple text input.
+- Simple
 
 ```json
 {
-  "type": "input:simple",
+  "type": "input",
+  "subtype": "simple",
   "label": "Email",
   "bind": "email"
 }
 ```
 
-#### **Textarea**
-
-The `textarea` input is a textarea input.
+- Textarea
 
 ```json
 {
-  "type": "input:textarea",
+  "type": "input",
+  "subtype": "textarea",
   "label": "Message",
   "bind": "message"
 }
 ```
 
-#### **File**
-
-The `file` input is a file input.
+- File
 
 ```json
 {
-  "type": "input:file",
+  "type": "input",
+  "subtype": "file",
   "label": "File",
   "bind": "file"
 }
 ```
 
-#### **Checkbox**
-
-The `checkbox` input is a checkbox input.
+- Checkbox
 
 ```json
 {
-  "type": "input:checkbox",
+  "type": "input",
+  "subtype": "checkbox",
   "label": "Checkbox",
   "bind": "checkbox"
 }
 ```
 
-#### **Toggle**
-
-The `toggle` input is a toggle input.
+- Toggle
 
 ```json
 {
-  "type": "input:toggle",
+  "type": "input",
+  "subtype": "toggle",
   "label": "Toggle",
   "bind": "toggle"
 }
 ```
 
-#### **Submit**
+- Radiogroup
+
+```json
+{
+  "type": "input",
+  "subtype": "radiogroup",
+  "label": "Radio Group",
+  "bind": "radiogroup",
+  "children": [
+    {
+      "type": "item",
+      "label": "First item",
+      "bind": "first-item"
+    },
+    ...
+  ]
+}
+```
 
-The `submit` input is a submit input.
+- Submit
 
 ```json
 {
-  "type": "input:submit",
+  "type": "input",
+  "subtype": "submit",
   "label": "Submit"
 }
 ```
@@ -210,12 +226,24 @@ The `submit` input is a submit input.
 
 The form component exposes the following CSS variables:
 
-| Variable               | Description                   |
-| ---------------------- | ----------------------------- |
-| `--clr-primary`        | Primary color of the form.    |
-| `--clr-accent`         | Accent color of the form.     |
-| `--clr-label`          | Color of the labels.          |
-| `--clr-input`          | Color of the inputs.          |
-| `--clr-placeholder`    | Color of the placeholders.    |
-| `--clr-category-label` | Color of the category labels. |
-| `--ff-text`            | Font family of the text.      |
+| Variable                | Description                                                                               |
+| ----------------------- | ----------------------------------------------------------------------------------------- |
+| --tf-background         | Background color for the input fields.                                                    |
+| --tf-foreground         | Color used for the `category` labels.                                                     |
+|                         |                                                                                           |
+| --tf-muted              | Used for `switch` background when value is false.                                         |
+| --tf-muted-foreground   | Color used for `placeholder` text (inputs) and description text.                          |
+|                         |                                                                                           |
+| --tf-primary            | This color complements `primary-foreground`: `submit` button text                         |
+| --tf-primary-foreground | This color is used for, `submit` background, `label` text and input value.                |
+|                         |                                                                                           |
+| --tf-accent             | The accent color is used for `switch`, `checkbox` and `radiogroup` inputs.                |
+| --tf-accent-foreground  | This color complements `accent` to show contrast between elements: `checkbox` check icon. |
+|                         |                                                                                           |
+| --tf-destructive        | This color is used for `error` messages and the asterisk to mark a required input.        |
+| --tf-input              | This color is used by the borders of the inputs.                                          |
+| --tf-ring               | This color highlights a focused input.                                                    |
+|                         |                                                                                           |
+| --tf-radius             | This value is used for rounded corners of all inputs.                                     |
+|                         |                                                                                           |
+| --tf-font               | Font family for all the form.                                                             |

package/dev/index.css

@@ -0,0 +1,29 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --tf-background: 0 0% 100%;
+  --tf-foreground: 222.2 47.4% 11.2%;
+
+  --tf-muted: 210 40% 96.1%;
+  --tf-muted-foreground: 215.4 16.3% 46.9%;
+
+  --tf-primary:  210 40% 98%;
+  --tf-primary-foreground:  222.2 47.4% 11.2%;
+
+  --tf-accent: 222.2 47.4% 11.2%;
+  --tf-accent-foreground: 210 40% 96.1%;
+
+  --tf-destructive: 0 100% 50%;
+  --tf-destructive-foreground: 210 40% 98%;
+
+  --tf-input: 214.3 31.8% 91.4%;
+  --tf-ring: 215 20.2% 65.1%;
+
+  --tf-radius: 0.5rem;
+
+  --tf-font: 'Roboto', sans-serif;
+}

package/dev/main.tsx

@@ -0,0 +1,163 @@
+import React from 'react';
+import install from '@twind/with-react';
+import ReactDOM from 'react-dom/client';
+
+import { Form } from '../lib';
+import tw from '../twind.config';
+
+import './index.css';
+
+const config = [
+  {
+    type: 'category',
+    props: {
+      label: 'Category 1st',
+    },
+    children: [
+      {
+        type: 'input',
+        props: {
+          subtype: 'toggle',
+          label: 'Required',
+          bind: 'required',
+          options: {
+            description: 'This field is required',
+          },
+        },
+      },
+    ],
+  },
+  {
+    type: 'category',
+    props: {
+      label: 'Category 2nd',
+    },
+    children: [
+      {
+        type: 'input',
+        props: {
+          subtype: 'simple',
+          label: 'Email',
+          bind: 'email',
+          options: {
+            description: 'This field is required',
+          },
+        },
+      },
+      {
+        type: 'input',
+        props: {
+          subtype: 'radiogroup',
+          label: 'Radio Group',
+          bind: 'radiogroup',
+          options: {
+            description: 'This field is required',
+            error: 'This field is required',
+          },
+        },
+        children: [
+          {
+            type: 'item',
+            props: {
+              label: 'Checkbox',
+              bind: 'checkbox',
+              options: {
+                description: 'This field is required',
+                error: 'This field is required',
+              },
+            },
+          },
+          {
+            type: 'item',
+            props: {
+              label: 'Mote',
+              bind: 'mote',
+              options: {
+                description: 'This field is required',
+                error: 'This field is required',
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+  {
+    type: 'category',
+    props: {
+      label: 'Category 3rd',
+    },
+    children: [
+      {
+        type: 'input',
+        props: {
+          subtype: 'file',
+          label: 'File',
+          bind: 'file',
+          options: {
+            description: 'This field is required',
+          },
+        },
+      },
+    ],
+  },
+  {
+    type: 'category',
+    props: {
+      label: 'Category 4th',
+    },
+    children: [
+      {
+        type: 'input',
+        props: {
+          subtype: 'textarea',
+          label: 'Textarea',
+          bind: 'textarea',
+          options: {
+            description: 'This field is required',
+            error: 'This field is required',
+          },
+        },
+      },
+      {
+        type: 'input',
+        props: {
+          subtype: 'checkbox',
+          label: 'Checkbox',
+          bind: 'checkbox',
+          options: {
+            description: 'This field is required',
+            error: 'This field is required',
+          },
+        },
+      },
+    ],
+  },
+  {
+    type: 'input:submit',
+    props: {
+      label: 'Submit',
+    },
+  },
+] satisfies React.ComponentProps<typeof Form>['config'];
+
+const options = {
+  variant: 'beta',
+  resetOnSubmit: true,
+} as const;
+
+const App = () => {
+  return (
+    <div className='mx-auto max-w-lg bg-background p-8'>
+      <Form config={config} options={options} />
+    </div>
+  );
+};
+
+install(tw);
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

package/dist/common/button.d.ts

@@ -0,0 +1,137 @@
+import { TVConfig } from 'tailwind-variants/dist/config.js';
+import { TVReturnType, VariantProps } from 'tailwind-variants';
+import * as React from 'react';
+declare const buttonVariants: TVReturnType<{
+    variant: {
+        default: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}, undefined, string[], TVConfig<{
+    variant: {
+        default: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}, {
+    variant: {
+        default: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}>, {
+    variant: {
+        default: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}, undefined, TVReturnType<{
+    variant: {
+        default: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}, undefined, string[], TVConfig<{
+    variant: {
+        default: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}, {
+    variant: {
+        default: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}>, unknown, unknown, undefined>>;
+export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+};
+declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<TVReturnType<{
+    variant: {
+        default: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}, undefined, string[], TVConfig<{
+    variant: {
+        default: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}, {
+    variant: {
+        default: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}>, {
+    variant: {
+        default: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}, undefined, TVReturnType<{
+    variant: {
+        default: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}, undefined, string[], TVConfig<{
+    variant: {
+        default: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}, {
+    variant: {
+        default: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}>, unknown, unknown, undefined>>> & {
+    asChild?: boolean | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export { Button, buttonVariants };

package/dist/common/checkbox.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { Checkbox };

package/dist/common/form.d.ts

@@ -0,0 +1,24 @@
+import { SlotProps } from '@radix-ui/react-slot';
+import { JSX } from 'react/jsx-runtime';
+import type * as LabelPrimitive from '@radix-ui/react-label';
+import { FormProviderProps, FieldError, ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
+import * as React from 'react';
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues extends FieldValues | undefined = undefined>(props: FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => JSX.Element;
+declare const useFormField: () => {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    error?: FieldError | undefined;
+    id: string;
+    name: string;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+};
+declare const FormItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const FormLabel: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+declare const FormControl: React.ForwardRefExoticComponent<Omit<SlotProps & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+declare const FormDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const FormMessage: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, };

package/dist/common/input.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export { Input };