goobs-frontend 0.8.3 → 0.8.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.8.3",
+  "version": "0.8.5",
   "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",
@@ -21,31 +21,32 @@
     "@emotion/cache": "^11.13.1",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@mui/icons-material": "^6.1.0",
-    "@mui/material": "^6.1.0",
-    "@types/lodash": "^4.17.7",
+    "@mui/icons-material": "^6.1.4",
+    "@mui/material": "^6.1.4",
+    "@types/lodash": "^4.17.12",
     "highlight.js": "^11.10.0",
-    "jotai": "^2.9.3",
+    "jotai": "^2.10.1",
     "lodash": "^4.17.21",
-    "next": "14.2.9",
-    "react-datepicker": "^7.3.0",
+    "next": "14.2.15",
+    "otplib": "^12.0.1",
+    "react-datepicker": "^7.5.0",
     "react-qr-code": "^2.0.15"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "^14.2.9",
-    "@types/node": "^22.5.4",
-    "@types/react": "18.3.4",
-    "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.5.0",
-    "@typescript-eslint/parser": "^8.5.0",
-    "eslint": "^9.9.1",
-    "eslint-config-next": "^14.2.9",
+    "@next/eslint-plugin-next": "^14.2.15",
+    "@types/node": "^22.7.7",
+    "@types/react": "18.3.11",
+    "@types/react-dom": "^18.3.1",
+    "@typescript-eslint/eslint-plugin": "^8.10.0",
+    "@typescript-eslint/parser": "^8.10.0",
+    "eslint": "^9.13.0",
+    "eslint-config-next": "^14.2.15",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "prettier": "^3.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "typescript": "^5.5.4"
+    "typescript": "^5.6.3"
   },
   "files": [
     "src"

package/src/components/Card/variants/product/index.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useState } from 'react'
 import { Box, Paper, BoxProps } from '@mui/material'
 import Typography from '../../../../components/Typography'

package/src/components/Card/variants/productsummary/index.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useState } from 'react'
 import { Box, Paper, Switch } from '@mui/material'
 import { CardProps } from '../../index'

package/src/components/CodeCopy/index.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useRef, useEffect } from 'react'
 import { Box } from '@mui/material'
 import CustomButton from '../../components/Button'

package/src/components/Content/Structure/qrcode/useQRCode.tsx

@@ -6,7 +6,7 @@ type ExtendedColumnConfig = Omit<columnconfig, 'component'> & {
   component?: columnconfig['component']
 }
 
-export interface ExtendedQRCodeProps extends Omit<QRCodeProps, 'sx'> {
+export interface ExtendedQRCodeProps extends QRCodeProps {
   columnconfig?: ExtendedColumnConfig
   cellconfig?: cellconfig
 }
@@ -21,9 +21,11 @@ const useQRCode = (grid: {
     index: number
   ): columnconfig => {
     const {
-      value,
+      username,
+      appName,
       size,
       title,
+      onSecretGenerated,
       columnconfig: itemColumnConfig,
       cellconfig,
       ...restProps
@@ -48,9 +50,11 @@ const useQRCode = (grid: {
       component: (
         <QRCodeComponent
           key={`qrcode-${index}`}
-          value={value}
+          username={username}
+          appName={appName}
           size={size}
           title={title}
+          onSecretGenerated={onSecretGenerated}
           {...restProps}
         />
       ),

package/src/components/DateField/index.tsx

@@ -7,7 +7,7 @@ import 'react-datepicker/dist/react-datepicker.css'
 import CalendarTodayIcon from '@mui/icons-material/CalendarToday'
 
 export interface DateFieldProps extends Omit<TextFieldProps, 'onChange'> {
-  onChange?: () => void
+  onChange?: (date: Date) => void
   backgroundcolor?: string
   outlinecolor?: string
   fontcolor?: string
@@ -58,7 +58,9 @@ const DateField: React.FC<DateFieldProps> = ({
 
   const handleChange = (dates: [Date | null, Date | null]) => {
     setDateRange(dates)
-    onChange?.()
+    if (dates[0]) {
+      onChange?.(dates[0])
+    }
   }
 
   const formatDateRange = (range: [Date | null, Date | null]) => {

package/src/components/Dropdown/index.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useState } from 'react'
 import {
   Select,

package/src/components/Grid/index.tsx

@@ -247,7 +247,9 @@ const CustomGrid: React.FC<CustomGridProps> = ({
                               : '100%',
                       }}
                     >
-                      {currentColumnConfig?.component || null}
+                      {React.isValidElement(currentColumnConfig?.component)
+                        ? currentColumnConfig?.component
+                        : null}
                     </Box>
                   </Grid2>
                 )

package/src/components/Icons/FavoriteIcon.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useState } from 'react'
 import { IconButton } from '@mui/material'
 import FavoriteIcon from '@mui/icons-material/Favorite'

package/src/components/Nav/VerticalVariant/index.tsx

@@ -62,6 +62,7 @@ function VerticalVariant({
 }: VerticalVariantProps) {
   const router = useRouter()
   const [selectedNav, setSelectedNav] = useState<string | null>(null)
+  const [searchValue, setSearchValue] = useState('')
 
   const navOptions = items
     .filter((item): item is NavProps => 'title' in item && 'subnavs' in item)
@@ -92,6 +93,15 @@ function VerticalVariant({
     []
   )
 
+  const handleSearchChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newValue = e.target.value
+      setSearchValue(newValue)
+      console.log('Search value changed to:', newValue)
+    },
+    []
+  )
+
   const renderItem = useCallback(
     (
       item: NavProps | SubNav | View,
@@ -390,9 +400,8 @@ function VerticalVariant({
                 outlinecolor="none"
                 fontcolor={white.main}
                 placeholder="Search..."
-                onChange={() => {
-                  console.log('Search value changed')
-                }}
+                value={searchValue}
+                onChange={handleSearchChange}
               />
             )}
           </Stack>

package/src/components/QRCode/index.tsx

@@ -2,52 +2,58 @@ import React, { useMemo } from 'react'
 import QRCode from 'react-qr-code'
 import { Box, Typography, Paper, Theme, CircularProgress } from '@mui/material'
 import { SxProps } from '@mui/system'
+import { authenticator } from 'otplib'
 
 /**
  * Props for the QRCodeComponent
  * @typedef {Object} QRCodeProps
- * @property {string} value - The value to be encoded in the QR code
+ * @property {string} username - The username for the MFA setup
+ * @property {string} appName - The name of the application for MFA
  * @property {number} [size] - The size of the QR code in pixels
  * @property {string} [title] - An optional title to display above the QR code
  * @property {SxProps<Theme>} [sx] - Custom styles to apply to the component
+ * @property {(secret: string) => void} [onSecretGenerated] - Callback function to receive the generated secret
  */
 export interface QRCodeProps {
-  value: string
+  username: string
+  appName: string
   size?: number
   title?: string
   sx?: SxProps<Theme>
+  onSecretGenerated?: (secret: string) => void
 }
 
 /**
- * A component that displays a QR code with Material-UI styling
+ * A component that displays a QR code for MFA setup with Material-UI styling
  * @param {QRCodeProps} props - The props for the component
  * @returns {React.ReactElement} The rendered QR code component
  */
 const QRCodeComponent: React.FC<QRCodeProps> = React.memo(
-  ({ value, size = 256, title, sx }) => {
-    // Validate the QR code value
-    const isValidValue = useMemo(() => {
-      if (!value) return false
-      try {
-        // Check if the value is a valid URL
-        new URL(value)
-        return true
-      } catch {
-        // If not a URL, check if it's a non-empty string
-        return typeof value === 'string' && value.trim().length > 0
+  ({ username, appName, size = 256, title, sx, onSecretGenerated }) => {
+    // Generate the secret and OTP auth URL
+    const { secret, otpAuth } = useMemo(() => {
+      const generatedSecret = authenticator.generateSecret()
+      const otpAuthUrl = authenticator.keyuri(
+        encodeURIComponent(username),
+        encodeURIComponent(appName),
+        generatedSecret
+      )
+      if (onSecretGenerated) {
+        onSecretGenerated(generatedSecret)
       }
-    }, [value])
+      return { secret: generatedSecret, otpAuth: otpAuthUrl }
+    }, [username, appName, onSecretGenerated])
 
     // Calculate responsive size
     const responsiveSize = useMemo(() => {
       return Math.min(size, window.innerWidth - 32) // 32px for padding
     }, [size])
 
-    if (!isValidValue) {
+    if (!otpAuth) {
       return (
         <Box sx={{ ...sx, p: 2 }} role="alert">
           <Typography color="error">
-            Error: Invalid or empty QR code value
+            Error: Failed to generate QR code
           </Typography>
         </Box>
       )
@@ -88,13 +94,16 @@ const QRCodeComponent: React.FC<QRCodeProps> = React.memo(
             }
           >
             <QRCode
-              value={value}
+              value={otpAuth}
               size={responsiveSize}
               style={{ height: 'auto', maxWidth: '100%', width: '100%' }}
-              aria-label={`QR Code for ${title || value}`}
+              aria-label={`QR Code for ${title || 'MFA Setup'}`}
             />
           </React.Suspense>
         </Box>
+        <Typography variant="body2" align="center" sx={{ mt: 2 }}>
+          Secret: {secret}
+        </Typography>
       </Paper>
     )
   }
@@ -103,3 +112,22 @@ const QRCodeComponent: React.FC<QRCodeProps> = React.memo(
 QRCodeComponent.displayName = 'QRCodeComponent'
 
 export default QRCodeComponent
+
+/**
+ * Verifies a MFA token against a secret.
+ *
+ * @param token - The token to verify.
+ * @param secret - The secret key to verify against.
+ * @returns A boolean indicating whether the token is valid.
+ * @throws Error if inputs are invalid.
+ */
+export function verifyMFAToken(token: string, secret: string): boolean {
+  if (!token || typeof token !== 'string') {
+    throw new Error('Invalid token')
+  }
+  if (!secret || typeof secret !== 'string') {
+    throw new Error('Invalid secret')
+  }
+
+  return authenticator.verify({ token, secret })
+}

package/src/components/Searchbar/index.tsx

@@ -9,13 +9,14 @@ export interface SearchbarProps {
   outlinecolor?: string
   fontcolor?: string
   placeholder?: string
-  onChange?: () => void
+  value: string
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
 }
 
 const StyledTextField = styled(TextField)<{
   backgroundcolor?: string
   outlinecolor?: string
-  $fontcolor?: string // Use $ prefix to avoid passing it as DOM attribute
+  $fontcolor?: string
 }>(({ theme, backgroundcolor, outlinecolor, $fontcolor }) => ({
   '& .MuiOutlinedInput-root': {
     backgroundColor: backgroundcolor || theme.palette.background.paper,
@@ -47,12 +48,9 @@ const Searchbar: React.FC<SearchbarProps> = ({
   outlinecolor,
   fontcolor,
   placeholder,
+  value,
   onChange,
 }) => {
-  const handleChange = () => {
-    onChange?.()
-  }
-
   return (
     <StyledTextField
       label={label}
@@ -62,14 +60,17 @@ const Searchbar: React.FC<SearchbarProps> = ({
       backgroundcolor={backgroundcolor}
       outlinecolor={outlinecolor}
       $fontcolor={fontcolor}
-      InputProps={{
-        startAdornment: (
-          <InputAdornment position="start">
-            <SearchIcon style={{ color: iconcolor }} />
-          </InputAdornment>
-        ),
+      value={value}
+      onChange={onChange}
+      slotProps={{
+        input: {
+          startAdornment: (
+            <InputAdornment position="start">
+              <SearchIcon style={{ color: iconcolor }} />
+            </InputAdornment>
+          ),
+        },
       }}
-      onChange={handleChange}
     />
   )
 }

package/src/components/Toolbar/index.tsx

@@ -20,7 +20,7 @@ const VerticalDivider = styled(Box)({
 export interface ToolbarProps {
   buttons?: CustomButtonProps[]
   dropdowns?: DropdownProps[]
-  searchbarProps?: SearchbarProps
+  searchbarProps?: Partial<SearchbarProps>
 }
 
 /**
@@ -106,7 +106,8 @@ function CustomToolbar({ buttons, dropdowns, searchbarProps }: ToolbarProps) {
           label="Search the DataGrid"
           fontcolor={black.main}
           iconcolor={black.main}
-          onChange={() => console.log('Search changed')}
+          value={searchbarProps?.value || ''}
+          onChange={searchbarProps?.onChange || (() => {})}
           {...searchbarProps}
         />
       </Box>

package/src/components/TransferList/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React from 'react'
+import React, { useEffect } from 'react'
 import Grid from '@mui/material/Grid'
 import List from '@mui/material/List'
 import ListItemButton from '@mui/material/ListItemButton'
@@ -21,7 +21,7 @@ function intersection(a: readonly string[], b: readonly string[]) {
 export interface TransferListProps {
   leftItems: readonly string[]
   rightItems: readonly string[]
-  onChange?: () => void
+  onChange: (leftItems: string[], rightItems: string[]) => void
 }
 
 const TransferList: React.FC<TransferListProps> = ({
@@ -33,6 +33,11 @@ const TransferList: React.FC<TransferListProps> = ({
   const [left, setLeft] = React.useState<readonly string[]>(leftItems)
   const [right, setRight] = React.useState<readonly string[]>(rightItems)
 
+  useEffect(() => {
+    setLeft(leftItems)
+    setRight(rightItems)
+  }, [leftItems, rightItems])
+
   const leftChecked = intersection(checked, left)
   const rightChecked = intersection(checked, right)
 
@@ -50,37 +55,35 @@ const TransferList: React.FC<TransferListProps> = ({
   }
 
   const handleAllRight = () => {
-    setRight(right.concat(left))
+    const newRight = right.concat(left)
+    setRight(newRight)
     setLeft([])
-    if (onChange) {
-      onChange()
-    }
+    onChange([], newRight)
   }
 
   const handleCheckedRight = () => {
-    setRight(right.concat(leftChecked))
-    setLeft(not(left, leftChecked))
+    const newRight = right.concat(leftChecked)
+    const newLeft = not(left, leftChecked)
+    setRight(newRight)
+    setLeft(newLeft)
     setChecked(not(checked, leftChecked))
-    if (onChange) {
-      onChange()
-    }
+    onChange(newLeft, newRight)
   }
 
   const handleCheckedLeft = () => {
-    setLeft(left.concat(rightChecked))
-    setRight(not(right, rightChecked))
+    const newLeft = left.concat(rightChecked)
+    const newRight = not(right, rightChecked)
+    setLeft(newLeft)
+    setRight(newRight)
     setChecked(not(checked, rightChecked))
-    if (onChange) {
-      onChange()
-    }
+    onChange(newLeft, newRight)
   }
 
   const handleAllLeft = () => {
-    setLeft(left.concat(right))
+    const newLeft = left.concat(right)
+    setLeft(newLeft)
     setRight([])
-    if (onChange) {
-      onChange()
-    }
+    onChange(newLeft, [])
   }
 
   const customList = (items: readonly string[]) => (

package/src/index.ts

@@ -40,7 +40,7 @@ import QRCodeComponent, { QRCodeProps } from './components/QRCode'
 
 // New imports
 import DateField from './components/DateField'
-import Dropdown from './components/Dropdown'
+import Dropdown, { DropdownOption } from './components/Dropdown'
 import IncrementNumberField from './components/IncrementNumberField'
 import NumberField from './components/NumberField'
 import PasswordField from './components/PasswordField'
@@ -71,7 +71,7 @@ import { ExtendedImageProps } from './components/Content/Structure/image/useImag
 import { ExtendedConfirmationCodeInputsProps } from './components/Content/Structure/confirmationinput/useConfirmationInput'
 import { ExtendedRadioGroupProps } from './components/Content/Structure/radiogroup/useRadioGroup'
 import { ExtendedPhoneNumberFieldProps } from './components/Content/Structure/phoneNumber/usePhoneNumber'
-
+import { CustomTextFieldProps } from './components/TextField'
 // Colors
 import {
   moss,
@@ -267,6 +267,8 @@ export type { CustomStepperComponentProps }
 export type { CustomToolbarComponentProps }
 export type { TransferListComponentProps }
 export type { StyledTooltipComponentProps }
+export type { DropdownOption }
+export type { CustomTextFieldProps }
 
 // New type exports
 export type { DateFieldProps }