goobs-frontend 0.7.67 → 0.7.69

package/src/components/Content/Structure/incremementNumberField/useIncremementNumberField.tsx

@@ -0,0 +1,65 @@
+'use client'
+import React from 'react'
+import IncrementNumberField, {
+  IncrementNumberFieldProps,
+} from './../../../IncrementNumberField'
+import { columnconfig, cellconfig } from '../../../Grid'
+
+export interface ExtendedIncrementNumberFieldProps
+  extends IncrementNumberFieldProps {
+  columnconfig?: Partial<columnconfig>
+  cellconfig?: cellconfig
+}
+
+const useIncrementNumberField = (grid: {
+  incrementNumberField?:
+    | ExtendedIncrementNumberFieldProps
+    | ExtendedIncrementNumberFieldProps[]
+}) => {
+  if (!grid.incrementNumberField) return null
+
+  const renderIncrementNumberField = (
+    incrementNumberFieldItem: ExtendedIncrementNumberFieldProps,
+    index: number
+  ): columnconfig => {
+    const {
+      columnconfig: itemColumnConfig,
+      cellconfig,
+      ...restProps
+    } = incrementNumberFieldItem
+
+    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: (
+        <IncrementNumberField
+          key={`increment-number-field-${index}`}
+          {...restProps}
+        />
+      ),
+    }
+
+    return mergedConfig
+  }
+
+  if (Array.isArray(grid.incrementNumberField)) {
+    return grid.incrementNumberField.map(renderIncrementNumberField)
+  } else {
+    return [renderIncrementNumberField(grid.incrementNumberField, 0)]
+  }
+}
+
+export default useIncrementNumberField

package/src/components/Content/Structure/numberField/useNumberField.tsx

@@ -0,0 +1,55 @@
+'use client'
+import React from 'react'
+import NumberField, { NumberFieldProps } from './../../../NumberField'
+import { columnconfig, cellconfig } from '../../../Grid'
+
+export interface ExtendedNumberFieldProps extends NumberFieldProps {
+  columnconfig?: Partial<columnconfig>
+  cellconfig?: cellconfig
+}
+
+const useNumberField = (grid: {
+  numberField?: ExtendedNumberFieldProps | ExtendedNumberFieldProps[]
+}) => {
+  if (!grid.numberField) return null
+
+  const renderNumberField = (
+    numberFieldItem: ExtendedNumberFieldProps,
+    index: number
+  ): columnconfig => {
+    const {
+      columnconfig: itemColumnConfig,
+      cellconfig,
+      ...restProps
+    } = numberFieldItem
+
+    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: <NumberField key={`number-field-${index}`} {...restProps} />,
+    }
+
+    return mergedConfig
+  }
+
+  if (Array.isArray(grid.numberField)) {
+    return grid.numberField.map(renderNumberField)
+  } else {
+    return [renderNumberField(grid.numberField, 0)]
+  }
+}
+
+export default useNumberField

package/src/components/Content/Structure/passwordField/usePasswordField.tsx

@@ -0,0 +1,57 @@
+'use client'
+import React from 'react'
+import PasswordField, { PasswordFieldProps } from './../../../PasswordField'
+import { columnconfig, cellconfig } from '../../../Grid'
+
+export interface ExtendedPasswordFieldProps extends PasswordFieldProps {
+  columnconfig?: Partial<columnconfig>
+  cellconfig?: cellconfig
+}
+
+const usePasswordField = (grid: {
+  passwordField?: ExtendedPasswordFieldProps | ExtendedPasswordFieldProps[]
+}) => {
+  if (!grid.passwordField) return null
+
+  const renderPasswordField = (
+    passwordFieldItem: ExtendedPasswordFieldProps,
+    index: number
+  ): columnconfig => {
+    const {
+      columnconfig: itemColumnConfig,
+      cellconfig,
+      ...restProps
+    } = passwordFieldItem
+
+    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: (
+        <PasswordField key={`password-field-${index}`} {...restProps} />
+      ),
+    }
+
+    return mergedConfig
+  }
+
+  if (Array.isArray(grid.passwordField)) {
+    return grid.passwordField.map(renderPasswordField)
+  } else {
+    return [renderPasswordField(grid.passwordField, 0)]
+  }
+}
+
+export default usePasswordField

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

@@ -0,0 +1,69 @@
+import React from 'react'
+import QRCodeComponent, { QRCodeProps } from '../../../../components/QRCode'
+import { columnconfig, cellconfig } from '../../../Grid'
+
+type ExtendedColumnConfig = Omit<columnconfig, 'component'> & {
+  component?: columnconfig['component']
+}
+
+export interface ExtendedQRCodeProps extends Omit<QRCodeProps, 'sx'> {
+  columnconfig?: ExtendedColumnConfig
+  cellconfig?: cellconfig
+}
+
+const useQRCode = (grid: {
+  qrcode?: ExtendedQRCodeProps | ExtendedQRCodeProps[]
+}): columnconfig | columnconfig[] | null => {
+  if (!grid.qrcode) return null
+
+  const renderQRCode = (
+    component: ExtendedQRCodeProps,
+    index: number
+  ): columnconfig => {
+    const {
+      value,
+      size,
+      title,
+      columnconfig: itemColumnConfig,
+      cellconfig,
+      ...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'
+      )
+    }
+
+    const mergedConfig: columnconfig = {
+      ...itemColumnConfig,
+      cellconfig: {
+        ...cellconfig,
+      },
+      component: (
+        <QRCodeComponent
+          key={`qrcode-${index}`}
+          value={value}
+          size={size}
+          title={title}
+          {...restProps}
+        />
+      ),
+    }
+
+    return mergedConfig
+  }
+
+  if (Array.isArray(grid.qrcode)) {
+    return grid.qrcode.map(renderQRCode)
+  } else {
+    return renderQRCode(grid.qrcode, 0)
+  }
+}
+
+export default useQRCode

package/src/components/Content/Structure/searchbar/useSearchbar.tsx

@@ -0,0 +1,55 @@
+'use client'
+import React from 'react'
+import Searchbar, { SearchbarProps } from './../../../Searchbar'
+import { columnconfig, cellconfig } from '../../../Grid'
+
+export interface ExtendedSearchbarProps extends SearchbarProps {
+  columnconfig?: Partial<columnconfig>
+  cellconfig?: cellconfig
+}
+
+const useSearchbar = (grid: {
+  searchbar?: ExtendedSearchbarProps | ExtendedSearchbarProps[]
+}) => {
+  if (!grid.searchbar) return null
+
+  const renderSearchbar = (
+    searchbarItem: ExtendedSearchbarProps,
+    index: number
+  ): columnconfig => {
+    const {
+      columnconfig: itemColumnConfig,
+      cellconfig,
+      ...restProps
+    } = searchbarItem
+
+    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: <Searchbar key={`searchbar-${index}`} {...restProps} />,
+    }
+
+    return mergedConfig
+  }
+
+  if (Array.isArray(grid.searchbar)) {
+    return grid.searchbar.map(renderSearchbar)
+  } else {
+    return [renderSearchbar(grid.searchbar, 0)]
+  }
+}
+
+export default useSearchbar

package/src/components/Content/Structure/textfield/useTextField.tsx

@@ -0,0 +1,84 @@
+import React from 'react'
+import TextField, {
+  CustomTextFieldProps,
+} from '../../../../components/TextField'
+import { columnconfig, cellconfig } from '../../../Grid'
+
+type ExtendedColumnConfig = Omit<columnconfig, 'component'> & {
+  component?: columnconfig['component']
+}
+
+export interface ExtendedTextFieldProps
+  extends Omit<CustomTextFieldProps, 'columnconfig'> {
+  columnconfig?: ExtendedColumnConfig
+  cellconfig?: cellconfig
+}
+
+const useTextField = (grid: {
+  textfield?: ExtendedTextFieldProps | ExtendedTextFieldProps[]
+}): columnconfig | columnconfig[] | null => {
+  if (!grid.textfield) return null
+
+  const renderTextField = (
+    component: ExtendedTextFieldProps,
+    index: number
+  ): columnconfig => {
+    const {
+      name,
+      label,
+      placeholder,
+      value,
+      onChange,
+      onFocus,
+      onBlur,
+      error,
+      InputProps,
+      columnconfig: itemColumnConfig,
+      cellconfig,
+      ...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'
+      )
+    }
+
+    const mergedConfig: columnconfig = {
+      ...itemColumnConfig,
+      cellconfig: {
+        ...cellconfig,
+      },
+      component: (
+        <TextField
+          key={`textfield-${index}`}
+          name={name}
+          label={label}
+          placeholder={placeholder}
+          value={value}
+          onChange={onChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          error={error}
+          InputProps={InputProps}
+          {...restProps}
+        />
+      ),
+    }
+
+    return mergedConfig
+  }
+
+  if (Array.isArray(grid.textfield)) {
+    return grid.textfield.map(renderTextField)
+  } else {
+    return renderTextField(grid.textfield, 0)
+  }
+}
+
+export default useTextField

package/src/components/Content/index.tsx

@@ -5,9 +5,6 @@ import CustomGrid, { columnconfig, gridconfig } from '../../components/Grid'
 import useGridTypography, {
   ExtendedTypographyProps as TypographyProps,
 } from './Structure/typography/useGridTypography'
-import useStyledComponent, {
-  ExtendedStyledComponentProps,
-} from '../../components/Content/Structure/styledcomponent/useStyledComponent'
 import useGridRadioGroup, {
   ExtendedRadioGroupProps,
 } from './Structure/radiogroup/useRadioGroup'
@@ -38,6 +35,28 @@ import useCard, {
 import useCodeCopy, {
   ExtendedCodeCopyProps,
 } from './../../components/Content/Structure/codecopy/useCodeCopy'
+import useTextField, {
+  ExtendedTextFieldProps,
+} from './Structure/textfield/useTextField'
+import useDateField, {
+  ExtendedDateFieldProps,
+} from './Structure/datefield/useDateField'
+import useDropdown, {
+  ExtendedDropdownProps,
+} from './Structure/dropdown/useDropdown'
+import useIncrementNumberField, {
+  ExtendedIncrementNumberFieldProps,
+} from './Structure/incremementNumberField/useIncremementNumberField'
+import useSearchbar, {
+  ExtendedSearchbarProps,
+} from './Structure/searchbar/useSearchbar'
+import useNumberField, {
+  ExtendedNumberFieldProps,
+} from './Structure/numberField/useNumberField'
+import usePasswordField, {
+  ExtendedPasswordFieldProps,
+} from './Structure/passwordField/usePasswordField'
+import useQRCode, { ExtendedQRCodeProps } from './Structure/qrcode/useQRCode'
 
 /**
  * Props for the ContentSection component.
@@ -52,9 +71,6 @@ export interface ContentSectionProps {
       | ExtendedConfirmationCodeInputsProps
       | ExtendedConfirmationCodeInputsProps[]
     typography?: TypographyProps | TypographyProps[]
-    styledcomponent?:
-      | ExtendedStyledComponentProps
-      | ExtendedStyledComponentProps[]
     radiogroup?: ExtendedRadioGroupProps | ExtendedRadioGroupProps[]
     link?: LinkProps | LinkProps[]
     button?: ExtendedButtonProps | ExtendedButtonProps[]
@@ -64,6 +80,16 @@ export interface ContentSectionProps {
     transferlist?: ExtendedTransferListProps | ExtendedTransferListProps[]
     card?: ExtendedCardProps | ExtendedCardProps[]
     codecopy?: ExtendedCodeCopyProps | ExtendedCodeCopyProps[]
+    textfield?: ExtendedTextFieldProps | ExtendedTextFieldProps[]
+    datefield?: ExtendedDateFieldProps | ExtendedDateFieldProps[]
+    dropdown?: ExtendedDropdownProps | ExtendedDropdownProps[]
+    incrementNumberField?:
+      | ExtendedIncrementNumberFieldProps
+      | ExtendedIncrementNumberFieldProps[]
+    searchbar?: ExtendedSearchbarProps | ExtendedSearchbarProps[]
+    numberField?: ExtendedNumberFieldProps | ExtendedNumberFieldProps[]
+    passwordField?: ExtendedPasswordFieldProps | ExtendedPasswordFieldProps[]
+    qrcode?: ExtendedQRCodeProps | ExtendedQRCodeProps[]
   }>
   width?: number
 }
@@ -90,7 +116,6 @@ const RenderContent: React.FC<
 
   // Add configurations for each content type
   addToColumnConfigs(useGridTypography(props))
-  addToColumnConfigs(useStyledComponent(props))
   addToColumnConfigs(useGridRadioGroup(props))
   addToColumnConfigs(
     useConfirmationInput({ confirmationcodeinput: props.confirmationcodeinput })
@@ -103,6 +128,18 @@ const RenderContent: React.FC<
   addToColumnConfigs(useTransferList(props))
   addToColumnConfigs(useCard(props))
   addToColumnConfigs(useCodeCopy(props))
+  addToColumnConfigs(useTextField(props))
+  addToColumnConfigs(useDateField(props))
+  addToColumnConfigs(useDropdown(props))
+  addToColumnConfigs(
+    useIncrementNumberField({
+      incrementNumberField: props.incrementNumberField,
+    })
+  )
+  addToColumnConfigs(useSearchbar(props))
+  addToColumnConfigs(useNumberField({ numberField: props.numberField }))
+  addToColumnConfigs(usePasswordField({ passwordField: props.passwordField }))
+  addToColumnConfigs(useQRCode({ qrcode: props.qrcode }))
 
   const updatedGridConfig: gridconfig = {
     ...grid.gridconfig,

package/src/components/DateField/index.tsx

@@ -0,0 +1,112 @@
+'use client'
+import React, { useState, useRef } from 'react'
+import { TextField, InputAdornment, TextFieldProps } from '@mui/material'
+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'
+
+export interface DateFieldProps extends Omit<TextFieldProps, 'onChange'> {
+  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,
+  },
+}))
+
+const DateField: React.FC<DateFieldProps> = ({
+  onChange,
+  backgroundcolor,
+  outlinecolor,
+  fontcolor,
+  label = 'Select Date Range',
+  ...rest
+}) => {
+  const [dateRange, setDateRange] = useState<[Date | null, Date | null]>([
+    null,
+    null,
+  ])
+  const datePickerRef = useRef<DatePicker>(null)
+
+  const handleChange = (dates: [Date | null, Date | null]) => {
+    setDateRange(dates)
+    onChange?.()
+  }
+
+  const formatDateRange = (range: [Date | null, Date | null]) => {
+    const [start, end] = range
+    if (start && end) {
+      return `${start.toLocaleDateString()} - ${end.toLocaleDateString()}`
+    } else if (start) {
+      return start.toLocaleDateString()
+    }
+    return ''
+  }
+
+  const openDatePicker = () => {
+    if (datePickerRef.current) {
+      datePickerRef.current.setOpen(true)
+    }
+  }
+
+  return (
+    <StyledTextField
+      label={label}
+      value={formatDateRange(dateRange)}
+      InputProps={{
+        endAdornment: (
+          <InputAdornment position="end">
+            <CalendarTodayIcon />
+          </InputAdornment>
+        ),
+        readOnly: true,
+      }}
+      backgroundcolor={backgroundcolor}
+      outlinecolor={outlinecolor}
+      fontcolor={fontcolor}
+      onClick={openDatePicker}
+      {...rest}
+    >
+      <DatePicker
+        ref={datePickerRef}
+        selectsRange={true}
+        startDate={dateRange[0] || undefined}
+        endDate={dateRange[1] || undefined}
+        onChange={(update: [Date | null, Date | null]) => {
+          handleChange(update)
+        }}
+        customInput={<input style={{ display: 'none' }} />}
+      />
+    </StyledTextField>
+  )
+}
+
+export default DateField

package/src/components/Dropdown/index.tsx

@@ -0,0 +1,91 @@
+import React, { useState } from 'react'
+import {
+  Select,
+  MenuItem,
+  FormControl,
+  InputLabel,
+  SelectChangeEvent,
+} from '@mui/material'
+import { styled } from '@mui/material/styles'
+
+export interface DropdownProps {
+  label: string
+  options: string[]
+  defaultOption?: string
+  onChange?: () => void
+  backgroundcolor?: string
+  outlinecolor?: string
+  fontcolor?: string
+  shrunkfontcolor?: string
+}
+
+const StyledFormControl = styled(FormControl)<{
+  backgroundcolor?: string
+  outlinecolor?: string
+}>(({ theme, backgroundcolor, outlinecolor }) => ({
+  width: '100%',
+  '& .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,
+    },
+  },
+}))
+
+const StyledInputLabel = styled(InputLabel)<{ shrunkfontcolor?: string }>(
+  ({ theme, shrunkfontcolor }) => ({
+    '&.Mui-focused': {
+      color: shrunkfontcolor || theme.palette.primary.main,
+    },
+  })
+)
+
+const Dropdown: React.FC<DropdownProps> = ({
+  label,
+  options,
+  defaultOption,
+  onChange,
+  backgroundcolor,
+  outlinecolor,
+  fontcolor,
+  shrunkfontcolor,
+}) => {
+  const [selectedValue, setSelectedValue] = useState(defaultOption || '')
+
+  const handleChange = (event: SelectChangeEvent) => {
+    const newValue = event.target.value as string
+    setSelectedValue(newValue)
+    onChange?.()
+  }
+
+  return (
+    <StyledFormControl
+      backgroundcolor={backgroundcolor}
+      outlinecolor={outlinecolor}
+    >
+      <StyledInputLabel shrunkfontcolor={shrunkfontcolor}>
+        {label}
+      </StyledInputLabel>
+      <Select
+        value={selectedValue}
+        onChange={handleChange}
+        label={label}
+        sx={{ color: fontcolor }}
+      >
+        {options.map(option => (
+          <MenuItem key={option} value={option}>
+            {option}
+          </MenuItem>
+        ))}
+      </Select>
+    </StyledFormControl>
+  )
+}
+
+export default Dropdown

package/src/components/Form/Popup/index.tsx

@@ -66,7 +66,7 @@ const PopupForm: React.FC<PopupFormProps> = ({
       grid: {
         gridconfig: {
           gridname: 'formHeader',
-          marginbottom: 1,
+          marginbottom: 0.5,
           gridwidth: '100%',
         },
       },