@axdspub/axiom-ui-forms 0.1.0

package/src/Form/testData/exampleParticle.json

@@ -0,0 +1,112 @@
+{
+    "label": "New Form",
+    "id": "newForm",
+    "fields": [
+      {
+        "id": "title",
+        "label": "Title",
+        "type": "text",
+        "required": true
+      },
+      {
+        "id": "scenario",
+        "label": "Scenario",
+        "type": "select",
+        "required": true,
+        "options": [
+          { "label": "Larval Fish", "value": "larval_fish" },
+          { "label": "Search and Rescue", "value": "search_and_rescue" },
+          { "label": "Oil Spill", "value": "oil_spill" },
+          { "label": "Physics", "value": "physics" }
+        ]
+      },
+      {
+        "id": "hatched",
+        "label": "Hatched",
+        "type": "boolean",
+        "conditions": { "dependsOn": "scenario", "value": "larval_fish" }
+      },
+      {
+        "id": "emulsification",
+        "label": "Emulsification",
+        "type": "boolean",
+        "conditions": { "dependsOn": "scenario", "value": "oil_spill" }
+      },
+      {
+        "id": "dispersion",
+        "label": "Dispersion",
+        "type": "boolean",
+        "conditions": { "dependsOn": "scenario", "value": "oil_spill" }
+      },
+      {
+        "id": "evaporation",
+        "label": "Evaporation",
+        "type": "boolean",
+        "conditions": { "dependsOn": "scenario", "value": "oil_spill" }
+      },
+      {
+        "id": "update_oil_film_thickness",
+        "label": "Update Oil Film Thickness",
+        "type": "boolean",
+        "conditions": { "dependsOn": "scenario", "value": "oil_spill" }
+      },
+      {
+        "id": "biodegradation",
+        "label": "Biodegradation",
+        "type": "boolean",
+        "conditions": { "dependsOn": "scenario", "value": "oil_spill" }
+      },
+      {
+        "id": "object_type",
+        "label": "Object Type",
+        "type": "select",
+        "required": true,
+        "conditions": { "dependsOn": "scenario", "value": "search_and_rescue" },
+        "options": [
+          { "label": "Person", "value": "person" },
+          { "label": "Boat", "value": "boat" },
+          { "label": "Aircraft", "value": "aircraft" },
+          { "label": "Vehicle", "value": "vehicle" }
+        ]
+      },
+      {
+        "id": "test_section",
+        "label": "Test Section",
+        "type": "object",
+        "skip_path": true,
+        "conditions": { "dependsOn": "scenario", "value": "oil_spill" },
+        "fields": [
+          {
+            "id": "test_field",
+            "label": "Test Field",
+            "type": "text"
+          },
+          {
+            "id": "test_field_2",
+            "label": "Something about biodegradation",
+            "description": "This field won't get cleaned up when we change from oil",
+            "type": "text",
+            "conditions": {
+              "dependsOn": "biodegradation"
+            }
+
+          },
+          {
+            "id": "sub_container",
+            "type": "object",
+            "skip_path": true,
+            "label": "Sub Container",
+            "fields": [
+              {
+                "id": "sub_sub_field",
+                "label": "Sub Field",
+                "type": "text"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+  
+  

package/src/Form/testData/fields.json

@@ -0,0 +1,151 @@
+[
+  {
+    "id": "short",
+    "label": "Test component",
+    "type": "text",
+    "required": false
+  },
+  {
+    "id": "long",
+    "label": "Long string component",
+    "type": "long_text",
+    "required": false,
+    "multiple": false
+  },
+  {
+    "id": "description",
+    "label": "Description",
+    "type": "long_text",
+    "required": false
+  },
+  {
+    "id": "agree",
+    "label": "Do u agree?",
+    "type": "boolean",
+    "required": true
+  },
+  {
+    "label": "Select one",
+    "id": "color",
+    "type": "select",
+    "required": true,
+    "multiple": false,
+    "options": [
+      {
+        "label": "Red",
+        "value": "red"
+      },
+      {
+        "label": "Green",
+        "value": "green"
+      },
+      {
+        "label": "Blue",
+        "value": "blue"
+      }
+    ]
+  },
+  {
+    "label": "Pick a size",
+    "id": "size",
+    "type": "radio",
+    "required": false,
+    "layout": "vertical",
+    "multiple": true,
+    "options": [
+      {
+        "label": "Small",
+        "value": "small"
+      },
+      {
+        "label": "Medium",
+        "value": "medium"
+      },
+      {
+        "label": "Large",
+        "value": "large"
+      }
+    ]
+  },
+  {
+    "label": "Address",
+    "id": "address",
+    "type": "object",
+    "required": true,
+    "layout": "vertical",
+    "multiple": true,
+    "fields": [
+      {
+        "id": "street",
+        "label": "Street",
+        "type": "text",
+        "required": true
+      },
+      {
+        "id": "city_state_zip",
+        "type": "object",
+        "required": false,
+        "layout": "horizontal",
+        "label": "",
+        "fields": [
+          {
+            "id": "city",
+            "label": "City",
+            "type": "text",
+            "required": true
+          },
+          {
+            "id": "state",
+            "label": "State",
+            "type": "text",
+            "required": true
+          },
+          {
+            "id": "zip",
+            "label": "Zip",
+            "type": "text",
+            "required": true
+          }
+        ]
+      },
+      {
+        "id": "notes",
+        "label": "Notes",
+        "type": "text",
+        "multiple": true
+      },
+      {
+        "id": "family",
+        "label": "Family members",
+        "type": "object",
+        "multiple": true,
+        "fields": [
+          {
+            "id": "name",
+            "label": "Name",
+            "type": "object",
+            "layout": "horizontal",
+            "fields": [
+              {
+                "id": "firstName",
+                "label": "First name",
+                "type": "text"
+              },
+              {
+                "id": "lastName",
+                "label": "Last name",
+                "type": "text"
+              }
+            ]
+          },
+          {
+            "id": "age",
+            "label": "Age",
+            "type": "text",
+            "required": true
+          }
+        ]
+      }
+    ]
+  }
+]

package/src/Form/testData/nestedForm.json

@@ -0,0 +1,156 @@
+{
+    "label": "Nested test form",
+    "id": "nestedTestForm",
+    "fields": [
+        {
+          "id": "short",
+          "label": "Test component",
+          "type": "text",
+          "required": false
+        },
+        {
+          "id": "long",
+          "label": "Long string component",
+          "type": "long_text",
+          "required": false,
+          "multiple": false
+        },
+        {
+          "id": "description",
+          "label": "Description",
+          "type": "long_text",
+          "required": false
+        },
+        {
+          "id": "agree",
+          "label": "Do u agree?",
+          "type": "boolean",
+          "required": true
+        },
+        {
+          "label": "Select one",
+          "id": "color",
+          "type": "select",
+          "required": true,
+          "multiple": false,
+          "options": [
+            {
+              "label": "Red",
+              "value": "red"
+            },
+            {
+              "label": "Green",
+              "value": "green"
+            },
+            {
+              "label": "Blue",
+              "value": "blue"
+            }
+          ]
+        },
+        {
+          "label": "Pick a size",
+          "id": "size",
+          "type": "radio",
+          "required": false,
+          "layout": "vertical",
+          "multiple": true,
+          "options": [
+            {
+              "label": "Small",
+              "value": "small"
+            },
+            {
+              "label": "Medium",
+              "value": "medium"
+            },
+            {
+              "label": "Large",
+              "value": "large"
+            }
+          ]
+        },
+        {
+          "label": "Address",
+          "id": "address",
+          "type": "object",
+          "required": true,
+          "layout": "vertical",
+          "multiple": true,
+          "fields": [
+            {
+              "id": "street",
+              "label": "Street",
+              "type": "text",
+              "required": true
+            },
+            {
+              "id": "city_state_zip",
+              "type": "object",
+              "required": false,
+              "layout": "horizontal",
+              "label": "",
+              "fields": [
+                {
+                  "id": "city",
+                  "label": "City",
+                  "type": "text",
+                  "required": true
+                },
+                {
+                  "id": "state",
+                  "label": "State",
+                  "type": "text",
+                  "required": true
+                },
+                {
+                  "id": "zip",
+                  "label": "Zip",
+                  "type": "text",
+                  "required": true
+                }
+              ]
+            },
+            {
+              "id": "notes",
+              "label": "Notes",
+              "type": "text",
+              "multiple": true
+            },
+            {
+              "id": "family",
+              "label": "Family members",
+              "type": "object",
+              "multiple": true,
+              "fields": [
+                {
+                  "id": "name",
+                  "label": "Name",
+                  "type": "object",
+                  "layout": "horizontal",
+                  "fields": [
+                    {
+                      "id": "firstName",
+                      "label": "First name",
+                      "type": "text"
+                    },
+                    {
+                      "id": "lastName",
+                      "label": "Last name",
+                      "type": "text"
+                    }
+                  ]
+                },
+                {
+                  "id": "age",
+                  "label": "Age",
+                  "type": "text",
+                  "required": true
+                }
+              ]
+            }
+          ]
+        }
+      ]
+
+}

package/src/Form/testData/testSchema.json

@@ -0,0 +1,89 @@
+{
+    "$id": "/axds/test.schema.json",
+    "type": "object",
+    "required": [ "short", "long", "size" ],
+    "properties": {
+        "short":{
+            "type": "string",
+            "maxLength": 100
+        },
+        "long": {
+            "type": "string"
+        },
+        "description": {
+            "type": "string"
+        },
+        "agree": {
+            "type": "boolean"
+        },
+        "color": {
+            "type": "string",
+            "enum": [
+                {"const": "red"},
+                {"const": "blue"},
+                {"const": "green"}
+              ]
+        },
+        "size": {
+            "type": "array",
+            "items": {
+                "type": "string",
+                "enum": [
+                    {"const": "small"},
+                    {"const": "medium"},
+                    {"const": "large"}
+                  ]
+            }
+        },
+        "address": {
+            "type": "array",
+            "items": {
+                "type": "object",
+                "properties": {
+                    "street": {
+                        "type": "string",
+                        "maxLength": 100
+                    },
+                    "city": {
+                        "type": "string",
+                        "maxLength": 100
+                    },
+                    "state": {
+                        "type": "string",
+                        "maxLength": 20
+                    },
+                    "zip": {
+                        "type": "string",
+                        "maxLength": 20
+                    },
+                    "notes": {
+                        "type": "array",
+                        "items": {
+                            "type": "string"
+                        }
+                    },
+                    "family": {
+                        "type": "array",
+                        "items": {
+                            "type": "object",
+                            "properties": {
+                                "firstName": {
+                                    "type": "string",
+                                    "maxLength": 100
+                                },
+                                "lastname": {
+                                    "type": "string",
+                                    "maxLength": 100
+                                },
+                                "age": {
+                                    "type": "integer"
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+    }
+}

package/src/SetTester.tsx

@@ -0,0 +1,61 @@
+import { TextArea } from '@axdspub/axiom-ui-utilities'
+import { set, isArray, isObject } from 'lodash'
+import React, { type ReactElement, useEffect, useState } from 'react'
+
+function flattenObjectToPaths (obj: any, prefix: string = ''): Record<string, any> {
+  return Object.keys(obj).reduce((acc: Record<string, any>, key) => {
+    const value = obj[key]
+    const newKey = prefix.length > 0 ? `${prefix}.${key}` : key
+
+    if (isObject(value) && !isArray(value)) {
+      Object.assign(acc, flattenObjectToPaths(value, newKey))
+    } else {
+      acc[newKey] = value
+    }
+
+    return acc
+  }, {})
+}
+
+const SetTester = (): ReactElement => {
+  const [vals, setVals] = useState('')
+  const [paths, setPaths] = useState('')
+  const [out, setOut] = useState({})
+  useEffect(() => {
+    const newOut = {}
+    const pathsToEval = paths.split('\n')
+    const valsToEval = vals.split('\n')
+    pathsToEval.forEach((path, i) => {
+      set(newOut, path.replace(/\s+/g, ''), valsToEval[i] ?? '')
+    })
+    setOut(newOut)
+  }, [paths, vals])
+  return (
+        <div className='p-20'>
+        <h1 className='font-bold font-xl mb-4'>Set Tester</h1>
+        <div className='flex flex-col gap-4'>
+        <TextArea id='value' testId='value' label='Value' value={vals} onChange={(e) => {
+          setVals(e ?? '')
+        }} />
+        <TextArea id='path' testId='path' label='Path' value={paths} onChange={(e) => {
+          setPaths(e ?? '')
+        }} />
+        <div>
+            <p>Output</p>
+        <pre className='p-10 bg-slate-200'>
+            {JSON.stringify(out, null, 2)}
+        </pre>
+        <div>
+          <p>Reverse</p>
+          <pre className='p-10 bg-slate-200'>
+            {JSON.stringify(flattenObjectToPaths(out), null, 2)}
+            </pre>
+
+        </div>
+        </div>
+        </div>
+        </div>
+  )
+}
+
+export default SetTester

package/src/helpers.ts

@@ -0,0 +1,36 @@
+import { type IValueType, type IFormValues } from '@/Form/FormCreatorTypes'
+import { decode, encode } from 'cbor-x'
+
+export function jsonToBase64<T = JSON> (json: T): string {
+  const buffer = encode(json)
+  // https://github.com/hildjj/cbor2/blob/ef0e9f710a2a1c1be7c6c8c3b3665998b51921bc/web/src/encode.js#L15
+  const binString = Array.from(buffer, byte => String.fromCodePoint(byte)).join('')
+  return btoa(binString)
+}
+
+export function base64ToJson<T = JSON> (base64: string): T {
+  const decodedBinString = atob(base64)
+  const decodedBuffer = new Uint8Array(decodedBinString.split('').map(char => char.codePointAt(0) as number))
+  return decode(decodedBuffer) as T
+}
+
+export function updateUrlParam (param: string, value?: string | boolean | number | null): void {
+  const u = new URL(window.location.href)
+  if (value === null || value === undefined) {
+    u.searchParams.delete(param)
+  } else {
+    u.searchParams.set(param, String(value))
+  }
+  window.history.replaceState({}, '', u.toString())
+}
+
+export function getQueryParam (param: string): string | null {
+  const u = new URL(window.location.href)
+  return u.searchParams.get(param)
+}
+
+export function typeToFormValues (m: any = {}): IFormValues {
+  return Object.fromEntries(Object.keys(m).map(k => {
+    return [String(k), m[k] as IValueType]
+  }))
+}

package/src/index.css

@@ -0,0 +1,39 @@
+@tailwind base;
+
+
+/** 
+From: https://scottspence.com/posts/change-scrollbar-color-tailwind-css
+tailwind-scrollbar is still installed and can be used
+-w-* and -rounded-* don't seem to work with tailwind-scrollbar
+**/
+
+/* Firefox */
+body * {
+  scrollbar-width: thin;
+  scrollbar-color: #CCC;
+}
+
+/* Chrome, Edge, and Safari */
+body *::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+body *::-webkit-scrollbar-track {
+  background: #EDEDED;
+  border-radius: 5px;
+}
+
+body *::-webkit-scrollbar-thumb {
+  background-color: #999;
+  border-radius: 14px;
+  border: 0px solid #999;
+}
+
+#root {
+  height: calc(100vh);
+  width: calc(100vw);
+}
+
+@tailwind components;
+@tailwind utilities;

package/src/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import './index.css'
+// import reportWebVitals from './reportWebVitals'
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+)
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+// reportWebVitals(console.log).then(() => { }).catch(e => { console.log(e) })

package/src/library.ts

@@ -0,0 +1,3 @@
+export * from '@/Form'
+export * from '@/Form/Components'
+export * from '@/Form/FormCreatorTypes'

package/src/reportWebVitals.ts

@@ -0,0 +1,15 @@
+import { type ReportHandler } from 'web-vitals'
+
+const reportWebVitals = async (onPerfEntry?: ReportHandler): Promise<void> => {
+  if ((onPerfEntry != null) && onPerfEntry instanceof Function) {
+    await import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry)
+      getFID(onPerfEntry)
+      getFCP(onPerfEntry)
+      getLCP(onPerfEntry)
+      getTTFB(onPerfEntry)
+    })
+  }
+}
+
+export default reportWebVitals