goobs-frontend 0.8.7 → 0.8.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.8.7",
+  "version": "0.8.8",
   "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",

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

@@ -0,0 +1,169 @@
+'use client'
+
+import React, { useState } from 'react'
+import { Box } from '@mui/material'
+import { useAtomValue } from 'jotai'
+import { columnVisibilityAtom } from '../Jotai/atom'
+import { VerticalDivider } from '../VerticalDivider'
+import TablePagination from '@mui/material/TablePagination'
+import ManageColumn from '../ManageColumn'
+import { ColumnDef } from '../Table'
+import CustomButton from '../../Button'
+import ShowHideEyeIcon from '@/components/Icons/ShowHideEye'
+
+export interface CustomFooterProps {
+  page: number
+  pageSize: number
+  rowCount: number
+  onPageChange: (newPage: number) => void
+  onPageSizeChange: (newPageSize: number) => void
+  columns: ColumnDef[]
+}
+
+function CustomFooter({
+  page,
+  pageSize,
+  rowCount,
+  onPageChange,
+  onPageSizeChange,
+  columns,
+}: CustomFooterProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [checkboxWidth] = useState(45)
+  const columnVisibility = useAtomValue(columnVisibilityAtom)
+
+  const handleOpen = () => {
+    console.log('Footer handleOpen')
+    setIsOpen(true)
+  }
+
+  const handleClose = () => {
+    console.log('Footer handleClose')
+    setIsOpen(false)
+  }
+
+  // Calculate total width based on visible columns only
+  const totalWidth = columns.reduce((sum, col) => {
+    if (columnVisibility[col.field] !== false) {
+      return sum + (col.width || 150)
+    }
+    return sum
+  }, 0)
+
+  const totalPages = Math.ceil(rowCount / pageSize)
+
+  return (
+    <Box
+      className="custom-footer-container"
+      sx={{
+        width: `${totalWidth}px`,
+        minWidth: '100%',
+        height: '56px',
+        position: 'sticky',
+        left: 0,
+        marginLeft: `${checkboxWidth}px`,
+      }}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          flexWrap: 'nowrap',
+          width: '100%',
+          height: '100%',
+          px: 2,
+        }}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+          }}
+          className="left-box"
+        >
+          <Box sx={{ display: 'flex', alignItems: 'center', mr: '10px' }}>
+            <VerticalDivider />
+          </Box>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
+              pr: '8px',
+            }}
+          >
+            <CustomButton
+              onClick={handleOpen}
+              text="Manage Columns"
+              fontvariant="merriparagraph"
+              fontcolor="black"
+              icon={<ShowHideEyeIcon visible={true} />}
+              iconcolor="black"
+              iconlocation="left"
+              disableButton="false"
+              sx={{
+                minWidth: 'unset',
+                padding: '8px',
+                '& .MuiTypography-root': {
+                  marginLeft: '16px',
+                },
+              }}
+            />
+          </Box>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              ml: '10px',
+              mr: '10px',
+            }}
+          >
+            <VerticalDivider />
+          </Box>
+        </Box>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            ml: 'auto',
+          }}
+          className="right-box"
+        >
+          <TablePagination
+            component="div"
+            count={rowCount}
+            page={page}
+            onPageChange={(_, newPage) => {
+              onPageChange(newPage)
+            }}
+            rowsPerPage={pageSize}
+            onRowsPerPageChange={event => {
+              const newPageSize = parseInt(event.target.value, 10)
+              onPageSizeChange(newPageSize)
+            }}
+            rowsPerPageOptions={[10, 25, 50, 100]}
+            slotProps={{
+              actions: {
+                previousButton: {
+                  disabled: page === 0,
+                },
+                nextButton: {
+                  disabled: page >= totalPages - 1,
+                },
+              },
+            }}
+            showFirstButton
+            showLastButton
+            labelDisplayedRows={({ from, to, count }) =>
+              `${from}-${to} of ${count !== -1 ? count : `more than ${to}`}`
+            }
+          />
+        </Box>
+      </Box>
+      <ManageColumn open={isOpen} handleClose={handleClose} columns={columns} />
+    </Box>
+  )
+}
+
+export default CustomFooter

package/src/components/DataGrid/Jotai/atom.ts

@@ -0,0 +1,91 @@
+import { atom } from 'jotai'
+import { atomWithStorage } from 'jotai/utils'
+
+interface ColumnVisibility {
+  [key: string]: boolean
+}
+
+// Create a persistent atom that saves to localStorage
+export const columnVisibilityAtom = atomWithStorage<ColumnVisibility>(
+  'columnVisibility',
+  {}
+)
+
+// Atom for managing initial column setup
+export const columnsAtom = atom<string[]>([])
+
+// Actions atom for updating visibility
+export const columnVisibilityActions = atom(
+  null,
+  (
+    get,
+    set,
+    update: {
+      type: 'toggle' | 'setAll' | 'reset' | 'save'
+      field?: string
+      value?: boolean
+      newState?: ColumnVisibility
+    }
+  ) => {
+    const currentVisibility = get(columnVisibilityAtom)
+    const columns = get(columnsAtom)
+    let newVisibility: ColumnVisibility = {}
+
+    console.log('columnVisibilityActions - before:', {
+      type: update.type,
+      currentVisibility,
+    })
+
+    switch (update.type) {
+      case 'toggle': {
+        if (update.field) {
+          newVisibility = {
+            ...currentVisibility,
+            [update.field]: !currentVisibility[update.field],
+          }
+          console.log('columnVisibilityActions - toggle:', {
+            field: update.field,
+            before: currentVisibility[update.field],
+            after: newVisibility[update.field],
+          })
+          set(columnVisibilityAtom, newVisibility)
+        }
+        break
+      }
+
+      case 'setAll': {
+        columns.forEach(column => {
+          newVisibility[column] = !!update.value
+        })
+        console.log('columnVisibilityActions - setAll:', {
+          value: update.value,
+          newState: newVisibility,
+        })
+        set(columnVisibilityAtom, newVisibility)
+        break
+      }
+
+      case 'save': {
+        if (update.newState) {
+          console.log('columnVisibilityActions - save:', {
+            before: currentVisibility,
+            after: update.newState,
+          })
+          set(columnVisibilityAtom, update.newState)
+        }
+        break
+      }
+
+      case 'reset': {
+        columns.forEach(column => {
+          newVisibility[column] = true
+        })
+        console.log('columnVisibilityActions - reset:', newVisibility)
+        set(columnVisibilityAtom, newVisibility)
+        break
+      }
+    }
+
+    console.log('columnVisibilityActions - after:', get(columnVisibilityAtom))
+  }
+)