goobs-frontend 0.7.53

package/src/components/Content/Structure/styledcomponent/useStyledComponent.tsx

@@ -0,0 +1,96 @@
+import React from 'react'
+import StyledComponent, {
+  StyledComponentProps,
+} from '../../../../components/StyledComponent'
+import { columnconfig, cellconfig } from '../../../Grid'
+
+export interface ExtendedStyledComponentProps extends StyledComponentProps {
+  columnconfig?: columnconfig
+  cellconfig?: cellconfig
+}
+
+const useStyledComponent = (grid: {
+  styledcomponent?:
+    | ExtendedStyledComponentProps
+    | ExtendedStyledComponentProps[]
+}) => {
+  if (!grid.styledcomponent) return null
+
+  const renderStyledComponent = (
+    component: ExtendedStyledComponentProps,
+    index: number
+  ): columnconfig => {
+    const {
+      name,
+      outlinecolor,
+      iconcolor,
+      backgroundcolor,
+      combinedfontcolor,
+      unshrunkfontcolor,
+      shrunkfontcolor,
+      autoComplete,
+      componentvariant,
+      options,
+      helperfooter,
+      placeholder,
+      minRows,
+      label,
+      shrunklabellocation,
+      value,
+      onChange,
+      defaultValue,
+      inputRef,
+      columnconfig,
+      serverActionValidation,
+      valuestatus,
+      cellconfig,
+      required,
+      ...restProps
+    } = component
+
+    // Merge the cellconfig with the columnconfig
+    const mergedConfig: columnconfig = {
+      ...columnconfig,
+      cellconfig: {
+        ...cellconfig,
+      },
+      component: (
+        <StyledComponent
+          key={`styledcomponent-${index}`}
+          name={name}
+          outlinecolor={outlinecolor}
+          iconcolor={iconcolor}
+          backgroundcolor={backgroundcolor}
+          combinedfontcolor={combinedfontcolor}
+          unshrunkfontcolor={unshrunkfontcolor}
+          shrunkfontcolor={shrunkfontcolor}
+          autoComplete={autoComplete}
+          componentvariant={componentvariant}
+          options={options}
+          helperfooter={helperfooter}
+          placeholder={placeholder}
+          minRows={minRows}
+          label={label}
+          shrunklabellocation={shrunklabellocation}
+          value={value}
+          onChange={onChange}
+          defaultValue={defaultValue}
+          inputRef={inputRef}
+          serverActionValidation={serverActionValidation}
+          valuestatus={valuestatus}
+          required={required}
+          {...restProps}
+        />
+      ),
+    }
+    return mergedConfig
+  }
+
+  if (Array.isArray(grid.styledcomponent)) {
+    return grid.styledcomponent.map(renderStyledComponent)
+  } else {
+    return [renderStyledComponent(grid.styledcomponent, 0)]
+  }
+}
+
+export default useStyledComponent

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

@@ -0,0 +1,53 @@
+import React from 'react'
+import { Typography, TypographyProps } from '../../../Typography'
+import { columnconfig, cellconfig } from '../../../Grid'
+
+export interface ExtendedTypographyProps extends TypographyProps {
+  columnconfig?: columnconfig
+  cellconfig?: cellconfig
+}
+
+const useGridTypography = (grid: {
+  typography?: ExtendedTypographyProps | ExtendedTypographyProps[]
+}) => {
+  if (!grid.typography) return null
+
+  const renderTypography = (
+    typographyItem: ExtendedTypographyProps,
+    index: number
+  ): columnconfig => {
+    const {
+      text,
+      fontcolor,
+      fontvariant,
+      columnconfig: itemColumnConfig,
+      cellconfig,
+      ...restProps
+    } = typographyItem
+
+    return {
+      ...itemColumnConfig,
+      cellconfig: {
+        ...cellconfig,
+        border: 'none',
+      },
+      component: (
+        <Typography
+          key={`typography-${index}`}
+          text={text}
+          fontvariant={fontvariant}
+          fontcolor={fontcolor}
+          {...restProps}
+        />
+      ),
+    }
+  }
+
+  if (Array.isArray(grid.typography)) {
+    return grid.typography.map(renderTypography)
+  } else {
+    return renderTypography(grid.typography, 0)
+  }
+}
+
+export default useGridTypography

package/src/components/Content/index.tsx

@@ -0,0 +1,147 @@
+'use client'
+import React from 'react'
+import CustomGrid, { columnconfig, gridconfig } from '../../components/Grid'
+import useGridTypography, {
+  ExtendedTypographyProps as TypographyProps,
+} from './Structure/typography/useGridTypography'
+import useStyledComponent, {
+  ExtendedStyledComponentProps,
+} from '../../components/Content/Structure/styledcomponent/useStyledComponent'
+import useGridRadioGroup, {
+  ExtendedRadioGroupProps,
+} from '../../components/Content/Structure/radiogroup/useGridRadioGroup'
+import useConfirmationInput, {
+  ExtendedConfirmationCodeInputsProps,
+} from '../../components/Content/Structure/confirmationinput/useConfirmationInput'
+import useLink, {
+  ExtendedTypographyProps as LinkProps,
+} from '../../components/Content/Structure/link/useLink'
+import useImage, {
+  ExtendedImageProps,
+} from '../../components/Content/Structure/image/useImage'
+import useButton, {
+  ExtendedButtonProps,
+} from '../../components/Content/Structure/button/useButton'
+
+export interface ContentSectionProps {
+  gridconfig?: gridconfig
+  confirmationcodeinput?:
+    | ExtendedConfirmationCodeInputsProps
+    | ExtendedConfirmationCodeInputsProps[]
+  typography?: TypographyProps | TypographyProps[]
+  styledcomponent?:
+    | ExtendedStyledComponentProps
+    | ExtendedStyledComponentProps[]
+  radiogroup?: ExtendedRadioGroupProps | ExtendedRadioGroupProps[]
+  link?: LinkProps | LinkProps[]
+  button?: ExtendedButtonProps | ExtendedButtonProps[]
+  image?: ExtendedImageProps | ExtendedImageProps[]
+}
+
+/**
+ * RenderContent component renders the content of a section based on the provided props.
+ * It uses various custom hooks to generate column configurations for different content types.
+ * @param props The props for the RenderContent component.
+ * @returns The rendered content section.
+ */
+const RenderContent: React.FC<ContentSectionProps> = ({
+  gridconfig,
+  ...props
+}) => {
+  let columnConfigs: columnconfig[] = []
+
+  /**
+   * Generate column configurations for typography content.
+   */
+  const paragraph = useGridTypography(props)
+  if (paragraph) {
+    if (Array.isArray(paragraph)) {
+      columnConfigs = columnConfigs.concat(paragraph)
+    } else {
+      columnConfigs.push(paragraph)
+    }
+  }
+
+  /**
+   * Generate column configurations for styled component content.
+   */
+  const styledComponent = useStyledComponent(props)
+  if (styledComponent) {
+    columnConfigs = columnConfigs.concat(styledComponent)
+  }
+
+  /**
+   * Generate column configurations for radio group content.
+   */
+  const radioGroup = useGridRadioGroup(props)
+  if (radioGroup) {
+    columnConfigs = columnConfigs.concat(radioGroup)
+  }
+
+  /**
+   * Generate column configurations for confirmation input content.
+   */
+  const confirmationInput = useConfirmationInput({
+    confirmationcodeinput: props.confirmationcodeinput,
+  })
+  if (confirmationInput) {
+    if (Array.isArray(confirmationInput)) {
+      columnConfigs = columnConfigs.concat(confirmationInput)
+    } else {
+      columnConfigs.push(confirmationInput)
+    }
+  }
+
+  /**
+   * Generate column configurations for link content.
+   */
+  const links = useLink(props)
+  if (links) {
+    columnConfigs = columnConfigs.concat(links)
+  }
+
+  /**
+   * Generate column configurations for button content.
+   */
+  const button = useButton(props)
+  if (button) {
+    if (Array.isArray(button)) {
+      button.forEach(btn => {
+        if (btn) {
+          columnConfigs.push(btn)
+        }
+      })
+    } else {
+      columnConfigs.push(button)
+    }
+  }
+
+  /**
+   * Generate column configurations for image content.
+   */
+  const image = useImage(props)
+  if (image) {
+    columnConfigs = columnConfigs.concat(image)
+  }
+
+  return <CustomGrid gridconfig={gridconfig} columnconfig={columnConfigs} />
+}
+
+/**
+ * ContentSection component renders a list of content sections based on the provided grids prop.
+ * @param props The props for the ContentSection component.
+ * @returns The rendered content sections.
+ */
+export default function ContentSection({
+  grids,
+}: {
+  grids: ContentSectionProps[]
+}) {
+  return (
+    <>
+      {grids.map((grid, index) => (
+        <RenderContent key={index} {...grid} />
+      ))}
+    </>
+  )
+}

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

@@ -0,0 +1,121 @@
+'use client'
+import { Close } from '@mui/icons-material'
+import { Dialog, IconButton, Box } from '@mui/material'
+import ContentSection, { ContentSectionProps } from '../../Content'
+import { formContainerStyle } from './../../../styles/Form'
+import { TypographyProps } from './../../../components/Typography'
+import React from 'react'
+
+export interface PopupFormProps {
+  title?: string
+  description?: string
+  open: boolean
+  onClose: () => void
+  onSubmit?: (formData: FormData) => void
+  grids: ContentSectionProps[]
+}
+
+/**
+ * PopupForm component renders a popup form with a title, description, and content sections.
+ * It uses the ContentSection component to render the form content.
+ * @param props The props for the PopupForm component.
+ * @returns The rendered popup form.
+ */
+function PopupForm({
+  title,
+  description,
+  open,
+  onClose,
+  grids,
+  onSubmit,
+}: PopupFormProps) {
+  /**
+   * handleSubmit function is called when the form is submitted.
+   * It prevents the default form submission behavior and creates a FormData object from the form data.
+   * If an onSubmit callback is provided, it is called with the FormData object.
+   * @param event The form submission event.
+   */
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    const formData = new FormData(event.currentTarget)
+    if (onSubmit) {
+      onSubmit(formData)
+    }
+  }
+
+  /**
+   * headerGrid array contains the grid configuration for the form header.
+   * It includes the title and description typography props.
+   */
+  const headerGrid = [
+    {
+      gridconfig: {
+        gridname: 'formHeader',
+        margintop: 0,
+        marginbottom: 1,
+        marginleft: 0,
+        marginright: 0,
+        gridwidth: '100%',
+      },
+      subtitle: {
+        text: title,
+        columnconfig: {
+          row: 1,
+          column: 1,
+          gridname: 'formHeader',
+          columnwidth: '100%',
+          alignment: 'left',
+          marginbottom: 0.5,
+        },
+        cellconfig: {
+          border: 'none',
+        },
+      } as TypographyProps,
+      paragraph: {
+        text: description,
+        columnconfig: {
+          row: 2,
+          column: 1,
+          gridname: 'formHeader',
+          columnwidth: '100%',
+          marginbottom: 0,
+        },
+        cellconfig: {
+          border: 'none',
+        },
+      } as TypographyProps,
+    },
+  ]
+
+  /**
+   * contentSectionGrids array combines the headerGrid and the provided grids prop.
+   */
+  const contentSectionGrids = [...headerGrid, ...grids]
+
+  return (
+    <Dialog open={open} onClose={onClose} fullWidth maxWidth="sm">
+      <IconButton
+        size="small"
+        onClick={onClose}
+        sx={{
+          position: 'absolute',
+          right: 8,
+          top: 8,
+          color: theme => theme.palette.grey[500],
+        }}
+      >
+        <Close />
+      </IconButton>
+      <Box
+        // @ts-ignore
+        sx={formContainerStyle}
+      >
+        <form onSubmit={handleSubmit}>
+          <ContentSection grids={contentSectionGrids} />
+        </form>
+      </Box>
+    </Dialog>
+  )
+}
+
+export default PopupForm

package/src/components/Grid/defaultconfig.tsx

@@ -0,0 +1,131 @@
+import { gridconfig, columnconfig, cellconfig } from './index'
+import { Typography } from '../../components/Typography'
+import React from 'react'
+
+export const defaultGridConfig: gridconfig = {
+  gridname: 'testgrid',
+  alignment: 'center',
+  margintop: 10,
+  marginbottom: 2,
+  marginright: 2,
+  marginleft: 10,
+  gridwidth: '100%',
+}
+
+export const defaultColumnConfig: columnconfig[] = [
+  {
+    row: 1,
+    column: 1,
+    gridname: 'testgrid',
+    alignment: 'left',
+    columnwidth: '33.33%',
+    margintop: 1,
+    marginbottom: 1,
+    marginright: 0,
+    marginleft: 0,
+    component: <Typography variant="h4" text="Column 1" />,
+    cellconfig: {
+      border: 'none',
+      mobilewidth: '100%',
+      tabletwidth: '33.33%',
+      computerwidth: '33.33%',
+    },
+  },
+  {
+    row: 1,
+    column: 2,
+    gridname: 'testgrid',
+    alignment: 'left',
+    columnwidth: '33.33%',
+    margintop: 1,
+    marginbottom: 1,
+    marginright: 0,
+    marginleft: 0,
+    component: <Typography variant="h4" text="Column 2" />,
+    cellconfig: {
+      border: 'none',
+      mobilewidth: '100%',
+      tabletwidth: '33.33%',
+      computerwidth: '33.33%',
+    },
+  },
+  {
+    row: 1,
+    column: 3,
+    gridname: 'testgrid',
+    alignment: 'left',
+    columnwidth: '33.33%',
+    margintop: 1,
+    marginbottom: 1,
+    marginright: 0,
+    marginleft: 0,
+    component: <Typography variant="h4" text="Column 3" />,
+    cellconfig: {
+      border: 'none',
+      mobilewidth: '100%',
+      tabletwidth: '33.33%',
+      computerwidth: '33.33%',
+    },
+  },
+  {
+    row: 2,
+    column: 1,
+    gridname: 'testgrid',
+    alignment: 'center',
+    columnwidth: '33.33%',
+    margintop: 1,
+    marginbottom: 1,
+    marginright: 2,
+    marginleft: 2,
+    component: <Typography variant="h4" text="Column 4" />,
+    cellconfig: {
+      border: 'none',
+      mobilewidth: '100%',
+      tabletwidth: '33.33%',
+      computerwidth: '33.33%',
+    },
+  },
+  {
+    row: 2,
+    column: 2,
+    gridname: 'testgrid',
+    alignment: 'center',
+    columnwidth: '33.33%',
+    margintop: 1,
+    marginbottom: 1,
+    marginright: 2,
+    marginleft: 2,
+    component: <Typography variant="h4" text="Column 5" />,
+    cellconfig: {
+      border: 'none',
+      mobilewidth: '100%',
+      tabletwidth: '33.33%',
+      computerwidth: '33.33%',
+    },
+  },
+  {
+    row: 2,
+    column: 3,
+    gridname: 'testgrid',
+    alignment: 'center',
+    columnwidth: '33.33%',
+    margintop: 1,
+    marginbottom: 1,
+    marginright: 0,
+    marginleft: 0,
+    component: <Typography variant="h4" text="Column 6" />,
+    cellconfig: {
+      border: 'none',
+      mobilewidth: '100%',
+      tabletwidth: '33.33%',
+      computerwidth: '33.33%',
+    },
+  },
+]
+
+export const defaultCellConfig: cellconfig = {
+  border: 'none',
+  mobilewidth: '100%',
+  tabletwidth: '100%',
+  computerwidth: '100%',
+}