goobs-frontend 0.7.65 → 0.7.67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.7.65",
+  "version": "0.7.67",
   "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",
@@ -28,7 +28,7 @@
     "@mui/icons-material": "^5.16.6",
     "@mui/material": "^5.16.6",
     "@types/lodash": "^4.17.7",
-    "goobs-cache": "^1.6.4",
+    "goobs-cache": "^1.7.0",
     "highlight.js": "^11.10.0",
     "lodash": "^4.17.21",
     "next": "14.2.5"

package/src/app/_app.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
-import type { AppProps } from 'next/app'
-
-const MyApp = ({ Component, pageProps }: AppProps) => {
-  return <Component {...pageProps} />
-}
-
-export default MyApp
+import React from 'react'
+import type { AppProps } from 'next/app'
+
+const MyApp = ({ Component, pageProps }: AppProps) => {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

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

@@ -16,79 +16,77 @@ const useHelperFooter = (initialFormname?: string) => {
     initialFormname
   )
 
-  const helperFooterAtom = session.atom<Record<
-    string,
-    HelperFooterMessage
-  > | null>(null)
-  const currentErrorIndexAtom = session.atom<number>(0)
+  const helperFooterAtom = useMemo(
+    () => session.atom<Record<string, HelperFooterMessage> | null>(null),
+    []
+  )
+  const currentErrorIndexAtom = useMemo(() => session.atom<number>(0), [])
+
+  const [helperFooters, setHelperFooters] = session.useAtom(helperFooterAtom)
+  const [currentErrorIndex, setCurrentErrorIndex] = session.useAtom(
+    currentErrorIndexAtom
+  )
+  const [helperFooterResult] = session.useAtom(
+    useMemo(
+      () => session.atom(`helperfooter:${initialFormname}`),
+      [initialFormname]
+    )
+  )
 
-  const fetchHelperFooters = useCallback(async (): Promise<Record<
+  const fetchHelperFooters = useCallback((): Record<
     string,
     HelperFooterMessage
-  > | null> => {
+  > | 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),
-            }
+    if (
+      helperFooters === null &&
+      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'
+        'useHelperFooter: Fetched helper footers:',
+        fetchedHelperFooters
       )
-      return null
+      setHelperFooters(fetchedHelperFooters)
+      return fetchedHelperFooters
     }
 
     return helperFooters
-  }, [initialFormname, helperFooterAtom])
+  }, [helperFooters, helperFooterResult, initialFormname, setHelperFooters])
 
-  const updateFormValidation = useCallback(async (): Promise<boolean> => {
+  const updateFormValidation = useCallback((): boolean => {
     console.log('useHelperFooter: updateFormValidation called')
-    const fetchedHelperFooters = await fetchHelperFooters()
+    const fetchedHelperFooters = fetchHelperFooters()
 
     if (fetchedHelperFooters) {
       const errorFooters = Object.values(fetchedHelperFooters).filter(
@@ -100,7 +98,6 @@ const useHelperFooter = (initialFormname?: string) => {
       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
@@ -110,9 +107,6 @@ const useHelperFooter = (initialFormname?: string) => {
         (a, b) => a.spreadMessagePriority - b.spreadMessagePriority
       )
 
-      const [currentErrorIndex, setCurrentErrorIndex] = session.useAtom(
-        currentErrorIndexAtom
-      )
       if (currentErrorIndex >= errorFooters.length) {
         setCurrentErrorIndex(0)
       }
@@ -123,11 +117,11 @@ const useHelperFooter = (initialFormname?: string) => {
 
     console.log('useHelperFooter: No helper footers, returning true')
     return true
-  }, [fetchHelperFooters, currentErrorIndexAtom])
+  }, [fetchHelperFooters, currentErrorIndex, setCurrentErrorIndex])
 
-  const checkFormStatus = useCallback(async () => {
+  const checkFormStatus = useCallback(() => {
     console.log('useHelperFooter: checkFormStatus called')
-    const fetchedHelperFooters = await fetchHelperFooters()
+    const fetchedHelperFooters = fetchHelperFooters()
     const status = fetchedHelperFooters
       ? Object.values(fetchedHelperFooters).every(
           value => !value.required || (value.required && value.hasInput)
@@ -137,9 +131,9 @@ const useHelperFooter = (initialFormname?: string) => {
     return status
   }, [fetchHelperFooters])
 
-  const getEmptyRequiredFields = useCallback(async () => {
+  const getEmptyRequiredFields = useCallback(() => {
     console.log('useHelperFooter: getEmptyRequiredFields called')
-    const fetchedHelperFooters = await fetchHelperFooters()
+    const fetchedHelperFooters = fetchHelperFooters()
     if (!fetchedHelperFooters) return []
     const emptyFields = Object.entries(fetchedHelperFooters)
       .filter(([, value]) => value.required && !value.hasInput)
@@ -148,9 +142,9 @@ const useHelperFooter = (initialFormname?: string) => {
     return emptyFields
   }, [fetchHelperFooters])
 
-  const getCurrentErrorMessage = useCallback(async () => {
+  const getCurrentErrorMessage = useCallback(() => {
     console.log('useHelperFooter: getCurrentErrorMessage called')
-    const fetchedHelperFooters = await fetchHelperFooters()
+    const fetchedHelperFooters = fetchHelperFooters()
     if (!fetchedHelperFooters) return undefined
     const errorFooters = Object.values(fetchedHelperFooters).filter(
       footer =>
@@ -158,14 +152,13 @@ const useHelperFooter = (initialFormname?: string) => {
         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])
+  }, [fetchHelperFooters, currentErrorIndex])
 
-  const isFormValid = useCallback(async () => {
-    const fetchedHelperFooters = await fetchHelperFooters()
+  const isFormValid = useCallback(() => {
+    const fetchedHelperFooters = fetchHelperFooters()
     if (!fetchedHelperFooters) return true
     const valid = Object.values(fetchedHelperFooters).every(
       footer =>
@@ -175,9 +168,9 @@ const useHelperFooter = (initialFormname?: string) => {
     return valid
   }, [fetchHelperFooters])
 
-  const nextError = useCallback(async () => {
+  const nextError = useCallback(() => {
     console.log('useHelperFooter: nextError called')
-    const fetchedHelperFooters = await fetchHelperFooters()
+    const fetchedHelperFooters = fetchHelperFooters()
     if (!fetchedHelperFooters) return
     const errorFooters = Object.values(fetchedHelperFooters).filter(
       footer =>
@@ -185,16 +178,13 @@ const useHelperFooter = (initialFormname?: string) => {
         footer.required
     )
     if (errorFooters.length > 0) {
-      const [currentErrorIndex, setCurrentErrorIndex] = session.useAtom(
-        currentErrorIndexAtom
-      )
-      setCurrentErrorIndex((currentErrorIndex + 1) % errorFooters.length)
+      setCurrentErrorIndex(prevIndex => (prevIndex + 1) % errorFooters.length)
       console.log(
         'useHelperFooter: New error index:',
         (currentErrorIndex + 1) % errorFooters.length
       )
     }
-  }, [fetchHelperFooters, currentErrorIndexAtom])
+  }, [fetchHelperFooters, currentErrorIndex, setCurrentErrorIndex])
 
   const result = useMemo(
     () => ({

package/src/components/Button/index.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback, useEffect, useState } from 'react'
+import React, { useMemo, useCallback, useState } from 'react'
 import { Button, Box, ButtonProps } from '@mui/material'
 import StarIcon from '@mui/icons-material/Star'
 import Typography from '../Typography'
@@ -74,9 +74,6 @@ const CustomButton: React.FC<CustomButtonProps> = React.memo(
       width,
     } = props
 
-    const [isFormFinished, setIsFormFinished] = useState<boolean>(false)
-    const [isCheckingForm, setIsCheckingForm] = useState<boolean>(true)
-
     const {
       updateFormValidation,
       checkFormStatus,
@@ -84,6 +81,9 @@ const CustomButton: React.FC<CustomButtonProps> = React.memo(
       fetchHelperFooters,
     } = useHelperFooter(formname)
 
+    const [isFormFinished, setIsFormFinished] = useState(false)
+    const [isCheckingForm, setIsCheckingForm] = useState(true)
+
     const checkFormState = useCallback(async (): Promise<void> => {
       console.log('CustomButton: Checking form state...')
       setIsCheckingForm(true)
@@ -110,11 +110,6 @@ const CustomButton: React.FC<CustomButtonProps> = React.memo(
       )
     }, [checkFormStatus, getEmptyRequiredFields, fetchHelperFooters])
 
-    useEffect(() => {
-      console.log('CustomButton: Performing initial check')
-      checkFormState()
-    }, [checkFormState])
-
     const handleButtonClick = useCallback(
       async (event: React.MouseEvent<HTMLButtonElement>): Promise<void> => {
         event.preventDefault()

package/src/components/Form/Popup/index.tsx

@@ -1,12 +1,6 @@
 'use client'
 
-import React, {
-  forwardRef,
-  useImperativeHandle,
-  useRef,
-  useMemo,
-  useCallback,
-} from 'react'
+import React, { useMemo } from 'react'
 import { Close } from '@mui/icons-material'
 import { Dialog, IconButton, Box, DialogProps } from '@mui/material'
 import ContentSection, { ContentSectionProps } from '../../Content'
@@ -24,8 +18,6 @@ export interface PopupFormProps {
   description?: string
   /** The grid configuration for the form content */
   grids?: ContentSectionProps['grids']
-  /** Callback function to handle form submission */
-  onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void
   /** Custom content to render inside the form */
   content?: React.ReactNode
   /** The type of popup to render ('dialog' or 'modal') */
@@ -52,160 +44,131 @@ export interface PopupFormProps {
  *   popupType="dialog"
  *   open={isOpen}
  *   onClose={handleClose}
- *   onSubmit={handleSubmit}
  *   content={<LoginForm />}
  *   width={400}
  * />
  */
-const PopupForm = forwardRef<HTMLFormElement, PopupFormProps>(
-  (
-    {
-      title,
-      description,
-      grids,
-      onSubmit,
-      content,
-      popupType,
-      open,
-      onClose,
-      width = 450,
-    },
-    ref
-  ) => {
-    const internalFormRef = useRef<HTMLFormElement>(null)
-
-    // Expose the internal form ref to the parent component
-    useImperativeHandle(ref, () => internalFormRef.current as HTMLFormElement)
-
-    /**
-     * Memoized header grid configuration
-     */
-    const headerGrid: ContentSectionProps['grids'][0] = useMemo(
-      () => ({
-        grid: {
-          gridconfig: {
+const PopupForm: React.FC<PopupFormProps> = ({
+  title,
+  description,
+  grids,
+  content,
+  popupType,
+  open,
+  onClose,
+  width = 450,
+}) => {
+  /**
+   * Memoized header grid configuration
+   */
+  const headerGrid: ContentSectionProps['grids'][0] = useMemo(
+    () => ({
+      grid: {
+        gridconfig: {
+          gridname: 'formHeader',
+          marginbottom: 1,
+          gridwidth: '100%',
+        },
+      },
+      typography: [
+        {
+          text: title,
+          fontvariant: 'merrih5',
+          fontcolor: 'black',
+          columnconfig: {
+            row: 1,
+            column: 1,
             gridname: 'formHeader',
-            marginbottom: 1,
-            gridwidth: '100%',
+            columnwidth: '100%',
+            alignment: 'left',
+            marginbottom: 1.5,
           },
         },
-        typography: [
-          {
-            text: title,
-            fontvariant: 'merrih5',
-            fontcolor: 'black',
-            columnconfig: {
-              row: 1,
-              column: 1,
-              gridname: 'formHeader',
-              columnwidth: '100%',
-              alignment: 'left',
-              marginbottom: 1.5,
-            },
-          },
-          {
-            text: description,
-            fontvariant: 'merriparagraph',
-            fontcolor: 'black',
-            columnconfig: {
-              row: 2,
-              column: 1,
-              alignment: 'left',
-              gridname: 'formHeader',
-              columnwidth: '100%',
-            },
+        {
+          text: description,
+          fontvariant: 'merriparagraph',
+          fontcolor: 'black',
+          columnconfig: {
+            row: 2,
+            column: 1,
+            alignment: 'left',
+            gridname: 'formHeader',
+            columnwidth: '100%',
           },
-        ] as ExtendedTypographyProps[],
-      }),
-      [title, description]
-    )
-
-    /**
-     * Handle form submission
-     * @param {React.FormEvent<HTMLFormElement>} event - The form submission event
-     */
-    const handleSubmit = useCallback(
-      (event: React.FormEvent<HTMLFormElement>) => {
-        event.preventDefault()
-        if (onSubmit) {
-          onSubmit(event)
-        }
-      },
-      [onSubmit]
-    )
+        },
+      ] as ExtendedTypographyProps[],
+    }),
+    [title, description]
+  )
 
-    /**
-     * Memoized header render function
-     */
-    const renderHeader = useMemo(
-      () => <ContentSection grids={[headerGrid]} />,
-      [headerGrid]
-    )
+  /**
+   * Memoized header render function
+   */
+  const renderHeader = useMemo(
+    () => <ContentSection grids={[headerGrid]} />,
+    [headerGrid]
+  )
 
-    /**
-     * Memoized content render function
-     */
-    const renderContent = useMemo(
-      () => (
-        <Box
-          // @ts-ignore
-          sx={formContainerStyle}
-        >
-          <Box mb={0}>{renderHeader}</Box>
-          <form onSubmit={handleSubmit} ref={internalFormRef}>
-            {React.isValidElement(content)
-              ? React.cloneElement(content as React.ReactElement, {
-                  onSubmit: handleSubmit,
-                })
-              : content || (grids && <ContentSection grids={grids} />)}
-          </form>
-        </Box>
-      ),
-      [renderHeader, handleSubmit, content, grids]
-    )
+  /**
+   * Memoized content render function
+   */
+  const renderContent = useMemo(
+    () => (
+      <Box
+        // @ts-ignore
+        sx={formContainerStyle}
+      >
+        <Box mb={0}>{renderHeader}</Box>
+        {React.isValidElement(content)
+          ? React.cloneElement(content as React.ReactElement, {
+              onClose: onClose,
+              open: open,
+            })
+          : content || (grids && <ContentSection grids={grids} />)}
+      </Box>
+    ),
+    [renderHeader, content, grids, onClose, open]
+  )
 
-    const dialogProps: DialogProps = {
-      open: popupType === 'modal' ? true : open || false,
-      onClose: popupType === 'modal' ? undefined : onClose,
-      fullWidth: true,
-      maxWidth: false,
-      PaperProps: {
-        style: {
-          width: `${width}px`,
-        },
+  const dialogProps: DialogProps = {
+    open: popupType === 'modal' ? true : open || false,
+    onClose: popupType === 'modal' ? undefined : onClose,
+    fullWidth: true,
+    maxWidth: false,
+    PaperProps: {
+      style: {
+        width: `${width}px`,
       },
-    }
-
-    if (popupType === 'modal') {
-      return (
-        <Dialog {...dialogProps} disableEscapeKeyDown hideBackdrop>
-          {renderContent}
-        </Dialog>
-      )
-    }
+    },
+  }
 
+  if (popupType === 'modal') {
     return (
-      <Dialog {...dialogProps}>
-        {onClose && (
-          <IconButton
-            size="small"
-            onClick={onClose}
-            sx={{
-              position: 'absolute',
-              right: 8,
-              top: 8,
-              color: theme => theme.palette.grey[500],
-            }}
-          >
-            <Close />
-          </IconButton>
-        )}
+      <Dialog {...dialogProps} disableEscapeKeyDown hideBackdrop>
         {renderContent}
       </Dialog>
     )
   }
-)
 
-PopupForm.displayName = 'PopupForm'
+  return (
+    <Dialog {...dialogProps}>
+      {onClose && (
+        <IconButton
+          size="small"
+          onClick={onClose}
+          sx={{
+            position: 'absolute',
+            right: 8,
+            top: 8,
+            color: theme => theme.palette.grey[500],
+          }}
+        >
+          <Close />
+        </IconButton>
+      )}
+      {renderContent}
+    </Dialog>
+  )
+}
 
 export default PopupForm