goobs-frontend 0.7.67 → 0.7.69

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.7.67",
+  "version": "0.7.69",
   "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",
@@ -17,31 +17,29 @@
     "start": "next start",
     "lint": "next lint"
   },
-  "peerDependencies": {
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0"
-  },
   "dependencies": {
     "@emotion/cache": "^11.13.1",
-    "@emotion/react": "^11.13.0",
+    "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@mui/icons-material": "^5.16.6",
-    "@mui/material": "^5.16.6",
+    "@mui/icons-material": "^5.16.7",
+    "@mui/material": "^5.16.7",
     "@types/lodash": "^4.17.7",
-    "goobs-cache": "^1.7.0",
     "highlight.js": "^11.10.0",
+    "jotai": "^2.9.3",
     "lodash": "^4.17.21",
-    "next": "14.2.5"
+    "next": "14.2.6",
+    "react-datepicker": "^7.3.0",
+    "react-qr-code": "^2.0.15"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "^14.2.5",
-    "@types/node": "^22.1.0",
-    "@types/react": "18.3.3",
+    "@next/eslint-plugin-next": "^14.2.6",
+    "@types/node": "^22.5.0",
+    "@types/react": "18.3.4",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.0.1",
-    "@typescript-eslint/parser": "^8.0.1",
+    "@typescript-eslint/eslint-plugin": "^8.2.0",
+    "@typescript-eslint/parser": "^8.2.0",
     "eslint": "^8.57.0",
-    "eslint-config-next": "^14.2.5",
+    "eslint-config-next": "^14.2.6",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "prettier": "^3.3.3",

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/index.tsx

@@ -1,213 +1,99 @@
-import React, { useMemo, useCallback, useState } from 'react'
+'use client'
+import React from 'react'
 import { Button, Box, ButtonProps } from '@mui/material'
-import StarIcon from '@mui/icons-material/Star'
 import Typography from '../Typography'
-import { red } from '../../styles/palette'
-import useHelperFooter from './hook/useHelperFooter'
 
-export type ButtonAlignment = 'left' | 'center' | 'right'
-
-export interface CustomButtonProps
-  extends Omit<ButtonProps, 'color' | 'variant'> {
+export interface CustomButtonProps extends ButtonProps {
   text?: string
   backgroundcolor?: string
-  outlinecolor?: string
   fontcolor?: string
-  fontlocation?: ButtonAlignment
-  fontvariant?:
-    | 'arapeyh1'
-    | 'arapeyh2'
-    | 'arapeyh3'
-    | 'arapeyh4'
-    | 'arapeyh5'
-    | 'arapeyh6'
-    | 'arapeyparagraph'
-    | 'arapeyhelperheader'
-    | 'arapeyhelperfooter'
-    | 'interh1'
-    | 'interh2'
-    | 'interh3'
-    | 'interh4'
-    | 'interh5'
-    | 'interh6'
-    | 'interparagraph'
-    | 'interhelperheader'
-    | 'interhelperfooter'
-    | 'merrih1'
-    | 'merrih2'
-    | 'merrih3'
-    | 'merrih4'
-    | 'merrih5'
-    | 'merrih6'
-    | 'merriparagraph'
-    | 'merrihelperheader'
-    | 'merrihelperfooter'
-  icon?: React.ReactNode | false
+  fontvariant?: 'merriparagraph' | 'merrihelperfooter'
+  width?: string
+  disableButton?: 'true' | 'false'
+  icon?: React.ReactNode
   iconcolor?: string
   iconsize?: string
-  iconlocation?: 'left' | 'top' | 'right'
-  variant?: 'text' | 'outlined' | 'contained'
-  onClick?: () => void
-  width?: string
-  formname?: string
-  name?: string
+  iconlocation?: 'left' | 'right' | 'above'
+  fontlocation?: 'left' | 'center' | 'right'
 }
 
 const CustomButton: React.FC<CustomButtonProps> = React.memo(
   props => {
+    console.log('[trace-button] CustomButton: Rendering component', { props })
     const {
       text,
       variant,
       fontvariant = 'merriparagraph',
-      icon,
-      iconlocation,
-      iconsize,
-      type,
       onClick,
       fontcolor,
-      name,
-      formname,
-      outlinecolor,
       backgroundcolor,
-      fontlocation,
-      iconcolor,
       width,
+      disableButton,
+      icon,
+      iconcolor,
+      iconsize,
+      iconlocation = 'left',
+      fontlocation = 'center',
+      ...restProps
     } = props
 
-    const {
-      updateFormValidation,
-      checkFormStatus,
-      getEmptyRequiredFields,
-      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)
-
-      const formStatus = await checkFormStatus()
-      const emptyFields = await getEmptyRequiredFields()
-      const helperFooters = await fetchHelperFooters()
-
-      console.log('CustomButton: Form status:', formStatus)
-      console.log('CustomButton: Empty fields:', emptyFields)
-      console.log('CustomButton: Helper footers:', helperFooters)
-
-      const newIsFormFinished =
-        formStatus &&
-        emptyFields.length === 0 &&
-        (!helperFooters || Object.keys(helperFooters).length === 0)
-
-      setIsFormFinished(newIsFormFinished)
-      setIsCheckingForm(false)
-
-      console.log(
-        'CustomButton: Form status changed. Is form finished:',
-        newIsFormFinished
-      )
-    }, [checkFormStatus, getEmptyRequiredFields, fetchHelperFooters])
-
-    const handleButtonClick = useCallback(
-      async (event: React.MouseEvent<HTMLButtonElement>): Promise<void> => {
-        event.preventDefault()
-        console.log(
-          'CustomButton: Button clicked. Is form finished:',
-          isFormFinished,
-          'Is checking form:',
-          isCheckingForm
-        )
-        if (!isFormFinished || isCheckingForm) return
-
-        const validationResult = await updateFormValidation()
-        console.log('CustomButton: Validation result:', validationResult)
-        if (validationResult && onClick) {
-          onClick()
-        }
-        checkFormState()
-      },
-      [
-        isFormFinished,
-        isCheckingForm,
-        updateFormValidation,
-        onClick,
-        checkFormState,
-      ]
-    )
-
-    const renderIcon = useCallback((): React.ReactNode => {
-      if (icon === false) {
-        return null
-      }
-      if (React.isValidElement(icon)) {
-        return React.cloneElement(icon as React.ReactElement, {
-          style: { fontSize: iconsize },
+    const handleButtonClick = (
+      event: React.MouseEvent<HTMLButtonElement>
+    ): void => {
+      console.log('[trace-button] CustomButton: Button clicked')
+      event.preventDefault()
+      onClick?.(event)
+    }
+
+    const buttonStyle = {
+      backgroundColor: backgroundcolor,
+      width: width,
+    }
+
+    const isDisabled = disableButton === 'true'
+
+    const iconStyle = {
+      color: iconcolor,
+      fontSize: iconsize,
+    }
+
+    const IconComponent = icon
+      ? React.cloneElement(icon as React.ReactElement, {
+          style: { ...iconStyle, ...(icon as React.ReactElement).props.style },
         })
-      }
-      return <StarIcon style={{ fontSize: iconsize }} />
-    }, [icon, iconsize])
-
-    const buttonStyle = useMemo(
-      () => ({
-        minWidth: text ? 'auto' : 'fit-content',
-        paddingLeft: text ? '8px' : '0',
-        paddingRight: text ? '8px' : '0',
-        justifyContent: fontlocation || 'center',
-        backgroundColor: backgroundcolor,
-        border: outlinecolor ? `1px solid ${outlinecolor}` : undefined,
-        color: iconcolor,
-        width: width,
-        opacity: !isFormFinished || isCheckingForm ? 0.5 : 1,
-      }),
-      [
-        text,
-        fontlocation,
-        backgroundcolor,
-        outlinecolor,
-        iconcolor,
-        width,
-        isFormFinished,
-        isCheckingForm,
-      ]
-    )
-
-    const buttonContent = useMemo(
-      () => (
-        <Box display="flex" alignItems="center">
-          {iconlocation === 'left' && renderIcon()}
-          {text && (
-            <Typography
-              fontvariant={fontvariant}
-              fontcolor={fontcolor}
-              text={text}
-            />
-          )}
-          {iconlocation === 'right' && renderIcon()}
-        </Box>
-      ),
-      [iconlocation, renderIcon, text, fontvariant, fontcolor]
-    )
+      : null
 
-    const messageComponent = useMemo(
-      () =>
-        !isFormFinished || isCheckingForm ? (
+    console.log('[trace-button] CustomButton: Rendering button', {
+      variant,
+      style: buttonStyle,
+      disableButton,
+      isDisabled,
+    })
+
+    const buttonContent = (
+      <>
+        {iconlocation === 'above' && IconComponent}
+        <Box
+          display="flex"
+          alignItems="center"
+          justifyContent={
+            fontlocation === 'left'
+              ? 'flex-start'
+              : fontlocation === 'right'
+                ? 'flex-end'
+                : 'center'
+          }
+          width="100%"
+        >
+          {iconlocation === 'left' && IconComponent}
           <Typography
-            fontvariant="merrihelperfooter"
-            fontcolor={red.main}
-            text="Fill in required fields"
-            marginTop={0.5}
-            marginBottom={0}
-            align="center"
-            width="100%"
+            fontvariant={fontvariant}
+            fontcolor={isDisabled ? 'grey' : fontcolor}
+            text={text || ''}
           />
-        ) : null,
-      [isFormFinished, isCheckingForm]
-    )
-
-    console.log(
-      `CustomButton: Rendering. Is form finished: ${isFormFinished} Is checking form: ${isCheckingForm}`
+          {iconlocation === 'right' && IconComponent}
+        </Box>
+      </>
     )
 
     return (
@@ -218,19 +104,23 @@ const CustomButton: React.FC<CustomButtonProps> = React.memo(
         width={width}
       >
         <Button
-          disableElevation
+          {...restProps}
           variant={variant}
-          startIcon={null}
-          endIcon={null}
-          type={type}
-          name={name}
           onClick={handleButtonClick}
-          style={buttonStyle}
-          disabled={!isFormFinished || isCheckingForm}
+          style={{
+            ...buttonStyle,
+            flexDirection: iconlocation === 'above' ? 'column' : 'row',
+            justifyContent:
+              fontlocation === 'left'
+                ? 'flex-start'
+                : fontlocation === 'right'
+                  ? 'flex-end'
+                  : 'center',
+          }}
+          disabled={isDisabled}
         >
           {buttonContent}
         </Button>
-        {messageComponent}
       </Box>
     )
   },
@@ -239,24 +129,26 @@ const CustomButton: React.FC<CustomButtonProps> = React.memo(
       prevProps.text === nextProps.text &&
       prevProps.variant === nextProps.variant &&
       prevProps.fontvariant === nextProps.fontvariant &&
-      prevProps.icon === nextProps.icon &&
-      prevProps.iconlocation === nextProps.iconlocation &&
-      prevProps.iconsize === nextProps.iconsize &&
-      prevProps.type === nextProps.type &&
       prevProps.onClick === nextProps.onClick &&
       prevProps.fontcolor === nextProps.fontcolor &&
-      prevProps.name === nextProps.name &&
-      prevProps.formname === nextProps.formname &&
-      prevProps.outlinecolor === nextProps.outlinecolor &&
       prevProps.backgroundcolor === nextProps.backgroundcolor &&
-      prevProps.fontlocation === nextProps.fontlocation &&
+      prevProps.width === nextProps.width &&
+      prevProps.disableButton === nextProps.disableButton &&
+      prevProps.icon === nextProps.icon &&
       prevProps.iconcolor === nextProps.iconcolor &&
-      prevProps.width === nextProps.width
-    console.log('CustomButton: Props changed:', !propsAreEqual)
+      prevProps.iconsize === nextProps.iconsize &&
+      prevProps.iconlocation === nextProps.iconlocation &&
+      prevProps.fontlocation === nextProps.fontlocation
+
+    console.log('[trace-button] CustomButton: Props comparison', {
+      propsAreEqual,
+      prevProps: Object.keys(prevProps),
+      nextProps: Object.keys(nextProps),
+    })
     return propsAreEqual
   }
 )
 
 CustomButton.displayName = 'CustomButton'
-
+console.log('[trace-button] CustomButton: Component defined')
 export default CustomButton

package/src/components/ConfirmationCodeInput/index.tsx

@@ -1,10 +1,9 @@
 'use client'
-import React, { ChangeEvent, KeyboardEvent } from 'react'
+import React, { ChangeEvent, KeyboardEvent, useState } from 'react'
 import { Input, Box } from '@mui/material'
 import { useCodeConfirmation } from './utils/useCodeConfirmation'
 import { columnconfig } from '../../components/Grid'
 import { red, green } from '../../styles/palette'
-import { session } from 'goobs-cache'
 
 export interface ConfirmationCodeInputsProps {
   identifier?: string
@@ -30,8 +29,7 @@ const ConfirmationCodeInputs: React.FC<ConfirmationCodeInputsProps> = ({
   'aria-invalid': ariaInvalid,
   ...props
 }) => {
-  const verificationCodeAtom = session.atom<string>('')
-  const [, setVerificationCode] = session.useAtom(verificationCodeAtom)
+  const [, setVerificationCode] = useState('')
 
   const { handleCodeChange, handleKeyDown, combinedCode } = useCodeConfirmation(
     {
@@ -76,14 +74,14 @@ const ConfirmationCodeInputs: React.FC<ConfirmationCodeInputsProps> = ({
   }
 
   /**
-   * useEffect hook is used to set the verification code into the session atom using goobs-cache.
+   * useEffect hook is used to set the verification code into the state using useState.
    * It sets the code whenever the combinedCode changes and the code is valid.
    */
   React.useEffect(() => {
     if (isValid) {
       setVerificationCode(combinedCode)
     }
-  }, [combinedCode, isValid, setVerificationCode])
+  }, [combinedCode, isValid])
 
   return (
     <Box

package/src/components/Content/Structure/button/useButton.tsx

@@ -2,7 +2,6 @@
 import React from 'react'
 import CustomButton, { CustomButtonProps } from './../../../Button'
 import { columnconfig, cellconfig } from '../../../Grid'
-import { TypographyPropsVariantOverrides } from '@mui/material'
 
 export interface ExtendedButtonProps extends CustomButtonProps {
   columnconfig?: Partial<columnconfig>
@@ -19,20 +18,6 @@ const useButton = (grid: {
     index: number
   ): columnconfig => {
     const {
-      text,
-      name,
-      backgroundcolor,
-      outlinecolor,
-      fontcolor,
-      width,
-      fontlocation,
-      fontvariant,
-      icon,
-      iconcolor,
-      iconsize,
-      iconlocation,
-      variant,
-      onClick,
       columnconfig: itemColumnConfig,
       cellconfig,
       ...restProps
@@ -54,26 +39,7 @@ const useButton = (grid: {
       cellconfig: {
         ...cellconfig,
       },
-      component: (
-        <CustomButton
-          key={`button-${index}`}
-          text={text}
-          name={name}
-          backgroundcolor={backgroundcolor}
-          outlinecolor={outlinecolor}
-          fontcolor={fontcolor}
-          width={width}
-          fontlocation={fontlocation}
-          fontvariant={fontvariant as keyof TypographyPropsVariantOverrides}
-          icon={icon}
-          iconcolor={iconcolor}
-          iconsize={iconsize}
-          iconlocation={iconlocation}
-          variant={variant}
-          onClick={onClick}
-          {...restProps}
-        />
-      ),
+      component: <CustomButton key={`button-${index}`} {...restProps} />,
     }
 
     return mergedConfig

package/src/components/Content/Structure/datefield/useDateField.tsx

@@ -0,0 +1,55 @@
+'use client'
+import React from 'react'
+import DateField, { DateFieldProps } from './../../../DateField'
+import { columnconfig, cellconfig } from '../../../Grid'
+
+export interface ExtendedDateFieldProps extends DateFieldProps {
+  columnconfig?: Partial<columnconfig>
+  cellconfig?: cellconfig
+}
+
+const useDateField = (grid: {
+  datefield?: ExtendedDateFieldProps | ExtendedDateFieldProps[]
+}) => {
+  if (!grid.datefield) return null
+
+  const renderDateField = (
+    dateFieldItem: ExtendedDateFieldProps,
+    index: number
+  ): columnconfig => {
+    const {
+      columnconfig: itemColumnConfig,
+      cellconfig,
+      ...restProps
+    } = dateFieldItem
+
+    if (
+      !itemColumnConfig ||
+      typeof itemColumnConfig !== 'object' ||
+      typeof itemColumnConfig.row !== 'number' ||
+      typeof itemColumnConfig.column !== 'number'
+    ) {
+      throw new Error(
+        'columnconfig must be an object with row and column as numbers'
+      )
+    }
+
+    const mergedConfig: columnconfig = {
+      ...(itemColumnConfig as columnconfig),
+      cellconfig: {
+        ...cellconfig,
+      },
+      component: <DateField key={`datefield-${index}`} {...restProps} />,
+    }
+
+    return mergedConfig
+  }
+
+  if (Array.isArray(grid.datefield)) {
+    return grid.datefield.map(renderDateField)
+  } else {
+    return [renderDateField(grid.datefield, 0)]
+  }
+}
+
+export default useDateField

package/src/components/Content/Structure/dropdown/useDropdown.tsx

@@ -0,0 +1,55 @@
+'use client'
+import React from 'react'
+import Dropdown, { DropdownProps } from './../../../Dropdown'
+import { columnconfig, cellconfig } from '../../../Grid'
+
+export interface ExtendedDropdownProps extends DropdownProps {
+  columnconfig?: Partial<columnconfig>
+  cellconfig?: cellconfig
+}
+
+const useDropdown = (grid: {
+  dropdown?: ExtendedDropdownProps | ExtendedDropdownProps[]
+}) => {
+  if (!grid.dropdown) return null
+
+  const renderDropdown = (
+    dropdownItem: ExtendedDropdownProps,
+    index: number
+  ): columnconfig => {
+    const {
+      columnconfig: itemColumnConfig,
+      cellconfig,
+      ...restProps
+    } = dropdownItem
+
+    if (
+      !itemColumnConfig ||
+      typeof itemColumnConfig !== 'object' ||
+      typeof itemColumnConfig.row !== 'number' ||
+      typeof itemColumnConfig.column !== 'number'
+    ) {
+      throw new Error(
+        'columnconfig must be an object with row and column as numbers'
+      )
+    }
+
+    const mergedConfig: columnconfig = {
+      ...(itemColumnConfig as columnconfig),
+      cellconfig: {
+        ...cellconfig,
+      },
+      component: <Dropdown key={`dropdown-${index}`} {...restProps} />,
+    }
+
+    return mergedConfig
+  }
+
+  if (Array.isArray(grid.dropdown)) {
+    return grid.dropdown.map(renderDropdown)
+  } else {
+    return [renderDropdown(grid.dropdown, 0)]
+  }
+}
+
+export default useDropdown