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

package/lib/components/provider.tsx

@@ -1,163 +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: {},
-});
-
-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>
-  );
-};
+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>
+  );
+};

package/lib/index.tsx

@@ -1,41 +1,45 @@
-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;
+    acceptFileType?: ComponentProps<
+      typeof TwintagFormProvider
+    >['acceptFileType'];
+  }>;
+};
+
+export const Form = forwardRef<HTMLFormElement, Props>(
+  ({ config, options }, ref) => {
+    return (
+      <TwintagFormProvider
+        inputs={Inputs}
+        components={components}
+        variant={options?.variant}
+        size={options?.size}
+        config={config}
+        acceptFileType={options?.acceptFileType}
+      >
+        <TwintagForm
+          ref={ref}
+          defaultValues={options?.defaultValues}
+          resetOnSubmit={options?.resetOnSubmit}
+        >
+          <JsonRenderer />
+        </TwintagForm>
+      </TwintagFormProvider>
+    );
+  },
+);

package/lib/types/index.ts

@@ -1,82 +1,102 @@
-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' | 'outline';
-  size?: 'base' | 'sm';
-  inputs: Map<string, InputCompConfig>;
-  components: Map<string, ElementType>;
-  config: ParsedJsonComponent[] | ParsedJsonComponent;
-  resetValues: Record<string, unknown>;
-};
+import type { ElementType } from 'react';
+
+export type InputCompConfig = {
+  defaultValue?: unknown;
+  component: ElementType;
+};
+
+type BaseInputOptions = Partial<{
+  description: string;
+  error: string;
+  optionalField: boolean;
+}>;
+
+type TextInputOptions = BaseInputOptions & {
+  placeholder?: string;
+};
+
+type DatePickerInputOptions = BaseInputOptions & {
+  placeholder?: string;
+};
+
+type FileInputOptions = BaseInputOptions & {
+  accept?: string;
+};
+
+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?: TSubtype extends 'text' | 'textarea'
+        ? TextInputOptions
+        : TSubtype extends 'datepicker'
+          ? DatePickerInputOptions
+          : TSubtype extends 'file'
+            ? FileInputOptions
+            : BaseInputOptions;
+    }
+  : 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' | 'outline';
+  size?: 'base' | 'sm';
+  inputs: Map<string, InputCompConfig>;
+  components: Map<string, ElementType>;
+  config: ParsedJsonComponent[] | ParsedJsonComponent;
+  resetValues: Record<string, unknown>;
+  acceptFileType?: string;
+};

package/lib/webcomponent.ts

@@ -1,13 +1,13 @@
 import r2wc from '@r2wc/react-to-web-component';
 import install from '@twind/with-web-components';
 
-import { Form } from '@twintag/twintag-form/index';
+import { Form } from './index';
 
 import config from '../twind.config';
 
 const withTwind = install(config);
 
-const TwintagFormElement = r2wc(Form, {
+export const TwintagFormElement = r2wc(Form, {
   props: {
     config: 'json',
     options: 'json',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twintag/twintag-form",
-  "version": "1.6.1",
+  "version": "1.6.2-beta.1",
   "author": "Twintag",
   "type": "module",
   "exports": {

package/vite.config.ts

@@ -1,11 +1,12 @@
 import react from '@vitejs/plugin-react-swc';
 import { dirname, resolve } from 'pathe';
+import { fileURLToPath } from 'node:url'
 import { defineConfig } from 'vite';
 import dts from 'vite-plugin-dts';
 
 import { dependencies, devDependencies } from './package.json';
 
-export const __dirname = dirname(new URL(import.meta.url).pathname);
+export const __dirname = dirname(fileURLToPath(import.meta.url));
 
 const externalPackages = [
   ...Object.keys(dependencies || {}),