@twintag/twintag-form 0.4.2 → 0.6.0

package/lib/components/Label/index.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import type { WithChildren } from 'twintag-types/dom';
 
-import { labelStyle } from '@twintag-form/styles';
+import { labelStyle } from '@twintag/twintag-form/styles';
 
 type Props = {
   required?: boolean;
@@ -15,7 +15,8 @@ const Label: FC<Props> = ({ className, required, children }) => {
 
   return (
     <span className={style}>
-      {children} {required ? '*' : ''}
+      {children}{' '}
+      {required ? <span className='text-xs text-red-500'>*</span> : <></>}
     </span>
   );
 };

package/lib/components/index.tsx

@@ -1,6 +1,4 @@
-import Form from './Form';
-import Input from './Input';
-import Label from './Label';
-import Category from './Category';
-
-export { Form, Input, Label, Category };
+export { default as Form } from './Form';
+export { default as Input } from './Input';
+export { default as Label } from './Label';
+export { default as Category } from './Category';

package/lib/index.tsx

@@ -1,178 +1,56 @@
-import type { FC, ReactNode } from 'react';
+import type { ComponentRef, Ref } from 'react';
+import type { RawJsonComponent } from '@twintag/twintag-json-renderer/types';
 
-import { LabelToString } from 'twintag-types/dom';
+import { forwardRef } from 'react';
 
-import Form from '@twintag-form/components/Form';
-import Input from '@twintag-form/components/Input';
-import Category from '@twintag-form/components/Category';
+import Form from '@twintag/twintag-form//components/Form';
+import Input from '@twintag/twintag-form//components/Input';
+import Category from '@twintag/twintag-form//components/Category';
 
-type Config = {
-  key?: number;
-  type?: any;
-  subtype?: string;
-  label?: string;
-  items?: any[];
-  bind?: string;
-  options?: Record<string, any>;
-};
-
-type Component = {
-  subtype?: string;
-  label?: string;
-  bind?: string;
-  children?: ReactNode;
-  options?: Record<string, any>;
-};
-
-type Format = {
-  $config: Config;
-  $blocks?: Map<string, FC<Component>>;
-  $containers?: Map<string, FC<Component>>;
-  $available?: Map<string, FC<Component>>;
-};
-
-const format = ({ $config, $blocks, $containers, $available }: Format) => {
-  const config: Config & {
-    block?: FC<Component>;
-    container?: FC<Component>;
-  } = { ...$config };
-
-  const typeLength = config.type.length;
-  const colonIndex = config.type.indexOf(':');
-
-  const typeFiltered = config.type.substring(
-    0,
-    colonIndex > 0 ? config.type.lastIndexOf(':') : typeLength + 1
-  );
-  const subtypeFiltered =
-    colonIndex > 0 && colonIndex + 1 !== typeLength
-      ? config.type.substring(colonIndex + 1, typeLength + 1)
-      : undefined;
-
-  const isTypeAvailable = $available?.has(typeFiltered);
-
-  if (isTypeAvailable) {
-    const block = $blocks?.get(typeFiltered);
-    const container = $containers?.get(typeFiltered);
-
-    config.type = typeFiltered;
-    config.subtype = config.subtype ? config.subtype : subtypeFiltered;
-    config.block = block;
-    config.container = container;
-  }
-
-  if (config.label) config.label = LabelToString.parse(config.label);
-
-  if (config.items && Array.isArray(config.items))
-    config.items = config.items.map((item) =>
-      format({
-        $config: item,
-        $available,
-        $blocks,
-        $containers,
-      })
-    );
-
-  return config;
-};
-
-type Params = {
-  $config: Config;
-  $blocks?: Map<string, FC<Component>>;
-  $containers?: Map<string, FC<Component>>;
-};
-
-const useConfig = (params: Params) => {
-  const available = new Map([
-    ...new Map(params.$blocks),
-    ...new Map(params.$containers),
-  ]);
-
-  return format({
-    ...params,
-    $available: available,
-  });
-};
+import {
+  TwintagJsonRenderer,
+  TwintagJsonRegisterProvider,
+} from '@twintag/twintag-json-renderer';
 
 const blocks = new Map().set('input', Input);
-const containers = new Map().set('form', Form).set('category', Category);
+const containers = new Map().set('category', Category);
 
-type RendererProps = {
-  config: Config & {
-    block?: FC<Component>;
-    container?: FC<Component>;
+type Props = {
+  config: RawJsonComponent[];
+  options?: {
+    variant?: string;
+    resetOnSubmit?: boolean;
   };
 };
 
-const FormRenderer: FC<RendererProps> = ({ config }) => {
-  const { key, type, subtype, label, bind, items, block, container, ...rest } =
-    config;
-
-  if (!type) return null;
-
-  if (container) {
-    const Component = container;
-
+export const TwintagForm = forwardRef(
+  ({ config, options }: Props, ref: Ref<ComponentRef<typeof Form>>) => {
     return (
-      <Component key={key} subtype={subtype} label={label} {...rest}>
-        {items && Array.isArray(items) ? (
-          items.map((item, idx) => (
-            <FormRenderer
+      <TwintagJsonRegisterProvider
+        register={{
+          blocks,
+          containers,
+          custom: new Map(),
+        }}
+      >
+        <Form ref={ref} options={options}>
+          {config.map((item, idx) => (
+            <TwintagJsonRenderer
               key={idx}
               config={{
-                ...rest,
                 ...item,
-                options: {
-                  ...item.options,
-                  variant: rest.options?.variant,
+                props: {
+                  ...item.props,
+                  options: {
+                    ...item.props.options,
+                    variant: options?.variant,
+                  },
                 },
               }}
             />
-          ))
-        ) : (
-          <></>
-        )}
-      </Component>
+          ))}
+        </Form>
+      </TwintagJsonRegisterProvider>
     );
-  }
-
-  if (block) {
-    const Component = block;
-
-    return (
-      <Component
-        key={key}
-        subtype={subtype}
-        label={label}
-        bind={bind}
-        {...rest}
-      />
-    );
-  }
-
-  return null;
-};
-
-type Props = {
-  config: Config[];
-  options?: {
-    variant?: string;
-    resetOnSubmit?: boolean;
-  };
-};
-
-const TwintagForm: FC<Props> = ({ config, options }) => {
-  const __config = useConfig({
-    $blocks: blocks,
-    $containers: containers,
-    $config: {
-      type: 'form',
-      items: config ? config : [],
-      options,
-    },
-  });
-
-  return <FormRenderer config={__config} />;
-};
-
-export default TwintagForm;
+  },
+);

package/lib/styles.ts

@@ -10,9 +10,9 @@ export const containerStyle = tv({
 
 export const categoryStyle = tv({
   slots: {
-    container: 'w-full grid mt-4 first:mt-0',
+    container: 'mt-4 grid w-full first:mt-0',
     span: 'text-category-label',
-    items: 'grid mt-2 mb-4 empty:mb-0',
+    items: 'mb-4 mt-2 grid empty:mb-0',
   },
   variants: {
     variant: {},
@@ -22,10 +22,10 @@ export const categoryStyle = tv({
 export const checkboxStyle = tv({
   slots: {
     container: containerStyle({
-      className: 'flex gap-4 items-center w-full',
+      className: 'flex w-full items-center gap-4',
     }),
     checkbox:
-      'flex appearance-none items-center justify-center bg-white outline-none ring-0 border-2 border-primary focus:ring-0 focus:border-accent',
+      'border-primary focus:border-accent flex appearance-none items-center justify-center border-2 bg-white outline-none ring-0 focus:ring-0',
   },
   variants: {
     variant: {
@@ -45,23 +45,23 @@ export const checkboxStyle = tv({
 export const fileStyle = tv({
   slots: {
     container: containerStyle({
-      className: 'w-full block',
+      className: 'block w-full',
     }),
     span: '',
     input:
-      'w-full cursor-pointer ring-0 focus:ring-0 border-2 border-transparent',
+      'w-full cursor-pointer border-2 border-transparent ring-0 focus:ring-0',
   },
   variants: {
     variant: {
       alpha: {
         container: 'grid gap-1.5',
         input:
-          'flex items-center justify-between gap-4 rounded-md px-3 py-2 border-slate-700/10 peer-focus:border-accent',
+          'peer-focus:border-accent flex items-center justify-between gap-4 rounded-md border-slate-700/10 px-3 py-2',
       },
       beta: {
         container: 'grid gap-0',
         input:
-          'flex items-center justify-between gap-4 py-2 border-b-slate-700/10 peer-focus:border-b-accent',
+          'peer-focus:border-b-accent flex items-center justify-between gap-4 border-b-slate-700/10 py-2',
       },
     },
   },
@@ -76,18 +76,19 @@ export const simpleStyle = tv({
       className: 'w-full',
     }),
     span: '',
-    input: 'w-full ring-0 placeholder:text-placeholder focus:ring-0 border-2 border-transparent text-input',
+    input:
+      'placeholder:text-placeholder text-input w-full border-2 border-transparent ring-0 focus:ring-0',
   },
   variants: {
     variant: {
       alpha: {
         container: 'grid gap-1.5',
-        input: 'rounded-md border-slate-700/10 focus:border-accent',
+        input: 'focus:border-accent rounded-md border-slate-700/10',
       },
       beta: {
         container: 'grid gap-0',
         input:
-          'px-0 focus:border-transparent focus:border-b-accent border-b-slate-700/10',
+          'focus:border-b-accent border-b-slate-700/10 px-0 focus:border-transparent',
       },
     },
   },
@@ -110,16 +111,16 @@ export const toggleStyle = tv({
       alpha: {
         container: 'flex justify-between',
         input:
-          'h-6 w-9 rounded-full bg-primary border border-black ring-2 focus:border-transparent focus:ring-accent data-[state=checked]:bg-white',
+          'bg-primary focus:ring-accent h-6 w-9 rounded-full border border-black ring-2 focus:border-transparent data-[state=checked]:bg-white',
         thumb:
-          'h-4 w-4 translate-x-0.5 rounded-full bg-white data-[state=checked]:translate-x-4 data-[state=checked]:bg-primary',
+          'data-[state=checked]:bg-primary h-4 w-4 translate-x-0.5 rounded-full bg-white data-[state=checked]:translate-x-4',
       },
       beta: {
         container: 'flex justify-between',
         input:
-          'h-6 w-9 rounded-full bg-primary border border-black ring-2 focus:border-transparent focus:ring-accent data-[state=checked]:bg-white',
+          'bg-primary focus:ring-accent h-6 w-9 rounded-full border border-black ring-2 focus:border-transparent data-[state=checked]:bg-white',
         thumb:
-          'h-4 w-4 translate-x-0.5 rounded-full bg-white data-[state=checked]:translate-x-4 data-[state=checked]:bg-primary',
+          'data-[state=checked]:bg-primary h-4 w-4 translate-x-0.5 rounded-full bg-white data-[state=checked]:translate-x-4',
       },
     },
   },
@@ -129,11 +130,11 @@ export const toggleStyle = tv({
 });
 
 export const submitStyle = tv({
-  base: 'w-max max-w-full mt-2',
+  base: 'mt-2 w-max max-w-full',
   variants: {
     variant: {
-      alpha: 'bg-primary text-white px-4 py-2 rounded-md',
-      beta: 'bg-primary text-white px-4 py-2',
+      alpha: 'bg-primary rounded-md px-4 py-2 text-white',
+      beta: 'bg-primary px-4 py-2 text-white',
     },
   },
   defaultVariants: {

package/lib/webcomponent.ts

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

package/package.json

@@ -1,23 +1,21 @@
 {
   "name": "@twintag/twintag-form",
-  "version": "0.4.2",
+  "version": "0.6.0",
   "author": "Twintag",
   "type": "module",
   "exports": {
     ".": {
-      "import": "./dist/index.es.js",
-      "require": "./dist/index.umd.js",
-      "types": "./dist/index.d.ts"
+      "import": "./dist/twintag-form.react.js",
+      "types": "./dist/react.d.ts"
     },
     "./webcomponent": {
-      "import": "./dist/webcomponent.es.js",
-      "require": "./dist/webcomponent.umd.js",
+      "import": "./dist/twintag-form.webcomponent.js",
       "types": "./dist/webcomponent.d.ts"
     }
   },
   "dependencies": {
     "@heroicons/react": "^2.0.16",
-    "@r2wc/react-to-web-component": "^2.0.2",
+    "@r2wc/react-to-web-component": "^2.0.3",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-switch": "^1.0.2",
     "@storybook/react": "7.0.2",
@@ -29,27 +27,26 @@
     "@twind/with-web-components": "^1.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.43.1"
+    "react-hook-form": "^7.43.1",
+    "@twintag/twintag-json-renderer": "0.2.0"
   },
   "devDependencies": {
     "@rollup/plugin-typescript": "^11.1.1",
     "@storybook/addon-actions": "^7.0.20",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
+    "@vitejs/plugin-react-swc": "^3.4.0",
     "eslint": "^8.38.0",
     "rollup": "^3.18.0",
-    "vite-plugin-dts": "^2.1.0",
-    "tailwind-config": "0.0.1",
+    "vite-plugin-dts": "^3.0.3",
+    "vite": "^4.4.9",
+    "tailwind-config": "0.2.0",
     "tsconfig": "0.0.0",
-    "twintag-types": "0.0.0"
+    "twintag-types": "0.2.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "dev": "vite",
-    "build": "tsc && node ./scripts/build.js",
-    "lint": "eslint lib --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "build": "tsc && vite build",
+    "lint": "eslint lib --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
   }
 }

package/tsconfig.json

@@ -5,9 +5,18 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@twintag-form/*": ["./lib/*"]
+      "@twintag/twintag-form/*": ["./lib/*"]
     },
-    "outDir": "./dist",
-    "declaration": true
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "declaration": false,
+    "declarationMap": false,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
   }
 }

package/twind.config.ts

@@ -8,15 +8,15 @@ export default defineConfig({
   theme: {
     extend: {
       colors: {
-        primary: 'var(--clr-primary,black)',
-        accent: 'var(--clr-accent,blue)',
-        label: 'var(--clr-label,black)',
-        input: 'var(--clr-input,black)',
-        placeholder: 'var(--clr-placeholder,#94a3b8)',
-        'category-label': 'var(--clr-category-label,black)',
+        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(--ff-text)', 'Helvetica', 'Arial', 'sans-serif'],
+        'ff-text': ['var(--tt-ff-text)', 'Helvetica', 'Arial', 'sans-serif'],
       },
     },
   },

package/vite.config.ts

@@ -0,0 +1,47 @@
+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/
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@twintag/twintag-form': resolve(__dirname, './lib'),
+    },
+  },
+  build: {
+    lib: {
+      // Could also be a dictionary or array of multiple entry points
+      entry: {
+        react: resolve(__dirname, './lib/index.tsx'),
+        webcomponent: resolve(__dirname, './lib/webcomponent.ts'),
+      },
+      name: 'twintag-form',
+      formats: ['es'],
+      // the proper extensions will be added
+      fileName: (_, entryName) => `twintag-form.${entryName}.js`,
+    },
+    rollupOptions: {
+      // make sure to externalize deps that shouldn't be bundled
+      // into your library
+      external: ['react', 'react-dom'],
+      output: {
+        // Provide global variables to use in the UMD build
+        // for externalized deps
+        globals: {
+          react: 'React',
+        },
+      },
+    },
+  },
+  plugins: [
+    react(),
+    dts({
+      entryRoot: resolve(__dirname, 'lib'),
+      insertTypesEntry: true,
+      staticImport: true,
+      exclude: ['**/__tests__/**', '**/__stories__/**'],
+    }),
+  ],
+});