@twintag/twintag-form 1.4.0-beta.1 → 1.4.0-beta.2

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @twintag/twintag-form@1.4.0-beta.1 build C:\Users\daryl\Desktop\twintag-projects\twintag-admin\packages\twintag-form
+> @twintag/twintag-form@1.4.0-beta.2 build C:\Users\daryl\Desktop\twintag-projects\twintag-admin\packages\twintag-form
 > tsc && vite build
 
 vite v5.2.11 building for production...
@@ -14,8 +14,8 @@ computing gzip size...
 [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
-[vite:dts] Declaration files built in 5217ms.
+[vite:dts] Declaration files built in 5207ms.
 
 dist/twintag-form.webcomponent.js  119.76 kB │ gzip:  33.52 kB
-dist/twintag-form.react.js         706.05 kB │ gzip: 144.21 kB
-✓ built in 10.31s
+dist/twintag-form.react.js         706.32 kB │ gzip: 144.27 kB
+✓ built in 9.63s

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @twintag/twintag-form
 
+## 1.4.0-beta.2
+
+### Minor Changes
+
+- fix: add accordion `defaultValue` option
+
 ## 1.4.0-beta.1
 
 ### Minor Changes

package/README.md

@@ -348,13 +348,13 @@ The form component exposes the following CSS variables:
 | --tf-background         | Background color for the input fields.                                                    |
 | --tf-foreground         | Text color for the input fields.                                                          |
 |                         |                                                                                           |
-| --tf-muted              | Used for `toggle` and `tri-toggle` background when value is false.                                         |
+| --tf-muted              | Used for `toggle` and `tri-toggle` 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 `toggle`, `tri-toggle`, `checkbox` and `radiogroup` inputs.                |
+| --tf-accent             | The accent color is used for `toggle`, `tri-toggle`, `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.        |

package/dev/main.tsx

@@ -46,12 +46,205 @@ const config = [
       },
       {
         type: 'accordion',
+        props: {
+          defaultValue: 'required2',
+        },
+        children: [
+          {
+            type: 'accordion',
+            props: {
+              subtype: 'item',
+              label: 'Required 1',
+              value: 'required1',
+              icon: 'archive-box-x-mark',
+            },
+            children: [
+              {
+                type: 'input',
+                props: {
+                  subtype: 'toggle',
+                  label: 'Required',
+                  bind: 'required',
+                  options: {
+                    description: 'this field is required',
+                  },
+                },
+              },
+            ],
+          },
+          {
+            type: 'accordion',
+            props: {
+              subtype: 'item',
+              label: 'Required 2',
+              value: 'required2',
+              icon: 'archive-box-x-mark',
+            },
+            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: {
+            error: 'This field is required',
+            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: {
+            error: 'This field is required',
+            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',
+    props: {
+      subtype: 'submit',
+      label: 'Submit',
+    },
+  },
+] as React.ComponentProps<typeof Form>['config'];
+
+const config2 = [
+  {
+    type: 'category',
+    props: {
+      label: 'Category 1st',
+    },
+    children: [
+      {
+        type: 'input',
+        props: {
+          subtype: 'toggle',
+          label: 'Switch',
+          bind: 'switch',
+          options: {
+            description: 'this field is required',
+          },
+        },
+      },
+      {
+        type: 'accordion',
+        props: {
+          defaultValue: 'required2',
+        },
         children: [
           {
             type: 'accordion',
             props: {
               subtype: 'item',
-              label: 'Required',
+              label: 'Required 2',
+              value: 'required2',
               icon: 'archive-box-x-mark',
             },
             children: [
@@ -70,6 +263,28 @@ const config = [
           },
         ],
       },
+      {
+        type: 'input',
+        props: {
+          subtype: 'tri-toggle',
+          label: 'Tri-toggle',
+          bind: 'tri-toggle-bind',
+          options: {
+            description: 'this field is never required',
+          },
+        },
+      },
+      {
+        type: 'input',
+        props: {
+          subtype: 'datepicker',
+          label: 'Date picker',
+          bind: 'datepicker',
+          options: {
+            description: 'this field is required',
+          },
+        },
+      },
     ],
   },
   {
@@ -187,7 +402,7 @@ const config = [
       label: 'Submit',
     },
   },
-] satisfies React.ComponentProps<typeof Form>['config'];
+] as React.ComponentProps<typeof Form>['config'];
 
 const options = {
   defaultValues: {
@@ -231,3 +446,8 @@ submit?.addEventListener('click', () => {
     ?.querySelector('form')
     ?.dispatchEvent(new CustomEvent('twintag-form-validate'));
 });
+
+const setConfig = document.getElementById('set-config');
+setConfig?.addEventListener('click', () => {
+  form?.setAttribute('config', JSON.stringify(config2));
+});

package/dist/components/config.d.ts

@@ -1,6 +1,6 @@
 import { ElementType } from 'react';
-import { ComponentConfig } from '../types';
+import { InputCompConfig } from '../types';
 
-export declare const Inputs: Map<string, ComponentConfig>;
+export declare const Inputs: Map<string, InputCompConfig>;
 export declare const Containers: Map<string, ElementType>;
 export declare const components: Map<string, ElementType>;

package/dist/components/containers/accordion.d.ts

@@ -1,9 +1,7 @@
+import { Props } from '../../types';
 import { WithChildren } from 'twintag-types/dom';
 import { FC } from 'react';
 
-type AccordionProps = {
-    subtype?: 'item' | 'multiple' | 'single';
-    label?: string;
-} & WithChildren;
+type AccordionProps = Props<'accordion', 'item' | 'multiple' | 'single'> & WithChildren;
 declare const Accordion: FC<AccordionProps>;
 export { Accordion };

package/dist/components/fields/checkbox.d.ts

@@ -2,4 +2,4 @@ import { FC } from 'react';
 import { Props } from '../../types';
 
 export declare const DEFAULT_CHECKBOX_VALUE = false;
-export declare const Checkbox: FC<Props>;
+export declare const Checkbox: FC<Props<'input'>>;

package/dist/components/fields/date-picker.d.ts

@@ -2,4 +2,4 @@ import { Props } from '../../types';
 
 import * as React from 'react';
 export declare const DEFAULT_DATE_PICKER_VALUE: null;
-export declare const DatePicker: React.FC<Props>;
+export declare const DatePicker: React.FC<Props<'input'>>;

package/dist/components/fields/file.d.ts

@@ -2,4 +2,4 @@ import { FC } from 'react';
 import { Props } from '../../types';
 
 export declare const DEFAULT_FILE_VALUE = "";
-export declare const File: FC<Props>;
+export declare const File: FC<Props<'input'>>;

package/dist/components/fields/input.d.ts

@@ -2,4 +2,4 @@ import { FC } from 'react';
 import { Props } from '../../types';
 
 export declare const DEFAULT_INPUT_VALUE = "";
-export declare const Input: FC<Props>;
+export declare const Input: FC<Props<'input'>>;

package/dist/components/fields/radiogroup.d.ts

@@ -2,4 +2,6 @@ import { FC } from 'react';
 import { Props } from '../../types';
 
 export declare const DEFAULT_RADIOGROUP_VALUE = "";
-export declare const RadioGroup: FC<Props>;
+export declare const RadioGroup: FC<Props<'input'> & {
+    items: Props<'input'>[];
+}>;

package/dist/components/fields/textarea.d.ts

@@ -2,4 +2,4 @@ import { FC } from 'react';
 import { Props } from '../../types';
 
 export declare const DEFAULT_TEXTAREA_VALUE = "";
-export declare const Textarea: FC<Props>;
+export declare const Textarea: FC<Props<'input'>>;

package/dist/components/fields/toggle.d.ts

@@ -2,4 +2,4 @@ import { FC } from 'react';
 import { Props } from '../../types';
 
 export declare const DEFAULT_TOGGLE_VALUE = false;
-export declare const Toggle: FC<Props>;
+export declare const Toggle: FC<Props<'input'>>;

package/dist/components/fields/tri-toggle.d.ts

@@ -2,4 +2,4 @@ import { FC } from 'react';
 import { Props } from '../../types';
 
 export declare const DEFAULT_TRI_TOGGLE_VALUE: null;
-export declare const TriToggle: FC<Props>;
+export declare const TriToggle: FC<Props<'input'>>;

package/dist/components/provider.d.ts

@@ -1,4 +1,4 @@
-import { RawJsonComponent, TwintagFormContext, ComponentConfig } from '../types';
+import { ParsedJsonComponent, RawJsonComponent, TwintagFormContext, InputCompConfig } from '../types';
 import { WithChildren } from 'twintag-types/dom';
 import { Context, ElementType, ReactNode } from 'react';
 
@@ -6,14 +6,14 @@ export declare const twintagFormContext: Context<TwintagFormContext>;
 export declare const useTwintagForm: () => TwintagFormContext;
 type Components = TwintagFormContext['components'];
 type Inputs = TwintagFormContext['inputs'];
-export declare const getResetValues: (config: RawJsonComponent | RawJsonComponent[], inputs: Map<string, ComponentConfig>) => {
+export declare const getResetValues: (config: ParsedJsonComponent | ParsedJsonComponent[], inputs: Map<string, InputCompConfig>) => {
     [k: string]: unknown;
 };
 export declare const TwintagFormProvider: ({ variant, size, inputs, components, config, children, }: {
     config: RawJsonComponent | RawJsonComponent[];
     variant: TwintagFormContext['variant'];
     size: TwintagFormContext['size'];
-    inputs: Map<string, ComponentConfig>;
+    inputs: Map<string, InputCompConfig>;
     components: Map<string, ElementType>;
 } & {
     children?: ReactNode;