@twintag/twintag-form 1.3.0 → 1.4.0-beta.1

package/lib/components/fields/tri-toggle.tsx

@@ -0,0 +1,141 @@
+import type { FC } from 'react';
+import type { Props } from '@twintag/twintag-form/types';
+import type { VariantProps } from 'tailwind-variants';
+
+import * as React from 'react';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import { useFormContext } from 'react-hook-form';
+import { tv } from 'tailwind-variants';
+
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@twintag/twintag-form/common/form';
+import { useTwintagForm } from '@twintag/twintag-form/components/provider';
+
+const sliderVariants = tv({
+  slots: {
+    root: 'relative flex w-11 touch-none select-none items-center',
+    track: 'relative h-5 w-full grow overflow-hidden rounded-full bg-muted',
+    range: 'absolute h-full bg-accent',
+    thumb:
+      'relative block h-4 w-4 rounded-full border-2 border-transparent bg-background shadow-lg focus-visible:outline-none focus-visible:ring-0 disabled:pointer-events-none disabled:opacity-50',
+  },
+  variants: {
+    state: {
+      // false
+      0: {
+        thumb: 'left-0.5',
+      },
+      // null
+      1: {
+        thumb: 'h-5 w-5 border-accent',
+      },
+      // true
+      2: {
+        thumb: 'right-0.5',
+      },
+    },
+  },
+  defaultVariants: {
+    state: 1,
+  },
+});
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> & {
+    classNames?: Record<keyof (typeof sliderVariants)['slots'], string>;
+  }
+>(({ className, ...props }, ref) => {
+  const val = props.value?.[0] as VariantProps<typeof sliderVariants>['state'];
+
+  const { root, track, range, thumb } = sliderVariants({
+    state: val,
+  });
+
+  return (
+    <SliderPrimitive.Root
+      disabled
+      ref={ref}
+      className={root({
+        className,
+      })}
+      onClick={(e) => {
+        e.preventDefault();
+
+        if (val !== undefined) {
+          const states = Object.keys(sliderVariants.variants.state);
+          const value = states.indexOf(val.toString());
+          const nextValue = value === states.length - 1 ? 0 : value + 1;
+          props.onValueChange?.([nextValue]);
+        }
+      }}
+      {...props}
+    >
+      <SliderPrimitive.Track className={track()}>
+        <SliderPrimitive.Range className={range()} />
+      </SliderPrimitive.Track>
+      <SliderPrimitive.Thumb className={thumb()} />
+    </SliderPrimitive.Root>
+  );
+});
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export const DEFAULT_TRI_TOGGLE_VALUE = null;
+
+export const TriToggle: FC<Props> = ({ label, bind, options }) => {
+  const { control } = useFormContext();
+  const { variant, size } = useTwintagForm();
+
+  return (
+    <FormField
+      defaultValue={DEFAULT_TRI_TOGGLE_VALUE}
+      control={control}
+      name={bind}
+      rules={{
+        required: false,
+      }}
+      render={({ field }) => (
+        <FormItem variant={variant}>
+          <div className='flex flex-row items-center justify-between'>
+            <div className='space-y-1'>
+              <FormLabel htmlFor={bind} size={size}>
+                {label}
+              </FormLabel>
+              {options?.description ? (
+                <FormDescription size={size}>
+                  {options.description}
+                </FormDescription>
+              ) : (
+                <></>
+              )}
+            </div>
+            <FormControl>
+              <Slider
+                id={bind}
+                ref={field.ref}
+                min={0}
+                max={2}
+                step={1}
+                value={[
+                  field.value === true ? 2 : field.value === null ? 1 : 0,
+                ]}
+                onValueChange={(value) => {
+                  field.onChange(
+                    value[0] === 2 ? true : value[0] === 1 ? null : false,
+                  );
+                }}
+              />
+            </FormControl>
+          </div>
+          <FormMessage size={size} />
+        </FormItem>
+      )}
+    />
+  );
+};

package/lib/components/form.tsx

@@ -5,6 +5,7 @@ import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
 import { useForm } from 'react-hook-form';
 
 import { Form } from '@twintag/twintag-form/common/form';
+import { useTwintagForm } from '@twintag/twintag-form/components/provider';
 
 type Props = {
   defaultValues?: FieldValues;
@@ -13,6 +14,8 @@ type Props = {
 
 export const TwintagForm = forwardRef<HTMLFormElement, Props>(
   ({ defaultValues, resetOnSubmit, children }, fowardedRef) => {
+    const { resetValues } = useTwintagForm();
+
     const ref = useRef<HTMLFormElement>(null);
 
     const form = useForm({
@@ -24,15 +27,10 @@ export const TwintagForm = forwardRef<HTMLFormElement, Props>(
     useEffect(() => {
       if (form.formState.isSubmitSuccessful && resetOnSubmit) {
         if (defaultValues) {
-          form.reset(
-            Object.keys(defaultValues).reduce(
-              (acc, key) => ({ ...acc, [key]: '' }),
-              {},
-            ),
-          );
+          form.reset(resetValues || defaultValues);
         }
       }
-    }, [form.formState]);
+    }, [form.formState, defaultValues]);
 
     const onValid = (data: FieldValues) => {
       const eventWithValidData = new CustomEvent('twintag-form-valid', {

package/lib/components/provider.tsx

@@ -0,0 +1,159 @@
+import type {
+  ParsedJsonComponent,
+  RawJsonComponent,
+  TwintagFormContext,
+} from '@twintag/twintag-form/types';
+import type { WithChildren } from 'twintag-types/dom';
+
+import { createContext, useContext, useMemo } from 'react';
+import { LabelToString } from 'twintag-types/dom';
+import { v4 as uuid } from 'uuid';
+
+export const twintagFormContext = createContext<TwintagFormContext>({
+  variant: 'default',
+  size: 'base',
+  inputs: new Map(),
+  components: new Map(),
+  config: [],
+  resetValues: {},
+});
+
+export const useTwintagForm = () => {
+  const context = useContext(twintagFormContext);
+
+  if (!context) {
+    throw new Error('useTwintagForm must be used within a TwintagFormProvider');
+  }
+
+  return context;
+};
+
+type Components = TwintagFormContext['components'];
+type Inputs = TwintagFormContext['inputs'];
+
+const format = (component: RawJsonComponent, components: Components) => {
+  const copy = { ...component };
+  let formattedConfig: ParsedJsonComponent;
+
+  if (copy.props) {
+    formattedConfig = { ...copy.props } as ParsedJsonComponent;
+  } else {
+    formattedConfig = { ...copy } as unknown as ParsedJsonComponent;
+  }
+
+  if (!copy.type) return Object.create(null) as ParsedJsonComponent;
+
+  const [type, subtype = undefined] = copy.type.split(':');
+  formattedConfig.id = `${type}-${uuid()}`;
+
+  const comp = components.get(type);
+
+  if (comp) {
+    formattedConfig.comp = comp;
+  }
+
+  formattedConfig.type = type;
+
+  if (subtype) {
+    formattedConfig.subtype = subtype;
+  }
+
+  if (copy.props) {
+    if (copy.props.subtype) {
+      formattedConfig.subtype = copy.props.subtype;
+    }
+
+    if (copy.props.label) {
+      const labelParsed = LabelToString.safeParse(copy.props.label);
+      formattedConfig.label = labelParsed.success
+        ? labelParsed.data
+        : undefined;
+    }
+  }
+
+  if (copy.children && Array.isArray(copy.children)) {
+    formattedConfig.items = copy.children.map((item) =>
+      format(item, components),
+    );
+  }
+
+  return formattedConfig;
+};
+
+export const getResetValues = (
+  config: RawJsonComponent | RawJsonComponent[],
+  inputs: Inputs,
+) => {
+  const stack = Array.isArray(config) ? [...config] : [config];
+
+  const resetValues = new Map<string, unknown>();
+
+  while (stack.length > 0) {
+    const currentObj = stack.pop();
+
+    if (!currentObj) continue;
+
+    for (const [key, value] of Object.entries(currentObj)) {
+      if (Array.isArray(value)) {
+        for (const item of value) {
+          stack.push(item as unknown as RawJsonComponent);
+        }
+      }
+
+      if (typeof value === 'object' && value !== null) {
+        stack.push(value as unknown as RawJsonComponent);
+      }
+
+      if (key === 'subtype' && currentObj.bind) {
+        resetValues.set(
+          currentObj.bind,
+          inputs.get(value as string)?.defaultValue,
+        );
+      }
+    }
+  }
+
+  return Object.fromEntries(resetValues);
+};
+
+export const TwintagFormProvider = ({
+  variant,
+  size,
+  inputs,
+  components,
+  config,
+  children,
+}: {
+  config: RawJsonComponent | RawJsonComponent[];
+  variant: TwintagFormContext['variant'];
+  size: TwintagFormContext['size'];
+  inputs: Inputs;
+  components: Components;
+} & WithChildren) => {
+  const __config = useMemo(() => {
+    if (Array.isArray(config)) {
+      return config.map((item) => format(item, components));
+    }
+
+    return format(config, components);
+  }, [config, components]);
+
+  const resetValues = useMemo(() => {
+    return getResetValues(__config, inputs);
+  }, [__config, inputs]);
+
+  return (
+    <twintagFormContext.Provider
+      value={{
+        config: __config,
+        variant,
+        size,
+        inputs,
+        components,
+        resetValues,
+      }}
+    >
+      {children}
+    </twintagFormContext.Provider>
+  );
+};

package/lib/components/{Render/index.tsx → renderer.tsx}

@@ -2,12 +2,13 @@ import type { FC } from 'react';
 import type { ParsedJsonComponent } from '@twintag/twintag-form/types';
 
 import { Containers } from '@twintag/twintag-form/components/config';
+import { useTwintagForm } from '@twintag/twintag-form/components/provider';
 
 type Props = {
   config: ParsedJsonComponent;
 };
 
-export const Renderer: FC<Props> = ({ config }) => {
+const RecursiveRenderer: FC<Props> = ({ config }) => {
   const { id, type, items, comp, ...rest } = config;
 
   if (!type || !comp) return <></>;
@@ -19,7 +20,7 @@ export const Renderer: FC<Props> = ({ config }) => {
       return (
         <Component key={id} items={items} {...rest}>
           {items.map((item) => (
-            <Renderer key={item.id} config={{ ...item }} />
+            <RecursiveRenderer key={item.id} config={{ ...item }} />
           ))}
         </Component>
       );
@@ -30,3 +31,19 @@ export const Renderer: FC<Props> = ({ config }) => {
 
   return <Component key={id} {...rest} />;
 };
+
+export const JsonRenderer = () => {
+  const { config } = useTwintagForm();
+
+  if (Array.isArray(config)) {
+    return (
+      <>
+        {config.map((item) => (
+          <RecursiveRenderer key={item.id} config={{ ...item }} />
+        ))}
+      </>
+    );
+  }
+
+  return <RecursiveRenderer config={config} />;
+};

package/lib/index.tsx

@@ -1,36 +1,41 @@
-import type { ComponentProps } from 'react';
-import type { RawJsonComponent } from '@twintag/twintag-form/types';
-
-import { forwardRef } from 'react';
-
-import { TwintagJsonRenderer } from '@twintag/twintag-form/components';
-import { components } from '@twintag/twintag-form/components/config';
-import { TwintagForm } from '@twintag/twintag-form/components/form';
-import { TwintagFormProvider } from '@twintag/twintag-form/provider';
-
-type Props = {
-  config: RawJsonComponent[];
-  options?: Partial<{
-    defaultValues?: ComponentProps<typeof TwintagForm>['defaultValues'];
-    variant?: ComponentProps<typeof TwintagFormProvider>['variant'];
-    resetOnSubmit?: boolean;
-  }>;
-};
-
-export const Form = forwardRef<HTMLFormElement, Props>(
-  ({ config, options }, ref) => {
-    return (
-      <TwintagFormProvider variant={options?.variant} components={components}>
-        <TwintagForm
-          ref={ref}
-          defaultValues={options?.defaultValues}
-          resetOnSubmit={options?.resetOnSubmit}
-        >
-          {config.map((item, idx) => (
-            <TwintagJsonRenderer key={idx} config={item} />
-          ))}
-        </TwintagForm>
-      </TwintagFormProvider>
-    );
-  },
-);
+import type { ComponentProps } from 'react';
+import type { RawJsonComponent } from '@twintag/twintag-form/types';
+
+import { forwardRef } from 'react';
+
+import { components, Inputs } from '@twintag/twintag-form/components/config';
+import { TwintagForm } from '@twintag/twintag-form/components/form';
+import { TwintagFormProvider } from '@twintag/twintag-form/components/provider';
+import { JsonRenderer } from '@twintag/twintag-form/components/renderer';
+
+type Props = {
+  config: RawJsonComponent[];
+  options?: Partial<{
+    defaultValues?: ComponentProps<typeof TwintagForm>['defaultValues'];
+    variant?: ComponentProps<typeof TwintagFormProvider>['variant'];
+    size?: ComponentProps<typeof TwintagFormProvider>['size'];
+    resetOnSubmit?: boolean;
+  }>;
+};
+
+export const Form = forwardRef<HTMLFormElement, Props>(
+  ({ config, options }, ref) => {
+    return (
+      <TwintagFormProvider
+        inputs={Inputs}
+        components={components}
+        variant={options?.variant}
+        size={options?.size}
+        config={config}
+      >
+        <TwintagForm
+          ref={ref}
+          defaultValues={options?.defaultValues}
+          resetOnSubmit={options?.resetOnSubmit}
+        >
+          <JsonRenderer />
+        </TwintagForm>
+      </TwintagFormProvider>
+    );
+  },
+);

package/lib/types/index.ts

@@ -1,39 +1,49 @@
-import type { ElementType } from 'react';
-
-export type TwintagFormContext = {
-  variant?: 'default' | 'beta';
-  components: Map<string, ElementType>;
-};
-
-type RawProps = Partial<{
-  bind: string;
-  subtype: string;
-  label: string;
-  icon: string;
-  options: Partial<{
-    description: string;
-    placeholder: string;
-    error: string;
-    optionalField: boolean;
-  }>;
-}>;
-
-export type RawJsonComponent = RawProps &
-  Record<string, unknown> & {
-    type: string;
-    children?: RawJsonComponent[];
-  } & {
-    props?: RawProps;
-  };
-
-export type ParsedJsonComponent = Props & {
-  id: string;
-  type: string;
-  subtype?: string;
-  comp?: ElementType;
-};
-
-export type Props = Omit<RawProps, 'subtype'> & {
-  bind: string;
-  items?: ParsedJsonComponent[];
-};
+import type { ElementType } from 'react';
+
+export type ComponentConfig = {
+  defaultValue?: unknown;
+  component: ElementType;
+};
+
+export type ParsedJsonComponent =  Props & {
+    id: string;
+    type: string;
+    subtype?: string;
+    comp?: ElementType;
+};
+
+export type RawJsonComponent = RawProps &
+  Record<string, unknown> & {
+    type: string;
+    children?: RawJsonComponent[];
+  } & {
+    props?: RawProps;
+  };
+
+type RawProps = Partial<{
+  bind: string;
+  subtype: string;
+  label: string;
+  icon: string;
+  options: Partial<{
+    description: string;
+    placeholder: string;
+    error: string;
+    optionalField: boolean;
+  }>;
+}>;
+
+export type Props = Omit<RawProps, 'subtype'> & {
+  bind: string;
+  items?: ParsedJsonComponent[];
+};
+
+export type TwintagFormContext = {
+  variant?: 'default' | 'beta';
+  size?: 'base' | 'sm';
+  inputs: Map<string, ComponentConfig>;
+  components: Map<string, ElementType>;
+  config: ParsedJsonComponent[] | ParsedJsonComponent;
+  resetValues: Record<string, unknown>;
+};
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twintag/twintag-form",
-  "version": "1.3.0",
+  "version": "1.4.0-beta.1",
   "author": "Twintag",
   "type": "module",
   "exports": {
@@ -24,6 +24,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-slider": "^1.1.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.2",
     "@storybook/react": "7.0.2",
@@ -42,15 +43,12 @@
     "uuid": "^9.0.1"
   },
   "devDependencies": {
-    "@rollup/plugin-typescript": "^11.1.1",
-    "@storybook/addon-actions": "^7.0.20",
     "@twind/with-react": "^1.1.3",
     "@types/uuid": "^9.0.7",
-    "@vitejs/plugin-react-swc": "^3.4.0",
-    "rollup": "^3.18.0",
+    "@vitejs/plugin-react-swc": "^3.6.0",
     "tailwindcss": "^3.3.6",
-    "vite": "^4.4.9",
-    "vite-plugin-dts": "^3.0.3",
+    "vite": "^5.2.11",
+    "vite-plugin-dts": "^3.9.1",
     "eslint-config-custom": "1.0.0",
     "tsconfig": "0.0.0",
     "twintag-types": "0.2.0"

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

@@ -1,7 +0,0 @@
-import type { FC } from 'react';
-import type { ParsedJsonComponent } from '../../types';
-type Props = {
-    config: ParsedJsonComponent;
-};
-export declare const Renderer: FC<Props>;
-export {};

package/dist/components/Render/useJson.d.ts

@@ -1,2 +0,0 @@
-import type { ParsedJsonComponent, RawJsonComponent } from '../../types';
-export declare const useJson: (config: RawJsonComponent | RawJsonComponent[]) => ParsedJsonComponent | ParsedJsonComponent[];

package/dist/components/index.d.ts

@@ -1,7 +0,0 @@
-import { JSX } from 'react/jsx-runtime';
-import type { RawJsonComponent } from '../types';
-type Props = {
-    config: RawJsonComponent | RawJsonComponent[];
-};
-export declare const TwintagJsonRenderer: ({ config }: Props) => JSX.Element;
-export {};

package/dist/provider.d.ts

@@ -1,8 +0,0 @@
-import { JSX } from 'react/jsx-runtime';
-import { Context } from 'react';
-/// <reference types="react" />
-import type { TwintagFormContext } from './types';
-import type { WithChildren } from 'twintag-types/dom';
-export declare const twintagFormContext: Context<TwintagFormContext>;
-export declare const useTwintagForm: () => TwintagFormContext;
-export declare const TwintagFormProvider: ({ children, variant, components, }: TwintagFormContext & WithChildren) => JSX.Element;

package/lib/components/Render/useJson.ts

@@ -1,76 +0,0 @@
-import type {
-  ParsedJsonComponent,
-  RawJsonComponent,
-  TwintagFormContext,
-} from '@twintag/twintag-form/types';
-
-import { useMemo } from 'react';
-import { LabelToString } from 'twintag-types/dom';
-import { v4 as uuid } from 'uuid';
-
-import { useTwintagForm } from '@twintag/twintag-form/provider';
-
-type Components = TwintagFormContext['components'];
-
-const format = (component: RawJsonComponent, components: Components) => {
-  const copy = { ...component };
-  let formattedConfig: ParsedJsonComponent;
-
-  if (copy.props) {
-    formattedConfig = { ...copy.props } as ParsedJsonComponent;
-  } else {
-    formattedConfig = { ...copy } as unknown as ParsedJsonComponent;
-  }
-
-  if (!copy.type) return Object.create(null) as ParsedJsonComponent;
-
-  const [type, subtype = undefined] = copy.type.split(':');
-  formattedConfig.id = `${type}-${uuid()}`;
-
-  const comp = components.get(type);
-
-  if (comp) {
-    formattedConfig.comp = comp;
-  }
-
-  formattedConfig.type = type;
-
-  if (subtype) {
-    formattedConfig.subtype = subtype;
-  }
-
-  if (copy.props) {
-    if (copy.props.subtype) {
-      formattedConfig.subtype = copy.props.subtype;
-    }
-
-    if (copy.props.label) {
-      const labelParsed = LabelToString.safeParse(copy.props.label);
-      formattedConfig.label = labelParsed.success
-        ? labelParsed.data
-        : undefined;
-    }
-  }
-
-  if (copy.children && Array.isArray(copy.children)) {
-    formattedConfig.items = copy.children.map((item) =>
-      format(item, components),
-    );
-  }
-
-  return formattedConfig;
-};
-
-export const useJson = (config: RawJsonComponent | RawJsonComponent[]) => {
-  const { components } = useTwintagForm();
-
-  const __config = useMemo(() => {
-    if (Array.isArray(config)) {
-      return config.map((item) => format(item, components));
-    }
-
-    return format(config, components);
-  }, [config, components]);
-
-  return __config;
-};