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

package/dist/types/index.d.ts

@@ -1,41 +1,56 @@
 import { ElementType } from 'react';
 
-export type ComponentConfig = {
+export type InputCompConfig = {
     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<{
+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 Props = Omit<RawProps, 'subtype'> & {
-    bind: string;
+} : 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 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;
     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, ComponentConfig>;
+    inputs: Map<string, InputCompConfig>;
     components: Map<string, ElementType>;
     config: ParsedJsonComponent[] | ParsedJsonComponent;
     resetValues: Record<string, unknown>;

package/dist/utils/data.d.ts

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

package/index.html

@@ -16,6 +16,7 @@
       "
     >
       <div>
+        <button id="set-config">Set config</button>
         <button id="get-values">Get Values</button>
         <button id="submit">Submit</button>
       </div>

package/lib/components/config.tsx

@@ -1,5 +1,5 @@
 import type { ElementType, FC } from 'react';
-import type { ComponentConfig } from '../types';
+import type { InputCompConfig } from '../types';
 
 import { Accordion } from './containers/accordion';
 import { Category } from './containers/category';
@@ -13,7 +13,7 @@ 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, ComponentConfig>()
+export const Inputs = new Map<string, InputCompConfig>()
   .set('simple', {
     defaultValue: DEFAULT_INPUT_VALUE,
     component: InputField,

package/lib/components/containers/accordion.tsx

@@ -15,7 +15,8 @@ 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({
@@ -31,16 +32,22 @@ const accordionRootVariants = tv({
   },
 });
 const AccordionRoot: FC<AccordionRootProps> = ({
-  multiple = true,
+  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 +87,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 +107,11 @@ const AccordionItem: FC<AccordionItemProps> = ({
   } = accordionItemVariants({ size, variant });
 
   return (
-    <AccordionItemPrimitive value={camelize(label)} className={item()}>
+    <AccordionItemPrimitive
+      value={value ? value : camelize(label)}
+      className={item()}
+      {...rest}
+    >
       <AccordionTrigger className='text-category'>
         <span className={trigger()}>
           {icon ? <Icon name={icon} className={iconVariants()} /> : <></>}
@@ -109,14 +124,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/fields/checkbox.tsx

@@ -17,7 +17,7 @@ import { useTwintagForm } from '@twintag/twintag-form/components/provider';
 
 export const DEFAULT_CHECKBOX_VALUE = false;
 
-export const Checkbox: FC<Props> = ({ label, bind, options }) => {
+export const Checkbox: FC<Props<'input'>> = ({ label, bind, options }) => {
   const { control } = useFormContext();
   const { variant, size } = useTwintagForm();
 

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

@@ -65,7 +65,11 @@ const datePickerTriggerVariants = tv({
 
 export const DEFAULT_DATE_PICKER_VALUE = null;
 
-export const DatePicker: React.FC<Props> = ({ label, bind, options }) => {
+export const DatePicker: React.FC<Props<'input'>> = ({
+  label,
+  bind,
+  options,
+}) => {
   const { variant, size } = useTwintagForm();
   const { control } = useFormContext();
 

package/lib/components/fields/file.tsx

@@ -1,83 +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/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>
-      )}
-    />
-  );
-};
+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<'input'>> = ({ 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

@@ -17,7 +17,7 @@ import { useTwintagForm } from '@twintag/twintag-form/components/provider';
 
 export const DEFAULT_INPUT_VALUE = '';
 
-export const Input: FC<Props> = ({ label, bind, options }) => {
+export const Input: FC<Props<'input'>> = ({ label, bind, options }) => {
   const { control } = useFormContext();
 
   const { variant, size } = useTwintagForm();

package/lib/components/fields/radiogroup.tsx

@@ -20,7 +20,11 @@ import { useTwintagForm } from '@twintag/twintag-form/components/provider';
 
 export const DEFAULT_RADIOGROUP_VALUE = '';
 
-export const RadioGroup: FC<Props> = ({ label, bind, items, options }) => {
+export const RadioGroup: FC<
+  Props<'input'> & {
+    items: Props<'input'>[];
+  }
+> = ({ label, bind, items, options }) => {
   const { control } = useFormContext();
   const { size } = useTwintagForm();
 

package/lib/components/fields/textarea.tsx

@@ -17,7 +17,7 @@ import { useTwintagForm } from '@twintag/twintag-form/components/provider';
 
 export const DEFAULT_TEXTAREA_VALUE = '';
 
-export const Textarea: FC<Props> = ({ label, bind, options }) => {
+export const Textarea: FC<Props<'input'>> = ({ label, bind, options }) => {
   const { control } = useFormContext();
   const { variant, size } = useTwintagForm();
 

package/lib/components/fields/toggle.tsx

@@ -17,7 +17,7 @@ import { useTwintagForm } from '@twintag/twintag-form/components/provider';
 
 export const DEFAULT_TOGGLE_VALUE = false;
 
-export const Toggle: FC<Props> = ({ label, bind, options }) => {
+export const Toggle: FC<Props<'input'>> = ({ label, bind, options }) => {
   const { control } = useFormContext();
   const { variant, size } = useTwintagForm();
 

package/lib/components/fields/tri-toggle.tsx

@@ -88,7 +88,7 @@ Slider.displayName = SliderPrimitive.Root.displayName;
 
 export const DEFAULT_TRI_TOGGLE_VALUE = null;
 
-export const TriToggle: FC<Props> = ({ label, bind, options }) => {
+export const TriToggle: FC<Props<'input'>> = ({ label, bind, options }) => {
   const { control } = useFormContext();
   const { variant, size } = useTwintagForm();