goobs-frontend 0.8.8 → 0.8.9

package/src/components/Grid/index.tsx

@@ -4,15 +4,10 @@ import React from 'react'
 import Grid2, { Grid2Props } from '@mui/material/Grid2'
 import { Box, useMediaQuery, useTheme } from '@mui/material'
 
-/** Defines the possible alignment options for grid content */
 export type Alignment = 'left' | 'center' | 'right' | 'inherit' | 'justify'
-
-/** Defines the possible border styles for grid cells */
 export type BorderProp = 'none' | 'solid'
+export type WrapProp = 'nowrap' | 'wrap'
 
-/**
- * Configuration for individual columns within the grid
- */
 export interface columnconfig {
   row: number
   column: number
@@ -31,9 +26,6 @@ export interface columnconfig {
   computerwidth?: string
 }
 
-/**
- * Configuration for the overall grid
- */
 export interface gridconfig {
   gridname?: string
   alignment?: Alignment
@@ -45,18 +37,12 @@ export interface gridconfig {
   bordercolor?: string
 }
 
-/**
- * Props for the CustomGrid component
- */
 export interface CustomGridProps extends Grid2Props {
   gridconfig?: gridconfig
   columnconfig?: columnconfig[]
   cellconfig?: cellconfig
 }
 
-/**
- * Configuration for individual cells within the grid
- */
 export interface cellconfig {
   border?: BorderProp
   minHeight?: string
@@ -65,27 +51,22 @@ export interface cellconfig {
   mobilewidth?: string
   tabletwidth?: string
   computerwidth?: string
+  borderColor?: string
+  backgroundColor?: string
+  onClick?: () => void
+  wrap?: WrapProp
 }
 
-/**
- * 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
 }) => {
-  // Extract grid configuration values
   const gridConfigValues = Array.isArray(gridconfig)
     ? gridconfig[0]
     : gridconfig
 
-  // Determine grid justification based on alignment
   const gridJustifyContent =
     gridConfigValues?.alignment === 'left'
       ? 'flex-start'
@@ -93,7 +74,6 @@ const CustomGrid: React.FC<CustomGridProps> = ({
         ? 'flex-end'
         : 'center'
 
-  // Set up responsive breakpoints
   const theme = useTheme()
   const isMobile = useMediaQuery(theme.breakpoints.between(0, 767))
   const isTablet = useMediaQuery(theme.breakpoints.between(768, 1023))
@@ -101,7 +81,6 @@ const CustomGrid: React.FC<CustomGridProps> = ({
 
   const minGridWidth = '300px'
 
-  // Calculate the number of rows based on the columnconfig
   const rows = Math.max(...(columnconfig || []).map(c => c.row || 1))
 
   return (
@@ -110,21 +89,35 @@ const CustomGrid: React.FC<CustomGridProps> = ({
       display="flex"
       justifyContent={gridJustifyContent}
       minWidth={minGridWidth}
+      sx={{
+        borderSpacing: 0,
+        borderCollapse: 'collapse',
+        padding: 0,
+        margin: 0,
+        '& > *': {
+          border: 'none !important',
+          padding: 0,
+          margin: 0,
+        },
+      }}
     >
       <Box
-        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"
+        sx={{
+          padding: 0,
+          margin: 0,
+          '& > *': {
+            border: 'none !important',
+            padding: 0,
+            margin: 0,
+          },
+        }}
         {...rest}
       >
         {Array.from({ length: rows }).map((_, rowIndex) => {
-          // Calculate the number of columns in the current row
           const columns = Math.max(
             ...(columnconfig || [])
               .filter(c => c.row === rowIndex + 1)
@@ -137,42 +130,50 @@ const CustomGrid: React.FC<CustomGridProps> = ({
               container
               alignItems="center"
               display="flex"
-              justifyContent="center"
+              justifyContent="flex-start"
+              spacing={0}
               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%',
+                gap: 0,
+                padding: 0,
+                margin: 0,
+                border: 'none',
+                '& > *': {
+                  border: 'none !important',
+                  padding: 0,
+                  margin: 0,
+                },
               }}
             >
               {Array.from({ length: columns }).map((_, columnIndex) => {
-                // Get the current column configuration
                 const currentColumnConfig = (columnconfig || []).find(
                   c => c.row === rowIndex + 1 && c.column === columnIndex + 1
                 )
 
-                // Determine the column width based on screen size
-                const columnWidth = isMobile
-                  ? currentColumnConfig?.mobilewidth ||
-                    currentColumnConfig?.columnwidth ||
-                    `${100 / columns}%`
-                  : isTablet
-                    ? currentColumnConfig?.tabletwidth ||
+                const currentCellConfig =
+                  currentColumnConfig?.cellconfig || cellconfig
+
+                const shouldWrap = currentCellConfig?.wrap !== 'nowrap'
+
+                const hasFixedWidth = currentCellConfig?.width !== undefined
+                const columnWidth = hasFixedWidth
+                  ? currentCellConfig.width
+                  : isMobile
+                    ? currentColumnConfig?.mobilewidth ||
                       currentColumnConfig?.columnwidth ||
                       `${100 / columns}%`
-                    : isComputer
-                      ? currentColumnConfig?.computerwidth ||
+                    : isTablet
+                      ? currentColumnConfig?.tabletwidth ||
                         currentColumnConfig?.columnwidth ||
                         `${100 / columns}%`
-                      : currentColumnConfig?.columnwidth || `${100 / columns}%`
+                      : isComputer
+                        ? currentColumnConfig?.computerwidth ||
+                          currentColumnConfig?.columnwidth ||
+                          `${100 / columns}%`
+                        : currentColumnConfig?.columnwidth ||
+                          `${100 / columns}%`
 
-                // Determine justification of column content
                 const justifyContent =
                   currentColumnConfig?.alignment === 'left'
                     ? 'flex-start'
@@ -180,71 +181,52 @@ const CustomGrid: React.FC<CustomGridProps> = ({
                       ? 'flex-end'
                       : 'center'
 
-                // Get current cell configuration
-                const currentCellConfig =
-                  currentColumnConfig?.cellconfig || cellconfig
-
-                // Determine if cell has a border
-                const hasBorder = currentCellConfig?.border === 'solid'
-
-                // Determine cell width and responsive widths
-                const cellWidth = currentCellConfig?.width || '100%'
-                const mobileWidth = currentCellConfig?.mobilewidth || '100%'
-                const tabletWidth = currentCellConfig?.tabletwidth || '100%'
-                const computerWidth = currentCellConfig?.computerwidth || '100%'
-
                 return (
                   <Grid2
                     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',
+                      position: 'relative',
+                      flexGrow: hasFixedWidth ? 0 : 1,
+                      flexShrink: hasFixedWidth ? 0 : 1,
+                      flexBasis: hasFixedWidth ? columnWidth : 'auto',
+                      padding: 0,
+                      margin: 0,
+                      border: 'none',
+                      '& > *': {
+                        border: 'none !important',
+                        padding: 0,
+                        margin: 0,
+                      },
                     }}
                   >
                     <Box
+                      onClick={currentCellConfig?.onClick}
                       sx={{
-                        borderRight: hasBorder
-                          ? 'var(--Grid-borderWidth) solid'
-                          : 'none',
-                        borderBottom: hasBorder
-                          ? 'var(--Grid-borderWidth) solid'
-                          : 'none',
-                        borderColor: 'divider',
+                        backgroundColor: currentCellConfig?.backgroundColor,
                         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%',
+                        overflow: 'hidden',
+                        width: '100%',
+                        position: 'relative',
+                        zIndex: currentCellConfig?.backgroundColor ? 1 : 0,
+                        flexGrow: 1,
+                        padding: 0,
+                        margin: 0,
+                        boxSizing: 'border-box',
+                        whiteSpace: shouldWrap ? 'normal' : 'nowrap',
+                        textOverflow: shouldWrap ? 'clip' : 'ellipsis',
+                        border: 'none',
+                        outline: 'none',
+                        '&::before, &::after': {
+                          display: 'none',
+                        },
                       }}
                     >
                       {React.isValidElement(currentColumnConfig?.component)

package/src/components/Nav/VerticalVariant/index.tsx

@@ -380,17 +380,21 @@ function VerticalVariant({
           </Box>
         )}
         {(showDropdown || showSearchbar) && (
-          <Stack mt={1} spacing={1}>
+          <Stack mt={2} spacing={1}>
             {showDropdown && (
-              <Dropdown
-                label={dropdownLabel}
-                options={navOptions}
-                backgroundcolor={white.main}
-                outlinecolor="none"
-                fontcolor={black.main}
-                shrunkfontcolor={white.main}
-                onChange={handleDropdownChange}
-              />
+              <Box mt="2px">
+                <Dropdown
+                  label={dropdownLabel}
+                  options={navOptions}
+                  backgroundcolor={white.main}
+                  outlinecolor="none"
+                  fontcolor={black.main}
+                  shrunkfontcolor={white.main}
+                  unshrunkfontcolor={black.main}
+                  shrunklabelposition="aboveNotch"
+                  onChange={handleDropdownChange}
+                />
+              </Box>
             )}
             {showSearchbar && (
               <Searchbar

package/src/components/Toolbar/index.tsx

@@ -15,11 +15,18 @@ export interface ToolbarProps {
   buttons?: CustomButtonProps[]
   dropdowns?: DropdownProps[]
   searchbarProps?: Partial<SearchbarProps>
+  middleComponent?: React.ReactNode
 }
 
-function CustomToolbar({ buttons, dropdowns, searchbarProps }: ToolbarProps) {
+function CustomToolbar({
+  buttons,
+  dropdowns,
+  searchbarProps,
+  middleComponent,
+}: ToolbarProps) {
   const [checkboxWidth] = useState(45)
-  const toolbarHeight = 45
+  const toolbarHeight = 60
+  const buttonHeight = '45px'
 
   return (
     <Box
@@ -29,7 +36,7 @@ function CustomToolbar({ buttons, dropdowns, searchbarProps }: ToolbarProps) {
         display: 'flex',
         flexDirection: 'row',
         justifyContent: 'flex-start',
-        alignItems: 'stretch',
+        alignItems: 'center',
         height: `${toolbarHeight}px`,
         width: '100%',
       }}
@@ -39,7 +46,7 @@ function CustomToolbar({ buttons, dropdowns, searchbarProps }: ToolbarProps) {
         sx={{
           display: 'flex',
           flexDirection: 'row',
-          alignItems: 'stretch',
+          alignItems: 'center',
           height: '100%',
         }}
       >
@@ -58,8 +65,7 @@ function CustomToolbar({ buttons, dropdowns, searchbarProps }: ToolbarProps) {
         <Box
           sx={{
             display: 'flex',
-            alignItems: 'flex-end', // Changed from center to flex-end
-            paddingBottom: '13px', // Added padding to align with other elements
+            alignItems: 'center',
             gap: '10px',
             height: '100%',
             padding: '0 15px',
@@ -75,6 +81,7 @@ function CustomToolbar({ buttons, dropdowns, searchbarProps }: ToolbarProps) {
                 fontvariant="merriparagraph"
                 variant="contained"
                 onClick={button.onClick}
+                height={buttonHeight}
               />
             ))}
         </Box>
@@ -104,6 +111,20 @@ function CustomToolbar({ buttons, dropdowns, searchbarProps }: ToolbarProps) {
         />
       </Box>
 
+      {/* Middle component section */}
+      {middleComponent && (
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            height: '100%',
+            padding: '0 15px',
+          }}
+        >
+          {middleComponent}
+        </Box>
+      )}
+
       {/* Spacer to push dropdowns to the right */}
       <Box sx={{ flexGrow: 1 }} />
 
@@ -112,8 +133,7 @@ function CustomToolbar({ buttons, dropdowns, searchbarProps }: ToolbarProps) {
         <Box
           sx={{
             display: 'flex',
-            alignItems: 'flex-end', // Changed from center to flex-end
-            paddingBottom: '13px', // Added padding to align with other elements
+            alignItems: 'center',
             height: '100%',
             padding: '0 15px',
             gap: '10px',

package/src/components/Typography/index.tsx

@@ -4,7 +4,7 @@ import {
   Typography as MuiTypography,
   TypographyProps as MuiTypographyProps,
 } from '@mui/material'
-import React from 'react'
+import React, { JSX } from 'react'
 
 export type FontFamily = 'arapey' | 'inter' | 'merri'
 
@@ -26,6 +26,7 @@ export interface TypographyProps extends Omit<MuiTypographyProps, 'variant'> {
   fontvariant?: CustomTypographyVariant
   fontcolor?: string
   variant?: CustomTypographyVariant | MuiTypographyProps['variant']
+  children?: React.ReactNode
 }
 
 const arapeyStyles: Record<TypographyVariant, React.CSSProperties> = {
@@ -199,13 +200,14 @@ const merriStyles: Record<TypographyVariant, React.CSSProperties> = {
   },
 }
 
-export const Typography: React.FC<TypographyProps> = ({
+const Typography = ({
   text,
   fontcolor,
   fontvariant,
   variant,
+  children,
   ...rest
-}) => {
+}: TypographyProps): JSX.Element => {
   let variantStyle: React.CSSProperties = {}
   const actualVariant = fontvariant || variant
 
@@ -238,6 +240,7 @@ export const Typography: React.FC<TypographyProps> = ({
 
   return (
     <MuiTypography
+      component="span"
       style={{
         color: fontcolor,
         ...variantStyle,
@@ -245,9 +248,10 @@ export const Typography: React.FC<TypographyProps> = ({
       variant={actualVariant as MuiTypographyProps['variant']}
       {...rest}
     >
-      {text}
+      {text || children}
     </MuiTypography>
   )
 }
 
+export { Typography }
 export default Typography