goobs-frontend 0.8.6 → 0.8.8

package/src/components/PhoneNumberField/index.tsx

@@ -1,45 +1,6 @@
 'use client'
-import React, { useState, useCallback } from 'react'
-import { TextField, TextFieldProps } from '@mui/material'
-import { styled } from '@mui/material/styles'
-
-export interface PhoneNumberFieldProps
-  extends Omit<TextFieldProps, 'onChange'> {
-  initialValue?: string
-  onChange?: () => void
-  backgroundcolor?: string
-  outlinecolor?: string
-  fontcolor?: string
-  label?: string
-}
-
-const StyledTextField = styled(TextField)<{
-  backgroundcolor?: string
-  outlinecolor?: string
-  fontcolor?: string
-}>(({ theme, backgroundcolor, outlinecolor, fontcolor }) => ({
-  '& .MuiOutlinedInput-root': {
-    backgroundColor: backgroundcolor || theme.palette.background.paper,
-    '& fieldset': {
-      borderColor: outlinecolor || theme.palette.primary.main,
-    },
-    '&:hover fieldset': {
-      borderColor: outlinecolor || theme.palette.primary.main,
-    },
-    '&.Mui-focused fieldset': {
-      borderColor: outlinecolor || theme.palette.primary.main,
-    },
-  },
-  '& .MuiInputLabel-root': {
-    color: fontcolor || theme.palette.text.primary,
-    '&.Mui-focused': {
-      color: fontcolor || theme.palette.primary.main,
-    },
-  },
-  '& .MuiInputBase-input': {
-    color: fontcolor || theme.palette.text.primary,
-  },
-}))
+import React, { useCallback, useMemo, useState } from 'react'
+import { Box, TextField as MuiTextField, TextFieldProps } from '@mui/material'
 
 const formatPhoneNumber = (value: string): string => {
   const digits = value.replace(/\D/g, '')
@@ -57,47 +18,110 @@ const formatPhoneNumber = (value: string): string => {
   return formattedNumber.trim()
 }
 
-const PhoneNumberField: React.FC<PhoneNumberFieldProps> = ({
-  initialValue = '',
-  onChange,
-  backgroundcolor,
-  outlinecolor,
-  fontcolor,
-  label = 'Phone Number',
-  ...rest
-}) => {
+const PhoneNumberField: React.FC<TextFieldProps> = React.memo(props => {
+  const {
+    name,
+    label = 'Phone Number',
+    placeholder,
+    onChange,
+    onFocus,
+    onBlur,
+    value = '',
+    error,
+    ...restProps
+  } = props
+
   const [phoneNumber, setPhoneNumber] = useState(
-    formatPhoneNumber(initialValue)
+    formatPhoneNumber(value as string)
   )
 
-  const handlePhoneNumberChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
       const input = e.target.value
       let strippedInput = input.replace(/^\+1\s?/, '').replace(/\D/g, '')
       strippedInput = strippedInput.slice(0, 10)
       const formattedValue =
         strippedInput.length > 0 ? formatPhoneNumber(strippedInput) : '+1 '
       setPhoneNumber(formattedValue)
-      onChange?.()
+      if (onChange) {
+        onChange(e)
+      }
     },
     [onChange]
   )
 
+  const handleFocus = useCallback(
+    (e: React.FocusEvent<HTMLInputElement>) => {
+      if (onFocus) {
+        onFocus(e)
+      }
+    },
+    [onFocus]
+  )
+
+  const handleBlur = useCallback(
+    (e: React.FocusEvent<HTMLInputElement>) => {
+      if (onBlur) {
+        onBlur(e)
+      }
+    },
+    [onBlur]
+  )
+
+  const handleClick = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+    e.preventDefault()
+  }, [])
+
+  const inputProps = useMemo(
+    () => ({
+      style: {
+        height: '40px',
+        padding: '8px 14px',
+      },
+    }),
+    []
+  )
+
+  const InputProps = useMemo(
+    () => ({
+      style: {
+        height: '45px',
+      },
+    }),
+    []
+  )
+
   return (
-    <StyledTextField
-      label={label}
-      value={phoneNumber}
-      onChange={handlePhoneNumberChange}
-      backgroundcolor={backgroundcolor}
-      outlinecolor={outlinecolor}
-      fontcolor={fontcolor}
-      fullWidth
-      inputProps={{
-        maxLength: 16,
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        width: '100%',
+        marginTop: '5px',
+        height: '70px',
       }}
-      {...rest}
-    />
+      onClick={handleClick}
+    >
+      <MuiTextField
+        name={name}
+        label={label}
+        placeholder={placeholder}
+        onChange={handleChange}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        value={phoneNumber}
+        error={error}
+        fullWidth
+        variant="outlined"
+        inputProps={inputProps}
+        InputProps={InputProps}
+        {...restProps}
+      />
+    </Box>
   )
-}
+})
+
+PhoneNumberField.displayName = 'PhoneNumberField'
 
 export default PhoneNumberField

package/src/components/Searchbar/index.tsx

@@ -1,6 +1,14 @@
-import React from 'react'
-import { TextField, InputAdornment, styled } from '@mui/material'
+'use client'
+import React, { useState } from 'react'
+import {
+  OutlinedInput,
+  styled,
+  FormControl,
+  InputLabel,
+  InputAdornment,
+} from '@mui/material'
 import SearchIcon from '@mui/icons-material/Search'
+import * as palette from '../../styles/palette'
 
 export interface SearchbarProps {
   label?: string
@@ -13,31 +21,65 @@ export interface SearchbarProps {
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
 }
 
-const StyledTextField = styled(TextField)<{
+const StyledFormControl = styled(FormControl)({
+  width: '100%',
+  position: 'relative',
+  height: '45px',
+  display: 'flex',
+  justifyContent: 'flex-end',
+})
+
+const StyledOutlinedInput = styled(OutlinedInput)<{
   backgroundcolor?: string
   outlinecolor?: string
-  $fontcolor?: string
-}>(({ theme, backgroundcolor, outlinecolor, $fontcolor }) => ({
-  '& .MuiOutlinedInput-root': {
-    backgroundColor: backgroundcolor || theme.palette.background.paper,
-    '& fieldset': {
-      borderColor: outlinecolor || theme.palette.primary.main,
-    },
-    '&:hover fieldset': {
-      borderColor: outlinecolor || theme.palette.primary.main,
-    },
-    '&.Mui-focused fieldset': {
-      borderColor: outlinecolor || theme.palette.primary.main,
-    },
+  fontcolor?: string
+}>(({ backgroundcolor, outlinecolor, fontcolor }) => ({
+  height: '40px',
+  backgroundColor: backgroundcolor || palette.white.main,
+  '& .MuiOutlinedInput-notchedOutline': {
+    border:
+      outlinecolor === 'none'
+        ? 'none'
+        : `1px solid ${outlinecolor || palette.black.main}`,
+  },
+  '&:hover .MuiOutlinedInput-notchedOutline': {
+    border:
+      outlinecolor === 'none'
+        ? 'none'
+        : `1px solid ${outlinecolor || palette.black.main}`,
+  },
+  '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+    border:
+      outlinecolor === 'none'
+        ? 'none'
+        : `1px solid ${outlinecolor || palette.black.main}`,
+    borderWidth: outlinecolor === 'none' ? '0' : '1px',
   },
-  '& .MuiInputLabel-root': {
-    color: $fontcolor || theme.palette.text.primary,
-    '&.Mui-focused': {
-      color: $fontcolor || theme.palette.primary.main,
+  '& input': {
+    color: fontcolor || palette.black.main,
+    padding: '0 12px',
+    paddingLeft: '7px',
+    height: '100%',
+    '&::placeholder': {
+      color: fontcolor || palette.black.main,
+      opacity: 0.7,
     },
   },
-  '& .MuiInputBase-input': {
-    color: $fontcolor || theme.palette.text.primary,
+}))
+
+const StyledInputLabel = styled(InputLabel)<{
+  fontcolor?: string
+}>(({ fontcolor }) => ({
+  color: fontcolor || palette.black.main,
+  transform: 'translate(44px, 20px) scale(1)',
+  position: 'absolute',
+  top: '-5px',
+  '&.Mui-focused': {
+    color: fontcolor || palette.black.main,
+  },
+  '&.MuiInputLabel-shrink': {
+    transform: 'translate(14px, 3px) scale(0.75)',
+    color: fontcolor || palette.black.main,
   },
 }))
 
@@ -51,27 +93,41 @@ const Searchbar: React.FC<SearchbarProps> = ({
   value,
   onChange,
 }) => {
+  const [focused, setFocused] = useState(false)
+  const isLabelShrunken = focused || Boolean(value)
+
+  const handleFocus = () => setFocused(true)
+  const handleBlur = () => setFocused(false)
+
   return (
-    <StyledTextField
-      label={label}
-      variant="outlined"
-      fullWidth
-      placeholder={placeholder}
-      backgroundcolor={backgroundcolor}
-      outlinecolor={outlinecolor}
-      $fontcolor={fontcolor}
-      value={value}
-      onChange={onChange}
-      slotProps={{
-        input: {
-          startAdornment: (
-            <InputAdornment position="start">
-              <SearchIcon style={{ color: iconcolor }} />
-            </InputAdornment>
-          ),
-        },
-      }}
-    />
+    <StyledFormControl variant="outlined">
+      <StyledInputLabel
+        variant="outlined"
+        htmlFor="search-input"
+        shrink={isLabelShrunken}
+        fontcolor={fontcolor}
+      >
+        {label}
+      </StyledInputLabel>
+      <StyledOutlinedInput
+        id="search-input"
+        label={label}
+        notched={isLabelShrunken}
+        placeholder={isLabelShrunken ? placeholder : ''}
+        value={value}
+        onChange={onChange}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        backgroundcolor={backgroundcolor}
+        outlinecolor={outlinecolor}
+        fontcolor={fontcolor}
+        startAdornment={
+          <InputAdornment position="start">
+            <SearchIcon sx={{ color: iconcolor || palette.black.main }} />
+          </InputAdornment>
+        }
+      />
+    </StyledFormControl>
   )
 }
 

package/src/components/TextField/index.tsx

@@ -1,11 +1,8 @@
+'use client'
 import React, { useCallback, useMemo } from 'react'
 import { Box, TextField as MuiTextField, TextFieldProps } from '@mui/material'
 
-export interface CustomTextFieldProps extends Omit<TextFieldProps, 'name'> {
-  name: string
-}
-
-const TextField: React.FC<CustomTextFieldProps> = React.memo(props => {
+const TextField: React.FC<TextFieldProps> = React.memo(props => {
   const {
     name,
     label,
@@ -16,7 +13,6 @@ const TextField: React.FC<CustomTextFieldProps> = React.memo(props => {
     value,
     error,
     sx,
-    InputProps,
     ...restProps
   } = props
 
@@ -59,36 +55,31 @@ const TextField: React.FC<CustomTextFieldProps> = React.memo(props => {
       cursor: 'text',
       boxSizing: 'border-box',
       borderRadius: 5,
-      paddingRight: 6,
     }),
     []
   )
 
-  const mergedInputProps = useMemo(
+  const slotProps = useMemo(
     () => ({
-      ...InputProps,
-      style: {
-        ...inputStyle,
-        ...InputProps?.style,
+      input: {
+        style: inputStyle,
       },
-    }),
-    [InputProps, inputStyle]
-  )
-
-  const labelStyle = useMemo(
-    () => ({
-      '&.MuiInputLabel-shrink': {
-        top: '0px',
-        left: '0px',
-      },
-      '&:not(.MuiInputLabel-shrink)': {
-        transform: 'scale(1)',
-        transformOrigin: 'top left',
-        top: '9px',
-        left: '12px',
+      inputLabel: {
+        sx: {
+          '&.MuiInputLabel-shrink': {
+            top: '0px',
+            left: '0px',
+          },
+          '&:not(.MuiInputLabel-shrink)': {
+            transform: 'scale(1)',
+            transformOrigin: 'top left',
+            top: '9px',
+            left: '12px',
+          },
+        },
       },
     }),
-    []
+    [inputStyle]
   )
 
   return (
@@ -99,7 +90,7 @@ const TextField: React.FC<CustomTextFieldProps> = React.memo(props => {
         justifyContent: 'center',
         width: '100%',
         marginTop: '5px',
-        height: '62px',
+        height: '70px',
         ...sx,
       }}
       onClick={handleClick}
@@ -113,10 +104,7 @@ const TextField: React.FC<CustomTextFieldProps> = React.memo(props => {
         onBlur={handleBlur}
         value={value}
         error={error}
-        InputProps={mergedInputProps}
-        InputLabelProps={{
-          sx: labelStyle,
-        }}
+        slotProps={slotProps}
         fullWidth
         variant="outlined"
         {...restProps}

package/src/components/Toolbar/index.tsx

@@ -6,33 +6,20 @@ import Searchbar, { SearchbarProps } from '../Searchbar'
 import Dropdown, { DropdownProps } from '../Dropdown'
 import { white, black, semiTransparentWhite } from '../../styles/palette'
 
-/**
- * Styled component for a vertical divider
- */
 const VerticalDivider = styled(Box)({
   borderLeft: '2px solid black',
   height: '20px',
 })
 
-/**
- * Interface for the CustomToolbar component props
- */
 export interface ToolbarProps {
   buttons?: CustomButtonProps[]
   dropdowns?: DropdownProps[]
   searchbarProps?: Partial<SearchbarProps>
 }
 
-/**
- * CustomToolbar component that renders a toolbar with buttons, dropdowns, and a search bar
- * @param {ToolbarProps} props - The props for the CustomToolbar component
- * @returns {JSX.Element} The rendered CustomToolbar component
- */
 function CustomToolbar({ buttons, dropdowns, searchbarProps }: ToolbarProps) {
-  // State for checkbox width (set to 45px as default)
   const [checkboxWidth] = useState(45)
-  // Explicitly set toolbar height to 56px
-  const toolbarHeight = 56
+  const toolbarHeight = 45
 
   return (
     <Box
@@ -41,12 +28,13 @@ function CustomToolbar({ buttons, dropdowns, searchbarProps }: ToolbarProps) {
         pl: `${checkboxWidth}px`,
         display: 'flex',
         flexDirection: 'row',
-        justifyContent: 'space-between',
+        justifyContent: 'flex-start',
         alignItems: 'stretch',
         height: `${toolbarHeight}px`,
+        width: '100%',
       }}
     >
-      {/* Left section of the toolbar */}
+      {/* Left section with buttons and divider */}
       <Box
         sx={{
           display: 'flex',
@@ -70,7 +58,8 @@ function CustomToolbar({ buttons, dropdowns, searchbarProps }: ToolbarProps) {
         <Box
           sx={{
             display: 'flex',
-            alignItems: 'center',
+            alignItems: 'flex-end', // Changed from center to flex-end
+            paddingBottom: '13px', // Added padding to align with other elements
             gap: '10px',
             height: '100%',
             padding: '0 15px',
@@ -90,6 +79,7 @@ function CustomToolbar({ buttons, dropdowns, searchbarProps }: ToolbarProps) {
             ))}
         </Box>
       </Box>
+
       {/* Search bar section */}
       <Box
         sx={{
@@ -99,10 +89,12 @@ function CustomToolbar({ buttons, dropdowns, searchbarProps }: ToolbarProps) {
           width: '300px',
           minWidth: '200px',
           height: '100%',
+          padding: '0 15px',
         }}
       >
         <Searchbar
           backgroundcolor={semiTransparentWhite.main}
+          outlinecolor="none"
           label="Search the DataGrid"
           fontcolor={black.main}
           iconcolor={black.main}
@@ -111,15 +103,21 @@ function CustomToolbar({ buttons, dropdowns, searchbarProps }: ToolbarProps) {
           {...searchbarProps}
         />
       </Box>
+
+      {/* Spacer to push dropdowns to the right */}
+      <Box sx={{ flexGrow: 1 }} />
+
       {/* Dropdowns section */}
       {dropdowns && dropdowns.length > 0 && (
         <Box
           sx={{
             display: 'flex',
-            alignItems: 'center',
+            alignItems: 'flex-end', // Changed from center to flex-end
+            paddingBottom: '13px', // Added padding to align with other elements
             height: '100%',
             padding: '0 15px',
             gap: '10px',
+            marginLeft: 'auto',
           }}
         >
           {dropdowns.map((dropdown, index) => (

package/src/index.ts

@@ -47,7 +47,9 @@ import PasswordField from './components/PasswordField'
 import PhoneNumberField from './components/PhoneNumberField'
 import Searchbar from './components/Searchbar'
 import TextField from './components/TextField'
-
+// Add FormDataGrid import
+import FormDataGrid from './components/Form/DataGrid'
+import type { FormDataGridProps } from './components/Form/DataGrid'
 // Animations
 import { Animation } from './components/Content/Structure/animations'
 
@@ -71,7 +73,10 @@ 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'
+import { DatagridProps } from './components/DataGrid'
+import type { ColumnDef, RowData } from './components/DataGrid/Table'
+import type { CellParams, HeaderParams } from './components/DataGrid/Table'
+
 // Colors
 import {
   moss,
@@ -213,6 +218,15 @@ export { PhoneNumberField }
 export { Searchbar }
 export { TextField }
 
+// Add FormDataGrid to named exports
+export { FormDataGrid }
+
+// Add FormDataGrid type to type exports
+export type { FormDataGridProps }
+export type { DatagridProps }
+export type { ColumnDef, RowData }
+export type { CellParams, HeaderParams }
+
 // Exporting ExtendedButtonProps
 export type { ExtendedButtonProps }
 export type { ExtendedTypographyProps }
@@ -268,7 +282,6 @@ export type { CustomToolbarComponentProps }
 export type { TransferListComponentProps }
 export type { StyledTooltipComponentProps }
 export type { DropdownOption }
-export type { CustomTextFieldProps }
 
 // New type exports
 export type { DateFieldProps }