@twintag/twintag-form 1.6.2-beta.1 → 1.6.2

package/lib/components/fields/input.tsx

@@ -1,70 +1,70 @@
-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 as InputPrimitive } from '@twintag/twintag-form/common/input';
-import { useTwintagForm } from '@twintag/twintag-form/components/provider';
-
-export const DEFAULT_INPUT_VALUE = '';
-
-export const Input: FC<Props<'input', 'text'>> = ({ label, bind, options }) => {
-  const { control } = useFormContext();
-
-  const { variant, size } = useTwintagForm();
-
-  const isOptional = options?.optionalField;
-
-  return (
-    <FormField
-      defaultValue={DEFAULT_INPUT_VALUE}
-      control={control}
-      name={bind}
-      rules={{
-        required: isOptional ? false : (options?.error ?? true),
-      }}
-      render={({ field }) => (
-        <FormItem variant={variant}>
-          <div className='space-y-1'>
-            <FormLabel size={size}>
-              {label}
-              {!isOptional ? (
-                <span className='ml-0.5 inline-block'>
-                  <AsteriskIcon className='h-3 w-3 text-tf-destructive' />
-                </span>
-              ) : (
-                <></>
-              )}
-            </FormLabel>
-            {options?.description ? (
-              <FormDescription size={size}>
-                {options.description}
-              </FormDescription>
-            ) : (
-              <></>
-            )}
-          </div>
-          <FormControl>
-            <InputPrimitive
-              type='text'
-              size={size}
-              variant={variant}
-              placeholder={options?.placeholder ?? 'Write here...'}
-              {...field}
-            />
-          </FormControl>
-          <FormMessage size={size} className='pt-1' />
-        </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 as InputPrimitive } from '@twintag/twintag-form/common/input';
+import { useTwintagForm } from '@twintag/twintag-form/components/provider';
+
+export const DEFAULT_INPUT_VALUE = '';
+
+export const Input: FC<Props<'input', 'text'>> = ({ label, bind, options }) => {
+  const { control } = useFormContext();
+
+  const { variant, size } = useTwintagForm();
+
+  const isOptional = options?.optionalField;
+
+  return (
+    <FormField
+      defaultValue={DEFAULT_INPUT_VALUE}
+      control={control}
+      name={bind}
+      rules={{
+        required: isOptional ? false : (options?.error ?? true),
+      }}
+      render={({ field }) => (
+        <FormItem variant={variant}>
+          <div className='space-y-1'>
+            <FormLabel size={size}>
+              {label}
+              {!isOptional ? (
+                <span className='ml-0.5 inline-block'>
+                  <AsteriskIcon className='h-3 w-3 text-tf-destructive' />
+                </span>
+              ) : (
+                <></>
+              )}
+            </FormLabel>
+            {options?.description ? (
+              <FormDescription size={size}>
+                {options.description}
+              </FormDescription>
+            ) : (
+              <></>
+            )}
+          </div>
+          <FormControl>
+            <InputPrimitive
+              type='text'
+              size={size}
+              variant={variant}
+              placeholder={options?.placeholder ?? 'Write here...'}
+              {...field}
+            />
+          </FormControl>
+          <FormMessage size={size} className='pt-1' />
+        </FormItem>
+      )}
+    />
+  );
+};

package/lib/components/fields/textarea.tsx

@@ -1,72 +1,72 @@
-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 { Textarea as CommonTextarea } from '@twintag/twintag-form/common/textarea';
-import { useTwintagForm } from '@twintag/twintag-form/components/provider';
-
-export const DEFAULT_TEXTAREA_VALUE = '';
-
-export const Textarea: FC<Props<'input', 'text'>> = ({
-  label,
-  bind,
-  options,
-}) => {
-  const { control } = useFormContext();
-  const { variant, size } = useTwintagForm();
-
-  const isOptional = options?.optionalField;
-
-  return (
-    <FormField
-      defaultValue={DEFAULT_TEXTAREA_VALUE}
-      control={control}
-      name={bind}
-      rules={{
-        required: isOptional ? false : (options?.error ?? true),
-      }}
-      render={({ field }) => (
-        <FormItem variant={variant}>
-          <div className='space-y-1'>
-            <FormLabel size={size}>
-              {label}
-              {!isOptional ? (
-                <span className='ml-0.5 inline-block'>
-                  <AsteriskIcon className='h-3 w-3 text-tf-destructive' />
-                </span>
-              ) : (
-                <></>
-              )}
-            </FormLabel>
-            {options?.description ? (
-              <FormDescription size={size}>
-                {options.description}
-              </FormDescription>
-            ) : (
-              <></>
-            )}
-          </div>
-          <FormControl>
-            <CommonTextarea
-              {...field}
-              size={size}
-              variant={variant}
-              placeholder={options?.placeholder ?? 'Write here...'}
-            />
-          </FormControl>
-          <FormMessage size={size} className='pt-1' />
-        </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 { Textarea as CommonTextarea } from '@twintag/twintag-form/common/textarea';
+import { useTwintagForm } from '@twintag/twintag-form/components/provider';
+
+export const DEFAULT_TEXTAREA_VALUE = '';
+
+export const Textarea: FC<Props<'input', 'text'>> = ({
+  label,
+  bind,
+  options,
+}) => {
+  const { control } = useFormContext();
+  const { variant, size } = useTwintagForm();
+
+  const isOptional = options?.optionalField;
+
+  return (
+    <FormField
+      defaultValue={DEFAULT_TEXTAREA_VALUE}
+      control={control}
+      name={bind}
+      rules={{
+        required: isOptional ? false : (options?.error ?? true),
+      }}
+      render={({ field }) => (
+        <FormItem variant={variant}>
+          <div className='space-y-1'>
+            <FormLabel size={size}>
+              {label}
+              {!isOptional ? (
+                <span className='ml-0.5 inline-block'>
+                  <AsteriskIcon className='h-3 w-3 text-tf-destructive' />
+                </span>
+              ) : (
+                <></>
+              )}
+            </FormLabel>
+            {options?.description ? (
+              <FormDescription size={size}>
+                {options.description}
+              </FormDescription>
+            ) : (
+              <></>
+            )}
+          </div>
+          <FormControl>
+            <CommonTextarea
+              {...field}
+              size={size}
+              variant={variant}
+              placeholder={options?.placeholder ?? 'Write here...'}
+            />
+          </FormControl>
+          <FormMessage size={size} className='pt-1' />
+        </FormItem>
+      )}
+    />
+  );
+};

package/lib/components/provider.tsx

@@ -1,162 +1,162 @@
-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: {},
-  acceptFileType: undefined,
-});
-
-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,
-  acceptFileType,
-  children,
-}: Omit<TwintagFormContext, 'config' | 'resetValues'> & {
-  config: RawJsonComponent | RawJsonComponent[];
-} & 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,
-        acceptFileType,
-      }}
-    >
-      {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: {},
+  acceptFileType: undefined,
+});
+
+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,
+  acceptFileType,
+  children,
+}: Omit<TwintagFormContext, 'config' | 'resetValues'> & {
+  config: RawJsonComponent | RawJsonComponent[];
+} & 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,
+        acceptFileType,
+      }}
+    >
+      {children}
+    </twintagFormContext.Provider>
+  );
+};