@axdspub/axiom-ui-forms 0.2.1-alpha.6 → 0.2.1-alpha.7

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@axdspub/axiom-ui-forms",
-  "version": "0.2.1-alpha.6",
+  "version": "0.2.1-alpha.7",
   "private": false,
   "main": "./library/umd/library.js",
-  "module": "./library/es/library.js",
+  "module": "./library/esm/library.js",
   "types": "./library/axiom-ui-forms.d.ts",
+  "files": [
+    "library/**"
+  ],
   "peerDependencies": {
     "lodash": "^4.17.21",
     "react": "^18.0.0",

package/.env

@@ -1 +0,0 @@
-PORT=3080

package/.eslintrc.json

@@ -1,37 +0,0 @@
-{
-    "env": {
-        "browser": true,
-        "es2021": true
-    },
-    "extends": [
-        "plugin:react/recommended",
-        "standard-with-typescript"
-    ],
-    "overrides": [],
-    "parserOptions": {
-        "ecmaVersion": "latest",
-        "sourceType": "module",
-        "project": [
-            "./tsconfig.json"
-        ]
-    },
-    "plugins": [
-        "react"
-    ],
-    "rules": {
-        "ignoreIIFE": 0,
-        "@typescript-eslint/strict-boolean-expressions": 0,
-        "@typescript-eslint/no-misused-promises": [2, {
-            "checksVoidReturn": {
-              "attributes": false
-            }
-          }]
-
-    },
-    "ignorePatterns": [
-        "**/build/*",
-        "**/library/*",
-        "**/node_modules/*",
-        "**/.yalc/*"
-    ]
-}

package/.gitlab-ci.yml

@@ -1,41 +0,0 @@
-stages:
-  - build
-  - test
-  - push
-  - clean
-  - deploy
-
-build_image:
-  stage: build
-  script:
-    - docker build -f Dockerfile -t $CI_PROJECT_NAME:$CI_PIPELINE_ID .
-
-test:
-  stage: test
-  image: $CI_PROJECT_NAME:$CI_PIPELINE_ID
-  script:
-    - test -e /usr/share/nginx/html/index.html
-    - test -e /usr/share/nginx/html/asset-manifest.json
-
-push_latest:
-  stage: push
-  only:
-    - main
-  script:
-    - docker tag $CI_PROJECT_NAME:$CI_PIPELINE_ID registry.axiom/$CI_PROJECT_NAME:latest
-    - docker push registry.axiom/$CI_PROJECT_NAME:latest
-
-clean_latest:
-  stage: clean
-  only:
-    - main
-  script:
-    - docker rmi --no-prune $CI_PROJECT_NAME:$CI_PIPELINE_ID
-    - docker rmi --no-prune registry.axiom/$CI_PROJECT_NAME:latest
-
-deploy_app:
-  stage: deploy
-  only:
-    - main
-  script:
-    - aps apps-prod axiom-ui-forms

package/craco.config.js

@@ -1,42 +0,0 @@
-const path = require('path')
-
-// someday, clean up the the FOUR! repeated declarations of aliases (others are is in tsconfig.paths.json => tsconfig.json and .storybook/main.ts)
-// https://stackoverflow.com/a/71892901
-
-module.exports = {
-  webpack: {
-    eslint: {
-      enable: false
-    },
-    alias: {
-      '@': path.resolve(__dirname, 'src/'),
-      '@Components': path.resolve(__dirname, 'src/Components'),
-      '@State': path.resolve(__dirname, 'src/State')
-    },
-    configure: {
-      ignoreWarnings: [/Failed to parse source map/],
-      resolve: {
-        fallback: {
-          https: false,
-          http: false,
-          path: false,
-          zlib: false
-        }
-      },
-      module: {
-        // this silences a warning (Critical dependency: require function is used in a way in which dependencies cannot be statically extracted) that comes up with the cesium build included with @axdspubs/axiom-maps
-        unknownContextCritical: false
-      }
-    }
-  },
-  jest: {
-    configure: {
-      verbose: true,
-      moduleNameMapper: {
-        '^@/(.*)$': '<rootDir>/src/$1',
-        '^@Components/(.*)$': '<rootDir>/src/State/$1',
-        '^@State/(.*)$': '<rootDir>/src/State/$1'
-      }
-    }
-  }
-}

package/docker-compose.yml

@@ -1,13 +0,0 @@
-services:
-  app:
-    image: axiom-ui-forms:latest
-    build:
-      context:      .
-      dockerfile:   Dockerfile
-      extra_hosts:
-      - "npm-registry.srv.axiomptk:10.2.3.4"
-      - "npm-registry.srv.axiomptk:10.2.10.2"
-    ports:
-    - "8787:80"
-    # profiles:
-    #   - app

package/rollup.config.mjs

@@ -1,120 +0,0 @@
-import resolve from '@rollup/plugin-node-resolve'
-import commonjs from '@rollup/plugin-commonjs'
-import babel from '@rollup/plugin-babel'
-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
-      }
-      // got same warning as with d3.. assuming same deal for now (bostock sez: it's allowed in the spec, not gonna fix. just supress it)
-      // https://github.com/d3/d3-selection/issues/168#issuecomment-451983830
-      if (warning.code === 'CIRCULAR_DEPENDENCY') return
-
-      warn(warning)
-    },
-    output: [
-      /* {
-        file: 'library/cjs.js',
-        format: 'cjs',
-        sourcemap: true,
-        globals
-      }, */
-      {
-        dir: 'library/esm',
-        format: 'esm',
-        sourcemap: true,
-        chunkFileNames: 'chunks/[name]-[hash].js',
-        // inlineDynamicImports: true,
-        globals
-      }//,
-      /* {
-        file: 'library/browser.js',
-        format: 'iife',
-        name: 'AxiomUIforms',
-        sourcemap: true,
-        globals
-      }, */
-      /* {
-        dir: 'library/umd',
-        format: 'umd',
-        name: 'AxiomUIforms',
-        sourcemap: true,
-        // inlineDynamicImports: true,
-        globals
-      } */
-    ],
-    plugins: [
-      nodePolyfills(),
-      json(),
-      resolve({ preferBuiltins: false, browser: true }),
-      commonjs(),
-      /* babel({
-        babelHelpers: 'bundled',
-        presets: ['@babel/preset-react']
-      }), */
-      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

@@ -1,57 +0,0 @@
-import FormManager from '@/Form/Manage/Manage'
-import React, { useState, 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'
-import pagedFormJson from '@/Form/testData/pagedForm.json'
-import wizardFormJson from '@/Form/testData/wizardForm.json'
-import { type IForm, type IFormValues } from '@/Form/Creator/FormCreatorTypes'
-import Form from '@/Form/Creator/FormCreator'
-
-const PagedFormWrap = (): ReactElement => {
-  const formValueState = useState<IFormValues>({})
-  return (
-    <div>
-  <Form form={pagedFormJson as IForm} formValueState={formValueState} className='p-20' />
-  <pre className='p-20 bg-slate-200 text-xs'>{JSON.stringify(formValueState[0], null, 2)}</pre>
-  </div>
-  )
-}
-
-const WizardFormWrap = (): ReactElement => {
-  const formValueState = useState<IFormValues>({})
-  return (
-    <div>
-        <Form form={wizardFormJson as IForm} formValueState={formValueState} className='p-20' />
-        <pre className='p-20 bg-slate-200 text-xs'>{JSON.stringify(formValueState[0], null, 2)}</pre>
-      </div>
-  )
-}
-
-const App = (): ReactElement => {
-  return (
-
-    <div className='h-screen flex flex-col gap-4'>
-      <BrowserRouter>
-          <Routes>
-            <Route path='/' element={<FormManager />}>
-              <Route path='*' element={<FormManager />} />
-            </Route>
-            <Route path='/schema-to-form' element={<SchemaToForm />} />
-            <Route path="/set-tester" element={<SetTester />} />
-            <Route path="/map-tester" element={<MapTester />} />
-            <Route path="/page-form/" element={<PagedFormWrap />}>
-              <Route path='*' element={<PagedFormWrap />} />
-            </Route>
-            <Route path='/wizard-form' element={<WizardFormWrap />}>
-              <Route path='*' element={<WizardFormWrap />} />
-            </Route>
-          </Routes>
-        </BrowserRouter>
-    </div>
-
-  )
-}
-
-export default App

package/src/Form/Components/FieldCreator.tsx

@@ -1,206 +0,0 @@
-import inputMap from '@/Form/Components/Inputs/inputMap'
-import { type IFormValues, type IFieldInputProps, type IFormField, type IValueChangeFn, type IValueType, type IForm, type IFormValueState } from '@/Form/Creator/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: IFormValueState
-}
-
-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] = v as IValueType
-            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

@@ -1,14 +0,0 @@
-import { type IFormField } from '@/Form/Creator/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

@@ -1,13 +0,0 @@
-import { FieldLabelText } from '@/Form/Components/FieldLabel'
-import { type IFieldInputProps } from '@/Form/Creator/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/Date.tsx

@@ -1,111 +0,0 @@
-import FieldLabel from '@/Form/Components/FieldLabel'
-import { type IFieldInputProps } from '@/Form/Creator/FormCreatorTypes'
-import React, { type ReactElement, useState, useEffect } from 'react'
-
-const DateInput = ({ field, onChange, value }: IFieldInputProps): ReactElement => {
-  if (field.type !== 'date') {
-    return <p>Field config for {field.id} is missing &apos;options&apos;</p>
-  }
-  const [inputValue, setInputValue] = useState('')
-  const [error, setError] = useState<string | null>(null)
-  const { minDate, maxDate } = field.constraints ?? {}
-
-  useEffect(() => {
-    setInputValue(formatValue(value as string))
-  }, [value])
-
-  // Convert the value to the format expected by date input (YYYY-MM-DD)
-  const formatValue = (val: string | undefined | null): string => {
-    if (!val) return ''
-    try {
-      // Ensure the value is in the correct format
-      const date = new Date(val)
-      if (isNaN(date.getTime())) return ''
-
-      // Format to YYYY-MM-DD using UTC to avoid timezone issues
-      const year = date.getUTCFullYear()
-      const month = String(date.getUTCMonth() + 1).padStart(2, '0')
-      const day = String(date.getUTCDate()).padStart(2, '0')
-
-      return `${year}-${month}-${day}`
-    } catch {
-      return ''
-    }
-  }
-
-  const validateDate = (dateStr: string): string | null => {
-    if (!minDate && !maxDate) return null
-
-    const inputDate = new Date(dateStr + 'T00:00:00Z')
-    const minDateObj = minDate ? new Date(minDate) : null
-    const maxDateObj = maxDate ? new Date(maxDate) : null
-
-    if (minDateObj && inputDate < minDateObj) {
-      return `Date must be after ${formatValue(minDate)}`
-    }
-    if (maxDateObj && inputDate > maxDateObj) {
-      return `Date must be before ${formatValue(maxDate)}`
-    }
-    return null
-  }
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
-    const newInputValue = e.target.value
-    setInputValue(newInputValue)
-
-    // Only notify parent of change if we have a complete valid date
-    if (newInputValue) {
-      // Create date in UTC by appending T00:00:00Z to the input value
-      const date = new Date(newInputValue + 'T00:00:00Z')
-      // Check if it's a valid date and the year is reasonable (4 digits)
-      if (!isNaN(date.getTime()) && date.getUTCFullYear() > 999) {
-        const validationError = validateDate(newInputValue)
-        setError(validationError)
-        if (!validationError) {
-          onChange(date.toISOString())
-        }
-      }
-    } else {
-      setError(null)
-      onChange(undefined)
-    }
-  }
-
-  const getConstraintMessage = (): string | null => {
-    if (!minDate && !maxDate) return null
-    const parts = []
-    if (minDate) parts.push(`after ${formatValue(minDate)}`)
-    if (maxDate) parts.push(`before ${formatValue(maxDate)}`)
-    return `Must be ${parts.join(' and ')}`
-  }
-
-  const constraintMessage = getConstraintMessage()
-
-  return (
-    <div>
-      <div className="flex flex-wrap items-baseline gap-2">
-        <label htmlFor={field.id} className="flex-1 min-w-[200px]">
-          <FieldLabel {...field} />
-        </label>
-        {constraintMessage && (
-          <span className="text-sm text-slate-500 italic">
-            {constraintMessage}
-          </span>
-        )}
-      </div>
-      <input
-        id={field.id}
-        className={`border ${error ? 'border-red-500' : 'border-slate-300'} p-2 w-full`}
-        data-testid={field.id}
-        type="date"
-        value={inputValue}
-        onChange={handleChange}
-        min={minDate ? formatValue(minDate) : undefined}
-        max={maxDate ? formatValue(maxDate) : undefined}
-      />
-      {error && <p className="text-red-500 text-sm mt-1">{error}</p>}
-    </div>
-  )
-}
-
-export default DateInput