goobs-frontend 0.8.10 → 0.8.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.8.10",
+  "version": "0.8.12",
   "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",
@@ -19,17 +19,16 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@emotion/cache": "^11.13.5",
-    "@emotion/react": "^11.13.5",
-    "@emotion/styled": "^11.13.5",
-    "@mui/icons-material": "^6.1.10",
-    "@mui/material": "^6.1.10",
+    "@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",
     "@types/lodash": "^4.17.13",
-    "@types/react-datepicker": "^7.0.0",
     "highlight.js": "^11.10.0",
     "jotai": "^2.10.3",
     "lodash": "^4.17.21",
-    "next": "15.0.4",
+    "next": "15.1.0",
     "otplib": "^12.0.1",
     "react-datepicker": "^7.5.0",
     "react-qr-code": "^2.0.15",
@@ -39,14 +38,14 @@
     "slate-react": "^0.112.0"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "^15.0.4",
-    "@types/node": "^22.10.1",
+    "@next/eslint-plugin-next": "^15.1.0",
+    "@types/node": "^22.10.2",
     "@types/react": "19.0.1",
     "@types/react-dom": "^19.0.1",
-    "@typescript-eslint/eslint-plugin": "^8.17.0",
-    "@typescript-eslint/parser": "^8.17.0",
+    "@typescript-eslint/eslint-plugin": "^8.18.0",
+    "@typescript-eslint/parser": "^8.18.0",
     "eslint": "^9.16.0",
-    "eslint-config-next": "^15.0.4",
+    "eslint-config-next": "^15.1.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "prettier": "^3.4.2",

package/src/components/Accordion/index.tsx

@@ -6,39 +6,72 @@ import MuiAccordion, { AccordionProps } from '@mui/material/Accordion'
 import MuiAccordionSummary, {
   AccordionSummaryProps,
 } from '@mui/material/AccordionSummary'
-import MuiAccordionDetails from '@mui/material/AccordionDetails'
+import MuiAccordionDetails, {
+  AccordionDetailsProps,
+} from '@mui/material/AccordionDetails'
 import { ExpandMore } from '@mui/icons-material'
 import { black } from '../../styles/palette'
 
-/**
- * Custom styled Accordion component.
- * Wraps MUI's Accordion with custom styling and disables gutters by default.
- */
-const Accordion = styled((props: AccordionProps) => (
-  <MuiAccordion disableGutters {...props} />
-))({})
-
-/**
- * Custom styled AccordionSummary component.
- * Wraps MUI's AccordionSummary with custom styling and a custom expand icon.
- */
-const AccordionSummary = styled((props: AccordionSummaryProps) => (
-  <MuiAccordionSummary
-    expandIcon={<ExpandMore sx={{ color: black.main }} />}
-    {...props}
-  />
-))({
+type CustomAccordionProps = AccordionProps & {
+  children: React.ReactNode
+}
+
+type CustomAccordionSummaryProps = AccordionSummaryProps & {
+  children: React.ReactNode
+}
+
+type CustomAccordionDetailsProps = AccordionDetailsProps & {
+  children: React.ReactNode
+}
+
+const StyledAccordion = styled(MuiAccordion)({
+  '&.MuiAccordion-root': {
+    '&:before': {
+      display: 'none',
+    },
+  },
+})
+
+const StyledAccordionSummary = styled(MuiAccordionSummary)({
   fontSize: '20px',
   fontFamily: 'merriweather',
   fontWeight: 500,
 })
 
-/**
- * Custom styled AccordionDetails component.
- * Wraps MUI's AccordionDetails with custom padding based on the theme's spacing.
- */
-const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
+const StyledAccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
   padding: theme.spacing(2),
 }))
 
+function Accordion({ children, ...props }: CustomAccordionProps) {
+  return (
+    <StyledAccordion disableGutters {...props}>
+      {children}
+    </StyledAccordion>
+  )
+}
+
+function AccordionSummary({ children, ...props }: CustomAccordionSummaryProps) {
+  return (
+    <StyledAccordionSummary
+      expandIcon={<ExpandMore sx={{ color: black.main }} />}
+      {...props}
+    >
+      {children}
+    </StyledAccordionSummary>
+  )
+}
+
+function AccordionDetails({ children, ...props }: CustomAccordionDetailsProps) {
+  return <StyledAccordionDetails {...props}>{children}</StyledAccordionDetails>
+}
+
+Accordion.displayName = 'Accordion'
+AccordionSummary.displayName = 'AccordionSummary'
+AccordionDetails.displayName = 'AccordionDetails'
+
 export { Accordion, AccordionSummary, AccordionDetails }
+export type {
+  CustomAccordionProps,
+  CustomAccordionSummaryProps,
+  CustomAccordionDetailsProps,
+}

package/src/components/Button/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import React from 'react'
+import React, { JSX } from 'react'
 import { Button, Box, ButtonProps } from '@mui/material'
 import Typography from '../Typography'
 import { SvgIconProps } from '@mui/material/SvgIcon'
@@ -84,7 +84,7 @@ const ContentWrapper = styled(Box)<{
   gap: '8px',
 }))
 
-const CustomButton: React.FC<CustomButtonProps> = ({
+function CustomButton({
   text,
   variant = 'contained',
   fontvariant = 'merriparagraph',
@@ -101,7 +101,7 @@ const CustomButton: React.FC<CustomButtonProps> = ({
   fontlocation = 'center',
   sx,
   ...restProps
-}) => {
+}: CustomButtonProps): JSX.Element {
   const handleButtonClick = (
     event: React.MouseEvent<HTMLButtonElement>
   ): void => {
@@ -159,5 +159,4 @@ const CustomButton: React.FC<CustomButtonProps> = ({
   )
 }
 
-CustomButton.displayName = 'CustomButton'
 export default CustomButton

package/src/components/Card/index.tsx

@@ -1,4 +1,6 @@
-import React from 'react'
+'use client'
+
+import React, { JSX } from 'react'
 import { BoxProps } from '@mui/material'
 import { CustomStepperProps } from '../Stepper'
 import InventoryCard from './variants/inventory'
@@ -10,11 +12,7 @@ import DefaultCard from './variants/defaultconfig'
 import { columnconfig } from '../Grid'
 import { CustomButtonProps } from '../Button'
 
-/**
- * Props for the Card component.
- * Extends BoxProps from Material-UI and includes additional custom properties.
- */
-export interface CardProps extends BoxProps {
+type CardProps = Omit<BoxProps, 'children'> & {
   /** Title of the card */
   title?: string
   /** Whether to show an underline for the title */
@@ -124,11 +122,7 @@ export interface CardProps extends BoxProps {
   columnconfig?: columnconfig
 }
 
-/**
- * Card component that renders different card variants based on the provided props.
- * It supports various card types including default, inventory, pricing summary, product, and more.
- */
-const Card: React.FC<CardProps> = ({
+function Card({
   title,
   titleUnderline = true,
   body,
@@ -154,8 +148,7 @@ const Card: React.FC<CardProps> = ({
   productProps,
   productSummaryProps,
   ...rest
-}) => {
-  // Render the default card variant
+}: CardProps): JSX.Element | null {
   if (variant === 'default') {
     return (
       <DefaultCard
@@ -182,7 +175,6 @@ const Card: React.FC<CardProps> = ({
     )
   }
 
-  // Render the inventory card variant
   if (variant === 'inventory') {
     return (
       <InventoryCard
@@ -196,7 +188,6 @@ const Card: React.FC<CardProps> = ({
     )
   }
 
-  // Render the simple pricing summary card variant
   if (variant === 'pricingsummary') {
     return (
       <SimplePricingSummary
@@ -208,7 +199,6 @@ const Card: React.FC<CardProps> = ({
     )
   }
 
-  // Render the detailed pricing summary card variant
   if (variant === 'detailedpricingsummary') {
     return (
       <DetailedPricingSummary
@@ -220,14 +210,12 @@ const Card: React.FC<CardProps> = ({
     )
   }
 
-  // Render the product card variant
   if (variant === 'product') {
     return (
       <ProductCard width={width} height={height} {...productProps} {...rest} />
     )
   }
 
-  // Render the product summary card variant
   if (variant === 'productsummary') {
     return (
       <ProductSummaryCard
@@ -244,8 +232,10 @@ const Card: React.FC<CardProps> = ({
     )
   }
 
-  // Return null if no matching variant is found
   return null
 }
 
+Card.displayName = 'Card'
+
 export default Card
+export type { CardProps }

package/src/components/ComplexTextEditor/SimpleEditor/index.tsx

@@ -1,3 +1,5 @@
+// src\components\ComplexTextEditor\SimpleEditor.tsx
+
 import React from 'react'
 import { Box, TextField } from '@mui/material'
 

package/src/components/ComplexTextEditor/ToolbarButton/index.tsx

@@ -7,7 +7,7 @@ import { handleBoldClick, handleItalicClick } from '../utils/useMarkdownEditor'
 import { IconButton, IconButtonProps } from '@mui/material'
 import { InlineFormat, BlockFormat, AlignmentFormat } from '../types'
 
-interface ToolbarButtonProps extends IconButtonProps {
+export interface ToolbarButtonProps extends IconButtonProps {
   format?: InlineFormat | BlockFormat | AlignmentFormat
   children: React.ReactNode
   editor?: BaseEditor & ReactEditor & HistoryEditor

package/src/components/ComplexTextEditor/Toolbars/Markdown/index.tsx

@@ -6,6 +6,7 @@ import {
   SelectChangeEvent,
   Stack,
   Typography,
+  MenuItem,
 } from '@mui/material'
 import {
   Link,
@@ -22,19 +23,15 @@ import {
   FormatListNumbered,
   FormatListBulleted,
 } from '@mui/icons-material'
-import {
-  AlignmentButton,
-  AlignmentMenuItem,
-  TextType,
-  TextTypeMenuItem,
-} from '../Rich/index'
 import { BaseEditor } from 'slate'
 import { ReactEditor } from 'slate-react'
 import { HistoryEditor } from 'slate-history'
-import { AlignmentFormat } from '@/components/ComplexTextEditor/types'
+import { AlignmentFormat } from '../../types'
 
 type CustomEditor = BaseEditor & ReactEditor & HistoryEditor
 
+export type TextType = 'p' | 'h1' | 'h2' | 'h3'
+
 interface ToolbarMarkdownProps {
   editor?: CustomEditor
   handleBoldClick?: () => void
@@ -67,20 +64,8 @@ const ToolbarMarkdown: React.FC<ToolbarMarkdownProps> = ({
   }
 
   return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      <Stack
-        direction="row"
-        alignItems="center"
-        justifyContent="center"
-        spacing={1}
-      >
+    <Box>
+      <Stack direction="row" spacing={1}>
         {/* undo / redo */}
         <Box>
           <ToolbarButton buttonAction="undo" editor={editor}>
@@ -93,12 +78,6 @@ const ToolbarMarkdown: React.FC<ToolbarMarkdownProps> = ({
             onClick={onSwitchMode}
             markdownMode={markdownMode}
             setMarkdown={setMarkdown}
-            sx={{
-              fontSize: '14px',
-              borderRadius: '4px',
-              color: 'black',
-              border: '1px solid black',
-            }}
           >
             {switchModeLabel}
           </ToolbarButton>
@@ -108,145 +87,44 @@ const ToolbarMarkdown: React.FC<ToolbarMarkdownProps> = ({
           value={textType}
           onChange={handleTextTypeChange}
           variant="outlined"
-          sx={{
-            p: '8px',
-            width: '150px',
-            ':hover': {
-              backgroundColor: 'rgba(0, 0, 0, 0.04)',
-            },
-            ':active': {
-              backgroundColor: 'rgba(0, 0, 0, 0.04)',
-            },
-            '& .MuiSelect-select': { padding: 0 },
-            height: '34px',
-            '.MuiOutlinedInput-notchedOutline': { border: '1px solid black' },
-            '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-              border: '1px solid black',
-            },
-          }}
-          MenuProps={{
-            PaperProps: {
-              style: {
-                boxSizing: 'border-box',
-                width: '150px',
-                border: '1px solid black',
-                minWidth: 0,
-              },
-            },
-          }}
-          renderValue={value => {
-            if (value === 'p') {
-              return (
-                <Box display="flex">
-                  <Typography fontSize="14px">Paragraph Text</Typography>
-                </Box>
-              )
-            } else if (value === 'h1') {
-              return (
-                <Box display="flex">
-                  <Typography fontSize="14px">Heading 1</Typography>
-                </Box>
-              )
-            } else if (value === 'h2') {
-              return (
-                <Box display="flex">
-                  <Typography fontSize="14px">Heading 2</Typography>
-                </Box>
-              )
-            } else if (value === 'h3') {
-              return (
-                <Box display="flex">
-                  <Typography fontSize="14px">Heading 3</Typography>
-                </Box>
-              )
-            } else return <></>
-          }}
         >
-          <TextTypeMenuItem value={'p'}>
-            <Typography fontSize="14px">Paragraph Text</Typography>
-          </TextTypeMenuItem>
-          <TextTypeMenuItem value={'h1'}>
-            <Typography fontSize="24px">Heading 1</Typography>
-          </TextTypeMenuItem>
-          <TextTypeMenuItem value={'h2'}>
-            <Typography fontSize="20px">Heading 2</Typography>
-          </TextTypeMenuItem>
-          <TextTypeMenuItem value={'h3'}>
-            <Typography fontSize="16px">Heading 3</Typography>
-          </TextTypeMenuItem>
+          <MenuItem value={'p'}>
+            <Typography>Paragraph Text</Typography>
+          </MenuItem>
+          <MenuItem value={'h1'}>
+            <Typography>Heading 1</Typography>
+          </MenuItem>
+          <MenuItem value={'h2'}>
+            <Typography>Heading 2</Typography>
+          </MenuItem>
+          <MenuItem value={'h3'}>
+            <Typography>Heading 3</Typography>
+          </MenuItem>
         </Select>
         {/* alignment dropdown */}
         <Select
           value={alignValue}
           onChange={handleAlignChange}
           variant="outlined"
-          sx={{
-            p: '8px',
-            ':hover': {
-              backgroundColor: 'rgba(0, 0, 0, 0.04)',
-            },
-            ':active': {
-              backgroundColor: 'rgba(0, 0, 0, 0.04)',
-            },
-            '& .MuiSelect-select': { padding: 0 },
-            '.MuiOutlinedInput-notchedOutline': { border: 0 },
-            '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-              border: 'none !important',
-            },
-          }}
-          MenuProps={{
-            PaperProps: {
-              style: {
-                minWidth: 0,
-              },
-            },
-          }}
-          renderValue={value => {
-            if (value === 'left') {
-              return (
-                <Box display="flex">
-                  <FormatAlignLeft fontSize="small" />
-                </Box>
-              )
-            } else if (value === 'center') {
-              return (
-                <Box display="flex">
-                  <FormatAlignCenter fontSize="small" />
-                </Box>
-              )
-            } else if (value === 'right') {
-              return (
-                <Box display="flex">
-                  <FormatAlignRight fontSize="small" />
-                </Box>
-              )
-            } else return <></>
-          }}
         >
-          <AlignmentMenuItem value={'left'}>
-            <AlignmentButton format="left" activeBackgroundColor="#E7F5FF">
+          <MenuItem value={'left'}>
+            <ToolbarButton format="left">
               <FormatAlignLeft fontSize="small" />
-              <Typography fontSize={'14px'} mx={1}>
-                left
-              </Typography>
-            </AlignmentButton>
-          </AlignmentMenuItem>
-          <AlignmentMenuItem value={'center'}>
-            <AlignmentButton format="center" activeBackgroundColor="#E7F5FF">
+              <Typography>left</Typography>
+            </ToolbarButton>
+          </MenuItem>
+          <MenuItem value={'center'}>
+            <ToolbarButton format="center">
               <FormatAlignCenter fontSize="small" />
-              <Typography fontSize={'14px'} mx={1}>
-                center
-              </Typography>
-            </AlignmentButton>
-          </AlignmentMenuItem>
-          <AlignmentMenuItem value={'right'}>
-            <AlignmentButton format="right" activeBackgroundColor="#E7F5FF">
+              <Typography>center</Typography>
+            </ToolbarButton>
+          </MenuItem>
+          <MenuItem value={'right'}>
+            <ToolbarButton format="right">
               <FormatAlignRight fontSize="small" />
-              <Typography fontSize={'14px'} mx={1}>
-                right
-              </Typography>
-            </AlignmentButton>
-          </AlignmentMenuItem>
+              <Typography>right</Typography>
+            </ToolbarButton>
+          </MenuItem>
         </Select>
         {/* buttons */}
         <Box>

package/src/components/ComplexTextEditor/Toolbars/Rich/index.tsx

@@ -27,7 +27,7 @@ import {
 import { BaseEditor } from 'slate'
 import { ReactEditor } from 'slate-react'
 import { HistoryEditor } from 'slate-history'
-import { AlignmentFormat } from '@/components/ComplexTextEditor/types'
+import { AlignmentFormat } from '../../types'
 
 type CustomEditor = BaseEditor & ReactEditor & HistoryEditor
 
@@ -56,19 +56,6 @@ export const TextTypeMenuItem = styled(MenuItem)({
   },
 })
 
-export const AlignmentButton = styled(ToolbarButton)({
-  width: '100%',
-  borderRadius: 0,
-  justifyContent: 'flex-start',
-  '& .MuiTouchRipple-root .MuiTouchRipple-child': {
-    borderRadius: 0,
-    backgroundColor: '#E7F5FF',
-  },
-  ':hover': {
-    backgroundColor: '#E7F5FF',
-  },
-})
-
 const Toolbar: React.FC<ToolbarProps> = ({
   editor,
   markdownMode,
@@ -234,40 +221,61 @@ const Toolbar: React.FC<ToolbarProps> = ({
             }}
           >
             <AlignmentMenuItem value={'left'}>
-              <AlignmentButton
+              <ToolbarButton
                 format="left"
                 editor={editor}
-                activeBackgroundColor="#E7F5FF"
+                sx={{
+                  width: '100%',
+                  borderRadius: 0,
+                  justifyContent: 'flex-start',
+                  ':hover': {
+                    backgroundColor: '#E7F5FF',
+                  },
+                }}
               >
                 <FormatAlignLeft fontSize="small" />
                 <Typography fontSize={'14px'} mx={1}>
                   left
                 </Typography>
-              </AlignmentButton>
+              </ToolbarButton>
             </AlignmentMenuItem>
             <AlignmentMenuItem value={'center'}>
-              <AlignmentButton
+              <ToolbarButton
                 format="center"
                 editor={editor}
-                activeBackgroundColor="#E7F5FF"
+                sx={{
+                  width: '100%',
+                  borderRadius: 0,
+                  justifyContent: 'flex-start',
+                  ':hover': {
+                    backgroundColor: '#E7F5FF',
+                  },
+                }}
               >
                 <FormatAlignCenter fontSize="small" />
                 <Typography fontSize={'14px'} mx={1}>
                   center
                 </Typography>
-              </AlignmentButton>
+              </ToolbarButton>
             </AlignmentMenuItem>
             <AlignmentMenuItem value={'right'}>
-              <AlignmentButton
+              <ToolbarButton
                 format="right"
                 editor={editor}
-                activeBackgroundColor="#E7F5FF"
+                sx={{
+                  width: '100%',
+                  borderRadius: 0,
+                  justifyContent: 'flex-start',
+                  ':hover': {
+                    backgroundColor: '#E7F5FF',
+                  },
+                }}
               >
                 <FormatAlignRight fontSize="small" />
                 <Typography fontSize={'14px'} mx={1}>
                   right
                 </Typography>
-              </AlignmentButton>
+              </ToolbarButton>
             </AlignmentMenuItem>
           </Select>
           {/* buttons */}