goobs-frontend 0.8.13 → 0.8.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.8.13",
+  "version": "0.8.15",
   "type": "module",
   "description": "A comprehensive React-based UI library built on Material-UI, offering a wide range of customizable components including grids, typography, buttons, cards, forms, navigation, pricing tables, steppers, tooltips, accordions, and more. Designed for building responsive and consistent user interfaces with advanced features like form validation, theming, and code syntax highlighting.",
   "license": "MIT",
@@ -22,13 +22,13 @@
     "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@mui/icons-material": "^6.2.0",
-    "@mui/material": "^6.2.0",
+    "@mui/icons-material": "^6.3.0",
+    "@mui/material": "^6.3.0",
     "@types/lodash": "^4.17.13",
-    "highlight.js": "^11.10.0",
-    "jotai": "^2.10.3",
+    "highlight.js": "^11.11.1",
+    "jotai": "^2.11.0",
     "lodash": "^4.17.21",
-    "next": "15.1.0",
+    "next": "15.1.3",
     "otplib": "^12.0.1",
     "react-datepicker": "^7.5.0",
     "react-qr-code": "^2.0.15",
@@ -38,14 +38,14 @@
     "slate-react": "^0.112.0"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "^15.1.0",
+    "@next/eslint-plugin-next": "^15.1.3",
     "@types/node": "^22.10.2",
-    "@types/react": "19.0.1",
-    "@types/react-dom": "^19.0.1",
-    "@typescript-eslint/eslint-plugin": "^8.18.0",
-    "@typescript-eslint/parser": "^8.18.0",
-    "eslint": "^9.16.0",
-    "eslint-config-next": "^15.1.0",
+    "@types/react": "19.0.2",
+    "@types/react-dom": "^19.0.2",
+    "@typescript-eslint/eslint-plugin": "^8.19.0",
+    "@typescript-eslint/parser": "^8.19.0",
+    "eslint": "^9.17.0",
+    "eslint-config-next": "^15.1.3",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "prettier": "^3.4.2",

package/src/components/Button/index.tsx

@@ -29,35 +29,52 @@ const StyledButton = styled(Button, {
   backgroundcolor?: string
   iconlocation?: 'left' | 'right' | 'above'
   fontlocation?: 'left' | 'center' | 'right'
-}>(({ backgroundcolor, iconlocation, fontlocation }) => ({
-  minWidth: 'auto',
-  width: '100%',
-  height: '40px',
-  padding: '8px 16px',
-  display: 'flex',
-  flexDirection: iconlocation === 'above' ? 'column' : 'row',
-  alignItems: 'center',
-  justifyContent:
-    fontlocation === 'left'
-      ? 'flex-start'
-      : fontlocation === 'right'
-        ? 'flex-end'
-        : 'center',
-  gap: '8px',
-  ...(backgroundcolor && {
-    backgroundColor: backgroundcolor,
-    '&:hover': {
+}>(({ backgroundcolor, iconlocation, fontlocation }) => {
+  // Determine styles based on backgroundcolor
+  let backgroundStyles = {}
+  if (backgroundcolor && backgroundcolor !== 'none') {
+    backgroundStyles = {
       backgroundColor: backgroundcolor,
-      opacity: 0.9,
+      '&:hover': {
+        backgroundColor: backgroundcolor,
+        opacity: 0.9,
+      },
+    }
+  } else if (backgroundcolor === 'none') {
+    // No background, behave like a text button
+    backgroundStyles = {
+      backgroundColor: 'transparent',
+      '&:hover': {
+        backgroundColor: 'transparent',
+        opacity: 0.9,
+      },
+    }
+  }
+
+  return {
+    minWidth: 'auto',
+    width: '100%',
+    height: '40px',
+    padding: '8px 16px',
+    display: 'flex',
+    flexDirection: iconlocation === 'above' ? 'column' : 'row',
+    alignItems: 'center',
+    justifyContent:
+      fontlocation === 'left'
+        ? 'flex-start'
+        : fontlocation === 'right'
+          ? 'flex-end'
+          : 'center',
+    gap: '8px',
+    ...backgroundStyles,
+    '& .MuiButton-startIcon': {
+      margin: 0,
     },
-  }),
-  '& .MuiButton-startIcon': {
-    margin: 0,
-  },
-  '& .MuiButton-endIcon': {
-    margin: 0,
-  },
-}))
+    '& .MuiButton-endIcon': {
+      margin: 0,
+    },
+  }
+})
 
 const StyledBox = styled(Box)({
   display: 'flex',

package/src/components/DataGrid/Footer/index.tsx

@@ -98,6 +98,7 @@ function CustomFooter({
               text="Manage Columns"
               fontvariant="merriparagraph"
               fontcolor="black"
+              backgroundcolor="none"
               icon={<ShowHideEyeIcon visible={true} />}
               iconcolor="black"
               iconlocation="left"

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

@@ -44,6 +44,7 @@ function FormDataGrid({ title, description, datagrid }: FormDataGridProps) {
             width: '100%',
             textAlign: 'left',
             fontFamily: 'Merriweather',
+            marginLeft: 2,
             fontSize: '1.5rem',
             fontWeight: 400,
             color: 'black',
@@ -57,6 +58,7 @@ function FormDataGrid({ title, description, datagrid }: FormDataGridProps) {
             textAlign: 'left',
             fontFamily: 'Merriweather',
             fontSize: '1.25rem',
+            marginLeft: 2,
             fontWeight: 400,
             color: 'black',
           }}

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

@@ -0,0 +1,163 @@
+'use client'
+import React, { FC } from 'react'
+import {
+  Accordion as MuiAccordion,
+  AccordionSummary,
+  AccordionDetails,
+  List,
+} from '@mui/material'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import { white } from '../../../../styles/palette'
+import { Typography } from '../../../Typography'
+
+interface MainNavComponentProps {
+  /**
+   * The label/title for this main navigation item.
+   */
+  title?: string
+
+  /**
+   * If `true`, we show an expand icon and child subNav items.
+   */
+  hasChildren: boolean
+
+  /**
+   * Which top-level nav titles are expanded
+   */
+  expandedNavs: string[]
+
+  /**
+   * Setter for expandedNavs
+   */
+  setExpandedNavs: React.Dispatch<React.SetStateAction<string[]>>
+
+  /**
+   * A callback for route or onClick triggers
+   */
+  onClick?: () => void
+
+  /**
+   * The nesting level for indentation
+   */
+  level: number
+
+  /**
+   * Child nodes (subNav) if `hasChildren` is true
+   */
+  children?: React.ReactNode
+
+  /**
+   * Hover color (not used in the example styling, but available if needed)
+   */
+  activeAndHoverColor?: string
+}
+
+const MainNavComponent: FC<MainNavComponentProps> = ({
+  title,
+  hasChildren,
+  expandedNavs,
+  setExpandedNavs,
+  onClick,
+  level,
+  children,
+}) => {
+  const isExpanded = expandedNavs.includes(title ?? '')
+
+  return (
+    <MuiAccordion
+      disableGutters
+      elevation={0}
+      square
+      expanded={isExpanded}
+      onChange={() => {
+        if (isExpanded) {
+          setExpandedNavs(expandedNavs.filter(t => t !== title))
+        } else {
+          setExpandedNavs([...expandedNavs, title ?? ''])
+        }
+      }}
+      sx={{
+        pl: 0,
+        backgroundColor: 'transparent',
+        '.MuiAccordionSummary-root': {
+          pl: 0,
+          whiteSpace: 'nowrap', // no wrapping
+        },
+        '&:before': {
+          display: 'none',
+        },
+      }}
+    >
+      <AccordionSummary
+        expandIcon={
+          hasChildren ? (
+            <ExpandMoreIcon
+              sx={{
+                color: 'transparent',
+              }}
+            />
+          ) : null
+        }
+        aria-controls="accordion-content"
+        id="accordion-header"
+        sx={{
+          boxSizing: 'border-box',
+          border: 'none',
+          py: '6px',
+          mt: 2,
+          ml: 3,
+          minHeight: 0,
+          height: '32px',
+          '& .MuiAccordionSummary-content': {
+            m: 0,
+            whiteSpace: 'nowrap', // keep text on one line
+          },
+          '&:hover': {
+            '& .MuiSvgIcon-root': {
+              color: white.main,
+            },
+          },
+          '&.Mui-expanded': {
+            '& .MuiSvgIcon-root': {
+              color: white.main,
+            },
+          },
+        }}
+        onClick={() => {
+          if (onClick) onClick()
+        }}
+      >
+        <Typography
+          fontvariant="merrih5"
+          fontcolor={white.main}
+          text={title ?? ''}
+          marginLeft={4 * level}
+          sx={{
+            whiteSpace: 'nowrap', // no wrapping
+          }}
+        />
+      </AccordionSummary>
+
+      {hasChildren && (
+        <AccordionDetails
+          sx={{
+            border: 'none',
+            p: 0,
+            whiteSpace: 'nowrap',
+          }}
+        >
+          <List
+            sx={{
+              py: 0,
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {children}
+          </List>
+        </AccordionDetails>
+      )}
+    </MuiAccordion>
+  )
+}
+
+export default MainNavComponent

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

@@ -0,0 +1,156 @@
+'use client'
+import React, { FC } from 'react'
+import {
+  Accordion as MuiAccordion,
+  AccordionSummary,
+  AccordionDetails,
+  List,
+  MenuItem,
+} from '@mui/material'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import Link from 'next/link'
+import { white } from '../../../../styles/palette'
+import { Typography } from '../../../Typography'
+
+interface SubNavComponentProps {
+  title?: string
+  route?: string
+  trigger?: 'route' | 'onClick'
+  expandedSubnavs: string[]
+  setExpandedSubnavs: React.Dispatch<React.SetStateAction<string[]>>
+  activeAndHoverColor: string
+  onClose?: () => void
+  variant?: 'temporary' | 'permanent'
+  hasChildren: boolean
+  children?: React.ReactNode
+}
+
+const SubNavComponent: FC<SubNavComponentProps> = ({
+  title,
+  route,
+  trigger,
+  expandedSubnavs,
+  setExpandedSubnavs,
+  activeAndHoverColor,
+  onClose,
+  variant,
+  hasChildren,
+  children,
+}) => {
+  const isExpanded = expandedSubnavs.includes(title ?? '')
+
+  // If no children => a single route
+  if (!hasChildren) {
+    return (
+      <Link
+        key={title}
+        style={{ textDecoration: 'none', color: 'white' }}
+        href={route ?? ''}
+      >
+        <MenuItem
+          sx={{
+            color: white.main,
+            ml: '25px',
+            '&:hover': { backgroundColor: activeAndHoverColor },
+            '&:active': { backgroundColor: activeAndHoverColor },
+            whiteSpace: 'nowrap', // keep text on a single line
+          }}
+          onClick={() => {
+            if (trigger === 'route' && variant === 'temporary' && onClose) {
+              onClose()
+            }
+          }}
+        >
+          <Typography
+            fontvariant="merrih6"
+            text={title ?? ''}
+            fontcolor={white.main}
+          />
+        </MenuItem>
+      </Link>
+    )
+  }
+
+  // If we do have children => an accordion with view items
+  return (
+    <MuiAccordion
+      key={title}
+      disableGutters
+      elevation={0}
+      square
+      expanded={isExpanded}
+      onChange={() => {
+        if (isExpanded) {
+          setExpandedSubnavs(expandedSubnavs.filter(t => t !== title))
+        } else {
+          setExpandedSubnavs([...expandedSubnavs, title ?? ''])
+        }
+      }}
+      sx={{
+        pl: 0,
+        backgroundColor: 'transparent',
+        '.MuiAccordionSummary-root': {
+          pl: 0,
+          whiteSpace: 'nowrap',
+        },
+        '&:before': { display: 'none' },
+      }}
+    >
+      <AccordionSummary
+        expandIcon={
+          <ExpandMoreIcon
+            sx={{
+              color: 'transparent',
+            }}
+          />
+        }
+        aria-controls="accordion-content"
+        id="accordion-header"
+        sx={{
+          boxSizing: 'border-box',
+          border: 'none',
+          py: '6px',
+          mt: 0,
+          ml: '8px',
+          minHeight: 0,
+          height: '32px',
+          '& .MuiAccordionSummary-content': {
+            m: 0,
+            whiteSpace: 'nowrap',
+          },
+          '&:hover': {
+            '& .MuiSvgIcon-root': {
+              color: white.main,
+            },
+          },
+          '&.Mui-expanded': {
+            '& .MuiSvgIcon-root': {
+              color: white.main,
+            },
+          },
+        }}
+      >
+        <Typography
+          fontvariant="merrih6"
+          fontcolor={white.main}
+          text={title ?? ''}
+          marginLeft={4}
+          sx={{
+            whiteSpace: 'nowrap',
+          }}
+        />
+      </AccordionSummary>
+      <AccordionDetails
+        sx={{
+          border: 'none',
+          p: 0,
+          whiteSpace: 'nowrap',
+        }}
+      >
+        <List sx={{ py: 0, whiteSpace: 'nowrap' }}>{children}</List>
+      </AccordionDetails>
+    </MuiAccordion>
+  )
+}
+
+export default SubNavComponent

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

@@ -0,0 +1,75 @@
+'use client'
+import React, { FC } from 'react'
+import { MenuItem } from '@mui/material'
+import Link from 'next/link'
+import { semiTransparentWhite, white } from '../../../../styles/palette'
+import { Typography } from '../../../Typography'
+
+interface ViewNavProps {
+  title?: string
+  route?: string
+  trigger?: 'route' | 'onClick'
+  onClick?: () => void
+  level: number
+  activeAndHoverColor?: string
+  onClose?: () => void
+  variant?: 'temporary' | 'permanent'
+}
+
+const ViewNav: FC<ViewNavProps> = ({
+  title,
+  route,
+  trigger,
+  onClick,
+  level,
+  activeAndHoverColor = semiTransparentWhite.main,
+  onClose,
+  variant,
+}) => {
+  return (
+    <Link
+      key={title}
+      href={route ?? ''}
+      style={{
+        textDecoration: 'none',
+        color: 'white',
+        whiteSpace: 'nowrap', // keep text in one line
+      }}
+      onClick={() => {
+        if (trigger === 'route' && variant === 'temporary' && onClose) {
+          onClose()
+        } else if (trigger === 'onClick' && onClick) {
+          onClick()
+          if (variant === 'temporary' && onClose) {
+            onClose()
+          }
+        }
+      }}
+    >
+      <MenuItem
+        sx={{
+          color: white.main,
+          pl: level + 6,
+          whiteSpace: 'nowrap',
+          '&:hover': {
+            backgroundColor: activeAndHoverColor,
+          },
+          '&:active': {
+            backgroundColor: activeAndHoverColor,
+          },
+        }}
+      >
+        <Typography
+          fontvariant="merriparagraph"
+          text={title ?? ''}
+          fontcolor={white.main}
+          sx={{
+            whiteSpace: 'nowrap',
+          }}
+        />
+      </MenuItem>
+    </Link>
+  )
+}
+
+export default ViewNav