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

package/dist/types/index.d.ts

@@ -1,35 +1,58 @@
-import type { ElementType } from 'react';
-export type TwintagFormContext = {
-    variant?: 'default' | 'beta';
-    size?: 'base' | 'sm';
-    components: Map<string, ElementType>;
+import { ElementType } from 'react';
+
+export type InputCompConfig = {
+    defaultValue?: unknown;
+    component: ElementType;
 };
-type RawProps = Partial<{
+type CompType = 'input' | 'item' | 'accordion' | 'category';
+type StringLiteral<T> = T extends string ? string extends T ? never : T : never;
+type RawProps<TType extends string = string, TSubtype extends string = string> = TType extends 'input' | 'item' ? {
+    type: TType;
     bind: string;
-    subtype: string;
-    label: string;
-    icon: string;
-    options: Partial<{
+    label?: string;
+    subtype?: string;
+    options?: Partial<{
         description: string;
         placeholder: string;
         error: string;
         optionalField: boolean;
     }>;
-}>;
-export type RawJsonComponent = RawProps & Record<string, unknown> & {
-    type: string;
-    children?: RawJsonComponent[];
-} & {
-    props?: RawProps;
+} : TType extends 'accordion' ? TSubtype extends 'item' ? {
+    type: TType;
+    subtype: TSubtype;
+    value?: string;
+    label: string;
+    icon: string;
+} : TSubtype extends 'multiple' | 'single' ? {
+    type: TType;
+    subtype: TSubtype;
+    defaultValue?: string;
+} : never : {
+    type: TType;
+    label?: string;
+    subtype?: string;
 };
-export type ParsedJsonComponent = Props & {
+export type RawJsonComponent = CompType extends infer T ? T extends CompType ? {
+    type: StringLiteral<T>;
+    props?: Omit<RawProps<StringLiteral<T>>, 'type'>;
+    children?: RawJsonComponent[];
+} : never : never;
+export type ParsedJsonComponent<TType extends string = string> = RawProps<TType> & {
     id: string;
     type: string;
     subtype?: string;
     comp?: ElementType;
-};
-export type Props = Omit<RawProps, 'subtype'> & {
-    bind: string;
     items?: ParsedJsonComponent[];
 };
+export type Props<TType extends string = string, TSubtype extends string = string> = Omit<RawProps<TType, TSubtype>, 'type'> & {
+    items?: (Props<'input'> & ParsedJsonComponent)[];
+};
+export type TwintagFormContext = {
+    variant?: 'default' | 'beta';
+    size?: 'base' | 'sm';
+    inputs: Map<string, InputCompConfig>;
+    components: Map<string, ElementType>;
+    config: ParsedJsonComponent[] | ParsedJsonComponent;
+    resetValues: Record<string, unknown>;
+};
 export {};

package/dist/utils/data.d.ts

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

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,12 +8,15 @@
   <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>
+        <button id="set-config">Set config</button>
         <button id="get-values">Get Values</button>
         <button id="submit">Submit</button>
       </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 { InputCompConfig } 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, InputCompConfig>()
+  .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,11 +11,12 @@ 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 = {
-  multiple?: boolean;
+  type: 'single' | 'multiple';
+  defaultValue?: string;
 } & WithChildren;
 
 const accordionRootVariants = tv({
@@ -30,17 +31,19 @@ const accordionRootVariants = tv({
     variant: 'default',
   },
 });
-const AccordionRoot: FC<AccordionRootProps> = ({
-  multiple = true,
-  children,
-}) => {
+const AccordionRoot: FC<AccordionRootProps> = ({ type, defaultValue, children }) => {
   const { variant } = useTwintagForm();
 
+  if (type === 'single') {
+    return (
+      <AccordionPrimitive type='single' defaultValue={defaultValue} collapsible>
+        <div className={accordionRootVariants({ variant })}>{children}</div>
+      </AccordionPrimitive>
+    );
+  }
+
   return (
-    <AccordionPrimitive
-      type={multiple ? 'multiple' : 'single'}
-      collapsible={multiple ? undefined : true}
-    >
+    <AccordionPrimitive type='multiple'>
       <div className={accordionRootVariants({ variant })}>{children}</div>
     </AccordionPrimitive>
   );
@@ -80,11 +83,15 @@ const accordionItemVariants = tv({
   },
 });
 
-type AccordionItemProps = Omit<Props, 'bind'> & WithChildren;
+type AccordionItemProps = Omit<Props<'accordion', 'item'>, 'subtype'> & {
+  value?: string;
+} & WithChildren;
 const AccordionItem: FC<AccordionItemProps> = ({
   label = '',
+  value = '',
   icon,
   children,
+  ...rest
 }) => {
   const { variant, size } = useTwintagForm();
 
@@ -96,7 +103,11 @@ const AccordionItem: FC<AccordionItemProps> = ({
   } = accordionItemVariants({ size, variant });
 
   return (
-    <AccordionItemPrimitive value={camelize(label)} className={item()}>
+    <AccordionItemPrimitive
+      value={value ?? camelize(label)}
+      className={item()}
+      {...rest}
+    >
       <AccordionTrigger className='text-category'>
         <span className={trigger()}>
           {icon ? <Icon name={icon} className={iconVariants()} /> : <></>}
@@ -109,14 +120,18 @@ const AccordionItem: FC<AccordionItemProps> = ({
 };
 AccordionItem.displayName = 'AccordionItem';
 
-type AccordionProps = {
-  subtype?: 'item' | 'multiple' | 'single';
-  label?: string;
-} & WithChildren;
+type AccordionProps = Props<'accordion', 'item' | 'multiple' | 'single'> &
+  WithChildren;
 const Accordion: FC<AccordionProps> = ({ subtype = 'single', ...rest }) => {
-  if (subtype === 'item') return <AccordionItem {...rest} />;
+  if (subtype === 'item') {
+    return (
+      <AccordionItem
+        {...(rest as Omit<Props<'accordion', 'item'>, 'subtype'>)}
+      />
+    );
+  }
 
-  return <AccordionRoot {...rest} />;
+  return <AccordionRoot type={subtype} {...rest} />;
 };
 
 export { Accordion };

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,9 +13,11 @@ 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 Checkbox: FC<Props> = ({ label, bind, options }) => {
+export const DEFAULT_CHECKBOX_VALUE = false;
+
+export const Checkbox: FC<Props<'input'>> = ({ label, bind, options }) => {
   const { control } = useFormContext();
   const { variant, size } = useTwintagForm();
 
@@ -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,7 +63,13 @@ const datePickerTriggerVariants = tv({
   },
 });
 
-export const DatePicker: React.FC<Props> = ({ label, bind, options }) => {
+export const DEFAULT_DATE_PICKER_VALUE = null;
+
+export const DatePicker: React.FC<Props<'input'>> = ({
+  label,
+  bind,
+  options,
+}) => {
   const { variant, size } = useTwintagForm();
   const { control } = useFormContext();
 
@@ -73,6 +79,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

@@ -13,9 +13,11 @@ import {
   FormMessage,
 } from '@twintag/twintag-form/common/form';
 import { Input } from '@twintag/twintag-form/common/input';
-import { useTwintagForm } from '@twintag/twintag-form/provider';
+import { useTwintagForm } from '@twintag/twintag-form/components/provider';
 
-export const File: FC<Props> = ({ label, bind, options }) => {
+export const DEFAULT_FILE_VALUE = '';
+
+export const File: FC<Props<'input'>> = ({ label, bind, options }) => {
   const { control } = useFormContext();
   const { variant, size } = useTwintagForm();
 
@@ -23,7 +25,7 @@ export const File: FC<Props> = ({ label, bind, options }) => {
 
   return (
     <FormField
-      defaultValue=''
+      defaultValue={DEFAULT_FILE_VALUE}
       control={control}
       name={bind}
       rules={{
@@ -64,7 +66,6 @@ export const File: FC<Props> = ({ label, bind, options }) => {
               name={field.name}
               size={size}
               variant={variant}
-              capture='environment'
               multiple
               onBlur={field.onBlur}
               onChange={(e) => {

package/lib/components/fields/input.tsx

@@ -13,9 +13,11 @@ 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 Input: FC<Props> = ({ label, bind, options }) => {
+export const DEFAULT_INPUT_VALUE = '';
+
+export const Input: FC<Props<'input'>> = ({ label, bind, options }) => {
   const { control } = useFormContext();
 
   const { variant, size } = useTwintagForm();
@@ -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,9 +16,15 @@ 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 RadioGroup: FC<Props> = ({ label, bind, items, options }) => {
+export const DEFAULT_RADIOGROUP_VALUE = '';
+
+export const RadioGroup: FC<
+  Props<'input'> & {
+    items: Props<'input'>[];
+  }
+> = ({ label, bind, items, options }) => {
   const { control } = useFormContext();
   const { size } = useTwintagForm();
 
@@ -26,9 +32,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,9 +13,11 @@ 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 Textarea: FC<Props> = ({ label, bind, options }) => {
+export const DEFAULT_TEXTAREA_VALUE = '';
+
+export const Textarea: FC<Props<'input'>> = ({ label, bind, options }) => {
   const { control } = useFormContext();
   const { variant, size } = useTwintagForm();
 
@@ -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,9 +13,11 @@ 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 Toggle: FC<Props> = ({ label, bind, options }) => {
+export const DEFAULT_TOGGLE_VALUE = false;
+
+export const Toggle: FC<Props<'input'>> = ({ label, bind, options }) => {
   const { control } = useFormContext();
   const { variant, size } = useTwintagForm();
 
@@ -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,
       }}