goobs-frontend 0.8.11 → 0.8.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.8.11",
+  "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

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { JSX } from 'react'
+import React from 'react'
 import { styled } from '@mui/material/styles'
 import MuiAccordion, { AccordionProps } from '@mui/material/Accordion'
 import MuiAccordionSummary, {
@@ -12,16 +12,16 @@ import MuiAccordionDetails, {
 import { ExpandMore } from '@mui/icons-material'
 import { black } from '../../styles/palette'
 
-type CustomAccordionProps = Omit<AccordionProps, 'children'> & {
-  children: NonNullable<React.ReactNode>
+type CustomAccordionProps = AccordionProps & {
+  children: React.ReactNode
 }
 
-type CustomAccordionSummaryProps = Omit<AccordionSummaryProps, 'children'> & {
-  children: NonNullable<React.ReactNode>
+type CustomAccordionSummaryProps = AccordionSummaryProps & {
+  children: React.ReactNode
 }
 
-type CustomAccordionDetailsProps = Omit<AccordionDetailsProps, 'children'> & {
-  children: NonNullable<React.ReactNode>
+type CustomAccordionDetailsProps = AccordionDetailsProps & {
+  children: React.ReactNode
 }
 
 const StyledAccordion = styled(MuiAccordion)({
@@ -42,7 +42,7 @@ const StyledAccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
   padding: theme.spacing(2),
 }))
 
-function Accordion({ children, ...props }: CustomAccordionProps): JSX.Element {
+function Accordion({ children, ...props }: CustomAccordionProps) {
   return (
     <StyledAccordion disableGutters {...props}>
       {children}
@@ -50,10 +50,7 @@ function Accordion({ children, ...props }: CustomAccordionProps): JSX.Element {
   )
 }
 
-function AccordionSummary({
-  children,
-  ...props
-}: CustomAccordionSummaryProps): JSX.Element {
+function AccordionSummary({ children, ...props }: CustomAccordionSummaryProps) {
   return (
     <StyledAccordionSummary
       expandIcon={<ExpandMore sx={{ color: black.main }} />}
@@ -64,10 +61,7 @@ function AccordionSummary({
   )
 }
 
-function AccordionDetails({
-  children,
-  ...props
-}: CustomAccordionDetailsProps): JSX.Element {
+function AccordionDetails({ children, ...props }: CustomAccordionDetailsProps) {
   return <StyledAccordionDetails {...props}>{children}</StyledAccordionDetails>
 }
 

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 */}

package/src/components/ComplexTextEditor/index.tsx

@@ -1,17 +1,15 @@
-import React, { useState } from 'react'
+// src\components\ComplexTextEditor\index.tsx
+
+import React, { useState, useEffect } from 'react'
 import { Box } from '@mui/material'
-import { Descendant } from 'slate'
-import RichEditor from './RichEditor'
-import MarkdownEditor from './MarkdownEditor'
 import SimpleEditor from './SimpleEditor'
 import ComplexToolbar, { EditorMode } from './Toolbars/Complex'
-import { RichTextEditorTypes } from './types'
 
 export type EditorType = 'simple' | 'markdown' | 'rich' | 'complex'
 
 export interface ComplexTextEditorProps {
-  value: Descendant[]
-  onChange?: () => void
+  value: string
+  onChange?: (val: string) => void
   label?: string
   minRows?: number
   accordion?: boolean
@@ -23,55 +21,48 @@ const ComplexTextEditor: React.FC<ComplexTextEditorProps> = ({
   onChange,
   label,
   minRows = 5,
-  accordion = false,
   editorType = 'complex',
 }) => {
+  // If editorType is complex, start in simple mode
   const [mode, setMode] = useState<EditorMode>(
     editorType === 'complex' ? 'simple' : editorType
   )
-  const [markdownMode, setMarkdownMode] = useState(false)
-  const [markdown, setMarkdown] = useState('')
-  const [simpleText, setSimpleText] = useState('')
+  const [simpleText, setSimpleText] = useState(value)
+
+  useEffect(() => {
+    // If the input value changes from outside, update simpleText
+    setSimpleText(value)
+  }, [value])
 
-  const setNewSlateValue = (value: RichTextEditorTypes['CustomElement'][]) => {
-    // Handle conversion between markdown and rich text
-    console.log('Converting markdown to rich text:', value)
+  const handleSimpleTextChange = (newVal: string) => {
+    setSimpleText(newVal)
+    if (onChange) {
+      onChange(newVal)
+    }
   }
 
   const renderEditor = () => {
-    switch (mode) {
-      case 'simple':
-        return (
-          <SimpleEditor
-            value={simpleText}
-            setValue={setSimpleText}
-            minRows={minRows}
-            label={label}
-          />
-        )
-      case 'rich':
-        return (
-          <RichEditor
-            value={value}
-            onChange={onChange}
-            label={label}
-            minRows={minRows}
-            accordion={accordion}
-          />
-        )
-      case 'markdown':
-        return (
-          <MarkdownEditor
-            markdown={markdown}
-            setMarkdown={setMarkdown}
-            markdownMode={markdownMode}
-            setMarkdownMode={setMarkdownMode}
-            setNewSlateValue={setNewSlateValue}
-          />
-        )
-      default:
-        return null
+    // For now, we only support 'simple' directly. You can expand to 'rich'/'markdown' if needed.
+    if (mode === 'simple') {
+      return (
+        <SimpleEditor
+          value={simpleText}
+          setValue={handleSimpleTextChange}
+          minRows={minRows}
+          label={label}
+        />
+      )
     }
+
+    // If you implement other modes (rich, markdown), handle them here.
+    return (
+      <SimpleEditor
+        value={simpleText}
+        setValue={handleSimpleTextChange}
+        minRows={minRows}
+        label={label}
+      />
+    )
   }
 
   return (
@@ -88,9 +79,9 @@ const ComplexTextEditor: React.FC<ComplexTextEditorProps> = ({
         <ComplexToolbar
           mode={mode}
           setMode={setMode}
-          markdownMode={markdownMode}
-          setMarkdownMode={setMarkdownMode}
-          setMarkdown={setMarkdown}
+          markdownMode={false}
+          setMarkdownMode={() => {}}
+          setMarkdown={() => {}}
         />
       )}
 

package/src/components/ComplexTextEditor/utils/useMarkdownEditor.tsx

@@ -1,6 +1,6 @@
 'use server'
 
-import { RichTextEditorTypes } from '@/components/ComplexTextEditor/types'
+import { RichTextEditorTypes } from '../types'
 import React from 'react'
 
 // Simple regex patterns to identify bold and italic in markdown

package/src/components/ComplexTextEditor/utils/useRichtextEditor.tsx

@@ -15,7 +15,7 @@ import {
   InlineFormat,
   BlockFormat,
   AlignmentFormat,
-} from '@/components/ComplexTextEditor/types'
+} from '../types'
 
 const RichTextEditorConfig: RichTextEditorTypes = {
   Block: {