goobs-frontend 0.7.66 → 0.7.67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.7.66",
+  "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/StyledComponent/hooks/useDropdown.tsx

@@ -1,4 +1,6 @@
-import { useState, useEffect, useCallback } from 'react'
+'use client'
+
+import { useState, useCallback } from 'react'
 import { StyledComponentProps } from '..'
 import { styled, Menu, MenuItem } from '@mui/material'
 import React from 'react'
@@ -29,41 +31,26 @@ export const useDropdown = (
   inputBoxRef: React.RefObject<HTMLDivElement>,
   onOptionSelect?: (option: string) => void
 ) => {
+  const { componentvariant, options, value, defaultOption } = props
+
   /** State to control if the dropdown is open */
   const [isDropdownOpen, setIsDropdownOpen] = useState(false)
   /** State to store the anchor element for the dropdown */
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
   /** State to store the filtered options */
-  const [filteredOptions, setFilteredOptions] = useState<string[]>([])
+  const [filteredOptions, setFilteredOptions] = useState<string[]>(
+    componentvariant === 'dropdown' && options ? [...options] : []
+  )
   /** State to store the currently selected option */
-  const [selectedOption, setSelectedOption] = useState('')
+  const [selectedOption, setSelectedOption] = useState(() => {
+    if (value !== undefined) return value
+    if (defaultOption !== undefined) return defaultOption
+    if (options && options.length > 0) return options[0]
+    return ''
+  })
   /** State to track if the dropdown is focused */
   const [isDropdownFocused, setIsDropdownFocused] = useState(false)
 
-  const { componentvariant, options, value, defaultOption } = props
-
-  /**
-   * Effect to set filtered options when component variant is dropdown and options are provided
-   */
-  useEffect(() => {
-    if (componentvariant === 'dropdown' && options) {
-      setFilteredOptions([...options])
-    }
-  }, [componentvariant, options])
-
-  /**
-   * Effect to set the selected option based on value, defaultOption, or first option
-   */
-  useEffect(() => {
-    if (value !== undefined) {
-      setSelectedOption(value)
-    } else if (defaultOption !== undefined) {
-      setSelectedOption(defaultOption)
-    } else if (options && options.length > 0) {
-      setSelectedOption(options[0])
-    }
-  }, [value, defaultOption, options])
-
   /**
    * Handle click on the dropdown to open/close it
    */
@@ -102,6 +89,22 @@ export const useDropdown = (
     [componentvariant]
   )
 
+  /**
+   * Update filtered options and selected option when props change
+   */
+  const updateDropdownState = useCallback(() => {
+    if (componentvariant === 'dropdown' && options) {
+      setFilteredOptions([...options])
+    }
+    if (value !== undefined) {
+      setSelectedOption(value)
+    } else if (defaultOption !== undefined) {
+      setSelectedOption(defaultOption)
+    } else if (options && options.length > 0) {
+      setSelectedOption(options[0])
+    }
+  }, [componentvariant, options, value, defaultOption])
+
   /**
    * Render the dropdown menu
    */
@@ -142,5 +145,6 @@ export const useDropdown = (
     handleOptionSelect,
     isDropdownFocused,
     handleInputFocus,
+    updateDropdownState,
   }
 }