goobs-frontend 0.8.2 → 0.8.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.8.2",
+  "version": "0.8.4",
   "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,31 @@
     "@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.1",
+    "@mui/material": "^6.1.1",
+    "@types/lodash": "^4.17.9",
     "highlight.js": "^11.10.0",
-    "jotai": "^2.9.3",
+    "jotai": "^2.10.0",
     "lodash": "^4.17.21",
-    "next": "14.2.9",
-    "react-datepicker": "^7.3.0",
+    "next": "14.2.13",
+    "react-datepicker": "^7.4.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",
+    "@next/eslint-plugin-next": "^14.2.13",
+    "@types/node": "^22.7.3",
+    "@types/react": "18.3.9",
     "@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",
+    "@typescript-eslint/eslint-plugin": "^8.7.0",
+    "@typescript-eslint/parser": "^8.7.0",
+    "eslint": "^9.11.1",
+    "eslint-config-next": "^14.2.13",
     "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.2"
   },
   "files": [
     "src"

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

@@ -6,70 +6,35 @@ import {
   InputLabel,
   SelectProps,
   FormHelperText,
+  Typography,
 } from '@mui/material'
 import { styled } from '@mui/material/styles'
 
-export interface DropdownOption {
+export interface SimpleDropdownOption {
   value: string
-  label: string
 }
 
+export interface ComplexDropdownOption extends SimpleDropdownOption {
+  attribute1?: string
+  attribute2?: string
+}
+
+export type DropdownOption = SimpleDropdownOption | ComplexDropdownOption
+
 export interface DropdownProps extends Omit<SelectProps, 'onChange'> {
-  /**
-   * The label for the dropdown.
-   */
   label: string
-  /**
-   * The options for the dropdown.
-   */
   options: DropdownOption[]
-  /**
-   * The default value for the dropdown.
-   */
   defaultValue?: string
-  /**
-   * The background color of the dropdown.
-   */
   backgroundcolor?: string
-  /**
-   * The outline color of the dropdown.
-   */
   outlinecolor?: string
-  /**
-   * The font color of the dropdown.
-   */
   fontcolor?: string
-  /**
-   * The font color of the dropdown label when shrunk.
-   */
   shrunkfontcolor?: string
-  /**
-   * Callback function triggered when the dropdown value changes.
-   */
   onChange?: SelectProps['onChange']
-  /**
-   * Indicates if the dropdown is in an error state.
-   */
   error?: boolean
-  /**
-   * The helper text to display below the dropdown.
-   */
   helperText?: string
-  /**
-   * The name of the dropdown.
-   */
   name?: string
-  /**
-   * Indicates if the dropdown is required.
-   */
   required?: boolean
-  /**
-   * Callback function triggered when the dropdown loses focus.
-   */
   onBlur?: SelectProps['onBlur']
-  /**
-   * Callback function triggered when the dropdown receives focus.
-   */
   onFocus?: SelectProps['onFocus']
 }
 
@@ -100,9 +65,16 @@ const StyledInputLabel = styled(InputLabel)<{ shrunkfontcolor?: string }>(
   })
 )
 
-/**
- * Dropdown component built with Material UI.
- */
+const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+}))
+
+const capitalizeFirstLetter = (string: string) => {
+  return string.charAt(0).toUpperCase() + string.slice(1)
+}
+
 const Dropdown: React.FC<DropdownProps> = ({
   label,
   options,
@@ -139,6 +111,27 @@ const Dropdown: React.FC<DropdownProps> = ({
     onFocus?.(event)
   }
 
+  const renderMenuItem = (option: DropdownOption) => {
+    const label = capitalizeFirstLetter(option.value.replace(/_/g, ' '))
+    if (!('attribute1' in option)) {
+      return (
+        <MenuItem key={option.value} value={option.value}>
+          {label}
+        </MenuItem>
+      )
+    } else {
+      return (
+        <StyledMenuItem key={option.value} value={option.value}>
+          <Typography variant="body1">{label}</Typography>
+          <Typography variant="caption" color="textSecondary">
+            {option.attribute1}
+            {option.attribute2 && ` | ${option.attribute2}`}
+          </Typography>
+        </StyledMenuItem>
+      )
+    }
+  }
+
   return (
     <StyledFormControl
       backgroundcolor={backgroundcolor}
@@ -161,11 +154,7 @@ const Dropdown: React.FC<DropdownProps> = ({
         aria-labelledby={`${name}-label`}
         {...rest}
       >
-        {options.map(option => (
-          <MenuItem key={option.value} value={option.value}>
-            {option.label}
-          </MenuItem>
-        ))}
+        {options.map(renderMenuItem)}
       </Select>
       {helperText && <FormHelperText>{helperText}</FormHelperText>}
     </StyledFormControl>

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/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 }