@twintag/twintag-form 0.4.2 → 0.5.0

package/dist/webcomponent.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/__stories__/Form.stories.tsx

@@ -1,4 +1,4 @@
-import TwintagForm from '../index';
+import { TwintagForm } from '@twintag-form/index';
 
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/react';
@@ -28,18 +28,110 @@ export const Example: Story = {
   args: {
     config: [
       {
+        id: 'category-123',
         type: 'category',
-        label: 'Category test',
-        items: [
-          { type: 'input', label: 'Test', bind: 'test' },
-          { type: 'input:toggle', label: 'Email', bind: 'email' },
-          { type: 'input:file', label: 'File test', bind: 'fileTest' },
+        props: {
+          label: 'Category 1st',
+        },
+        content: [],
+        children: [
+          {
+            id: 'input-123',
+            type: 'input',
+            props: {
+              subtype: 'toggle',
+              label: 'Require',
+              bind: 'require',
+            },
+            content: [],
+            children: [],
+          },
         ],
       },
-      { type: 'input:file', label: 'Image', bind: 'image' },
-      { type: 'input:checkbox', label: 'Checkbox', bind: 'checkbox' },
-      { type: 'input:checkbox', label: 'Checkbox Test', bind: 'checkTest' },
-      { type: 'input:submit', label: 'Submit' },
+      {
+        id: 'category-456',
+        type: 'category',
+        props: {
+          label: 'Category 2nd',
+        },
+        content: [],
+        children: [
+          {
+            id: 'input-123',
+            type: 'input',
+            props: {
+              subtype: 'simple',
+              label: 'Name',
+              bind: 'name',
+            },
+            content: [],
+            children: [],
+          },
+          {
+            id: 'input-456',
+            type: 'input',
+            props: {
+              subtype: 'simple',
+              label: 'Email',
+              bind: 'email',
+            },
+            content: [],
+            children: [],
+          },
+        ],
+      },
+      {
+        id: 'category-789',
+        type: 'category',
+        props: {
+          label: 'Category 3rd',
+        },
+        content: [],
+        children: [
+          {
+            id: 'input-789',
+            type: 'input',
+            props: {
+              subtype: 'file',
+              label: 'File',
+              bind: 'file',
+            },
+            content: [],
+            children: [],
+          },
+        ],
+      },
+      {
+        id: 'category-321',
+        type: 'category',
+        props: {
+          label: 'Category 4th',
+        },
+        content: [],
+        children: [
+          {
+            id: 'input-123',
+            type: 'input',
+            props: {
+              subtype: 'checkbox',
+              label: 'Checkbox',
+              bind: 'checkbox',
+            },
+            content: [],
+            children: [],
+          },
+        ],
+      },
+      {
+        id: 'input-654',
+        type: 'input',
+        props: {
+          subtype: 'submit',
+          label: 'Submit',
+        },
+        content: [],
+        children: [],
+      },
     ],
     options: {
       variant: 'beta',

package/lib/components/Category/__styles.ts

@@ -0,0 +1,12 @@
+import { tv } from 'tailwind-variants';
+
+export const categoryStyle = tv({
+  slots: {
+    container: 'w-full space-y-4',
+    span: 'text-category-label',
+    items: 'space-y-2',
+  },
+  variants: {
+    variant: {},
+  },
+});

package/lib/components/Category/index.tsx

@@ -2,20 +2,17 @@ import type { FC } from 'react';
 import type { VariantProps } from 'tailwind-variants';
 import type { WithChildren } from 'twintag-types/dom';
 
-import { useMemo } from 'react';
+import type { CommonProps } from '../Input/__props';
 
-import type { CommonProps } from '@twintag-form/types';
-
-import { categoryStyle } from '@twintag-form/styles';
+import { categoryStyle } from './__styles';
 
 type Props = CommonProps<VariantProps<typeof categoryStyle>['variant']> &
   WithChildren;
 
 const Category: FC<Props> = ({ label, options, children }) => {
-  const { container, span, items } = useMemo(() => {
-    if (options?.variant) return categoryStyle({ variant: options.variant });
-    return categoryStyle();
-  }, []);
+  const { container, span, items } = categoryStyle({
+    variant: options?.variant,
+  });
 
   return (
     <section className={container()}>

package/lib/components/Form/index.tsx

@@ -1,11 +1,13 @@
-import type { FC } from 'react';
+import type { Ref } from 'react';
 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 { useEffect, useRef, useImperativeHandle, forwardRef } from 'react';
+import { useForm, FormProvider } from 'react-hook-form';
 
-import { RegisterInputs } from './register';
+type FormRef = Ref<{
+  validate: () => void;
+} | null>;
 
 type Props = {
   options?: {
@@ -13,20 +15,20 @@ type Props = {
   };
 } & WithChildren;
 
-const Form: FC<Props> = ({ children, options }) => {
+const Form = forwardRef(({ options, children }: Props, ref: FormRef) => {
+  const { formState, reset, ...methods } = useForm();
+
   const formRef = useRef<HTMLFormElement>(null);
 
-  const {
-    reset,
-    register,
-    handleSubmit,
-    formState: { isSubmitSuccessful },
-    control,
-  } = useForm();
+  useImperativeHandle(ref, () => ({
+    validate: () => onValidate(),
+  }));
 
   useEffect(() => {
-    if (isSubmitSuccessful && options?.resetOnSubmit) reset();
-  }, [isSubmitSuccessful]);
+    if (formState.isSubmitSuccessful && options?.resetOnSubmit) {
+      reset();
+    }
+  }, [formState, reset]);
 
   const onValid = (data: FieldValues) => {
     const customSubmit = new CustomEvent('twintag-form-valid', {
@@ -51,37 +53,34 @@ const Form: FC<Props> = ({ children, options }) => {
   };
 
   const onValidate = () => {
-    handleSubmit(onValid, onInvalid)();
+    methods.handleSubmit(onValid, onInvalid)();
   };
 
   useEffect(() => {
-    if (formRef.current) {
-      formRef.current.addEventListener('twintag-form-validate', onValidate);
+    const form = formRef.current;
+
+    if (form) {
+      form.addEventListener('twintag-form-validate', onValidate);
     }
 
     return () => {
-      if (formRef.current) {
-        formRef.current.removeEventListener(
-          'twintag-form-validate',
-          onValidate
-        );
+      if (form) {
+        form.removeEventListener('twintag-form-validate', onValidate);
       }
     };
   }, []);
 
   return (
-    <form
-      ref={formRef}
-      className='font-ff-text relative'
-      onSubmit={handleSubmit(onValid, onInvalid)}
-    >
-      <div className='grid w-auto'>
-        <RegisterInputs useForm={{ register, control }}>
-          {children}
-        </RegisterInputs>
-      </div>
-    </form>
+    <FormProvider {...{ formState, reset, ...methods }}>
+      <form
+        ref={formRef}
+        className='font-ff-text relative'
+        onSubmit={methods.handleSubmit(onValid, onInvalid)}
+      >
+        <div className='w-full space-y-4'>{children}</div>
+      </form>
+    </FormProvider>
   );
-};
+});
 
 export default Form;

package/lib/{types/index.ts → components/Input/__props.ts}

@@ -1,12 +1,6 @@
-import type { UseFormRegister, Control } from 'react-hook-form';
-
 export type CommonProps<TVariant> = {
   label: string;
   bind: string;
-  useForm?: {
-    register: UseFormRegister<any>;
-    control: Control;
-  };
   checked?: boolean;
   options?: {
     variant?: TVariant;

package/lib/components/Input/__styles.ts

@@ -0,0 +1,132 @@
+import { tv } from 'tailwind-variants';
+
+export const labelStyle = tv({
+  base: 'text-label',
+});
+
+export const containerStyle = tv({
+  base: '',
+});
+
+export const checkboxStyle = tv({
+  slots: {
+    container: containerStyle({
+      className: 'flex gap-4 items-center w-full',
+    }),
+    checkbox:
+      'flex appearance-none items-center justify-center bg-white outline-none ring-0 border-2 border-primary focus:ring-0 focus:border-accent',
+  },
+  variants: {
+    variant: {
+      alpha: {
+        checkbox: 'h-5 w-5 rounded',
+      },
+      beta: {
+        checkbox: 'h-5 w-5',
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'alpha',
+  },
+});
+
+export const fileStyle = tv({
+  slots: {
+    container: containerStyle({
+      className: 'w-full block',
+    }),
+    span: '',
+    input:
+      'w-full cursor-pointer ring-0 focus:ring-0 border-2 border-transparent',
+  },
+  variants: {
+    variant: {
+      alpha: {
+        container: 'grid gap-1.5',
+        input:
+          'flex items-center justify-between gap-4 rounded-md px-3 py-2 border-slate-700/10 peer-focus:border-accent',
+      },
+      beta: {
+        container: 'grid gap-0',
+        input:
+          'flex items-center justify-between gap-4 py-2 border-b-slate-700/10 peer-focus:border-b-accent',
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'alpha',
+  },
+});
+
+export const simpleStyle = tv({
+  slots: {
+    container: containerStyle({
+      className: 'w-full',
+    }),
+    span: '',
+    input:
+      'w-full ring-0 placeholder:text-placeholder focus:ring-0 border-2 border-transparent text-input',
+  },
+  variants: {
+    variant: {
+      alpha: {
+        container: 'grid gap-1.5',
+        input: 'rounded-md border-slate-700/10 focus:border-accent',
+      },
+      beta: {
+        container: 'grid gap-0',
+        input:
+          'px-0 focus:border-transparent focus:border-b-accent border-b-slate-700/10',
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'alpha',
+  },
+});
+
+export const toggleStyle = tv({
+  slots: {
+    container: containerStyle({
+      className: 'w-full cursor-pointer',
+    }),
+    span: '',
+    input: 'relative outline-none ring-2 ring-transparent',
+    thumb: 'block transition-transform duration-100 will-change-transform',
+  },
+  variants: {
+    variant: {
+      alpha: {
+        container: 'flex justify-between',
+        input:
+          'h-6 w-9 rounded-full bg-primary border border-black ring-2 focus:border-transparent focus:ring-accent data-[state=checked]:bg-white',
+        thumb:
+          'h-4 w-4 translate-x-0.5 rounded-full bg-white data-[state=checked]:translate-x-4 data-[state=checked]:bg-primary',
+      },
+      beta: {
+        container: 'flex justify-between',
+        input:
+          'h-6 w-9 rounded-full bg-primary border border-black ring-2 focus:border-transparent focus:ring-accent data-[state=checked]:bg-white',
+        thumb:
+          'h-4 w-4 translate-x-0.5 rounded-full bg-white data-[state=checked]:translate-x-4 data-[state=checked]:bg-primary',
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'alpha',
+  },
+});
+
+export const submitStyle = tv({
+  base: 'w-max max-w-full mt-2',
+  variants: {
+    variant: {
+      alpha: 'bg-primary text-white px-4 py-2 rounded-md',
+      beta: 'bg-primary text-white px-4 py-2',
+    },
+  },
+  defaultVariants: {
+    variant: 'alpha',
+  },
+});

package/lib/components/Input/checkbox.tsx

@@ -1,35 +1,32 @@
 import type { FC } from 'react';
 import type { VariantProps } from 'tailwind-variants';
 
-import { useMemo } from 'react';
-import { useController } from 'react-hook-form';
+import { useController, useFormContext } from 'react-hook-form';
 import { CheckIcon } from '@heroicons/react/24/outline';
 import * as RdxCheckbox from '@radix-ui/react-checkbox';
 
-import type { CommonProps } from '@twintag-form/types';
-
 import { Label } from '@twintag-form/components';
-import { checkboxStyle } from '@twintag-form/styles';
+import { type CommonProps } from './__props';
+import { checkboxStyle } from './__styles';
 
 type Props = CommonProps<VariantProps<typeof checkboxStyle>['variant']>;
 
-const Checkbox: FC<Props> = ({ useForm, label, bind, options }) => {
-  const { container, checkbox } = useMemo(() => {
-    if (options?.variant) return checkboxStyle({ variant: options.variant });
-    return checkboxStyle();
-  }, []);
+const Checkbox: FC<Props> = ({ label, bind, options }) => {
+  const { control } = useFormContext();
 
   const {
     field: { ref, value, onChange },
   } = useController({
+    control,
     name: bind,
-    control: useForm ? useForm.control : undefined,
     defaultValue: false,
     rules: {
       required: options?.optionalField ? false : `${label} is required`,
     },
   });
 
+  const { container, checkbox } = checkboxStyle({ variant: options?.variant });
+
   return (
     <label className={container()}>
       <RdxCheckbox.Root

package/lib/components/Input/file.tsx

@@ -1,34 +1,31 @@
 import type { FC } from 'react';
 import type { VariantProps } from 'tailwind-variants';
 
-import { useMemo } from 'react';
-import { useController } from 'react-hook-form';
+import { useController, useFormContext } from 'react-hook-form';
 import { CloudArrowUpIcon } from '@heroicons/react/24/outline';
 
-import type { CommonProps } from '@twintag-form/types';
-
 import { Label } from '@twintag-form/components';
-import { fileStyle } from '@twintag-form/styles';
+import { type CommonProps } from './__props';
+import { fileStyle } from './__styles';
 
 type Props = CommonProps<VariantProps<typeof fileStyle>['variant']>;
 
-const File: FC<Props> = ({ useForm, label, bind, options }) => {
-  const { container, span, input } = useMemo(() => {
-    if (options?.variant) return fileStyle({ variant: options?.variant });
-    return fileStyle();
-  }, []);
+const File: FC<Props> = ({ label, bind, options }) => {
+  const { control } = useFormContext();
 
   const {
     field: { ref, value, onChange },
   } = useController({
+    control,
     name: bind,
-    control: useForm ? useForm.control : undefined,
     defaultValue: null,
     rules: {
       required: options?.optionalField ? false : `${label} is required`,
     },
   });
 
+  const { container, span, input } = fileStyle({ variant: options?.variant });
+
   return (
     <label className={container()}>
       {label ? (
@@ -56,7 +53,7 @@ const File: FC<Props> = ({ useForm, label, bind, options }) => {
         className={`${input()} ${
           value && value.length > 0
             ? 'border-primary text-input'
-            : 'border-slate-700/10 text-placeholder'
+            : 'text-placeholder border-slate-700/10'
         }`}
       >
         <span className='grid'>

package/lib/components/Input/simple.tsx

@@ -1,20 +1,18 @@
 import type { FC } from 'react';
 import type { VariantProps } from 'tailwind-variants';
 
-import { useMemo } from 'react';
-
-import type { CommonProps } from '@twintag-form/types';
+import { useFormContext } from 'react-hook-form';
 
 import { Label } from '@twintag-form/components';
-import { simpleStyle } from '@twintag-form/styles';
+import { type CommonProps } from './__props';
+import { simpleStyle } from './__styles';
 
 type Props = CommonProps<VariantProps<typeof simpleStyle>['variant']>;
 
-const Simple: FC<Props> = ({ useForm, label, bind, options }) => {
-  const { container, span, input } = useMemo(() => {
-    if (options?.variant) return simpleStyle({ variant: options.variant });
-    return simpleStyle();
-  }, []);
+const Simple: FC<Props> = ({ label, bind, options }) => {
+  const { container, span, input } = simpleStyle({ variant: options?.variant });
+
+  const { register } = useFormContext();
 
   return (
     <label className={container()}>
@@ -30,7 +28,7 @@ const Simple: FC<Props> = ({ useForm, label, bind, options }) => {
         type='text'
         placeholder={options?.placeholder || 'Write here...'}
         className={input()}
-        {...useForm!.register(bind, {
+        {...register(bind, {
           required: options?.optionalField ? false : `${label} is required`,
         })}
       />

package/lib/components/Input/submit.tsx

@@ -1,19 +1,13 @@
 import type { FC } from 'react';
 import type { VariantProps } from 'tailwind-variants';
 
-import { useMemo } from 'react';
-
-import type { CommonProps } from '@twintag-form/types';
-
-import { submitStyle } from '@twintag-form/styles';
+import { type CommonProps } from './__props';
+import { submitStyle } from './__styles';
 
 type Props = CommonProps<VariantProps<typeof submitStyle>['variant']>;
 
 const Submit: FC<Props> = ({ label, options }) => {
-  const style = useMemo(() => {
-    if (options?.variant) return submitStyle({ variant: options.variant });
-    return submitStyle();
-  }, []);
+  const style = submitStyle({ variant: options?.variant });
 
   return (
     <div className='flex w-full justify-center'>

package/lib/components/Input/textarea.tsx

@@ -1,20 +1,18 @@
 import type { FC } from 'react';
 import type { VariantProps } from 'tailwind-variants';
 
-import { useMemo } from 'react';
-
-import type { CommonProps } from '@twintag-form/types';
+import { useFormContext } from 'react-hook-form';
 
 import { Label } from '@twintag-form/components';
-import { simpleStyle } from '@twintag-form/styles';
+import { type CommonProps } from './__props';
+import { simpleStyle } from './__styles';
 
 type Props = CommonProps<VariantProps<typeof simpleStyle>['variant']>;
 
-const Textarea: FC<Props> = ({ useForm, label, bind, options }) => {
-  const { container, span, input } = useMemo(() => {
-    if (options?.variant) return simpleStyle({ variant: options.variant });
-    return simpleStyle();
-  }, []);
+const Textarea: FC<Props> = ({ label, bind, options }) => {
+  const { register } = useFormContext();
+
+  const { container, span, input } = simpleStyle({ variant: options?.variant });
 
   return (
     <label className={container()}>
@@ -29,7 +27,7 @@ const Textarea: FC<Props> = ({ useForm, label, bind, options }) => {
       <textarea
         className={input()}
         placeholder={options?.placeholder || 'Write here...'}
-        {...useForm!.register(bind, {
+        {...register(bind, {
           required: options?.optionalField ? false : `${label} is required`,
         })}
       />

package/lib/components/Input/toggle.tsx

@@ -1,34 +1,33 @@
 import type { FC } from 'react';
 import type { VariantProps } from 'tailwind-variants';
 
-import { useMemo } from 'react';
-import { useController } from 'react-hook-form';
+import { useController, useFormContext } from 'react-hook-form';
 import * as Switch from '@radix-ui/react-switch';
 
-import type { CommonProps } from '@twintag-form/types';
-
 import { Label } from '@twintag-form/components';
-import { toggleStyle } from '@twintag-form/styles';
+import { type CommonProps } from './__props';
+import { toggleStyle } from './__styles';
 
 type Props = CommonProps<VariantProps<typeof toggleStyle>['variant']>;
 
-const Toggle: FC<Props> = ({ useForm, label, bind, options }) => {
-  const { container, span, input, thumb } = useMemo(() => {
-    if (options?.variant) return toggleStyle({ variant: options.variant });
-    return toggleStyle();
-  }, []);
+const Toggle: FC<Props> = ({ label, bind, options }) => {
+  const { control } = useFormContext();
 
   const {
     field: { ref, value, onChange },
   } = useController({
+    control,
     name: bind,
-    control: useForm ? useForm.control : undefined,
     defaultValue: false,
     rules: {
       required: options?.optionalField ? false : `${label} is required`,
     },
   });
 
+  const { container, span, input, thumb } = toggleStyle({
+    variant: options?.variant,
+  });
+
   return (
     <label className={container()}>
       {label ? (

package/lib/components/Label/index.tsx

@@ -15,7 +15,8 @@ const Label: FC<Props> = ({ className, required, children }) => {
 
   return (
     <span className={style}>
-      {children} {required ? '*' : ''}
+      {children}{' '}
+      {required ? <span className='text-xs text-red-500'>*</span> : <></>}
     </span>
   );
 };

package/lib/components/index.tsx

@@ -1,6 +1,4 @@
-import Form from './Form';
-import Input from './Input';
-import Label from './Label';
-import Category from './Category';
-
-export { Form, Input, Label, Category };
+export { default as Form } from './Form';
+export { default as Input } from './Input';
+export { default as Label } from './Label';
+export { default as Category } from './Category';