goobs-frontend 0.8.24 → 0.8.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.8.24",
+  "version": "0.8.25",
   "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",

package/src/components/Card/index.tsx

@@ -1,7 +1,8 @@
+// src\components\Card\index.tsx
 'use client'
 
-import React, { JSX } from 'react'
-import { BoxProps } from '@mui/material'
+import React from 'react'
+import { Box, BoxProps } from '@mui/material'
 import { CustomStepperProps } from '../Stepper'
 import InventoryCard from './variants/inventory'
 import SimplePricingSummary from './variants/simplepricingsummary'
@@ -9,18 +10,24 @@ 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 TaskCard from './variants/task'
 import { columnconfig } from '../Grid'
 import { CustomButtonProps } from '../Button'
 
 /**
- * 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.
+ * We omit children, draggable, and drag event props from BoxProps,
+ * to avoid type conflicts with MUI. We also omit `color`/`border`
+ * so they don’t conflict with PaperProps in <TaskCard>.
  */
 type CardProps = Omit<
   BoxProps,
-  'children' | 'draggable' | 'onDragStart' | 'onDragOver' | 'onDrop'
+  | 'children'
+  | 'draggable'
+  | 'onDragStart'
+  | 'onDragOver'
+  | 'onDrop'
+  | 'color'
+  | 'border'
 > & {
   /** Title of the card */
   title?: string
@@ -48,8 +55,18 @@ type CardProps = Omit<
   breadcrumbEnabled?: boolean
   /** Whether to enable links */
   linkEnabled?: boolean
-  /** Width of the card */
-  width?: string
+  /**
+   * Width of the card. Can be a string/number or MUI responsive object, e.g.:
+   *   width={{
+   *     xs: 250,
+   *     sm: 300,
+   *     md: 400
+   *   }}
+   */
+  width?:
+    | string
+    | number
+    | Partial<Record<'xs' | 'sm' | 'md' | 'lg' | 'xl', string | number>>
   /** Height of the card */
   height?: string | number
   /** Whether to show a stepper */
@@ -66,7 +83,7 @@ type CardProps = Omit<
     | 'detailedpricingsummary'
     | 'product'
     | 'productsummary'
-    | 'task' // <-- NEW
+    | 'task'
   /** Props for the pricing summary variant */
   pricingSummaryProps?: {
     subtotal?: string
@@ -142,7 +159,6 @@ type CardProps = Omit<
     /**
      * 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>
@@ -180,109 +196,134 @@ function Card({
   productSummaryProps,
   taskProps,
   ...rest
-}: CardProps): JSX.Element | null {
+}: CardProps): React.ReactNode | null {
+  // --------------------------
+  // 1. "DEFAULT" VARIANT
+  // --------------------------
   if (variant === 'default') {
     return (
-      <DefaultCard
-        title={title}
-        titleUnderline={titleUnderline}
-        body={body}
-        image={image}
-        imagePosition={imagePosition}
-        parentText={parentText}
-        parentLink={parentLink}
-        childText={childText}
-        childLink={childLink}
-        grandchildLink={grandchildLink}
-        favoriteEnabled={favoriteEnabled}
-        breadcrumbEnabled={breadcrumbEnabled}
-        linkEnabled={linkEnabled}
-        width={width}
-        height={height}
-        stepperEnabled={stepperEnabled}
-        stepperActiveStep={stepperActiveStep}
-        stepperSteps={stepperSteps}
-        {...rest}
-      />
+      <Box sx={{ width, height }} {...rest}>
+        <DefaultCard
+          title={title}
+          titleUnderline={titleUnderline}
+          body={body}
+          image={image}
+          imagePosition={imagePosition}
+          parentText={parentText}
+          parentLink={parentLink}
+          childText={childText}
+          childLink={childLink}
+          grandchildLink={grandchildLink}
+          favoriteEnabled={favoriteEnabled}
+          breadcrumbEnabled={breadcrumbEnabled}
+          linkEnabled={linkEnabled}
+          height={height}
+          stepperEnabled={stepperEnabled}
+          stepperActiveStep={stepperActiveStep}
+          stepperSteps={stepperSteps}
+        />
+      </Box>
     )
   }
 
+  // --------------------------
+  // 2. "INVENTORY" VARIANT
+  // --------------------------
   if (variant === 'inventory') {
     return (
-      <InventoryCard
-        title={title}
-        image={image}
-        width={width}
-        height={height}
-        {...inventoryProps}
-        {...rest}
-      />
+      <Box sx={{ width, height }} {...rest}>
+        <InventoryCard
+          title={title}
+          image={image}
+          height={height}
+          {...inventoryProps}
+        />
+      </Box>
     )
   }
 
+  // --------------------------
+  // 3. "PRICINGSUMMARY" VARIANT
+  // --------------------------
   if (variant === 'pricingsummary') {
     return (
-      <SimplePricingSummary
-        width={width}
-        height={height}
-        {...pricingSummaryProps}
-        {...rest}
-      />
+      <Box sx={{ width, height }} {...rest}>
+        <SimplePricingSummary height={height} {...pricingSummaryProps} />
+      </Box>
     )
   }
 
+  // --------------------------
+  // 4. "DETAILEDPRICINGSUMMARY" VARIANT
+  // --------------------------
   if (variant === 'detailedpricingsummary') {
     return (
-      <DetailedPricingSummary
-        width={width}
-        height={height}
-        {...detailedPricingSummaryProps}
-        {...rest}
-      />
+      <Box sx={{ width, height }} {...rest}>
+        <DetailedPricingSummary
+          height={height}
+          {...detailedPricingSummaryProps}
+        />
+      </Box>
     )
   }
 
+  // --------------------------
+  // 5. "PRODUCT" VARIANT
+  // --------------------------
   if (variant === 'product') {
     return (
-      <ProductCard width={width} height={height} {...productProps} {...rest} />
+      <Box sx={{ width, height }} {...rest}>
+        <ProductCard height={height} {...productProps} />
+      </Box>
     )
   }
 
+  // --------------------------
+  // 6. "PRODUCTSUMMARY" VARIANT
+  // --------------------------
   if (variant === 'productsummary') {
     return (
-      <ProductSummaryCard
-        title={title}
-        body={body}
-        annualPrice={productSummaryProps?.annualPrice}
-        monthlyPrice={productSummaryProps?.monthlyPrice}
-        width={width}
-        height={height}
-        button1Props={productSummaryProps?.button1Props}
-        button2Props={productSummaryProps?.button2Props}
-        {...rest}
-      />
+      <Box sx={{ width, height }} {...rest}>
+        <ProductSummaryCard
+          title={title}
+          body={body}
+          annualPrice={productSummaryProps?.annualPrice}
+          monthlyPrice={productSummaryProps?.monthlyPrice}
+          height={height}
+          button1Props={productSummaryProps?.button1Props}
+          button2Props={productSummaryProps?.button2Props}
+        />
+      </Box>
     )
   }
 
-  // NEW: Return our "task" variant
+  // --------------------------
+  // 7. "TASK" VARIANT
+  // --------------------------
   if (variant === 'task') {
+    // We handle drag & drop on this outer Box, plus the width/height here
     return (
-      <TaskCard
-        title={taskProps?.title}
-        description={taskProps?.description}
-        checked={taskProps?.checked}
-        onCheck={taskProps?.onCheck}
+      <Box
         draggable={taskProps?.draggable}
         onDragStart={taskProps?.onDragStart}
         onDragOver={taskProps?.onDragOver}
         onDrop={taskProps?.onDrop}
-        width={width}
-        height={height}
+        sx={{ width, height }}
         {...rest}
-      />
+      >
+        <TaskCard
+          title={taskProps?.title}
+          description={taskProps?.description}
+          checked={taskProps?.checked}
+          onCheck={taskProps?.onCheck}
+        />
+      </Box>
     )
   }
 
+  // --------------------------
+  // FALLBACK: NO MATCH
+  // --------------------------
   return null
 }
 

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

@@ -44,7 +44,6 @@ interface DefaultCardProps extends BoxProps {
   /** Whether to enable links */
   linkEnabled?: boolean
   /** Width of the card */
-  width?: string
   /** Height of the card */
   height?: string | number
   /** Whether to show a stepper */

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

@@ -34,7 +34,6 @@ interface DetailedPricingSummaryProps {
  * It displays product details, vendor information, subtotal, VAT, total, and a proceed button.
  */
 const DetailedPricingSummary: React.FC<DetailedPricingSummaryProps> = ({
-  width = '100%',
   height,
   product = 'Goobs Repo Unlimited × 1',
   vendor = 'Technologies Unlimited',
@@ -55,7 +54,6 @@ const DetailedPricingSummary: React.FC<DetailedPricingSummaryProps> = ({
         justifyContent: 'flex-start',
         alignItems: 'stretch',
         border: '1px solid #e8e8e8',
-        width: width,
         minHeight: height,
         padding: '16px',
       }}

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

@@ -11,9 +11,6 @@ interface InventoryCardProps {
   title?: string
   /** URL or path of the image to display */
   image?: string
-  /** Width of the inventory card */
-  width?: string
-  /** Height of the inventory card */
   height?: string | number
   /** License information for the item */
   license?: string
@@ -38,7 +35,6 @@ interface InventoryCardProps {
 const InventoryCard: React.FC<InventoryCardProps> = ({
   title,
   image,
-  width,
   height,
   license,
   developmentUse,
@@ -58,7 +54,6 @@ const InventoryCard: React.FC<InventoryCardProps> = ({
         justifyContent: 'flex-start',
         alignItems: 'stretch',
         border: '1px solid #e8e8e8',
-        width: width,
         minHeight: height,
       }}
     >

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

@@ -30,7 +30,6 @@ const ProductSummaryCard: React.FC<ProductSummaryCardProps> = ({
   body,
   annualPrice,
   monthlyPrice,
-  width,
   height,
   button1Props,
   button2Props,
@@ -56,7 +55,6 @@ const ProductSummaryCard: React.FC<ProductSummaryCardProps> = ({
         justifyContent: 'flex-start',
         alignItems: 'stretch',
         border: '1px solid #e8e8e8',
-        width: width,
         height: height,
         ...rest.sx,
       }}

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

@@ -7,8 +7,6 @@ import CustomButton from '../../../../components/Button'
  * Props for the SimplePricingSummary component.
  */
 interface SimplePricingSummaryProps {
-  /** Width of the pricing summary card */
-  width?: string
   /** Height of the pricing summary card */
   height?: string | number
   /** Subtotal amount */
@@ -30,7 +28,6 @@ interface SimplePricingSummaryProps {
  * including subtotal, total, proceed button, and additional information about taxes and discounts.
  */
 const SimplePricingSummary: React.FC<SimplePricingSummaryProps> = ({
-  width = '100%',
   height,
   subtotal = 'USD 180.00',
   total = 'USD 180.00',
@@ -49,7 +46,6 @@ const SimplePricingSummary: React.FC<SimplePricingSummaryProps> = ({
         justifyContent: 'flex-start',
         alignItems: 'stretch',
         border: '1px solid #e8e8e8',
-        width: width,
         minHeight: height,
         padding: '16px',
       }}

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

@@ -1,24 +1,22 @@
+// src\components\Card\variants\task\index.tsx
 'use client'
 
 import React from 'react'
-import { Paper, Box, Checkbox } from '@mui/material'
+import { Paper, Box, Checkbox, PaperProps } from '@mui/material'
 import Typography from '../../../../components/Typography'
 
-interface TaskCardProps {
+/**
+ * A simpler definition: we extend PaperProps directly
+ * but REMOVE all drag-related props.
+ */
+interface TaskCardProps extends PaperProps {
   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
 }
 
@@ -27,35 +25,28 @@ const TaskCard: React.FC<TaskCardProps> = ({
   description = 'Description',
   checked = false,
   onCheck,
-  draggable = false, // default to not draggable
-  onDragStart,
-  onDragOver,
-  onDrop,
-  width = '100%',
   height = 'auto',
+  sx,
+  ...rest
 }) => {
   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,
+
+        // Default width/height (can be overridden by sx)
+        ...(height && { height }),
+
         p: 2,
         border: '1px solid #e8e8e8',
+        ...sx,
       }}
+      {...rest}
     >
       {/* A checkbox in the upper-right corner */}
       <Checkbox

package/src/components/Form/Dialog/index.tsx

@@ -0,0 +1,99 @@
+'use client'
+
+import React, { useMemo } from 'react'
+import { Dialog, Box } from '@mui/material'
+import ContentSection, { ContentSectionProps } from '../../Content'
+import { formContainerStyle } from '../../../styles/Form'
+import { ExtendedTypographyProps } from '../../Content/Structure/typography/useGridTypography'
+
+export interface DialogFormProps {
+  title?: string
+  description?: string
+  grids?: ContentSectionProps['grids']
+  content?: React.ReactNode
+  width?: number
+}
+
+function CustomDialog({
+  title,
+  description,
+  grids,
+  content,
+  width = 450,
+}: DialogFormProps) {
+  // We render this dialog as always open (embedded in pages).
+
+  const headerGrid = useMemo(
+    (): ContentSectionProps['grids'][0] => ({
+      grid: {
+        gridconfig: {
+          gridname: 'formHeader',
+          marginbottom: 0.5,
+          gridwidth: '100%',
+        },
+      },
+      typography: [
+        {
+          text: title,
+          fontvariant: 'merrih5',
+          fontcolor: 'black',
+          columnconfig: {
+            row: 1,
+            column: 1,
+            gridname: 'formHeader',
+            columnwidth: '100%',
+            alignment: 'left',
+            marginbottom: 1.5,
+          },
+        },
+        {
+          text: description,
+          fontvariant: 'merriparagraph',
+          fontcolor: 'black',
+          columnconfig: {
+            row: 2,
+            column: 1,
+            alignment: 'left',
+            gridname: 'formHeader',
+            columnwidth: '100%',
+          },
+        },
+      ] as ExtendedTypographyProps[],
+    }),
+    [title, description]
+  )
+
+  const renderHeader = useMemo(
+    () => <ContentSection grids={[headerGrid]} />,
+    [headerGrid]
+  )
+
+  const renderContent = useMemo(
+    () => (
+      <Box sx={formContainerStyle}>
+        <Box mb={0}>{renderHeader}</Box>
+        {content || (grids && <ContentSection grids={grids} />)}
+      </Box>
+    ),
+    [renderHeader, content, grids]
+  )
+
+  return (
+    <Dialog
+      open
+      // No close icon, no user-initiated closing from outside or ESC
+      onClose={() => {}}
+      fullWidth
+      maxWidth={false}
+      PaperProps={{
+        style: {
+          width: `${width}px`,
+        },
+      }}
+    >
+      {renderContent}
+    </Dialog>
+  )
+}
+
+export default CustomDialog