goobs-frontend 0.7.53

package/src/components/Grid/index.tsx

@@ -0,0 +1,265 @@
+'use client'
+
+import React from 'react'
+import { Grid, Box, GridProps, useMediaQuery, useTheme } from '@mui/material'
+
+export type Alignment = 'left' | 'center' | 'right' | 'inherit' | 'justify'
+export type BorderProp = 'none' | 'solid'
+
+export interface columnconfig {
+  row?: number
+  column?: number
+  gridname?: string
+  alignment?: Alignment
+  margintop?: number
+  columnwidth?: string
+  marginbottom?: number
+  marginright?: number
+  marginleft?: number
+  component?: React.ReactNode
+  bordercolor?: string
+  cellconfig?: cellconfig
+  mobilewidth?: string
+  tabletwidth?: string
+  computerwidth?: string
+}
+
+export interface gridconfig {
+  gridname?: string
+  alignment?: Alignment
+  margintop?: number
+  marginbottom?: number
+  marginright?: number
+  marginleft?: number
+  gridwidth?: string
+  bordercolor?: string
+}
+
+export interface CustomGridProps extends GridProps {
+  gridconfig?: gridconfig
+  columnconfig?: columnconfig[]
+  cellconfig?: cellconfig
+}
+
+export interface cellconfig {
+  border?: BorderProp
+  minHeight?: string
+  maxHeight?: string
+  width?: string
+  mobilewidth?: string
+  tabletwidth?: string
+  computerwidth?: string
+}
+
+/**
+ * CustomGrid component renders a customizable grid layout with configurable rows and columns.
+ * It supports responsive design by adapting to different screen sizes (mobile, tablet, computer).
+ * @param props The props for the CustomGrid component.
+ * @returns The rendered CustomGrid component.
+ */
+const CustomGrid: React.FC<CustomGridProps> = ({
+  gridconfig,
+  columnconfig,
+  cellconfig,
+  ...rest
+}) => {
+  const gridConfigValues = Array.isArray(gridconfig)
+    ? gridconfig[0]
+    : gridconfig
+
+  const gridJustifyContent =
+    gridConfigValues?.alignment === 'left'
+      ? 'flex-start'
+      : gridConfigValues?.alignment === 'right'
+        ? '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))
+
+  const minGridWidth = '300px'
+
+  /**
+   * Calculate the number of rows based on the columnconfig.
+   */
+  const rows = Math.max(...(columnconfig || []).map(c => c.row || 1))
+
+  return (
+    <Box
+      width={gridConfigValues?.gridwidth || '100%'}
+      display="flex"
+      justifyContent={gridJustifyContent}
+      minWidth={minGridWidth}
+    >
+      <Box
+        // @ts-ignore
+        mt={gridConfigValues?.margintop || 0}
+        mb={gridConfigValues?.marginbottom || 0}
+        ml={gridConfigValues?.marginleft || 0}
+        mr={gridConfigValues?.marginright || 0}
+        width="100%"
+        height="100%"
+        display="flex"
+        flexDirection="column"
+        alignItems="center"
+        {...rest}
+      >
+        {Array.from({ length: rows }).map((_, rowIndex) => {
+          /**
+           * Calculate the number of columns in the current row based on the columnconfig.
+           */
+          const columns = Math.max(
+            ...(columnconfig || [])
+              .filter(c => c.row === rowIndex + 1)
+              .map(c => c.column || 1)
+          )
+
+          return (
+            <Grid
+              key={`row-${rowIndex}`}
+              container
+              alignItems="center"
+              display="flex"
+              justifyContent="center"
+              sx={{
+                marginTop:
+                  rowIndex === 0 ? gridConfigValues?.margintop || 0 : 0,
+                marginBottom:
+                  rowIndex === rows - 1
+                    ? gridConfigValues?.marginbottom || 0
+                    : 0,
+                marginLeft: gridConfigValues?.marginleft || 0,
+                marginRight: gridConfigValues?.marginright || 0,
+                flexGrow: 1,
+                width: '100%',
+              }}
+            >
+              {Array.from({ length: columns }).map((_, columnIndex) => {
+                /**
+                 * Get the current column configuration based on the row and column indices.
+                 */
+                const currentColumnConfig = (columnconfig || []).find(
+                  c => c.row === rowIndex + 1 && c.column === columnIndex + 1
+                )
+
+                /**
+                 * Determine the column width based on the screen size and configuration.
+                 */
+                const columnWidth = isMobile
+                  ? currentColumnConfig?.mobilewidth ||
+                    currentColumnConfig?.columnwidth ||
+                    `${100 / columns}%`
+                  : isTablet
+                    ? currentColumnConfig?.tabletwidth ||
+                      currentColumnConfig?.columnwidth ||
+                      `${100 / columns}%`
+                    : isComputer
+                      ? currentColumnConfig?.computerwidth ||
+                        currentColumnConfig?.columnwidth ||
+                        `${100 / columns}%`
+                      : currentColumnConfig?.columnwidth || `${100 / columns}%`
+
+                /**
+                 * Determine the justification of the column content based on the alignment configuration.
+                 */
+                const justifyContent =
+                  currentColumnConfig?.alignment === 'left'
+                    ? 'flex-start'
+                    : currentColumnConfig?.alignment === 'right'
+                      ? 'flex-end'
+                      : 'center'
+
+                /**
+                 * Get the current cell configuration based on the column configuration or the default cell configuration.
+                 */
+                const currentCellConfig =
+                  currentColumnConfig?.cellconfig || cellconfig
+
+                /**
+                 * Determine if the cell has a border based on the cell configuration.
+                 */
+                const hasBorder = currentCellConfig?.border === 'solid'
+
+                /**
+                 * Determine the cell width based on the cell configuration.
+                 */
+                const cellWidth = currentCellConfig?.width || '100%'
+
+                /**
+                 * Determine the cell widths for different screen sizes based on the cell configuration.
+                 */
+                const mobileWidth = currentCellConfig?.mobilewidth || '100%'
+                const tabletWidth = currentCellConfig?.tabletwidth || '100%'
+                const computerWidth = currentCellConfig?.computerwidth || '100%'
+
+                return (
+                  <Grid
+                    item
+                    key={`column-${columnIndex}`}
+                    sx={{
+                      display: 'flex',
+                      justifyContent,
+                      marginRight: currentColumnConfig?.marginright || 0,
+                      marginLeft: currentColumnConfig?.marginleft || 0,
+                      marginTop: currentColumnConfig?.margintop || 0,
+                      marginBottom: currentColumnConfig?.marginbottom || 0,
+                      width: columnWidth,
+                      '--Grid-borderWidth': hasBorder ? '1px' : '0',
+                      borderTop: hasBorder
+                        ? 'var(--Grid-borderWidth) solid'
+                        : 'none',
+                      borderLeft: hasBorder
+                        ? 'var(--Grid-borderWidth) solid'
+                        : 'none',
+                      borderColor: 'divider',
+                    }}
+                  >
+                    <Box
+                      sx={{
+                        borderRight: hasBorder
+                          ? 'var(--Grid-borderWidth) solid'
+                          : 'none',
+                        borderBottom: hasBorder
+                          ? 'var(--Grid-borderWidth) solid'
+                          : 'none',
+                        borderColor: 'divider',
+                        minHeight: currentCellConfig?.minHeight || 'auto',
+                        maxHeight: currentCellConfig?.maxHeight || 'none',
+                        height: currentCellConfig?.maxHeight || 'auto',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent,
+                        overflow: 'auto',
+                        width: cellWidth,
+                        minWidth: isMobile
+                          ? mobileWidth
+                          : isTablet
+                            ? tabletWidth
+                            : isComputer
+                              ? computerWidth
+                              : '100%',
+                        maxWidth: isMobile
+                          ? mobileWidth
+                          : isTablet
+                            ? tabletWidth
+                            : isComputer
+                              ? computerWidth
+                              : '100%',
+                      }}
+                    >
+                      {currentColumnConfig?.component || null}
+                    </Box>
+                  </Grid>
+                )
+              })}
+            </Grid>
+          )
+        })}
+      </Box>
+    </Box>
+  )
+}
+
+export default CustomGrid

package/src/components/Icons/Calendar.tsx

@@ -0,0 +1,21 @@
+// src/components/Icons/Calendar.tsx
+import React from 'react'
+import CalendarTodayIcon from '@mui/icons-material/CalendarToday'
+import { SvgIconProps } from '@mui/material/SvgIcon'
+
+const CalendarIcon: React.FC<SvgIconProps> = props => {
+  // Set a default size for the icon
+  const iconSize = '20px' // You can change this value to any size you want
+
+  return (
+    <CalendarTodayIcon
+      {...props}
+      style={{
+        fontSize: iconSize, // Set the size of the icon
+        ...props.style, // Allow for other styles to be applied if necessary
+      }}
+    />
+  )
+}
+
+export default CalendarIcon

package/src/components/Icons/DownArrowFilled.tsx

@@ -0,0 +1,9 @@
+// BlackArrowDropDownIcon.tsx
+import React from 'react'
+import ArrowDropDown from '@mui/icons-material/ArrowDropDown'
+
+const BlackArrowDropDownIcon: React.FC = () => {
+  return <ArrowDropDown style={{ color: 'black' }} />
+}
+
+export default BlackArrowDropDownIcon

package/src/components/Icons/Drag.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import DragIndicatorIcon from '@mui/icons-material/DragIndicator'
+
+const DragIcon = () => {
+  const iconStyle = { color: 'black' }
+  return <DragIndicatorIcon style={iconStyle} />
+}
+
+export default DragIcon

package/src/components/Icons/FavoriteIcon.tsx

@@ -0,0 +1,24 @@
+import React, { useState } from 'react'
+import { IconButton } from '@mui/material'
+import FavoriteIcon from '@mui/icons-material/Favorite'
+import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder'
+
+const FavoriteIconComponent: React.FC = () => {
+  const [isFavorite, setIsFavorite] = useState(false)
+
+  const handleFavoriteClick = () => {
+    setIsFavorite(!isFavorite)
+  }
+
+  return (
+    <IconButton onClick={handleFavoriteClick} size="small">
+      {isFavorite ? (
+        <FavoriteIcon style={{ color: 'red' }} />
+      ) : (
+        <FavoriteBorderIcon />
+      )}
+    </IconButton>
+  )
+}
+
+export default FavoriteIconComponent

package/src/components/Icons/Info.tsx

@@ -0,0 +1,12 @@
+import { SvgIcon, SvgIconProps } from '@mui/material'
+import React from 'react'
+
+const InfoIcon: React.FC<SvgIconProps> = props => {
+  return (
+    <SvgIcon viewBox="0 0 24 24" {...props}>
+      <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 17C11.45 17 11 16.55 11 16V12C11 11.45 11.45 11 12 11C12.55 11 13 11.45 13 12V16C13 16.55 12.55 17 12 17ZM13 9H11V7H13V9Z" />
+    </SvgIcon>
+  )
+}
+
+export default InfoIcon

package/src/components/Icons/Search.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import Search from '@mui/icons-material/Search'
+
+const SearchIcon: React.FC<{
+  size?: number | 'small' | 'medium' | 'large'
+  color?: string
+}> = ({ size = 'medium', color = 'black' }) => {
+  let fontSize = '20px'
+
+  if (typeof size === 'number') {
+    fontSize = `${size}px`
+  } else {
+    switch (size) {
+      case 'small':
+        fontSize = '16px'
+        break
+      case 'medium':
+        fontSize = '20px'
+        break
+      case 'large':
+        fontSize = '24px'
+        break
+    }
+  }
+
+  return <Search style={{ fontSize, color }} />
+}
+
+export default SearchIcon

package/src/components/Icons/ShowHideEye.tsx

@@ -0,0 +1,16 @@
+// src/components/Icons/ShowHideEyeIcon.tsx
+
+import React from 'react'
+import VisibilityIcon from '@mui/icons-material/Visibility'
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'
+
+const ShowHideEyeIcon = ({ visible }: { visible: boolean }) => {
+  const iconStyle = { color: 'black' }
+  return visible ? (
+    <VisibilityIcon style={iconStyle} />
+  ) : (
+    <VisibilityOffIcon style={iconStyle} />
+  )
+}
+
+export default ShowHideEyeIcon

package/src/components/RadioGroup/index.tsx

@@ -0,0 +1,96 @@
+import React from 'react'
+import {
+  Radio,
+  RadioGroup as MuiRadioGroup,
+  FormControlLabel,
+  FormControl,
+  FormLabel,
+} from '@mui/material'
+import { Typography } from './../../components/Typography'
+import { TypographyPropsVariantOverrides } from '@mui/material'
+
+export interface RadioOption {
+  value: string
+  label: string
+  fontColor?: string
+  fontVariant?: keyof TypographyPropsVariantOverrides
+}
+
+export interface RadioGroupProps {
+  label?: string
+  options: RadioOption[]
+  defaultValue?: string
+  name: string
+  labelFontVariant?: keyof TypographyPropsVariantOverrides
+  labelFontColor?: string
+  labelText?: string
+  onChange?: (value: string) => void
+}
+
+/**
+ * RadioGroup component renders a group of radio buttons with customizable options.
+ * It allows selecting a single value from a list of options.
+ * @param props The props for the RadioGroup component.
+ * @returns The rendered RadioGroup component.
+ */
+const RadioGroup: React.FC<RadioGroupProps> = ({
+  label,
+  options,
+  defaultValue,
+  name,
+  labelFontVariant,
+  labelFontColor,
+  labelText,
+  onChange,
+}) => {
+  /**
+   * handleChange function is called when the selected radio button changes.
+   * It invokes the onChange callback with the selected value.
+   * @param event The change event triggered by the radio button.
+   */
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    const selectedValue = event.target.value
+    if (onChange) {
+      onChange(selectedValue)
+    }
+  }
+
+  return (
+    <FormControl>
+      <FormLabel id={`${name}-label`} sx={{ marginBottom: '8px' }}>
+        <Typography
+          text={labelText || label}
+          fontcolor={labelFontColor}
+          fontvariant={
+            labelFontVariant as keyof TypographyPropsVariantOverrides
+          }
+        />
+      </FormLabel>
+      <MuiRadioGroup
+        aria-labelledby={`${name}-label`}
+        defaultValue={defaultValue}
+        name={name}
+        onChange={handleChange}
+      >
+        {options.map(option => (
+          <FormControlLabel
+            key={option.value}
+            value={option.value}
+            control={<Radio />}
+            label={
+              <Typography
+                text={option.label}
+                fontcolor={option.fontColor}
+                fontvariant={
+                  option.fontVariant as keyof TypographyPropsVariantOverrides
+                }
+              />
+            }
+          />
+        ))}
+      </MuiRadioGroup>
+    </FormControl>
+  )
+}
+
+export default RadioGroup

package/src/components/StyledComponent/adornments.tsx

@@ -0,0 +1,118 @@
+import React from 'react'
+import { InputAdornment, Button, Box } from '@mui/material'
+import SearchIcon from '../../components/Icons/Search'
+import ShowHideEyeIcon from '../../components/Icons/ShowHideEye'
+import DownArrowFilledIcon from '../../components/Icons/DownArrowFilled'
+import { AdornmentProps } from './index'
+
+/**
+ * StartAdornment component renders the start adornment for the input component.
+ * @param props The props for the StartAdornment component.
+ * @returns The start adornment component or null.
+ */
+const StartAdornment: React.FC<AdornmentProps> = props => {
+  const { componentvariant, iconcolor } = props
+
+  // Render the search icon for the search bar variant
+  if (componentvariant === 'searchbar') {
+    return (
+      <InputAdornment position="start">
+        <SearchIcon color={iconcolor} />
+      </InputAdornment>
+    )
+  }
+
+  return null
+}
+
+/**
+ * EndAdornment component renders the end adornment for the input component.
+ * @param props The props for the EndAdornment component.
+ * @returns The end adornment component or null.
+ */
+const EndAdornment: React.FC<AdornmentProps> = props => {
+  const {
+    componentvariant,
+    passwordVisible,
+    togglePasswordVisibility,
+    handleIncrement,
+    handleDecrement,
+  } = props
+
+  const adornmentStyle = {
+    cursor: 'pointer',
+  }
+
+  // Render the show/hide eye icon for the password variant
+  if (componentvariant === 'password' && togglePasswordVisibility) {
+    return (
+      <InputAdornment
+        position="end"
+        onClick={togglePasswordVisibility}
+        style={adornmentStyle}
+      >
+        <ShowHideEyeIcon visible={passwordVisible || false} />
+      </InputAdornment>
+    )
+  }
+  // Render the down arrow icon for the dropdown variant
+  else if (componentvariant === 'dropdown') {
+    return (
+      <InputAdornment position="end" style={adornmentStyle}>
+        <DownArrowFilledIcon />
+      </InputAdornment>
+    )
+  }
+  // Render the increment/decrement buttons for the splitbutton variant
+  else if (componentvariant === 'splitbutton') {
+    return (
+      <InputAdornment position="end">
+        <Button
+          sx={{
+            minWidth: '20px',
+            padding: 0,
+            height: '100%',
+            borderLeft: '1px solid #c4c4c4',
+            borderRadius: '0 4px 4px 0',
+            backgroundColor: '#f0f0f0',
+            color: 'black',
+            '&:hover': {
+              backgroundColor: '#e0e0e0',
+            },
+          }}
+        >
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+            }}
+          >
+            <Box
+              sx={{ fontSize: '10px', lineHeight: 1, cursor: 'pointer' }}
+              onClick={handleIncrement}
+            >
+              ▲
+            </Box>
+            <Box
+              sx={{ fontSize: '10px', lineHeight: 1, cursor: 'pointer' }}
+              onClick={handleDecrement}
+            >
+              ▼
+            </Box>
+          </Box>
+        </Button>
+      </InputAdornment>
+    )
+  }
+  // Render an empty end adornment for the search bar variant
+  else if (componentvariant === 'searchbar') {
+    return (
+      <InputAdornment position="end" style={adornmentStyle}></InputAdornment>
+    )
+  }
+
+  return null
+}
+
+export { StartAdornment, EndAdornment }