goobs-frontend 0.7.54 → 0.7.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.7.54",
+  "version": "0.7.55",
   "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",
   "main": "./src/index.ts",
@@ -28,7 +28,6 @@
     "@mui/icons-material": "^5.15.20",
     "@mui/material": "^5.15.20",
     "@types/lodash": "^4.17.5",
-    "async-lock": "^1.4.1",
     "goobs-cache": "^1.2.1",
     "highlight.js": "^11.9.0",
     "lodash": "^4.17.21",
@@ -36,7 +35,6 @@
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^14.2.4",
-    "@types/async-lock": "^1.4.2",
     "@types/node": "^20.14.9",
     "@types/react": "18.3.0",
     "@types/react-dom": "^18.3.0",

package/src/components/Content/index.tsx

@@ -44,44 +44,35 @@ import useCodeCopy, {
  * Includes configuration for various content elements.
  */
 export interface ContentSectionProps {
-  /** Grid configuration */
-  gridconfig?: gridconfig
-  /** Configuration for confirmation code input */
-  confirmationcodeinput?:
-    | ExtendedConfirmationCodeInputsProps
-    | ExtendedConfirmationCodeInputsProps[]
-  /** Typography configuration */
-  typography?: TypographyProps | TypographyProps[]
-  /** Styled component configuration */
-  styledcomponent?:
-    | ExtendedStyledComponentProps
-    | ExtendedStyledComponentProps[]
-  /** Radio group configuration */
-  radiogroup?: ExtendedRadioGroupProps | ExtendedRadioGroupProps[]
-  /** Link configuration */
-  link?: LinkProps | LinkProps[]
-  /** Button configuration */
-  button?: ExtendedButtonProps | ExtendedButtonProps[]
-  /** Image configuration */
-  image?: ExtendedImageProps | ExtendedImageProps[]
-  /** Pricing configuration */
-  pricing?: ExtendedPricingProps
-  /** Stepper configuration */
-  stepper?: ExtendedStepperProps | ExtendedStepperProps[]
-  /** Transfer list configuration */
-  transferlist?: ExtendedTransferListProps | ExtendedTransferListProps[]
-  /** Card configuration */
-  card?: ExtendedCardProps | ExtendedCardProps[]
-  /** Code copy configuration */
-  codecopy?: ExtendedCodeCopyProps | ExtendedCodeCopyProps[]
+  grids: Array<{
+    grid: {
+      gridconfig?: gridconfig
+    }
+    confirmationcodeinput?:
+      | ExtendedConfirmationCodeInputsProps
+      | ExtendedConfirmationCodeInputsProps[]
+    typography?: TypographyProps | TypographyProps[]
+    styledcomponent?:
+      | ExtendedStyledComponentProps
+      | ExtendedStyledComponentProps[]
+    radiogroup?: ExtendedRadioGroupProps | ExtendedRadioGroupProps[]
+    link?: LinkProps | LinkProps[]
+    button?: ExtendedButtonProps | ExtendedButtonProps[]
+    image?: ExtendedImageProps | ExtendedImageProps[]
+    pricing?: ExtendedPricingProps
+    stepper?: ExtendedStepperProps | ExtendedStepperProps[]
+    transferlist?: ExtendedTransferListProps | ExtendedTransferListProps[]
+    card?: ExtendedCardProps | ExtendedCardProps[]
+    codecopy?: ExtendedCodeCopyProps | ExtendedCodeCopyProps[]
+  }>
 }
 
 /**
  * RenderContent component handles the rendering of various content elements
  * based on the provided configuration.
  */
-const RenderContent: React.FC<ContentSectionProps> = ({
-  gridconfig,
+const RenderContent: React.FC<ContentSectionProps['grids'][0]> = ({
+  grid,
   ...props
 }) => {
   let columnConfigs: columnconfig[] = []
@@ -113,22 +104,20 @@ const RenderContent: React.FC<ContentSectionProps> = ({
   addToColumnConfigs(useCard(props))
   addToColumnConfigs(useCodeCopy(props))
 
-  return <CustomGrid gridconfig={gridconfig} columnconfig={columnConfigs} />
+  return (
+    <CustomGrid gridconfig={grid.gridconfig} columnconfig={columnConfigs} />
+  )
 }
 
 /**
  * ContentSection component renders multiple grids based on the provided configuration.
  * @param grids An array of ContentSectionProps, each representing a grid to be rendered.
  */
-export default function ContentSection({
-  grids,
-}: {
-  grids: ContentSectionProps[]
-}) {
+export default function ContentSection({ grids }: ContentSectionProps) {
   return (
     <>
-      {grids.map((grid, index) => (
-        <RenderContent key={index} {...grid} />
+      {grids.map((gridProps, index) => (
+        <RenderContent key={index} {...gridProps} />
       ))}
     </>
   )

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

@@ -1,11 +1,11 @@
 'use client'
-
-import React from 'react'
+import React, { forwardRef, useImperativeHandle, useRef } from 'react'
 import { Close } from '@mui/icons-material'
 import { Dialog, IconButton, Box } from '@mui/material'
 import ContentSection, { ContentSectionProps } from '../../Content'
 import { formContainerStyle } from './../../../styles/Form'
 import { ExtendedTypographyProps } from '../../Content/Structure/typography/useGridTypography'
+import Typography from '../../Typography'
 
 /**
  * Props for the PopupForm component.
@@ -19,103 +19,137 @@ export interface PopupFormProps {
   open: boolean
   /** Function to call when closing the dialog */
   onClose: () => void
-  /** Array of ContentSectionProps to render the form content */
-  grids: ContentSectionProps[]
+  /** ContentSectionProps to render the form content */
+  grids: ContentSectionProps['grids']
+  /** Optional function to handle form submission */
+  onSubmit?: () => void
 }
 
 /**
  * PopupForm component renders a popup form with a title, description, and content sections.
  * It uses the ContentSection component to render the form content within a Material-UI Dialog.
+ * Handles form submission and displays submitted data internally.
  *
  * @param props The props for the PopupForm component.
+ * @param ref Ref forwarded to the form element.
  * @returns The rendered popup form.
  */
-function PopupForm({
-  title,
-  description,
-  open,
-  onClose,
-  grids,
-}: PopupFormProps) {
-  /**
-   * headerGrid contains the grid configuration for the form header.
-   * It includes the title and description as typography items.
-   */
-  const headerGrid: ContentSectionProps = {
-    gridconfig: {
-      gridname: 'formHeader',
-      margintop: 0,
-      marginbottom: 1,
-      marginleft: 0,
-      marginright: 0,
-      gridwidth: '100%',
-    },
-    typography: [
-      {
-        text: title,
-        fontvariant: 'merrih5',
-        fontcolor: 'black',
-        columnconfig: {
-          row: 1,
-          column: 1,
+const PopupForm = forwardRef<HTMLFormElement, PopupFormProps>(
+  ({ title, description, open, onClose, grids, onSubmit }, ref) => {
+    const [submittedData, setSubmittedData] = React.useState<
+      Record<string, string>
+    >({})
+    const internalFormRef = useRef<HTMLFormElement>(null)
+
+    useImperativeHandle(ref, () => internalFormRef.current as HTMLFormElement)
+
+    /**
+     * headerGrid contains the grid configuration for the form header.
+     * It includes the title and description as typography items.
+     */
+    const headerGrid: ContentSectionProps['grids'][0] = {
+      grid: {
+        gridconfig: {
           gridname: 'formHeader',
-          columnwidth: '100%',
-          alignment: 'left',
-          marginbottom: 0.5,
-        },
-        cellconfig: {
-          border: 'none',
+          marginbottom: 1,
+          gridwidth: '100%',
         },
       },
-      {
-        text: description,
-        fontvariant: 'merriparagraph',
-        fontcolor: 'black',
-        columnconfig: {
-          row: 2,
-          column: 1,
-          gridname: 'formHeader',
-          columnwidth: '100%',
-          marginbottom: 0,
+      typography: [
+        {
+          text: title,
+          fontvariant: 'merrih5',
+          fontcolor: 'black',
+          columnconfig: {
+            column: 1,
+            gridname: 'formHeader',
+            columnwidth: '100%',
+            alignment: 'left',
+            marginbottom: 0.5,
+          },
         },
-        cellconfig: {
-          border: 'none',
+        {
+          text: description,
+          fontvariant: 'merriparagraph',
+          fontcolor: 'black',
+          columnconfig: {
+            column: 1,
+            gridname: 'formHeader',
+            columnwidth: '100%',
+          },
         },
-      },
-    ] as ExtendedTypographyProps[],
-  }
+      ] as ExtendedTypographyProps[],
+    }
 
-  /** Combine the header grid with the provided content grids */
-  const contentSectionGrids: ContentSectionProps[] = [headerGrid, ...grids]
+    /** Combine the header grid with the provided content grids */
+    const contentSectionGrids: ContentSectionProps['grids'] = [
+      headerGrid,
+      ...grids,
+    ]
 
-  return (
-    <Dialog open={open} onClose={onClose} fullWidth maxWidth="sm">
-      {/* Close button */}
-      <IconButton
-        size="small"
-        onClick={onClose}
-        sx={{
-          position: 'absolute',
-          right: 8,
-          top: 8,
-          color: theme => theme.palette.grey[500],
-        }}
-      >
-        <Close />
-      </IconButton>
+    /**
+     * Handles form submission and processes form data internally.
+     * @param event - The form submission event
+     */
+    const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+      event.preventDefault()
+      const formData = new FormData(event.currentTarget)
+      const data: Record<string, string> = {}
 
-      {/* Form container */}
-      <Box
-        // @ts-ignore
-        sx={formContainerStyle}
-      >
-        <form>
-          {/* Render the form content using ContentSection */}
-          <ContentSection grids={contentSectionGrids} />
-        </form>
-      </Box>
-    </Dialog>
-  )
-}
+      formData.forEach((value, key) => {
+        data[key] = value.toString()
+      })
+
+      setSubmittedData(data)
+
+      if (onSubmit) {
+        onSubmit()
+      }
+    }
+
+    return (
+      <Dialog open={open} onClose={onClose} fullWidth maxWidth="sm">
+        {/* Close button */}
+        <IconButton
+          size="small"
+          onClick={onClose}
+          sx={{
+            position: 'absolute',
+            right: 8,
+            top: 8,
+            color: theme => theme.palette.grey[500],
+          }}
+        >
+          <Close />
+        </IconButton>
+        {/* Form container */}
+        <Box
+          // @ts-ignore
+          sx={formContainerStyle}
+        >
+          <form onSubmit={handleSubmit} ref={internalFormRef}>
+            {/* Render the form content using ContentSection */}
+            <ContentSection grids={contentSectionGrids} />
+          </form>
+          {/* Display submitted data */}
+          {Object.keys(submittedData).length > 0 && (
+            <Box mt={2}>
+              <Typography fontvariant="merrih6" text="Submitted Data:" />
+              {Object.entries(submittedData).map(([key, value]) => (
+                <Typography
+                  key={key}
+                  fontvariant="merriparagraph"
+                  text={`${key}: ${value}`}
+                />
+              ))}
+            </Box>
+          )}
+        </Box>
+      </Dialog>
+    )
+  }
+)
+
+PopupForm.displayName = 'PopupForm'
 
 export default PopupForm

package/src/components/Grid/index.tsx

@@ -13,8 +13,8 @@ export type BorderProp = 'none' | 'solid'
  * Configuration for individual columns within the grid
  */
 export interface columnconfig {
-  row?: number
-  column?: number
+  row: number
+  column: number
   gridname?: string
   alignment?: Alignment
   margintop?: number

package/src/index.ts

@@ -38,6 +38,7 @@ import PricingTable, { PricingProps } from './components/PricingTable'
 import { CustomStepper, CustomStepperProps } from './components/Stepper'
 import CustomToolbar, { ToolbarProps } from './components/Toolbar'
 import TransferList, { TransferListProps } from './components/TransferList'
+import StyledTooltip, { CustomTooltipProps } from './components/Tooltip'
 import React from 'react'
 
 // Animations
@@ -139,6 +140,9 @@ declare type CustomToolbarComponentProps = React.ComponentProps<
 declare type TransferListComponentProps = React.ComponentProps<
   typeof TransferList
 >
+declare type StyledTooltipComponentProps = React.ComponentProps<
+  typeof StyledTooltip
+>
 
 // Named exports
 export { CustomButton }
@@ -157,6 +161,7 @@ export { PricingTable }
 export { CustomStepper }
 export { CustomToolbar }
 export { TransferList }
+export { StyledTooltip }
 export { formContainerStyle }
 
 // Exporting ExtendedButtonProps
@@ -185,6 +190,7 @@ export type { PricingProps }
 export type { CustomStepperProps }
 export type { ToolbarProps }
 export type { TransferListProps }
+export type { CustomTooltipProps }
 
 // Additional type exports for the newly declared types
 export type { TypographyComponentProps }
@@ -200,6 +206,7 @@ export type { PricingTableComponentProps }
 export type { CustomStepperComponentProps }
 export type { CustomToolbarComponentProps }
 export type { TransferListComponentProps }
+export type { StyledTooltipComponentProps }
 
 // Animation type export
 export type { Animation }