@twintag/twintag-form 1.0.1 → 1.1.0

package/.turbo/turbo-build.log

@@ -1,10 +1,10 @@
 
-> @twintag/twintag-form@1.0.1 build C:\Users\daryl\Desktop\twintag-projects\twintag-admin\packages\twintag-form
+> @twintag/twintag-form@1.1.0 build C:\Users\daryl\Desktop\twintag-projects\twintag-admin\packages\twintag-form
 > tsc && vite build
 
 vite v4.4.9 building for production...
 transforming...
-✓ 1358 modules transformed.
+✓ 2526 modules transformed.
 rendering chunks...
 
 [vite:dts] Start generate declaration files...
@@ -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
-dist/twintag-form.webcomponent.js  119.25 kB │ gzip: 33.34 kB
-dist/twintag-form.react.js         247.12 kB │ gzip: 56.86 kB
-[vite:dts] Declaration files built in 3571ms.
+[vite:dts] Declaration files built in 4882ms.
 
-✓ built in 6.37s
+dist/twintag-form.webcomponent.js  119.72 kB │ gzip:  33.42 kB
+dist/twintag-form.react.js         687.68 kB │ gzip: 139.91 kB
+✓ built in 10.80s

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @twintag/twintag-form
 
+## 1.1.0
+
+### Minor Changes
+
+- feat: `datepicker`, `accordion` and `defaultValues`
+
+## 1.0.3
+
+### Patch Changes
+
+- refactor: remove `twintag-form` reference to `ui-stories`
+
+## 1.0.2
+
+### Patch Changes
+
+- docs: update list of available CSS properties
+
 ## 1.0.1
 
 ### Patch Changes

package/README.md

@@ -74,6 +74,7 @@ Twintag Form provides some options to customize the form:
 | --------------- | -------------- | ------------------------------------------------------------------------- |
 | `variant`       | `default/beta` | Variant of the form.                                                      |
 | `resetOnSubmit` | `boolean`      | If `true`, the form will be reset after submitting. (`false` per default) |
+| `defaultValues` | `object`       | The properties are the same as the bind values in your config.            |
 
 ### **Inputs**
 
@@ -189,6 +190,60 @@ Each input can be customized with the following optional options:
 }
 ```
 
+- Date picker
+
+```json
+{
+  "type": "input",
+  "subtype": "datepicker",
+  "label": "Pick a date"
+}
+```
+
+## **Containers**
+
+- Accordion
+
+```json
+{
+  "type": "accordion",
+  "children": [
+    {
+      "type": "accordion",
+      "subtype": "item",
+      "label": "Your label",
+      "icon": "archive-box-x-mark",
+      "children": [
+        {
+          "type": "input",
+          "subtype": "simple",
+          "bind": "first-item"
+        },
+      ...
+      ]
+    },
+    ...
+  ]
+}
+```
+
+- Category
+
+```json
+{
+  "type": "category",
+  "label": "Category",
+  "children": [
+    {
+      "type": "input",
+      "subtype": "simple",
+      "label": "Your label"
+    },
+    ...
+  ]
+}
+```
+
 ## **Event Handling**
 
 ```html
@@ -228,8 +283,11 @@ The form component exposes the following CSS variables:
 
 | Variable                | Description                                                                               |
 | ----------------------- | ----------------------------------------------------------------------------------------- |
+| --tf-label              | Color used for the inputs `label`.                                                        |
+| --tf-category           | Color used for the `category` labels.                                                     |
+|                         |                                                                                           |
 | --tf-background         | Background color for the input fields.                                                    |
-| --tf-foreground         | Color used for the `category` labels.                                                     |
+| --tf-foreground         | Text color for the input fields.                                                          |
 |                         |                                                                                           |
 | --tf-muted              | Used for `switch` background when value is false.                                         |
 | --tf-muted-foreground   | Color used for `placeholder` text (inputs) and description text.                          |
@@ -241,9 +299,9 @@ The form component exposes the following CSS variables:
 | --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-input              | This color is used by the input borders.                                                  |
 | --tf-ring               | This color highlights a focused input.                                                    |
 |                         |                                                                                           |
-| --tf-radius             | This value is used for rounded corners of all inputs.                                     |
+| --tf-radius             | This value is used for input rounded corners.                                             |
 |                         |                                                                                           |
 | --tf-font               | Font family for all the form.                                                             |

package/dev/index.css

@@ -7,7 +7,9 @@
 :root {
   --tf-label: 222.2 47.4% 11.2%;
   --tf-category: 222.2 47.4% 11.2%;
+
   --tf-background: 0 0% 100%;
+  --tf-foreground: 0 0% 0%;
 
   --tf-muted: 210 40% 96.1%;
   --tf-muted-foreground: 215.4 16.3% 46.9%;

package/dev/main.tsx

@@ -1,10 +1,7 @@
-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 type { ComponentProps } from 'react';
+import type { Form } from '../lib';
 
+import '../lib/webcomponent';
 import './index.css';
 
 const config = [
@@ -17,14 +14,40 @@ const config = [
       {
         type: 'input',
         props: {
-          subtype: 'toggle',
-          label: 'Required',
-          bind: 'required',
+          subtype: 'datepicker',
+          label: 'Date picker',
+          bind: 'datepicker',
           options: {
-            description: 'This field is required',
+            description: 'this field is required',
           },
         },
       },
+      {
+        type: 'accordion',
+        children: [
+          {
+            type: 'accordion',
+            props: {
+              subtype: 'item',
+              label: 'Required',
+              icon: 'archive-box-x-mark',
+            },
+            children: [
+              {
+                type: 'input',
+                props: {
+                  subtype: 'toggle',
+                  label: 'Required',
+                  bind: 'required',
+                  options: {
+                    description: 'this field is required',
+                  },
+                },
+              },
+            ],
+          },
+        ],
+      },
     ],
   },
   {
@@ -40,6 +63,7 @@ const config = [
           label: 'Email',
           bind: 'email',
           options: {
+            error: 'This field is required',
             description: 'This field is required',
           },
         },
@@ -95,6 +119,7 @@ const config = [
           label: 'File',
           bind: 'file',
           options: {
+            error: 'This field is required',
             description: 'This field is required',
           },
         },
@@ -134,30 +159,28 @@ const config = [
     ],
   },
   {
-    type: 'input:submit',
+    type: 'input',
     props: {
+      subtype: 'submit',
       label: 'Submit',
     },
   },
 ] satisfies React.ComponentProps<typeof Form>['config'];
 
 const options = {
-  variant: 'beta',
+  defaultValues: {
+    required: 'true',
+    email: 'This should work',
+    radiogroup: 'mote',
+    checkbox: true,
+    textarea: 'This is a textarea',
+  },
   resetOnSubmit: true,
-} as const;
-
-const App = () => {
-  return (
-    <div className='mx-auto max-w-lg bg-background p-8'>
-      <Form config={config} options={options} />
-    </div>
-  );
-};
+  variant: 'beta',
+} as ComponentProps<typeof Form>['options'];
 
-install(tw);
+// the key properties for the defaultValues object are the same as the bind properties
+const form = document.querySelector('twintag-form');
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-);
+form?.setAttribute('config', JSON.stringify(config));
+form?.setAttribute('options', JSON.stringify(options));

package/dist/common/accordion.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/dist/common/button.d.ts

@@ -4,6 +4,8 @@ import * as React from 'react';
 declare const buttonVariants: TVReturnType<{
     variant: {
         default: string;
+        outline: string;
+        ghost: string;
     };
     size: {
         default: string;
@@ -13,6 +15,8 @@ declare const buttonVariants: TVReturnType<{
 }, undefined, string[], TVConfig<{
     variant: {
         default: string;
+        outline: string;
+        ghost: string;
     };
     size: {
         default: string;
@@ -22,6 +26,8 @@ declare const buttonVariants: TVReturnType<{
 }, {
     variant: {
         default: string;
+        outline: string;
+        ghost: string;
     };
     size: {
         default: string;
@@ -31,6 +37,8 @@ declare const buttonVariants: TVReturnType<{
 }>, {
     variant: {
         default: string;
+        outline: string;
+        ghost: string;
     };
     size: {
         default: string;
@@ -40,6 +48,8 @@ declare const buttonVariants: TVReturnType<{
 }, undefined, TVReturnType<{
     variant: {
         default: string;
+        outline: string;
+        ghost: string;
     };
     size: {
         default: string;
@@ -49,6 +59,8 @@ declare const buttonVariants: TVReturnType<{
 }, undefined, string[], TVConfig<{
     variant: {
         default: string;
+        outline: string;
+        ghost: string;
     };
     size: {
         default: string;
@@ -58,6 +70,8 @@ declare const buttonVariants: TVReturnType<{
 }, {
     variant: {
         default: string;
+        outline: string;
+        ghost: string;
     };
     size: {
         default: string;
@@ -71,6 +85,8 @@ export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & Varian
 declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<TVReturnType<{
     variant: {
         default: string;
+        outline: string;
+        ghost: string;
     };
     size: {
         default: string;
@@ -80,6 +96,8 @@ declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes
 }, undefined, string[], TVConfig<{
     variant: {
         default: string;
+        outline: string;
+        ghost: string;
     };
     size: {
         default: string;
@@ -89,6 +107,8 @@ declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes
 }, {
     variant: {
         default: string;
+        outline: string;
+        ghost: string;
     };
     size: {
         default: string;
@@ -98,6 +118,8 @@ declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes
 }>, {
     variant: {
         default: string;
+        outline: string;
+        ghost: string;
     };
     size: {
         default: string;
@@ -107,6 +129,8 @@ declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes
 }, undefined, TVReturnType<{
     variant: {
         default: string;
+        outline: string;
+        ghost: string;
     };
     size: {
         default: string;
@@ -116,6 +140,8 @@ declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes
 }, undefined, string[], TVConfig<{
     variant: {
         default: string;
+        outline: string;
+        ghost: string;
     };
     size: {
         default: string;
@@ -125,6 +151,8 @@ declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes
 }, {
     variant: {
         default: string;
+        outline: string;
+        ghost: string;
     };
     size: {
         default: string;

package/dist/common/calendar.d.ts

@@ -0,0 +1,9 @@
+import { JSX } from 'react/jsx-runtime';
+import * as React from 'react';
+import { DayPicker } from 'react-day-picker';
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+declare function Calendar({ className, classNames, showOutsideDays, ...props }: CalendarProps): JSX.Element;
+declare namespace Calendar {
+    var displayName: string;
+}
+export { Calendar };

package/dist/common/form.d.ts

@@ -3,7 +3,7 @@ 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 Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues extends FieldValues = TFieldValues>(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;

package/dist/common/icon.d.ts

@@ -0,0 +1,7 @@
+import type { FC } from 'react';
+type Props = {
+    name: string;
+    className?: string;
+};
+export declare const Icon: FC<Props>;
+export {};

package/dist/common/popover.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
+declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Popover, PopoverTrigger, PopoverContent };

package/dist/common/scroll-area.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { ScrollArea, ScrollBar };

package/dist/common/select.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+declare const Select: React.FC<SelectPrimitive.SelectProps>;
+declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, };

package/dist/components/config.d.ts

@@ -0,0 +1,4 @@
+import type { ElementType } from 'react';
+export declare const Inputs: Map<string, ElementType>;
+export declare const Containers: Map<string, ElementType>;
+export declare const components: Map<string, ElementType>;

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

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

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

@@ -0,0 +1,3 @@
+import type { Props } from '../../types';
+import * as React from 'react';
+export declare const DatePicker: React.FC<Props>;

package/dist/components/{Input/simple.d.ts → fields/input.d.ts}

@@ -1,3 +1,3 @@
 import type { FC } from 'react';
 import type { Props } from '../../types';
-export declare const Simple: FC<Props>;
+export declare const Input: FC<Props>;

package/dist/components/form.d.ts

@@ -1,7 +1,9 @@
 import { JSX } from 'react/jsx-runtime';
+import type { FieldValues } from 'react-hook-form';
 import type { WithChildren } from 'twintag-types/dom';
 type Props = {
+    defaultValues?: FieldValues;
     resetOnSubmit?: boolean;
 } & WithChildren;
-export declare const TwintagForm: ({ resetOnSubmit, children }: Props) => JSX.Element;
+export declare const TwintagForm: ({ defaultValues, resetOnSubmit, children, }: Props) => JSX.Element;
 export {};

package/dist/components/index.d.ts

@@ -1,8 +1,7 @@
 import { JSX } from 'react/jsx-runtime';
 import type { RawJsonComponent } from '../types';
-export { Input } from './Input';
-export { Category } from './category';
 type Props = {
     config: RawJsonComponent | RawJsonComponent[];
 };
 export declare const TwintagJsonRenderer: ({ config }: Props) => JSX.Element;
+export {};

package/dist/index.d.ts

@@ -1,10 +1,12 @@
 import { JSX } from 'react/jsx-runtime';
 import type { ComponentProps } from 'react';
 import type { RawJsonComponent } from './types';
+import { TwintagForm } from './components/form';
 import { TwintagFormProvider } from './provider';
 type Props = {
     config: RawJsonComponent[];
     options?: Partial<{
+        defaultValues?: ComponentProps<typeof TwintagForm>['defaultValues'];
         variant?: ComponentProps<typeof TwintagFormProvider>['variant'];
         resetOnSubmit?: boolean;
     }>;