feat: add devtools when in DEV mode

onebeyond · Jan 30, 2024 · 2373031 · 2373031
1 parent 665d813
commit 2373031
Show file tree

Hide file tree

Showing 4 changed files with 213 additions and 55 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
     "node": ">=10"
   },
   "scripts": {
-    "start": "rollup -c -w",
+    "start": "NODE_ENV=development rollup --config rollup.dev-config.js -w",
     "build": "rollup -c",
     "prepare": "run-s build && husky install",
     "test": "npx @guidesmiths/license-checker --failOn AGPL --outputFileName License-report --errorReportFileName License-error | run-s test:unit test:lint test:build",
@@ -43,6 +43,7 @@
     "@babel/preset-react": "^7.23.3",
     "@commitlint/cli": "^18.4.3",
     "@commitlint/config-conventional": "^18.4.3",
+    "@hookform/devtools": "^4.3.1",
     "@rollup/plugin-babel": "^5.2.2",
     "@rollup/plugin-commonjs": "^17.1.0",
     "@rollup/plugin-json": "^4.1.0",

diff --git a/rollup.dev-config.js b/rollup.dev-config.js
@@ -0,0 +1,54 @@
+import babel from '@rollup/plugin-babel'
+import peerDepsExternal from 'rollup-plugin-peer-deps-external'
+import { nodeResolve } from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
+import json from '@rollup/plugin-json'
+import replace from 'rollup-plugin-replace'
+import postcss from 'rollup-plugin-postcss'
+
+export default {
+  input: 'src/index.js',
+  output: {
+    name: 'ReactFormBuilder',
+    file: 'dist/index.js',
+    format: 'umd',
+    sourcemap: true,
+
+    globals: {
+      react: 'React',
+      'theme-ui': 'theme-ui',
+      'react-markdown': 'react-markdown',
+      'react-phone-number-input': 'react-phone-number-input',
+      'react-hook-form': 'react-hook-form',
+      'react-datepicker': 'react-datepicker',
+      'react-select': 'react-select',
+      'react-scripts': 'react-scripts',
+      'react-dom': 'ReactDOM',
+      'react-ymd-date-select': 'react-ymd-date-select'
+    }
+  },
+
+  plugins: [
+    nodeResolve(),
+    peerDepsExternal(),
+    babel({ babelHelpers: 'bundled', exclude: 'node_modules/**' }),
+    commonjs(),
+    json(),
+    postcss({
+      extensions: ['.css']
+    })
+  ],
+
+  external: [
+    'react',
+    'theme-ui',
+    'react-markdown',
+    'react-hook-form',
+    'react-phone-number-input',
+    'react-datepicker',
+    'react-scripts',
+    'react-select',
+    'react-dom',
+    'react-ymd-date-select'
+  ]
+}
diff --git a/src/builder.js b/src/builder.js
@@ -1,5 +1,10 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
+import React, { useEffect } from 'react'
+import { jsx } from 'theme-ui'
+import { useForm } from 'react-hook-form'
+import { DevTool } from '@hookform/devtools'
+
 import Button from './Fields/Button'
 import Label from './Fields/Label'
 import QuestionCheckbox from './Questions/Checkbox'
@@ -11,9 +16,6 @@ import QuestionTextarea from './Questions/Textarea'
 import QuestionDate from './Questions/Date'
 import QuestionPhone from './Questions/Phone'
 import QuestionStatic from './Questions/Static'
-import React, { useEffect } from 'react'
-import { jsx } from 'theme-ui'
-import { useForm } from 'react-hook-form'
 import QuestionMultipleCheckboxes from './Questions/MultipleCheckboxes'
 import QuestionMarkdown from './Questions/Markdown'
 import QuestionSelectImage from './Questions/SelectImage'
@@ -302,57 +304,61 @@ const FormBuilder = ({
   }
 
   return (
-    <form
-      id={idForm}
-      sx={{
-        variant:
-          form && form.layout
-            ? 'forms.container.' + (form && form.layout)
-            : 'forms.container'
-      }}
-      onSubmit={useFormObj.handleSubmit(onSubmit)}
-      {...props}
-    >
-      {form &&
-        Array.isArray(form.questions) &&
-        form.questions.map((question, i) => {
-          return (
-            <React.Fragment key={i}>
-              {QuestionsMap(question)[question.type] ||
-                QuestionsMap(question).default}
-            </React.Fragment>
-          )
-        })}
-      {form &&
-        form.callForAction &&
-        form.callForAction.map((cfa, key) => {
-          return (
-            <div sx={{ variant: 'forms.submitContainer' }} key={key}>
-              {form.accessibilityError && (
-                <div
-                  className='visuallyhidden'
-                  sx={{
-                    variant: 'text.accessibilityError',
-                    display: Object.keys(errors).length !== 0 ? 'flex' : 'none'
-                  }}
-                  aria-live='assertive'
-                >
-                  {form.accessibilityError}
-                </div>
-              )}
-              <Button
-                sx={styles.fitContent}
-                key={cfa.caption}
-                isLoading={isLoading}
-                id={cfa.id}
-                caption={cfa.caption}
-                type={cfa.type}
-                {...cfa}
-              />
-            </div>
-          )
-        })}
-    </form>
+    <>
+      <form
+        id={idForm}
+        sx={{
+          variant:
+            form && form.layout
+              ? 'forms.container.' + (form && form.layout)
+              : 'forms.container'
+        }}
+        onSubmit={useFormObj.handleSubmit(onSubmit)}
+        {...props}
+      >
+        {form &&
+          Array.isArray(form.questions) &&
+          form.questions.map((question, i) => {
+            return (
+              <React.Fragment key={i}>
+                {QuestionsMap(question)[question.type] ||
+                  QuestionsMap(question).default}
+              </React.Fragment>
+            )
+          })}
+        {form &&
+          form.callForAction &&
+          form.callForAction.map((cfa, key) => {
+            return (
+              <div sx={{ variant: 'forms.submitContainer' }} key={key}>
+                {form.accessibilityError && (
+                  <div
+                    className='visuallyhidden'
+                    sx={{
+                      variant: 'text.accessibilityError',
+                      display:
+                        Object.keys(errors).length !== 0 ? 'flex' : 'none'
+                    }}
+                    aria-live='assertive'
+                  >
+                    {form.accessibilityError}
+                  </div>
+                )}
+                <Button
+                  sx={styles.fitContent}
+                  key={cfa.caption}
+                  isLoading={isLoading}
+                  id={cfa.id}
+                  caption={cfa.caption}
+                  type={cfa.type}
+                  {...cfa}
+                />
+              </div>
+            )
+          })}
+      </form>
+      <DevTool control={useFormObj.control} />
+    </>
   )
 }