goobs-frontend 0.8.8 → 0.8.9

package/package.json

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

@@ -1,7 +1,8 @@
 'use client'
 import React from 'react'
-import { Button, Box, ButtonProps } from '@mui/material'
+import { Button, Box, ButtonProps, SxProps, Theme } from '@mui/material'
 import Typography from '../Typography'
+import { SvgIconProps } from '@mui/material/SvgIcon'
 
 export interface CustomButtonProps extends ButtonProps {
   text?: string
@@ -9,131 +10,112 @@ 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 handleButtonClick = (
-      event: React.MouseEvent<HTMLButtonElement>
-    ): void => {
-      event.preventDefault()
-      onClick?.(event)
-    }
-
-    const buttonStyle = {
-      backgroundColor: backgroundcolor,
-      width: width,
-    }
-
-    const isDisabled = disableButton === 'true'
+const CustomButton: React.FC<CustomButtonProps> = ({
+  text,
+  variant,
+  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 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 IconComponent = icon
-      ? React.cloneElement(icon as React.ReactElement, {
-          style: { ...iconStyle, ...(icon as React.ReactElement).props.style },
-        })
-      : null
+  const isDisabled = disableButton === 'true'
 
-    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 IconComponent = icon
+    ? React.cloneElement(icon, {
+        sx: {
+          color: iconcolor,
+          fontSize: iconsize,
+        },
+      } as Partial<SvgIconProps>)
+    : null
 
-    return (
+  const buttonContent = (
+    <>
+      {iconlocation === 'above' && IconComponent}
       <Box
         display="flex"
-        flexDirection="column"
         alignItems="center"
-        width={width}
+        justifyContent={
+          fontlocation === 'left'
+            ? 'flex-start'
+            : fontlocation === 'right'
+              ? 'flex-end'
+              : 'center'
+        }
+        width="100%"
+        height="100%"
       >
-        <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>
+        {iconlocation === 'left' && IconComponent}
+        <Typography
+          fontvariant={fontvariant}
+          fontcolor={isDisabled ? 'grey' : fontcolor}
+          text={text || ''}
+        />
+        {iconlocation === 'right' && IconComponent}
       </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
-  }
-)
+  return (
+    <Box
+      display="flex"
+      flexDirection="column"
+      alignItems="center"
+      width={width}
+      height={height}
+    >
+      <Button
+        {...restProps}
+        variant={variant}
+        onClick={handleButtonClick}
+        sx={buttonSx}
+        disabled={isDisabled}
+      >
+        {buttonContent}
+      </Button>
+    </Box>
+  )
+}
 
 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/Content/Structure/checkbox/useCheckbox.tsx

@@ -0,0 +1,65 @@
+'use client'
+import React from 'react'
+import { columnconfig, cellconfig } from '../../../Grid'
+import DataGridCheckbox from './../../../../components/Checkbox'
+
+type ExtendedColumnConfig = Omit<columnconfig, 'component'> & {
+  component?: columnconfig['component']
+}
+
+export interface ExtendedCheckboxProps {
+  columnconfig?: ExtendedColumnConfig
+  cellconfig?: cellconfig
+  onClick?: (event: React.MouseEvent) => void
+  checked?: boolean
+  indeterminate?: boolean
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
+  disabled?: boolean
+}
+
+const useCheckbox = (grid: {
+  checkbox?: ExtendedCheckboxProps | ExtendedCheckboxProps[]
+}): columnconfig | columnconfig[] | null => {
+  if (!grid.checkbox) return null
+
+  const renderCheckbox = (
+    checkboxProps: ExtendedCheckboxProps,
+    index: number
+  ): columnconfig => {
+    const {
+      columnconfig: itemColumnConfig,
+      cellconfig,
+      ...restProps
+    } = checkboxProps
+
+    if (
+      !itemColumnConfig ||
+      typeof itemColumnConfig !== 'object' ||
+      typeof itemColumnConfig.row !== 'number' ||
+      typeof itemColumnConfig.column !== 'number'
+    ) {
+      throw new Error(
+        'columnconfig must be an object with row and column as numbers'
+      )
+    }
+
+    // Merge the existing columnconfig with the new props
+    const mergedConfig: columnconfig = {
+      ...itemColumnConfig,
+      cellconfig: {
+        ...cellconfig,
+      },
+      component: <DataGridCheckbox key={`checkbox-${index}`} {...restProps} />,
+    }
+
+    return mergedConfig
+  }
+
+  if (Array.isArray(grid.checkbox)) {
+    return grid.checkbox.map(renderCheckbox)
+  } else {
+    return renderCheckbox(grid.checkbox, 0)
+  }
+}
+
+export default useCheckbox

package/src/components/Content/Structure/typography/useGridTypography.tsx

@@ -27,6 +27,7 @@ const useGridTypography = (grid: {
       fontvariant,
       columnconfig: itemColumnConfig,
       cellconfig,
+      component,
       ...restProps
     } = typographyItem
 
@@ -53,6 +54,7 @@ const useGridTypography = (grid: {
           text={text}
           fontvariant={fontvariant}
           fontcolor={fontcolor}
+          component={component || 'span'}
           {...restProps}
         />
       ),

package/src/components/Content/index.tsx

@@ -60,6 +60,9 @@ import useQRCode, { ExtendedQRCodeProps } from './Structure/qrcode/useQRCode'
 import usePhoneNumber, {
   ExtendedPhoneNumberFieldProps,
 } from './Structure/phoneNumber/usePhoneNumber'
+import useCheckbox, {
+  ExtendedCheckboxProps,
+} from './Structure/checkbox/useCheckbox'
 /**
  * Props for the ContentSection component.
  * Includes configuration for various content elements.
@@ -95,6 +98,7 @@ export interface ContentSectionProps {
     phoneNumberField?:
       | ExtendedPhoneNumberFieldProps
       | ExtendedPhoneNumberFieldProps[]
+    checkbox?: ExtendedCheckboxProps | ExtendedCheckboxProps[]
   }>
   width?: number
 }
@@ -135,6 +139,7 @@ const RenderContent: React.FC<
   addToColumnConfigs(useCodeCopy(props))
   addToColumnConfigs(useTextField(props))
   addToColumnConfigs(useDateField(props))
+  addToColumnConfigs(useCheckbox(props))
   addToColumnConfigs(usePhoneNumber(props))
   addToColumnConfigs(useDropdown(props))
   addToColumnConfigs(

package/src/components/DataGrid/ManageColumn/index.tsx

@@ -5,7 +5,7 @@ import { Box, Popover, IconButton } from '@mui/material'
 import { useManageColumn } from '../utils/useManageColumn'
 import CustomButton from '../../Button'
 import Searchbar from '../../Searchbar'
-import Checkbox from '../Checkbox'
+import Checkbox from '../../Checkbox'
 import ShowHideEyeIcon from '../../Icons/ShowHideEye'
 import { ColumnDef } from '../Table'
 import Typography from '../../Typography'