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

package/lib/components/provider.tsx

@@ -1,159 +1,163 @@
-import type {
-  ParsedJsonComponent,
-  RawJsonComponent,
-  TwintagFormContext,
-} from '@twintag/twintag-form/types';
-import type { WithChildren } from 'twintag-types/dom';
-
-import { createContext, useContext, useMemo } from 'react';
-import { LabelToString } from 'twintag-types/dom';
-import { v4 as uuid } from 'uuid';
-
-export const twintagFormContext = createContext<TwintagFormContext>({
-  variant: 'default',
-  size: 'base',
-  inputs: new Map(),
-  components: new Map(),
-  config: [],
-  resetValues: {},
-});
-
-export const useTwintagForm = () => {
-  const context = useContext(twintagFormContext);
-
-  if (!context) {
-    throw new Error('useTwintagForm must be used within a TwintagFormProvider');
-  }
-
-  return context;
-};
-
-type Components = TwintagFormContext['components'];
-type Inputs = TwintagFormContext['inputs'];
-
-const format = (component: RawJsonComponent, components: Components) => {
-  const copy = { ...component };
-  let formattedConfig: ParsedJsonComponent;
-
-  if (copy.props) {
-    formattedConfig = { ...copy.props } as ParsedJsonComponent;
-  } else {
-    formattedConfig = { ...copy } as unknown as ParsedJsonComponent;
-  }
-
-  if (!copy.type) return Object.create(null) as ParsedJsonComponent;
-
-  const [type, subtype = undefined] = copy.type.split(':');
-  formattedConfig.id = `${type}-${uuid()}`;
-
-  const comp = components.get(type);
-
-  if (comp) {
-    formattedConfig.comp = comp;
-  }
-
-  formattedConfig.type = type;
-
-  if (subtype) {
-    formattedConfig.subtype = subtype;
-  }
-
-  if (copy.props) {
-    if (copy.props.subtype) {
-      formattedConfig.subtype = copy.props.subtype;
-    }
-
-    if (copy.props.label) {
-      const labelParsed = LabelToString.safeParse(copy.props.label);
-      formattedConfig.label = labelParsed.success
-        ? labelParsed.data
-        : undefined;
-    }
-  }
-
-  if (copy.children && Array.isArray(copy.children)) {
-    formattedConfig.items = copy.children.map((item) =>
-      format(item, components),
-    );
-  }
-
-  return formattedConfig;
-};
-
-export const getResetValues = (
-  config: RawJsonComponent | RawJsonComponent[],
-  inputs: Inputs,
-) => {
-  const stack = Array.isArray(config) ? [...config] : [config];
-
-  const resetValues = new Map<string, unknown>();
-
-  while (stack.length > 0) {
-    const currentObj = stack.pop();
-
-    if (!currentObj) continue;
-
-    for (const [key, value] of Object.entries(currentObj)) {
-      if (Array.isArray(value)) {
-        for (const item of value) {
-          stack.push(item as unknown as RawJsonComponent);
-        }
-      }
-
-      if (typeof value === 'object' && value !== null) {
-        stack.push(value as unknown as RawJsonComponent);
-      }
-
-      if (key === 'subtype' && currentObj.bind) {
-        resetValues.set(
-          currentObj.bind,
-          inputs.get(value as string)?.defaultValue,
-        );
-      }
-    }
-  }
-
-  return Object.fromEntries(resetValues);
-};
-
-export const TwintagFormProvider = ({
-  variant,
-  size,
-  inputs,
-  components,
-  config,
-  children,
-}: {
-  config: RawJsonComponent | RawJsonComponent[];
-  variant: TwintagFormContext['variant'];
-  size: TwintagFormContext['size'];
-  inputs: Inputs;
-  components: Components;
-} & WithChildren) => {
-  const __config = useMemo(() => {
-    if (Array.isArray(config)) {
-      return config.map((item) => format(item, components));
-    }
-
-    return format(config, components);
-  }, [config, components]);
-
-  const resetValues = useMemo(() => {
-    return getResetValues(__config, inputs);
-  }, [__config, inputs]);
-
-  return (
-    <twintagFormContext.Provider
-      value={{
-        config: __config,
-        variant,
-        size,
-        inputs,
-        components,
-        resetValues,
-      }}
-    >
-      {children}
-    </twintagFormContext.Provider>
-  );
-};
+import type {
+  ParsedJsonComponent,
+  RawJsonComponent,
+  TwintagFormContext,
+} from '@twintag/twintag-form/types';
+import type { WithChildren } from 'twintag-types/dom';
+
+import { createContext, useContext, useMemo } from 'react';
+import { LabelToString } from 'twintag-types/dom';
+import { v4 as uuid } from 'uuid';
+
+export const twintagFormContext = createContext<TwintagFormContext>({
+  variant: 'default',
+  size: 'base',
+  inputs: new Map(),
+  components: new Map(),
+  config: [],
+  resetValues: {},
+});
+
+export const useTwintagForm = () => {
+  const context = useContext(twintagFormContext);
+
+  if (!context) {
+    throw new Error('useTwintagForm must be used within a TwintagFormProvider');
+  }
+
+  return context;
+};
+
+type Components = TwintagFormContext['components'];
+type Inputs = TwintagFormContext['inputs'];
+
+const format = (component: RawJsonComponent, components: Components) => {
+  const copy = { ...component };
+  let formattedConfig: ParsedJsonComponent;
+
+  if (copy.props) {
+    formattedConfig = { ...copy.props } as ParsedJsonComponent;
+  } else {
+    formattedConfig = { ...copy } as unknown as ParsedJsonComponent;
+  }
+
+  if (!copy.type) return Object.create(null) as ParsedJsonComponent;
+
+  const [type, subtype = undefined] = copy.type.split(':');
+  formattedConfig.id = `${type}-${uuid()}`;
+
+  const comp = components.get(type);
+
+  if (comp) {
+    formattedConfig.comp = comp;
+  }
+
+  formattedConfig.type = type;
+
+  if (subtype) {
+    formattedConfig.subtype = subtype;
+  }
+
+  if (copy.props) {
+    if (copy.props.subtype) {
+      formattedConfig.subtype = copy.props.subtype;
+    }
+
+    if (copy.props.label) {
+      const labelParsed = LabelToString.safeParse(copy.props.label);
+      formattedConfig.label = labelParsed.success
+        ? labelParsed.data
+        : undefined;
+    }
+  }
+
+  if (copy.children && Array.isArray(copy.children)) {
+    formattedConfig.items = copy.children.map((item) =>
+      format(item, components),
+    );
+  }
+
+  return formattedConfig;
+};
+
+export const getResetValues = (
+  config: ParsedJsonComponent | ParsedJsonComponent[],
+  inputs: Inputs,
+) => {
+  const stack = Array.isArray(config) ? [...config] : [config];
+
+  const resetValues = new Map<string, unknown>();
+
+  while (stack.length > 0) {
+    const currentObj = stack.pop();
+
+    if (!currentObj) continue;
+
+    for (const [key, value] of Object.entries(currentObj)) {
+      if (Array.isArray(value)) {
+        for (const item of value) {
+          stack.push(item);
+        }
+      }
+
+      if (typeof value === 'object' && value !== null) {
+        stack.push(value as unknown as ParsedJsonComponent);
+      }
+
+      if (
+        key === 'subtype' &&
+        'bind' in currentObj &&
+        typeof currentObj.bind === 'string'
+      ) {
+        resetValues.set(
+          currentObj.bind,
+          inputs.get(value as string)?.defaultValue,
+        );
+      }
+    }
+  }
+
+  return Object.fromEntries(resetValues);
+};
+
+export const TwintagFormProvider = ({
+  variant,
+  size,
+  inputs,
+  components,
+  config,
+  children,
+}: {
+  config: RawJsonComponent | RawJsonComponent[];
+  variant: TwintagFormContext['variant'];
+  size: TwintagFormContext['size'];
+  inputs: Inputs;
+  components: Components;
+} & WithChildren) => {
+  const __config = useMemo(() => {
+    if (Array.isArray(config)) {
+      return config.map((item) => format(item, components));
+    }
+
+    return format(config, components);
+  }, [config, components]);
+
+  const resetValues = useMemo(() => {
+    return getResetValues(__config, inputs);
+  }, [__config, inputs]);
+
+  return (
+    <twintagFormContext.Provider
+      value={{
+        config: __config,
+        variant,
+        size,
+        inputs,
+        components,
+        resetValues,
+      }}
+    >
+      {children}
+    </twintagFormContext.Provider>
+  );
+};

package/lib/index.tsx

@@ -1,41 +1,41 @@
-import type { ComponentProps } from 'react';
-import type { RawJsonComponent } from '@twintag/twintag-form/types';
-
-import { forwardRef } from 'react';
-
-import { components, Inputs } from '@twintag/twintag-form/components/config';
-import { TwintagForm } from '@twintag/twintag-form/components/form';
-import { TwintagFormProvider } from '@twintag/twintag-form/components/provider';
-import { JsonRenderer } from '@twintag/twintag-form/components/renderer';
-
-type Props = {
-  config: RawJsonComponent[];
-  options?: Partial<{
-    defaultValues?: ComponentProps<typeof TwintagForm>['defaultValues'];
-    variant?: ComponentProps<typeof TwintagFormProvider>['variant'];
-    size?: ComponentProps<typeof TwintagFormProvider>['size'];
-    resetOnSubmit?: boolean;
-  }>;
-};
-
-export const Form = forwardRef<HTMLFormElement, Props>(
-  ({ config, options }, ref) => {
-    return (
-      <TwintagFormProvider
-        inputs={Inputs}
-        components={components}
-        variant={options?.variant}
-        size={options?.size}
-        config={config}
-      >
-        <TwintagForm
-          ref={ref}
-          defaultValues={options?.defaultValues}
-          resetOnSubmit={options?.resetOnSubmit}
-        >
-          <JsonRenderer />
-        </TwintagForm>
-      </TwintagFormProvider>
-    );
-  },
-);
+import type { ComponentProps } from 'react';
+import type { RawJsonComponent } from '@twintag/twintag-form/types';
+
+import { forwardRef } from 'react';
+
+import { components, Inputs } from '@twintag/twintag-form/components/config';
+import { TwintagForm } from '@twintag/twintag-form/components/form';
+import { TwintagFormProvider } from '@twintag/twintag-form/components/provider';
+import { JsonRenderer } from '@twintag/twintag-form/components/renderer';
+
+type Props = {
+  config: RawJsonComponent[];
+  options?: Partial<{
+    defaultValues?: ComponentProps<typeof TwintagForm>['defaultValues'];
+    variant?: ComponentProps<typeof TwintagFormProvider>['variant'];
+    size?: ComponentProps<typeof TwintagFormProvider>['size'];
+    resetOnSubmit?: boolean;
+  }>;
+};
+
+export const Form = forwardRef<HTMLFormElement, Props>(
+  ({ config, options }, ref) => {
+    return (
+      <TwintagFormProvider
+        inputs={Inputs}
+        components={components}
+        variant={options?.variant}
+        size={options?.size}
+        config={config}
+      >
+        <TwintagForm
+          ref={ref}
+          defaultValues={options?.defaultValues}
+          resetOnSubmit={options?.resetOnSubmit}
+        >
+          <JsonRenderer />
+        </TwintagForm>
+      </TwintagFormProvider>
+    );
+  },
+);

package/lib/types/index.ts

@@ -1,49 +1,82 @@
-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.3",
   "author": "Twintag",
   "type": "module",
   "exports": {