goobs-frontend 0.8.17 → 0.8.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.8.17",
+  "version": "0.8.19",
   "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,28 +22,31 @@
     "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@mui/icons-material": "^6.3.0",
-    "@mui/material": "^6.3.0",
-    "@types/lodash": "^4.17.13",
+    "@mui/icons-material": "^6.3.1",
+    "@mui/material": "^6.3.1",
+    "@types/lodash": "^4.17.14",
+    "formik": "^2.4.6",
     "highlight.js": "^11.11.1",
     "jotai": "^2.11.0",
     "lodash": "^4.17.21",
     "next": "15.1.3",
     "otplib": "^12.0.1",
-    "react-datepicker": "^7.5.0",
+    "react-datepicker": "^7.6.0",
     "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"
+    "slate-react": "^0.112.0",
+    "zod": "^3.24.1",
+    "zod-formik-adapter": "^1.3.0"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^15.1.3",
-    "@types/node": "^22.10.2",
-    "@types/react": "19.0.2",
+    "@types/node": "^22.10.5",
+    "@types/react": "19.0.3",
     "@types/react-dom": "^19.0.2",
-    "@typescript-eslint/eslint-plugin": "^8.19.0",
-    "@typescript-eslint/parser": "^8.19.0",
+    "@typescript-eslint/eslint-plugin": "^8.19.1",
+    "@typescript-eslint/parser": "^8.19.1",
     "eslint": "^9.17.0",
     "eslint-config-next": "^15.1.3",
     "eslint-config-prettier": "^9.1.0",

package/src/components/Button/index.tsx

@@ -1,18 +1,29 @@
 'use client'
 import React, { JSX } from 'react'
 import { Button, Box, ButtonProps } from '@mui/material'
+import { SxProps, Theme } from '@mui/system'
 import Typography from '../Typography'
 import { SvgIconProps } from '@mui/material/SvgIcon'
-import { styled } from '@mui/material/styles'
 
 export interface CustomButtonProps extends ButtonProps {
   text?: string
+  /**
+   * The background color for the button when not disabled.
+   * If `backgroundcolor` is "none", it behaves like a text button.
+   */
   backgroundcolor?: string
+  /** The text color. Defaults to white unless disabled. */
   fontcolor?: string
   fontvariant?: 'merriparagraph' | 'merrihelperfooter'
   width?: string
   height?: string
+  /**
+   * If you want to disable the button in a custom way (string),
+   * we unify this with MUI's `disabled` boolean.
+   */
   disableButton?: 'true' | 'false'
+
+  /** Optional icon to display. */
   icon?: React.ReactElement<SvgIconProps>
   iconcolor?: string
   iconsize?: string
@@ -20,87 +31,10 @@ 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 }) => {
-  // Determine styles based on backgroundcolor
-  let backgroundStyles = {}
-  if (backgroundcolor && backgroundcolor !== 'none') {
-    backgroundStyles = {
-      backgroundColor: backgroundcolor,
-      '&:hover': {
-        backgroundColor: backgroundcolor,
-        opacity: 0.9,
-      },
-    }
-  } else if (backgroundcolor === 'none') {
-    // No background, behave like a text button
-    backgroundStyles = {
-      backgroundColor: 'transparent',
-      '&:hover': {
-        backgroundColor: 'transparent',
-        opacity: 0.9,
-      },
-    }
-  }
-
-  return {
-    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',
-    ...backgroundStyles,
-    '& .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',
-}))
-
+/**
+ * CustomButton uses sx props for styling:
+ *  - We define dynamic logic based on "disabled", "backgroundcolor", etc.
+ */
 function CustomButton({
   text,
   variant = 'contained',
@@ -117,17 +51,18 @@ function CustomButton({
   iconlocation = 'left',
   fontlocation = 'center',
   sx,
+  disabled,
   ...restProps
 }: CustomButtonProps): JSX.Element {
-  const handleButtonClick = (
-    event: React.MouseEvent<HTMLButtonElement>
-  ): void => {
+  // Merge MUI's "disabled" with our "disableButton"
+  const isReallyDisabled = disabled || disableButton === 'true'
+
+  const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault()
     onClick?.(event)
   }
 
-  const isDisabled = disableButton === 'true'
-
+  // If user provides an icon, clone it to override color/size if desired
   const IconComponent = icon
     ? React.cloneElement(icon, {
         sx: {
@@ -140,39 +75,112 @@ function CustomButton({
       } as Partial<SvgIconProps>)
     : null
 
-  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>
-    </>
-  )
+  // Construct base sx styles
+  const buttonSx: SxProps<Theme> = {
+    minWidth: 'fit-content',
+    width: 'auto',
+    height: '40px',
+    padding: '8px 16px',
+    display: 'inline-flex',
+    flexShrink: 0,
+    flexWrap: 'nowrap',
+    whiteSpace: 'nowrap',
+
+    flexDirection: iconlocation === 'above' ? 'column' : 'row',
+    alignItems: 'center',
+    justifyContent:
+      fontlocation === 'left'
+        ? 'flex-start'
+        : fontlocation === 'right'
+          ? 'flex-end'
+          : 'center',
+
+    gap: '8px',
+
+    '& .MuiButton-startIcon': { margin: 0 },
+    '& .MuiButton-endIcon': { margin: 0 },
+  }
+
+  // If disabled, force a grey background with no hover effect
+  if (isReallyDisabled) {
+    buttonSx.backgroundColor = '#cccccc'
+    buttonSx['&:hover'] = {
+      backgroundColor: '#cccccc',
+      opacity: 1,
+      cursor: 'not-allowed',
+    }
+  } else if (backgroundcolor && backgroundcolor !== 'none') {
+    // Normal colored background
+    buttonSx.backgroundColor = backgroundcolor
+    buttonSx['&:hover'] = {
+      backgroundColor: backgroundcolor,
+      opacity: 0.9,
+    }
+  } else if (backgroundcolor === 'none') {
+    // No background => text button
+    buttonSx.backgroundColor = 'transparent'
+    buttonSx['&:hover'] = {
+      backgroundColor: 'transparent',
+      opacity: 0.9,
+    }
+  }
+
+  // Merge any sx passed in from parent
+  const mergedSx = Array.isArray(sx)
+    ? [buttonSx, ...sx]
+    : { ...buttonSx, ...sx }
 
   return (
-    <StyledBox sx={{ width, height }}>
-      <StyledButton
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        width: width || 'auto',
+        height: height || '40px',
+        minWidth: 'fit-content',
+      }}
+    >
+      <Button
         {...restProps}
         variant={variant}
         onClick={handleButtonClick}
-        disabled={isDisabled}
+        disabled={isReallyDisabled}
         disableElevation
         disableRipple
-        fullWidth
-        backgroundcolor={backgroundcolor}
-        iconlocation={iconlocation}
-        fontlocation={fontlocation}
-        sx={sx}
+        sx={mergedSx}
       >
-        {buttonContent}
-      </StyledButton>
-    </StyledBox>
+        {/* If iconlocation="above", show the icon first */}
+        {iconlocation === 'above' && IconComponent}
+
+        {/* The text+icon container */}
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent:
+              fontlocation === 'left'
+                ? 'flex-start'
+                : fontlocation === 'right'
+                  ? 'flex-end'
+                  : 'center',
+            width: '100%',
+            height: '100%',
+            gap: '8px',
+          }}
+        >
+          {iconlocation === 'left' && IconComponent}
+
+          <Typography
+            fontvariant={fontvariant}
+            fontcolor={isReallyDisabled ? 'grey' : fontcolor || 'white'}
+            text={text || ''}
+          />
+
+          {iconlocation === 'right' && IconComponent}
+        </Box>
+      </Button>
+    </Box>
   )
 }
 

package/src/components/Card/index.tsx

@@ -9,10 +9,19 @@ import DetailedPricingSummary from './variants/detailedpricingsummary'
 import ProductCard from './variants/product'
 import ProductSummaryCard from './variants/productsummary'
 import DefaultCard from './variants/defaultconfig'
+import TaskCard from './variants/task' // <-- NEW
 import { columnconfig } from '../Grid'
 import { CustomButtonProps } from '../Button'
 
-type CardProps = Omit<BoxProps, 'children'> & {
+/**
+ * We omit children, draggable, and the drag event props from BoxProps,
+ * to avoid conflicts with our custom "draggable" and "onDragX" logic
+ * for the task variant.
+ */
+type CardProps = Omit<
+  BoxProps,
+  'children' | 'draggable' | 'onDragStart' | 'onDragOver' | 'onDrop'
+> & {
   /** Title of the card */
   title?: string
   /** Whether to show an underline for the title */
@@ -57,6 +66,7 @@ type CardProps = Omit<BoxProps, 'children'> & {
     | 'detailedpricingsummary'
     | 'product'
     | 'productsummary'
+    | 'task' // <-- NEW
   /** Props for the pricing summary variant */
   pricingSummaryProps?: {
     subtotal?: string
@@ -118,6 +128,27 @@ type CardProps = Omit<BoxProps, 'children'> & {
     button1Props?: CustomButtonProps
     button2Props?: CustomButtonProps
   }
+  /** Props for the new "task" variant */
+  taskProps?: {
+    /** Title of the task */
+    title?: string
+    /** Description of the task */
+    description?: string
+    /** Whether the task is completed (checked) */
+    checked?: boolean
+    /** Callback when the checkbox changes */
+    onCheck?: (event: React.ChangeEvent<HTMLInputElement>) => void
+
+    /**
+     * Optional drag & drop props if you want the card itself
+     * to handle drag events.
+     * Must be booleans or DragEventHandlers, not strings like "true".
+     */
+    draggable?: boolean
+    onDragStart?: React.DragEventHandler<HTMLDivElement>
+    onDragOver?: React.DragEventHandler<HTMLDivElement>
+    onDrop?: React.DragEventHandler<HTMLDivElement>
+  }
   /** Configuration for grid columns */
   columnconfig?: columnconfig
 }
@@ -147,6 +178,7 @@ function Card({
   inventoryProps,
   productProps,
   productSummaryProps,
+  taskProps,
   ...rest
 }: CardProps): JSX.Element | null {
   if (variant === 'default') {
@@ -232,6 +264,25 @@ function Card({
     )
   }
 
+  // NEW: Return our "task" variant
+  if (variant === 'task') {
+    return (
+      <TaskCard
+        title={taskProps?.title}
+        description={taskProps?.description}
+        checked={taskProps?.checked}
+        onCheck={taskProps?.onCheck}
+        draggable={taskProps?.draggable}
+        onDragStart={taskProps?.onDragStart}
+        onDragOver={taskProps?.onDragOver}
+        onDrop={taskProps?.onDrop}
+        width={width}
+        height={height}
+        {...rest}
+      />
+    )
+  }
+
   return null
 }
 

package/src/components/Card/variants/task/index.tsx

@@ -0,0 +1,89 @@
+'use client'
+
+import React from 'react'
+import { Paper, Box, Checkbox } from '@mui/material'
+import Typography from '../../../../components/Typography'
+
+interface TaskCardProps {
+  title?: string
+  description?: string
+  /** Whether the card is currently checked/selected. */
+  checked?: boolean
+  /** Called when the user toggles the checkbox. */
+  onCheck?: (event: React.ChangeEvent<HTMLInputElement>) => void
+  /** Whether this card is “draggable.” Typically true only if `checked` is true. */
+  draggable?: boolean
+  /** Drag event handlers from your board logic. */
+  onDragStart?: (e: React.DragEvent<HTMLDivElement>) => void
+  onDragOver?: (e: React.DragEvent<HTMLDivElement>) => void
+  onDrop?: (e: React.DragEvent<HTMLDivElement>) => void
+
+  width?: string
+  height?: string | number
+}
+
+const TaskCard: React.FC<TaskCardProps> = ({
+  title = 'Task Title',
+  description = 'Description',
+  checked = false,
+  onCheck,
+  draggable = false, // default to not draggable
+  onDragStart,
+  onDragOver,
+  onDrop,
+  width = '100%',
+  height = 'auto',
+}) => {
+  return (
+    <Paper
+      elevation={1}
+      /* 
+        Make the entire Paper draggable if the parent says so 
+        (based on whether it’s selected).
+      */
+      draggable={draggable}
+      onDragStart={onDragStart}
+      onDragOver={onDragOver}
+      onDrop={onDrop}
+      sx={{
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'flex-start',
+        alignItems: 'flex-start',
+        width,
+        height,
+        p: 2,
+        border: '1px solid #e8e8e8',
+      }}
+    >
+      {/* A checkbox in the upper-right corner */}
+      <Checkbox
+        checked={checked}
+        onChange={onCheck}
+        color="primary"
+        sx={{
+          position: 'absolute',
+          top: 8,
+          right: 8,
+        }}
+      />
+
+      <Box sx={{ display: 'flex', flexDirection: 'column', marginRight: 4 }}>
+        <Typography
+          text={title}
+          fontcolor="black"
+          fontvariant="merrih5"
+          sx={{ marginBottom: '4px' }}
+        />
+        <Typography
+          text={description}
+          fontcolor="black"
+          fontvariant="merriparagraph"
+        />
+      </Box>
+    </Paper>
+  )
+}
+
+export default TaskCard

package/src/components/Checkbox/index.tsx

@@ -59,7 +59,7 @@ function DataGridCheckbox({
           color: palette.marine.main,
         },
         '&.Mui-disabled': {
-          color: palette.greyborder.main,
+          color: palette.grey.main,
         },
         '&:hover': {
           backgroundColor: palette.marine.light,

package/src/components/Content/Structure/projectboard/useProjectBoard.tsx

@@ -0,0 +1,84 @@
+'use client'
+import React from 'react'
+import ProjectBoard, { ProjectBoardProps } from '../../../ProjectBoard'
+import { columnconfig, cellconfig } from '../../../Grid'
+
+/**
+ * This mirrors the pattern of your Extended*Props from useTextField, etc.
+ * ExtendedProjectBoardProps extends your ProjectBoardProps but also includes:
+ * - optional columnconfig for row/col positioning
+ * - optional cellconfig for styling
+ *
+ * If you’d like to pass more custom props, add them here.
+ */
+type ExtendedColumnConfig = Omit<columnconfig, 'component'> & {
+  component?: columnconfig['component']
+}
+
+export interface ExtendedProjectBoardProps extends ProjectBoardProps {
+  columnconfig?: ExtendedColumnConfig
+  cellconfig?: cellconfig
+}
+
+const useProjectBoard = (grid: {
+  /**
+   * We can accept a single ExtendedProjectBoardProps or an array of them.
+   * This matches how your existing hooks handle single vs array items.
+   */
+  projectboard?: ExtendedProjectBoardProps | ExtendedProjectBoardProps[]
+}): columnconfig | columnconfig[] | null => {
+  if (!grid.projectboard) return null
+
+  // This helper function converts a single ExtendedProjectBoardProps
+  // into a columnconfig object for your <CustomGrid> layout system.
+  const renderProjectBoard = (
+    item: ExtendedProjectBoardProps,
+    index: number
+  ): columnconfig => {
+    const {
+      columnconfig: itemColumnConfig,
+      cellconfig,
+      // In your existing `ProjectBoardProps`, you have `columns` plus any other props.
+      columns,
+      ...restProps
+    } = item
+
+    // Ensure columnconfig is valid
+    if (
+      !itemColumnConfig ||
+      typeof itemColumnConfig.row !== 'number' ||
+      typeof itemColumnConfig.column !== 'number'
+    ) {
+      throw new Error(
+        'columnconfig must be an object with numeric row and column'
+      )
+    }
+
+    // Build the final columnconfig
+    const mergedConfig: columnconfig = {
+      ...itemColumnConfig,
+      cellconfig: {
+        ...cellconfig,
+      },
+      component: (
+        <ProjectBoard
+          key={`projectboard-${index}`}
+          columns={columns}
+          {...restProps}
+        />
+      ),
+    }
+
+    return mergedConfig
+  }
+
+  if (Array.isArray(grid.projectboard)) {
+    // If it's an array, map each item to a columnconfig
+    return grid.projectboard.map(renderProjectBoard)
+  } else {
+    // If it's a single item, just render one
+    return renderProjectBoard(grid.projectboard, 0)
+  }
+}
+
+export default useProjectBoard

package/src/components/Content/index.tsx

@@ -72,6 +72,9 @@ import useSearchableDropdown, {
 import useAccordion, {
   ExtendedAccordionProps,
 } from './Structure/accordion/useAccordion'
+import useProjectBoard, {
+  ExtendedProjectBoardProps,
+} from './Structure/projectboard/useProjectBoard'
 
 /**
  * Props for the ContentSection component.
@@ -88,6 +91,7 @@ export interface ContentSectionProps {
     searchableDropdown?:
       | ExtendedSearchableDropdownProps
       | ExtendedSearchableDropdownProps[]
+    projectboard?: ExtendedProjectBoardProps | ExtendedProjectBoardProps[]
     complexeditor?: ExtendedComplexEditorProps | ExtendedComplexEditorProps[]
     typography?: TypographyProps | TypographyProps[]
     accordion?: ExtendedAccordionProps | ExtendedAccordionProps[]
@@ -156,6 +160,7 @@ const RenderContent: React.FC<
   addToColumnConfigs(useSearchableDropdown(props))
   addToColumnConfigs(useTextField(props))
   addToColumnConfigs(useDateField(props))
+  addToColumnConfigs(useProjectBoard(props))
   addToColumnConfigs(useAccordion(props))
   addToColumnConfigs(useCheckbox(props))
   addToColumnConfigs(usePhoneNumber(props))