goobs-frontend 0.8.7 → 0.8.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.8.7",
+  "version": "0.8.9",
   "type": "module",
   "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",
@@ -22,31 +22,31 @@
     "@emotion/cache": "^11.13.5",
     "@emotion/react": "^11.13.5",
     "@emotion/styled": "^11.13.5",
-    "@mui/icons-material": "^6.1.8",
-    "@mui/material": "^6.1.8",
+    "@mui/icons-material": "^6.1.10",
+    "@mui/material": "^6.1.10",
     "@types/lodash": "^4.17.13",
     "highlight.js": "^11.10.0",
     "jotai": "^2.10.3",
     "lodash": "^4.17.21",
-    "next": "15.0.3",
+    "next": "15.0.4",
     "otplib": "^12.0.1",
     "react-datepicker": "^7.5.0",
     "react-qr-code": "^2.0.15"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "^15.0.3",
-    "@types/node": "^22.10.0",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@typescript-eslint/eslint-plugin": "^8.16.0",
-    "@typescript-eslint/parser": "^8.16.0",
-    "eslint": "^9.15.0",
-    "eslint-config-next": "^15.0.3",
+    "@next/eslint-plugin-next": "^15.0.4",
+    "@types/node": "^22.10.1",
+    "@types/react": "19.0.1",
+    "@types/react-dom": "^19.0.1",
+    "@typescript-eslint/eslint-plugin": "^8.17.0",
+    "@typescript-eslint/parser": "^8.17.0",
+    "eslint": "^9.16.0",
+    "eslint-config-next": "^15.0.4",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "prettier": "^3.4.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "prettier": "^3.4.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "typescript": "^5.7.2"
   },
   "files": [

package/src/components/Button/index.tsx

@@ -1,7 +1,8 @@
 'use client'
 import React from 'react'
-import { Button, Box, ButtonProps } from '@mui/material'
+import { Button, Box, ButtonProps, SxProps, Theme } from '@mui/material'
 import Typography from '../Typography'
+import { SvgIconProps } from '@mui/material/SvgIcon'
 
 export interface CustomButtonProps extends ButtonProps {
   text?: string
@@ -9,131 +10,112 @@ export interface CustomButtonProps extends ButtonProps {
   fontcolor?: string
   fontvariant?: 'merriparagraph' | 'merrihelperfooter'
   width?: string
+  height?: string
   disableButton?: 'true' | 'false'
-  icon?: React.ReactNode
+  icon?: React.ReactElement<SvgIconProps>
   iconcolor?: string
   iconsize?: string
   iconlocation?: 'left' | 'right' | 'above'
   fontlocation?: 'left' | 'center' | 'right'
 }
 
-const CustomButton: React.FC<CustomButtonProps> = React.memo(
-  props => {
-    const {
-      text,
-      variant,
-      fontvariant = 'merriparagraph',
-      onClick,
-      fontcolor,
-      backgroundcolor,
-      width,
-      disableButton,
-      icon,
-      iconcolor,
-      iconsize,
-      iconlocation = 'left',
-      fontlocation = 'center',
-      ...restProps
-    } = props
-
-    const handleButtonClick = (
-      event: React.MouseEvent<HTMLButtonElement>
-    ): void => {
-      event.preventDefault()
-      onClick?.(event)
-    }
-
-    const buttonStyle = {
-      backgroundColor: backgroundcolor,
-      width: width,
-    }
-
-    const isDisabled = disableButton === 'true'
+const CustomButton: React.FC<CustomButtonProps> = ({
+  text,
+  variant,
+  fontvariant = 'merriparagraph',
+  onClick,
+  fontcolor,
+  backgroundcolor,
+  width,
+  height,
+  disableButton,
+  icon,
+  iconcolor,
+  iconsize,
+  iconlocation = 'left',
+  fontlocation = 'center',
+  sx,
+  ...restProps
+}) => {
+  const handleButtonClick = (
+    event: React.MouseEvent<HTMLButtonElement>
+  ): void => {
+    event.preventDefault()
+    onClick?.(event)
+  }
 
-    const iconStyle = {
-      color: iconcolor,
-      fontSize: iconsize,
-    }
+  const buttonSx: SxProps<Theme> = {
+    ...(backgroundcolor && { backgroundColor: backgroundcolor }),
+    ...(width && { width }),
+    ...(height && { height }),
+    flexDirection: iconlocation === 'above' ? 'column' : 'row',
+    justifyContent:
+      fontlocation === 'left'
+        ? 'flex-start'
+        : fontlocation === 'right'
+          ? 'flex-end'
+          : 'center',
+    ...(sx as object),
+  }
 
-    const IconComponent = icon
-      ? React.cloneElement(icon as React.ReactElement, {
-          style: { ...iconStyle, ...(icon as React.ReactElement).props.style },
-        })
-      : null
+  const isDisabled = disableButton === 'true'
 
-    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={fontvariant}
-            fontcolor={isDisabled ? 'grey' : fontcolor}
-            text={text || ''}
-          />
-          {iconlocation === 'right' && IconComponent}
-        </Box>
-      </>
-    )
+  const IconComponent = icon
+    ? React.cloneElement(icon, {
+        sx: {
+          color: iconcolor,
+          fontSize: iconsize,
+        },
+      } as Partial<SvgIconProps>)
+    : null
 
-    return (
+  const buttonContent = (
+    <>
+      {iconlocation === 'above' && IconComponent}
       <Box
         display="flex"
-        flexDirection="column"
         alignItems="center"
-        width={width}
+        justifyContent={
+          fontlocation === 'left'
+            ? 'flex-start'
+            : fontlocation === 'right'
+              ? 'flex-end'
+              : 'center'
+        }
+        width="100%"
+        height="100%"
       >
-        <Button
-          {...restProps}
-          variant={variant}
-          onClick={handleButtonClick}
-          style={{
-            ...buttonStyle,
-            flexDirection: iconlocation === 'above' ? 'column' : 'row',
-            justifyContent:
-              fontlocation === 'left'
-                ? 'flex-start'
-                : fontlocation === 'right'
-                  ? 'flex-end'
-                  : 'center',
-          }}
-          disabled={isDisabled}
-        >
-          {buttonContent}
-        </Button>
+        {iconlocation === 'left' && IconComponent}
+        <Typography
+          fontvariant={fontvariant}
+          fontcolor={isDisabled ? 'grey' : fontcolor}
+          text={text || ''}
+        />
+        {iconlocation === 'right' && IconComponent}
       </Box>
-    )
-  },
-  (prevProps, nextProps) => {
-    const propsAreEqual =
-      prevProps.text === nextProps.text &&
-      prevProps.variant === nextProps.variant &&
-      prevProps.fontvariant === nextProps.fontvariant &&
-      prevProps.onClick === nextProps.onClick &&
-      prevProps.fontcolor === nextProps.fontcolor &&
-      prevProps.backgroundcolor === nextProps.backgroundcolor &&
-      prevProps.width === nextProps.width &&
-      prevProps.disableButton === nextProps.disableButton &&
-      prevProps.icon === nextProps.icon &&
-      prevProps.iconcolor === nextProps.iconcolor &&
-      prevProps.iconsize === nextProps.iconsize &&
-      prevProps.iconlocation === nextProps.iconlocation &&
-      prevProps.fontlocation === nextProps.fontlocation
+    </>
+  )
 
-    return propsAreEqual
-  }
-)
+  return (
+    <Box
+      display="flex"
+      flexDirection="column"
+      alignItems="center"
+      width={width}
+      height={height}
+    >
+      <Button
+        {...restProps}
+        variant={variant}
+        onClick={handleButtonClick}
+        sx={buttonSx}
+        disabled={isDisabled}
+      >
+        {buttonContent}
+      </Button>
+    </Box>
+  )
+}
 
 CustomButton.displayName = 'CustomButton'
 export default CustomButton

package/src/components/Checkbox/index.tsx

@@ -0,0 +1,79 @@
+'use client'
+
+import { Checkbox } from '@mui/material'
+import React from 'react'
+import * as palette from '../../styles/palette'
+
+interface DataGridCheckboxProps {
+  onClick?: (event: React.MouseEvent) => void
+  checked?: boolean
+  indeterminate?: boolean
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
+  disabled?: boolean
+}
+
+function DataGridCheckbox({
+  onClick,
+  checked,
+  indeterminate,
+  onChange,
+  disabled,
+  ...props
+}: DataGridCheckboxProps) {
+  console.log('DataGridCheckbox render:', { checked, indeterminate, disabled })
+
+  const handleClick = (event: React.MouseEvent) => {
+    console.log('Checkbox clicked:', {
+      checked,
+      indeterminate,
+      eventTarget: event.target,
+    })
+
+    if (onClick) {
+      onClick(event)
+    }
+  }
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    event.stopPropagation()
+
+    console.log('Checkbox changed:', {
+      newChecked: event.target.checked,
+      previousChecked: checked,
+      indeterminate,
+    })
+
+    if (onChange) {
+      onChange(event)
+    }
+  }
+
+  return (
+    <Checkbox
+      sx={{
+        color: palette.marine.main,
+        '&.Mui-checked': {
+          color: palette.marine.main,
+        },
+        '&.Mui-indeterminate': {
+          color: palette.marine.main,
+        },
+        '&.Mui-disabled': {
+          color: palette.greyborder.main,
+        },
+        '&:hover': {
+          backgroundColor: palette.marine.light,
+          opacity: 0.1,
+        },
+      }}
+      checked={checked}
+      indeterminate={indeterminate}
+      onClick={handleClick}
+      onChange={handleChange}
+      disabled={disabled}
+      {...props}
+    />
+  )
+}
+
+export default DataGridCheckbox

package/src/components/ConfirmationCodeInput/index.tsx

@@ -1,8 +1,7 @@
 'use client'
-import React, { ChangeEvent, KeyboardEvent, useState } from 'react'
+import React, { ChangeEvent, KeyboardEvent, useState, useCallback } from 'react'
 import { Input, Box } from '@mui/material'
-import { useCodeConfirmation } from './utils/useCodeConfirmation'
-import { columnconfig } from '../../components/Grid'
+import { columnconfig } from '../Grid'
 import { red, green } from '../../styles/palette'
 
 export interface ConfirmationCodeInputsProps {
@@ -13,59 +12,138 @@ export interface ConfirmationCodeInputsProps {
   'aria-label'?: string
   'aria-required'?: boolean
   'aria-invalid'?: boolean
+  onChange?: (value: string) => void
+  value?: string
+}
+
+interface UseCodeConfirmationProps {
+  codeLength: number
+  onChange?: (value: string) => void
+}
+
+const useCodeConfirmation = ({
+  codeLength,
+  onChange,
+}: UseCodeConfirmationProps) => {
+  const [code, setCode] = useState<Record<string, string>>(
+    Object.fromEntries(
+      Array.from({ length: codeLength }, (_, i) => [`code${i + 1}`, ''])
+    )
+  )
+
+  const handleCodeChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>, index: number) => {
+      const value = event.target.value.replace(/\D/g, '') // Only keep digits
+      if (value.length <= 1) {
+        // Only process if it's a single digit or empty
+        setCode(prevCode => {
+          const newCode = {
+            ...prevCode,
+            [`code${index + 1}`]: value,
+          }
+          const combinedValue = Object.values(newCode).join('')
+          onChange?.(combinedValue)
+          return newCode
+        })
+      }
+    },
+    [onChange]
+  )
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLInputElement>, index: number) => {
+      // Allow only numeric keys, navigation keys, and backspace
+      const allowedKeys = [
+        'Backspace',
+        'ArrowLeft',
+        'ArrowRight',
+        'Tab',
+        'Delete',
+        'Home',
+        'End',
+      ]
+
+      if (!allowedKeys.includes(event.key) && !/^\d$/.test(event.key)) {
+        event.preventDefault()
+        return
+      }
+
+      if (event.key === 'Backspace' && !code[`code${index + 1}`] && index > 0) {
+        setCode(prevCode => {
+          const newCode = {
+            ...prevCode,
+            [`code${index}`]: '',
+          }
+          const combinedValue = Object.values(newCode).join('')
+          onChange?.(combinedValue)
+          return newCode
+        })
+
+        const prevInput = document.querySelector(
+          `input[name=code${index}]`
+        ) as HTMLInputElement | null
+        if (prevInput) {
+          prevInput.focus()
+        }
+      } else if (event.key === 'ArrowLeft' && index > 0) {
+        const prevInput = document.querySelector(
+          `input[name=code${index}]`
+        ) as HTMLInputElement | null
+        if (prevInput) {
+          prevInput.focus()
+        }
+      } else if (event.key === 'ArrowRight' && index < codeLength - 1) {
+        const nextInput = document.querySelector(
+          `input[name=code${index + 2}]`
+        ) as HTMLInputElement | null
+        if (nextInput) {
+          nextInput.focus()
+        }
+      }
+    },
+    [code, codeLength, onChange]
+  )
+
+  return {
+    handleCodeChange,
+    handleKeyDown,
+  }
 }
 
-/**
- * ConfirmationCodeInputs component renders a set of input fields for entering a confirmation code.
- * It uses the useCodeConfirmation hook to handle code changes and key events.
- * @param props The props for the ConfirmationCodeInputs component.
- * @returns The rendered ConfirmationCodeInputs component.
- */
 const ConfirmationCodeInputs: React.FC<ConfirmationCodeInputsProps> = ({
   codeLength = 6,
   isValid,
+  onChange,
+  value,
   'aria-label': ariaLabel,
   'aria-required': ariaRequired,
   'aria-invalid': ariaInvalid,
   ...props
 }) => {
-  const [, setVerificationCode] = useState('')
+  const { handleCodeChange, handleKeyDown } = useCodeConfirmation({
+    codeLength,
+    onChange,
+  })
 
-  const { handleCodeChange, handleKeyDown, combinedCode } = useCodeConfirmation(
-    {
-      codeLength,
-      isValid,
-    }
-  )
-
-  /**
-   * handleChange function is called when the value of an input field changes.
-   * It updates the code state using the handleCodeChange function from the useCodeConfirmation hook.
-   * If the input field has a value, it focuses on the next input field.
-   * @param event The change event triggered by the input field.
-   * @param index The index of the input field.
-   */
   const handleChange = (
     event: ChangeEvent<HTMLInputElement>,
     index: number
   ) => {
-    handleCodeChange(event, index)
-    if (event.target.value) {
-      const nextInput = document.querySelector(
-        `input[name=code${index + 2}]`
-      ) as HTMLInputElement | null
-      if (nextInput) {
-        nextInput.focus()
+    const inputValue = event.target.value.replace(/\D/g, '') // Only keep digits
+    if (inputValue.length <= 1) {
+      // Only process if it's a single digit or empty
+      handleCodeChange(event, index)
+      if (inputValue) {
+        const nextInput = document.querySelector(
+          `input[name=code${index + 2}]`
+        ) as HTMLInputElement | null
+        if (nextInput) {
+          nextInput.focus()
+        }
       }
     }
   }
 
-  /**
-   * handleKeyDownWrapper function is a wrapper for the handleKeyDown function from the useCodeConfirmation hook.
-   * It is called when a key is pressed while an input field is focused.
-   * @param event The keyboard event triggered by the input field.
-   * @param index The index of the input field.
-   */
   const handleKeyDownWrapper = (
     event: KeyboardEvent<HTMLInputElement>,
     index: number
@@ -73,15 +151,8 @@ const ConfirmationCodeInputs: React.FC<ConfirmationCodeInputsProps> = ({
     handleKeyDown(event, index)
   }
 
-  /**
-   * 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])
+  // Split the value into individual digits
+  const digits = value?.split('') || Array(codeLength).fill('')
 
   return (
     <Box
@@ -96,8 +167,11 @@ const ConfirmationCodeInputs: React.FC<ConfirmationCodeInputsProps> = ({
           <Input
             key={index}
             name={`code${index + 1}`}
+            value={digits[index] || ''}
             inputProps={{
               maxLength: 1,
+              pattern: '[0-9]*',
+              inputMode: 'numeric',
               'aria-label': `Code Digit ${index + 1}`,
               'aria-required': ariaRequired,
               'aria-invalid': ariaInvalid,

package/src/components/Content/Structure/checkbox/useCheckbox.tsx

@@ -0,0 +1,65 @@
+'use client'
+import React from 'react'
+import { columnconfig, cellconfig } from '../../../Grid'
+import DataGridCheckbox from './../../../../components/Checkbox'
+
+type ExtendedColumnConfig = Omit<columnconfig, 'component'> & {
+  component?: columnconfig['component']
+}
+
+export interface ExtendedCheckboxProps {
+  columnconfig?: ExtendedColumnConfig
+  cellconfig?: cellconfig
+  onClick?: (event: React.MouseEvent) => void
+  checked?: boolean
+  indeterminate?: boolean
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
+  disabled?: boolean
+}
+
+const useCheckbox = (grid: {
+  checkbox?: ExtendedCheckboxProps | ExtendedCheckboxProps[]
+}): columnconfig | columnconfig[] | null => {
+  if (!grid.checkbox) return null
+
+  const renderCheckbox = (
+    checkboxProps: ExtendedCheckboxProps,
+    index: number
+  ): columnconfig => {
+    const {
+      columnconfig: itemColumnConfig,
+      cellconfig,
+      ...restProps
+    } = checkboxProps
+
+    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'
+      )
+    }
+
+    // Merge the existing columnconfig with the new props
+    const mergedConfig: columnconfig = {
+      ...itemColumnConfig,
+      cellconfig: {
+        ...cellconfig,
+      },
+      component: <DataGridCheckbox key={`checkbox-${index}`} {...restProps} />,
+    }
+
+    return mergedConfig
+  }
+
+  if (Array.isArray(grid.checkbox)) {
+    return grid.checkbox.map(renderCheckbox)
+  } else {
+    return renderCheckbox(grid.checkbox, 0)
+  }
+}
+
+export default useCheckbox

package/src/components/Content/Structure/typography/useGridTypography.tsx

@@ -27,6 +27,7 @@ const useGridTypography = (grid: {
       fontvariant,
       columnconfig: itemColumnConfig,
       cellconfig,
+      component,
       ...restProps
     } = typographyItem
 
@@ -53,6 +54,7 @@ const useGridTypography = (grid: {
           text={text}
           fontvariant={fontvariant}
           fontcolor={fontcolor}
+          component={component || 'span'}
           {...restProps}
         />
       ),

package/src/components/Content/index.tsx

@@ -60,6 +60,9 @@ import useQRCode, { ExtendedQRCodeProps } from './Structure/qrcode/useQRCode'
 import usePhoneNumber, {
   ExtendedPhoneNumberFieldProps,
 } from './Structure/phoneNumber/usePhoneNumber'
+import useCheckbox, {
+  ExtendedCheckboxProps,
+} from './Structure/checkbox/useCheckbox'
 /**
  * Props for the ContentSection component.
  * Includes configuration for various content elements.
@@ -95,6 +98,7 @@ export interface ContentSectionProps {
     phoneNumberField?:
       | ExtendedPhoneNumberFieldProps
       | ExtendedPhoneNumberFieldProps[]
+    checkbox?: ExtendedCheckboxProps | ExtendedCheckboxProps[]
   }>
   width?: number
 }
@@ -135,6 +139,7 @@ const RenderContent: React.FC<
   addToColumnConfigs(useCodeCopy(props))
   addToColumnConfigs(useTextField(props))
   addToColumnConfigs(useDateField(props))
+  addToColumnConfigs(useCheckbox(props))
   addToColumnConfigs(usePhoneNumber(props))
   addToColumnConfigs(useDropdown(props))
   addToColumnConfigs(