@twintag/twintag-form 0.1.0

package/lib/components/Form/index.tsx

@@ -0,0 +1,86 @@
+import type { FieldValues } from 'react-hook-form';
+import type { WithChildren } from 'twintag-types/dom';
+
+import { useEffect, useRef } from 'react';
+import { useForm } from 'react-hook-form';
+
+import { RegisterInputs } from './register';
+
+type Props = {
+  options?: {
+    resetOnSubmit?: boolean;
+  };
+} & WithChildren;
+
+const Form = ({ children, options }: Props) => {
+  const formRef = useRef<HTMLFormElement>(null);
+
+  const {
+    reset,
+    register,
+    handleSubmit,
+    formState: { isSubmitSuccessful },
+    control,
+  } = useForm();
+
+  useEffect(() => {
+    if (isSubmitSuccessful && options?.resetOnSubmit) reset();
+  }, [isSubmitSuccessful]);
+
+  const onValid = (data: FieldValues) => {
+    const customSubmit = new CustomEvent('twintag-form-valid', {
+      detail: data,
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+    });
+
+    formRef.current?.dispatchEvent(customSubmit);
+  };
+
+  const onInvalid = (__errors: FieldValues) => {
+    const customSubmit = new CustomEvent('twintag-form-invalid', {
+      detail: __errors,
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+    });
+
+    formRef.current?.dispatchEvent(customSubmit);
+  };
+
+  const onValidate = () => {
+    handleSubmit(onValid, onInvalid)();
+  };
+
+  useEffect(() => {
+    if (formRef.current) {
+      formRef.current.addEventListener('twintag-form-validate', onValidate);
+    }
+
+    return () => {
+      if (formRef.current) {
+        formRef.current.removeEventListener(
+          'twintag-form-validate',
+          onValidate
+        );
+      }
+    };
+  }, []);
+
+  return (
+    <form
+      ref={formRef}
+      className='relative font-sans'
+      onSubmit={handleSubmit(onValid, onInvalid)}
+    >
+      <div className='grid w-auto gap-4'>
+        <RegisterInputs useForm={{ register, control }}>
+          {children}
+        </RegisterInputs>
+      </div>
+    </form>
+  );
+};
+
+export default Form;

package/lib/components/Form/register.tsx

@@ -0,0 +1,70 @@
+import type { ReactElement } from 'react';
+import type { UseFormRegister, Control } from 'react-hook-form';
+import type { WithChildren } from 'twintag-types/dom';
+
+import { Children, createElement } from 'react';
+
+import Input from '../Input';
+
+const RegisterInputs = ({
+  children,
+  useForm,
+}: {
+  useForm: { register: UseFormRegister<any>; control: Control };
+} & WithChildren) => {
+  return Children.map(children as any, (child) => {
+    if (!child) return null;
+
+    if (child.props?.config?.items) {
+      return createElement(child.type, {
+        config: {
+          ...child.props.config,
+          items: child.props.config.items.map((item: any) => {
+            if (item.type === 'input') {
+              return {
+                ...item,
+                useForm,
+              };
+            }
+
+            return item;
+          }),
+        },
+      });
+    }
+
+    if (child.props?.children) {
+      return createElement(
+        child.type,
+        {
+          ...child.props,
+        },
+        <RegisterInputs useForm={useForm}>
+          {child.props.children}
+        </RegisterInputs>
+      );
+    }
+
+    if ((child as ReactElement).props?.config?.type === 'input') {
+      return createElement(child.type, {
+        config: {
+          ...child.props.config,
+          useForm,
+        },
+      });
+    }
+
+    if (child.type === Input) {
+      return createElement(child.type, {
+        ...child.props,
+        useForm,
+      });
+    }
+
+    return createElement(child.type, {
+      ...child.props,
+    });
+  });
+};
+
+export { RegisterInputs };

package/lib/components/Input/checkbox.tsx

@@ -0,0 +1,50 @@
+import type { VariantProps } from 'tailwind-variants';
+
+import { useMemo } from 'react';
+import { useController } from 'react-hook-form';
+import { CheckIcon } from '@heroicons/react/24/outline';
+import * as RdxCheckbox from '@radix-ui/react-checkbox';
+
+import type { CommonProps } from '@/types';
+
+import { checkboxStyle } from '@/styles';
+
+type Props = CommonProps<VariantProps<typeof checkboxStyle>['variant']>;
+
+const Checkbox = ({ useForm, label, bind, options }: Props) => {
+  const { container, checkbox } = useMemo(() => {
+    if (options?.variant) return checkboxStyle({ variant: options.variant });
+    return checkboxStyle();
+  }, []);
+
+  const {
+    field: { onChange, value },
+  } = useController({
+    name: bind as string,
+    control: useForm ? useForm.control : undefined,
+    defaultValue: false,
+    rules: {
+      required: options?.optionalField ? false : `${label} is required`,
+    },
+  });
+
+  return (
+    <label className={container()}>
+      <RdxCheckbox.Root
+        className={checkbox()}
+        defaultChecked={value}
+        onCheckedChange={(state) => {
+          onChange(state);
+        }}
+      >
+        <RdxCheckbox.Indicator className='text-black'>
+          <CheckIcon className='w-4' />
+        </RdxCheckbox.Indicator>
+      </RdxCheckbox.Root>
+
+      <span className='leading-none text-black'>{label as string}</span>
+    </label>
+  );
+};
+
+export default Checkbox;

package/lib/components/Input/file.tsx

@@ -0,0 +1,76 @@
+import type { VariantProps } from 'tailwind-variants';
+
+import { useMemo } from 'react';
+import { useController } from 'react-hook-form';
+import { CloudArrowUpIcon } from '@heroicons/react/24/outline';
+
+import type { CommonProps } from '@/types';
+
+import { fileStyle } from '@/styles';
+
+type Props = CommonProps<VariantProps<typeof fileStyle>['variant']>;
+
+const File = ({ useForm, label, bind, options }: Props) => {
+  const { container, span, input } = useMemo(() => {
+    if (options?.variant) return fileStyle({ variant: options?.variant });
+    return fileStyle();
+  }, []);
+
+  const {
+    field: { onChange, value },
+  } = useController({
+    name: bind as string,
+    control: useForm ? useForm.control : undefined,
+    defaultValue: null,
+    rules: {
+      required: options?.optionalField ? false : `${label} is required`,
+    },
+  });
+
+  return (
+    <label className={container()}>
+      {label ? <span className={span()}>{label as string}</span> : <></>}
+
+      <input
+        type='file'
+        multiple
+        capture='environment'
+        onChange={(e) => {
+          if (e.target.files) {
+            onChange(e.target.files);
+          }
+        }}
+        className='sr-only peer'
+      />
+
+      <span
+        className={`${input()} ${
+          value && value.length > 0
+            ? 'border-primary text-primary'
+            : 'border-slate-700/10 text-slate-400'
+        }`}
+      >
+        <span className='grid'>
+          {value && value.length > 0 ? (
+            Array.from(value as unknown as FileList).map((item, index) => {
+              return (
+                <span
+                  key={index}
+                  className='block max-w-full overflow-hidden text-ellipsis whitespace-nowrap'
+                >
+                  {item.name}
+                </span>
+              );
+            })
+          ) : (
+            <span>Select a file</span>
+          )}
+        </span>
+
+        <CloudArrowUpIcon className='h-6 w-6 min-w-[1.5rem]' />
+      </span>
+    </label>
+  );
+};
+
+export default File;

package/lib/components/Input/index.tsx

@@ -0,0 +1,30 @@
+import type { CommonProps } from '@/types';
+
+import Simple from './simple';
+import Textarea from './textarea';
+import Toggle from './toggle';
+import File from './file';
+import Submit from './submit';
+import Checkbox from './checkbox';
+
+export const Inputs = new Map()
+  .set('simple', Simple)
+  .set('textarea', Textarea)
+  .set('toggle', Toggle)
+  .set('file', File)
+  .set('submit', Submit)
+  .set('checkbox', Checkbox);
+
+type Props = {
+  subtype?: string;
+};
+
+const Input = ({ subtype = 'simple', ...rest }: Props) => {
+  const InputComponent = Inputs.get(subtype);
+
+  if (!InputComponent) return <></>;
+
+  return <InputComponent {...rest} />;
+};
+
+export default Input;

package/lib/components/Input/simple.tsx

@@ -0,0 +1,41 @@
+import type { VariantProps } from 'tailwind-variants';
+
+import { useId, useMemo } from 'react';
+
+import type { CommonProps } from '@/types';
+
+import { simpleStyle } from '@/styles';
+
+type Props = CommonProps<VariantProps<typeof simpleStyle>['variant']>;
+
+const Simple = ({ useForm, label, bind, options }: Props) => {
+  const id = useId();
+
+  const { container, span, input } = useMemo(() => {
+    if (options?.variant) return simpleStyle({ variant: options.variant });
+    return simpleStyle();
+  }, []);
+
+  return (
+    <div className={container()}>
+      {label ? (
+        <label htmlFor={id}>
+          <span className={span()}>{label as string}</span>
+        </label>
+      ) : (
+        <></>
+      )}
+      <input
+        id={id}
+        type='text'
+        placeholder='Write here...'
+        className={input()}
+        {...useForm!.register(bind as string, {
+          required: options?.optionalField ? false : `${label} is required`,
+        })}
+      />
+    </div>
+  );
+};
+
+export default Simple;

package/lib/components/Input/submit.tsx

@@ -0,0 +1,24 @@
+import type { VariantProps } from 'tailwind-variants';
+
+import { useMemo } from 'react';
+
+import type { CommonProps } from '@/types';
+
+import { submitStyle } from '@/styles';
+
+type Props = CommonProps<VariantProps<typeof submitStyle>['variant']>;
+
+const Submit = ({ label, options }: Props) => {
+  const style = useMemo(() => {
+    if (options?.variant) return submitStyle({ variant: options.variant });
+    return submitStyle();
+  }, []);
+
+  return (
+    <button type='submit' className={style}>
+      {label as string}
+    </button>
+  );
+};
+
+export default Submit;

package/lib/components/Input/textarea.tsx

@@ -0,0 +1,36 @@
+import type { VariantProps } from 'tailwind-variants';
+
+import { useId, useMemo } from 'react';
+
+import type { CommonProps } from '@/types';
+
+import { simpleStyle } from '@/styles';
+
+type Props = CommonProps<VariantProps<typeof simpleStyle>['variant']>;
+
+const Textarea = ({ useForm, label, bind, options }: Props) => {
+  const id = useId();
+
+  const { container, span, input } = useMemo(() => {
+    if (options?.variant) return simpleStyle({ variant: options.variant });
+    return simpleStyle();
+  }, []);
+
+  return (
+    <div className={container()}>
+      <label htmlFor={id}>
+        <span className={span()}>{label as string}</span>
+      </label>
+      <textarea
+        id={id}
+        className={input()}
+        placeholder='Write here...'
+        {...useForm!.register(bind as string, {
+          required: options?.optionalField ? false : `${label} is required`,
+        })}
+      />
+    </div>
+  );
+};
+
+export default Textarea;

package/lib/components/Input/toggle.tsx

@@ -0,0 +1,50 @@
+import type { VariantProps } from 'tailwind-variants';
+
+import { useMemo } from 'react';
+import { useController } from 'react-hook-form';
+import * as Switch from '@radix-ui/react-switch';
+
+import type { CommonProps } from '@/types';
+
+import { toggleStyle } from '@/styles';
+
+type Props = CommonProps<VariantProps<typeof toggleStyle>['variant']>;
+
+const Toggle = ({ useForm, label, bind, options }: Props) => {
+  const { container, span, input, thumb } = useMemo(() => {
+    if (options?.variant) return toggleStyle({ variant: options.variant });
+    return toggleStyle();
+  }, []);
+
+  const {
+    field: { onChange, value },
+  } = useController({
+    name: bind as string,
+    control: useForm ? useForm.control : undefined,
+    defaultValue: false,
+    rules: {
+      required: options?.optionalField ? false : `${label} is required`,
+    },
+  });
+
+  return (
+    <div className='w-full'>
+      <label className={container()}>
+        {label ? <span className={span()}>{label as string}</span> : <></>}
+
+        <Switch.Root
+          id={bind as string}
+          checked={value}
+          className={input()}
+          onCheckedChange={(state) => {
+            onChange(state);
+          }}
+        >
+          <Switch.Thumb className={thumb()} />
+        </Switch.Root>
+      </label>
+    </div>
+  );
+};
+
+export default Toggle;

package/lib/index.tsx

@@ -0,0 +1,173 @@
+import type { FC, ReactNode } from 'react';
+
+import { LabelToString } from 'twintag-types/dom';
+
+import Input from './components/Input';
+import Form from './components/Form';
+
+type Config = {
+  key?: number;
+  type?: any;
+  subtype?: string;
+  label?: string;
+  items?: any[];
+  bind?: string;
+  options?: Record<string, any>;
+};
+
+type Component = {
+  subtype?: string;
+  label?: string;
+  bind?: string;
+  children?: ReactNode;
+  options?: Record<string, any>;
+};
+
+type Format = {
+  $config: Config;
+  $blocks?: Map<string, any>;
+  $containers?: Map<string, any>;
+  $available?: Map<string, any>;
+};
+
+const format = ({ $config, $blocks, $containers, $available }: Format) => {
+  const config: Config & {
+    block?: FC<Component>;
+    container?: FC<Component>;
+  } = { ...$config };
+
+  const typeLength = config.type.length;
+  const colonIndex = config.type.indexOf(':');
+
+  const typeFiltered = config.type.substring(
+    0,
+    colonIndex > 0 ? config.type.lastIndexOf(':') : typeLength + 1
+  );
+  const subtypeFiltered =
+    colonIndex > 0 && colonIndex + 1 !== typeLength
+      ? config.type.substring(colonIndex + 1, typeLength + 1)
+      : undefined;
+
+  const isTypeAvailable = $available?.has(typeFiltered);
+
+  if (isTypeAvailable) {
+    const block = $blocks?.get(typeFiltered);
+    const container = $containers?.get(typeFiltered);
+
+    config.type = typeFiltered;
+    config.subtype = config.subtype ? config.subtype : subtypeFiltered;
+    config.block = block;
+    config.container = container;
+  }
+
+  if (config.label) config.label = LabelToString.parse(config.label);
+
+  if (config.items && Array.isArray(config.items))
+    config.items = config.items.map((item) =>
+      format({
+        $config: item,
+        $available,
+        $blocks,
+        $containers,
+      })
+    );
+
+  return config;
+};
+
+type Params = {
+  $config: Config;
+  $blocks?: Map<string, any>;
+  $containers?: Map<string, any>;
+};
+
+const useConfig = (params: Params) => {
+  const available = new Map([
+    ...new Map(params.$blocks),
+    ...new Map(params.$containers),
+  ]);
+
+  return format({
+    ...params,
+    $available: available,
+  });
+};
+
+const blocks = new Map().set('input', Input);
+const containers = new Map().set('form', Form);
+
+type RendererProps = {
+  config: Config & {
+    block?: FC<Component>;
+    container?: FC<Component>;
+  };
+};
+
+const FormRenderer = ({ config }: RendererProps) => {
+  const { key, type, subtype, label, bind, items, block, container, ...rest } =
+    config;
+
+  if (!type) return null;
+
+  if (container && items && Array.isArray(items)) {
+    const Component = container;
+
+    return (
+      <Component key={key} subtype={subtype} label={label} {...rest}>
+        {items.map((item, idx) => (
+          <FormRenderer
+            key={idx}
+            config={{
+              ...rest,
+              ...item,
+              options: {
+                ...item.options,
+                variant: rest.options?.variant,
+              },
+            }}
+          />
+        ))}
+      </Component>
+    );
+  }
+
+  if (block) {
+    const Component = block;
+
+    return (
+      <Component
+        key={key}
+        subtype={subtype}
+        label={label}
+        bind={bind}
+        {...rest}
+      />
+    );
+  }
+
+  return null;
+};
+
+type Props = {
+  config: Component[];
+  options?: {
+    variant?: string;
+    resetOnSubmit?: boolean;
+  };
+};
+
+const TwintagForm = ({ config, options }: Props) => {
+  const __config = useConfig({
+    $blocks: blocks,
+    $containers: containers,
+    $config: {
+      type: 'form',
+      items: config ? config : [],
+      options,
+    },
+  });
+
+  return <FormRenderer config={__config} />;
+};
+
+export default TwintagForm;