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

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({
@@ -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/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();
 

package/lib/components/provider.tsx

@@ -81,7 +81,7 @@ const format = (component: RawJsonComponent, components: Components) => {
 };
 
 export const getResetValues = (
-  config: RawJsonComponent | RawJsonComponent[],
+  config: ParsedJsonComponent | ParsedJsonComponent[],
   inputs: Inputs,
 ) => {
   const stack = Array.isArray(config) ? [...config] : [config];
@@ -96,15 +96,19 @@ export const getResetValues = (
     for (const [key, value] of Object.entries(currentObj)) {
       if (Array.isArray(value)) {
         for (const item of value) {
-          stack.push(item as unknown as RawJsonComponent);
+          stack.push(item);
         }
       }
 
       if (typeof value === 'object' && value !== null) {
-        stack.push(value as unknown as RawJsonComponent);
+        stack.push(value as unknown as ParsedJsonComponent);
       }
 
-      if (key === 'subtype' && currentObj.bind) {
+      if (
+        key === 'subtype' &&
+        'bind' in currentObj &&
+        typeof currentObj.bind === 'string'
+      ) {
         resetValues.set(
           currentObj.bind,
           inputs.get(value as string)?.defaultValue,

package/lib/types/index.ts

@@ -1,49 +1,80 @@
-import type { 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;
-  subtype: string;
-  label: string;
-  icon: string;
-  options: Partial<{
-    description: string;
-    placeholder: string;
-    error: string;
-    optionalField: boolean;
-  }>;
-}>;
-
-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>;
-};
-
+import type { ElementType } from 'react';
+
+export type InputCompConfig = {
+  defaultValue?: unknown;
+  component: ElementType;
+};
+
+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;
+      label?: string;
+      subtype?: string;
+      options?: Partial<{
+        description: string;
+        placeholder: string;
+        error: string;
+        optionalField: boolean;
+      }>;
+    }
+  : 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, InputCompConfig>;
+  components: Map<string, ElementType>;
+  config: ParsedJsonComponent[] | ParsedJsonComponent;
+  resetValues: Record<string, unknown>;
+};

package/lib/utils/data.ts

@@ -1,6 +1,9 @@
 import type { Props } from '@twintag/twintag-form/types';
 
-export const getBindSetFromItems = (items: Props[]): Set<string> => {
+type Items = (Props<'input'> & {
+  items?: Items[];
+})[];
+export const getBindSetFromItems = (items: Items): Set<string> => {
   const binds = new Set<string>();
 
   items.forEach((item) => {
@@ -9,7 +12,7 @@ export const getBindSetFromItems = (items: Props[]): Set<string> => {
     }
 
     if (item.items) {
-      const subBinds = getBindSetFromItems(item.items);
+      const subBinds = getBindSetFromItems(item.items as unknown as Items);
       subBinds.forEach((bind) => binds.add(bind));
     }
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twintag/twintag-form",
-  "version": "1.4.0-beta.1",
+  "version": "1.4.0-beta.2",
   "author": "Twintag",
   "type": "module",
   "exports": {
@@ -49,9 +49,9 @@
     "tailwindcss": "^3.3.6",
     "vite": "^5.2.11",
     "vite-plugin-dts": "^3.9.1",
-    "eslint-config-custom": "1.0.0",
     "tsconfig": "0.0.0",
-    "twintag-types": "0.2.0"
+    "twintag-types": "0.2.0",
+    "eslint-config-custom": "1.0.0"
   },
   "publishConfig": {
     "access": "public"