form-craft-package 1.0.4 → 1.1.1

package/index.ts

@@ -5,4 +5,5 @@ export * from './src/functions'
 export * from './src/functions/json-handlers'
 export * from './src/functions/form-schema-validator'
 export * from './src/functions/get-element-props'
-export * from './src/components'
+export * from './src/components'
+export * from './src/components/common/custom-hooks'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "form-craft-package",
-  "version": "1.0.4",
+  "version": "1.1.1",
   "main": "index.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -11,7 +11,10 @@
   "license": "ISC",
   "description": "",
   "dependencies": {
-    "ajv": "^8.17.1"
+    "@types/react-google-recaptcha": "^2.1.9",
+    "ajv": "^8.17.1",
+    "react-google-recaptcha": "^3.1.0",
+    "react-signature-canvas": "^1.0.7"
   },
   "peerDependencies": {
     "antd": ">=5.21.6",
@@ -29,6 +32,7 @@
     "@types/js-cookie": "^3.0.6",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
+    "@types/react-signature-canvas": "^1.0.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "ts-node": "^10.9.2",

package/src/components/common/button.tsx

@@ -19,7 +19,7 @@ type ButtonProps = {
 )
 
 // FP = Filler Portal
-export const ButtonFP = ({
+export const Button_FillerPortal = ({
   primary,
   danger,
   link,

package/src/components/common/custom-hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './use-find-dynamic-form'
+export * from './use-notification.hook'

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

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react'
 import { useParams } from 'react-router-dom'
 import { LOCAL_STORAGE_KEYS_ENUM } from '../../../constants'
+import { IDynamicForm } from '../../../types'
 
 export const useFindDynamiForm = () => {
   const { formName } = useParams<{ formName: string }>()
@@ -23,11 +24,3 @@ export const useFindDynamiForm = () => {
 
   return foundItem
 }
-
-interface IDynamicForm {
-  id: number
-  keepVersionHistory: boolean
-  logo: string | null
-  name: string
-  version: number
-}

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

@@ -9,7 +9,7 @@ export const DisabledFieldIndicator = ({
   right?: number
   left?: number
 }) => (
-  <div style={{ position: 'absolute', top, right, left, cursor: 'no-drop', color: '#a1a1a1' }}>
+  <div className="absolute cursor-nodrop" style={{ top, right, left, color: '#a1a1a1' }}>
     <div className="absolute">
       <FaPencilAlt />
     </div>

package/src/components/common/loading-skeletons/details.tsx

@@ -0,0 +1,11 @@
+import { Spin } from 'antd'
+
+export default function FormDataListSkeleton_Details() {
+  return (
+    <div className="p-3">
+      <div className="text-primary italic h-[300px] text-30 rounded-md bg-white flex items-center justify-center gap-2">
+        <Spin size="large" /> Loading data...
+      </div>
+    </div>
+  )
+}

package/src/components/common/loading-skeletons/index.tsx

@@ -0,0 +1,3 @@
+export default function SkeletonBlock({ height = 32, width = '100%' }: { height?: number; width?: number | string }) {
+  return <div style={{ height, width }} className="skeleton-loader" />
+}

package/src/components/common/loading-skeletons/table.tsx

@@ -0,0 +1,30 @@
+import SkeletonBlock from '.'
+
+export default function FormDataListSkeleton_Table() {
+  return (
+    <>
+      <div className="bg-white p-3 flex items-center justify-between rounded-md mb-2">
+        <SkeletonBlock width="200px" />
+        <div className="flex items-center gap-2">
+          <SkeletonBlock width="150px" />
+          <SkeletonBlock width="150px" />
+          <SkeletonBlock width="150px" />
+        </div>
+      </div>
+      <div className="border border-[#d4d4d8] rounded bg-white">
+        <div className="flex justify-between p-3 border-b border-[#d4d4d8]">
+          {[...Array(5)].map((_, elIdx) => (
+            <div key={elIdx}>
+              <SkeletonBlock height={20} width="150px" />
+            </div>
+          ))}
+        </div>
+        <div className="px-3 py-2 flex flex-col gap-3">
+          {[...Array(5)].map((_, elIdx) => (
+            <SkeletonBlock key={elIdx} />
+          ))}
+        </div>
+      </div>
+    </>
+  )
+}

package/src/components/form/1-list/header.tsx

@@ -0,0 +1,118 @@
+import { Form } from 'antd'
+import { ReactNode, useEffect, useState } from 'react'
+import { IReqDataConfig } from '.'
+import dayjs from 'dayjs'
+import { IFilterConfig, IFilterNested, IFilterSimple, IFormLayoutRow } from '../../../types'
+import { extractFiltersFromLayout } from '../../../functions'
+import { FilterConfigTypeEnum } from '../../../enums'
+import { LayoutRendererRow } from '../layout-renderer/1-row'
+import { DynamicFormButtonRender, ICustomFunctionCall } from '../layout-renderer/3-element/1-dynamic-button'
+
+export default function FormDataListHeaderComponent({
+  layout,
+  userId,
+  formId,
+  titleComponent,
+  setPaginatedReqData,
+  onCustomFunctionCall,
+}: IFormDataListHeaderComponent) {
+  const [dataListHeaderFormRef] = Form.useForm()
+  const [appliedFilters, setAppliedFilters] = useState<IFilterSimple>({})
+  const [filterConfigs, setFilterConfigs] = useState<IFilterNested>({})
+
+  useEffect(() => {
+    if (dataListHeaderFormRef) dataListHeaderFormRef.setFieldValue('formId', formId)
+  }, [dataListHeaderFormRef, formId])
+
+  useEffect(() => {
+    setFilterConfigs(extractFiltersFromLayout(layout))
+  }, [layout])
+
+  useEffect(() => {
+    const allCombinedFilters = {
+      customFilter: {},
+      dynamicFilter: {},
+    }
+    Object.values(appliedFilters).forEach((config) => {
+      if (config.type === FilterConfigTypeEnum.NoFilter) return
+
+      if (config.config?.customFilter)
+        allCombinedFilters.customFilter = { ...allCombinedFilters.customFilter, ...config.config.customFilter }
+      if (config.config?.dynamicFilter)
+        allCombinedFilters.dynamicFilter = { ...allCombinedFilters.dynamicFilter, ...config.config.dynamicFilter }
+
+      if (config.type === FilterConfigTypeEnum.ByMe)
+        allCombinedFilters.customFilter = { ...allCombinedFilters.customFilter, createdById: userId }
+    })
+
+    setPaginatedReqData((c) => ({
+      ...c,
+      customFilter: allCombinedFilters.customFilter,
+      dynamicFilter: JSON.stringify(allCombinedFilters.dynamicFilter),
+    }))
+  }, [appliedFilters])
+
+  return (
+    <Form
+      layout="vertical"
+      form={dataListHeaderFormRef}
+      onValuesChange={(changedValues) => {
+        Object.entries(changedValues).forEach(([key, value]) => {
+          const config = filterConfigs[key]
+          if (!config) {
+            console.warn(`Key '${key}' does not have a filter config`)
+            return
+          }
+          if ('type' in config) {
+            if (typeof value !== 'string') value = dayjs(value as Date).toISOString()
+
+            if (config.config && 'dynamicFilter' in config.config && config.config.dynamicFilter) {
+              let stringifiedDynamicFilter = JSON.stringify(config.config.dynamicFilter)
+              stringifiedDynamicFilter = stringifiedDynamicFilter.replaceAll('{{VALUE}}', value as string)
+
+              config.config.dynamicFilter = JSON.parse(stringifiedDynamicFilter)
+            }
+            if (config.config && 'customFilter' in config.config && config.config.customFilter) {
+              let stringifiedCustomFilter = JSON.stringify(config.config.customFilter)
+              stringifiedCustomFilter = stringifiedCustomFilter.replaceAll('{{VALUE}}', value as string)
+
+              config.config.customFilter = JSON.parse(stringifiedCustomFilter)
+            }
+
+            setAppliedFilters((c) => ({ ...c, [key]: config as IFilterConfig }))
+          } else {
+            const nestedConfig = config as IFilterSimple
+            if (typeof value === 'string' && value in nestedConfig)
+              setAppliedFilters((c) => ({ ...c, [key]: nestedConfig[value as string] as IFilterConfig }))
+            else console.warn(`Invalid key '${value}' for nestedConfig`)
+          }
+        })
+      }}
+    >
+      {layout.map((row, rowIdx) => (
+        <LayoutRendererRow
+          key={rowIdx}
+          rowData={row}
+          formRef={dataListHeaderFormRef}
+          titleComponent={titleComponent}
+          renderButton={(btnProps, conditions) => (
+            <DynamicFormButtonRender
+              btnProps={btnProps}
+              conditions={conditions}
+              formRef={dataListHeaderFormRef}
+              onCustomFunctionCall={onCustomFunctionCall}
+            />
+          )}
+        />
+      ))}
+    </Form>
+  )
+}
+
+type IFormDataListHeaderComponent = {
+  layout: IFormLayoutRow[]
+  setPaginatedReqData: React.Dispatch<React.SetStateAction<IReqDataConfig>>
+  titleComponent?: ReactNode
+  formId?: number
+  userId?: string | number
+} & ICustomFunctionCall

package/src/components/form/1-list/index.tsx

@@ -0,0 +1,122 @@
+import { useCallback, useEffect, useState } from 'react'
+import client from '../../../functions/axios-handler'
+import { parseJSON } from '../../../functions/json-handlers'
+import { generateTableColumns } from '../../../functions'
+import FormDataListSkeleton_Table from '../../common/loading-skeletons/table'
+import FormDataListHeaderComponent from './header'
+import { FormDataListViewTypeEnum } from '../../../enums'
+import { Table } from 'antd'
+import { IFormData, IFormDataListConfig, IFormLayoutRow, IFormSchema, ITableColumn } from '../../../types'
+import { ICustomFunctionCall } from '../layout-renderer/3-element/1-dynamic-button'
+
+function FormDataListComponent({ formId, userId, onCustomFunctionCall }: IFormDataListComponent) {
+  const [loadings, setLoadings] = useState({ schema: true, data: true })
+  const [tableColumns, setTableColumns] = useState<ITableColumn[]>([])
+  const [paginatedReqData, setPaginatedReqData] = useState<IReqDataConfig>({
+    customFilter: { deletedDate: null },
+    dynamicFilter: JSON.stringify({}),
+    sort: {},
+  })
+  const [pagination, setPagination] = useState<IPagination | undefined>()
+  const [otherGenericConfigs, setOtherGenericConfigs] = useState<Partial<IFormDataListConfig> | undefined>(undefined)
+  const [formData, setFormData] = useState({ data: [], total: 0 })
+  const [headerLayout, setHeaderLayout] = useState<IFormLayoutRow[]>([])
+
+  useEffect(() => {
+    if (formId) {
+      client
+        .get(`/api/form/${formId}`)
+        .then((res) => {
+          if (res.status === 200) {
+            const parsedData: IFormSchema | null = parseJSON(res.data.data)
+            if (parsedData) {
+              const { elements, header, pagination: apiPagination, ...restConfigs } = parsedData.dataListConfig
+              setTableColumns(generateTableColumns(elements))
+              setPagination({
+                current: 1,
+                pageSize: apiPagination?.defaultPageSize ?? 10,
+                showSizeChanger: apiPagination?.showSizeChanger ?? false,
+                pageSizeOptions: apiPagination?.pageSizeOptions ?? [],
+              })
+              setHeaderLayout(header.layout)
+              setOtherGenericConfigs(restConfigs)
+            }
+          }
+        })
+        .finally(() => setLoadings((c) => ({ ...c, schema: false })))
+    }
+  }, [formId])
+
+  const fetchFormDataList = useCallback(
+    (dynamicFormId: number) => {
+      if (!pagination) {
+        setLoadings((c) => ({ ...c, data: false }))
+        return
+      }
+
+      client
+        .post(`/api/formdata/list/${dynamicFormId}`, paginatedReqData)
+        .then((res) => {
+          if (res.status === 200)
+            setFormData({ ...res.data, data: res.data.data.map((d: IFormData) => ({ ...d, ...JSON.parse(d.data) })) })
+        })
+        .finally(() => setLoadings((c) => ({ ...c, data: false })))
+    },
+    [paginatedReqData, pagination],
+  )
+
+  useEffect(() => {
+    if (formId) fetchFormDataList(formId)
+  }, [formId, fetchFormDataList])
+
+  if (loadings.schema) return <FormDataListSkeleton_Table />
+
+  return (
+    <div>
+      <FormDataListHeaderComponent
+        layout={headerLayout}
+        setPaginatedReqData={setPaginatedReqData}
+        userId={userId}
+        formId={formId}
+        titleComponent={
+          <div className="text-primary font-bold text-18 flex items-center gap-2">
+            <span>{otherGenericConfigs?.title}</span>
+            {otherGenericConfigs?.showCount && <span>({formData.total})</span>}
+          </div>
+        }
+        onCustomFunctionCall={onCustomFunctionCall}
+      />
+      {otherGenericConfigs?.listType === FormDataListViewTypeEnum.Table && (
+        <Table<IFormData>
+          dataSource={formData.data}
+          columns={tableColumns}
+          rowKey={(record) => record.id}
+          pagination={pagination}
+          loading={loadings.data}
+          onChange={(pagination, _, sorter) => {
+            console.log('ON TABLE CHANGE', pagination, sorter)
+          }}
+        />
+      )}
+    </div>
+  )
+}
+export { FormDataListComponent }
+
+export interface IReqDataConfig {
+  customFilter: {}
+  dynamicFilter: {}
+  sort: {}
+}
+
+interface IPagination {
+  current: number
+  pageSize: number
+  showSizeChanger?: boolean
+  pageSizeOptions?: number[]
+}
+
+type IFormDataListComponent = {
+  formId?: number
+  userId: string | number
+} & ICustomFunctionCall

package/src/components/form/2-details/index.tsx

@@ -0,0 +1,124 @@
+import { Form } from 'antd'
+import { useCallback, useEffect, useState } from 'react'
+import { IFormLayoutRow, IFormSchema, IMigrationRule } from '../../../types'
+import { NEW_FORM_DATA_IDENTIFIER } from '../../../constants'
+import client from '../../../functions/axios-handler'
+import { parseJSON } from '../../../functions/json-handlers'
+import { LayoutRendererRow } from '../layout-renderer/1-row'
+import { DynamicFormButtonRender, ICustomFunctionCall } from '../layout-renderer/3-element/1-dynamic-button'
+import FormDataListSkeleton_Details from '../../common/loading-skeletons/details'
+import { useLocation } from 'react-router-dom'
+import { queryParamsToObject } from '../../../functions'
+
+export default function FormDataDetailsComponent({
+  isPublic,
+  formId,
+  formKey,
+  formDataId,
+  companyKey,
+  baseServerUrl,
+  onCustomFunctionCall,
+}: IFormDataDetailsComponent) {
+  const [formDataRef] = Form.useForm()
+  const [loadings, setLoadings] = useState({ layout: true, data: true })
+  const [layout, setLayout] = useState<IFormLayoutRow[]>([])
+  const location = useLocation()
+
+  useEffect(() => {
+    // this is for converting the screen to PDF
+    if (isPublic && location.search) {
+      const formValues = queryParamsToObject(location.search)
+      formDataRef.setFieldsValue(formValues)
+    }
+  }, [isPublic, location, formDataRef])
+
+  useEffect(() => {
+    if (formDataRef) formDataRef.setFieldsValue({ formId, formKey, baseServerUrl, formDataId, companyKey })
+  }, [formDataRef, formId, formKey, baseServerUrl, formDataId, companyKey])
+
+  const fetchFormData = useCallback(
+    (dFormId: number, migrationRules: { [key: string]: IMigrationRule[] }) => {
+      if (formDataId === NEW_FORM_DATA_IDENTIFIER) setLoadings((c) => ({ ...c, data: false }))
+      else {
+        client
+          .get(`/api/formdata/${dFormId}/${formDataId}`)
+          .then((res) => {
+            if (res.status === 200) {
+              const { data: jsonData, ...restFormData } = res.data
+              const parsedFormData = parseJSON(jsonData)
+              if (parsedFormData) formDataRef.setFieldsValue({ ...restFormData, ...parsedFormData })
+              console.log({ parsedFormData })
+              console.log({ migrationRules })
+            }
+          })
+          .finally(() => setLoadings((c) => ({ ...c, data: false })))
+      }
+    },
+    [formDataId, formDataRef],
+  )
+
+  useEffect(() => {
+    if (formId || formKey) {
+      const endpoint = isPublic ? `/api/site/${formKey}` : `/api/form/${formId}`
+      client
+        .get(endpoint)
+        .then((res) => {
+          if (res.status === 200) {
+            const parsedData: IFormSchema | null = parseJSON(res.data.data)
+            if (parsedData) {
+              const { layout, migrationRules, convertScreenToPdf = false } = parsedData.detailsConfig
+
+              if (isPublic) {
+                formDataRef.setFieldValue('convertScreenToPdf', convertScreenToPdf)
+                setLoadings((c) => ({ ...c, data: false }))
+              } else fetchFormData(formId, migrationRules)
+              setLayout(layout)
+            }
+          }
+        })
+        .finally(() => setLoadings((c) => ({ ...c, layout: false })))
+    }
+  }, [formId, formKey, isPublic, formDataRef, fetchFormData])
+
+  if (loadings.layout || loadings.data) return <FormDataListSkeleton_Details />
+
+  return (
+    <Form layout="vertical" name="dynamic_form_data_form" form={formDataRef}>
+      {layout.map((row, rowIdx) => (
+        <LayoutRendererRow
+          key={rowIdx}
+          rowData={row}
+          formRef={formDataRef}
+          renderButton={(btnProps, conditions) => (
+            <DynamicFormButtonRender
+              isPublic={isPublic}
+              btnProps={btnProps}
+              conditions={conditions}
+              formDataId={formDataId}
+              formRef={formDataRef}
+              onCustomFunctionCall={onCustomFunctionCall}
+            />
+          )}
+        />
+      ))}
+    </Form>
+  )
+}
+
+type IFormDataDetailsComponent = {
+  baseServerUrl?: string
+  companyKey?: string
+  formDataId: string
+} & (IDataDetailsPublicProps | IDataDetailsPrivateProps) &
+  ICustomFunctionCall
+
+interface IDataDetailsPublicProps {
+  isPublic: true
+  formKey: string
+  formId?: number
+}
+interface IDataDetailsPrivateProps {
+  isPublic: false
+  formId: number
+  formKey?: string
+}

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

@@ -1,27 +1,52 @@
+import { FormInstance } from 'antd'
 import { ResponsivenessDeviceEnum } from '../../../../enums'
-import { getFlexContainerStyle, getFlexItemStyle } from '../../../../functions'
-import { IDataRender_ButtonProps, IFormLayoutRow } from '../../../../types'
+import { getFlexContainerStyle, getFlexItemStyle, kebabCaseToCamelCase } from '../../../../functions'
+import { IDataRender_ButtonProps, IFormLayoutElementConditions, IFormLayoutRow } from '../../../../types'
 import LayoutRendererCol from '../2-col'
-import { ReactElement, ReactNode } from 'react'
+import { ReactElement, ReactNode, useMemo } from 'react'
 
 export const LayoutRendererRow = ({
   rowData,
+  formRef,
   titleComponent,
   breakpointDevice = ResponsivenessDeviceEnum.Default,
   renderButton,
-}: {
+}: ILayoutRendererRow) => {
+  const styleConfig = useMemo(() => {
+    if (!rowData.style || !rowData.style[breakpointDevice]) return {}
+    return kebabCaseToCamelCase(rowData.style[breakpointDevice])
+  }, [rowData.style, breakpointDevice])
+
+  return (
+    <>
+      {rowData.props?.name && <div>{rowData.props?.name}</div>}
+      <div
+        style={{
+          ...styleConfig,
+          ...getFlexContainerStyle(breakpointDevice, rowData.responsiveness),
+        }}
+      >
+        {rowData.children.map((col, colIdx) => (
+          <div key={colIdx} style={getFlexItemStyle(breakpointDevice, colIdx, rowData.responsiveness)}>
+            <LayoutRendererCol
+              key={colIdx}
+              colData={col}
+              formRef={formRef}
+              titleComponent={titleComponent}
+              breakpointDevice={breakpointDevice}
+              renderButton={renderButton}
+            />
+          </div>
+        ))}
+      </div>
+    </>
+  )
+}
+
+interface ILayoutRendererRow {
   rowData: IFormLayoutRow
+  formRef: FormInstance
   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>
-  )
+  renderButton?: (props: IDataRender_ButtonProps, conditions?: IFormLayoutElementConditions) => ReactElement
 }

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

@@ -1,32 +1,54 @@
 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'
+import {
+  IDataRender_ButtonProps,
+  IFormLayoutCol,
+  IFormLayoutElement,
+  IFormLayoutElementConditions,
+  IFormLayoutRow,
+} from '../../../../types'
+import { FormLayoutNodeEnum, ResponsivenessDeviceEnum } from '../../../../enums'
+import { FormInstance } from 'antd'
 
 export default function LayoutRendererCol({
   colData,
+  formRef,
   titleComponent,
+  breakpointDevice,
   renderButton,
-}: {
+}: ILayoutRendererCol) {
+  return colData.children.map((item: IFormLayoutRow | IFormLayoutElement) =>
+    item.nodeType === FormLayoutNodeEnum.Row ? (
+      <LayoutRendererRow
+        key={item.id}
+        rowData={item}
+        formRef={formRef}
+        titleComponent={titleComponent}
+        breakpointDevice={breakpointDevice}
+        renderButton={renderButton}
+      />
+    ) : (
+      <div className="flex flex-col" key={item.id}>
+        <LayoutRendererElement
+          elementData={item}
+          formRef={formRef}
+          titleComponent={titleComponent}
+          breakpointDevice={breakpointDevice}
+          renderButton={renderButton}
+        />
+        {item.props && 'description' in item.props && (
+          <span className="text-neutral text-12 italic">{item.props.description}</span>
+        )}
+      </div>
+    ),
+  )
+}
+
+interface ILayoutRendererCol {
   colData: IFormLayoutCol
+  formRef: FormInstance
   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>
-  )
+  breakpointDevice: ResponsivenessDeviceEnum
+  renderButton?: (props: IDataRender_ButtonProps, conditions?: IFormLayoutElementConditions) => ReactElement
 }