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

package/lib/components/Render/useJson.ts

@@ -0,0 +1,76 @@
+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;
+};

package/lib/components/category.tsx

@@ -0,0 +1,31 @@
+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 font-bold text-foreground',
+    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 };

package/lib/components/form.tsx

@@ -0,0 +1,75 @@
+import type { FieldValues } from 'react-hook-form';
+import type { WithChildren } from 'twintag-types/dom';
+
+import { useEffect, useRef } from 'react';
+import { useForm } from 'react-hook-form';
+
+import { Form } from '@twintag/twintag-form/common/form';
+
+type Props = {
+  resetOnSubmit?: boolean;
+} & WithChildren;
+
+export const TwintagForm = ({ resetOnSubmit, children }: Props) => {
+  const ref = useRef<HTMLFormElement>(null);
+
+  const form = useForm();
+
+  useEffect(() => {
+    if (form.formState.isSubmitSuccessful && resetOnSubmit) {
+      form.reset();
+    }
+  }, [form.formState]);
+
+  const onValid = (data: FieldValues) => {
+    const customSubmit = new CustomEvent('twintag-form-valid', {
+      detail: data,
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+    });
+
+    ref.current?.dispatchEvent(customSubmit);
+  };
+
+  const onInvalid = (__errors: FieldValues) => {
+    const customSubmit = new CustomEvent('twintag-form-invalid', {
+      detail: __errors,
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+    });
+
+    ref.current?.dispatchEvent(customSubmit);
+  };
+
+  const onValidate = () => {
+    void form.handleSubmit(onValid, onInvalid)();
+  };
+
+  useEffect(() => {
+    const form = ref.current;
+
+    if (form) {
+      form.addEventListener('twintag-form-validate', onValidate);
+    }
+
+    return () => {
+      if (form) {
+        form.removeEventListener('twintag-form-validate', onValidate);
+      }
+    };
+  }, []);
+
+  return (
+    <Form {...form}>
+      <form
+        ref={ref}
+        className='relative space-y-4 font-tf-font'
+        onSubmit={form.handleSubmit(onValid, onInvalid)}
+      >
+        {children}
+      </form>
+    </Form>
+  );
+};

package/lib/components/index.tsx

@@ -1,4 +1,27 @@
-export { default as Form } from './Form';
-export { default as Input } from './Input';
-export { default as Label } from './Label';
-export { default as Category } from './Category';
+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[];
+};
+
+export const TwintagJsonRenderer = ({ config }: Props) => {
+  const __config = useJson(config);
+
+  if (Array.isArray(__config)) {
+    return (
+      <>
+        {__config.map((item, idx) => (
+          <Renderer key={idx} config={item} />
+        ))}
+      </>
+    );
+  }
+
+  return <Renderer config={__config} />;
+};

package/lib/index.tsx

@@ -1,56 +1,32 @@
-import type { ComponentRef, Ref } from 'react';
-import type { RawJsonComponent } from '@twintag/twintag-json-renderer/types';
+import type { ComponentProps, ElementType } from 'react';
+import type { RawJsonComponent } from '@twintag/twintag-form/types';
 
-import { forwardRef } from 'react';
+import { TwintagJsonRenderer } from '@twintag/twintag-form/components';
+import { Category } from '@twintag/twintag-form/components/category';
+import { TwintagForm } from '@twintag/twintag-form/components/form';
+import { Input } from '@twintag/twintag-form/components/Input';
+import { TwintagFormProvider } from '@twintag/twintag-form/provider';
 
-import Form from '@twintag/twintag-form//components/Form';
-import Input from '@twintag/twintag-form//components/Input';
-import Category from '@twintag/twintag-form//components/Category';
-
-import {
-  TwintagJsonRenderer,
-  TwintagJsonRegisterProvider,
-} from '@twintag/twintag-json-renderer';
-
-const blocks = new Map().set('input', Input);
-const containers = new Map().set('category', Category);
+const components = new Map<string, ElementType>()
+  .set('input', Input)
+  .set('category', Category);
 
 type Props = {
   config: RawJsonComponent[];
-  options?: {
-    variant?: string;
+  options?: Partial<{
+    variant?: ComponentProps<typeof TwintagFormProvider>['variant'];
     resetOnSubmit?: boolean;
-  };
+  }>;
 };
 
-export const TwintagForm = forwardRef(
-  ({ config, options }: Props, ref: Ref<ComponentRef<typeof Form>>) => {
-    return (
-      <TwintagJsonRegisterProvider
-        register={{
-          blocks,
-          containers,
-          custom: new Map(),
-        }}
-      >
-        <Form ref={ref} options={options}>
-          {config.map((item, idx) => (
-            <TwintagJsonRenderer
-              key={idx}
-              config={{
-                ...item,
-                props: {
-                  ...item.props,
-                  options: {
-                    ...item.props.options,
-                    variant: options?.variant,
-                  },
-                },
-              }}
-            />
-          ))}
-        </Form>
-      </TwintagJsonRegisterProvider>
-    );
-  },
-);
+export const Form = ({ config, options }: Props) => {
+  return (
+    <TwintagFormProvider variant={options?.variant} components={components}>
+      <TwintagForm resetOnSubmit={options?.resetOnSubmit}>
+        {config.map((item, idx) => (
+          <TwintagJsonRenderer key={idx} config={item} />
+        ))}
+      </TwintagForm>
+    </TwintagFormProvider>
+  );
+};

package/lib/provider.tsx

@@ -0,0 +1,36 @@
+import type { TwintagFormContext } from '@twintag/twintag-form/types';
+import type { WithChildren } from 'twintag-types/dom';
+
+import { createContext, useContext } from 'react';
+
+export const twintagFormContext = createContext<TwintagFormContext>({
+  variant: 'default',
+  components: new Map(),
+});
+
+export const useTwintagForm = () => {
+  const context = useContext(twintagFormContext);
+
+  if (!context) {
+    throw new Error('useTwintagForm must be used within a TwintagFormProvider');
+  }
+
+  return context;
+};
+
+export const TwintagFormProvider = ({
+  children,
+  variant,
+  components,
+}: TwintagFormContext & WithChildren) => {
+  return (
+    <twintagFormContext.Provider
+      value={{
+        variant,
+        components,
+      }}
+    >
+      {children}
+    </twintagFormContext.Provider>
+  );
+};

package/lib/types/index.ts

@@ -0,0 +1,37 @@
+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;
+};

package/lib/webcomponent.ts

@@ -1,17 +1,17 @@
-import install from '@twind/with-web-components';
 import r2wc from '@r2wc/react-to-web-component';
+import install from '@twind/with-web-components';
 
-import config from '../twind.config';
+import { Form } from '@twintag/twintag-form/index';
 
-import { TwintagForm } from '@twintag/twintag-form/index';
+import config from '../twind.config';
 
 const withTwind = install(config);
 
-const TwintagFormElement = r2wc(TwintagForm, {
-  props: Object.create({
+const TwintagFormElement = r2wc(Form, {
+  props: {
     config: 'json',
     options: 'json',
-  }),
+  },
   shadow: 'open',
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twintag/twintag-form",
-  "version": "0.6.0",
+  "version": "1.0.0-beta.1",
   "author": "Twintag",
   "type": "module",
   "exports": {
@@ -17,28 +17,33 @@
     "@heroicons/react": "^2.0.16",
     "@r2wc/react-to-web-component": "^2.0.3",
     "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-radio-group": "^1.1.3",
+    "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.2",
     "@storybook/react": "7.0.2",
     "@twind/core": "^1.1.3",
     "@twind/preset-autoprefix": "^1.0.7",
     "@twind/preset-tailwind": "^1.1.4",
-    "@twind/preset-tailwind-forms": "^1.1.2",
-    "@twind/preset-typography": "^1.0.7",
     "@twind/with-web-components": "^1.1.3",
+    "lucide-react": "^0.269.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.43.1",
-    "@twintag/twintag-json-renderer": "0.2.0"
+    "react-hook-form": "^7.47.0",
+    "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",
-    "eslint": "^8.38.0",
     "rollup": "^3.18.0",
-    "vite-plugin-dts": "^3.0.3",
+    "tailwindcss": "^3.3.6",
     "vite": "^4.4.9",
-    "tailwind-config": "0.2.0",
+    "vite-plugin-dts": "^3.0.3",
+    "eslint-config-custom": "1.0.0",
     "tsconfig": "0.0.0",
     "twintag-types": "0.2.0"
   },
@@ -46,7 +51,10 @@
     "access": "public"
   },
   "scripts": {
+    "dev": "vite",
     "build": "tsc && vite build",
-    "lint": "eslint lib --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
+    "lint": "eslint . --ext .ts,.tsx",
+    "format": "prettier --write \"**/*.{ts,md,tsx,cjs,mjs,json}\" --ignore-path ../../.gitignore",
+    "format:check": "prettier --check \"**/*.{ts,tsx,cjs,mjs,json}\" --ignore-path ../../.gitignore"
   }
 }

package/prettier.config.mjs

@@ -0,0 +1,26 @@
+import baseConfig from '../../prettier.config.mjs';
+
+/**
+ * @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions &
+ *       import("@ianvs/prettier-plugin-sort-imports").PluginConfig}
+ */
+const config = {
+  ...baseConfig,
+  importOrder: [
+    '<TYPES>^react$',
+    '<TYPES>',
+    '<TYPES>^@/.*$',
+    '<TYPES>^[./]',
+    '',
+    '^zod$',
+    '^react$',
+    '<THIRD_PARTY_MODULES>',
+    '',
+    '^@twintag/twintag-form/.*$',
+    '^@/.*$',
+    '',
+    '^[./]',
+  ],
+};
+
+export default config;

package/tailwind.config.ts

@@ -0,0 +1,43 @@
+import type { Config } from 'tailwindcss';
+
+import { fontFamily } from 'tailwindcss/defaultTheme';
+
+const config = {
+  content: ['./dev/main.tsx', './lib/**/*.{ts,tsx}', './index.html'],
+  theme: {
+    extend: {
+      colors: {
+        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>)',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--tf-accent) / <alpha-value>)',
+          foreground: 'hsl(var(--tf-accent-foreground) / <alpha-value>)',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--tf-destructive) / <alpha-value>)',
+          foreground: 'hsl(var(--tf-destructive-foreground) / <alpha-value>)',
+        },
+        muted: {
+          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>)',
+      },
+      borderRadius: {
+        lg: `var(--tf-radius)`,
+        md: `calc(var(--tf-radius) - 2px)`,
+        sm: 'calc(var(--tf-radius) - 4px)',
+      },
+      fontFamily: {
+        'tf-font': ['var(--tf-font)', ...fontFamily.sans],
+      },
+    },
+  },
+} satisfies Config;
+
+export default config;

package/tsconfig.json

@@ -1,7 +1,16 @@
 {
   "extends": "tsconfig/vite.json",
-  "include": ["lib", "types.d.ts", "scripts"],
-  "exclude": ["dist"],
+  "include": [
+    ".eslintrc.cjs",
+    "prettier.config.mjs",
+    "lib",
+    "dev",
+    "scripts",
+    "types.d.ts",
+    "tailwind.config.ts",
+    "vite.config.ts"
+  ],
+  "exclude": ["dist", "build", "node_modules"],
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
@@ -17,6 +26,8 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+
+    "allowJs": true
   }
 }

package/twind.config.ts

@@ -1,29 +1,12 @@
 import { defineConfig } from '@twind/core';
 import presetAutoprefix from '@twind/preset-autoprefix';
 import presetTailwind from '@twind/preset-tailwind';
-import presetTypography from '@twind/preset-typography';
-import presetTailwindForms from '@twind/preset-tailwind-forms';
+
+import tailwindConfig from './tailwind.config';
 
 export default defineConfig({
   theme: {
-    extend: {
-      colors: {
-        primary: 'var(--tt-clr-primary,black)',
-        accent: 'var(--tt-clr-accent,blue)',
-        label: 'var(--tt-clr-label,black)',
-        input: 'var(--tt-clr-input,black)',
-        placeholder: 'var(--tt-clr-placeholder,#94a3b8)',
-        'category-label': 'var(--tt-clr-category-label,black)',
-      },
-      fontFamily: {
-        'ff-text': ['var(--tt-ff-text)', 'Helvetica', 'Arial', 'sans-serif'],
-      },
-    },
+    extend: tailwindConfig.theme.extend,
   },
-  presets: [
-    presetAutoprefix(),
-    presetTailwind(),
-    presetTypography(),
-    presetTailwindForms(),
-  ],
+  presets: [presetAutoprefix(), presetTailwind()],
 });

package/vite.config.ts

@@ -1,6 +1,6 @@
+import react from '@vitejs/plugin-react-swc';
 import { resolve } from 'pathe';
 import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react-swc';
 import dts from 'vite-plugin-dts';
 
 // https://vitejs.dev/config/

package/dist/components/Category/__styles.d.ts

@@ -1,29 +0,0 @@
-import { TVConfig } from 'tailwind-variants/dist/config.js';
-import { TVReturnType } from 'tailwind-variants';
-export declare const categoryStyle: TVReturnType<{
-    variant: {};
-}, {
-    container: string;
-    span: string;
-    items: string;
-}, undefined, TVConfig<{
-    variant: {};
-}, {
-    variant: {};
-}>, {
-    variant: {};
-}, {
-    container: string;
-    span: string;
-    items: string;
-}, TVReturnType<{
-    variant: {};
-}, {
-    container: string;
-    span: string;
-    items: string;
-}, undefined, TVConfig<{
-    variant: {};
-}, {
-    variant: {};
-}>, unknown, unknown, undefined>>;

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

@@ -1,8 +0,0 @@
-import type { FC } from 'react';
-import type { VariantProps } from 'tailwind-variants';
-import type { WithChildren } from 'twintag-types/dom';
-import type { CommonProps } from '../Input/__props';
-import { categoryStyle } from './__styles';
-type Props = CommonProps<VariantProps<typeof categoryStyle>['variant']> & WithChildren;
-declare const Category: FC<Props>;
-export default Category;

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

@@ -1,12 +0,0 @@
-import { ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
-/// <reference types="react" />
-declare const Form: ForwardRefExoticComponent<{
-    options?: {
-        resetOnSubmit?: boolean | undefined;
-    } | undefined;
-} & {
-    children?: ReactNode;
-} & RefAttributes<{
-    validate?: (() => void) | undefined;
-}>>;
-export default Form;

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

@@ -1,10 +0,0 @@
-export type CommonProps<TVariant> = {
-    label: string;
-    bind: string;
-    checked?: boolean;
-    options?: {
-        variant?: TVariant;
-        placeholder?: string;
-        optionalField?: boolean;
-    };
-};