goobs-frontend 0.8.11 → 0.8.13

package/src/components/Content/Structure/accordion/useAccordion.tsx

@@ -0,0 +1,79 @@
+'use client'
+import React from 'react'
+import {
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+  CustomAccordionProps,
+  CustomAccordionSummaryProps,
+  CustomAccordionDetailsProps,
+} from '../../../Accordion'
+import { columnconfig, cellconfig } from '../../../Grid'
+
+export interface ExtendedAccordionProps extends CustomAccordionProps {
+  columnconfig?: Partial<columnconfig>
+  cellconfig?: cellconfig
+  summaryProps?: CustomAccordionSummaryProps
+  detailsProps?: CustomAccordionDetailsProps
+  summaryContent?: React.ReactNode
+  detailsContent?: React.ReactNode
+}
+
+const useAccordion = (grid: {
+  accordion?: ExtendedAccordionProps | ExtendedAccordionProps[]
+}) => {
+  if (!grid.accordion) return null
+
+  const renderAccordion = (
+    accordionItem: ExtendedAccordionProps,
+    index: number
+  ): columnconfig => {
+    const {
+      columnconfig: itemColumnConfig,
+      cellconfig,
+      summaryProps,
+      detailsProps,
+      summaryContent,
+      detailsContent,
+      ...restProps
+    } = accordionItem
+
+    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'
+      )
+    }
+
+    const mergedConfig: columnconfig = {
+      ...(itemColumnConfig as columnconfig),
+      cellconfig: {
+        ...cellconfig,
+      },
+      component: (
+        <Accordion key={`accordion-${index}`} {...restProps}>
+          <AccordionSummary {...summaryProps}>
+            {summaryContent}
+          </AccordionSummary>
+          <AccordionDetails {...detailsProps}>
+            {detailsContent}
+          </AccordionDetails>
+        </Accordion>
+      ),
+    }
+
+    return mergedConfig
+  }
+
+  if (Array.isArray(grid.accordion)) {
+    return grid.accordion.map(renderAccordion)
+  } else {
+    return [renderAccordion(grid.accordion, 0)]
+  }
+}
+
+export default useAccordion

package/src/components/Content/Structure/phoneNumber/usePhoneNumber.tsx

@@ -2,7 +2,7 @@
 import React from 'react'
 import PhoneNumberField from '../../../PhoneNumberField'
 import { columnconfig, cellconfig } from '../../../Grid'
-import { TextFieldProps } from '@mui/material'
+import type { TextFieldProps } from '../../../TextField'
 
 export type ExtendedPhoneNumberFieldProps = TextFieldProps & {
   columnconfig?: Partial<columnconfig>

package/src/components/Content/index.tsx

@@ -69,6 +69,9 @@ import useComplexEditor, {
 import useSearchableDropdown, {
   ExtendedSearchableDropdownProps,
 } from './Structure/searchableDropdown/useSearchableDropdown'
+import useAccordion, {
+  ExtendedAccordionProps,
+} from './Structure/accordion/useAccordion'
 
 /**
  * Props for the ContentSection component.
@@ -87,6 +90,7 @@ export interface ContentSectionProps {
       | ExtendedSearchableDropdownProps[]
     complexeditor?: ExtendedComplexEditorProps | ExtendedComplexEditorProps[]
     typography?: TypographyProps | TypographyProps[]
+    accordion?: ExtendedAccordionProps | ExtendedAccordionProps[]
     radiogroup?: ExtendedRadioGroupProps | ExtendedRadioGroupProps[]
     link?: LinkProps | LinkProps[]
     button?: ExtendedButtonProps | ExtendedButtonProps[]
@@ -152,6 +156,7 @@ const RenderContent: React.FC<
   addToColumnConfigs(useSearchableDropdown(props))
   addToColumnConfigs(useTextField(props))
   addToColumnConfigs(useDateField(props))
+  addToColumnConfigs(useAccordion(props))
   addToColumnConfigs(useCheckbox(props))
   addToColumnConfigs(usePhoneNumber(props))
   addToColumnConfigs(useDropdown(props))

package/src/components/DateField/index.tsx

@@ -1,6 +1,5 @@
 'use client'
 import React, { useState, forwardRef } from 'react'
-import { styled } from '@mui/material/styles'
 import DatePicker from 'react-datepicker'
 import 'react-datepicker/dist/react-datepicker.css'
 import CalendarTodayIcon from '@mui/icons-material/CalendarToday'
@@ -9,36 +8,9 @@ import TextField, { TextFieldProps } from '../TextField'
 export interface DateFieldProps
   extends Omit<TextFieldProps, 'onChange' | 'value' | 'endAdornment'> {
   onChange?: (date: Date | null) => void
-  backgroundcolor?: string
-  outlinecolor?: string
-  fontcolor?: string
-  label?: string
   value?: Date | null
 }
 
-const StyledTextField = styled(TextField)<{
-  backgroundcolor?: string
-  outlinecolor?: string
-  fontcolor?: string
-}>(({ backgroundcolor, outlinecolor }) => ({
-  '& .MuiOutlinedInput-root': {
-    backgroundColor: backgroundcolor,
-    height: '40px',
-    '& fieldset': {
-      borderColor: outlinecolor,
-    },
-    '&:hover fieldset': {
-      borderColor: outlinecolor,
-    },
-    '&.Mui-focused fieldset': {
-      borderColor: outlinecolor,
-    },
-  },
-  '& .MuiInputBase-input': {
-    padding: '8px 14px',
-  },
-}))
-
 interface CustomInputProps {
   value?: string
   onClick?: () => void
@@ -61,9 +33,6 @@ CustomInput.displayName = 'CustomInput'
 
 const DateField: React.FC<DateFieldProps> = ({
   onChange,
-  backgroundcolor,
-  outlinecolor,
-  fontcolor,
   label = 'Select Date',
   value,
   ...rest
@@ -100,10 +69,8 @@ const DateField: React.FC<DateFieldProps> = ({
     const newValue = e.target.value
     const selectionStart = input.selectionStart || 0
 
-    // Keep the original value
     setInputValue(newValue)
 
-    // Try to parse the date parts
     const parts = newValue.split('/')
     if (parts.length === 3) {
       const month = parseInt(parts[0], 10)
@@ -125,7 +92,6 @@ const DateField: React.FC<DateFieldProps> = ({
       }
     }
 
-    // Maintain cursor position
     setTimeout(() => {
       if (selectionStart <= 2) {
         input.setSelectionRange(selectionStart, selectionStart)
@@ -173,7 +139,6 @@ const DateField: React.FC<DateFieldProps> = ({
         onChange(newDate)
       }
 
-      // Maintain cursor position
       setTimeout(() => {
         switch (selectedPart) {
           case 'month':
@@ -224,14 +189,11 @@ const DateField: React.FC<DateFieldProps> = ({
 
   return (
     <>
-      <StyledTextField
+      <TextField
         label={label}
         value={inputValue}
         onChange={handleInputChange}
         endAdornment={calendarIcon}
-        backgroundcolor={backgroundcolor}
-        outlinecolor={outlinecolor}
-        fontcolor={fontcolor}
         slotProps={{
           input: {
             readOnly: false,

package/src/components/Dropdown/index.tsx

@@ -9,7 +9,6 @@ import {
   SelectProps,
   FormHelperText,
   Box,
-  CircularProgress,
 } from '@mui/material'
 import { styled } from '@mui/material/styles'
 import { black, white } from '../../styles/palette'
@@ -128,13 +127,6 @@ const StyledMenuItem = styled(MenuItem)(() => ({
   backgroundColor: white.main,
 }))
 
-const LoadingContainer = styled(Box)(() => ({
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  height: '50px',
-}))
-
 const capitalizeFirstLetter = (string: string) => {
   return string.charAt(0).toUpperCase() + string.slice(1)
 }
@@ -199,23 +191,37 @@ const Dropdown: React.FC<DropdownProps> = ({
   onFocus,
   ...rest
 }) => {
-  const [selectedValue, setSelectedValue] = useState<string>('')
-  const [isLoading, setIsLoading] = useState(true)
-  const [hasSelection, setHasSelection] = useState(false)
+  // Determine initial selectedValue and hasSelection immediately
+  const externalValue = rest.value as string | undefined
+  let initialSelected = ''
+  let initialHasSelection = false
 
-  useEffect(() => {
+  if (externalValue !== undefined && externalValue !== '') {
+    initialSelected = externalValue
+    initialHasSelection = true
+  } else if (defaultValue) {
     const defaultOption = options.find(option => option.value === defaultValue)
     if (defaultOption) {
-      setSelectedValue(defaultOption.value)
-      setHasSelection(true)
+      initialSelected = defaultOption.value
+      initialHasSelection = true
     }
-    setIsLoading(false)
-  }, [defaultValue, options])
+  }
+
+  const [selectedValue, setSelectedValue] = useState<string>(initialSelected)
+  const [hasSelection, setHasSelection] = useState(initialHasSelection)
+
+  // Add useEffect to handle external value changes
+  useEffect(() => {
+    if (externalValue !== undefined) {
+      setSelectedValue(externalValue)
+      setHasSelection(externalValue !== '')
+    }
+  }, [externalValue])
 
   const handleChange: SelectProps['onChange'] = (event, child) => {
     const newValue = event.target.value as string
     setSelectedValue(newValue)
-    setHasSelection(true)
+    setHasSelection(newValue !== '')
     if (onChange) {
       onChange(event, child)
     }
@@ -234,17 +240,17 @@ const Dropdown: React.FC<DropdownProps> = ({
   }
 
   const renderMenuItem = (option: DropdownOption) => {
-    const label = capitalizeFirstLetter(option.value.replace(/_/g, ' '))
+    const itemLabel = capitalizeFirstLetter(option.value.replace(/_/g, ' '))
     if (!('attribute1' in option)) {
       return (
         <MenuItem key={option.value} value={option.value}>
-          <Typography fontvariant="merriparagraph" text={label} />
+          <Typography fontvariant="merriparagraph" text={itemLabel} />
         </MenuItem>
       )
     } else {
       return (
         <StyledMenuItem key={option.value} value={option.value}>
-          <Typography fontvariant="merriparagraph" text={label} />
+          <Typography fontvariant="merriparagraph" text={itemLabel} />
           <Typography
             fontvariant="merriparagraph"
             text={`${option.attribute1}${option.attribute2 ? ` | ${option.attribute2}` : ''}`}
@@ -255,14 +261,6 @@ const Dropdown: React.FC<DropdownProps> = ({
     }
   }
 
-  if (isLoading) {
-    return (
-      <LoadingContainer>
-        <CircularProgress size={24} />
-      </LoadingContainer>
-    )
-  }
-
   return (
     <StyledBox>
       <StyledFormControl
@@ -278,6 +276,7 @@ const Dropdown: React.FC<DropdownProps> = ({
           unshrunkfontcolor={unshrunkfontcolor}
           shrunklabelposition={shrunklabelposition}
           hasvalue={hasSelection ? 'true' : 'false'}
+          shrink={hasSelection || Boolean(selectedValue)}
         >
           {label}
         </StyledInputLabel>

package/src/components/Grid/index.tsx

@@ -1,23 +1,54 @@
 'use client'
 
-import React, { JSX } from 'react'
+import React from 'react'
 import Grid2, { Grid2Props } from '@mui/material/Grid2'
-import { useMediaQuery, useTheme } from '@mui/material'
+import { useMediaQuery } from '@mui/material'
 
 type Alignment = 'left' | 'center' | 'right' | 'inherit' | 'justify'
 type BorderProp = 'none' | 'solid'
 type WrapProp = 'nowrap' | 'wrap'
+type Breakpoint = 'xs' | 'sm' | 'md' | 'ms' | 'ml' | 'lg' | 'xl'
+
+interface ResponsiveObject<T> {
+  xs?: T
+  sm?: T
+  md?: T
+  ms?: T
+  ml?: T
+  lg?: T
+  xl?: T
+}
+
+type ResponsiveValue<T> = T | ResponsiveObject<T>
+
+type cellconfig = {
+  border?: BorderProp
+  minHeight?: string
+  maxHeight?: string
+  width?: string
+  mobilewidth?: string
+  tabletwidth?: string
+  computerwidth?: string
+  borderColor?: string
+  backgroundColor?: string
+  onClick?: () => void
+  wrap?: WrapProp
+}
 
 type columnconfig = {
   row: number
   column: number
   gridname?: string
   alignment?: Alignment
-  margintop?: number
+  margintop?: ResponsiveValue<number>
+  marginbottom?: ResponsiveValue<number>
+  marginright?: ResponsiveValue<number>
+  marginleft?: ResponsiveValue<number>
+  paddingtop?: ResponsiveValue<number>
+  paddingbottom?: ResponsiveValue<number>
+  paddingright?: ResponsiveValue<number>
+  paddingleft?: ResponsiveValue<number>
   columnwidth?: string
-  marginbottom?: number
-  marginright?: number
-  marginleft?: number
   component?: React.ReactNode
   bordercolor?: string
   cellconfig?: cellconfig
@@ -29,40 +60,74 @@ type columnconfig = {
 type gridconfig = {
   gridname?: string
   alignment?: Alignment
-  margintop?: number
-  marginbottom?: number
-  marginright?: number
-  marginleft?: number
+  margintop?: ResponsiveValue<number>
+  marginbottom?: ResponsiveValue<number>
+  marginright?: ResponsiveValue<number>
+  marginleft?: ResponsiveValue<number>
+  paddingtop?: ResponsiveValue<number>
+  paddingbottom?: ResponsiveValue<number>
+  paddingright?: ResponsiveValue<number>
+  paddingleft?: ResponsiveValue<number>
   gridwidth?: string
   bordercolor?: string
 }
 
-type cellconfig = {
-  border?: BorderProp
-  minHeight?: string
-  maxHeight?: string
-  width?: string
-  mobilewidth?: string
-  tabletwidth?: string
-  computerwidth?: string
-  borderColor?: string
-  backgroundColor?: string
-  onClick?: () => void
-  wrap?: WrapProp
-}
-
 type CustomGridProps = Omit<Grid2Props, 'children'> & {
   gridconfig?: gridconfig
   columnconfig?: columnconfig[]
   cellconfig?: cellconfig
 }
 
+function isResponsiveObject<T>(
+  value: ResponsiveValue<T> | undefined
+): value is ResponsiveObject<T> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+
+function getResponsiveValue<T>(
+  value: ResponsiveValue<T> | undefined,
+  breakpoint: Breakpoint
+): T | undefined {
+  if (value === undefined) return undefined
+  if (isResponsiveObject(value)) {
+    return value[breakpoint]
+  }
+  return value
+}
+
 function CustomGrid({
   gridconfig,
   columnconfig,
   cellconfig,
   ...rest
-}: CustomGridProps): JSX.Element {
+}: CustomGridProps) {
+  // Manually define media queries for breakpoints
+  const isMobile = useMediaQuery('(max-width:600px)') // xs
+  const isSmallTablet = useMediaQuery('(min-width:601px) and (max-width:900px)') // sm
+  const isMediumSmall = useMediaQuery('(min-width:901px) and (max-width:960px)') // md
+  const isMediumLarge = useMediaQuery(
+    '(min-width:961px) and (max-width:1024px)'
+  ) // ms
+  const isLarge = useMediaQuery('(min-width:1025px) and (max-width:1170px)') // ml
+  const isExtraLarge = useMediaQuery('(min-width:1537px)') // xl
+
+  const currentBreakpoint = React.useMemo((): Breakpoint => {
+    if (isMobile) return 'xs'
+    if (isSmallTablet) return 'sm'
+    if (isMediumSmall) return 'md'
+    if (isMediumLarge) return 'ms'
+    if (isLarge) return 'ml'
+    if (isExtraLarge) return 'xl'
+    return 'lg'
+  }, [
+    isMobile,
+    isSmallTablet,
+    isMediumSmall,
+    isMediumLarge,
+    isLarge,
+    isExtraLarge,
+  ])
+
   const gridConfigValues = Array.isArray(gridconfig)
     ? gridconfig[0]
     : gridconfig
@@ -74,10 +139,40 @@ function CustomGrid({
         ? 'flex-end'
         : 'center'
 
-  const theme = useTheme()
-  const isMobile = useMediaQuery(theme.breakpoints.between(0, 767))
-  const isTablet = useMediaQuery(theme.breakpoints.between(768, 1023))
-  const isComputer = useMediaQuery(theme.breakpoints.up(1024))
+  // Get responsive margin and padding values for the overall grid
+  const gridMarginTop = getResponsiveValue(
+    gridConfigValues?.margintop,
+    currentBreakpoint
+  )
+  const gridMarginBottom = getResponsiveValue(
+    gridConfigValues?.marginbottom,
+    currentBreakpoint
+  )
+  const gridMarginLeft = getResponsiveValue(
+    gridConfigValues?.marginleft,
+    currentBreakpoint
+  )
+  const gridMarginRight = getResponsiveValue(
+    gridConfigValues?.marginright,
+    currentBreakpoint
+  )
+
+  const gridPaddingTop = getResponsiveValue(
+    gridConfigValues?.paddingtop,
+    currentBreakpoint
+  )
+  const gridPaddingBottom = getResponsiveValue(
+    gridConfigValues?.paddingbottom,
+    currentBreakpoint
+  )
+  const gridPaddingLeft = getResponsiveValue(
+    gridConfigValues?.paddingleft,
+    currentBreakpoint
+  )
+  const gridPaddingRight = getResponsiveValue(
+    gridConfigValues?.paddingright,
+    currentBreakpoint
+  )
 
   const rows = Math.max(...(columnconfig || []).map(c => c.row || 1))
 
@@ -93,7 +188,17 @@ function CustomGrid({
         padding: 0,
         margin: 0,
         gap: 0,
-        '& > *': {
+        // Apply grid-level margins and paddings
+        marginTop: gridMarginTop ? `${gridMarginTop * 8}px` : 0,
+        marginBottom: gridMarginBottom ? `${gridMarginBottom * 8}px` : 0,
+        marginLeft: gridMarginLeft ? `${gridMarginLeft * 8}px` : 0,
+        marginRight: gridMarginRight ? `${gridMarginRight * 8}px` : 0,
+        paddingTop: gridPaddingTop ? `${gridPaddingTop * 8}px` : 0,
+        paddingBottom: gridPaddingBottom ? `${gridPaddingBottom * 8}px` : 0,
+        paddingLeft: gridPaddingLeft ? `${gridPaddingLeft * 8}px` : 0,
+        paddingRight: gridPaddingRight ? `${gridPaddingRight * 8}px` : 0,
+        // Remove or adjust the child selector that sets margin:0
+        '& > *:not(.grid-column)': {
           border: 'none !important',
           padding: 0,
           margin: 0,
@@ -147,15 +252,13 @@ function CustomGrid({
                   ? currentColumnConfig?.mobilewidth ||
                     currentColumnConfig?.columnwidth ||
                     `${100 / columns}%`
-                  : isTablet
+                  : isSmallTablet
                     ? currentColumnConfig?.tabletwidth ||
                       currentColumnConfig?.columnwidth ||
                       `${100 / columns}%`
-                    : isComputer
-                      ? currentColumnConfig?.computerwidth ||
-                        currentColumnConfig?.columnwidth ||
-                        `${100 / columns}%`
-                      : currentColumnConfig?.columnwidth || `${100 / columns}%`
+                    : currentColumnConfig?.computerwidth ||
+                      currentColumnConfig?.columnwidth ||
+                      `${100 / columns}%`
 
               const justifyContent =
                 currentColumnConfig?.alignment === 'left'
@@ -164,9 +267,45 @@ function CustomGrid({
                     ? 'flex-end'
                     : 'center'
 
+              // Get responsive margin and padding values for the column
+              const marginTop = getResponsiveValue(
+                currentColumnConfig?.margintop,
+                currentBreakpoint
+              )
+              const marginBottom = getResponsiveValue(
+                currentColumnConfig?.marginbottom,
+                currentBreakpoint
+              )
+              const marginLeft = getResponsiveValue(
+                currentColumnConfig?.marginleft,
+                currentBreakpoint
+              )
+              const marginRight = getResponsiveValue(
+                currentColumnConfig?.marginright,
+                currentBreakpoint
+              )
+
+              const paddingTop = getResponsiveValue(
+                currentColumnConfig?.paddingtop,
+                currentBreakpoint
+              )
+              const paddingBottom = getResponsiveValue(
+                currentColumnConfig?.paddingbottom,
+                currentBreakpoint
+              )
+              const paddingLeft = getResponsiveValue(
+                currentColumnConfig?.paddingleft,
+                currentBreakpoint
+              )
+              const paddingRight = getResponsiveValue(
+                currentColumnConfig?.paddingright,
+                currentBreakpoint
+              )
+
               return (
                 <Grid2
                   key={`column-${columnIndex}`}
+                  className="grid-column"
                   sx={{
                     display: 'flex',
                     justifyContent,
@@ -177,19 +316,35 @@ function CustomGrid({
                     flexShrink: hasFixedWidth ? 0 : 1,
                     flexBasis: hasFixedWidth ? columnWidth : 'auto',
                     height: 'fit-content',
-                    padding: 0,
-                    marginLeft: currentColumnConfig?.marginleft
-                      ? `${currentColumnConfig.marginleft * 8}px`
-                      : 0,
-                    marginRight: currentColumnConfig?.marginright
-                      ? `${currentColumnConfig.marginright * 8}px`
-                      : 0,
-                    marginTop: currentColumnConfig?.margintop
-                      ? `${currentColumnConfig.margintop * 8}px`
-                      : 0,
-                    marginBottom: currentColumnConfig?.marginbottom
-                      ? `${currentColumnConfig.marginbottom * 8}px`
-                      : 0,
+
+                    // Apply margin
+                    marginLeft: marginLeft
+                      ? `${marginLeft * 8}px !important`
+                      : '0 !important',
+                    marginRight: marginRight
+                      ? `${marginRight * 8}px !important`
+                      : '0 !important',
+                    marginTop: marginTop
+                      ? `${marginTop * 8}px !important`
+                      : '0 !important',
+                    marginBottom: marginBottom
+                      ? `${marginBottom * 8}px !important`
+                      : '0 !important',
+
+                    // Apply padding
+                    paddingLeft: paddingLeft
+                      ? `${paddingLeft * 8}px !important`
+                      : '0 !important',
+                    paddingRight: paddingRight
+                      ? `${paddingRight * 8}px !important`
+                      : '0 !important',
+                    paddingTop: paddingTop
+                      ? `${paddingTop * 8}px !important`
+                      : '0 !important',
+                    paddingBottom: paddingBottom
+                      ? `${paddingBottom * 8}px !important`
+                      : '0 !important',
+
                     border: 'none',
                     backgroundColor: currentCellConfig?.backgroundColor,
                     minHeight: 'min-content',
@@ -204,9 +359,7 @@ function CustomGrid({
                   }}
                   onClick={currentCellConfig?.onClick}
                 >
-                  {React.isValidElement(currentColumnConfig?.component)
-                    ? currentColumnConfig?.component
-                    : null}
+                  {currentColumnConfig?.component as React.ReactNode}
                 </Grid2>
               )
             })}