@twintag/twintag-form 0.3.1 → 0.4.1

package/lib/__stories__/Form.stories.tsx

@@ -3,6 +3,8 @@ import TwintagForm from '../index';
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { withActions } from '@storybook/addon-actions/decorator';
+
 const meta: Meta<typeof TwintagForm> = {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
@@ -10,6 +12,12 @@ const meta: Meta<typeof TwintagForm> = {
    */
   title: 'Form',
   component: TwintagForm,
+  parameters: {
+    actions: {
+      handles: ['twintag-form-valid', 'twintag-form-invalid'],
+    },
+  },
+  decorators: [withActions as any],
 };
 
 export default meta;
@@ -20,14 +28,17 @@ export const Example: Story = {
   args: {
     config: [
       {
-        type: 'input:toggle',
-        label: 'Email',
-        bind: 'email',
-        options: { optionalField: true },
+        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' },
+        ],
       },
-      { type: 'input', label: 'Test', bind: 'test' },
       { 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' },
     ],
     options: {

package/lib/components/Category/index.tsx

@@ -0,0 +1,29 @@
+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 '@twintag-form/types';
+
+import { categoryStyle } from '@twintag-form/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();
+  }, []);
+
+  return (
+    <section className={container()}>
+      {label ? <span className={span()}>{label}</span> : <></>}
+
+      <div className={items()}>{children}</div>
+    </section>
+  );
+};
+
+export default Category;

package/lib/components/Form/index.tsx

@@ -1,3 +1,4 @@
+import type { FC } from 'react';
 import type { FieldValues } from 'react-hook-form';
 import type { WithChildren } from 'twintag-types/dom';
 
@@ -12,7 +13,7 @@ type Props = {
   };
 } & WithChildren;
 
-const Form = ({ children, options }: Props) => {
+const Form: FC<Props> = ({ children, options }) => {
   const formRef = useRef<HTMLFormElement>(null);
 
   const {
@@ -71,10 +72,10 @@ const Form = ({ children, options }: Props) => {
   return (
     <form
       ref={formRef}
-      className='font-fftext relative'
+      className='font-ff-text relative'
       onSubmit={handleSubmit(onValid, onInvalid)}
     >
-      <div className='grid w-auto gap-4'>
+      <div className='grid w-auto'>
         <RegisterInputs useForm={{ register, control }}>
           {children}
         </RegisterInputs>

package/lib/components/Form/register.tsx

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

package/lib/components/Input/checkbox.tsx

@@ -1,3 +1,4 @@
+import type { FC } from 'react';
 import type { VariantProps } from 'tailwind-variants';
 
 import { useMemo } from 'react';
@@ -12,16 +13,16 @@ import { checkboxStyle } from '@twintag-form/styles';
 
 type Props = CommonProps<VariantProps<typeof checkboxStyle>['variant']>;
 
-const Checkbox = ({ useForm, label, bind, options }: Props) => {
+const Checkbox: FC<Props> = ({ useForm, label, bind, options }) => {
   const { container, checkbox } = useMemo(() => {
     if (options?.variant) return checkboxStyle({ variant: options.variant });
     return checkboxStyle();
   }, []);
 
   const {
-    field: { onChange, value },
+    field: { ref, value, onChange },
   } = useController({
-    name: bind as string,
+    name: bind,
     control: useForm ? useForm.control : undefined,
     defaultValue: false,
     rules: {
@@ -32,6 +33,7 @@ const Checkbox = ({ useForm, label, bind, options }: Props) => {
   return (
     <label className={container()}>
       <RdxCheckbox.Root
+        ref={ref}
         className={checkbox()}
         defaultChecked={value}
         onCheckedChange={(state) => {
@@ -44,7 +46,7 @@ const Checkbox = ({ useForm, label, bind, options }: Props) => {
       </RdxCheckbox.Root>
 
       <Label className='text-label' required={!options?.optionalField}>
-        {label as string}
+        {label}
       </Label>
     </label>
   );

package/lib/components/Input/file.tsx

@@ -1,3 +1,4 @@
+import type { FC } from 'react';
 import type { VariantProps } from 'tailwind-variants';
 
 import { useMemo } from 'react';
@@ -11,16 +12,16 @@ import { fileStyle } from '@twintag-form/styles';
 
 type Props = CommonProps<VariantProps<typeof fileStyle>['variant']>;
 
-const File = ({ useForm, label, bind, options }: Props) => {
+const File: FC<Props> = ({ useForm, label, bind, options }) => {
   const { container, span, input } = useMemo(() => {
     if (options?.variant) return fileStyle({ variant: options?.variant });
     return fileStyle();
   }, []);
 
   const {
-    field: { onChange, value },
+    field: { ref, value, onChange },
   } = useController({
-    name: bind as string,
+    name: bind,
     control: useForm ? useForm.control : undefined,
     defaultValue: null,
     rules: {
@@ -32,13 +33,14 @@ const File = ({ useForm, label, bind, options }: Props) => {
     <label className={container()}>
       {label ? (
         <Label className={span()} required={!options?.optionalField}>
-          {label as string}
+          {label}
         </Label>
       ) : (
         <></>
       )}
 
       <input
+        ref={ref}
         type='file'
         multiple
         capture='environment'
@@ -54,7 +56,7 @@ const File = ({ useForm, label, bind, options }: Props) => {
         className={`${input()} ${
           value && value.length > 0
             ? 'border-primary text-input'
-            : 'border-slate-700/10 text-slate-400'
+            : 'border-slate-700/10 text-placeholder'
         }`}
       >
         <span className='grid'>

package/lib/components/Input/index.tsx

@@ -1,3 +1,5 @@
+import type { FC } from 'react';
+
 import Simple from './simple';
 import Textarea from './textarea';
 import Toggle from './toggle';
@@ -5,7 +7,7 @@ import File from './file';
 import Submit from './submit';
 import Checkbox from './checkbox';
 
-export const Inputs = new Map()
+const Inputs = new Map()
   .set('simple', Simple)
   .set('textarea', Textarea)
   .set('toggle', Toggle)
@@ -19,7 +21,7 @@ type Props = {
   bind?: string;
 };
 
-const Input = ({ subtype = 'simple', ...rest }: Props) => {
+const Input: FC<Props> = ({ subtype = 'simple', ...rest }) => {
   const InputComponent = Inputs.get(subtype);
 
   if (!InputComponent) return <></>;

package/lib/components/Input/simple.tsx

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

package/lib/components/Input/submit.tsx

@@ -1,3 +1,4 @@
+import type { FC } from 'react';
 import type { VariantProps } from 'tailwind-variants';
 
 import { useMemo } from 'react';
@@ -8,7 +9,7 @@ import { submitStyle } from '@twintag-form/styles';
 
 type Props = CommonProps<VariantProps<typeof submitStyle>['variant']>;
 
-const Submit = ({ label, options }: Props) => {
+const Submit: FC<Props> = ({ label, options }) => {
   const style = useMemo(() => {
     if (options?.variant) return submitStyle({ variant: options.variant });
     return submitStyle();
@@ -17,7 +18,7 @@ const Submit = ({ label, options }: Props) => {
   return (
     <div className='flex w-full justify-center'>
       <button type='submit' className={style}>
-        {label as string}
+        {label}
       </button>
     </div>
   );

package/lib/components/Input/textarea.tsx

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

package/lib/components/Input/toggle.tsx

@@ -1,3 +1,4 @@
+import type { FC } from 'react';
 import type { VariantProps } from 'tailwind-variants';
 
 import { useMemo } from 'react';
@@ -11,16 +12,16 @@ import { toggleStyle } from '@twintag-form/styles';
 
 type Props = CommonProps<VariantProps<typeof toggleStyle>['variant']>;
 
-const Toggle = ({ useForm, label, bind, options }: Props) => {
+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 {
-    field: { onChange, value },
+    field: { ref, value, onChange },
   } = useController({
-    name: bind as string,
+    name: bind,
     control: useForm ? useForm.control : undefined,
     defaultValue: false,
     rules: {
@@ -32,14 +33,15 @@ const Toggle = ({ useForm, label, bind, options }: Props) => {
     <label className={container()}>
       {label ? (
         <Label className={span()} required={!options?.optionalField}>
-          {label as string}
+          {label}
         </Label>
       ) : (
         <></>
       )}
 
       <Switch.Root
-        id={bind as string}
+        id={bind}
+        ref={ref}
         checked={value}
         className={input()}
         onCheckedChange={(state) => {

package/lib/components/Label/index.tsx

@@ -1,3 +1,4 @@
+import type { FC } from 'react';
 import type { WithChildren } from 'twintag-types/dom';
 
 import { labelStyle } from '@twintag-form/styles';
@@ -7,7 +8,7 @@ type Props = {
   className?: string;
 } & WithChildren;
 
-const Label = ({ className, required, children }: Props) => {
+const Label: FC<Props> = ({ className, required, children }) => {
   const style = labelStyle({
     className,
   });

package/lib/components/index.tsx

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

package/lib/index.tsx

@@ -2,8 +2,9 @@ import type { FC, ReactNode } from 'react';
 
 import { LabelToString } from 'twintag-types/dom';
 
-import Input from '@twintag-form/components/Input';
 import Form from '@twintag-form/components/Form';
+import Input from '@twintag-form/components/Input';
+import Category from '@twintag-form/components/Category';
 
 type Config = {
   key?: number;
@@ -25,9 +26,9 @@ type Component = {
 
 type Format = {
   $config: Config;
-  $blocks?: Map<string, any>;
-  $containers?: Map<string, any>;
-  $available?: Map<string, any>;
+  $blocks?: Map<string, FC<Component>>;
+  $containers?: Map<string, FC<Component>>;
+  $available?: Map<string, FC<Component>>;
 };
 
 const format = ({ $config, $blocks, $containers, $available }: Format) => {
@@ -77,8 +78,8 @@ const format = ({ $config, $blocks, $containers, $available }: Format) => {
 
 type Params = {
   $config: Config;
-  $blocks?: Map<string, any>;
-  $containers?: Map<string, any>;
+  $blocks?: Map<string, FC<Component>>;
+  $containers?: Map<string, FC<Component>>;
 };
 
 const useConfig = (params: Params) => {
@@ -94,7 +95,7 @@ const useConfig = (params: Params) => {
 };
 
 const blocks = new Map().set('input', Input);
-const containers = new Map().set('form', Form);
+const containers = new Map().set('form', Form).set('category', Category);
 
 type RendererProps = {
   config: Config & {
@@ -103,30 +104,34 @@ type RendererProps = {
   };
 };
 
-const FormRenderer = ({ config }: RendererProps) => {
+const FormRenderer: FC<RendererProps> = ({ config }) => {
   const { key, type, subtype, label, bind, items, block, container, ...rest } =
     config;
 
   if (!type) return null;
 
-  if (container && items && Array.isArray(items)) {
+  if (container) {
     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,
-              },
-            }}
-          />
-        ))}
+        {items && Array.isArray(items) ? (
+          items.map((item, idx) => (
+            <FormRenderer
+              key={idx}
+              config={{
+                ...rest,
+                ...item,
+                options: {
+                  ...item.options,
+                  variant: rest.options?.variant,
+                },
+              }}
+            />
+          ))
+        ) : (
+          <></>
+        )}
       </Component>
     );
   }
@@ -156,7 +161,7 @@ type Props = {
   };
 };
 
-const TwintagForm = ({ config, options }: Props) => {
+const TwintagForm: FC<Props> = ({ config, options }) => {
   const __config = useConfig({
     $blocks: blocks,
     $containers: containers,

package/lib/styles.ts

@@ -1,12 +1,29 @@
 import { tv } from 'tailwind-variants';
 
 export const labelStyle = tv({
-  base: 'font-fftext text-label',
+  base: 'text-label',
+});
+
+export const containerStyle = tv({
+  base: 'my-2',
+});
+
+export const categoryStyle = tv({
+  slots: {
+    container: 'w-full grid mt-4 first:mt-0',
+    span: 'text-category-label',
+    items: 'grid mt-2 mb-4 empty:mb-0',
+  },
+  variants: {
+    variant: {},
+  },
 });
 
 export const checkboxStyle = tv({
   slots: {
-    container: 'flex gap-4 items-center w-full',
+    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',
   },
@@ -27,7 +44,9 @@ export const checkboxStyle = tv({
 
 export const fileStyle = tv({
   slots: {
-    container: 'w-full block',
+    container: containerStyle({
+      className: 'w-full block',
+    }),
     span: '',
     input:
       'w-full cursor-pointer ring-0 focus:ring-0 border-2 border-transparent',
@@ -53,10 +72,11 @@ export const fileStyle = tv({
 
 export const simpleStyle = tv({
   slots: {
-    container: 'w-full',
+    container: containerStyle({
+      className: 'w-full',
+    }),
     span: '',
-    input:
-      'w-full ring-0 placeholder:text-slate-400 focus:ring-0 border-2 border-transparent text-input',
+    input: 'w-full ring-0 placeholder:text-placeholder focus:ring-0 border-2 border-transparent text-input',
   },
   variants: {
     variant: {
@@ -76,22 +96,11 @@ export const simpleStyle = tv({
   },
 });
 
-export const submitStyle = tv({
-  base: 'w-max max-w-full',
-  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',
-  },
-});
-
 export const toggleStyle = tv({
   slots: {
-    container: 'w-full cursor-pointer',
+    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',
@@ -118,3 +127,16 @@ export const toggleStyle = tv({
     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',
+  },
+});