form-craft-package 1.0.0

package/src/enums.ts

@@ -0,0 +1,177 @@
+export enum ElementTypeEnum {
+  ShortInput = 'Short Input',
+  LongInput = 'Long Input',
+  Search = 'Search',
+  NumberInput = 'Number Input',
+  Select = 'Select',
+  Radio = 'Radio',
+  Checkbox = 'Checkbox',
+  DatePicker = 'Date Picker',
+  TimePicker = 'Time Picker',
+  FileUpload = 'File Upload',
+  Switch = 'Switch',
+  Slider = 'Slider',
+  Password = 'Password',
+  Container = 'Container',
+  RichTextEditor = 'Rich Text Editor',
+  Table = 'Table',
+  ReadOnly = 'Read Only',
+  Divider = 'Divider',
+  Button = 'Button',
+  TitlePlacement = 'Title Placement',
+  Signature = 'Signature',
+  Title = 'Title',
+  ReCaptcha = 'reCAPTCHA',
+}
+export enum MigrationReasonOperationEnum {
+  RenameField = 'rename_field',
+  CreateRepeatingSection = 'create_repeating_section',
+  // RemoveField = 'remove_field',
+  // ConvertDataType = 'convert_data_type',
+  // MakeRequired = 'make_required',
+  // AddRequiredField = 'add_required_field',
+  // ValidationRuleChange = 'validation_rule_change',
+  // UpdateDefaultValue = 'update_default_value',
+  // ModifyStructure = 'modify_structure',
+  // ConditionalLogicUpdate = 'conditional_logic_update',
+}
+export enum FieldValidationEnum {
+  Required = 'Required',
+  DataLength = 'DataLength',
+  MaxDataLength = 'MaxDataLength',
+  MinDataLength = 'MinDataLength',
+  MinValue = 'MinValue',
+  MaxValue = 'MaxValue',
+  Regex = 'Regex',
+  Email = 'Email',
+  PhoneNumber_US = 'PhoneNumber_US',
+  PhoneNumber_MN = 'PhoneNumber_MN',
+}
+export enum FormLayoutTypeEnum {
+  Main = 'main',
+  Sidebar = 'sidebar',
+}
+export enum FormLayoutNodeEnum { // when saved, everything in the layout will have either of these node types
+  Element = 'Element', // it's the actual display of the form (can be a field, a divider etc.)
+  Row = 'Row',
+  Col = 'Col',
+}
+export enum FormLayoutAddableNodeEnum { // used on SuperAdmin portal only during the form crafting
+  Template = 'Template',
+  NewElement = 'NewElement',
+  Container = 'Container',
+}
+export enum TooltipPlacementEnum {
+  Top = 'top',
+  Left = 'left',
+  Right = 'right',
+  Bottom = 'bottom',
+  TopLeft = 'topLeft',
+  TopRight = 'topRight',
+  BottomLeft = 'bottomLeft',
+  BottomRight = 'bottomRight',
+  LeftTop = 'leftTop',
+  LeftBottom = 'leftBottom',
+  RightTop = 'rightTop',
+  RightBottom = 'rightBottom',
+}
+export enum TooltipTriggerEnum {
+  Hover = 'hover',
+  Click = 'click',
+}
+export enum AlignTypeEnum {
+  Left = 'left',
+  Center = 'center',
+  Right = 'right',
+}
+export enum DataRenderTypeEnum {
+  // string enum for readability
+  Default = 'default',
+  Date = 'date',
+  Conditional = 'conditional',
+  Buttons = 'buttons',
+}
+export enum ButtonElementTypeEnum {
+  Primary = 'primary',
+  PrimaryOutlined = 'primary-outline',
+  Secondary = 'secondary',
+  SecondaryOutlined = 'secondary-outline',
+  Danger = 'danger',
+  DangerOutlined = 'danger-outline',
+  Link = 'link',
+}
+export enum ButtonElementSizeEnum {
+  Default = 'default',
+  Small = 'small',
+  Large = 'large',
+}
+export enum FieldElementOptionSourceEnum {
+  ManualCreation = 'ManualCreation',
+  FromOtherForms = 'FromOtherForms',
+}
+export enum FormDataListViewTypeEnum {
+  Table = 'table',
+}
+export enum ButtonActionCategoryEnum {
+  // those are predefined actions that can be completed with formId and formDataId
+  CreateNewData = 'create-new-data',
+  ViewDataDetails = 'view-data-details',
+  DeleteData = 'delete-data',
+  DuplicateData = 'duplicate-data',
+  SaveDataChanges = 'save-data-changes',
+  PublishDataChanges = 'publish-data-changes',
+  ReturnToDataList = 'return-to-data-list',
+  ViewDataVersions = 'view-data-versions',
+  CustomFunction = 'custom-function',
+}
+export enum CSSLayoutType {
+  Flex = 'flex',
+}
+export enum FlexDirection {
+  Row = 'row',
+  Col = 'column',
+  RowReverse = 'row-reverse',
+  ColReverse = 'column-reverse',
+}
+export enum FlexWrap {
+  Wrap = 'wrap',
+  NoWrap = 'nowrap',
+}
+export enum FlexJustifyContent {
+  Center = 'center',
+  Start = 'flex-start',
+  End = 'flex-end',
+  SpaceAround = 'space-around',
+  SpaceBetween = 'space-between',
+  Stretch = 'stretch',
+}
+export enum FlexAlignItems {
+  Center = 'center',
+  Start = 'flex-start',
+  End = 'flex-end',
+  Stretch = 'stretch',
+  Baseline = 'baseline',
+}
+export enum FilterConfigTypeEnum {
+  NoFilter = 'NoFilter',
+  ByMe = 'ByMe',
+  Custom = 'Custom',
+}
+export enum TitleElementTypeEnum {
+  Plain,
+  Rich,
+}
+export enum ResponsivenessDeviceEnum {
+  Default = 'default',
+  Laptop = 'lg',
+  Tablet = 'md',
+  Mobile = 'xs',
+}
+export enum FormLoadingModalTypeEnum {
+  SavingChanges,
+  ErrorOccured,
+}
+export enum TOKEN_COOKIE_KEYS {
+  AccessToken = 'd9508def54ed42b258db56c92155662f',
+  RefreshToken = 'd293a508f5409447b3bb63171e53e8c4',
+}

package/src/functions/axios-handler.ts

@@ -0,0 +1,158 @@
+import Cookies from 'js-cookie'
+import axios from 'axios'
+
+import { notification } from 'antd'
+import { TOKEN_COOKIE_KEYS } from '../enums'
+
+let baseURL = 'https://bark-backend-form.azurewebsites.net'
+
+const getCookieDeadline = (expiresIn: number): Date => {
+  const now = new Date()
+  return new Date(now.getTime() + expiresIn * 1000)
+}
+
+const authResHandler = (resData: any) => {
+  const expires = getCookieDeadline(resData.expires_in)
+  const cookieSettings: { expires?: Date; path: string; domain?: string } = {
+    expires,
+    path: '/',
+  }
+
+  Cookies.set(TOKEN_COOKIE_KEYS.AccessToken, resData.access_token, cookieSettings)
+  Cookies.set(TOKEN_COOKIE_KEYS.RefreshToken, resData.refresh_token)
+}
+
+/** --------------- Access Token Interceptor --------------- */
+
+let accessToken = Cookies.get(TOKEN_COOKIE_KEYS.AccessToken)
+const client = axios.create({
+  baseURL,
+  headers: { Authorization: `Bearer ${accessToken}` },
+})
+
+client.interceptors.request.use((req) => {
+  accessToken = Cookies.get(TOKEN_COOKIE_KEYS.AccessToken)
+  if (req.headers) req.headers.Authorization = `Bearer ${accessToken}`
+  return req
+})
+
+/** --------------- Refresh Token --------------- */
+
+const is401 = (error: any) => {
+  try {
+    return error.response.status === 401
+  } catch (e) {
+    return false
+  }
+}
+
+const handleTokenRefresh = () => {
+  const refreshToken = Cookies.get(TOKEN_COOKIE_KEYS.RefreshToken)
+  if (!refreshToken) {
+    notification.destroy()
+    window.location.href = '/login'
+  }
+  return new Promise((resolve, reject) => {
+    axios
+      .post(`${baseURL}/connect/token/refresh`, { refreshToken })
+      .then(({ data }) => {
+        resolve({
+          accessToken: data.accessToken,
+          refreshToken: data.refreshToken,
+          expiresIn: data.expiresIn,
+        })
+      })
+      .catch((err) => {
+        reject(err)
+      })
+  })
+}
+
+const customAxiosInterceptor = (axiosClient: any) => {
+  let isRefreshing = false
+  let failedQueue: any = []
+
+  const helperFunctions = {
+    handleTokenRefresh,
+    is401,
+  }
+
+  const processQueue = (error: any, token = null) => {
+    failedQueue.forEach((req: any) => {
+      if (error) req.reject(error)
+      else req.resolve(token)
+    })
+
+    failedQueue = []
+  }
+
+  const interceptor = (error: any) => {
+    if (!helperFunctions.is401(error)) return Promise.reject(error)
+
+    if (error.config._retry || error.config._queued) return Promise.reject(error)
+
+    const originalRequest = error.config
+    if (isRefreshing)
+      return new Promise((resolve, reject) => failedQueue.push({ resolve, reject }))
+        .then((accessToken) => {
+          originalRequest._queued = true
+          originalRequest.headers['Authorization'] = `Bearer ${accessToken}`
+          return axiosClient.request(originalRequest)
+        })
+        .catch(() => Promise.reject(error))
+
+    originalRequest._retry = true
+    isRefreshing = true
+
+    return new Promise((resolve, reject) => {
+      helperFunctions.handleTokenRefresh
+        .call(helperFunctions.handleTokenRefresh)
+        .then((newTokenResData: any) => {
+          authResHandler(newTokenResData)
+          originalRequest.headers['Authorization'] = `Bearer ${newTokenResData.accessToken}`
+
+          processQueue(null, newTokenResData.accessToken)
+          resolve(axiosClient.request(originalRequest))
+        })
+        .catch((err) => {
+          processQueue(err, null)
+          reject(err)
+        })
+        .finally(() => (isRefreshing = false))
+    })
+  }
+
+  axiosClient.interceptors.response.use(undefined, interceptor)
+}
+
+client.interceptors.response.use(
+  (res) => res,
+  (error) => {
+    if (error.response?.status === 401) customAxiosInterceptor(client)
+    else displayNotification(error)
+    return Promise.reject(error)
+  },
+)
+
+const displayNotification = (error: any) => {
+  if (error && error.response) {
+    let description = `${error.response.path} - ${error.response.status}`
+    let message = error.response.data
+    if (error.response.status === 503) message = 'Deployment is in progress!'
+    else if (error.response.status === 500) message = 'Server or BE error!'
+
+    console.error(description)
+
+    const baseNotif = { message, duration: 4, onClick: () => notification.destroy() }
+    notification.destroy()
+
+    notification.error({ ...baseNotif })
+
+    console.error(
+      `Request failed: ${error.response.status} ${error.response.statusText} ${error.response.data} ${error.response.config?.url}`,
+    )
+  }
+}
+
+export default client
+export { authResHandler }

package/src/functions/data-list-functions.tsx

@@ -0,0 +1,41 @@
+import dayjs from 'dayjs'
+import { AlignTypeEnum, DataRenderTypeEnum } from '../enums'
+import { IDataRender_Buttons, IDataRender_Date, IFormData, IFormDataListElement, ITableColumn } from '../types'
+import { DynamicFormButtonRender } from '../components'
+
+export const generateTableColumns = (elements: IFormDataListElement[]) => {
+  return elements.map((el) => {
+    const col: ITableColumn = {
+      ...el,
+      title: el.label,
+      dataIndex: el.key ?? '',
+      sorter: el.sortable,
+    }
+    if (el.renderConfig) {
+      if (el.renderConfig.type === DataRenderTypeEnum.Date) {
+        const { format = '' } = (el.renderConfig as IDataRender_Date) ?? {}
+        col.render = (data: string) => dayjs(data).format(format)
+      } else if (el.renderConfig.type === DataRenderTypeEnum.Buttons) {
+        col.render = (rowData: IFormData) => {
+          return (
+            <div
+              className={`flex items-center gap-2 ${
+                el.align === AlignTypeEnum.Center
+                  ? 'justify-center'
+                  : el.align === AlignTypeEnum.Right
+                  ? 'justify-end'
+                  : ''
+              }`}
+            >
+              {(el.renderConfig as IDataRender_Buttons).buttons.map((btnProps) => (
+                <DynamicFormButtonRender btnProps={btnProps} formDataId={rowData.id} />
+              ))}
+            </div>
+          )
+        }
+      }
+    }
+
+    return col
+  })
+}

package/src/functions/form-schema-validator.ts

@@ -0,0 +1,50 @@
+import { IFormSchema } from '../types'
+import Ajv, { ErrorObject, Options } from 'ajv'
+
+import formSchema from '../ajv/form/form.schema.json'
+import layoutSchema from '../ajv/form/layout.schema.json'
+import migrationRulesSchema from '../ajv/form/migration-rules.schema.json'
+
+export const validateFormJsonSchema = (data: IFormSchema) => {
+  const ajvOptions: Options = {
+    allErrors: true,
+    logger: false,
+    verbose: true,
+  }
+
+  const ajv = new Ajv(ajvOptions)
+
+  ajv.addSchema(layoutSchema, layoutSchema.$id)
+  ajv.addSchema(migrationRulesSchema, migrationRulesSchema.$id)
+  ajv.addSchema(formSchema, formSchema.$id)
+
+  const validate = ajv.compile(formSchema)
+
+  // const isSchemaValid = ajv.validateSchema(formSchema)
+
+  const isValid = validate(data)
+
+  let sortedErrors: ErrorObject[] = []
+  if (!isValid) {
+    const errors: ErrorObject[] = validate.errors || []
+    sortedErrors = errors.sort((a: ErrorObject, b: ErrorObject) => {
+      const getErrorPriority = (error: ErrorObject): number => {
+        const standardKeywords = ['minLength', 'required', 'type', 'minimum', 'maximum', 'pattern', 'minItems']
+        if (standardKeywords.includes(error.keyword)) return 1
+
+        const schemaKeywords = ['oneOf', 'allOf', 'anyOf', 'not']
+        if (schemaKeywords.includes(error.keyword)) return 2
+
+        return 3
+      }
+
+      const priorityDiff = getErrorPriority(a) - getErrorPriority(b)
+      if (priorityDiff !== 0) return priorityDiff
+
+      // If in the same group, sort by schemaPath length (descending)
+      return b.schemaPath.length - a.schemaPath.length
+    })
+  }
+
+  return { isValid, errors: sortedErrors }
+}

package/src/functions/get-element-props.ts

@@ -0,0 +1,20 @@
+import { ButtonElementSizeEnum, ButtonElementTypeEnum } from '../enums'
+import { IDataRender_ButtonProps } from '../types'
+
+// since all the field elements have different type, this function is generalizing the types
+export const getElementGeneralizedProps = (props: Record<string, any> | undefined): Record<string, any> => ({
+  ...props,
+})
+
+export const getButtonRenderProps = (btnProps: IDataRender_ButtonProps) => ({
+  primary: [ButtonElementTypeEnum.Primary, ButtonElementTypeEnum.PrimaryOutlined].includes(btnProps.buttonType!),
+  secondary: [ButtonElementTypeEnum.Secondary, ButtonElementTypeEnum.SecondaryOutlined].includes(btnProps.buttonType!),
+  danger: [ButtonElementTypeEnum.Danger, ButtonElementTypeEnum.DangerOutlined].includes(btnProps.buttonType!),
+  short: btnProps.size === ButtonElementSizeEnum.Small,
+  link: btnProps.buttonType === ButtonElementTypeEnum.Link,
+  outline: [
+    ButtonElementTypeEnum.PrimaryOutlined,
+    ButtonElementTypeEnum.SecondaryOutlined,
+    ButtonElementTypeEnum.DangerOutlined,
+  ].includes(btnProps.buttonType!),
+})

package/src/functions/index.ts

@@ -0,0 +1,56 @@
+import { DEFAULT_FLEX_CONFIG } from '../constants'
+import { ElementTypeEnum, FieldElementOptionSourceEnum, FormLayoutNodeEnum, ResponsivenessDeviceEnum } from '../enums'
+import { IFilterNested, IFormLayoutCol, IFormLayoutElement, IFormLayoutRow, IFlexConfig } from '../types'
+export * from './validations'
+export * from './data-list-functions'
+
+export const extractFiltersFromLayout = (layout: IFormLayoutRow[]) => {
+  const filters: IFilterNested = {}
+
+  const findFilters = (
+    node: IFormLayoutRow | IFormLayoutCol | IFormLayoutElement,
+  ): IFormLayoutRow | IFormLayoutCol | IFormLayoutElement => {
+    if (node.nodeType === FormLayoutNodeEnum.Row) node.children.forEach((child) => findFilters(child) as IFormLayoutCol)
+    else if (node.nodeType === FormLayoutNodeEnum.Col)
+      node.children.forEach((child) => findFilters(child) as IFormLayoutRow | IFormLayoutElement)
+
+    if (node.nodeType === FormLayoutNodeEnum.Element) {
+      if (
+        node.elementType === ElementTypeEnum.Radio &&
+        node.props.optionSource?.type === FieldElementOptionSourceEnum.ManualCreation
+      ) {
+        if (node.key)
+          node.props.optionSource.options.forEach((op) => {
+            if (op.filter)
+              filters[node.key] = filters[node.key]
+                ? { ...filters[node.key], [op.value]: op.filter }
+                : { [op.value]: op.filter }
+          })
+        else console.warn('Element key was not found!')
+      } else if (node.props && 'filter' in node.props && node.props.filter) {
+        if (node.key) filters[node.key] = node.props.filter
+        else console.warn('Element key was not found!')
+      }
+    }
+    return { ...node, nodeType: FormLayoutNodeEnum.Element } as IFormLayoutElement
+  }
+
+  layout.forEach((row) => findFilters(row) as IFormLayoutRow)
+  return filters
+}
+
+/** ---------------------------------------------------------------------------------------------------------  */
+
+export const getFlexContainerStyle = (device: ResponsivenessDeviceEnum, responsiveness?: IFlexConfig) =>
+  responsiveness ? responsiveness[device]?.container ?? DEFAULT_FLEX_CONFIG.Container : DEFAULT_FLEX_CONFIG.Container
+
+export const getFlexItemStyle = (device: ResponsivenessDeviceEnum, itemIdx: number, responsiveness?: IFlexConfig) =>
+  responsiveness ? responsiveness[device]?.items[itemIdx] ?? DEFAULT_FLEX_CONFIG.Item : DEFAULT_FLEX_CONFIG.Item
+
+/** ---------------------------------------------------------------------------------------------------------  */
+
+export const constructDynamicFormHref = (name: string) => '/d/' + name.split(' ').join('-').toLowerCase()
+
+/** ---------------------------------------------------------------------------------------------------------  */
+
+/** ---------------------------------------------------------------------------------------------------------  */

package/src/functions/json-handlers.ts

@@ -0,0 +1,19 @@
+// TODO: add json validator
+// TODO: pass the T and validate with it?
+
+export const parseJSON = <T extends any>(jsonString: string): T | null => {
+  try {
+    return JSON.parse(jsonString) as T
+  } catch (error) {
+    console.error('Invalid JSON string:', error)
+    return null
+  }
+}
+export const stringifyJSON = (jsonObject: any): string => {
+  try {
+    return JSON.stringify(jsonObject)
+  } catch (error) {
+    console.error('Unable to stringify JSON:', error)
+    return ''
+  }
+}

package/src/functions/validations.ts

@@ -0,0 +1,120 @@
+import { FieldValidationEnum } from '../enums'
+export * from '../types/layout-elements/validation'
+import { FormItemRule, IValidationRule } from '../types/layout-elements/validation'
+
+/**
+ * Maps an array of validation rules into Form.Item-compatible rules.
+ *
+ * Each validation rule in the input array is transformed based on its `key` and `value`.
+ * Default messages are used if no message is provided for a rule.
+ *
+ * @param rules - Array of validation rules to be transformed.
+ * @returns Array of structured Form.Item-compatible rules.
+ */
+export const mapToFormItemRules = (rules: IValidationRule[]): FormItemRule[] => {
+  const errors: string[] = []
+
+  const formItemRules = rules.reduce<FormItemRule[]>((acc, rule) => {
+    if ([FieldValidationEnum.MaxValue, FieldValidationEnum.MinValue].includes(rule.key)) return acc
+
+    const defaultMessages: Partial<Record<FieldValidationEnum, string>> = {
+      [FieldValidationEnum.Required]: 'This field is required',
+      [FieldValidationEnum.DataLength]: 'Length does not match',
+      [FieldValidationEnum.MaxDataLength]: 'Max length exceeded',
+      [FieldValidationEnum.MinDataLength]: 'Does not meet min length',
+      [FieldValidationEnum.Regex]: 'Invalid format',
+      [FieldValidationEnum.Email]: 'Invalid email address',
+      [FieldValidationEnum.PhoneNumber_US]: 'Invalid phone number',
+      [FieldValidationEnum.PhoneNumber_MN]: 'Invalid phone number',
+    }
+
+    const message = rule.message || defaultMessages[rule.key] || ''
+    let formItemRule: FormItemRule | null = null
+
+    switch (rule.key) {
+      case FieldValidationEnum.Required:
+        formItemRule = handleRequiredRule(message)
+        break
+      case FieldValidationEnum.MaxDataLength:
+        formItemRule = handleMaxLengthRule(rule.value, message)
+        break
+      case FieldValidationEnum.MinDataLength:
+        formItemRule = handleMinLengthRule(rule.value, message)
+        break
+      case FieldValidationEnum.Regex:
+        formItemRule = handleRegexRule(rule.value, message)
+        break
+      case FieldValidationEnum.Email:
+        formItemRule = handleEmailRule(message)
+        break
+      case FieldValidationEnum.PhoneNumber_US:
+        formItemRule = handlePhoneNumberRule(message, PhoneNumberCountry.US)
+      case FieldValidationEnum.PhoneNumber_MN:
+        formItemRule = handlePhoneNumberRule(message, PhoneNumberCountry.MN)
+        break
+      default:
+        errors.push(`Unsupported validation type: ${rule.key}`)
+        break
+    }
+
+    if (formItemRule) acc.push(formItemRule)
+
+    return acc
+  }, [])
+
+  if (errors.length > 0) {
+    console.error('Validation Errors:', errors)
+  }
+
+  return formItemRules
+}
+
+export const handleRequiredRule = (message: string): FormItemRule => ({
+  required: true,
+  message,
+})
+
+const handleDataLengthRule = (value: any, message: string): FormItemRule | null => {
+  if (value) return { len: parseFloat(value), message }
+
+  console.error('Invalid or missing value for ExactDataLength rule')
+  return null
+}
+
+const handleMinLengthRule = (value: any, message: string): FormItemRule | null => {
+  if (value != null && value !== '') return { min: parseFloat(value), message }
+
+  console.error('Invalid or missing value for MinLength rule')
+  return null
+}
+
+const handleMaxLengthRule = (value: any, message: string): FormItemRule | null => {
+  if (value != null && value !== '') return { max: parseFloat(value), message }
+
+  console.error('Invalid or missing value for MaxLength rule')
+  return null
+}
+
+const handleRegexRule = (value: any, message: string): FormItemRule | null => {
+  if (value instanceof RegExp) return { pattern: value, message }
+
+  console.error('Invalid or missing value for Regex rule')
+  return null
+}
+
+const handleEmailRule = (message: string): FormItemRule => ({ type: 'email', message })
+
+const handlePhoneNumberRule = (message: string, country: PhoneNumberCountry): FormItemRule => ({
+  pattern: country === PhoneNumberCountry.US ? /^\(\d{3}\) \d{3}-\d{4}$/ : /^\d{4} \d{4}$/,
+  message,
+})
+
+enum PhoneNumberCountry {
+  US,
+  MN,
+}
+
+export const findMaxAndMinValues = (validations: IValidationRule[] = []) => ({
+  maxValue: validations.find((v) => v.key === FieldValidationEnum.MaxValue)?.value,
+  minValue: validations.find((v) => v.key === FieldValidationEnum.MinValue)?.value,
+})