@twintag/twintag-form 1.1.1 → 1.2.1

package/dist/twintag-form.webcomponent.js

@@ -4746,6 +4746,7 @@ const kr = {
   },
   presets: [Bt(), yr()]
 }), Cr = Mt(Sr), zr = St(pt, {
+  // @ts-expect-error: ts limitation
   props: {
     config: "json",
     options: "json"

package/index.html

@@ -1,15 +1,26 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Twintag Form</title>
-  </head>
-  <body>
-    <div style="margin-inline: auto; max-width: 32rem; background: hsl(var(--tf-background)); padding: 2rem">
-      <twintag-form></twintag-form>
-    </div>
-    <script type="module" src="./dev/main.tsx"></script>
-  </body>
-</html>
-
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Twintag Form</title>
+  </head>
+  <body>
+    <div
+      style="
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        padding: 2rem;
+      "
+    >
+      <div>
+        <button id="get-values">Get Values</button>
+        <button id="submit">Submit</button>
+      </div>
+      <div style="max-width: 32rem; background: hsl(var(--tf-background))">
+        <twintag-form></twintag-form>
+      </div>
+    </div>
+    <script type="module" src="./dev/main.tsx"></script>
+  </body>
+</html>

package/lib/components/form.tsx

@@ -1,7 +1,7 @@
 import type { FieldValues } from 'react-hook-form';
 import type { WithChildren } from 'twintag-types/dom';
 
-import { useEffect, useRef } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
 import { useForm } from 'react-hook-form';
 
 import { Form } from '@twintag/twintag-form/common/form';
@@ -11,81 +11,94 @@ type Props = {
   resetOnSubmit?: boolean;
 } & WithChildren;
 
-export const TwintagForm = ({
-  defaultValues,
-  resetOnSubmit,
-  children,
-}: Props) => {
-  const ref = useRef<HTMLFormElement>(null);
-
-  const form = useForm({
-    defaultValues,
-  });
-
-  useEffect(() => {
-    if (form.formState.isSubmitSuccessful && resetOnSubmit) {
-      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,
-      cancelable: false,
-      composed: true,
+export const TwintagForm = forwardRef<HTMLFormElement, Props>(
+  ({ defaultValues, resetOnSubmit, children }, fowardedRef) => {
+    const ref = useRef<HTMLFormElement>(null);
+
+    const form = useForm({
+      defaultValues,
     });
 
-    ref.current?.dispatchEvent(customSubmit);
-  };
+    useImperativeHandle(fowardedRef, () => ref.current!);
 
-  const onInvalid = (__errors: FieldValues) => {
-    const customSubmit = new CustomEvent('twintag-form-invalid', {
-      detail: __errors,
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-    });
+    useEffect(() => {
+      if (form.formState.isSubmitSuccessful && resetOnSubmit) {
+        if (defaultValues) {
+          form.reset(
+            Object.keys(defaultValues).reduce(
+              (acc, key) => ({ ...acc, [key]: '' }),
+              {},
+            ),
+          );
+        }
+      }
+    }, [form.formState]);
+
+    const onValid = (data: FieldValues) => {
+      const eventWithValidData = new CustomEvent('twintag-form-valid', {
+        detail: data,
+        bubbles: true,
+        cancelable: false,
+        composed: true,
+      });
+
+      ref.current?.dispatchEvent(eventWithValidData);
+    };
+
+    const onInvalid = (__errors: FieldValues) => {
+      const eventWithInvalidData = new CustomEvent('twintag-form-invalid', {
+        detail: __errors,
+        bubbles: true,
+        cancelable: false,
+        composed: true,
+      });
 
-    ref.current?.dispatchEvent(customSubmit);
-  };
+      ref.current?.dispatchEvent(eventWithInvalidData);
+    };
+
+    const onValidate = () => {
+      void form.handleSubmit(onValid, onInvalid)();
+    };
+
+    const onGetValues = () => {
+      const values = form.getValues();
 
-  const onValidate = () => {
-    void form.handleSubmit(onValid, onInvalid)();
-  };
+      const eventWithValues = new CustomEvent('twintag-form-values', {
+        detail: values,
+        bubbles: true,
+        cancelable: false,
+        composed: true,
+      });
 
-  useEffect(() => {
-    const form = ref.current;
+      ref.current?.dispatchEvent(eventWithValues);
+    };
 
-    if (form) {
-      form.addEventListener('twintag-form-validate', onValidate);
-    }
+    useEffect(() => {
+      const form = ref.current;
 
-    return () => {
       if (form) {
-        form.removeEventListener('twintag-form-validate', onValidate);
+        form.addEventListener('twintag-form-validate', onValidate);
+        form.addEventListener('twintag-form-get_values', onGetValues);
       }
-    };
-  }, []);
-
-  return (
-    <Form {...form}>
-      <form
-        id='twintag-form'
-        ref={ref}
-        className='relative space-y-4 font-tf-font'
-        onSubmit={form.handleSubmit(onValid, onInvalid)}
-      >
-        {children}
-      </form>
-    </Form>
-  );
-};
+
+      return () => {
+        if (form) {
+          form.removeEventListener('twintag-form-validate', onValidate);
+          form.removeEventListener('twintag-form-get_values', onGetValues);
+        }
+      };
+    }, []);
+
+    return (
+      <Form {...form}>
+        <form
+          ref={ref}
+          className='relative space-y-4 font-tf-font'
+          onSubmit={form.handleSubmit(onValid, onInvalid)}
+        >
+          {children}
+        </form>
+      </Form>
+    );
+  },
+);

package/lib/index.tsx

@@ -1,6 +1,8 @@
 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';
@@ -15,17 +17,19 @@ type Props = {
   }>;
 };
 
-export const Form = ({ config, options }: Props) => {
-  return (
-    <TwintagFormProvider variant={options?.variant} components={components}>
-      <TwintagForm
-        defaultValues={options?.defaultValues}
-        resetOnSubmit={options?.resetOnSubmit}
-      >
-        {config.map((item, idx) => (
-          <TwintagJsonRenderer key={idx} config={item} />
-        ))}
-      </TwintagForm>
-    </TwintagFormProvider>
-  );
-};
+export const Form = forwardRef<HTMLFormElement, Props>(
+  ({ config, options }) => {
+    return (
+      <TwintagFormProvider variant={options?.variant} components={components}>
+        <TwintagForm
+          defaultValues={options?.defaultValues}
+          resetOnSubmit={options?.resetOnSubmit}
+        >
+          {config.map((item, idx) => (
+            <TwintagJsonRenderer key={idx} config={item} />
+          ))}
+        </TwintagForm>
+      </TwintagFormProvider>
+    );
+  },
+);

package/lib/webcomponent.ts

@@ -8,6 +8,7 @@ import config from '../twind.config';
 const withTwind = install(config);
 
 const TwintagFormElement = r2wc(Form, {
+  // @ts-expect-error: ts limitation
   props: {
     config: 'json',
     options: 'json',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twintag/twintag-form",
-  "version": "1.1.1",
+  "version": "1.2.1",
   "author": "Twintag",
   "type": "module",
   "exports": {
@@ -62,7 +62,7 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "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"
+    "format": "prettier --write \"**/*.{ts,md,tsx,cjs,mjs,json,html}\" --ignore-path ../../.gitignore",
+    "format:check": "prettier --check \"**/*.{ts,md,tsx,cjs,mjs,json,html}\" --ignore-path ../../.gitignore"
   }
 }