goobs-frontend 0.7.63 → 0.7.65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.7.63",
+  "version": "0.7.65",
   "description": "A comprehensive React-based UI library built on Material-UI, offering a wide range of customizable components including grids, typography, buttons, cards, forms, navigation, pricing tables, steppers, tooltips, accordions, and more. Designed for building responsive and consistent user interfaces with advanced features like form validation, theming, and code syntax highlighting.",
   "license": "MIT",
   "main": "./src/index.ts",
@@ -22,32 +22,32 @@
     "react-dom": "^17.0.0 || ^18.0.0"
   },
   "dependencies": {
-    "@emotion/cache": "^11.11.0",
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
-    "@mui/icons-material": "^5.16.0",
-    "@mui/material": "^5.16.0",
-    "@types/lodash": "^4.17.6",
-    "goobs-cache": "^1.4.0",
+    "@emotion/cache": "^11.13.1",
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^5.16.6",
+    "@mui/material": "^5.16.6",
+    "@types/lodash": "^4.17.7",
+    "goobs-cache": "^1.6.4",
     "highlight.js": "^11.10.0",
     "lodash": "^4.17.21",
     "next": "14.2.5"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^14.2.5",
-    "@types/node": "^20.14.10",
+    "@types/node": "^22.1.0",
     "@types/react": "18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.16.0",
-    "@typescript-eslint/parser": "^7.16.0",
+    "@typescript-eslint/eslint-plugin": "^8.0.1",
+    "@typescript-eslint/parser": "^8.0.1",
     "eslint": "^8.57.0",
     "eslint-config-next": "^14.2.5",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "prettier": "^3.3.2",
+    "eslint-plugin-prettier": "^5.2.1",
+    "prettier": "^3.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "typescript": "^5.5.3"
+    "typescript": "^5.5.4"
   },
   "files": [
     "src"

package/src/components/Button/hook/useHelperFooter.tsx

@@ -0,0 +1,224 @@
+import { useCallback, useMemo } from 'react'
+import { session } from 'goobs-cache'
+
+export interface HelperFooterMessage {
+  status: 'error' | 'success' | 'emptyAndRequired'
+  statusMessage: string
+  spreadMessage: string
+  spreadMessagePriority: number
+  required: boolean
+  hasInput?: boolean
+}
+
+const useHelperFooter = (initialFormname?: string) => {
+  console.log(
+    'useHelperFooter: Hook called with initialFormname:',
+    initialFormname
+  )
+
+  const helperFooterAtom = session.atom<Record<
+    string,
+    HelperFooterMessage
+  > | null>(null)
+  const currentErrorIndexAtom = session.atom<number>(0)
+
+  const fetchHelperFooters = useCallback(async (): Promise<Record<
+    string,
+    HelperFooterMessage
+  > | null> => {
+    console.log('useHelperFooter: fetchHelperFooters called')
+    if (!initialFormname) {
+      console.log('useHelperFooter: No formname provided, returning null')
+      return null
+    }
+
+    const [helperFooters, setHelperFooters] = session.useAtom(helperFooterAtom)
+
+    if (helperFooters === null) {
+      const [helperFooterResult] = session.useAtom(
+        session.atom(`helperfooter:${initialFormname}`)
+      )
+      console.log('useHelperFooter: helperFooterResult:', helperFooterResult)
+
+      if (
+        helperFooterResult &&
+        typeof helperFooterResult === 'object' &&
+        helperFooterResult !== null
+      ) {
+        const fetchedHelperFooters: Record<string, HelperFooterMessage> = {}
+
+        for (const [key, value] of Object.entries(helperFooterResult)) {
+          if (
+            typeof value === 'object' &&
+            value !== null &&
+            'status' in value &&
+            'statusMessage' in value &&
+            'spreadMessage' in value &&
+            'spreadMessagePriority' in value &&
+            'required' in value &&
+            'hasInput' in value
+          ) {
+            fetchedHelperFooters[key] = {
+              status: value.status as 'error' | 'success' | 'emptyAndRequired',
+              statusMessage: String(value.statusMessage),
+              spreadMessage: String(value.spreadMessage),
+              spreadMessagePriority: Number(value.spreadMessagePriority),
+              required: Boolean(value.required),
+              hasInput: Boolean(value.hasInput),
+            }
+          }
+        }
+
+        console.log(
+          'useHelperFooter: Fetched helper footers:',
+          fetchedHelperFooters
+        )
+        setHelperFooters(fetchedHelperFooters)
+        return fetchedHelperFooters
+      }
+
+      console.log(
+        'useHelperFooter: Invalid helper footer result, returning null'
+      )
+      return null
+    }
+
+    return helperFooters
+  }, [initialFormname, helperFooterAtom])
+
+  const updateFormValidation = useCallback(async (): Promise<boolean> => {
+    console.log('useHelperFooter: updateFormValidation called')
+    const fetchedHelperFooters = await fetchHelperFooters()
+
+    if (fetchedHelperFooters) {
+      const errorFooters = Object.values(fetchedHelperFooters).filter(
+        footer =>
+          (footer.status === 'error' || footer.status === 'emptyAndRequired') &&
+          footer.required
+      )
+
+      console.log('useHelperFooter: Error footers:', errorFooters)
+
+      if (errorFooters.length === 0) {
+        const [, setCurrentErrorIndex] = session.useAtom(currentErrorIndexAtom)
+        setCurrentErrorIndex(0)
+        console.log('useHelperFooter: No errors found, returning true')
+        return true
+      }
+
+      errorFooters.sort(
+        (a, b) => a.spreadMessagePriority - b.spreadMessagePriority
+      )
+
+      const [currentErrorIndex, setCurrentErrorIndex] = session.useAtom(
+        currentErrorIndexAtom
+      )
+      if (currentErrorIndex >= errorFooters.length) {
+        setCurrentErrorIndex(0)
+      }
+
+      console.log('useHelperFooter: Errors found, returning false')
+      return false
+    }
+
+    console.log('useHelperFooter: No helper footers, returning true')
+    return true
+  }, [fetchHelperFooters, currentErrorIndexAtom])
+
+  const checkFormStatus = useCallback(async () => {
+    console.log('useHelperFooter: checkFormStatus called')
+    const fetchedHelperFooters = await fetchHelperFooters()
+    const status = fetchedHelperFooters
+      ? Object.values(fetchedHelperFooters).every(
+          value => !value.required || (value.required && value.hasInput)
+        )
+      : true
+    console.log('useHelperFooter: Form status:', status)
+    return status
+  }, [fetchHelperFooters])
+
+  const getEmptyRequiredFields = useCallback(async () => {
+    console.log('useHelperFooter: getEmptyRequiredFields called')
+    const fetchedHelperFooters = await fetchHelperFooters()
+    if (!fetchedHelperFooters) return []
+    const emptyFields = Object.entries(fetchedHelperFooters)
+      .filter(([, value]) => value.required && !value.hasInput)
+      .map(([key]) => key)
+    console.log('useHelperFooter: Empty required fields:', emptyFields)
+    return emptyFields
+  }, [fetchHelperFooters])
+
+  const getCurrentErrorMessage = useCallback(async () => {
+    console.log('useHelperFooter: getCurrentErrorMessage called')
+    const fetchedHelperFooters = await fetchHelperFooters()
+    if (!fetchedHelperFooters) return undefined
+    const errorFooters = Object.values(fetchedHelperFooters).filter(
+      footer =>
+        (footer.status === 'error' || footer.status === 'emptyAndRequired') &&
+        footer.required
+    )
+    if (errorFooters.length === 0) return undefined
+    const [currentErrorIndex] = session.useAtom(currentErrorIndexAtom)
+    const message = errorFooters[currentErrorIndex]?.spreadMessage
+    console.log('useHelperFooter: Current error message:', message)
+    return message
+  }, [fetchHelperFooters, currentErrorIndexAtom])
+
+  const isFormValid = useCallback(async () => {
+    const fetchedHelperFooters = await fetchHelperFooters()
+    if (!fetchedHelperFooters) return true
+    const valid = Object.values(fetchedHelperFooters).every(
+      footer =>
+        footer.status !== 'error' && footer.status !== 'emptyAndRequired'
+    )
+    console.log('useHelperFooter: isFormValid:', valid)
+    return valid
+  }, [fetchHelperFooters])
+
+  const nextError = useCallback(async () => {
+    console.log('useHelperFooter: nextError called')
+    const fetchedHelperFooters = await fetchHelperFooters()
+    if (!fetchedHelperFooters) return
+    const errorFooters = Object.values(fetchedHelperFooters).filter(
+      footer =>
+        (footer.status === 'error' || footer.status === 'emptyAndRequired') &&
+        footer.required
+    )
+    if (errorFooters.length > 0) {
+      const [currentErrorIndex, setCurrentErrorIndex] = session.useAtom(
+        currentErrorIndexAtom
+      )
+      setCurrentErrorIndex((currentErrorIndex + 1) % errorFooters.length)
+      console.log(
+        'useHelperFooter: New error index:',
+        (currentErrorIndex + 1) % errorFooters.length
+      )
+    }
+  }, [fetchHelperFooters, currentErrorIndexAtom])
+
+  const result = useMemo(
+    () => ({
+      errorMessage: getCurrentErrorMessage,
+      isFormValid,
+      updateFormValidation,
+      fetchHelperFooters,
+      nextError,
+      checkFormStatus,
+      getEmptyRequiredFields,
+    }),
+    [
+      getCurrentErrorMessage,
+      isFormValid,
+      updateFormValidation,
+      fetchHelperFooters,
+      nextError,
+      checkFormStatus,
+      getEmptyRequiredFields,
+    ]
+  )
+
+  console.log('useHelperFooter: Returning result:', result)
+  return result
+}
+
+export default useHelperFooter