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

package/dist/types/index.d.ts

@@ -0,0 +1,33 @@
+import type { ElementType } from 'react';
+export type TwintagFormContext = {
+    variant?: 'default' | 'beta';
+    components: Map<string, ElementType>;
+};
+type RawProps = Partial<{
+    bind: string;
+    subtype: string;
+    label: string;
+    options: Partial<{
+        description: string;
+        placeholder: string;
+        error: string;
+        optionalField: boolean;
+    }>;
+}>;
+export type RawJsonComponent = RawProps & {
+    type: string;
+    children?: RawJsonComponent[];
+} & {
+    props?: RawProps;
+};
+export type Props = Omit<RawProps, 'subtype'> & {
+    bind: string;
+    items?: ParsedJsonComponent[];
+};
+export type ParsedJsonComponent = Props & {
+    id: string;
+    type: string;
+    subtype?: string;
+    comp?: ElementType;
+};
+export {};

package/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Twintag Form</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./dev/main.tsx"></script>
+  </body>
+</html>
+

package/lib/common/button.tsx

@@ -0,0 +1,49 @@
+import type { VariantProps } from 'tailwind-variants';
+
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { tv } from 'tailwind-variants';
+
+const buttonVariants = tv({
+  base: [
+    'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors',
+    'ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2',
+    'disabled:pointer-events-none disabled:opacity-50',
+  ],
+  variants: {
+    variant: {
+      default:
+        'bg-primary-foreground text-primary shadow hover:bg-primary-foreground/90',
+    },
+    size: {
+      default: 'h-9 px-4 py-2',
+      sm: 'h-8 rounded-md px-3 text-xs',
+      lg: 'h-10 rounded-md px-8',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+    size: 'default',
+  },
+});
+
+export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  };
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={buttonVariants({ variant, size, className })}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

package/lib/common/checkbox.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { CheckIcon } from '@radix-ui/react-icons';
+import { tv } from 'tailwind-variants';
+
+const checkboxVariants = tv({
+  slots: {
+    root: [
+      'peer h-4 w-4 shrink-0 rounded-sm border border-accent shadow',
+      'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1',
+      'disabled:cursor-not-allowed disabled:opacity-50',
+      'data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground',
+    ],
+    indicator: 'flex items-center justify-center text-current',
+    icon: 'h-4 w-4',
+  },
+});
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { root, indicator, icon } = checkboxVariants();
+
+  return (
+    <CheckboxPrimitive.Root
+      ref={ref}
+      className={root({
+        className,
+      })}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator className={indicator()}>
+        <CheckIcon className={icon()} />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+});
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };

package/lib/common/form.tsx

@@ -0,0 +1,192 @@
+import type * as LabelPrimitive from '@radix-ui/react-label';
+import type { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
+
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { Controller, FormProvider, useFormContext } from 'react-hook-form';
+import { tv } from 'tailwind-variants';
+
+import { Label } from './label';
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue,
+);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  if (!fieldContext) {
+    throw new Error('useFormField should be used within <FormField>');
+  }
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue,
+);
+
+const formItemVariants = tv({
+  base: 'space-y-2',
+});
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={formItemVariants({ className })} {...props} />
+    </FormItemContext.Provider>
+  );
+});
+FormItem.displayName = 'FormItem';
+
+const formLabelVariants = tv({
+  base: '',
+  variants: {
+    error: {
+      true: 'text-destructive',
+    },
+  },
+});
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+
+  return (
+    <Label
+      ref={ref}
+      className={formLabelVariants({
+        error: !!error,
+        className,
+      })}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+});
+FormLabel.displayName = 'FormLabel';
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+});
+FormControl.displayName = 'FormControl';
+
+const formDescriptionVariants = tv({
+  base: 'text-[0.8rem] text-muted-foreground',
+});
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={formDescriptionVariants({ className })}
+      {...props}
+    />
+  );
+});
+FormDescription.displayName = 'FormDescription';
+
+const formMessageVariants = tv({
+  base: 'text-[0.8rem] font-medium text-destructive',
+});
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={formMessageVariants({ className })}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+});
+FormMessage.displayName = 'FormMessage';
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+};

package/lib/common/input.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { tv } from 'tailwind-variants';
+
+import { useTwintagForm } from '@twintag/twintag-form/provider';
+
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+
+const inputVariants = tv({
+  slots: {
+    root: 'relative',
+    input: [
+      'flex h-10 w-full border-input bg-background py-2 text-sm text-primary-foreground placeholder:text-muted-foreground focus-visible:outline-none',
+      'file:border-0 file:bg-transparent file:px-0 file:text-sm file:font-medium file:text-primary-foreground',
+      'disabled:cursor-not-allowed disabled:opacity-50',
+    ],
+  },
+  variants: {
+    variant: {
+      default: {
+        input:
+          'rounded-md border px-3 ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      },
+      beta: {
+        root: 'after:absolute after:left-0 after:top-[calc(100%_+_2px)] after:w-full after:rounded-full after:content-[""] focus-within:after:h-0.5 focus-within:after:bg-ring',
+        input: 'border-b px-1',
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    const { variant } = useTwintagForm();
+
+    const { root, input } = inputVariants({ variant });
+
+    return (
+      <div className={root()}>
+        <input
+          type={type}
+          className={input({
+            className,
+          })}
+          ref={ref}
+          {...props}
+        />
+      </div>
+    );
+  },
+);
+Input.displayName = 'Input';
+
+export { Input };

package/lib/common/label.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { tv } from 'tailwind-variants';
+
+const labelVariants = tv({
+  base: [
+    'text-sm font-medium leading-none text-primary-foreground',
+    'peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+  ],
+});
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={labelVariants({
+      className,
+    })}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };

package/lib/common/radiogroup.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { Circle } from 'lucide-react';
+import { tv } from 'tailwind-variants';
+
+const radioGroupVariants = tv({
+  base: 'grid gap-2',
+});
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={radioGroupVariants({ className })}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+const radioGroupItemVariants = tv({
+  slots: {
+    item: [
+      'aspect-square h-4 w-4 items-center rounded-full border border-accent text-accent ring-offset-background',
+      'focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      'disabled:cursor-not-allowed disabled:opacity-50',
+    ],
+    indicator: 'relative block h-full w-full',
+    icon: 'absolute left-1/2 top-1/2 h-2.5 w-2.5 -translate-x-1/2 -translate-y-1/2 transform fill-current text-current',
+  },
+});
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  const { item, indicator, icon } = radioGroupItemVariants();
+
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={item({
+        className,
+      })}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className={indicator()}>
+        <Circle className={icon()} />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };

package/lib/common/switch.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+import { tv } from 'tailwind-variants';
+
+const switchVariants = tv({
+  slots: {
+    root: [
+      'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors',
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+      'disabled:cursor-not-allowed disabled:opacity-50',
+      'data-[state=checked]:bg-accent data-[state=unchecked]:bg-muted',
+    ],
+    thumb: [
+      'pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform',
+      'data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',
+    ],
+  },
+});
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => {
+  const { root, thumb } = switchVariants();
+
+  return (
+    <SwitchPrimitives.Root
+      className={root({
+        className,
+      })}
+      {...props}
+      ref={ref}
+    >
+      <SwitchPrimitives.Thumb className={thumb()} />
+    </SwitchPrimitives.Root>
+  );
+});
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };

package/lib/common/textarea.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { tv } from 'tailwind-variants';
+
+import { useTwintagForm } from '@twintag/twintag-form/provider';
+
+type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+const textareaVariants = tv({
+  slots: {
+    root: 'relative',
+    textarea: [
+      'flex min-h-[60px] w-full border-input bg-background py-2 text-sm text-primary-foreground shadow-sm placeholder:text-muted-foreground focus-visible:outline-none',
+      'disabled:cursor-not-allowed disabled:opacity-50',
+    ],
+  },
+  variants: {
+    variant: {
+      default: {
+        textarea:
+          'rounded-md border px-3 ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      },
+      beta: {
+        root: 'after:absolute after:left-0 after:top-[calc(100%_+_2px)] after:w-full after:rounded-full after:content-[""] focus-within:after:h-0.5 focus-within:after:bg-ring',
+        textarea: 'border-b px-1',
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    const { variant } = useTwintagForm();
+
+    const { root, textarea } = textareaVariants({ variant });
+
+    return (
+      <div className={root()}>
+        <textarea
+          className={textarea({
+            className,
+          })}
+          ref={ref}
+          {...props}
+        />
+      </div>
+    );
+  },
+);
+Textarea.displayName = 'Textarea';
+
+export { Textarea };

package/lib/components/Input/checkbox.tsx

@@ -1,52 +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 { CheckIcon } from '@heroicons/react/24/outline';
-import * as RdxCheckbox from '@radix-ui/react-checkbox';
+import { AsteriskIcon } from 'lucide-react';
+import { useFormContext } from 'react-hook-form';
 
-import { Label } from '@twintag/twintag-form/components';
-import { type CommonProps } from './__props';
-import { checkboxStyle } from './__styles';
+import { Checkbox as CommonCheckbox } from '@twintag/twintag-form/common/checkbox';
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@twintag/twintag-form/common/form';
 
-type Props = CommonProps<VariantProps<typeof checkboxStyle>['variant']>;
-
-const Checkbox: FC<Props> = ({ label, bind, options }) => {
+export const Checkbox: 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, checkbox } = checkboxStyle({ variant: options?.variant });
+  const isOptional = options?.optionalField;
 
   return (
-    <label className={container()}>
-      <RdxCheckbox.Root
-        ref={ref}
-        className={checkbox()}
-        defaultChecked={value}
-        onCheckedChange={(state) => {
-          onChange(state);
-        }}
-      >
-        <RdxCheckbox.Indicator className='text-input'>
-          <CheckIcon className='w-4' />
-        </RdxCheckbox.Indicator>
-      </RdxCheckbox.Root>
-
-      <Label className='text-label' required={!options?.optionalField}>
-        {label}
-      </Label>
-    </label>
+    <FormField
+      control={control}
+      name={bind}
+      defaultValue={false}
+      rules={{
+        required: isOptional ? false : options?.error ?? true,
+      }}
+      render={({ field }) => (
+        <FormItem className='pt-1.5'>
+          <div className='flex space-x-2'>
+            <FormControl>
+              <CommonCheckbox
+                {...field}
+                checked={field.value as boolean}
+                onCheckedChange={(state) => {
+                  field.onChange(state);
+                }}
+              />
+            </FormControl>
+            <div className='grid gap-1.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>
+              ) : (
+                <></>
+              )}
+              <FormMessage />
+            </div>
+          </div>
+        </FormItem>
+      )}
+    />
   );
 };
-
-export default Checkbox;