goobs-frontend 0.7.69 → 0.7.71

package/src/components/PricingTable/index.tsx

@@ -1,6 +1,6 @@
 'use client'
-import React from 'react'
-import { Box, Paper } from '@mui/material'
+import React, { useState, useCallback, useMemo } from 'react'
+import { Box, Paper, SelectChangeEvent } from '@mui/material'
 import InfoIcon from '@mui/icons-material/Info'
 import CheckCircleIcon from '@mui/icons-material/CheckCircle'
 import { Typography } from '../Typography'
@@ -20,13 +20,10 @@ import {
 } from '../../styles/palette'
 
 type TiedToPackage = {
-  tiedtopackages?: string
+  tiedtopackages?: string[]
   columnconfig?: Omit<columnconfig, 'component'>
 }
 
-/**
- * Interface for sub-features in the pricing table
- */
 interface SubFeature {
   title: string
   titlelink?: string
@@ -35,9 +32,6 @@ interface SubFeature {
   tiedtopackage?: TiedToPackage
 }
 
-/**
- * Interface for main features in the pricing table
- */
 interface Feature {
   title: string
   infopopuptext?: string
@@ -47,9 +41,6 @@ interface Feature {
   tiedtopackage?: TiedToPackage
 }
 
-/**
- * Interface for the props of the PricingTable component
- */
 export interface PricingProps {
   headerGridConfig?: gridconfig
   tabletitle?: {
@@ -58,46 +49,49 @@ export interface PricingProps {
   }
   packagecolumns?: {
     columnheaders?: string
-    packagenames?: string
+    packagenames?: string[]
     columnconfig?: columnconfig
   }
   monthlyprice?: {
-    prices?: string
+    prices?: string[]
     columnconfig?: columnconfig
   }
   annualprice?: {
-    annualprices?: string
+    annualprices?: string[]
     columnconfig?: columnconfig
   }
   featureGridConfig?: gridconfig
   features?: Feature[]
   buttoncolumns?: {
-    buttontexts?: string
-    buttonlinks?: string
+    buttontexts?: string[]
+    buttonlinks?: string[]
     columnconfig?: columnconfig
   }
 }
 
-/**
- * PricingTable component for rendering a customizable pricing table
- * @param {PricingProps} props - The props for the component
- * @returns {JSX.Element} The rendered PricingTable component
- */
 const PricingTable: React.FC<PricingProps> = props => {
-  // Merge default config with provided props
-  const config: PricingProps = { ...defaultConfig, ...props }
-
   const router = useRouter()
+  const [selectedPackageIndex, setSelectedPackageIndex] = useState(0)
+
+  const config = useMemo(() => {
+    return { ...defaultConfig, ...props }
+  }, [props])
 
-  /**
-   * Renders column configurations for the pricing table
-   * @returns {{ headerColumnConfigs: columnconfig[], featureColumnConfigs: columnconfig[] }}
-   */
-  const renderColumnConfigs = () => {
+  const handlePackageChange = useCallback(
+    (event: SelectChangeEvent<unknown>) => {
+      const newValue = event.target.value as string
+      const newIndex =
+        config.packagecolumns?.packagenames?.indexOf(newValue) ?? 0
+      setSelectedPackageIndex(newIndex)
+      console.log('Package selection changed to:', newValue)
+    },
+    [config.packagecolumns?.packagenames]
+  )
+
+  const renderColumnConfigs = useCallback(() => {
     const headerColumnConfigs: columnconfig[] = []
     const featureColumnConfigs: columnconfig[] = []
 
-    // Render table title
     if (config.tabletitle && config.tabletitle.columnconfig) {
       headerColumnConfigs.push({
         ...config.tabletitle.columnconfig,
@@ -112,34 +106,33 @@ const PricingTable: React.FC<PricingProps> = props => {
       })
     }
 
-    // Render package dropdown
     if (config.packagecolumns && config.packagecolumns.columnconfig) {
       headerColumnConfigs.push({
         ...config.packagecolumns.columnconfig,
         component: (
           <Dropdown
             label="Packages"
-            options={['ThothOS', 'ThothOS Pro', 'ThothOS Enterprise']}
-            defaultOption="ThothOS"
+            options={(config.packagecolumns.packagenames || []).map(name => ({
+              value: name,
+              label: name,
+            }))}
+            defaultValue={config.packagecolumns.packagenames?.[0] || ''}
             backgroundcolor={semiTransparentBlack.main}
             outlinecolor={black.main}
             fontcolor={black.main}
             shrunkfontcolor={black.main}
-            onChange={() => {
-              console.log('Package selection changed')
-            }}
+            onChange={handlePackageChange}
           />
         ),
       })
     }
 
-    // Render monthly price
     if (config.monthlyprice && config.monthlyprice.columnconfig) {
       headerColumnConfigs.push({
         ...config.monthlyprice.columnconfig,
         component: (
           <Typography
-            text={config.monthlyprice.prices}
+            text={config.monthlyprice.prices?.[selectedPackageIndex] || ''}
             fontcolor={black.main}
             fontvariant="merrih5"
           />
@@ -147,13 +140,12 @@ const PricingTable: React.FC<PricingProps> = props => {
       })
     }
 
-    // Render annual price
     if (config.annualprice && config.annualprice.columnconfig) {
       headerColumnConfigs.push({
         ...config.annualprice.columnconfig,
         component: (
           <Typography
-            text={config.annualprice.annualprices}
+            text={config.annualprice.annualprices?.[selectedPackageIndex] || ''}
             fontcolor={black.main}
             fontvariant="merrih5"
           />
@@ -161,12 +153,7 @@ const PricingTable: React.FC<PricingProps> = props => {
       })
     }
 
-    /**
-     * Renders a feature and its subfeatures
-     * @param {Feature} feature - The feature to render
-     */
     const renderFeature = (feature: Feature) => {
-      // Render main feature
       if (feature.columnconfig) {
         featureColumnConfigs.push({
           ...feature.columnconfig,
@@ -197,14 +184,15 @@ const PricingTable: React.FC<PricingProps> = props => {
         } as columnconfig)
       }
 
-      // Render feature checkbox
       if (feature.tiedtopackage && feature.tiedtopackage.columnconfig) {
         const tiedConfig: columnconfig = {
           ...feature.tiedtopackage.columnconfig,
           cellconfig: {
             minHeight: '40px',
           },
-          component: feature.tiedtopackage.tiedtopackages ? (
+          component: feature.tiedtopackage.tiedtopackages?.[
+            selectedPackageIndex
+          ] ? (
             <CheckCircleIcon />
           ) : (
             <Box sx={{ width: '24px', height: '24px' }} />
@@ -213,7 +201,6 @@ const PricingTable: React.FC<PricingProps> = props => {
         featureColumnConfigs.push(tiedConfig)
       }
 
-      // Render subfeatures
       feature.subfeatures.forEach(subFeature => {
         if (subFeature.columnconfig) {
           featureColumnConfigs.push({
@@ -245,14 +232,15 @@ const PricingTable: React.FC<PricingProps> = props => {
           } as columnconfig)
         }
 
-        // Render subfeature checkbox
         if (subFeature.tiedtopackage && subFeature.tiedtopackage.columnconfig) {
           const tiedConfig: columnconfig = {
             ...subFeature.tiedtopackage.columnconfig,
             cellconfig: {
               minHeight: '40px',
             },
-            component: subFeature.tiedtopackage.tiedtopackages ? (
+            component: subFeature.tiedtopackage.tiedtopackages?.[
+              selectedPackageIndex
+            ] ? (
               <CheckCircleIcon />
             ) : (
               <Box sx={{ width: '24px', height: '24px' }} />
@@ -263,12 +251,11 @@ const PricingTable: React.FC<PricingProps> = props => {
       })
     }
 
-    // Render all features
     config.features?.forEach(renderFeature)
 
-    // Render button columns
     if (config.buttoncolumns && config.buttoncolumns.columnconfig) {
-      const buttonLink = config.buttoncolumns.buttonlinks || '#'
+      const buttonLink =
+        config.buttoncolumns.buttonlinks?.[selectedPackageIndex] || '#'
 
       featureColumnConfigs.push({
         ...config.buttoncolumns.columnconfig,
@@ -280,14 +267,16 @@ const PricingTable: React.FC<PricingProps> = props => {
             href={buttonLink}
             width="100%"
             onClick={() => router.push(buttonLink)}
-            text={config.buttoncolumns.buttontexts}
+            text={
+              config.buttoncolumns.buttontexts?.[selectedPackageIndex] || ''
+            }
           />
         ),
       })
     }
 
     return { headerColumnConfigs, featureColumnConfigs }
-  }
+  }, [config, selectedPackageIndex, router, handlePackageChange])
 
   const { headerColumnConfigs, featureColumnConfigs } = renderColumnConfigs()
 

package/src/components/TransferList/index.tsx

@@ -10,40 +10,20 @@ import Checkbox from '@mui/material/Checkbox'
 import Button from '@mui/material/Button'
 import Paper from '@mui/material/Paper'
 
-/**
- * Returns the elements in array 'a' that are not in array 'b'
- * @param {readonly string[]} a - The first array
- * @param {readonly string[]} b - The second array
- * @returns {string[]} The elements in 'a' that are not in 'b'
- */
 function not(a: readonly string[], b: readonly string[]) {
   return a.filter(value => b.indexOf(value) === -1)
 }
 
-/**
- * Returns the common elements between arrays 'a' and 'b'
- * @param {readonly string[]} a - The first array
- * @param {readonly string[]} b - The second array
- * @returns {string[]} The common elements between 'a' and 'b'
- */
 function intersection(a: readonly string[], b: readonly string[]) {
   return a.filter(value => b.indexOf(value) !== -1)
 }
 
-/**
- * Props interface for the TransferList component
- */
 export interface TransferListProps {
   leftItems: readonly string[]
   rightItems: readonly string[]
-  onChange?: (items: string[]) => void
+  onChange?: () => void
 }
 
-/**
- * TransferList component that allows moving items between two lists
- * @param {TransferListProps} props - The props for the TransferList component
- * @returns {JSX.Element} The rendered TransferList component
- */
 const TransferList: React.FC<TransferListProps> = ({
   leftItems,
   rightItems,
@@ -56,10 +36,6 @@ const TransferList: React.FC<TransferListProps> = ({
   const leftChecked = intersection(checked, left)
   const rightChecked = intersection(checked, right)
 
-  /**
-   * Toggles the checked state of an item
-   * @param {string} value - The value to toggle
-   */
   const handleToggle = (value: string) => () => {
     const currentIndex = checked.indexOf(value)
     const newChecked = [...checked]
@@ -73,63 +49,40 @@ const TransferList: React.FC<TransferListProps> = ({
     setChecked(newChecked)
   }
 
-  /**
-   * Moves all items from left to right
-   */
   const handleAllRight = () => {
-    const newRight = right.concat(left)
-    setRight(newRight)
+    setRight(right.concat(left))
     setLeft([])
     if (onChange) {
-      onChange(newRight)
+      onChange()
     }
   }
 
-  /**
-   * Moves checked items from left to right
-   */
   const handleCheckedRight = () => {
-    const newRight = right.concat(leftChecked)
-    const newLeft = not(left, leftChecked)
-    setRight(newRight)
-    setLeft(newLeft)
+    setRight(right.concat(leftChecked))
+    setLeft(not(left, leftChecked))
     setChecked(not(checked, leftChecked))
     if (onChange) {
-      onChange(newRight)
+      onChange()
     }
   }
 
-  /**
-   * Moves checked items from right to left
-   */
   const handleCheckedLeft = () => {
-    const newLeft = left.concat(rightChecked)
-    const newRight = not(right, rightChecked)
-    setLeft(newLeft)
-    setRight(newRight)
+    setLeft(left.concat(rightChecked))
+    setRight(not(right, rightChecked))
     setChecked(not(checked, rightChecked))
     if (onChange) {
-      onChange(newRight)
+      onChange()
     }
   }
 
-  /**
-   * Moves all items from right to left
-   */
   const handleAllLeft = () => {
-    const newLeft = left.concat(right)
-    setLeft(newLeft)
+    setLeft(left.concat(right))
     setRight([])
     if (onChange) {
-      onChange([])
+      onChange()
     }
   }
 
-  /**
-   * Renders a custom list of items
-   * @param {readonly string[]} items - The items to render in the list
-   * @returns {JSX.Element} The rendered list
-   */
   const customList = (items: readonly string[]) => (
     <Paper sx={{ width: 200, height: 230, overflow: 'auto' }}>
       <List dense component="div" role="list">

package/src/index.ts

@@ -55,6 +55,21 @@ import { Animation } from './components/Content/Structure/animations'
 import { ExtendedButtonProps } from './components/Content/Structure/button/useButton'
 import { ExtendedTypographyProps } from './components/Content/Structure/typography/useGridTypography'
 import { ExtendedTextFieldProps } from './components/Content/Structure/textfield/useTextField'
+import { ExtendedQRCodeProps } from './components/Content/Structure/qrcode/useQRCode'
+import { ExtendedDropdownProps } from './components/Content/Structure/dropdown/useDropdown'
+import { ExtendedDateFieldProps } from './components/Content/Structure/datefield/useDateField'
+import { ExtendedNumberFieldProps } from './components/Content/Structure/numberField/useNumberField'
+import { ExtendedIncrementNumberFieldProps } from './components/Content/Structure/incremementNumberField/useIncremementNumberField'
+import { ExtendedPasswordFieldProps } from './components/Content/Structure/passwordField/usePasswordField'
+import { ExtendedSearchbarProps } from './components/Content/Structure/searchbar/useSearchbar'
+import { ExtendedCodeCopyProps } from './components/Content/Structure/codecopy/useCodeCopy'
+import { ExtendedCardProps } from './components/Content/Structure/card/useCard'
+import { ExtendedTransferListProps } from './components/Content/Structure/transferlist/useTransferList'
+import { ExtendedStepperProps } from './components/Content/Structure/stepper/useStepper'
+import { ExtendedPricingProps } from './components/Content/Structure/pricing/usePricing'
+import { ExtendedImageProps } from './components/Content/Structure/image/useImage'
+import { ExtendedConfirmationCodeInputsProps } from './components/Content/Structure/confirmationinput/useConfirmationInput'
+import { ExtendedRadioGroupProps } from './components/Content/Structure/radiogroup/useRadioGroup'
 
 // Colors
 import {
@@ -201,6 +216,19 @@ export { TextField }
 export type { ExtendedButtonProps }
 export type { ExtendedTypographyProps }
 export type { ExtendedTextFieldProps }
+export type { ExtendedNumberFieldProps }
+export type { ExtendedIncrementNumberFieldProps }
+export type { ExtendedPasswordFieldProps }
+export type { ExtendedSearchbarProps }
+export type { ExtendedCodeCopyProps }
+export type { ExtendedCardProps }
+export type { ExtendedTransferListProps }
+export type { ExtendedStepperProps }
+export type { ExtendedPricingProps }
+export type { ExtendedImageProps }
+export type { ExtendedConfirmationCodeInputsProps }
+export type { ExtendedRadioGroupProps }
+
 // Type exports
 export type { CustomButtonProps }
 export type { CustomGridProps }
@@ -219,6 +247,9 @@ export type { ToolbarProps }
 export type { TransferListProps }
 export type { CustomTooltipProps }
 export type { QRCodeProps }
+export type { ExtendedQRCodeProps }
+export type { ExtendedDropdownProps }
+export type { ExtendedDateFieldProps }
 
 // Additional type exports for the newly declared types
 export type { TypographyComponentProps }