@axdspub/axiom-ui-forms 0.1.0

package/rollup.config.mjs

@@ -0,0 +1,108 @@
+import resolve from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
+import typescript from '@rollup/plugin-typescript'
+import dts from 'rollup-plugin-dts'
+import json from '@rollup/plugin-json'
+import alias from '@rollup/plugin-alias'
+import nodePolyfills from 'rollup-plugin-polyfill-node'
+// import packageJson from './package.json'
+
+const globals = {
+  'react/jsx-runtime': 'JSXRuntime',
+  react: 'React',
+  'react-dom': 'ReactDOM',
+  lodash: 'lodash'
+}
+
+const external = [
+  'react',
+  'react-dom',
+  'react-scripts',
+  'react/jsx-runtime',
+  'lodash'
+]
+
+const config = [
+  {
+    external,
+    input: 'src/library.ts',
+    onwarn: function (warning, warn) {
+      if (warning.code === 'MODULE_LEVEL_DIRECTIVE') {
+        return
+      }
+      warn(warning)
+    },
+    output: [
+      /* {
+        file: 'library/cjs.js',
+        format: 'cjs',
+        sourcemap: true,
+        globals
+      }, */
+      {
+        file: 'library/index.js',
+        format: 'es',
+        sourcemap: true,
+        globals
+      },
+      /* {
+        file: 'library/browser.js',
+        format: 'iife',
+        name: 'AxiomUIforms',
+        sourcemap: true,
+        globals
+      }, */
+      {
+        file: 'library/umd.js',
+        format: 'umd',
+        name: 'AxiomUIforms',
+        sourcemap: true,
+        globals
+      }
+    ],
+    plugins: [
+      nodePolyfills(),
+      json(),
+      resolve({ preferBuiltins: false, browser: true }),
+      commonjs(),
+      alias({
+        entries: {
+          '@/*': './src'
+        }
+      }),
+      typescript({ tsconfig: './tsconfig.json' })
+    ]
+  },
+  {
+    external,
+    input: 'src/library.ts',
+    output: [{
+      file: 'library/axiom-ui-forms.d.ts',
+      format: 'esm',
+      globals
+    }],
+    plugins: [
+      json(),
+      dts({
+        compilerOptions: {
+          // enabling declaration (.d.ts) emit
+          declaration: true,
+
+          // optional - in general it's a good practice to decouple declaration files from your actual transpiled JavaScript files
+          declarationDir: 'library',
+
+          // optional if you're using babel to transpile TS -> JS
+          emitDeclarationOnly: true,
+
+          paths: {
+            '@/*': [
+              './src/*'
+            ]
+          }
+        }
+      })
+    ]
+  }
+]
+
+export default config

package/src/App.tsx

@@ -0,0 +1,25 @@
+import FormManager from '@/Form/Manage/Manage'
+import React, { type ReactElement } from 'react'
+import { BrowserRouter, Route, Routes } from 'react-router-dom'
+import SetTester from '@/SetTester'
+import MapTester from '@/Form/MapTester'
+import SchemaToForm from '@/Form/SchemaToForm'
+
+const App = (): ReactElement => {
+  return (
+
+    <div className='h-screen flex flex-col gap-4'>
+      <BrowserRouter>
+          <Routes>
+            <Route path='/' element={<FormManager />} />
+            <Route path='/schema-to-form' element={<SchemaToForm />} />
+            <Route path="/set-tester" element={<SetTester />} />
+            <Route path="/map-tester" element={<MapTester />} />W
+          </Routes>
+        </BrowserRouter>
+    </div>
+
+  )
+}
+
+export default App

package/src/Form/Components/FieldCreator.tsx

@@ -0,0 +1,206 @@
+import inputMap from '@/Form/Components/Inputs/inputMap'
+import { type IFormValues, type IFieldInputProps, type IFormField, type IValueChangeFn, type IValueType, type IForm } from '@/Form/FormCreatorTypes'
+import { checkCondition, cleanUnusedDependenciesFromFormValues, getFieldValue, getPathFromField } from '@/Form/helpers'
+import { Button, utils } from '@axdspub/axiom-ui-utilities'
+import { CheckIcon, CopyIcon, Cross1Icon, PlusIcon, TrashIcon } from '@radix-ui/react-icons'
+import { set } from 'lodash'
+import React, { useState, type ReactElement } from 'react'
+
+interface IFieldCreator {
+  field: IFormField
+  form: IForm
+  onChange?: IValueChangeFn
+  className?: string
+  defaultClassName?: string
+  value?: IValueType | IValueType[]
+  formValueState: [IFormValues, (v: IFormValues) => void]
+}
+
+const toolButtonClass = 'border-white hover:border-single hover:border-1 hover:border-slate-400'
+
+const DeleteMultiple = ({
+  doDelete
+}: {
+  doDelete: () => void
+}): ReactElement => {
+  const [confirm, setConfirm] = useState(false)
+
+  return (
+    <>
+      {
+        confirm
+          ? <p className='flex flex-row gap-2 text-sm'><span className='text-slate-600'>Deleting: </span> Are you sure?
+              <Button size='xs' type='submit'
+                onClick={() => {
+                  doDelete()
+                  setConfirm(false)
+                }}>Yes <CheckIcon className='inline ml-2' />
+              </Button>
+              <Button size='xs' type='alert'
+                onClick={() => {
+                  setConfirm(false)
+                }}>Cancel <Cross1Icon className='inline ml-2' />
+              </Button>
+            </p>
+          : <Button size='xs' className={toolButtonClass} onClick={() => { setConfirm(true) }}>
+              Delete <TrashIcon className='inline ml-2 fill-white' />
+            </Button>
+      }
+    </>
+  )
+}
+
+const OneOfMultiple = ({
+  InputComponent,
+  field,
+  form,
+  value,
+  index,
+  onChange,
+  values,
+  formValueState
+
+}: {
+  InputComponent: React.FC<IFieldInputProps>
+  field: IFormField
+  form: IForm
+  value: IValueType
+  index: number
+  onChange: (v: IValueType[] | undefined) => void
+  values: IValueType[]
+  formValueState: [IFormValues, (v: IFormValues) => void]
+
+}): ReactElement => {
+  const addValue = (v: IValueType | null): void => {
+    const newValues = [...values]
+    newValues.splice(index + 1, 0, v)
+    onChange(newValues)
+  }
+
+  return (
+    <div className='flex flex-col gap-2'>
+          <InputComponent
+          formValueState={formValueState}
+          form={form}
+          field={{
+            ...field,
+            required: false,
+            label: index > 0 ? null : field.label,
+            id: `${field.id}-${index}`
+          }}
+          value={value}
+          onChange={(v) => {
+            const newValues = [...values]
+            newValues[index] = String(v)
+            onChange(newValues)
+          }}
+        />
+
+            <div className='flex flex-row justify-between w-full p-2'>
+              {index > 0 && (
+              <DeleteMultiple doDelete={() => {
+                const newValues = [...values]
+                newValues.splice(index, 1)
+                onChange(newValues)
+              }} />
+              )}
+              <div className='ml-auto flex gap-2'>
+                <Button
+                size='xs'
+                className={toolButtonClass}
+                onClick={() => {
+                  addValue(null)
+                }}>Add <PlusIcon className='inline ml-2' /></Button>
+                <Button
+                  size='xs'
+                  className={toolButtonClass}
+                  onClick={() => {
+                    addValue(structuredClone(value))
+                  }}>Duplicate <CopyIcon className='inline ml-2' />
+                </Button>
+              </div>
+            </div>
+        </div>
+  )
+}
+
+const MultipleFieldCreator = ({ form, field, onChange, value, formValueState }: IFieldCreator): ReactElement => {
+  const [formValues, setFormValues] = formValueState
+  const defaultOnChange = (v: IValueType[] | undefined): void => {
+    const formValuesCopy = structuredClone(formValues)
+    set(formValuesCopy, getPathFromField(field), v)
+    setFormValues(formValuesCopy)
+  }
+
+  const initialVal = value !== undefined ? value : getFieldValue(field, formValues)
+  const initialValues = (initialVal !== undefined ? (Array.isArray(initialVal) ? initialVal : [initialVal]) : [null])
+
+  /* const initialValues = (
+    formValues[getPathFromField(field)] !== undefined
+      ? Array.isArray(formValues[getPathFromField(field)])
+        ? formValues[getPathFromField(field)]
+        : [formValues[getPathFromField(field)]]
+      : [null]
+  ) as IValueType[] */
+
+  const InputComponent = inputMap[field.type]
+
+  return <div>
+    {
+      initialValues?.map((value, index) => {
+        return <OneOfMultiple
+          formValueState={formValueState}
+          key={`${field.id}-${index}`}
+          InputComponent={InputComponent}
+          form={form}
+          field={field}
+          value={value}
+          index={index}
+          onChange={onChange ?? defaultOnChange}
+          values={initialValues}
+          />
+      })
+    }
+  </div>
+}
+
+const FieldCreator = ({
+  field,
+  form,
+  value,
+  onChange,
+  className,
+  defaultClassName = 'py-2 flex flex-col gap-8',
+  formValueState
+}: IFieldCreator): ReactElement | null => {
+  const [formValues, setFormValues] = formValueState
+  const InputComponent = inputMap[field.type]
+
+  const updateFormValues = (v: IFormValues): void => {
+    setFormValues(cleanUnusedDependenciesFromFormValues(form, v))
+  }
+
+  if (!checkCondition(field, formValues)) {
+    return null
+  }
+
+  const defaultOnChange = (v: IValueType | IValueType[] | undefined): void => {
+    const formValuesCopy = structuredClone(formValues)
+    set(formValuesCopy, getPathFromField(field), v)
+    updateFormValues(formValuesCopy)
+  }
+  const initialValue = value !== undefined ? value : getFieldValue(field, formValues)
+  return InputComponent !== undefined
+    ? <div className={utils.makeClassName({
+      className,
+      defaultClassName
+    })}>{
+      field.multiple === true
+        ? <MultipleFieldCreator field={field} form={form} onChange={onChange} value={initialValue} formValueState={formValueState} />
+        : <InputComponent field={field} form={form} onChange={onChange ?? defaultOnChange} value={Array.isArray(initialValue) ? initialValue[0] : initialValue} formValueState={formValueState} />
+
+    }</div>
+    : <p>No component definition for {field.type} ({field.id})</p>
+}
+
+export default FieldCreator

package/src/Form/Components/FieldLabel.tsx

@@ -0,0 +1,14 @@
+import { type IFormField } from '@/Form/FormCreatorTypes'
+import React, { type ReactElement } from 'react'
+
+export const FieldLabelText = (field: IFormField): ReactElement => {
+  return (
+    <strong>{field.label} { field.required === true ? <span className='text-red-500'>*</span> : ''}</strong>
+  )
+}
+
+const FieldLabel = (field: IFormField): ReactElement => {
+  return <p className='pb-2'><FieldLabelText {...field} /></p>
+}
+
+export default FieldLabel

package/src/Form/Components/Inputs/Boolean.tsx

@@ -0,0 +1,13 @@
+import { FieldLabelText } from '@/Form/Components/FieldLabel'
+import { type IFieldInputProps } from '@/Form/FormCreatorTypes'
+import { Checkbox } from '@axdspub/axiom-ui-utilities'
+import React, { type ReactElement } from 'react'
+
+const BooleanInput = ({ field, onChange, value }: IFieldInputProps): ReactElement => {
+  const initialValue = value !== undefined ? value : false
+  return <Checkbox id={field.id} testId={field.id} label={<FieldLabelText {...field} />} value={Boolean(initialValue)} onChange={(e) => {
+    onChange(e)
+  }} />
+}
+
+export default BooleanInput

package/src/Form/Components/Inputs/JSONString.tsx

@@ -0,0 +1,40 @@
+import FieldLabel from '@/Form/Components/FieldLabel'
+import { type IFieldInputProps } from '@/Form/FormCreatorTypes'
+import { TextArea } from '@axdspub/axiom-ui-utilities'
+import React, { useState, type ReactElement } from 'react'
+
+const JSONStringInput = ({ field, onChange, value }: IFieldInputProps): ReactElement => {
+  const [error, setError] = useState<string | undefined>(undefined)
+  const initialValue = value !== undefined ? value : ''
+  const getValue = (): string => {
+    return initialValue !== undefined && initialValue !== null
+      ? typeof initialValue === 'object'
+        ? JSON.stringify(initialValue, null, 2)
+        : String(initialValue)
+      : ''
+  }
+  return <div>
+      <TextArea
+        error={error}
+        className={
+            [
+              'min-h-[500px] bg-slate-50 rounded-lg shadow-inner'
+              // 'p-0 bg-[repeating-linear-gradient(to_bottom,var(--tw-gradient-stops))] from-[#efefef] from-[length:0_25px] to-[#FFF] to-[length:25px_50px]'
+            ].join(' ')
+        }
+        id={field.id}
+        testId={field.id}
+        label={<FieldLabel {...field} />}
+        value={getValue()}
+        onChange={(e) => {
+          try {
+            JSON.parse(e ?? '')
+            onChange(JSON.parse(e ?? ''))
+            setError(undefined)
+          } catch (e) {
+            setError('Invalid JSON')
+          }
+        }} /></div>
+}
+
+export default JSONStringInput

package/src/Form/Components/Inputs/LongString.tsx

@@ -0,0 +1,22 @@
+import FieldLabel from '@/Form/Components/FieldLabel'
+import { type IFieldInputProps } from '@/Form/FormCreatorTypes'
+import { TextArea } from '@axdspub/axiom-ui-utilities'
+import React, { type ReactElement } from 'react'
+
+const LongStringInput = ({ field, onChange, value }: IFieldInputProps): ReactElement => {
+  const initialValue = value !== undefined ? value : ''
+  const getValue = (): string => {
+    return initialValue !== undefined && initialValue !== null ? String(initialValue) : ''
+  }
+  return <div>
+      <TextArea
+        id={field.id}
+        testId={field.id}
+        label={<FieldLabel {...field} />}
+        value={getValue()}
+        onChange={(e) => {
+          onChange(e)
+        }} /></div>
+}
+
+export default LongStringInput

package/src/Form/Components/Inputs/Number.tsx

@@ -0,0 +1,22 @@
+import FieldLabel from '@/Form/Components/FieldLabel'
+import { type IFieldInputProps } from '@/Form/FormCreatorTypes'
+import { Input } from '@axdspub/axiom-ui-utilities'
+import React, { type ReactElement } from 'react'
+
+const NumberInput = ({ field, onChange, value }: IFieldInputProps): ReactElement => {
+  const initialValue = value !== undefined ? value : ''
+  return <div>
+      <Input
+        id={field.id}
+        testId={field.id}
+        value={initialValue !== undefined && initialValue !== null ? String(initialValue) : ''}
+        label={<FieldLabel {...field} />} onChange={(e) => {
+          if (e !== undefined && !isNaN(+e)) {
+            onChange(+e)
+          } else {
+            onChange(undefined)
+          }
+        }} /></div>
+}
+
+export default NumberInput

package/src/Form/Components/Inputs/Object.tsx

@@ -0,0 +1,56 @@
+import FieldCreator from '@/Form/Components/FieldCreator'
+import FieldLabel from '@/Form/Components/FieldLabel'
+import { type ICompositeValueType, type IFieldInputProps } from '@/Form/FormCreatorTypes'
+import { utils } from '@axdspub/axiom-ui-utilities'
+import React, { type ReactElement } from 'react'
+
+const ObjectInput = ({ form, field, onChange, value, formValueState }: IFieldInputProps): ReactElement => {
+  const initialValue = (typeof value === 'object' ? value ?? {} : {}) as ICompositeValueType
+  if (field.type === 'object' && field.fields !== undefined) {
+    const cl = `${field.layout === 'horizontal' ? `flex flex-row gap-4  ${field.label !== undefined ? 'px-0' : ''}` : 'flex flex-col gap-4'}`
+    const fc = field.layout === 'horizontal' ? 'flex-1' : ''
+    return (
+        <div>
+        {
+          field.label !== undefined
+            ? <FieldLabel {...field} />
+            : null
+        }
+        <div className={`p-4 bg-slate-100 ${cl}`}>
+        {
+          field.fields.map((childField) => {
+            const id = (field.path ?? [field.id]).concat(childField.id).join('.')
+            if (childField.type === 'object') {
+              childField.path = field.path !== undefined ? field.path.concat(id) : [id]
+              childField.level = field.level !== undefined ? field.level + 1 : 1
+            }
+
+            return (
+              <FieldCreator
+                formValueState={formValueState}
+                onChange={field.skip_path === true
+                  ? undefined
+                  : (e) => {
+                      initialValue[childField.id] = e
+                      onChange({ ...initialValue })
+                    }}
+                className={utils.makeClassName({
+                  defaultClassName: 'p-0',
+                  className: fc
+                })}
+                value={initialValue[childField.id]}
+                field={{ ...childField, id }}
+                form={form}
+                key={id}
+              />
+            )
+          })
+        }
+      </div>
+      </div>
+    )
+  }
+  return <p>Field config for {field.id} is missing &apos;fields&apos;</p>
+}
+
+export default ObjectInput

package/src/Form/Components/Inputs/RadioGroup.tsx

@@ -0,0 +1,24 @@
+import FieldLabel from '@/Form/Components/FieldLabel'
+import { type IFieldInputProps } from '@/Form/FormCreatorTypes'
+import { RadioGroup } from '@axdspub/axiom-ui-utilities'
+import React, { type ReactElement } from 'react'
+
+const RadioInput = ({ field, onChange, value }: IFieldInputProps): ReactElement => {
+  const initialValue = value !== undefined ? value : ''
+
+  if (field.type === 'radio' && field.options !== undefined) {
+    return <RadioGroup
+        id={field.id}
+        label={<FieldLabel {...field} />}
+        testId={field.id}
+        options={field.options}
+        value={initialValue !== undefined && initialValue !== null ? String(initialValue) : ''}
+        onChange={(e) => {
+          onChange(e?.value)
+        }}
+      />
+  }
+  return <p>Field config for {field.id} is missing &apos;options&apos;</p>
+}
+
+export default RadioInput

package/src/Form/Components/Inputs/SingleSelect.tsx

@@ -0,0 +1,24 @@
+import FieldLabel from '@/Form/Components/FieldLabel'
+import { type IFieldInputProps } from '@/Form/FormCreatorTypes'
+import { SelectInput } from '@axdspub/axiom-ui-utilities'
+import React, { type ReactElement } from 'react'
+
+const SingleSelectInput = ({ field, onChange, value }: IFieldInputProps): ReactElement => {
+  const initialValue = value !== undefined ? value : ''
+
+  if (field.type === 'select' && field.options !== undefined) {
+    return <SelectInput
+        id={field.id}
+        label={<FieldLabel {...field} />}
+        testId={field.id}
+        options={field.options}
+        value={initialValue !== undefined && initialValue !== null ? String(initialValue) : ''}
+        onChange={(e) => {
+          onChange(e?.value)
+        }}
+      />
+  }
+  return <p>Field config for {field.id} is missing &apos;options&apos;</p>
+}
+
+export default SingleSelectInput

package/src/Form/Components/Inputs/String.tsx

@@ -0,0 +1,18 @@
+import FieldLabel from '@/Form/Components/FieldLabel'
+import { type IFieldInputProps } from '@/Form/FormCreatorTypes'
+import { Input } from '@axdspub/axiom-ui-utilities'
+import React, { type ReactElement } from 'react'
+
+const StringInput = ({ field, onChange, value }: IFieldInputProps): ReactElement => {
+  const initialValue = value !== undefined ? value : ''
+  return <div>
+      <Input
+        id={field.id}
+        testId={field.id}
+        value={initialValue !== undefined && initialValue !== null ? String(initialValue) : ''}
+        label={<FieldLabel {...field} />} onChange={(e) => {
+          onChange(e)
+        }} /></div>
+}
+
+export default StringInput

package/src/Form/Components/Inputs/index.tsx

@@ -0,0 +1,6 @@
+export { default as BooleanInput } from './Boolean'
+export { default as JSONStringInput } from './JSONString'
+export { default as NumberInput } from './Number'
+export { default as TextInput } from './String'
+export { default as LongTextInput } from './LongString'
+export { default as SelectInput } from './SingleSelect'

package/src/Form/Components/Inputs/inputMap.ts

@@ -0,0 +1,23 @@
+import BooleanInput from '@/Form/Components/Inputs/Boolean'
+import LongString from '@/Form/Components/Inputs/LongString'
+import StringInput from '@/Form/Components/Inputs/String'
+import ObjectInput from '@/Form/Components/Inputs/Object'
+import Radio from '@/Form/Components/Inputs/RadioGroup'
+import SingleSelect from '@/Form/Components/Inputs/SingleSelect'
+import { type IFieldInputProps } from '@/Form/FormCreatorTypes'
+import JSONStringInput from '@/Form/Components/Inputs/JSONString'
+import NumberInput from '@/Form/Components/Inputs/Number'
+
+const inputMap: Record<string, React.FC<IFieldInputProps>> = {
+  text: StringInput,
+  long_text: LongString,
+  number: NumberInput,
+  json: JSONStringInput,
+  boolean: BooleanInput,
+  select: SingleSelect,
+  radio: Radio,
+  object: ObjectInput
+
+}
+
+export default inputMap

package/src/Form/Components/index.tsx

@@ -0,0 +1,2 @@
+export { default as FieldCreator } from './FieldCreator'
+export * from './Inputs'

package/src/Form/FormCreator.tsx

@@ -0,0 +1,62 @@
+import FieldCreator from '@/Form/Components/FieldCreator'
+import { type IFormValues, type IForm, type IValueChangeFn } from '@/Form/FormCreatorTypes'
+import { copyAndAddPathToFields } from '@/Form/helpers'
+import { ExclamationTriangleIcon } from '@radix-ui/react-icons'
+import React, { useEffect, useState, type ReactElement } from 'react'
+
+const FormCreator = ({
+  form,
+  formValueState,
+  note,
+  error,
+  onChange
+}: {
+  form: IForm
+  formValueState: [IFormValues, (v: IFormValues) => void]
+  note?: string
+  error?: string
+  onChange?: IValueChangeFn
+
+}): ReactElement => {
+  const [activeForm, setActiveForm] = useState<IForm | null>(null)
+  useEffect(() => {
+    const newForm = copyAndAddPathToFields<IForm>(form)
+    setActiveForm(newForm)
+  }, [form])
+  if (activeForm === null) {
+    return <p>Processing</p>
+  }
+  return (
+      <>
+      <div>
+        <h2 className='text-2xl pb-4 font-bold'>{form.label}</h2>
+        {
+            note !== undefined
+              ? <p className='pb-4'>{note}</p>
+              : null
+        }
+        {
+            error !== undefined
+              ? <p className='pb-4 text-rose-800'><ExclamationTriangleIcon className='inline mr-2' /> {error}</p>
+              : null
+        }
+        {
+            activeForm.description !== undefined
+              ? <p className='pb-4'>{form.description}</p>
+              : null
+        }
+        <div className='flex flex-col gap-2'>
+        {
+        activeForm.fields.map((field) => {
+          return (
+            <FieldCreator onChange={onChange} form={form} field={field} key={field.id} formValueState={formValueState} />
+          )
+        })
+        }
+        </div>
+      </div>
+      </>
+  )
+}
+
+export default FormCreator