form-craft-package 1.0.0

package/src/components/form/layout-renderer/3-element/1-dynamic-button.tsx

@@ -0,0 +1,277 @@
+import { lazy, useCallback, useEffect, useMemo, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { FormInstance } from 'antd'
+import { getButtonRenderProps } from '../../../../functions/get-element-props'
+import { stringifyJSON } from '../../../../functions/json-handlers'
+import { ButtonActionCategoryEnum, FormLoadingModalTypeEnum } from '../../../../enums'
+import { IDataRender_ButtonProps } from '../../../../types'
+import { NEW_FORM_DATA_IDENTIFIER } from '../../../../constants'
+import WarningIcon from '../../../common/warning-icon'
+import { ButtonFP } from '../../../common/button'
+import { useFindDynamiForm } from '../../../common/custom-hooks/use-find-dynamic-form'
+import { constructDynamicFormHref } from '../../../../functions'
+import { useNotification } from '../../../common/custom-hooks/use-notification.hook'
+import client from '../../../../functions/axios-handler'
+import { useLazyModalOpener } from '../../../common/custom-hooks/use-lazy-modal-opener.hook'
+
+const FormDataLoadingIndicatorModal = lazy(() => import('../../../modals/form-data-loading.modal'))
+
+export const DynamicFormButtonRender = ({
+  btnProps,
+  formDataId,
+  formRef,
+  onCustomFunctionCall = () => {},
+}: IDynamicButton) => {
+  const navigate = useNavigate()
+  const [loading, setLoading] = useState(false)
+  const { success, warning, error, confirmModal } = useNotification()
+  const formInfo = useFindDynamiForm()
+  const { isModalOpen, isPendingTransition, openModal, closeModal } = useLazyModalOpener()
+
+  const buttonProps = useMemo(() => getButtonRenderProps(btnProps), [btnProps])
+  const formId = useMemo(() => formInfo?.id ?? null, [formInfo])
+  const baseDynamicUrl = useMemo(() => (formInfo ? constructDynamicFormHref(formInfo.name) : ''), [formInfo])
+
+  const [dataLoadingType, setDataLoadingType] = useState<FormLoadingModalTypeEnum | undefined>()
+
+  useEffect(() => {
+    if (dataLoadingType !== undefined) openModal()
+  }, [dataLoadingType])
+
+  useEffect(() => {
+    if (!isModalOpen) setDataLoadingType(undefined)
+  }, [isModalOpen])
+
+  const displayResultMessage = useCallback(
+    (isSuccess: boolean = true) => {
+      if (!btnProps.messages) return
+
+      if (isSuccess) {
+        if (btnProps.messages?.success) success({ message: btnProps.messages.success })
+      } else {
+        if (btnProps.messages?.error) error({ message: btnProps.messages.error })
+      }
+    },
+    [btnProps.messages],
+  )
+
+  const onDuplicateData = useCallback(async () => {
+    let isSuccess = true
+    try {
+      warning({ message: `Duplicate form data: Form id: ${formId}, Data id: ${formDataId}` })
+      // const res = await client.delete(`/formdata/${formId}/${formDataId}`)
+      // if (res.status < 300) {
+      //   navigate(0)
+      // }
+    } catch (err) {
+      isSuccess = false
+      console.error(err)
+    } finally {
+      displayResultMessage(isSuccess)
+    }
+  }, [formId, formDataId])
+
+  const onDeleteData = useCallback(async () => {
+    let isSuccess = true
+    try {
+      const res = await client.delete(`/api/formdata/${formId}/${formDataId}`)
+      if (res.status < 300) {
+        navigate(baseDynamicUrl)
+      }
+    } catch (err) {
+      isSuccess = false
+      console.error(err)
+    } finally {
+      displayResultMessage(isSuccess)
+    }
+  }, [baseDynamicUrl])
+
+  const onPublishData = useCallback(async () => {
+    let isSuccess = true
+    try {
+      const res = await client.put(`/api/formdata/publish/${formId}/${formDataId}`)
+      if (res.status < 300) {
+        navigate(0)
+      }
+    } catch (err) {
+      isSuccess = false
+      console.error(err)
+    } finally {
+      displayResultMessage(isSuccess)
+    }
+  }, [baseDynamicUrl])
+
+  const onCreateNewData = useCallback(() => {
+    formRef!.validateFields().then((values) => {
+      setLoading(true)
+      const reqData = {
+        name: '', // TODO: maybe later, make it dynamic
+        data: stringifyJSON(values),
+        private: true, // TODO: figure out what this is
+      }
+
+      client
+        .post(`/api/formdata/${formId}`, reqData)
+        .then((res: any) => {
+          if (res.status === 200) {
+            setTimeout(() => {
+              closeModal()
+              displayResultMessage()
+              navigate(`${baseDynamicUrl}/${res.data}`)
+            }, 500)
+          }
+        })
+        .catch(() => displayResultMessage(false))
+        .finally(() => setLoading(false))
+    })
+  }, [formRef, formId, baseDynamicUrl])
+
+  const onSaveExistingData = useCallback(() => {
+    formRef!.validateFields().then((values) => {
+      setDataLoadingType(FormLoadingModalTypeEnum.SavingChanges)
+
+      console.log(values)
+      closeModal()
+      setLoading(false)
+      // setLoading(true)
+      // const reqData = {
+      //   name: 'Dynamic form data', // TODO: maybe later, make it dynamic
+      //   data: stringifyJSON(values),
+      //   version: 1, // FIXME: increment
+      //   private: true, // TODO: figure out what this is
+      // }
+
+      // client
+      //   .put(`/api/formdata/${formId}/${formDataId}`, reqData)
+      //   .then((res: any) => {
+      //     if (res.status === 200) {
+      //       setTimeout(() => {
+      //         closeModal()
+      //         displayResultMessage()
+      //       }, 500)
+      //     }
+      //   })
+      //   .catch(() => displayResultMessage(false))
+      //   .finally(() => setLoading(false))
+    })
+  }, [formRef, formId, formDataId])
+
+  const onButtonClick = useCallback(() => {
+    if (!formInfo) {
+      error({ message: 'Form information was not found!' })
+      return
+    }
+
+    switch (btnProps.category) {
+      case ButtonActionCategoryEnum.CreateNewData:
+        navigate(`${baseDynamicUrl}/${NEW_FORM_DATA_IDENTIFIER}`)
+
+        break
+      case ButtonActionCategoryEnum.ViewDataDetails:
+        if (formDataId) navigate(`${baseDynamicUrl}/${formDataId}`)
+        else error({ message: CUSTOM_ERROR_MESSAGES.DataIdNotFound })
+
+        break
+      case ButtonActionCategoryEnum.DuplicateData:
+        if (formDataId) onDuplicateData()
+        else error({ message: CUSTOM_ERROR_MESSAGES.DataIdNotFound })
+
+        break
+      case ButtonActionCategoryEnum.DeleteData:
+        if (formDataId) onDeleteData()
+        else error({ message: CUSTOM_ERROR_MESSAGES.DataIdNotFound })
+
+        break
+      case ButtonActionCategoryEnum.SaveDataChanges:
+        if (formRef) {
+          if (formDataId === NEW_FORM_DATA_IDENTIFIER) onCreateNewData()
+          else onSaveExistingData()
+        } else error({ message: CUSTOM_ERROR_MESSAGES.FormInstanceNotFound })
+
+        break
+      case ButtonActionCategoryEnum.PublishDataChanges:
+        if (formDataId) onPublishData()
+        else error({ message: CUSTOM_ERROR_MESSAGES.DataIdNotFound })
+
+        break
+      case ButtonActionCategoryEnum.ReturnToDataList:
+        navigate(baseDynamicUrl)
+
+        break
+      case ButtonActionCategoryEnum.ViewDataVersions:
+        // TODO: figure out how to do this
+
+        break
+      case ButtonActionCategoryEnum.CustomFunction:
+        onCustomFunctionCall(btnProps.messages ?? defaultMessage)
+
+        break
+      default:
+        const errorMessage = `${ButtonActionCategoryEnum.ViewDataDetails} function was not found!`
+        console.error(errorMessage)
+        warning({ message: errorMessage })
+        return
+    }
+  }, [baseDynamicUrl, formDataId])
+
+  return (
+    <>
+      <ButtonFP
+        {...buttonProps}
+        className={getButtonWidth(btnProps?.width)}
+        loading={loading || isPendingTransition}
+        onClick={() => {
+          if (btnProps.confirmation?.enabled)
+            confirmModal({
+              content: btnProps.confirmation.message,
+              okText: btnProps.confirmation.okLabel,
+              cancelText: btnProps.confirmation.cancelLabel,
+              onOk: onButtonClick,
+            })
+          else onButtonClick()
+        }}
+      >
+        {btnProps.category === ButtonActionCategoryEnum.SaveDataChanges && !formRef && (
+          <WarningIcon tooltip={CUSTOM_ERROR_MESSAGES.FormInstanceNotFound} />
+        )}
+        {btnProps.category &&
+          [
+            ButtonActionCategoryEnum.ViewDataDetails,
+            ButtonActionCategoryEnum.DuplicateData,
+            ButtonActionCategoryEnum.DeleteData,
+            ButtonActionCategoryEnum.PublishDataChanges,
+          ].includes(btnProps.category) &&
+          !formDataId && <WarningIcon tooltip={CUSTOM_ERROR_MESSAGES.DataIdNotFound} />}
+        {btnProps.label}
+      </ButtonFP>
+      {isModalOpen && (
+        <FormDataLoadingIndicatorModal
+          currentType={dataLoadingType}
+          closeModal={closeModal}
+          errorMessage={btnProps.messages?.error}
+        />
+      )}
+    </>
+  )
+}
+
+interface IDynamicButton {
+  btnProps: IDataRender_ButtonProps
+  formDataId?: string
+  formRef?: FormInstance
+  onCustomFunctionCall?: (messages: IDynamicButtonMessages) => void
+}
+export interface IDynamicButtonMessages {
+  success?: string
+  error?: string
+}
+
+const defaultMessage = { success: 'Successfully completed!', error: 'Error occured' }
+
+const CUSTOM_ERROR_MESSAGES = {
+  DataIdNotFound: 'Data id was not found!',
+  FormInstanceNotFound: 'Form ref was not found!',
+}
+
+const getButtonWidth = (btnPropsWidth?: string) =>
+  !btnPropsWidth || btnPropsWidth === '100%' ? 'w-full' : btnPropsWidth === 'auto' ? 'w-min' : `w-[${btnPropsWidth}]`

package/src/components/form/layout-renderer/3-element/2-field-element.tsx

@@ -0,0 +1,220 @@
+import { Key, ReactNode, Fragment } from 'react'
+import {
+  Checkbox,
+  Col,
+  Form,
+  Input,
+  Select,
+  Radio,
+  Row,
+  InputNumber,
+  DatePicker,
+  Modal,
+  Slider,
+  Upload,
+  Switch,
+} from 'antd'
+import { FaCaretDown } from 'react-icons/fa'
+import dayjs, { Dayjs } from 'dayjs'
+import { FaUpload } from 'react-icons/fa6'
+import { ElementTypeEnum } from '../../../../enums'
+import { IValidationRule, mapToFormItemRules } from '../../../../functions'
+import { DisabledFieldIndicator } from '../../../common/disabled-field-indicator'
+
+interface IFieldsMapperProps {
+  fields: IMapperFieldObj[]
+}
+
+export const LayoutRenderer_FieldElement = ({ fields }: IFieldsMapperProps): JSX.Element => (
+  <>
+    {fields
+      .filter(({ isHidden = false }) => !isHidden)
+      .map((field: IMapperFieldObj, fieldIdx: Key) => {
+        if (field.name === 'age') console.log(field, mapToFormItemRules(field.validations ?? []))
+        return (
+          <Fragment key={fieldIdx}>
+            <Form.Item
+              key={fieldIdx}
+              name={field.name}
+              label={field.hasNoLabel ? '' : field.label}
+              labelAlign="left"
+              valuePropName={
+                field.type && [ElementTypeEnum.Checkbox, ElementTypeEnum.Switch].includes(field.type)
+                  ? 'checked'
+                  : 'value'
+              }
+              rules={mapToFormItemRules(field.validations ?? [])}
+              // rules={[
+              //   { pattern: /^([0-9]{1,2}|100)$/, message: 'Max value exceeded' },
+              //   { pattern: /^(18|[1-9][0-9]*)$/, message: 'Min value exceeded' },
+              // ]}
+            >
+              {getField(field)}
+            </Form.Item>
+            {field.disabled && field.type !== ElementTypeEnum.Checkbox && <DisabledFieldIndicator />}
+          </Fragment>
+        )
+      })}
+  </>
+)
+
+const getField = ({
+  disabled,
+  options = [],
+  type = ElementTypeEnum.ShortInput,
+  label,
+  allowClear = true,
+  isMultiValue = false,
+  placeholder,
+  minRows = 3,
+  numberFieldMin,
+  numberFieldMax,
+  disabledDate,
+}: Partial<IMapperFieldObj>): JSX.Element => {
+  placeholder = placeholder && placeholder.length > 0 ? placeholder : typeof label === 'string' ? label : ''
+
+  switch (type) {
+    case ElementTypeEnum.LongInput:
+      return <Input.TextArea autoSize={{ minRows }} placeholder={placeholder} disabled={disabled} />
+    case ElementTypeEnum.Select:
+      return (
+        <Select
+          placeholder={placeholder}
+          suffixIcon={<FaCaretDown />}
+          options={options}
+          disabled={disabled}
+          showSearch
+          optionFilterProp="label"
+          filterOption={(input, option) =>
+            option && typeof option.label === 'string'
+              ? option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              : false
+          }
+          allowClear={allowClear}
+          className="w-full"
+        />
+      )
+    case ElementTypeEnum.Checkbox:
+      return <Checkbox disabled={disabled}>{label}</Checkbox>
+    case ElementTypeEnum.Switch:
+      return (
+        <div className="flex items-center gap-2">
+          <Switch disabled={disabled} />
+          {label}
+        </div>
+      )
+    case ElementTypeEnum.Radio:
+      if (isMultiValue)
+        return (
+          <Checkbox.Group disabled={disabled}>
+            <Row gutter={[3, 3]}>
+              {options?.map((o, oIdx) => (
+                <Col key={oIdx}>
+                  <Checkbox value={o.value}>{o.label}</Checkbox>
+                </Col>
+              ))}
+            </Row>
+          </Checkbox.Group>
+        )
+      return (
+        <Radio.Group disabled={disabled} className="w-full">
+          <Row gutter={[5, 5]} align="middle">
+            {options?.map((o, oIdx) => (
+              <Col key={oIdx}>
+                <Radio value={o.value}>{o.label}</Radio>
+              </Col>
+            ))}
+          </Row>
+        </Radio.Group>
+      )
+    case ElementTypeEnum.NumberInput:
+      return (
+        <InputNumber
+          placeholder={placeholder}
+          disabled={disabled}
+          className="w-full"
+          min={numberFieldMin}
+          max={numberFieldMax}
+          formatter={(value) => (value ? value.toString().replace(/\D/g, '') : '')}
+          // parser={(value) => (value ? parseFloat(value.replace(/\D/g, '')) : undefined)}
+        />
+      )
+    case ElementTypeEnum.Password:
+      return <Input.Password placeholder={placeholder} disabled={disabled} />
+    case ElementTypeEnum.DatePicker:
+      return (
+        <DatePicker
+          format={datepickerFormats}
+          placeholder="MM/DD/YYYY"
+          disabled={disabled}
+          disabledDate={(now) => (disabledDate ? disabledDate(now) : dayjs(now) < dayjs('01/01/1900'))}
+          allowClear={allowClear}
+          className="w-full"
+          onChange={(e) => {
+            if (dayjs(e) < dayjs('01/01/1900'))
+              Modal.error({ title: 'Invalid Date!', content: 'The year cannot be less than 1900!', centered: true })
+          }}
+        />
+      )
+    case ElementTypeEnum.TimePicker:
+      return (
+        <DatePicker.TimePicker
+          format={datepickerFormats}
+          disabled={disabled}
+          className="w-full"
+          allowClear={allowClear}
+        />
+      )
+    case ElementTypeEnum.Slider:
+      return <Slider disabled={disabled} />
+    case ElementTypeEnum.FileUpload:
+      return (
+        <Upload>
+          <div className="cursor-pointer border border-dashed border-neutral border-opacity-50 text-neutral rounded-md flex items-center gap-2 h-[32px] px-2">
+            <FaUpload />
+            {placeholder}
+          </div>
+        </Upload>
+      )
+    case ElementTypeEnum.ShortInput:
+    default:
+      return <Input placeholder={placeholder} disabled={disabled} />
+  }
+}
+
+interface IMapperFieldObj {
+  type?: ElementTypeEnum
+  validations?: IValidationRule[]
+  isHidden?: boolean
+  name: string | (string | number)[]
+  label?: string | ReactNode
+  description?: string
+  placeholder?: string
+  disabled?: boolean
+  options?: ISelectOption[]
+  isMultiValue?: boolean
+  minRows?: number
+  hasNoLabel?: boolean
+  allowClear?: boolean
+  numberFieldMin?: number
+  numberFieldMax?: number
+  disabledDate?: (date: Dayjs) => boolean
+}
+interface ISelectOption {
+  value: number | boolean | string
+  label: string | ReactNode
+}
+const datepickerFormats = [
+  'MM/DD/YYYY',
+  'MM/DD/YY',
+  'YYYY/MM/DD',
+  'MMDDYYYY',
+  'MMDDYY',
+  'YYYYMMDD',
+  'MM DD YYYY',
+  'MM DD YY',
+  'YYYY MM DD',
+  'MM-DD/YYYY',
+  'MM-DD-YY',
+  'YYYY-MM-DD',
+]

package/src/components/form/layout-renderer/3-element/index.tsx

@@ -0,0 +1,73 @@
+import { Divider } from 'antd'
+import { ReactElement, ReactNode, useMemo } from 'react'
+import { IDataRender_ButtonProps, IFieldElementSourceManual, IFormLayoutElement } from '../../../../types'
+import { getElementGeneralizedProps } from '../../../../functions/get-element-props'
+import { ElementTypeEnum, FieldValidationEnum } from '../../../../enums'
+import { LayoutRenderer_FieldElement } from './2-field-element'
+import { findMaxAndMinValues } from '../../../../functions'
+
+export default function LayoutRendererElement({
+  elementData,
+  titleComponent,
+  renderButton,
+}: {
+  elementData: IFormLayoutElement
+  titleComponent?: ReactNode
+  renderButton?: (props: IDataRender_ButtonProps) => ReactElement
+}) {
+  const props = getElementGeneralizedProps(elementData.props)
+  const { elementType, key, validations } = elementData
+  const { options = [] } = (props.optionSource as IFieldElementSourceManual) ?? {}
+  const { maxValue, minValue } = useMemo(() => findMaxAndMinValues(validations), [validations])
+
+  switch (elementType) {
+    case ElementTypeEnum.RichTextEditor:
+      // return <FC_FormElement_RichTextEditor placeholder={placeholder} />
+      return 'rich editor'
+    // case ElementTypeEnum.FileUpload:
+    //   return (
+    //     <Upload fileList={[]}>
+    //       <div className="cursor-pointer border border-dashed border-neutral border-opacity-50 text-neutral rounded-md flex items-center gap-2 h-[32px] px-2">
+    //         <FaUpload />
+    //         {placeholder}
+    //       </div>
+    //     </Upload>
+    //   )
+    case ElementTypeEnum.ReadOnly:
+      // return (
+      //   <FC_FormElement_ReadOnlyInfo
+      //     label={props.label}
+      //     isHardCoded={props.isHardCoded}
+      //     value={props.value}
+      //     renderConditions={props.renderConditions}
+      //   />
+      // )
+      return 'read only'
+    case ElementTypeEnum.Divider:
+      return (
+        <Divider className={props.className} orientation={props.labelPlacement}>
+          {props.label && <span className="text-12">{props.label}</span>}
+        </Divider>
+      )
+    case ElementTypeEnum.Button:
+      return renderButton ? renderButton(props) : <></>
+    case ElementTypeEnum.TitlePlacement:
+      return titleComponent ?? <span className="text-warning">Provide title component</span>
+    default:
+      return (
+        <LayoutRenderer_FieldElement
+          fields={[
+            {
+              ...props,
+              numberFieldMax: maxValue,
+              numberFieldMin: minValue,
+              type: elementType,
+              name: key ?? '',
+              validations,
+              options: options.map((op) => ({ value: op.value, label: op.value })),
+            },
+          ]}
+        />
+      )
+  }
+}

package/src/components/index.tsx

@@ -0,0 +1,2 @@
+export * from './form/layout-renderer/1-row'
+export * from './form/layout-renderer/3-element/1-dynamic-button'

package/src/components/modals/form-data-loading.modal.tsx

@@ -0,0 +1,48 @@
+import { Modal, Spin } from 'antd'
+import { ButtonFP } from '../common/button'
+import { FormLoadingModalTypeEnum } from '../../enums'
+
+export default function FormDataLoadingIndicatorModal({
+  closeModal,
+  errorMessage,
+  currentType,
+}: {
+  closeModal: () => void
+  errorMessage?: string
+  currentType?: FormLoadingModalTypeEnum
+}) {
+  return (
+    <Modal
+      open
+      closable={false}
+      maskClosable={false}
+      centered
+      width={400}
+      footer={
+        currentType && [FormLoadingModalTypeEnum.ErrorOccured].includes(currentType)
+          ? [
+              <ButtonFP primary onClick={closeModal} className="w-full" key="modal_footer">
+                Close Modal
+              </ButtonFP>,
+            ]
+          : null
+      }
+    >
+      <div className="text-24 font-semibold text-center flex flex-col items-center gap-4">
+        <Spin spinning size="large" />
+        {(() => {
+          switch (currentType) {
+            case FormLoadingModalTypeEnum.SavingChanges:
+              return <span className="text-primary">Saving data...</span>
+            case FormLoadingModalTypeEnum.ErrorOccured:
+              return (
+                <span className="text-danger">{errorMessage ?? 'An error occured while performing the action!'}</span>
+              )
+            default:
+              return <></>
+          }
+        })()}
+      </div>
+    </Modal>
+  )
+}

package/src/constants.ts

@@ -0,0 +1,15 @@
+import { CSSLayoutType, FlexAlignItems, FlexDirection } from './enums'
+
+export const DEFAULT_FLEX_CONFIG = {
+  Container: {
+    display: CSSLayoutType.Flex,
+    flexDirection: FlexDirection.Row,
+    alignItems: FlexAlignItems.Start,
+    gap: '10px',
+  },
+  Item: { flexBasis: '0', flexGrow: 1 },
+}
+export const NEW_FORM_DATA_IDENTIFIER = 'new'
+export enum LOCAL_STORAGE_KEYS_ENUM {
+  DynamicForms = '38be231fe41c169037ed04c267ebe070',
+}