goobs-frontend 0.7.67 → 0.7.69

package/src/components/Searchbar/index.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import { TextField, InputAdornment, styled } from '@mui/material'
+import SearchIcon from '@mui/icons-material/Search'
+
+export interface SearchbarProps {
+  label?: string
+  backgroundcolor?: string
+  iconcolor?: string
+  outlinecolor?: string
+  fontcolor?: string
+  placeholder?: string
+  onChange?: () => void
+}
+
+const StyledTextField = styled(TextField)<{
+  backgroundcolor?: string
+  outlinecolor?: string
+  $fontcolor?: string // Use $ prefix to avoid passing it as DOM attribute
+}>(({ 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,
+  },
+}))
+
+const Searchbar: React.FC<SearchbarProps> = ({
+  label,
+  backgroundcolor,
+  iconcolor,
+  outlinecolor,
+  fontcolor,
+  placeholder,
+  onChange,
+}) => {
+  const handleChange = () => {
+    onChange?.()
+  }
+
+  return (
+    <StyledTextField
+      label={label}
+      variant="outlined"
+      fullWidth
+      placeholder={placeholder}
+      backgroundcolor={backgroundcolor}
+      outlinecolor={outlinecolor}
+      $fontcolor={fontcolor}
+      InputProps={{
+        startAdornment: (
+          <InputAdornment position="start">
+            <SearchIcon style={{ color: iconcolor }} />
+          </InputAdornment>
+        ),
+      }}
+      onChange={handleChange}
+    />
+  )
+}
+
+export default Searchbar

package/src/components/TextField/index.tsx

@@ -0,0 +1,130 @@
+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 {
+    name,
+    label,
+    placeholder,
+    onChange,
+    onFocus,
+    onBlur,
+    value,
+    error,
+    sx,
+    InputProps,
+    ...restProps
+  } = props
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      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 inputStyle = useMemo<React.CSSProperties>(
+    () => ({
+      backgroundColor: 'inherit',
+      width: '100%',
+      height: 40,
+      cursor: 'text',
+      boxSizing: 'border-box',
+      borderRadius: 5,
+      paddingRight: 6,
+    }),
+    []
+  )
+
+  const mergedInputProps = useMemo(
+    () => ({
+      ...InputProps,
+      style: {
+        ...inputStyle,
+        ...InputProps?.style,
+      },
+    }),
+    [InputProps, inputStyle]
+  )
+
+  const labelStyle = useMemo(
+    () => ({
+      '&.MuiInputLabel-shrink': {
+        top: '0px',
+        left: '0px',
+      },
+      '&:not(.MuiInputLabel-shrink)': {
+        transform: 'scale(1)',
+        transformOrigin: 'top left',
+        top: '9px',
+        left: '12px',
+      },
+    }),
+    []
+  )
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        width: '100%',
+        marginTop: '5px',
+        height: '62px',
+        ...sx,
+      }}
+      onClick={handleClick}
+    >
+      <MuiTextField
+        name={name}
+        label={label}
+        placeholder={placeholder}
+        onChange={handleChange}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        value={value}
+        error={error}
+        InputProps={mergedInputProps}
+        InputLabelProps={{
+          sx: labelStyle,
+        }}
+        fullWidth
+        variant="outlined"
+        {...restProps}
+      />
+    </Box>
+  )
+})
+
+TextField.displayName = 'TextField'
+
+export default TextField

package/src/components/Toolbar/index.tsx

@@ -1,8 +1,9 @@
 'use client'
 import React, { useState } from 'react'
 import { Box, styled } from '@mui/material'
-import StyledComponent, { StyledComponentProps } from '../StyledComponent'
 import CustomButton, { CustomButtonProps } from '../Button'
+import Searchbar, { SearchbarProps } from '../Searchbar'
+import Dropdown, { DropdownProps } from '../Dropdown'
 import { white, black, semiTransparentWhite } from '../../styles/palette'
 
 /**
@@ -18,8 +19,8 @@ const VerticalDivider = styled(Box)({
  */
 export interface ToolbarProps {
   buttons?: CustomButtonProps[]
-  dropdowns?: Omit<StyledComponentProps, 'componentvariant'>[]
-  searchbarProps?: Omit<StyledComponentProps, 'componentvariant'>
+  dropdowns?: DropdownProps[]
+  searchbarProps?: SearchbarProps
 }
 
 /**
@@ -30,7 +31,6 @@ export interface ToolbarProps {
 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
 
@@ -101,12 +101,12 @@ function CustomToolbar({ buttons, dropdowns, searchbarProps }: ToolbarProps) {
           height: '100%',
         }}
       >
-        <StyledComponent
-          componentvariant="searchbar"
+        <Searchbar
           backgroundcolor={semiTransparentWhite.main}
           label="Search the DataGrid"
-          combinedfontcolor={black.main}
+          fontcolor={black.main}
           iconcolor={black.main}
+          onChange={() => console.log('Search changed')}
           {...searchbarProps}
         />
       </Box>
@@ -122,11 +122,12 @@ function CustomToolbar({ buttons, dropdowns, searchbarProps }: ToolbarProps) {
           }}
         >
           {dropdowns.map((dropdown, index) => (
-            <StyledComponent
+            <Dropdown
               key={index}
-              componentvariant="dropdown"
               outlinecolor={black.main}
-              combinedfontcolor={black.main}
+              fontcolor={black.main}
+              shrunkfontcolor={black.main}
+              onChange={() => console.log('Dropdown changed')}
               {...dropdown}
             />
           ))}

package/src/index.ts

@@ -1,5 +1,7 @@
+import React from 'react'
+
 // Components
-import CustomButton, { ButtonAlignment } from './components/Button'
+import CustomButton from './components/Button'
 import CustomGrid, {
   Alignment,
   BorderProp,
@@ -7,9 +9,6 @@ import CustomGrid, {
   gridconfig,
   cellconfig,
 } from './components/Grid'
-import StyledComponent, {
-  StyledComponentProps,
-} from './components/StyledComponent'
 import Typography, {
   FontFamily,
   TypographyVariant,
@@ -37,13 +36,25 @@ import { CustomStepper, CustomStepperProps } from './components/Stepper'
 import CustomToolbar, { ToolbarProps } from './components/Toolbar'
 import TransferList, { TransferListProps } from './components/TransferList'
 import StyledTooltip, { CustomTooltipProps } from './components/Tooltip'
-import React from 'react'
+import QRCodeComponent, { QRCodeProps } from './components/QRCode'
+
+// New imports
+import DateField from './components/DateField'
+import Dropdown from './components/Dropdown'
+import IncrementNumberField from './components/IncrementNumberField'
+import NumberField from './components/NumberField'
+import PasswordField from './components/PasswordField'
+import PhoneNumberField from './components/PhoneNumberField'
+import Searchbar from './components/Searchbar'
+import TextField from './components/TextField'
 
 // Animations
 import { Animation } from './components/Content/Structure/animations'
 
 // Importing ExtendedButtonProps from useButton
 import { ExtendedButtonProps } from './components/Content/Structure/button/useButton'
+import { ExtendedTypographyProps } from './components/Content/Structure/typography/useGridTypography'
+import { ExtendedTextFieldProps } from './components/Content/Structure/textfield/useTextField'
 
 // Colors
 import {
@@ -142,10 +153,23 @@ declare type StyledTooltipComponentProps = React.ComponentProps<
   typeof StyledTooltip
 >
 
+// New type declarations
+declare type DateFieldProps = React.ComponentProps<typeof DateField>
+declare type DropdownProps = React.ComponentProps<typeof Dropdown>
+declare type IncrementNumberFieldProps = React.ComponentProps<
+  typeof IncrementNumberField
+>
+declare type NumberFieldProps = React.ComponentProps<typeof NumberField>
+declare type PasswordFieldProps = React.ComponentProps<typeof PasswordField>
+declare type PhoneNumberFieldProps = React.ComponentProps<
+  typeof PhoneNumberField
+>
+declare type SearchbarProps = React.ComponentProps<typeof Searchbar>
+declare type TextFieldProps = React.ComponentProps<typeof TextField>
+
 // Named exports
 export { CustomButton }
 export { CustomGrid }
-export { StyledComponent }
 export { Typography }
 export { ConfirmationCodeInput }
 export { RadioGroup }
@@ -161,16 +185,26 @@ export { CustomToolbar }
 export { TransferList }
 export { StyledTooltip }
 export { formContainerStyle }
+export { QRCodeComponent }
+
+// New named exports
+export { DateField }
+export { Dropdown }
+export { IncrementNumberField }
+export { NumberField }
+export { PasswordField }
+export { PhoneNumberField }
+export { Searchbar }
+export { TextField }
 
 // Exporting ExtendedButtonProps
 export type { ExtendedButtonProps }
-
+export type { ExtendedTypographyProps }
+export type { ExtendedTextFieldProps }
 // Type exports
 export type { CustomButtonProps }
-export type { ButtonAlignment }
 export type { CustomGridProps }
 export type { Alignment, BorderProp, columnconfig, gridconfig, cellconfig }
-export type { StyledComponentProps }
 export type { FontFamily, TypographyVariant, TypographyProps }
 export type { ConfirmationCodeInputsProps }
 export type { RadioOption, RadioGroupProps }
@@ -184,6 +218,7 @@ export type { CustomStepperProps }
 export type { ToolbarProps }
 export type { TransferListProps }
 export type { CustomTooltipProps }
+export type { QRCodeProps }
 
 // Additional type exports for the newly declared types
 export type { TypographyComponentProps }
@@ -201,6 +236,16 @@ export type { CustomToolbarComponentProps }
 export type { TransferListComponentProps }
 export type { StyledTooltipComponentProps }
 
+// New type exports
+export type { DateFieldProps }
+export type { DropdownProps }
+export type { IncrementNumberFieldProps }
+export type { NumberFieldProps }
+export type { PasswordFieldProps }
+export type { PhoneNumberFieldProps }
+export type { SearchbarProps }
+export type { TextFieldProps }
+
 // Animation type export
 export type { Animation }
 

package/src/components/Button/hook/useHelperFooter.tsx

@@ -1,214 +0,0 @@
-import { useCallback, useMemo } from 'react'
-import { session } from 'goobs-cache'
-
-export interface HelperFooterMessage {
-  status: 'error' | 'success' | 'emptyAndRequired'
-  statusMessage: string
-  spreadMessage: string
-  spreadMessagePriority: number
-  required: boolean
-  hasInput?: boolean
-}
-
-const useHelperFooter = (initialFormname?: string) => {
-  console.log(
-    'useHelperFooter: Hook called with initialFormname:',
-    initialFormname
-  )
-
-  const helperFooterAtom = useMemo(
-    () => session.atom<Record<string, HelperFooterMessage> | null>(null),
-    []
-  )
-  const currentErrorIndexAtom = useMemo(() => session.atom<number>(0), [])
-
-  const [helperFooters, setHelperFooters] = session.useAtom(helperFooterAtom)
-  const [currentErrorIndex, setCurrentErrorIndex] = session.useAtom(
-    currentErrorIndexAtom
-  )
-  const [helperFooterResult] = session.useAtom(
-    useMemo(
-      () => session.atom(`helperfooter:${initialFormname}`),
-      [initialFormname]
-    )
-  )
-
-  const fetchHelperFooters = useCallback((): Record<
-    string,
-    HelperFooterMessage
-  > | null => {
-    console.log('useHelperFooter: fetchHelperFooters called')
-    if (!initialFormname) {
-      console.log('useHelperFooter: No formname provided, returning null')
-      return null
-    }
-
-    if (
-      helperFooters === null &&
-      helperFooterResult &&
-      typeof helperFooterResult === 'object' &&
-      helperFooterResult !== null
-    ) {
-      const fetchedHelperFooters: Record<string, HelperFooterMessage> = {}
-
-      for (const [key, value] of Object.entries(helperFooterResult)) {
-        if (
-          typeof value === 'object' &&
-          value !== null &&
-          'status' in value &&
-          'statusMessage' in value &&
-          'spreadMessage' in value &&
-          'spreadMessagePriority' in value &&
-          'required' in value &&
-          'hasInput' in value
-        ) {
-          fetchedHelperFooters[key] = {
-            status: value.status as 'error' | 'success' | 'emptyAndRequired',
-            statusMessage: String(value.statusMessage),
-            spreadMessage: String(value.spreadMessage),
-            spreadMessagePriority: Number(value.spreadMessagePriority),
-            required: Boolean(value.required),
-            hasInput: Boolean(value.hasInput),
-          }
-        }
-      }
-
-      console.log(
-        'useHelperFooter: Fetched helper footers:',
-        fetchedHelperFooters
-      )
-      setHelperFooters(fetchedHelperFooters)
-      return fetchedHelperFooters
-    }
-
-    return helperFooters
-  }, [helperFooters, helperFooterResult, initialFormname, setHelperFooters])
-
-  const updateFormValidation = useCallback((): boolean => {
-    console.log('useHelperFooter: updateFormValidation called')
-    const fetchedHelperFooters = fetchHelperFooters()
-
-    if (fetchedHelperFooters) {
-      const errorFooters = Object.values(fetchedHelperFooters).filter(
-        footer =>
-          (footer.status === 'error' || footer.status === 'emptyAndRequired') &&
-          footer.required
-      )
-
-      console.log('useHelperFooter: Error footers:', errorFooters)
-
-      if (errorFooters.length === 0) {
-        setCurrentErrorIndex(0)
-        console.log('useHelperFooter: No errors found, returning true')
-        return true
-      }
-
-      errorFooters.sort(
-        (a, b) => a.spreadMessagePriority - b.spreadMessagePriority
-      )
-
-      if (currentErrorIndex >= errorFooters.length) {
-        setCurrentErrorIndex(0)
-      }
-
-      console.log('useHelperFooter: Errors found, returning false')
-      return false
-    }
-
-    console.log('useHelperFooter: No helper footers, returning true')
-    return true
-  }, [fetchHelperFooters, currentErrorIndex, setCurrentErrorIndex])
-
-  const checkFormStatus = useCallback(() => {
-    console.log('useHelperFooter: checkFormStatus called')
-    const fetchedHelperFooters = fetchHelperFooters()
-    const status = fetchedHelperFooters
-      ? Object.values(fetchedHelperFooters).every(
-          value => !value.required || (value.required && value.hasInput)
-        )
-      : true
-    console.log('useHelperFooter: Form status:', status)
-    return status
-  }, [fetchHelperFooters])
-
-  const getEmptyRequiredFields = useCallback(() => {
-    console.log('useHelperFooter: getEmptyRequiredFields called')
-    const fetchedHelperFooters = fetchHelperFooters()
-    if (!fetchedHelperFooters) return []
-    const emptyFields = Object.entries(fetchedHelperFooters)
-      .filter(([, value]) => value.required && !value.hasInput)
-      .map(([key]) => key)
-    console.log('useHelperFooter: Empty required fields:', emptyFields)
-    return emptyFields
-  }, [fetchHelperFooters])
-
-  const getCurrentErrorMessage = useCallback(() => {
-    console.log('useHelperFooter: getCurrentErrorMessage called')
-    const fetchedHelperFooters = fetchHelperFooters()
-    if (!fetchedHelperFooters) return undefined
-    const errorFooters = Object.values(fetchedHelperFooters).filter(
-      footer =>
-        (footer.status === 'error' || footer.status === 'emptyAndRequired') &&
-        footer.required
-    )
-    if (errorFooters.length === 0) return undefined
-    const message = errorFooters[currentErrorIndex]?.spreadMessage
-    console.log('useHelperFooter: Current error message:', message)
-    return message
-  }, [fetchHelperFooters, currentErrorIndex])
-
-  const isFormValid = useCallback(() => {
-    const fetchedHelperFooters = fetchHelperFooters()
-    if (!fetchedHelperFooters) return true
-    const valid = Object.values(fetchedHelperFooters).every(
-      footer =>
-        footer.status !== 'error' && footer.status !== 'emptyAndRequired'
-    )
-    console.log('useHelperFooter: isFormValid:', valid)
-    return valid
-  }, [fetchHelperFooters])
-
-  const nextError = useCallback(() => {
-    console.log('useHelperFooter: nextError called')
-    const fetchedHelperFooters = fetchHelperFooters()
-    if (!fetchedHelperFooters) return
-    const errorFooters = Object.values(fetchedHelperFooters).filter(
-      footer =>
-        (footer.status === 'error' || footer.status === 'emptyAndRequired') &&
-        footer.required
-    )
-    if (errorFooters.length > 0) {
-      setCurrentErrorIndex(prevIndex => (prevIndex + 1) % errorFooters.length)
-      console.log(
-        'useHelperFooter: New error index:',
-        (currentErrorIndex + 1) % errorFooters.length
-      )
-    }
-  }, [fetchHelperFooters, currentErrorIndex, setCurrentErrorIndex])
-
-  const result = useMemo(
-    () => ({
-      errorMessage: getCurrentErrorMessage,
-      isFormValid,
-      updateFormValidation,
-      fetchHelperFooters,
-      nextError,
-      checkFormStatus,
-      getEmptyRequiredFields,
-    }),
-    [
-      getCurrentErrorMessage,
-      isFormValid,
-      updateFormValidation,
-      fetchHelperFooters,
-      nextError,
-      checkFormStatus,
-      getEmptyRequiredFields,
-    ]
-  )
-
-  console.log('useHelperFooter: Returning result:', result)
-  return result
-}
-
-export default useHelperFooter

package/src/components/Content/Structure/styledcomponent/useStyledComponent.tsx

@@ -1,104 +0,0 @@
-import React from 'react'
-import StyledComponent, {
-  StyledComponentProps,
-} from '../../../../components/StyledComponent'
-import { columnconfig, cellconfig } from '../../../Grid'
-
-type ExtendedColumnConfig = Omit<columnconfig, 'component'> & {
-  component?: columnconfig['component']
-}
-
-export interface ExtendedStyledComponentProps
-  extends Omit<StyledComponentProps, 'columnconfig'> {
-  columnconfig?: ExtendedColumnConfig
-  cellconfig?: cellconfig
-}
-
-const useStyledComponent = (grid: {
-  styledcomponent?:
-    | ExtendedStyledComponentProps
-    | ExtendedStyledComponentProps[]
-}): columnconfig | columnconfig[] | null => {
-  if (!grid.styledcomponent) return null
-
-  const renderStyledComponent = (
-    component: ExtendedStyledComponentProps,
-    index: number
-  ): columnconfig => {
-    const {
-      name,
-      outlinecolor,
-      iconcolor,
-      backgroundcolor,
-      combinedfontcolor,
-      unshrunkfontcolor,
-      shrunkfontcolor,
-      autoComplete,
-      componentvariant,
-      options,
-      helperfooter,
-      placeholder,
-      minRows,
-      label,
-      shrunklabellocation,
-      value,
-      columnconfig: itemColumnConfig,
-      valuestatus,
-      cellconfig,
-      required,
-      ...restProps
-    } = component
-
-    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 cellconfig with the columnconfig
-    const mergedConfig: columnconfig = {
-      ...itemColumnConfig,
-      cellconfig: {
-        ...cellconfig,
-      },
-      component: (
-        <StyledComponent
-          key={`styledcomponent-${index}`}
-          name={name}
-          outlinecolor={outlinecolor}
-          iconcolor={iconcolor}
-          backgroundcolor={backgroundcolor}
-          combinedfontcolor={combinedfontcolor}
-          unshrunkfontcolor={unshrunkfontcolor}
-          shrunkfontcolor={shrunkfontcolor}
-          autoComplete={autoComplete}
-          componentvariant={componentvariant}
-          options={options}
-          helperfooter={helperfooter}
-          placeholder={placeholder}
-          minRows={minRows}
-          label={label}
-          shrunklabellocation={shrunklabellocation}
-          value={value}
-          valuestatus={valuestatus}
-          required={required}
-          {...restProps}
-        />
-      ),
-    }
-    return mergedConfig
-  }
-
-  if (Array.isArray(grid.styledcomponent)) {
-    return grid.styledcomponent.map(renderStyledComponent)
-  } else {
-    return renderStyledComponent(grid.styledcomponent, 0)
-  }
-}
-
-export default useStyledComponent