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

package/dist/types/index.d.ts

@@ -1,8 +1,20 @@
-import type { ElementType } from 'react';
-export type TwintagFormContext = {
-    variant?: 'default' | 'beta';
-    size?: 'base' | 'sm';
-    components: Map<string, ElementType>;
+import { ElementType } from 'react';
+
+export type ComponentConfig = {
+    defaultValue?: unknown;
+    component: ElementType;
+};
+export type ParsedJsonComponent = Props & {
+    id: string;
+    type: string;
+    subtype?: string;
+    comp?: ElementType;
+};
+export type RawJsonComponent = RawProps & Record<string, unknown> & {
+    type: string;
+    children?: RawJsonComponent[];
+} & {
+    props?: RawProps;
 };
 type RawProps = Partial<{
     bind: string;
@@ -16,20 +28,16 @@ type RawProps = Partial<{
         optionalField: boolean;
     }>;
 }>;
-export type RawJsonComponent = RawProps & Record<string, unknown> & {
-    type: string;
-    children?: RawJsonComponent[];
-} & {
-    props?: RawProps;
-};
-export type ParsedJsonComponent = Props & {
-    id: string;
-    type: string;
-    subtype?: string;
-    comp?: ElementType;
-};
 export type Props = Omit<RawProps, 'subtype'> & {
     bind: string;
     items?: ParsedJsonComponent[];
 };
+export type TwintagFormContext = {
+    variant?: 'default' | 'beta';
+    size?: 'base' | 'sm';
+    inputs: Map<string, ComponentConfig>;
+    components: Map<string, ElementType>;
+    config: ParsedJsonComponent[] | ParsedJsonComponent;
+    resetValues: Record<string, unknown>;
+};
 export {};

package/dist/utils/data.d.ts

@@ -1,2 +1,3 @@
-import type { Props } from '../types';
+import { Props } from '../types';
+
 export declare const getBindSetFromItems: (items: Props[]) => Set<string>;

package/dist/utils/style.d.ts

@@ -1,2 +1,3 @@
-import type { ClassValue } from 'clsx';
+import { ClassValue } from 'clsx';
+
 export declare function cn(...inputs: ClassValue[]): string;

package/index.html

@@ -8,9 +8,11 @@
   <body>
     <div
       style="
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        padding: 2rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 2rem;
+        padding: 1rem;
       "
     >
       <div>

package/lib/common/slider.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import { tv } from 'tailwind-variants';
+
+const sliderVariants = tv({
+  slots: {
+    root: 'relative flex w-full touch-none select-none items-center',
+    track: 'relative h-2 w-full grow overflow-hidden rounded-full bg-muted',
+    range: 'absolute h-full bg-accent',
+    thumb:
+      'block h-5 w-5 rounded-full border-2 border-accent bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  },
+});
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { root, track, range, thumb } = sliderVariants();
+
+  return (
+    <SliderPrimitive.Root
+      ref={ref}
+      className={root({
+        className,
+      })}
+      {...props}
+    >
+      <SliderPrimitive.Track className={track()}>
+        <SliderPrimitive.Range className={range()} />
+      </SliderPrimitive.Track>
+      <SliderPrimitive.Thumb className={thumb()} />
+    </SliderPrimitive.Root>
+  );
+});
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };

package/lib/components/config.tsx

@@ -1,25 +1,54 @@
 import type { ElementType, FC } from 'react';
+import type { ComponentConfig } from '../types';
 
 import { Accordion } from './containers/accordion';
 import { Category } from './containers/category';
-import { Checkbox } from './fields/checkbox';
-import { DatePicker } from './fields/date-picker';
-import { File } from './fields/file';
-import { Input as InputField } from './fields/input';
-import { RadioGroup } from './fields/radiogroup';
+import { Checkbox, DEFAULT_CHECKBOX_VALUE } from './fields/checkbox';
+import { DatePicker, DEFAULT_DATE_PICKER_VALUE } from './fields/date-picker';
+import { DEFAULT_FILE_VALUE, File } from './fields/file';
+import { DEFAULT_INPUT_VALUE, Input as InputField } from './fields/input';
+import { DEFAULT_RADIOGROUP_VALUE, RadioGroup } from './fields/radiogroup';
 import { Submit } from './fields/submit';
-import { Textarea } from './fields/textarea';
-import { Toggle } from './fields/toggle';
+import { DEFAULT_TEXTAREA_VALUE, Textarea } from './fields/textarea';
+import { DEFAULT_TOGGLE_VALUE, Toggle } from './fields/toggle';
+import { DEFAULT_TRI_TOGGLE_VALUE, TriToggle } from './fields/tri-toggle';
 
-export const Inputs = new Map<string, ElementType>()
-  .set('simple', InputField)
-  .set('textarea', Textarea)
-  .set('toggle', Toggle)
-  .set('file', File)
-  .set('submit', Submit)
-  .set('checkbox', Checkbox)
-  .set('radiogroup', RadioGroup)
-  .set('datepicker', DatePicker);
+export const Inputs = new Map<string, ComponentConfig>()
+  .set('simple', {
+    defaultValue: DEFAULT_INPUT_VALUE,
+    component: InputField,
+  })
+  .set('textarea', {
+    defaultValue: DEFAULT_TEXTAREA_VALUE,
+    component: Textarea,
+  })
+  .set('toggle', {
+    defaultValue: DEFAULT_TOGGLE_VALUE,
+    component: Toggle,
+  })
+  .set('file', {
+    defaultValue: DEFAULT_FILE_VALUE,
+    component: File,
+  })
+  .set('submit', {
+    component: Submit,
+  })
+  .set('checkbox', {
+    defaultValue: DEFAULT_CHECKBOX_VALUE,
+    component: Checkbox,
+  })
+  .set('radiogroup', {
+    defaultValue: DEFAULT_RADIOGROUP_VALUE,
+    component: RadioGroup,
+  })
+  .set('datepicker', {
+    defaultValue: DEFAULT_DATE_PICKER_VALUE,
+    component: DatePicker,
+  })
+  .set('tri-toggle', {
+    defaultValue: DEFAULT_TRI_TOGGLE_VALUE,
+    component: TriToggle,
+  });
 
 type InputProps = {
   subtype?: string;
@@ -27,7 +56,7 @@ type InputProps = {
   bind?: string;
 };
 const Input: FC<InputProps> = ({ subtype = 'simple', ...rest }) => {
-  const Comp = Inputs.get(subtype);
+  const Comp = Inputs.get(subtype)?.component;
 
   if (!Comp) return <></>;
 

package/lib/components/containers/accordion.tsx

@@ -11,7 +11,7 @@ import {
   AccordionTrigger,
 } from '@twintag/twintag-form/common/accordion';
 import { Icon } from '@twintag/twintag-form/common/icon';
-import { useTwintagForm } from '@twintag/twintag-form/provider';
+import { useTwintagForm } from '@twintag/twintag-form/components/provider';
 import { camelize } from '@twintag/twintag-form/utils/string';
 
 type AccordionRootProps = {

package/lib/components/containers/category.tsx

@@ -3,7 +3,7 @@ import type { WithChildren } from 'twintag-types/dom';
 
 import { tv } from 'tailwind-variants';
 
-import { useTwintagForm } from '@twintag/twintag-form/provider';
+import { useTwintagForm } from '@twintag/twintag-form/components/provider';
 
 const categoryStyle = tv({
   slots: {

package/lib/components/fields/checkbox.tsx

@@ -13,7 +13,9 @@ import {
   FormLabel,
   FormMessage,
 } from '@twintag/twintag-form/common/form';
-import { useTwintagForm } from '@twintag/twintag-form/provider';
+import { useTwintagForm } from '@twintag/twintag-form/components/provider';
+
+export const DEFAULT_CHECKBOX_VALUE = false;
 
 export const Checkbox: FC<Props> = ({ label, bind, options }) => {
   const { control } = useFormContext();
@@ -23,9 +25,9 @@ export const Checkbox: FC<Props> = ({ label, bind, options }) => {
 
   return (
     <FormField
+      defaultValue={DEFAULT_CHECKBOX_VALUE}
       control={control}
       name={bind}
-      defaultValue={false}
       rules={{
         required: isOptional ? false : options?.error ?? true,
       }}

package/lib/components/fields/date-picker.tsx

@@ -21,7 +21,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@twintag/twintag-form/common/popover';
-import { useTwintagForm } from '@twintag/twintag-form/provider';
+import { useTwintagForm } from '@twintag/twintag-form/components/provider';
 
 const datePickerTriggerVariants = tv({
   slots: {
@@ -63,6 +63,8 @@ const datePickerTriggerVariants = tv({
   },
 });
 
+export const DEFAULT_DATE_PICKER_VALUE = null;
+
 export const DatePicker: React.FC<Props> = ({ label, bind, options }) => {
   const { variant, size } = useTwintagForm();
   const { control } = useFormContext();
@@ -73,6 +75,7 @@ export const DatePicker: React.FC<Props> = ({ label, bind, options }) => {
 
   return (
     <FormField
+      defaultValue={DEFAULT_DATE_PICKER_VALUE}
       control={control}
       name={bind}
       rules={{

package/lib/components/fields/file.tsx

@@ -1,82 +1,83 @@
-import type { FC } from 'react';
-import type { Props } from '@twintag/twintag-form/types';
-
-import { AsteriskIcon } from 'lucide-react';
-import { useFormContext } from 'react-hook-form';
-
-import {
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@twintag/twintag-form/common/form';
-import { Input } from '@twintag/twintag-form/common/input';
-import { useTwintagForm } from '@twintag/twintag-form/provider';
-
-export const File: FC<Props> = ({ label, bind, options }) => {
-  const { control } = useFormContext();
-  const { variant, size } = useTwintagForm();
-
-  const isOptional = options?.optionalField;
-
-  return (
-    <FormField
-      defaultValue=''
-      control={control}
-      name={bind}
-      rules={{
-        required: isOptional ? false : options?.error ?? true,
-      }}
-      render={({ field, formState }) => (
-        <FormItem variant={variant}>
-          <div className='space-y-1'>
-            <FormLabel htmlFor={bind} size={size}>
-              {label}
-              {!isOptional ? (
-                <span className='ml-0.5 inline-block'>
-                  <AsteriskIcon className='h-3 w-3 text-destructive' />
-                </span>
-              ) : (
-                <></>
-              )}
-            </FormLabel>
-            {options?.description ? (
-              <FormDescription size={size}>
-                {options.description}
-              </FormDescription>
-            ) : (
-              <></>
-            )}
-          </div>
-          <FormControl>
-            <Input
-              ref={(el) => {
-                field.ref(el);
-
-                if (el && formState.isSubmitSuccessful) {
-                  el.value = '';
-                }
-              }}
-              id={bind}
-              type='file'
-              name={field.name}
-              size={size}
-              variant={variant}
-              capture='environment'
-              multiple
-              onBlur={field.onBlur}
-              onChange={(e) => {
-                if (e.target.files) {
-                  field.onChange(e.target.files);
-                }
-              }}
-            />
-          </FormControl>
-          <FormMessage size={size} className='pt-1.5' />
-        </FormItem>
-      )}
-    />
-  );
-};
+import type { FC } from 'react';
+import type { Props } from '@twintag/twintag-form/types';
+
+import { AsteriskIcon } from 'lucide-react';
+import { useFormContext } from 'react-hook-form';
+
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@twintag/twintag-form/common/form';
+import { Input } from '@twintag/twintag-form/common/input';
+import { useTwintagForm } from '@twintag/twintag-form/components/provider';
+
+export const DEFAULT_FILE_VALUE = '';
+
+export const File: FC<Props> = ({ label, bind, options }) => {
+  const { control } = useFormContext();
+  const { variant, size } = useTwintagForm();
+
+  const isOptional = options?.optionalField;
+
+  return (
+    <FormField
+      defaultValue={DEFAULT_FILE_VALUE}
+      control={control}
+      name={bind}
+      rules={{
+        required: isOptional ? false : options?.error ?? true,
+      }}
+      render={({ field, formState }) => (
+        <FormItem variant={variant}>
+          <div className='space-y-1'>
+            <FormLabel htmlFor={bind} size={size}>
+              {label}
+              {!isOptional ? (
+                <span className='ml-0.5 inline-block'>
+                  <AsteriskIcon className='h-3 w-3 text-destructive' />
+                </span>
+              ) : (
+                <></>
+              )}
+            </FormLabel>
+            {options?.description ? (
+              <FormDescription size={size}>
+                {options.description}
+              </FormDescription>
+            ) : (
+              <></>
+            )}
+          </div>
+          <FormControl>
+            <Input
+              ref={(el) => {
+                field.ref(el);
+
+                if (el && formState.isSubmitSuccessful) {
+                  el.value = '';
+                }
+              }}
+              id={bind}
+              type='file'
+              name={field.name}
+              size={size}
+              variant={variant}
+              multiple
+              onBlur={field.onBlur}
+              onChange={(e) => {
+                if (e.target.files) {
+                  field.onChange(e.target.files);
+                }
+              }}
+            />
+          </FormControl>
+          <FormMessage size={size} className='pt-1.5' />
+        </FormItem>
+      )}
+    />
+  );
+};

package/lib/components/fields/input.tsx

@@ -13,7 +13,9 @@ import {
   FormMessage,
 } from '@twintag/twintag-form/common/form';
 import { Input as InputPrimitive } from '@twintag/twintag-form/common/input';
-import { useTwintagForm } from '@twintag/twintag-form/provider';
+import { useTwintagForm } from '@twintag/twintag-form/components/provider';
+
+export const DEFAULT_INPUT_VALUE = '';
 
 export const Input: FC<Props> = ({ label, bind, options }) => {
   const { control } = useFormContext();
@@ -24,7 +26,7 @@ export const Input: FC<Props> = ({ label, bind, options }) => {
 
   return (
     <FormField
-      defaultValue=''
+      defaultValue={DEFAULT_INPUT_VALUE}
       control={control}
       name={bind}
       rules={{

package/lib/components/fields/radiogroup.tsx

@@ -16,7 +16,9 @@ import {
   RadioGroup as CommonRadioGroup,
   RadioGroupItem,
 } from '@twintag/twintag-form/common/radiogroup';
-import { useTwintagForm } from '@twintag/twintag-form/provider';
+import { useTwintagForm } from '@twintag/twintag-form/components/provider';
+
+export const DEFAULT_RADIOGROUP_VALUE = '';
 
 export const RadioGroup: FC<Props> = ({ label, bind, items, options }) => {
   const { control } = useFormContext();
@@ -26,9 +28,9 @@ export const RadioGroup: FC<Props> = ({ label, bind, items, options }) => {
 
   return (
     <FormField
+      defaultValue={DEFAULT_RADIOGROUP_VALUE}
       control={control}
       name={bind}
-      defaultValue=''
       rules={{
         required: isOptional ? false : options?.error ?? true,
       }}

package/lib/components/fields/submit.tsx

@@ -2,7 +2,7 @@ import type { FC } from 'react';
 import type { Props } from '@twintag/twintag-form/types';
 
 import { Button } from '@twintag/twintag-form/common/button';
-import { useTwintagForm } from '@twintag/twintag-form/provider';
+import { useTwintagForm } from '@twintag/twintag-form/components/provider';
 
 export const Submit: FC<Props> = ({ label }) => {
   const { size } = useTwintagForm();

package/lib/components/fields/textarea.tsx

@@ -13,7 +13,9 @@ import {
   FormMessage,
 } from '@twintag/twintag-form/common/form';
 import { Textarea as CommonTextarea } from '@twintag/twintag-form/common/textarea';
-import { useTwintagForm } from '@twintag/twintag-form/provider';
+import { useTwintagForm } from '@twintag/twintag-form/components/provider';
+
+export const DEFAULT_TEXTAREA_VALUE = '';
 
 export const Textarea: FC<Props> = ({ label, bind, options }) => {
   const { control } = useFormContext();
@@ -23,7 +25,7 @@ export const Textarea: FC<Props> = ({ label, bind, options }) => {
 
   return (
     <FormField
-      defaultValue=''
+      defaultValue={DEFAULT_TEXTAREA_VALUE}
       control={control}
       name={bind}
       rules={{

package/lib/components/fields/toggle.tsx

@@ -13,7 +13,9 @@ import {
   FormMessage,
 } from '@twintag/twintag-form/common/form';
 import { Switch } from '@twintag/twintag-form/common/switch';
-import { useTwintagForm } from '@twintag/twintag-form/provider';
+import { useTwintagForm } from '@twintag/twintag-form/components/provider';
+
+export const DEFAULT_TOGGLE_VALUE = false;
 
 export const Toggle: FC<Props> = ({ label, bind, options }) => {
   const { control } = useFormContext();
@@ -23,9 +25,9 @@ export const Toggle: FC<Props> = ({ label, bind, options }) => {
 
   return (
     <FormField
+      defaultValue={DEFAULT_TOGGLE_VALUE}
       control={control}
       name={bind}
-      defaultValue={false}
       rules={{
         required: isOptional ? false : options?.error ?? true,
       }}