@twintag/twintag-form 0.6.0 → 1.0.0-beta.1

package/lib/components/Input/file.tsx

@@ -1,84 +1,76 @@
 import type { FC } from 'react';
-import type { VariantProps } from 'tailwind-variants';
+import type { Props } from '@twintag/twintag-form/types';
 
-import { useController, useFormContext } from 'react-hook-form';
-import { CloudArrowUpIcon } from '@heroicons/react/24/outline';
+import { AsteriskIcon } from 'lucide-react';
+import { useFormContext } from 'react-hook-form';
 
-import { Label } from '@twintag/twintag-form/components';
-import { type CommonProps } from './__props';
-import { fileStyle } from './__styles';
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@twintag/twintag-form/common/form';
+import { Input } from '@twintag/twintag-form/common/input';
 
-type Props = CommonProps<VariantProps<typeof fileStyle>['variant']>;
-
-const File: FC<Props> = ({ label, bind, options }) => {
+export const File: FC<Props> = ({ label, bind, options }) => {
   const { control } = useFormContext();
 
-  const {
-    field: { ref, value, onChange },
-  } = useController({
-    control,
-    name: bind,
-    defaultValue: null,
-    rules: {
-      required: options?.optionalField ? false : `${label} is required`,
-    },
-  });
-
-  const { container, span, input } = fileStyle({ variant: options?.variant });
+  const isOptional = options?.optionalField;
 
   return (
-    <label className={container()}>
-      {label ? (
-        <Label className={span()} required={!options?.optionalField}>
-          {label}
-        </Label>
-      ) : (
-        <></>
-      )}
-
-      <input
-        ref={ref}
-        type='file'
-        multiple
-        capture='environment'
-        onChange={(e) => {
-          if (e.target.files) {
-            onChange(e.target.files);
-          }
-        }}
-        className='peer sr-only'
-      />
-
-      <span
-        className={`${input()} ${
-          value && value.length > 0
-            ? 'border-primary text-input'
-            : 'text-placeholder border-slate-700/10'
-        }`}
-      >
-        <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}
+    <FormField
+      defaultValue=''
+      control={control}
+      name={bind}
+      rules={{
+        required: isOptional ? false : options?.error ?? true,
+      }}
+      render={({ field, formState }) => (
+        <FormItem>
+          <div className='space-y-0.5'>
+            <FormLabel htmlFor={bind}>
+              {label}
+              {!isOptional ? (
+                <span className='ml-0.5 inline-block'>
+                  <AsteriskIcon className='h-3 w-3 text-destructive' />
                 </span>
-              );
-            })
-          ) : (
-            <span className='block max-w-full overflow-hidden text-ellipsis whitespace-nowrap'>
-              {options?.placeholder || 'No file selected'}
-            </span>
-          )}
-        </span>
+              ) : (
+                <></>
+              )}
+            </FormLabel>
+            {options?.description ? (
+              <FormDescription>{options.description}</FormDescription>
+            ) : (
+              <></>
+            )}
+          </div>
+          <FormControl>
+            <Input
+              ref={(el) => {
+                field.ref(el);
 
-        <CloudArrowUpIcon className='h-6 w-6 min-w-[1.5rem]' />
-      </span>
-    </label>
+                if (el && formState.isSubmitSuccessful) {
+                  el.value = '';
+                }
+              }}
+              id={bind}
+              type='file'
+              name={field.name}
+              capture='environment'
+              multiple
+              onBlur={field.onBlur}
+              onChange={(e) => {
+                if (e.target.files) {
+                  field.onChange(e.target.files);
+                }
+              }}
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
   );
 };
-
-export default File;

package/lib/components/Input/index.tsx

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

package/lib/components/Input/radiogroup.tsx

@@ -0,0 +1,84 @@
+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 {
+  RadioGroup as CommonRadioGroup,
+  RadioGroupItem,
+} from '@twintag/twintag-form/common/radiogroup';
+
+export const RadioGroup: FC<Props> = ({ label, bind, items, options }) => {
+  const { control } = useFormContext();
+
+  const isOptional = options?.optionalField;
+
+  return (
+    <FormField
+      control={control}
+      name={bind}
+      defaultValue=''
+      rules={{
+        required: isOptional ? false : options?.error ?? true,
+      }}
+      render={({ field }) => (
+        <FormItem className='space-y-3'>
+          <div className='space-y-0.5'>
+            <FormLabel>
+              {label}
+              {!isOptional ? (
+                <span className='ml-0.5 inline-block'>
+                  <AsteriskIcon className='h-3 w-3 text-destructive' />
+                </span>
+              ) : (
+                <></>
+              )}
+            </FormLabel>
+            {options?.description ? (
+              <FormDescription>{options.description}</FormDescription>
+            ) : (
+              <></>
+            )}
+          </div>
+          <FormControl>
+            <CommonRadioGroup
+              ref={field.ref}
+              value={field.value as string}
+              onValueChange={field.onChange}
+            >
+              {items?.map((item) => {
+                if (item.type === 'item') {
+                  return (
+                    <FormItem
+                      key={item.id}
+                      className='flex items-center space-x-3 space-y-0'
+                    >
+                      <FormControl>
+                        <RadioGroupItem value={item.bind} />
+                      </FormControl>
+                      <FormLabel className='font-normal'>
+                        {item.label}
+                      </FormLabel>
+                    </FormItem>
+                  );
+                }
+
+                return <></>;
+              })}
+            </CommonRadioGroup>
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+};

package/lib/components/Input/simple.tsx

@@ -1,39 +1,61 @@
 import type { FC } from 'react';
-import type { VariantProps } from 'tailwind-variants';
+import type { Props } from '@twintag/twintag-form/types';
 
+import { AsteriskIcon } from 'lucide-react';
 import { useFormContext } from 'react-hook-form';
 
-import { Label } from '@twintag/twintag-form/components';
-import { type CommonProps } from './__props';
-import { simpleStyle } from './__styles';
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@twintag/twintag-form/common/form';
+import { Input } from '@twintag/twintag-form/common/input';
 
-type Props = CommonProps<VariantProps<typeof simpleStyle>['variant']>;
+export const Simple: FC<Props> = ({ label, bind, options }) => {
+  const { control } = useFormContext();
 
-const Simple: FC<Props> = ({ label, bind, options }) => {
-  const { container, span, input } = simpleStyle({ variant: options?.variant });
-
-  const { register } = useFormContext();
+  const isOptional = options?.optionalField;
 
   return (
-    <label className={container()}>
-      {label ? (
-        <Label className={span()} required={!options?.optionalField}>
-          {label}
-        </Label>
-      ) : (
-        <></>
+    <FormField
+      control={control}
+      name={bind}
+      defaultValue=''
+      rules={{
+        required: isOptional ? false : options?.error ?? true,
+      }}
+      render={({ field }) => (
+        <FormItem>
+          <div className='space-y-0.5'>
+            <FormLabel>
+              {label}
+              {!isOptional ? (
+                <span className='ml-0.5 inline-block'>
+                  <AsteriskIcon className='h-3 w-3 text-destructive' />
+                </span>
+              ) : (
+                <></>
+              )}
+            </FormLabel>
+            {options?.description ? (
+              <FormDescription>{options.description}</FormDescription>
+            ) : (
+              <></>
+            )}
+          </div>
+          <FormControl>
+            <Input
+              type='text'
+              placeholder={options?.placeholder ?? 'Write here...'}
+              {...field}
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
       )}
-
-      <input
-        type='text'
-        placeholder={options?.placeholder || 'Write here...'}
-        className={input()}
-        {...register(bind, {
-          required: options?.optionalField ? false : `${label} is required`,
-        })}
-      />
-    </label>
+    />
   );
 };
-
-export default Simple;

package/lib/components/Input/submit.tsx

@@ -1,21 +1,12 @@
 import type { FC } from 'react';
-import type { VariantProps } from 'tailwind-variants';
+import type { Props } from '@twintag/twintag-form/types';
 
-import { type CommonProps } from './__props';
-import { submitStyle } from './__styles';
-
-type Props = CommonProps<VariantProps<typeof submitStyle>['variant']>;
-
-const Submit: FC<Props> = ({ label, options }) => {
-  const style = submitStyle({ variant: options?.variant });
+import { Button } from '@twintag/twintag-form/common/button';
 
+export const Submit: FC<Props> = ({ label }) => {
   return (
     <div className='flex w-full justify-center'>
-      <button type='submit' className={style}>
-        {label}
-      </button>
+      <Button>{label}</Button>
     </div>
   );
 };
-
-export default Submit;

package/lib/components/Input/textarea.tsx

@@ -1,38 +1,60 @@
 import type { FC } from 'react';
-import type { VariantProps } from 'tailwind-variants';
+import type { Props } from '@twintag/twintag-form/types';
 
+import { AsteriskIcon } from 'lucide-react';
 import { useFormContext } from 'react-hook-form';
 
-import { Label } from '@twintag/twintag-form/components';
-import { type CommonProps } from './__props';
-import { simpleStyle } from './__styles';
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@twintag/twintag-form/common/form';
+import { Textarea as CommonTextarea } from '@twintag/twintag-form/common/textarea';
 
-type Props = CommonProps<VariantProps<typeof simpleStyle>['variant']>;
+export const Textarea: FC<Props> = ({ label, bind, options }) => {
+  const { control } = useFormContext();
 
-const Textarea: FC<Props> = ({ label, bind, options }) => {
-  const { register } = useFormContext();
-
-  const { container, span, input } = simpleStyle({ variant: options?.variant });
+  const isOptional = options?.optionalField;
 
   return (
-    <label className={container()}>
-      {label ? (
-        <Label className={span()} required={!options?.optionalField}>
-          {label}
-        </Label>
-      ) : (
-        <></>
+    <FormField
+      control={control}
+      name={bind}
+      defaultValue=''
+      rules={{
+        required: isOptional ? false : options?.error ?? true,
+      }}
+      render={({ field }) => (
+        <FormItem>
+          <div className='space-y-0.5'>
+            <FormLabel>
+              {label}
+              {!isOptional ? (
+                <span className='ml-0.5 inline-block'>
+                  <AsteriskIcon className='h-3 w-3 text-destructive' />
+                </span>
+              ) : (
+                <></>
+              )}
+            </FormLabel>
+            {options?.description ? (
+              <FormDescription>{options.description}</FormDescription>
+            ) : (
+              <></>
+            )}
+          </div>
+          <FormControl>
+            <CommonTextarea
+              {...field}
+              placeholder={options?.placeholder ?? 'Write here...'}
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
       )}
-
-      <textarea
-        className={input()}
-        placeholder={options?.placeholder || 'Write here...'}
-        {...register(bind, {
-          required: options?.optionalField ? false : `${label} is required`,
-        })}
-      />
-    </label>
+    />
   );
 };
-
-export default Textarea;

package/lib/components/Input/toggle.tsx

@@ -1,56 +1,65 @@
 import type { FC } from 'react';
-import type { VariantProps } from 'tailwind-variants';
+import type { Props } from '@twintag/twintag-form/types';
 
-import { useController, useFormContext } from 'react-hook-form';
-import * as Switch from '@radix-ui/react-switch';
+import { AsteriskIcon } from 'lucide-react';
+import { useFormContext } from 'react-hook-form';
 
-import { Label } from '@twintag/twintag-form/components';
-import { type CommonProps } from './__props';
-import { toggleStyle } from './__styles';
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@twintag/twintag-form/common/form';
+import { Switch } from '@twintag/twintag-form/common/switch';
 
-type Props = CommonProps<VariantProps<typeof toggleStyle>['variant']>;
-
-const Toggle: FC<Props> = ({ label, bind, options }) => {
+export const Toggle: FC<Props> = ({ label, bind, options }) => {
   const { control } = useFormContext();
 
-  const {
-    field: { ref, value, onChange },
-  } = useController({
-    control,
-    name: bind,
-    defaultValue: false,
-    rules: {
-      required: options?.optionalField ? false : `${label} is required`,
-    },
-  });
-
-  const { container, span, input, thumb } = toggleStyle({
-    variant: options?.variant,
-  });
+  const isOptional = options?.optionalField;
 
   return (
-    <label className={container()}>
-      {label ? (
-        <Label className={span()} required={!options?.optionalField}>
-          {label}
-        </Label>
-      ) : (
-        <></>
+    <FormField
+      control={control}
+      name={bind}
+      defaultValue={false}
+      rules={{
+        required: isOptional ? false : options?.error ?? true,
+      }}
+      render={({ field }) => (
+        <FormItem>
+          <div className='flex flex-row items-center justify-between'>
+            <div className='space-y-0.5'>
+              <FormLabel htmlFor={bind}>
+                {label}
+                {!isOptional ? (
+                  <span className='ml-0.5 inline-block'>
+                    <AsteriskIcon className='h-3 w-3 text-destructive' />
+                  </span>
+                ) : (
+                  <></>
+                )}
+              </FormLabel>
+              {options?.description ? (
+                <FormDescription>{options.description}</FormDescription>
+              ) : (
+                <></>
+              )}
+            </div>
+            <FormControl>
+              <Switch
+                id={bind}
+                ref={field.ref}
+                checked={field.value as boolean}
+                onCheckedChange={field.onChange}
+                className='!my-0'
+              />
+            </FormControl>
+          </div>
+          <FormMessage />
+        </FormItem>
       )}
-
-      <Switch.Root
-        id={bind}
-        ref={ref}
-        checked={value}
-        className={input()}
-        onCheckedChange={(state) => {
-          onChange(state);
-        }}
-      >
-        <Switch.Thumb className={thumb()} />
-      </Switch.Root>
-    </label>
+    />
   );
 };
-
-export default Toggle;

package/lib/components/Render/index.tsx

@@ -0,0 +1,30 @@
+import type { FC } from 'react';
+import type { ParsedJsonComponent } from '@twintag/twintag-form/types';
+
+type Props = {
+  config: ParsedJsonComponent;
+};
+
+export const Renderer: FC<Props> = ({ config }) => {
+  const { id, type, items, comp, ...rest } = config;
+
+  if (!type || !comp) return <></>;
+
+  const Component = comp;
+
+  if (items && Array.isArray(items) && items.length > 0) {
+    if (type === 'category') {
+      return (
+        <Component key={id} {...rest}>
+          {items.map((item) => (
+            <Renderer key={item.id} config={{ ...item }} />
+          ))}
+        </Component>
+      );
+    }
+
+    return <Component key={id} items={items} {...rest} />;
+  }
+
+  return <Component key={id} {...rest} />;
+};