@axdspub/axiom-ui-forms 0.1.0

package/src/Form/FormCreatorTypes.ts

@@ -0,0 +1,187 @@
+import type { GeoJSON } from 'geojson'
+
+interface IValueTypes {
+  text: string
+  number: number
+  date: string
+  datetime: string
+  time: string
+  boolean: boolean
+  geojson: GeoJSON
+  json: JSON
+  composite: ICompositeValueType
+}
+
+type ValueOf<T> = T[keyof T]
+
+// export type ICompositeValueType = Record<string, string | number | boolean>
+// type can't reference self
+// eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style
+export interface ICompositeValueType {
+  [key: string]: IValueType | IValueType[] | undefined
+}
+export type IValueType = undefined | null | ValueOf<IValueTypes> // | Array<ValueOf<IValueTypes>> | { [key: string]: IValueType } | Array<Record<string, IValueTypes>>
+// export type IValueType2 = string | string[] | number | number[] | boolean | boolean[] | ICompositeValueType | ICompositeValueType[]
+
+export type IFormField = ITextField | ILongTextField | IJSONField | ISelectField | IRadioField | ICheckboxField | IDateField | ITimeField | IDateTimeField | IBooleanField | IObjectField | IGeoJSONField | IFormFieldSection
+
+export type IFormFieldType = 'section' | 'text' | 'long_text' | 'number' | 'json' | 'select' | 'radio' | 'checkbox' | 'date' | 'time' | 'datetime' | 'boolean' | 'object' | 'geojson'
+interface IFieldConditions {
+  dependsOn: string | string[]
+  value: string | number | boolean
+}
+
+interface IFormFieldRoot {
+  id: string
+  type: IFormFieldType
+  required?: boolean
+  label?: string | null | undefined
+  multiple?: boolean
+  path?: string[]
+  fullPath?: string[]
+  level?: number
+  value?: IValueType
+  conditions?: IFieldConditions
+}
+
+interface IStringValueInput extends IFormFieldRoot {
+  value?: 'text' | 'number'
+  placeholder?: string
+}
+
+interface ITextField extends IStringValueInput {
+  type: 'text' | 'number'
+}
+
+interface ILongTextField extends IStringValueInput {
+  type: 'long_text'
+}
+
+interface IJSONField extends IFormFieldRoot {
+  type: 'json'
+}
+
+interface ISelectOption {
+  label: string
+  value: string
+}
+
+interface ISelectableInput extends IFormFieldRoot {
+  options?: ISelectOption[]
+  options_source?: {
+    type: 'url'
+    url: string
+    method?: 'GET' | 'POST'
+    headers?: Record<string, string>
+    body?: Record<string, string>
+    value_key: string
+    label_key: string
+  }
+}
+
+interface ISingleSelectableInput extends ISelectableInput {
+  value?: 'text' | 'number'
+}
+
+interface IMultiSelectableInput extends ISelectableInput {
+  values?: Array<'text' | 'number'>
+}
+
+export interface ISelectField extends ISingleSelectableInput {
+  type: 'select'
+}
+
+export interface IRadioField extends ISingleSelectableInput {
+  type: 'radio'
+  layout?: 'horizontal' | 'vertical'
+}
+
+export interface ICheckboxField extends IMultiSelectableInput {
+  type: 'checkbox'
+}
+
+export interface IBooleanField extends IFormFieldRoot {
+  type: 'boolean'
+  value?: 'boolean'
+}
+
+interface IDateField extends IFormFieldRoot {
+  type: 'date'
+  value?: 'date'
+}
+
+interface ITimeField extends IFormFieldRoot {
+  type: 'time'
+  value?: 'time'
+}
+
+interface IDateTimeField extends IFormFieldRoot {
+  type: 'datetime'
+  value?: 'datetime'
+}
+
+interface IContainerField extends IFormFieldRoot {
+  skip_path?: boolean
+  fields: IFormField[]
+  layout?: 'horizontal' | 'vertical' | 'grid2' | 'grid3' | 'grid4'
+}
+
+export interface IObjectField extends IContainerField {
+  type: 'object'
+}
+
+export interface IFormFieldSection extends IContainerField {
+  type: 'section'
+  description?: string
+  multiple: false
+  value: undefined
+  values: undefined
+}
+
+interface IGeoJSONField extends IFormFieldRoot {
+  type: 'geojson'
+  value?: 'geojson'
+  exclude_types?: string[]
+  include_types?: string[]
+}
+
+export interface IPage {
+  id: string
+  label: string
+  description?: string
+  sections: IFormFieldSection[]
+
+}
+
+export interface IForm {
+  id: string
+  label: string
+  description?: string
+  fields: IFormField[]
+}
+
+export interface IFormWithPages {
+  id: string
+  label: string
+  description?: string
+  pages: IPage[]
+}
+
+export interface IFormFieldProps {
+  field: IFormField
+  onChange?: IValueChangeFn
+}
+
+export type IFormValues = Record<string, IValueType | IValueType[]>
+
+export type IFormInputComponent = React.FC<IFormFieldProps>
+
+export type IValueChangeFn = (v: IValueType | IValueType[] | undefined) => void
+
+export interface IFieldInputProps {
+  form: IForm
+  field: IFormField
+  onChange: IValueChangeFn
+  formValueState: [IFormValues, (v: IFormValues) => void]
+  value?: IValueType
+}

package/src/Form/FormMappingTypes.ts

@@ -0,0 +1,17 @@
+export interface IFormMapping {
+  fields: Record<string, IFieldMapping>
+  $targetSchema: string
+}
+
+interface IFieldMapping {
+  xpath: string
+}
+
+export const example: IFormMapping = {
+  $targetSchema: 'testAsset',
+  fields: {
+    label: {
+      xpath: '/label'
+    }
+  }
+}

package/src/Form/Manage/CopyableJSONOutput.tsx

@@ -0,0 +1,75 @@
+import { utils } from '@axdspub/axiom-ui-utilities'
+import { CheckIcon, CopyIcon } from '@radix-ui/react-icons'
+import React, { type ReactElement, useState } from 'react'
+
+export const CopyButton = ({
+  string,
+  size = 'med',
+  defaultClassName = 'text-lg text-slate-400 pointer-events-none',
+  className,
+  defaultWrapperClassName,
+  wrapperClassName
+}: {
+  string: string
+  defaultClassName?: string
+  className?: string
+  defaultWrapperClassName?: string
+  wrapperClassName?: string
+  size?: 'sm' | 'med' | 'lg' | 'xlg'
+}): ReactElement => {
+  const [copied, setCopied] = useState(false)
+  return (
+    <button className={utils.makeClassName({
+      className: wrapperClassName,
+      defaultClassName: defaultWrapperClassName
+    })} onClick={() => {
+      navigator.clipboard.writeText(string)
+        .then(() => {
+          setCopied(true)
+          setTimeout(() => {
+            setCopied(false)
+          }, 1000)
+        })
+        .catch(e => {
+          console.log('Error!')
+        })
+    }}>
+      {copied
+        ? <span className={utils.makeClassName({
+          className,
+          defaultClassName
+        })}><CheckIcon className={utils.makeClassName({
+          className: 'bg-slate-600 text-white rounded-full',
+          extras: [utils.getIconClassForSize(size)]
+        })} /></span>
+        : <CopyIcon className={utils.makeClassName({
+          className,
+          defaultClassName,
+          extras: [utils.getIconClassForSize(size)]
+        })} />}
+
+      <span className='sr-only'>Copy</span>
+    </button>
+  )
+}
+export const CopyableJSONOutput = ({ string, label }: { string: string, label: string }): ReactElement => {
+  return <div>
+    {label !== undefined
+      ? <h2 className='text-lg pb-4 font-bold'>{label}</h2>
+      : ''}
+    <div className='relative' onClick={() => {
+      navigator.clipboard.writeText(string)
+        .then(() => {
+          console.log('Copied!')
+        })
+        .catch(e => {
+          console.log('Error!')
+        })
+    }}>
+      <CopyButton string={string} className='text-slate-400 absolute top-4 right-4' wrapperClassName='absolute top-0 right-0 bottom-0 left-0' />
+      <pre className='p-10 bg-slate-200 hover:bg-slate-300 text-slate-600 select-none cursor-pointer'>
+        {string}
+      </pre>
+    </div>
+  </div>
+}

package/src/Form/Manage/FormConfigInput.tsx

@@ -0,0 +1,61 @@
+import { type IForm, type IFormField } from '@/Form/FormCreatorTypes'
+import { CopyButton } from '@/Form/Manage/CopyableJSONOutput'
+import { TextArea } from '@axdspub/axiom-ui-utilities'
+import React, { type ReactElement, useState, useEffect } from 'react'
+
+const validateForm = (form: IForm): string | undefined => {
+  if (form.label === undefined) {
+    return ('Label is required')
+  }
+  if (form.fields === undefined) {
+    return ('At least one field is required')
+  }
+  if (form.fields.length > Object.keys(Object.fromEntries(form.fields.map((field: IFormField) => [field.id, field]))).length) {
+    return ('Field IDs must be unique')
+  }
+  return undefined
+}
+
+const FormConfigInput = ({ formState }: { formState: [IForm, (form: IForm) => void] }): ReactElement => {
+  const [form, setForm] = formState
+  const [error, setError] = useState<string | undefined>(validateForm(form))
+  const [str, setStr] = useState<string | undefined>(undefined)
+  useEffect(() => {
+    if (str !== '' && str !== undefined) {
+      try {
+        const ob = JSON.parse(str)
+        const newError = validateForm(ob)
+        setError(newError)
+        if (newError === undefined) {
+          setForm(ob)
+        }
+      } catch {
+        setError('Invalid JSON')
+      }
+    }
+  }, [str])
+  return (
+            <div className='h-full flex flex-col'>
+                 { error !== undefined
+                   ? <p className='text-red-500 py-4'>
+                      {error}
+                  </p>
+                   : ''
+                 }
+                 <div className='h-full relative'>
+                <CopyButton string={JSON.stringify(form, null, 2)} className='absolute right-10 top-10 pointer-events-auto' />
+                 <TextArea
+                      id='formManager'
+                      testId='formManager'
+                      value={JSON.stringify(form, null, 2)}
+                      className='h-full mt-0 w-full flex-grow min-h-[600px] shadow-inner-xl bg-slate-100'
+                      onChange={(e) => {
+                        setStr(e)
+                      }}
+                 />
+                 </div>
+            </div>
+  )
+}
+
+export default FormConfigInput

package/src/Form/Manage/FormMappedOutput.tsx

@@ -0,0 +1,131 @@
+import set from 'lodash/set'
+import React, { type ReactElement, useEffect, useState } from 'react'
+
+import { CheckIcon, CopyIcon } from '@radix-ui/react-icons'
+import { useAtom } from 'jotai'
+
+import { utils } from '@axdspub/axiom-ui-utilities'
+import formValuesAtom from '@/state/formValuesAtom'
+import { copyAndAddPathToFields, getFields } from '@/Form/helpers'
+import { type IForm } from '@/Form/FormCreatorTypes'
+import { type IFormMapping } from '@/Form/FormMappingTypes'
+
+interface IOutputRecord {
+  [key: string]: IOutputRecord | string | null | number
+}
+
+const CopyButton = ({
+  string,
+  size = 'med',
+  defaultClassName = 'text-lg text-slate-400 pointer-events-none',
+  className,
+  defaultWrapperClassName,
+  wrapperClassName
+}: {
+  string: string
+  defaultClassName?: string
+  className?: string
+  defaultWrapperClassName?: string
+  wrapperClassName?: string
+  size?: 'sm' | 'med' | 'lg' | 'xlg'
+}): ReactElement => {
+  const [copied, setCopied] = useState(false)
+  return (
+        <button className={utils.makeClassName({
+          className: wrapperClassName,
+          defaultClassName: defaultWrapperClassName
+        })} onClick={() => {
+          navigator.clipboard.writeText(JSON.stringify(string, null, 2))
+            .then(() => {
+              setCopied(true)
+              setTimeout(() => {
+                setCopied(false)
+              }, 1000)
+            })
+            .catch(e => {
+              console.log('Error!')
+            })
+        }
+        }>
+            {
+                copied
+                  ? <span className={utils.makeClassName({
+                    className,
+                    defaultClassName
+                  })}><CheckIcon className={
+                    utils.makeClassName({
+                      className: 'bg-slate-600 text-white rounded-full',
+                      extras: [utils.getIconClassForSize(size)]
+                    })}/></span>
+                  : <CopyIcon className={utils.makeClassName({
+                    className,
+                    defaultClassName,
+                    extras: [utils.getIconClassForSize(size)]
+                  })} />
+            }
+
+            <span className='sr-only'>Copy</span>
+        </button>
+  )
+}
+
+const CopyableJSONOutput = ({ json, label }: { json: string, label: string }): ReactElement => {
+  return <div>
+    {
+      label !== undefined
+        ? <h2 className='text-lg pb-4 font-bold'>{label}</h2>
+        : ''
+    }
+    <div className='relative' onClick={() => {
+      navigator.clipboard.writeText(json)
+        .then(() => {
+          console.log('Copied!')
+        })
+        .catch(e => {
+          console.log('Error!')
+        })
+    }}>
+  <CopyButton string={json} className='text-slate-400 absolute top-4 right-4' wrapperClassName='absolute top-0 right-0 bottom-0 left-0' />
+  <pre className='p-10 bg-slate-200 hover:bg-slate-300 text-slate-600 select-none cursor-pointer'>
+       {json}
+  </pre>
+  </div>
+  </div>
+}
+
+const MappedOutput = ({
+  form,
+  formMapping
+}: {
+  form: IForm
+  formMapping: IFormMapping
+}): ReactElement => {
+  const [formValues] = useAtom(formValuesAtom)
+  const [output, setOutput] = useState<IOutputRecord | undefined>(undefined)
+  const [flatOutput, setFlatOutput] = useState<IOutputRecord | undefined>(undefined)
+
+  useEffect(() => {
+    let newOutput: IOutputRecord = {}
+    const newFlatOutput: IOutputRecord = {}
+    const { fields } = copyAndAddPathToFields<IForm>(form)
+    const flatFields = getFields(fields)
+    flatFields.forEach(field => {
+      const idPath = field.path?.join('.') ?? field.id
+      const path = formMapping.fields[idPath]?.xpath ?? field.id
+      const value = formValues[idPath]
+      newOutput = set(newOutput, path, value ?? null)
+      newFlatOutput[idPath] = (value === null || value === undefined) ? null : isNaN(+value) ? String(value) : Number(value)
+    })
+
+    setOutput(newOutput)
+    setFlatOutput(newFlatOutput)
+  }, [form, formValues, formMapping])
+  return (<div className='flex flex-col gap-8'>
+      <CopyableJSONOutput json={JSON.stringify(output, null, 2)} label='Output' />
+      <CopyableJSONOutput json={JSON.stringify(flatOutput, null, 2)} label='Flat Output' />
+
+  </div>
+  )
+}
+
+export default MappedOutput

package/src/Form/Manage/FormMappingInput.tsx

@@ -0,0 +1,60 @@
+import { type IForm } from '@/Form/FormCreatorTypes'
+import { type IFormMapping } from '@/Form/FormMappingTypes'
+import { addFieldPath, getFields } from '@/Form/helpers'
+import { Input } from '@axdspub/axiom-ui-utilities'
+import React, { type ReactElement } from 'react'
+
+const FormMappingInput = ({
+  form,
+  mappingState
+}: {
+  form: IForm
+  mappingState: [IFormMapping, (mapping: IFormMapping) => void]
+}): ReactElement => {
+  const [mapping, setMappings] = mappingState
+  const uniqueFields = getFields(form.fields.map(f => addFieldPath(structuredClone(f))))
+  return (
+            <>
+                 <div className='flex flex-col gap-4'>
+                      {
+                           uniqueFields.filter(f => f.type !== 'object' && f.type !== 'section').map(field => {
+                             const fieldId = field.path?.join('.') ?? field.id
+                             return (
+                                     <div key={field.id} className='flex flex-col gap-2'>
+                                          <div>
+                                               <Input
+                                                placeholder='Output path'
+                                                label={<span className='pb-2'>
+                                                    <span className='text-xs bg-slate-100  p-1 float-right text-rose-700'>{fieldId}</span>
+                                                    {field.label}
+                                               </span>}
+                                               id={`map:${fieldId}`} testId={`map:${fieldId}`} value={mapping.fields?.[fieldId]?.xpath}
+                                               onChange={(e) => {
+                                                 if (e !== undefined && e !== '') {
+                                                   setMappings({
+                                                     ...mapping,
+                                                     fields: {
+                                                       ...mapping.fields,
+                                                       [fieldId]: {
+                                                         ...mapping.fields[fieldId],
+                                                         xpath: e
+
+                                                       }
+                                                     }
+
+                                                   })
+                                                 }
+                                               }}
+                                               />
+                                          </div>
+
+                                     </div>
+                             )
+                           })
+                      }
+                 </div>
+            </>
+  )
+}
+
+export default FormMappingInput

package/src/Form/Manage/Manage.tsx

@@ -0,0 +1,132 @@
+import { Button, MultiAccordion, Tabs } from '@axdspub/axiom-ui-utilities'
+import React, { type ReactNode, useState, type ReactElement } from 'react'
+import FormOutput from '@/Form/Manage/FormMappedOutput'
+import FormConfigInput from '@/Form/Manage/FormConfigInput'
+import FormMappingInput from '@/Form/Manage/FormMappingInput'
+import Form from '@/Form/FormCreator'
+import { useAtom } from 'jotai'
+import formAtom from '@/state/formAtom'
+import { RawFormOutput } from '@/Form/Manage/RawFormOutput'
+import formMappingAtom from '@/state/formMappingAtom'
+import { getQueryParam, updateUrlParam } from '@/helpers'
+import formValuesAtom from '@/state/formValuesAtom'
+import { CheckIcon, Cross1Icon, TrashIcon } from '@radix-ui/react-icons'
+import testForm from '@/Form/testData/nestedForm.json'
+import { type IForm, type IFormValues } from '@/Form/FormCreatorTypes'
+import { type IFormMapping } from '@/Form/FormMappingTypes'
+
+type IDisplayType = 'stack' | 'tab'
+
+const ClearForm = ({
+  message = 'Clear form',
+  onConfirm
+}: {
+  message?: ReactNode
+  onConfirm: () => 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={() => {
+                  onConfirm()
+                  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' type='alert' onClick={() => { setConfirm(true) }}>
+              {message} <TrashIcon className='inline ml-2 fill-white' />
+            </Button>
+      }
+    </>
+  )
+}
+
+const FormManager = ({
+  formValueState,
+  mappingState,
+  formState
+}: {
+  formValueState?: [IFormValues, (v: IFormValues) => void]
+  mappingState?: [IFormMapping, (v: IFormMapping) => void]
+  formState?: [IForm, (v: IForm) => void]
+}): ReactElement => {
+  const [form, setForm] = formState ?? useAtom(formAtom)
+  const [mapping, setMapping] = mappingState ?? useAtom(formMappingAtom)
+  const [formValues, setFormValues] = formValueState ?? useAtom(formValuesAtom)
+  const sections = [
+    {
+      id: 'config',
+      label: 'Form config',
+      content: <FormConfigInput
+          formState={[form, setForm]}
+        />
+    },
+    {
+      id: 'mapping',
+      label: 'Form mapping',
+      content: <FormMappingInput
+          form={form}
+          mappingState={[mapping, setMapping]}
+        />
+    },
+    {
+      id: 'output',
+      label: 'Mapped Output',
+      content: <FormOutput
+        form={form}
+        formMapping={mapping}
+      />
+    },
+    {
+      id: 'raw_output',
+      label: 'Raw Output',
+      content: <RawFormOutput />
+    }
+  ]
+  const params = Object.fromEntries(new URLSearchParams(window.location.search))
+  const display: IDisplayType = params.display === 'stack' ? 'stack' : 'tab'
+  return (
+          <div className='flex flex-col h-full gap-4 p-20'>
+            <div className='flex flex-row gap-4 justify-end'>
+                <ClearForm onConfirm={() => {
+                  setFormValues({})
+                }} />
+                <ClearForm message='Clear form config' onConfirm={() => {
+                  setForm(structuredClone(testForm as IForm))
+                }} />
+            </div>
+               <div className='grid grid-cols-2 gap-8 flex-grow'>
+
+               <Form form={form} formValueState={[formValues, setFormValues]} />
+
+                    <div className='flex flex-col gap-4'>
+                      {
+                        display !== 'tab'
+                          ? <MultiAccordion tabs={sections} />
+                          : <Tabs
+                              tabs={sections}
+                              selectedTab={getQueryParam('tab') ?? undefined}
+                              onChange={(tab) => {
+                                updateUrlParam('tab', tab)
+                              }}
+                         />
+                      }
+
+                    </div>
+               </div>
+          </div>
+  )
+}
+
+export default FormManager

package/src/Form/Manage/RawFormOutput.tsx

@@ -0,0 +1,20 @@
+import { CopyableJSONOutput } from '@/Form/Manage/CopyableJSONOutput'
+import formValuesAtom from '@/state/formValuesAtom'
+import { useAtom } from 'jotai'
+import { set } from 'lodash'
+import React, { type ReactElement } from 'react'
+
+export const RawFormOutput = (): ReactElement => {
+  const [formValues] = useAtom(formValuesAtom)
+  const rehydrated = {}
+  Object.keys(formValues).forEach(path => {
+    set(rehydrated, path, formValues[path])
+  })
+
+  // const rehydratedMapped = {}
+
+  return <div className='flex flex-col gap-4'>
+    <CopyableJSONOutput string={JSON.stringify(formValues, null, 2)} label='As stored' />
+    <CopyableJSONOutput string={JSON.stringify(rehydrated, null, 2)} label='Rehydrated' />
+    </div>
+}