goobs-frontend 0.8.9 → 0.8.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.8.9",
+  "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",
@@ -25,13 +25,18 @@
     "@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.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.4",

package/src/components/Button/index.tsx

@@ -1,8 +1,9 @@
 'use client'
 import React from 'react'
-import { Button, Box, ButtonProps, SxProps, Theme } from '@mui/material'
+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
@@ -19,9 +20,73 @@ export interface CustomButtonProps extends ButtonProps {
   fontlocation?: 'left' | 'center' | 'right'
 }
 
+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 StyledBox = styled(Box)({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  width: '100%',
+  height: '40px',
+  minWidth: 'fit-content',
+})
+
+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 CustomButton: React.FC<CustomButtonProps> = ({
   text,
-  variant,
+  variant = 'contained',
   fontvariant = 'merriparagraph',
   onClick,
   fontcolor,
@@ -44,27 +109,16 @@ const CustomButton: React.FC<CustomButtonProps> = ({
     onClick?.(event)
   }
 
-  const buttonSx: SxProps<Theme> = {
-    ...(backgroundcolor && { backgroundColor: backgroundcolor }),
-    ...(width && { width }),
-    ...(height && { height }),
-    flexDirection: iconlocation === 'above' ? 'column' : 'row',
-    justifyContent:
-      fontlocation === 'left'
-        ? 'flex-start'
-        : fontlocation === 'right'
-          ? 'flex-end'
-          : 'center',
-    ...(sx as object),
-  }
-
   const isDisabled = disableButton === 'true'
 
   const IconComponent = icon
     ? React.cloneElement(icon, {
         sx: {
-          color: iconcolor,
-          fontSize: iconsize,
+          color: iconcolor || 'inherit',
+          fontSize: iconsize || '20px',
+          minWidth: iconsize || '20px',
+          minHeight: iconsize || '20px',
+          margin: 0,
         },
       } as Partial<SvgIconProps>)
     : null
@@ -72,48 +126,36 @@ const CustomButton: React.FC<CustomButtonProps> = ({
   const buttonContent = (
     <>
       {iconlocation === 'above' && IconComponent}
-      <Box
-        display="flex"
-        alignItems="center"
-        justifyContent={
-          fontlocation === 'left'
-            ? 'flex-start'
-            : fontlocation === 'right'
-              ? 'flex-end'
-              : 'center'
-        }
-        width="100%"
-        height="100%"
-      >
+      <ContentWrapper fontlocation={fontlocation}>
         {iconlocation === 'left' && IconComponent}
         <Typography
           fontvariant={fontvariant}
-          fontcolor={isDisabled ? 'grey' : fontcolor}
+          fontcolor={isDisabled ? 'grey' : fontcolor || 'white'}
           text={text || ''}
         />
         {iconlocation === 'right' && IconComponent}
-      </Box>
+      </ContentWrapper>
     </>
   )
 
   return (
-    <Box
-      display="flex"
-      flexDirection="column"
-      alignItems="center"
-      width={width}
-      height={height}
-    >
-      <Button
+    <StyledBox sx={{ width, height }}>
+      <StyledButton
         {...restProps}
         variant={variant}
         onClick={handleButtonClick}
-        sx={buttonSx}
         disabled={isDisabled}
+        disableElevation
+        disableRipple
+        fullWidth
+        backgroundcolor={backgroundcolor}
+        iconlocation={iconlocation}
+        fontlocation={fontlocation}
+        sx={sx}
       >
         {buttonContent}
-      </Button>
-    </Box>
+      </StyledButton>
+    </StyledBox>
   )
 }
 

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

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

@@ -0,0 +1,65 @@
+import React from 'react'
+import { Box, TextField } from '@mui/material'
+
+type SimpleEditorProps = {
+  value: string
+  setValue: (value: string) => void
+  minRows?: number
+  label?: string
+}
+
+const SimpleEditor: React.FC<SimpleEditorProps> = ({
+  value,
+  setValue,
+  minRows = 5,
+  label,
+}) => {
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value)
+  }
+
+  return (
+    <Box
+      sx={{
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
+      <TextField
+        fullWidth
+        multiline
+        label={label}
+        variant="outlined"
+        minRows={minRows}
+        value={value}
+        onChange={handleChange}
+        sx={{
+          '& .MuiOutlinedInput-root': {
+            borderRadius: '8px',
+            '& fieldset': {
+              borderColor: 'black',
+            },
+            '&:hover fieldset': {
+              borderColor: 'black',
+            },
+            '&.Mui-focused fieldset': {
+              borderColor: 'black',
+            },
+            '& .MuiInputBase-input': {
+              transform: 'translateY(-8px)',
+            },
+          },
+          '& .MuiInputLabel-root': {
+            color: 'black',
+            '&.Mui-focused': {
+              color: 'black',
+            },
+          },
+        }}
+      />
+    </Box>
+  )
+}
+
+export default SimpleEditor

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

@@ -0,0 +1,111 @@
+import React from 'react'
+import { BaseEditor } from 'slate'
+import { ReactEditor } from 'slate-react'
+import { HistoryEditor } from 'slate-history'
+import { useRichTextEditor } from '../utils/useRichtextEditor'
+import { handleBoldClick, handleItalicClick } from '../utils/useMarkdownEditor'
+import { IconButton, IconButtonProps } from '@mui/material'
+import { InlineFormat, BlockFormat, AlignmentFormat } from '../types'
+
+interface ToolbarButtonProps extends IconButtonProps {
+  format?: InlineFormat | BlockFormat | AlignmentFormat
+  children: React.ReactNode
+  editor?: BaseEditor & ReactEditor & HistoryEditor
+  buttonAction?: 'undo' | 'redo'
+  markdownMode?: boolean
+  setMarkdown?: (value: string) => void
+  handleMouseDown?: () => void
+  activeFontColor?: string
+  activeBackgroundColor?: string
+}
+
+const ToolbarButton: React.FC<ToolbarButtonProps> = ({
+  format,
+  children,
+  editor,
+  buttonAction,
+  markdownMode,
+  setMarkdown,
+  activeFontColor = 'rgb(110 110 110)',
+  activeBackgroundColor = 'rgba(0, 0, 0, 0.10)',
+  ...props
+}) => {
+  const { toggleMark, toggleBlock, isMarkActive, isBlockActive } =
+    useRichTextEditor([], () => {})
+
+  const isActive =
+    editor &&
+    format &&
+    (isMarkActive(format as InlineFormat) ||
+      isBlockActive(format as BlockFormat | AlignmentFormat))
+
+  const handleMouseDown = () => {
+    if (markdownMode && setMarkdown) {
+      const selection = window.getSelection()
+      if (selection) {
+        const selectedText = selection.toString()
+        switch (format) {
+          case 'bold':
+            handleBoldClick(selectedText, selectedText, setMarkdown)
+            break
+          case 'italic':
+            handleItalicClick(selectedText, selectedText, setMarkdown)
+            break
+          case 'code':
+            setMarkdown('`' + selectedText + '`')
+            break
+          case 'link': {
+            const url = prompt('Enter the URL')
+            if (url) {
+              setMarkdown('[' + selectedText + '](' + url + ')')
+            }
+            break
+          }
+        }
+      }
+    } else {
+      // Slate mode
+      if (editor) {
+        if (buttonAction) {
+          if (buttonAction === 'undo') {
+            editor.undo()
+          } else if (buttonAction === 'redo') {
+            editor.redo()
+          }
+        } else if (format) {
+          if (
+            format === 'bulleted-list' ||
+            format === 'numbered-list' ||
+            ['left', 'center', 'right', 'justify'].includes(format as string)
+          ) {
+            toggleBlock(format as BlockFormat | AlignmentFormat)
+          } else {
+            toggleMark(format as InlineFormat)
+          }
+        }
+      }
+    }
+  }
+
+  return (
+    <IconButton
+      onMouseDown={handleMouseDown}
+      sx={{
+        borderRadius: '9%',
+        color: 'black',
+        ...(isActive && {
+          color: activeFontColor,
+          backgroundColor: activeBackgroundColor,
+        }),
+        '& .MuiTouchRipple-root .MuiTouchRipple-child': {
+          borderRadius: '9%',
+        },
+      }}
+      {...props}
+    >
+      {children}
+    </IconButton>
+  )
+}
+
+export default ToolbarButton