goobs-frontend 0.8.8 → 0.8.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.8.8",
+  "version": "0.8.10",
   "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,31 +22,36 @@
     "@emotion/cache": "^11.13.5",
     "@emotion/react": "^11.13.5",
     "@emotion/styled": "^11.13.5",
-    "@mui/icons-material": "^6.1.8",
-    "@mui/material": "^6.1.8",
+    "@mui/icons-material": "^6.1.10",
+    "@mui/material": "^6.1.10",
     "@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.3",
+    "next": "15.0.4",
     "otplib": "^12.0.1",
     "react-datepicker": "^7.5.0",
-    "react-qr-code": "^2.0.15"
+    "react-qr-code": "^2.0.15",
+    "slate": "^0.112.0",
+    "slate-dom": "^0.111.0",
+    "slate-history": "^0.110.3",
+    "slate-react": "^0.112.0"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "^15.0.3",
-    "@types/node": "^22.10.0",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@typescript-eslint/eslint-plugin": "^8.16.0",
-    "@typescript-eslint/parser": "^8.16.0",
-    "eslint": "^9.15.0",
-    "eslint-config-next": "^15.0.3",
+    "@next/eslint-plugin-next": "^15.0.4",
+    "@types/node": "^22.10.1",
+    "@types/react": "19.0.1",
+    "@types/react-dom": "^19.0.1",
+    "@typescript-eslint/eslint-plugin": "^8.17.0",
+    "@typescript-eslint/parser": "^8.17.0",
+    "eslint": "^9.16.0",
+    "eslint-config-next": "^15.0.4",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "prettier": "^3.4.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "prettier": "^3.4.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "typescript": "^5.7.2"
   },
   "files": [

package/src/components/Button/index.tsx

@@ -2,6 +2,8 @@
 import React from 'react'
 import { Button, Box, ButtonProps } from '@mui/material'
 import Typography from '../Typography'
+import { SvgIconProps } from '@mui/material/SvgIcon'
+import { styled } from '@mui/material/styles'
 
 export interface CustomButtonProps extends ButtonProps {
   text?: string
@@ -9,131 +11,153 @@ export interface CustomButtonProps extends ButtonProps {
   fontcolor?: string
   fontvariant?: 'merriparagraph' | 'merrihelperfooter'
   width?: string
+  height?: string
   disableButton?: 'true' | 'false'
-  icon?: React.ReactNode
+  icon?: React.ReactElement<SvgIconProps>
   iconcolor?: string
   iconsize?: string
   iconlocation?: 'left' | 'right' | 'above'
   fontlocation?: 'left' | 'center' | 'right'
 }
 
-const CustomButton: React.FC<CustomButtonProps> = React.memo(
-  props => {
-    const {
-      text,
-      variant,
-      fontvariant = 'merriparagraph',
-      onClick,
-      fontcolor,
-      backgroundcolor,
-      width,
-      disableButton,
-      icon,
-      iconcolor,
-      iconsize,
-      iconlocation = 'left',
-      fontlocation = 'center',
-      ...restProps
-    } = props
+const StyledButton = styled(Button, {
+  shouldForwardProp: prop =>
+    prop !== 'backgroundcolor' &&
+    prop !== 'iconlocation' &&
+    prop !== 'fontlocation',
+})<{
+  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: backgroundcolor,
+      opacity: 0.9,
+    },
+  }),
+  '& .MuiButton-startIcon': {
+    margin: 0,
+  },
+  '& .MuiButton-endIcon': {
+    margin: 0,
+  },
+}))
 
-    const handleButtonClick = (
-      event: React.MouseEvent<HTMLButtonElement>
-    ): void => {
-      event.preventDefault()
-      onClick?.(event)
-    }
+const StyledBox = styled(Box)({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  width: '100%',
+  height: '40px',
+  minWidth: 'fit-content',
+})
 
-    const buttonStyle = {
-      backgroundColor: backgroundcolor,
-      width: width,
-    }
+const ContentWrapper = styled(Box)<{
+  fontlocation?: 'left' | 'center' | 'right'
+}>(({ fontlocation }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent:
+    fontlocation === 'left'
+      ? 'flex-start'
+      : fontlocation === 'right'
+        ? 'flex-end'
+        : 'center',
+  width: '100%',
+  height: '100%',
+  gap: '8px',
+}))
 
-    const isDisabled = disableButton === 'true'
+const CustomButton: React.FC<CustomButtonProps> = ({
+  text,
+  variant = 'contained',
+  fontvariant = 'merriparagraph',
+  onClick,
+  fontcolor,
+  backgroundcolor,
+  width,
+  height,
+  disableButton,
+  icon,
+  iconcolor,
+  iconsize,
+  iconlocation = 'left',
+  fontlocation = 'center',
+  sx,
+  ...restProps
+}) => {
+  const handleButtonClick = (
+    event: React.MouseEvent<HTMLButtonElement>
+  ): void => {
+    event.preventDefault()
+    onClick?.(event)
+  }
 
-    const iconStyle = {
-      color: iconcolor,
-      fontSize: iconsize,
-    }
+  const isDisabled = disableButton === 'true'
 
-    const IconComponent = icon
-      ? React.cloneElement(icon as React.ReactElement, {
-          style: { ...iconStyle, ...(icon as React.ReactElement).props.style },
-        })
-      : null
+  const IconComponent = icon
+    ? React.cloneElement(icon, {
+        sx: {
+          color: iconcolor || 'inherit',
+          fontSize: iconsize || '20px',
+          minWidth: iconsize || '20px',
+          minHeight: iconsize || '20px',
+          margin: 0,
+        },
+      } as Partial<SvgIconProps>)
+    : null
 
-    const buttonContent = (
-      <>
-        {iconlocation === 'above' && IconComponent}
-        <Box
-          display="flex"
-          alignItems="center"
-          justifyContent={
-            fontlocation === 'left'
-              ? 'flex-start'
-              : fontlocation === 'right'
-                ? 'flex-end'
-                : 'center'
-          }
-          width="100%"
-        >
-          {iconlocation === 'left' && IconComponent}
-          <Typography
-            fontvariant={fontvariant}
-            fontcolor={isDisabled ? 'grey' : fontcolor}
-            text={text || ''}
-          />
-          {iconlocation === 'right' && IconComponent}
-        </Box>
-      </>
-    )
+  const buttonContent = (
+    <>
+      {iconlocation === 'above' && IconComponent}
+      <ContentWrapper fontlocation={fontlocation}>
+        {iconlocation === 'left' && IconComponent}
+        <Typography
+          fontvariant={fontvariant}
+          fontcolor={isDisabled ? 'grey' : fontcolor || 'white'}
+          text={text || ''}
+        />
+        {iconlocation === 'right' && IconComponent}
+      </ContentWrapper>
+    </>
+  )
 
-    return (
-      <Box
-        display="flex"
-        flexDirection="column"
-        alignItems="center"
-        width={width}
+  return (
+    <StyledBox sx={{ width, height }}>
+      <StyledButton
+        {...restProps}
+        variant={variant}
+        onClick={handleButtonClick}
+        disabled={isDisabled}
+        disableElevation
+        disableRipple
+        fullWidth
+        backgroundcolor={backgroundcolor}
+        iconlocation={iconlocation}
+        fontlocation={fontlocation}
+        sx={sx}
       >
-        <Button
-          {...restProps}
-          variant={variant}
-          onClick={handleButtonClick}
-          style={{
-            ...buttonStyle,
-            flexDirection: iconlocation === 'above' ? 'column' : 'row',
-            justifyContent:
-              fontlocation === 'left'
-                ? 'flex-start'
-                : fontlocation === 'right'
-                  ? 'flex-end'
-                  : 'center',
-          }}
-          disabled={isDisabled}
-        >
-          {buttonContent}
-        </Button>
-      </Box>
-    )
-  },
-  (prevProps, nextProps) => {
-    const propsAreEqual =
-      prevProps.text === nextProps.text &&
-      prevProps.variant === nextProps.variant &&
-      prevProps.fontvariant === nextProps.fontvariant &&
-      prevProps.onClick === nextProps.onClick &&
-      prevProps.fontcolor === nextProps.fontcolor &&
-      prevProps.backgroundcolor === nextProps.backgroundcolor &&
-      prevProps.width === nextProps.width &&
-      prevProps.disableButton === nextProps.disableButton &&
-      prevProps.icon === nextProps.icon &&
-      prevProps.iconcolor === nextProps.iconcolor &&
-      prevProps.iconsize === nextProps.iconsize &&
-      prevProps.iconlocation === nextProps.iconlocation &&
-      prevProps.fontlocation === nextProps.fontlocation
-
-    return propsAreEqual
-  }
-)
+        {buttonContent}
+      </StyledButton>
+    </StyledBox>
+  )
+}
 
 CustomButton.displayName = 'CustomButton'
 export default CustomButton

package/src/components/{DataGrid/Checkbox → Checkbox}/index.tsx

@@ -2,7 +2,7 @@
 
 import { Checkbox } from '@mui/material'
 import React from 'react'
-import * as palette from '../../../styles/palette'
+import * as palette from '../../styles/palette'
 
 interface DataGridCheckboxProps {
   onClick?: (event: React.MouseEvent) => void

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

@@ -0,0 +1,107 @@
+// File: src/components/RichTextEditor/MarkdownEditor/index.tsx
+
+import React, { useEffect, useState } from 'react'
+import {
+  handleSwitchToRichText,
+  handleBoldClick,
+  handleItalicClick,
+} from '../utils/useMarkdownEditor'
+import Toolbar from '../Toolbars/Markdown'
+import { Box, Divider, TextField } from '@mui/material'
+import { RichTextEditorTypes } from '../types'
+
+type MarkdownEditorProps = {
+  markdown: string
+  setMarkdown: (value: string) => void
+  markdownMode: boolean
+  setMarkdownMode: (value: boolean) => void
+  setNewSlateValue: (value: RichTextEditorTypes['CustomElement'][]) => void
+}
+
+const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
+  markdown,
+  setMarkdown,
+  markdownMode,
+  setMarkdownMode,
+  setNewSlateValue,
+}) => {
+  const [markdownValue, setMarkdownValue] = useState(markdown)
+  const [selectedText, setSelectedText] = useState('')
+
+  useEffect(() => {
+    if (!markdownMode) {
+      console.log('MarkdownEditor: markdownMode = ', markdownMode)
+      // Perform any action you want when markdownMode changes to false
+    }
+  }, [markdownMode])
+
+  useEffect(() => {
+    if (markdown !== markdownValue) {
+      setMarkdownValue(markdown)
+    }
+  }, [markdown, markdownValue])
+
+  const handleLocalMarkdownChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const newValue = event.target.value
+    setMarkdownValue(newValue)
+    setMarkdown(newValue)
+  }
+
+  const handleSwitchMode = () => {
+    handleSwitchToRichText(
+      markdown,
+      setNewSlateValue,
+      setNewSlateValue,
+      setMarkdownMode
+    )
+  }
+
+  const handleSelect = (event: React.SyntheticEvent<HTMLDivElement>) => {
+    const target = event.target as HTMLTextAreaElement
+    setSelectedText(
+      target.value.substring(target.selectionStart, target.selectionEnd)
+    )
+  }
+
+  return (
+    <Box
+      sx={{
+        border: '1px solid black',
+        borderRadius: '8px',
+        width: 'auto',
+      }}
+    >
+      <Toolbar
+        markdownMode={markdownMode}
+        setMarkdownMode={setMarkdownMode}
+        setMarkdown={setMarkdown}
+        handleBoldClick={() =>
+          handleBoldClick(selectedText, markdown, setMarkdown)
+        }
+        handleItalicClick={() =>
+          handleItalicClick(selectedText, markdown, setMarkdown)
+        }
+        switchModeLabel="RichText Mode"
+        onSwitchMode={handleSwitchMode}
+      />
+      <Divider sx={{ backgroundColor: 'black' }} />
+      <TextField
+        fullWidth
+        multiline
+        variant="standard"
+        rows={10}
+        value={markdownValue}
+        onChange={handleLocalMarkdownChange}
+        onSelect={handleSelect}
+        sx={{
+          boxSizing: 'border-box',
+          p: 1,
+        }}
+      />
+    </Box>
+  )
+}
+
+export default MarkdownEditor

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

@@ -0,0 +1,214 @@
+import React, { useCallback, useState } from 'react'
+import {
+  Slate,
+  Editable,
+  RenderLeafProps,
+  RenderElementProps,
+} from 'slate-react'
+import { Descendant } from 'slate'
+import Toolbar from '../Toolbars/Rich'
+import {
+  Box,
+  Divider,
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+} from '@mui/material'
+import { ExpandMore } from '@mui/icons-material'
+import { useRichTextEditor } from '../utils/useRichtextEditor'
+import { RichTextEditorTypes } from '../types'
+import Typography from '../../Typography'
+
+export interface RichTextEditorProps {
+  value: Descendant[]
+  name?: string
+  label?: string
+  minRows?: number
+  onChange?: () => void
+  onSelectionChange?: () => void
+  onValueChange?: () => void
+  accordion?: boolean
+}
+
+const Leaf: React.FC<RenderLeafProps> = ({ attributes, children, leaf }) => {
+  const customLeaf = leaf as RichTextEditorTypes['CustomText']
+
+  if (customLeaf.bold) {
+    children = <strong>{children}</strong>
+  }
+  if (customLeaf.italic) {
+    children = <em>{children}</em>
+  }
+  if (customLeaf.underline) {
+    children = <u>{children}</u>
+  }
+  if (customLeaf.strikethrough) {
+    children = <s>{children}</s>
+  }
+  if (customLeaf.link) {
+    children = <a href={customLeaf.link}>{children}</a>
+  }
+  if (customLeaf.code) {
+    children = <code>{children}</code>
+  }
+  return <span {...attributes}>{children}</span>
+}
+
+export function RichTextEditor({
+  value,
+  onChange,
+  label,
+  minRows = 5,
+  accordion = false,
+}: RichTextEditorProps) {
+  const {
+    editor,
+    markdownMode,
+    setMarkdown,
+    internalValue,
+    handleChange,
+    handleBoldClick,
+    handleItalicClick,
+    insertLink,
+    onKeyDown,
+  } = useRichTextEditor(value, onChange ? () => onChange() : undefined)
+
+  const [expanded, setExpanded] = useState(false)
+
+  const renderElement = useCallback(
+    (props: RenderElementProps) => <Element {...props} />,
+    []
+  )
+
+  const renderLeaf = useCallback(
+    (props: RenderLeafProps) => <Leaf {...props} />,
+    []
+  )
+
+  const handleAccordionChange = () => {
+    setExpanded(!expanded)
+  }
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        width: '100%',
+        justifyContent: 'center',
+      }}
+    >
+      {accordion ? (
+        <Accordion expanded={expanded} onChange={handleAccordionChange}>
+          <AccordionSummary expandIcon={<ExpandMore />}>
+            <Typography fontvariant="merrih4">{label}</Typography>
+          </AccordionSummary>
+          <AccordionDetails>
+            <Box
+              sx={{
+                border: '1px solid black',
+                borderRadius: '8px',
+                width: 'auto',
+              }}
+            >
+              <Slate
+                editor={editor}
+                initialValue={internalValue}
+                onChange={handleChange}
+              >
+                <Toolbar
+                  editor={editor}
+                  markdownMode={markdownMode}
+                  setMarkdown={setMarkdown}
+                  handleBoldClick={handleBoldClick}
+                  handleItalicClick={handleItalicClick}
+                  handleLinkClick={insertLink}
+                />
+                <Divider sx={{ backgroundColor: 'black' }} />
+                <Editable
+                  style={{ minHeight: `${minRows * 20}px` }}
+                  onKeyDown={onKeyDown}
+                  renderElement={renderElement}
+                  renderLeaf={renderLeaf}
+                />
+              </Slate>
+            </Box>
+          </AccordionDetails>
+        </Accordion>
+      ) : (
+        <>
+          {label && <Typography fontvariant="merrih4">{label}</Typography>}
+          <Box
+            sx={{
+              border: '1px solid black',
+              borderRadius: '8px',
+              width: 'auto',
+            }}
+          >
+            <Slate
+              editor={editor}
+              initialValue={internalValue}
+              onChange={handleChange}
+            >
+              <Toolbar
+                editor={editor}
+                markdownMode={markdownMode}
+                setMarkdown={setMarkdown}
+                handleBoldClick={handleBoldClick}
+                handleItalicClick={handleItalicClick}
+                handleLinkClick={insertLink}
+              />
+              <Divider sx={{ backgroundColor: 'black' }} />
+              <Editable
+                style={{ minHeight: `${minRows * 20}px` }}
+                onKeyDown={onKeyDown}
+                renderElement={renderElement}
+                renderLeaf={renderLeaf}
+              />
+            </Slate>
+          </Box>
+        </>
+      )}
+    </Box>
+  )
+}
+
+const Element = ({ attributes, children, element }: RenderElementProps) => {
+  const customElement = element as RichTextEditorTypes['CustomElement']
+  if (!customElement.type) return null
+  const style = { textAlign: customElement.align }
+  switch (customElement.type) {
+    case 'list-item':
+      return (
+        <li style={style} {...attributes}>
+          {children}
+        </li>
+      )
+    case 'link':
+      return (
+        <a href={customElement.url} {...attributes}>
+          {children}
+        </a>
+      )
+    case 'bulleted-list':
+      return (
+        <ul style={style} {...attributes}>
+          {children}
+        </ul>
+      )
+    case 'numbered-list':
+      return (
+        <ol style={style} {...attributes}>
+          {children}
+        </ol>
+      )
+    default:
+      return (
+        <p style={style} {...attributes}>
+          {children}
+        </p>
+      )
+  }
+}
+
+export default RichTextEditor