goobs-frontend 0.8.9 → 0.8.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.8.9",
+  "version": "0.8.11",
   "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/Accordion/index.tsx

@@ -1,44 +1,83 @@
 'use client'
 
-import React from 'react'
+import React, { JSX } from 'react'
 import { styled } from '@mui/material/styles'
 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 = Omit<AccordionProps, 'children'> & {
+  children: NonNullable<React.ReactNode>
+}
+
+type CustomAccordionSummaryProps = Omit<AccordionSummaryProps, 'children'> & {
+  children: NonNullable<React.ReactNode>
+}
+
+type CustomAccordionDetailsProps = Omit<AccordionDetailsProps, 'children'> & {
+  children: NonNullable<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): JSX.Element {
+  return (
+    <StyledAccordion disableGutters {...props}>
+      {children}
+    </StyledAccordion>
+  )
+}
+
+function AccordionSummary({
+  children,
+  ...props
+}: CustomAccordionSummaryProps): JSX.Element {
+  return (
+    <StyledAccordionSummary
+      expandIcon={<ExpandMore sx={{ color: black.main }} />}
+      {...props}
+    >
+      {children}
+    </StyledAccordionSummary>
+  )
+}
+
+function AccordionDetails({
+  children,
+  ...props
+}: CustomAccordionDetailsProps): JSX.Element {
+  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,8 +1,9 @@
 'use client'
-import React from 'react'
-import { Button, Box, ButtonProps, SxProps, Theme } from '@mui/material'
+import React, { JSX } 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
@@ -19,9 +20,73 @@ export interface CustomButtonProps extends ButtonProps {
   fontlocation?: 'left' | 'center' | 'right'
 }
 
-const CustomButton: React.FC<CustomButtonProps> = ({
+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',
+}))
+
+function CustomButton({
   text,
-  variant,
+  variant = 'contained',
   fontvariant = 'merriparagraph',
   onClick,
   fontcolor,
@@ -36,7 +101,7 @@ const CustomButton: React.FC<CustomButtonProps> = ({
   fontlocation = 'center',
   sx,
   ...restProps
-}) => {
+}: CustomButtonProps): JSX.Element {
   const handleButtonClick = (
     event: React.MouseEvent<HTMLButtonElement>
   ): void => {
@@ -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,50 +126,37 @@ 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>
   )
 }
 
-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/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