form-craft-package 1.0.0

package/src/ajv/form/migration-rules.schema.json

@@ -0,0 +1,59 @@
+{
+  "$id": "migration-rules.schema",
+  "type": "object",
+  "patternProperties": {
+    ".*": {
+      "type": "array",
+      "items": { "$ref": "#/definitions/IMigrationRule" }
+    }
+  },
+  "definitions": {
+    "IMigrationRule": {
+      "type": "object",
+      "oneOf": [
+        {
+          "properties": {
+            "operation": { "type": "string", "enum": ["RenameField"] },
+            "from": { "type": "string" },
+            "to": { "type": "string" }
+          },
+          "required": ["operation", "from", "to"]
+        },
+        {
+          "properties": {
+            "operation": { "type": "string", "enum": ["RemoveField"] },
+            "field": { "type": "string" }
+          },
+          "required": ["operation", "field"]
+        },
+        {
+          "properties": {
+            "operation": { "type": "string", "enum": ["ConvertDataType"] },
+            "field": { "type": "string" },
+            "fromType": { "type": "string" },
+            "toType": { "type": "string" },
+            "defaultValue": {}
+          },
+          "required": ["operation", "field", "fromType", "toType"]
+        },
+        {
+          "properties": {
+            "operation": { "type": "string", "enum": ["MakeRequired"] },
+            "field": { "type": "string" },
+            "defaultValue": {}
+          },
+          "required": ["operation", "field"]
+        },
+        {
+          "properties": {
+            "operation": { "type": "string", "enum": ["ValidationRuleChange"] },
+            "field": { "type": "string" },
+            "minLength": { "type": "integer" },
+            "defaultValue": {}
+          },
+          "required": ["operation", "field"]
+        }
+      ]
+    }
+  }
+}

package/src/ajv/master-portal-only/render-conditions/conditions.schema.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "render-conditions.schema",
+  "type": "array",
+  "items": {
+    "type": "object",
+    "properties": {
+      "when": { "type": "string" },
+      "outcomes": {
+        "type": "array",
+        "items": {
+          "type": "object",
+          "properties": {
+            "value": { "type": ["string", "number", "boolean"] },
+            "className": { "type": "string" },
+            "content": { "type": "string" }
+          },
+          "required": ["value", "content"]
+        }
+      }
+    },
+    "required": ["when", "outcomes"]
+  }
+}

package/src/ajv/master-portal-only/render-conditions/validate.ts

@@ -0,0 +1,15 @@
+import Ajv, { ErrorObject } from 'ajv'
+import conditionsSchema from './conditions.schema.json'
+import { IDataCondition_Render } from '../../../types'
+
+export const validateRenderConditionsData = (data: IDataCondition_Render) => {
+  const ajv = new Ajv({ allowUnionTypes: true })
+  const validate = ajv.compile(conditionsSchema)
+
+  const isValid = validate(data)
+
+  let errors: ErrorObject[] = []
+  if (!isValid) errors = validate.errors || []
+
+  return { isValid, errors }
+}

package/src/components/common/button.tsx

@@ -0,0 +1,72 @@
+import { Button } from 'antd'
+
+type ButtonProps = {
+  primary?: boolean
+  secondary?: boolean
+  danger?: boolean
+  link?: boolean
+  icon?: boolean
+  outline?: boolean
+  short?: boolean
+  disabled?: boolean
+  loading?: boolean
+  className?: string
+  title?: string
+  children: any
+} & (
+  | { onClick: (e: React.MouseEvent) => void; isFormSubmit?: boolean; form?: string }
+  | { onClick?: (e: React.MouseEvent) => void; isFormSubmit: boolean; form: string }
+)
+
+// FP = Filler Portal
+export const ButtonFP = ({
+  primary,
+  danger,
+  link,
+  icon,
+  outline = false,
+  disabled = false,
+  loading = false,
+  short = false,
+  className,
+  children,
+  title = '',
+  form,
+  isFormSubmit = false,
+  onClick,
+}: ButtonProps): JSX.Element => {
+  const defaultClass = `${outline ? 'btn-outline' : ''} ${short ? 'btn-short text-12' : ''}`
+  if (!className) className = defaultClass
+  else className = `${className} ${defaultClass}`
+
+  const buttonProps = {
+    disabled,
+    loading,
+    title,
+    className,
+    form,
+    onClick: (e: React.MouseEvent) => onClick && onClick(e),
+  }
+  const htmlTypeProp = isFormSubmit ? 'submit' : 'button'
+
+  if (primary || link)
+    return (
+      <Button type={primary ? 'primary' : 'link'} {...buttonProps} htmlType={htmlTypeProp}>
+        <div className="flex items-center gap-2">{children}</div>
+      </Button>
+    )
+
+  if (icon)
+    return (
+      <Button {...buttonProps} className="btn-icon" htmlType={htmlTypeProp}>
+        <div className="p-1 rounded-full">{children}</div>
+      </Button>
+    )
+
+  // secondary || danger || default
+  return (
+    <Button danger={danger ?? false} {...buttonProps} htmlType={htmlTypeProp}>
+      <div className="flex items-center gap-2">{children}</div>
+    </Button>
+  )
+}

package/src/components/common/custom-hooks/use-find-dynamic-form.ts

@@ -0,0 +1,33 @@
+import { useState, useEffect } from 'react'
+import { useParams } from 'react-router-dom'
+import { LOCAL_STORAGE_KEYS_ENUM } from '../../../constants'
+
+export const useFindDynamiForm = () => {
+  const { formName } = useParams<{ formName: string }>()
+  const [foundItem, setFoundItem] = useState<IDynamicForm | undefined | null>(undefined)
+
+  useEffect(() => {
+    if (!formName) return
+
+    try {
+      const storedData = localStorage.getItem(LOCAL_STORAGE_KEYS_ENUM.DynamicForms)
+      if (storedData) {
+        const parsedData: IDynamicForm[] = JSON.parse(storedData)
+        const item = parsedData.find((entry) => entry.name.split(' ').join('-').toLocaleLowerCase() === formName)
+        setFoundItem(item ?? null)
+      }
+    } catch (error) {
+      console.error('Error reading or parsing localStorage data', error)
+    }
+  }, [formName])
+
+  return foundItem
+}
+
+interface IDynamicForm {
+  id: number
+  keepVersionHistory: boolean
+  logo: string | null
+  name: string
+  version: number
+}

package/src/components/common/custom-hooks/use-lazy-modal-opener.hook.ts

@@ -0,0 +1,20 @@
+import { useState, useTransition } from 'react'
+
+export const useLazyModalOpener = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [isPendingTransition, startTransition] = useTransition()
+
+  const openModal = () => {
+    startTransition(() => {
+      setIsModalOpen(true)
+    })
+  }
+
+  const closeModal = () => {
+    startTransition(() => {
+      setIsModalOpen(false)
+    })
+  }
+
+  return { isModalOpen, isPendingTransition, openModal, closeModal }
+}

package/src/components/common/custom-hooks/use-notification.hook.tsx

@@ -0,0 +1,157 @@
+import React, { createContext, ReactNode, useContext } from 'react'
+import { Modal, notification, NotificationArgsProps } from 'antd'
+
+type ModalOptions = {
+  title?: string
+  content?: React.ReactNode
+  okText?: string
+  cancelText?: string
+  centered?: boolean
+  width?: number | string
+  onOk?: () => Promise<void> | void
+  onCancel?: () => void
+}
+
+const defaultOptions: Partial<ModalOptions> = {
+  title: 'Confirmation',
+  content: 'Are you sure to proceed?',
+  okText: 'Continue',
+  cancelText: 'Cancel',
+  width: 520,
+}
+
+interface NotificationContextType {
+  openNotification: (options: NotificationArgsProps) => void
+  success: (options: NotificationArgsProps) => void
+  error: (options: NotificationArgsProps) => void
+  warning: (options: NotificationArgsProps) => void
+  destroy: () => void
+  confirmModal: (options: ModalOptions) => void
+  warningModal: (options: ModalOptions) => void
+  infoModal: (options: ModalOptions) => void
+  errorModal: (options: ModalOptions) => void
+}
+
+const NotificationContext = createContext<NotificationContextType | undefined>(undefined)
+
+let notificationInstance: NotificationContextType | null = null
+
+export const AntdNotificationProvider = ({ children }: { children: ReactNode }) => {
+  const [notificationApi, notificationContextHolder] = notification.useNotification()
+  const [modalApi, modalContextHolder] = Modal.useModal()
+
+  const openNotification = (options: NotificationArgsProps) => {
+    notificationApi.open(options)
+  }
+
+  const success = (options: NotificationArgsProps) => {
+    notificationApi.success({ ...options, onClick: () => notificationApi.destroy() })
+  }
+
+  const error = (options: NotificationArgsProps) => {
+    notificationApi.error({ ...options, onClick: () => notificationApi.destroy() })
+  }
+
+  const warning = (options: NotificationArgsProps) => {
+    notificationApi.warning({ ...options, onClick: () => notificationApi.destroy() })
+  }
+
+  const destroy = () => notificationApi.destroy()
+
+  const confirmModal = (options: ModalOptions) => {
+    modalApi.confirm({
+      ...defaultOptions,
+      ...options,
+      onOk: async () => {
+        try {
+          if (options.onOk) await options.onOk()
+        } catch (error) {
+          console.error('Error in onOk:', error)
+        }
+      },
+      onCancel: options.onCancel || (() => {}),
+    })
+  }
+
+  const warningModal = (options: ModalOptions) => {
+    modalApi.warning({
+      ...defaultOptions,
+      ...options,
+      onOk: async () => {
+        try {
+          if (options.onOk) await options.onOk()
+        } catch (error) {
+          console.error('Error in onOk:', error)
+        }
+      },
+      onCancel: options.onCancel || (() => {}),
+    })
+  }
+
+  const infoModal = (options: ModalOptions) => {
+    modalApi.info({
+      ...defaultOptions,
+      ...options,
+      onOk: async () => {
+        try {
+          if (options.onOk) await options.onOk()
+        } catch (error) {
+          console.error('Error in onOk:', error)
+        }
+      },
+      onCancel: options.onCancel || (() => {}),
+    })
+  }
+
+  const errorModal = (options: ModalOptions) => {
+    modalApi.error({
+      ...defaultOptions,
+      ...options,
+      onOk: async () => {
+        try {
+          if (options.onOk) await options.onOk()
+        } catch (error) {
+          console.error('Error in onOk:', error)
+        }
+      },
+      onCancel: options.onCancel || (() => {}),
+    })
+  }
+
+  const instance = {
+    openNotification,
+    success,
+    error,
+    warning,
+    destroy,
+    confirmModal,
+    warningModal,
+    infoModal,
+    errorModal,
+  }
+
+  notificationInstance = instance
+
+  return (
+    <NotificationContext.Provider value={instance}>
+      {notificationContextHolder}
+      {modalContextHolder}
+      {children}
+    </NotificationContext.Provider>
+  )
+}
+
+export const useNotification = () => {
+  const context = useContext(NotificationContext)
+  if (!context) {
+    throw new Error('useGlobalNotification must be used within a NotificationProvider')
+  }
+  return context
+}
+
+export const getNotificationInstance = (): NotificationContextType => {
+  if (!notificationInstance) {
+    throw new Error('AntdNotificationProvider is not initialized.')
+  }
+  return notificationInstance
+}

package/src/components/common/disabled-field-indicator.tsx

@@ -0,0 +1,20 @@
+import { FaPencilAlt, FaSlash } from 'react-icons/fa'
+
+export const DisabledFieldIndicator = ({
+  top = 30,
+  right = 15,
+  left,
+}: {
+  top?: number
+  right?: number
+  left?: number
+}) => (
+  <div style={{ position: 'absolute', top, right, left, cursor: 'no-drop', color: '#a1a1a1' }}>
+    <div className="absolute">
+      <FaPencilAlt />
+    </div>
+    <div>
+      <FaSlash />
+    </div>
+  </div>
+)

package/src/components/common/warning-icon.tsx

@@ -0,0 +1,10 @@
+import { Tooltip } from 'antd'
+import { FaExclamationTriangle } from 'react-icons/fa'
+
+export default function WarningIcon({ tooltip = '', size = 16 }: { tooltip: any; size?: number }) {
+  return (
+    <Tooltip title={tooltip}>
+      <FaExclamationTriangle className="text-warning" size={size} />
+    </Tooltip>
+  )
+}

package/src/components/form/layout-renderer/1-row/index.tsx

@@ -0,0 +1,27 @@
+import { ResponsivenessDeviceEnum } from '../../../../enums'
+import { getFlexContainerStyle, getFlexItemStyle } from '../../../../functions'
+import { IDataRender_ButtonProps, IFormLayoutRow } from '../../../../types'
+import LayoutRendererCol from '../2-col'
+import { ReactElement, ReactNode } from 'react'
+
+export const LayoutRendererRow = ({
+  rowData,
+  titleComponent,
+  breakpointDevice = ResponsivenessDeviceEnum.Default,
+  renderButton,
+}: {
+  rowData: IFormLayoutRow
+  titleComponent?: ReactNode
+  breakpointDevice?: ResponsivenessDeviceEnum
+  renderButton?: (props: IDataRender_ButtonProps) => ReactElement
+}) => {
+  return (
+    <div style={{ ...(rowData.style ?? {}), ...getFlexContainerStyle(breakpointDevice, rowData.responsiveness) }}>
+      {rowData.children.map((col, colIdx) => (
+        <div key={colIdx} style={getFlexItemStyle(breakpointDevice, colIdx, rowData.responsiveness)}>
+          <LayoutRendererCol key={colIdx} colData={col} titleComponent={titleComponent} renderButton={renderButton} />
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/components/form/layout-renderer/2-col/index.tsx

@@ -0,0 +1,32 @@
+import { ReactElement, ReactNode } from 'react'
+import { LayoutRendererRow } from '../1-row'
+import LayoutRendererElement from '../3-element'
+import { IDataRender_ButtonProps, IFormLayoutCol, IFormLayoutElement, IFormLayoutRow } from '../../../../types'
+import { FormLayoutNodeEnum } from '../../../../enums'
+
+export default function LayoutRendererCol({
+  colData,
+  titleComponent,
+  renderButton,
+}: {
+  colData: IFormLayoutCol
+  titleComponent?: ReactNode
+  renderButton?: (props: IDataRender_ButtonProps) => ReactElement
+}) {
+  return (
+    <div className="space-y-2">
+      {colData.children.map((item: IFormLayoutRow | IFormLayoutElement) =>
+        item.nodeType === FormLayoutNodeEnum.Row ? (
+          <LayoutRendererRow key={item.id} rowData={item} titleComponent={titleComponent} renderButton={renderButton} />
+        ) : (
+          <div className="flex flex-col" key={item.id}>
+            <LayoutRendererElement elementData={item} titleComponent={titleComponent} renderButton={renderButton} />
+            {item.props && 'description' in item.props && (
+              <span className="text-neutral text-12 italic">{item.props.description}</span>
+            )}
+          </div>
+        ),
+      )}
+    </div>
+  )
+}