@twintag/twintag-form 1.0.3 → 1.1.0

package/lib/components/containers/accordion.tsx

@@ -0,0 +1,105 @@
+import type { Props } from '@twintag/twintag-form/types';
+import type { WithChildren } from 'twintag-types/dom';
+
+import { type FC } from 'react';
+import { tv } from 'tailwind-variants';
+
+import {
+  AccordionContent,
+  AccordionItem as AccordionItemPrimitive,
+  Accordion as AccordionPrimitive,
+  AccordionTrigger,
+} from '@twintag/twintag-form/common/accordion';
+import { Icon } from '@twintag/twintag-form/common/icon';
+import { useTwintagForm } from '@twintag/twintag-form/provider';
+import { camelize } from '@twintag/twintag-form/utils/string';
+
+type AccordionRootProps = {
+  multiple?: boolean;
+} & WithChildren;
+
+const accordionRootVariants = tv({
+  base: 'border',
+  variants: {
+    variant: {
+      default: 'rounded-md',
+      beta: 'rounded-none',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+const AccordionRoot: FC<AccordionRootProps> = ({
+  multiple = true,
+  children,
+}) => {
+  const { variant } = useTwintagForm();
+
+  return (
+    <AccordionPrimitive
+      type={multiple ? 'multiple' : 'single'}
+      collapsible={multiple ? undefined : true}
+    >
+      <div className={accordionRootVariants({ variant })}>{children}</div>
+    </AccordionPrimitive>
+  );
+};
+AccordionRoot.displayName = 'AccordionRoot';
+
+const accordionItemVariants = tv({
+  slots: {
+    item: 'px-5 last:border-none',
+    trigger: 'flex flex-1 items-center gap-2.5 font-tf-font',
+    content: 'space-y-4',
+  },
+  variants: {
+    variant: {
+      default: {
+        trigger: 'text-base font-medium',
+      },
+      beta: {
+        trigger: 'text-sm',
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+type AccordionItemProps = Omit<Props, 'bind'> & WithChildren;
+const AccordionItem: FC<AccordionItemProps> = ({
+  label = '',
+  icon,
+  children,
+}) => {
+  const { variant } = useTwintagForm();
+
+  const { item, trigger, content } = accordionItemVariants({ variant });
+
+  return (
+    <AccordionItemPrimitive value={camelize(label)} className={item()}>
+      <AccordionTrigger className='text-category'>
+        <span className={trigger()}>
+          {icon ? <Icon name={icon} className='shrink-0' /> : <></>}
+          {label}
+        </span>
+      </AccordionTrigger>
+      <AccordionContent className={content()}>{children}</AccordionContent>
+    </AccordionItemPrimitive>
+  );
+};
+AccordionItem.displayName = 'AccordionItem';
+
+type AccordionProps = {
+  subtype?: 'item' | 'multiple' | 'single';
+  label?: string;
+} & WithChildren;
+const Accordion: FC<AccordionProps> = ({ subtype = 'single', ...rest }) => {
+  if (subtype === 'item') return <AccordionItem {...rest} />;
+
+  return <AccordionRoot {...rest} />;
+};
+
+export { Accordion };

package/lib/components/containers/category.tsx

@@ -0,0 +1,48 @@
+import type { FC } from 'react';
+import type { WithChildren } from 'twintag-types/dom';
+
+import { tv } from 'tailwind-variants';
+
+import { useTwintagForm } from '@twintag/twintag-form/provider';
+
+const categoryStyle = tv({
+  slots: {
+    container: 'relative w-full space-y-4',
+    heading: 'font-tf-font text-category',
+    content: 'grid gap-4',
+  },
+  variants: {
+    variant: {
+      default: {
+        heading: 'text-base font-medium',
+      },
+      beta: {
+        heading: 'text-sm font-normal',
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+type Props = {
+  label?: string;
+} & WithChildren;
+
+const Category: FC<Props> = ({ label, children }) => {
+  const { variant } = useTwintagForm();
+
+  const { container, heading, content } = categoryStyle({ variant });
+
+  return (
+    <section className={container()}>
+      {label ? <h3 className={heading()}>{label}</h3> : <></>}
+
+      <div className={content()}>{children}</div>
+    </section>
+  );
+};
+Category.displayName = 'Category';
+
+export { Category };

package/lib/components/fields/date-picker.tsx

@@ -0,0 +1,117 @@
+import type { Props } from '@twintag/twintag-form/types';
+
+import * as React from 'react';
+import { format } from 'date-fns';
+import { AsteriskIcon, Calendar as CalendarIcon } from 'lucide-react';
+import { useFormContext } from 'react-hook-form';
+import { tv } from 'tailwind-variants';
+
+import { Button } from '@twintag/twintag-form/common/button';
+import { Calendar } from '@twintag/twintag-form/common/calendar';
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@twintag/twintag-form/common/form';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@twintag/twintag-form/common/popover';
+import { useTwintagForm } from '@twintag/twintag-form/provider';
+
+const triggerVariants = tv({
+  base: 'w-full justify-start text-left font-normal',
+  variants: {
+    variant: {
+      default: 'px-3',
+      beta: 'rounded-none border-x-transparent border-t-transparent px-1 transition-none hover:bg-white hover:text-muted-foreground',
+    },
+    withValue: {
+      true: 'text-muted-foreground',
+      false: '',
+    },
+  },
+});
+
+export const DatePicker: React.FC<Props> = ({ label, bind, options }) => {
+  const { variant } = useTwintagForm();
+
+  const { control } = useFormContext();
+
+  const isOptional = options?.optionalField;
+
+  return (
+    <FormField
+      control={control}
+      name={bind}
+      rules={{
+        required: isOptional ? false : options?.error ?? true,
+      }}
+      render={({ field }) => (
+        <FormItem className='flex flex-col [&>div[data-radix-popper-content-wrapper]]:!z-50'>
+          <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>
+          <Popover>
+            <PopoverTrigger asChild>
+              <FormControl>
+                <Button
+                  variant='outline'
+                  className={triggerVariants({
+                    variant,
+                    withValue: !field.value,
+                    className: 'h-10 gap-3',
+                  })}
+                >
+                  {field.value ? (
+                    format(field.value, 'PPP')
+                  ) : (
+                    <span>{options?.placeholder ?? 'Select a date'}</span>
+                  )}
+                  <CalendarIcon className='ml-auto h-4 w-4 opacity-50' />
+                </Button>
+              </FormControl>
+            </PopoverTrigger>
+            <PopoverContent className='w-auto p-0' align='start'>
+              <Calendar
+                fromYear={1970}
+                toYear={2050}
+                captionLayout='dropdown-buttons'
+                mode='single'
+                selected={
+                  !isNaN(new Date(field.value as Date).getTime())
+                    ? new Date(field.value as Date)
+                    : undefined
+                }
+                onSelect={field.onChange}
+                disabled={(date) =>
+                  date > new Date() || date < new Date('1900-01-01')
+                }
+                initialFocus
+              />
+            </PopoverContent>
+          </Popover>
+          <FormMessage className='pt-1' />
+        </FormItem>
+      )}
+    />
+  );
+};

package/lib/components/{Input → fields}/file.tsx

@@ -68,7 +68,7 @@ export const File: FC<Props> = ({ label, bind, options }) => {
               }}
             />
           </FormControl>
-          <FormMessage />
+          <FormMessage className='pt-1.5' />
         </FormItem>
       )}
     />

package/lib/components/{Input/simple.tsx → fields/input.tsx}

@@ -12,18 +12,18 @@ import {
   FormLabel,
   FormMessage,
 } from '@twintag/twintag-form/common/form';
-import { Input } from '@twintag/twintag-form/common/input';
+import { Input as InputPrimitive } from '@twintag/twintag-form/common/input';
 
-export const Simple: FC<Props> = ({ label, bind, options }) => {
+export const Input: FC<Props> = ({ label, bind, options }) => {
   const { control } = useFormContext();
 
   const isOptional = options?.optionalField;
 
   return (
     <FormField
+      defaultValue=''
       control={control}
       name={bind}
-      defaultValue=''
       rules={{
         required: isOptional ? false : options?.error ?? true,
       }}
@@ -47,13 +47,13 @@ export const Simple: FC<Props> = ({ label, bind, options }) => {
             )}
           </div>
           <FormControl>
-            <Input
+            <InputPrimitive
               type='text'
               placeholder={options?.placeholder ?? 'Write here...'}
               {...field}
             />
           </FormControl>
-          <FormMessage />
+          <FormMessage className='pt-1' />
         </FormItem>
       )}
     />

package/lib/components/{Input → fields}/textarea.tsx

@@ -21,9 +21,9 @@ export const Textarea: FC<Props> = ({ label, bind, options }) => {
 
   return (
     <FormField
+      defaultValue=''
       control={control}
       name={bind}
-      defaultValue=''
       rules={{
         required: isOptional ? false : options?.error ?? true,
       }}
@@ -52,7 +52,7 @@ export const Textarea: FC<Props> = ({ label, bind, options }) => {
               placeholder={options?.placeholder ?? 'Write here...'}
             />
           </FormControl>
-          <FormMessage />
+          <FormMessage className='pt-1' />
         </FormItem>
       )}
     />

package/lib/components/form.tsx

@@ -7,21 +7,36 @@ import { useForm } from 'react-hook-form';
 import { Form } from '@twintag/twintag-form/common/form';
 
 type Props = {
+  defaultValues?: FieldValues;
   resetOnSubmit?: boolean;
 } & WithChildren;
 
-export const TwintagForm = ({ resetOnSubmit, children }: Props) => {
+export const TwintagForm = ({
+  defaultValues,
+  resetOnSubmit,
+  children,
+}: Props) => {
   const ref = useRef<HTMLFormElement>(null);
 
-  const form = useForm();
+  const form = useForm({
+    defaultValues,
+  });
 
   useEffect(() => {
     if (form.formState.isSubmitSuccessful && resetOnSubmit) {
-      form.reset();
+      if (defaultValues) {
+        form.reset(
+          Object.keys(defaultValues).reduce(
+            (acc, key) => ({ ...acc, [key]: '' }),
+            {},
+          ),
+        );
+      }
     }
   }, [form.formState]);
 
   const onValid = (data: FieldValues) => {
+    console.log('form', data);
     const customSubmit = new CustomEvent('twintag-form-valid', {
       detail: data,
       bubbles: true,
@@ -64,6 +79,7 @@ export const TwintagForm = ({ resetOnSubmit, children }: Props) => {
   return (
     <Form {...form}>
       <form
+        id='twintag-form'
         ref={ref}
         className='relative space-y-4 font-tf-font'
         onSubmit={form.handleSubmit(onValid, onInvalid)}

package/lib/components/index.tsx

@@ -3,9 +3,6 @@ import type { RawJsonComponent } from '@twintag/twintag-form/types';
 import { Renderer } from '@twintag/twintag-form/components/Render';
 import { useJson } from '@twintag/twintag-form/components/Render/useJson';
 
-export { Input } from './Input';
-export { Category } from './category';
-
 type Props = {
   config: RawJsonComponent | RawJsonComponent[];
 };

package/lib/index.tsx

@@ -1,19 +1,15 @@
-import type { ComponentProps, ElementType } from 'react';
+import type { ComponentProps } from 'react';
 import type { RawJsonComponent } from '@twintag/twintag-form/types';
 
 import { TwintagJsonRenderer } from '@twintag/twintag-form/components';
-import { Category } from '@twintag/twintag-form/components/category';
+import { components } from '@twintag/twintag-form/components/config';
 import { TwintagForm } from '@twintag/twintag-form/components/form';
-import { Input } from '@twintag/twintag-form/components/Input';
 import { TwintagFormProvider } from '@twintag/twintag-form/provider';
 
-const components = new Map<string, ElementType>()
-  .set('input', Input)
-  .set('category', Category);
-
 type Props = {
   config: RawJsonComponent[];
   options?: Partial<{
+    defaultValues?: ComponentProps<typeof TwintagForm>['defaultValues'];
     variant?: ComponentProps<typeof TwintagFormProvider>['variant'];
     resetOnSubmit?: boolean;
   }>;
@@ -22,7 +18,10 @@ type Props = {
 export const Form = ({ config, options }: Props) => {
   return (
     <TwintagFormProvider variant={options?.variant} components={components}>
-      <TwintagForm resetOnSubmit={options?.resetOnSubmit}>
+      <TwintagForm
+        defaultValues={options?.defaultValues}
+        resetOnSubmit={options?.resetOnSubmit}
+      >
         {config.map((item, idx) => (
           <TwintagJsonRenderer key={idx} config={item} />
         ))}

package/lib/types/index.ts

@@ -9,6 +9,7 @@ type RawProps = Partial<{
   bind: string;
   subtype: string;
   label: string;
+  icon: string;
   options: Partial<{
     description: string;
     placeholder: string;
@@ -17,17 +18,13 @@ type RawProps = Partial<{
   }>;
 }>;
 
-export type RawJsonComponent = RawProps & {
-  type: string;
-  children?: RawJsonComponent[];
-} & {
-  props?: RawProps;
-};
-
-export type Props = Omit<RawProps, 'subtype'> & {
-  bind: string;
-  items?: ParsedJsonComponent[];
-};
+export type RawJsonComponent = RawProps &
+  Record<string, unknown> & {
+    type: string;
+    children?: RawJsonComponent[];
+  } & {
+    props?: RawProps;
+  };
 
 export type ParsedJsonComponent = Props & {
   id: string;
@@ -35,3 +32,8 @@ export type ParsedJsonComponent = Props & {
   subtype?: string;
   comp?: ElementType;
 };
+
+export type Props = Omit<RawProps, 'subtype'> & {
+  bind: string;
+  items?: ParsedJsonComponent[];
+};

package/lib/utils/data.ts

@@ -0,0 +1,18 @@
+import type { Props } from '@twintag/twintag-form/types';
+
+export const getBindSetFromItems = (items: Props[]): Set<string> => {
+  const binds = new Set<string>();
+
+  items.forEach((item) => {
+    if (item.bind) {
+      binds.add(item.bind);
+    }
+
+    if (item.items) {
+      const subBinds = getBindSetFromItems(item.items);
+      subBinds.forEach((bind) => binds.add(bind));
+    }
+  });
+
+  return binds;
+};

package/lib/utils/string.ts

@@ -0,0 +1,12 @@
+export const camelize = (str: string) => {
+  return str
+    .replace(/(?:^\w|[A-Z]|\b\w)/g, function (word, index) {
+      return index === 0 ? word.toLowerCase() : word.toUpperCase();
+    })
+    .replace(/\s+/g, '');
+};
+
+export const camelizeKebab = (s: string) =>
+  s.replace(/-./g, (x) => x[1].toUpperCase());
+
+export const capitalize = (s: string) => s && s[0].toUpperCase() + s.slice(1);

package/lib/utils/style.ts

@@ -0,0 +1,8 @@
+import type { ClassValue } from 'clsx';
+
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twintag/twintag-form",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "author": "Twintag",
   "type": "module",
   "exports": {
@@ -14,12 +14,16 @@
     }
   },
   "dependencies": {
-    "@heroicons/react": "^2.0.16",
+    "@heroicons/react": "^2.1.1",
     "@r2wc/react-to-web-component": "^2.0.3",
+    "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-radio-group": "^1.1.3",
+    "@radix-ui/react-scroll-area": "^1.0.5",
+    "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.2",
     "@storybook/react": "7.0.2",
@@ -27,10 +31,14 @@
     "@twind/preset-autoprefix": "^1.0.7",
     "@twind/preset-tailwind": "^1.1.4",
     "@twind/with-web-components": "^1.1.3",
+    "clsx": "^2.1.0",
+    "date-fns": "^3.3.1",
     "lucide-react": "^0.269.0",
     "react": "^18.2.0",
+    "react-day-picker": "^8.10.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.47.0",
+    "react-hook-form": "^7.50.1",
+    "tailwind-merge": "^2.2.1",
     "uuid": "^9.0.1"
   },
   "devDependencies": {

package/tailwind.config.ts

@@ -3,13 +3,16 @@ import type { Config } from 'tailwindcss';
 import { fontFamily } from 'tailwindcss/defaultTheme';
 
 const config = {
-  content: ['./dev/main.tsx', './lib/**/*.{ts,tsx}', './index.html'],
+  content: ['./lib/**/*.{ts,tsx}'],
   theme: {
     extend: {
       colors: {
         category: 'hsl(var(--tf-category) / <alpha-value>)',
         label: 'hsl(var(--tf-label) / <alpha-value>)',
+
         background: 'hsl(var(--tf-background) / <alpha-value>)',
+        foreground: 'hsl(var(--tf-foreground) / <alpha-value>)',
+
         primary: {
           DEFAULT: 'hsl(var(--tf-primary) / <alpha-value>)',
           foreground: 'hsl(var(--tf-primary-foreground) / <alpha-value>)',
@@ -26,6 +29,7 @@ const config = {
           DEFAULT: 'hsl(var(--tf-muted) / <alpha-value>)',
           foreground: 'hsl(var(--tf-muted-foreground) / <alpha-value>)',
         },
+
         input: 'hsl(var(--tf-input) / <alpha-value>)',
         ring: 'hsl(var(--tf-ring) / <alpha-value>)',
       },
@@ -37,6 +41,20 @@ const config = {
       fontFamily: {
         'tf-font': ['var(--tf-font)', ...fontFamily.sans],
       },
+      keyframes: {
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
+        },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+      },
     },
   },
 } satisfies Config;

package/dist/components/Input/index.d.ts

@@ -1,8 +0,0 @@
-import type { FC } from 'react';
-type Props = {
-    subtype?: string;
-    label?: string;
-    bind?: string;
-};
-export declare const Input: FC<Props>;
-export {};

package/lib/components/Input/index.tsx

@@ -1,32 +0,0 @@
-import type { ElementType, FC } from 'react';
-
-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<string, ElementType>()
-  .set('simple', Simple)
-  .set('textarea', Textarea)
-  .set('toggle', Toggle)
-  .set('file', File)
-  .set('submit', Submit)
-  .set('checkbox', Checkbox)
-  .set('radiogroup', RadioGroup);
-
-type Props = {
-  subtype?: string;
-  label?: string;
-  bind?: string;
-};
-
-export const Input: FC<Props> = ({ subtype = 'simple', ...rest }) => {
-  const Comp = Inputs.get(subtype);
-
-  if (!Comp) return <></>;
-
-  return <Comp {...rest} />;
-};

package/lib/components/category.tsx

@@ -1,31 +0,0 @@
-import type { FC } from 'react';
-import type { WithChildren } from 'twintag-types/dom';
-
-import { tv } from 'tailwind-variants';
-
-const categoryStyle = tv({
-  slots: {
-    container: 'w-full space-y-4',
-    heading: 'font-tf-font text-sm text-category',
-    items: 'grid gap-4',
-  },
-});
-
-type Props = {
-  label?: string;
-} & WithChildren;
-
-const Category: FC<Props> = ({ label, children }) => {
-  const { container, heading, items } = categoryStyle();
-
-  return (
-    <section className={container()}>
-      {label ? <h3 className={heading()}>{label}</h3> : <></>}
-
-      <div className={items()}>{children}</div>
-    </section>
-  );
-};
-Category.displayName = 'Category';
-
-export { Category };