goobs-frontend 0.7.68 → 0.7.69

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.7.68",
+  "version": "0.7.69",
   "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,8 @@
     "jotai": "^2.9.3",
     "lodash": "^4.17.21",
     "next": "14.2.6",
-    "react-datepicker": "^7.3.0"
+    "react-datepicker": "^7.3.0",
+    "react-qr-code": "^2.0.15"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^14.2.6",

package/src/components/Content/Structure/qrcode/useQRCode.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import QRCodeComponent, { QRCodeProps } from '../../../../components/QRCode'
+import { columnconfig, cellconfig } from '../../../Grid'
+
+type ExtendedColumnConfig = Omit<columnconfig, 'component'> & {
+  component?: columnconfig['component']
+}
+
+export interface ExtendedQRCodeProps extends Omit<QRCodeProps, 'sx'> {
+  columnconfig?: ExtendedColumnConfig
+  cellconfig?: cellconfig
+}
+
+const useQRCode = (grid: {
+  qrcode?: ExtendedQRCodeProps | ExtendedQRCodeProps[]
+}): columnconfig | columnconfig[] | null => {
+  if (!grid.qrcode) return null
+
+  const renderQRCode = (
+    component: ExtendedQRCodeProps,
+    index: number
+  ): columnconfig => {
+    const {
+      value,
+      size,
+      title,
+      columnconfig: itemColumnConfig,
+      cellconfig,
+      ...restProps
+    } = component
+
+    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'
+      )
+    }
+
+    const mergedConfig: columnconfig = {
+      ...itemColumnConfig,
+      cellconfig: {
+        ...cellconfig,
+      },
+      component: (
+        <QRCodeComponent
+          key={`qrcode-${index}`}
+          value={value}
+          size={size}
+          title={title}
+          {...restProps}
+        />
+      ),
+    }
+
+    return mergedConfig
+  }
+
+  if (Array.isArray(grid.qrcode)) {
+    return grid.qrcode.map(renderQRCode)
+  } else {
+    return renderQRCode(grid.qrcode, 0)
+  }
+}
+
+export default useQRCode

package/src/components/Content/index.tsx

@@ -56,6 +56,7 @@ import useNumberField, {
 import usePasswordField, {
   ExtendedPasswordFieldProps,
 } from './Structure/passwordField/usePasswordField'
+import useQRCode, { ExtendedQRCodeProps } from './Structure/qrcode/useQRCode'
 
 /**
  * Props for the ContentSection component.
@@ -88,6 +89,7 @@ export interface ContentSectionProps {
     searchbar?: ExtendedSearchbarProps | ExtendedSearchbarProps[]
     numberField?: ExtendedNumberFieldProps | ExtendedNumberFieldProps[]
     passwordField?: ExtendedPasswordFieldProps | ExtendedPasswordFieldProps[]
+    qrcode?: ExtendedQRCodeProps | ExtendedQRCodeProps[]
   }>
   width?: number
 }
@@ -137,6 +139,7 @@ const RenderContent: React.FC<
   addToColumnConfigs(useSearchbar(props))
   addToColumnConfigs(useNumberField({ numberField: props.numberField }))
   addToColumnConfigs(usePasswordField({ passwordField: props.passwordField }))
+  addToColumnConfigs(useQRCode({ qrcode: props.qrcode }))
 
   const updatedGridConfig: gridconfig = {
     ...grid.gridconfig,

package/src/components/QRCode/index.tsx

@@ -0,0 +1,105 @@
+import React, { useMemo } from 'react'
+import QRCode from 'react-qr-code'
+import { Box, Typography, Paper, Theme, CircularProgress } from '@mui/material'
+import { SxProps } from '@mui/system'
+
+/**
+ * Props for the QRCodeComponent
+ * @typedef {Object} QRCodeProps
+ * @property {string} value - The value to be encoded in the QR code
+ * @property {number} [size] - The size of the QR code in pixels
+ * @property {string} [title] - An optional title to display above the QR code
+ * @property {SxProps<Theme>} [sx] - Custom styles to apply to the component
+ */
+export interface QRCodeProps {
+  value: string
+  size?: number
+  title?: string
+  sx?: SxProps<Theme>
+}
+
+/**
+ * A component that displays a QR code with Material-UI styling
+ * @param {QRCodeProps} props - The props for the component
+ * @returns {React.ReactElement} The rendered QR code component
+ */
+const QRCodeComponent: React.FC<QRCodeProps> = React.memo(
+  ({ value, size = 256, title, sx }) => {
+    // Validate the QR code value
+    const isValidValue = useMemo(() => {
+      if (!value) return false
+      try {
+        // Check if the value is a valid URL
+        new URL(value)
+        return true
+      } catch {
+        // If not a URL, check if it's a non-empty string
+        return typeof value === 'string' && value.trim().length > 0
+      }
+    }, [value])
+
+    // Calculate responsive size
+    const responsiveSize = useMemo(() => {
+      return Math.min(size, window.innerWidth - 32) // 32px for padding
+    }, [size])
+
+    if (!isValidValue) {
+      return (
+        <Box sx={{ ...sx, p: 2 }} role="alert">
+          <Typography color="error">
+            Error: Invalid or empty QR code value
+          </Typography>
+        </Box>
+      )
+    }
+
+    return (
+      <Paper
+        elevation={3}
+        sx={{
+          ...sx,
+          p: 3,
+          display: 'inline-block',
+          maxWidth: '100%',
+          boxSizing: 'border-box',
+        }}
+      >
+        {title && (
+          <Typography variant="h6" gutterBottom align="center">
+            {title}
+          </Typography>
+        )}
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            width: responsiveSize,
+            height: responsiveSize,
+            margin: 'auto',
+          }}
+        >
+          <React.Suspense
+            fallback={
+              <CircularProgress
+                size={responsiveSize / 4}
+                aria-label="Loading QR Code"
+              />
+            }
+          >
+            <QRCode
+              value={value}
+              size={responsiveSize}
+              style={{ height: 'auto', maxWidth: '100%', width: '100%' }}
+              aria-label={`QR Code for ${title || value}`}
+            />
+          </React.Suspense>
+        </Box>
+      </Paper>
+    )
+  }
+)
+
+QRCodeComponent.displayName = 'QRCodeComponent'
+
+export default QRCodeComponent

package/src/index.ts

@@ -1,3 +1,5 @@
+import React from 'react'
+
 // Components
 import CustomButton from './components/Button'
 import CustomGrid, {
@@ -34,7 +36,7 @@ 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'
+import QRCodeComponent, { QRCodeProps } from './components/QRCode'
 
 // New imports
 import DateField from './components/DateField'
@@ -183,6 +185,7 @@ export { CustomToolbar }
 export { TransferList }
 export { StyledTooltip }
 export { formContainerStyle }
+export { QRCodeComponent }
 
 // New named exports
 export { DateField }
@@ -215,6 +218,7 @@ export type { CustomStepperProps }
 export type { ToolbarProps }
 export type { TransferListProps }
 export type { CustomTooltipProps }
+export type { QRCodeProps }
 
 // Additional type exports for the newly declared types
 export type { TypographyComponentProps }