@twintag/twintag-form 0.4.1 → 0.5.0

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';
 
-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>
-    );
-  }
-
-  if (block) {
-    const Component = block;
-
-    return (
-      <Component
-        key={key}
-        subtype={subtype}
-        label={label}
-        bind={bind}
-        {...rest}
-      />
+          ))}
+        </Form>
+      </TwintagJsonRegisterProvider>
     );
   }
-
-  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

@@ -76,7 +76,8 @@ 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:
+      'w-full ring-0 placeholder:text-placeholder focus:ring-0 border-2 border-transparent text-input',
   },
   variants: {
     variant: {

package/lib/webcomponent.ts

@@ -3,7 +3,7 @@ import r2wc from '@r2wc/react-to-web-component';
 
 import config from '../twind.config';
 
-import TwintagForm from './index';
+import { TwintagForm } from '@twintag-form/index';
 
 const withTwind = install(config);
 

package/package.json

@@ -1,17 +1,15 @@
 {
   "name": "@twintag/twintag-form",
-  "version": "0.4.1",
+  "version": "0.5.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"
     }
   },
@@ -29,7 +27,8 @@
     "@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.1.0"
   },
   "devDependencies": {
     "@rollup/plugin-typescript": "^11.1.1",
@@ -38,18 +37,16 @@
     "@types/react-dom": "^18.0.11",
     "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",
+    "tailwind-config": "0.1.0",
     "tsconfig": "0.0.0",
-    "twintag-types": "0.0.0"
+    "twintag-types": "0.1.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

@@ -3,11 +3,12 @@
   "include": ["lib", "types.d.ts", "scripts"],
   "exclude": ["dist"],
   "compilerOptions": {
+    "moduleResolution": "Bundler",
+    "declaration": true,
+    "declarationMap": false,
     "baseUrl": ".",
     "paths": {
       "@twintag-form/*": ["./lib/*"]
     },
-    "outDir": "./dist",
-    "declaration": true
   }
 }

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-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__/**'],
+    }),
+  ],
+});