goobs-frontend 0.7.67 → 0.7.69

package/src/components/IncrementNumberField/index.tsx

@@ -0,0 +1,123 @@
+'use client'
+import React, { useState, useCallback } from 'react'
+import { TextField, Button, Box, TextFieldProps } from '@mui/material'
+import { styled } from '@mui/material/styles'
+
+export interface IncrementNumberFieldProps
+  extends Omit<TextFieldProps, 'onChange'> {
+  initialValue?: string
+  onChange?: () => void
+  backgroundcolor?: string
+  outlinecolor?: string
+  fontcolor?: string
+  label?: string
+}
+
+const StyledTextField = styled(TextField)<{
+  backgroundcolor?: string
+  outlinecolor?: string
+  fontcolor?: string
+}>(({ theme, backgroundcolor, outlinecolor, fontcolor }) => ({
+  '& .MuiOutlinedInput-root': {
+    backgroundColor: backgroundcolor || theme.palette.background.paper,
+    '& fieldset': {
+      borderColor: outlinecolor || theme.palette.primary.main,
+    },
+    '&:hover fieldset': {
+      borderColor: outlinecolor || theme.palette.primary.main,
+    },
+    '&.Mui-focused fieldset': {
+      borderColor: outlinecolor || theme.palette.primary.main,
+    },
+  },
+  '& .MuiInputLabel-root': {
+    color: fontcolor || theme.palette.text.primary,
+    '&.Mui-focused': {
+      color: fontcolor || theme.palette.primary.main,
+    },
+  },
+  '& .MuiInputBase-input': {
+    color: fontcolor || theme.palette.text.primary,
+    textAlign: 'center',
+    padding: '8px 0',
+  },
+}))
+
+const StyledButton = styled(Button)(({ theme }) => ({
+  minWidth: '36px',
+  padding: 0,
+  height: '100%',
+  borderRadius: '4px',
+  backgroundColor: theme.palette.grey[300],
+  color: theme.palette.text.primary,
+  '&:hover': {
+    backgroundColor: theme.palette.grey[400],
+  },
+}))
+
+const IncrementNumberField: React.FC<IncrementNumberFieldProps> = ({
+  initialValue = '0',
+  onChange,
+  backgroundcolor,
+  outlinecolor,
+  fontcolor,
+  label,
+  ...rest
+}) => {
+  const [value, setValue] = useState(initialValue)
+
+  const handleIncrement = useCallback(() => {
+    setValue(prev => {
+      const num = parseInt(prev)
+      if (isNaN(num)) {
+        return '0'
+      }
+      const newValue = (num + 1).toString()
+      onChange?.()
+      return newValue
+    })
+  }, [onChange])
+
+  const handleDecrement = useCallback(() => {
+    setValue(prev => {
+      const num = parseInt(prev)
+      if (isNaN(num)) {
+        return '0'
+      }
+      const newValue = Math.max(0, num - 1).toString()
+      onChange?.()
+      return newValue
+    })
+  }, [onChange])
+
+  const handleChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const numValue = event.target.value.replace(/[^0-9]/g, '')
+      const newValue = numValue === '' ? '0' : numValue
+      setValue(newValue)
+      onChange?.()
+    },
+    [onChange]
+  )
+
+  return (
+    <Box display="flex" alignItems="center">
+      <StyledButton onClick={handleDecrement}>-</StyledButton>
+      <StyledTextField
+        value={value}
+        onChange={handleChange}
+        backgroundcolor={backgroundcolor}
+        outlinecolor={outlinecolor}
+        fontcolor={fontcolor}
+        label={label}
+        variant="outlined"
+        size="small"
+        inputProps={{ style: { width: '40px' } }}
+        {...rest}
+      />
+      <StyledButton onClick={handleIncrement}>+</StyledButton>
+    </Box>
+  )
+}
+
+export default IncrementNumberField

package/src/components/Nav/HorizontalVariant/index.tsx

@@ -1,7 +1,6 @@
 'use client'
-import React, { useEffect } from 'react'
+import React, { useState, useEffect } from 'react'
 import { Box, Tabs, Tab } from '@mui/material'
-import { session } from 'goobs-cache'
 import { NavProps, SubNav, View } from '../index'
 
 /**
@@ -42,24 +41,31 @@ function HorizontalVariant({
   items,
   height = '80px',
   alignment = 'left',
-  navname,
+  navname = '',
 }: HorizontalVariantProps) {
   /**
    * State to keep track of active tab values for different navigation components.
    */
-  const activeTabValuesAtom = session.atom<
-    Record<string, ActiveTabValue | null>
+  const [activeTabValues, setActiveTabValues] = useState<
+    Record<string, ActiveTabValue>
   >({})
-  const [activeTabValues, setActiveTabValues] =
-    session.useAtom(activeTabValuesAtom)
 
   /**
    * Effect hook to initialize the active tab values when the component mounts.
    */
   useEffect(() => {
-    // The initialization is now handled by the session atom
-    // No need to fetch from cache as it's automatically handled by goobs-cache
-  }, [])
+    if (!activeTabValues[navname]) {
+      const firstTab = items.find(item => 'orientation' in item) as
+        | NavProps
+        | undefined
+      if (firstTab && firstTab.title) {
+        setActiveTabValues(prev => ({
+          ...prev,
+          [navname]: { tabId: firstTab.title as string },
+        }))
+      }
+    }
+  }, [items, navname, activeTabValues])
 
   /**
    * Handles tab change events.
@@ -71,7 +77,7 @@ function HorizontalVariant({
   const handleTabChange = (event: React.SyntheticEvent, newValue: string) => {
     setActiveTabValues(prev => ({
       ...prev,
-      [navname ?? '']: { tabId: newValue },
+      [navname]: { tabId: newValue },
     }))
   }
 
@@ -110,7 +116,7 @@ function HorizontalVariant({
       }}
     >
       <Tabs
-        value={activeTabValues?.[navname ?? '']?.tabId || false}
+        value={activeTabValues[navname]?.tabId || ''}
         onChange={handleTabChange}
         aria-label="nav tabs"
         sx={{

package/src/components/Nav/VerticalVariant/index.tsx

@@ -12,7 +12,8 @@ import {
   AccordionDetails,
   List,
 } from '@mui/material'
-import StyledComponent from '../../StyledComponent'
+import Dropdown from '../../Dropdown'
+import Searchbar from '../../Searchbar'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
@@ -390,26 +391,29 @@ function VerticalVariant({
         {(showDropdown || showSearchbar) && (
           <Stack mt={1} spacing={1}>
             {showDropdown && (
-              <StyledComponent
+              <Dropdown
                 label={dropdownLabel}
-                componentvariant="dropdown"
-                outlinecolor="none"
                 options={navOptions}
                 backgroundcolor={white.main}
-                shrunklabellocation="above"
+                outlinecolor="none"
+                fontcolor={black.main}
                 shrunkfontcolor={white.main}
-                unshrunkfontcolor={black.main}
+                onChange={() => {
+                  console.log('Dropdown selection changed')
+                }}
               />
             )}
             {showSearchbar && (
-              <StyledComponent
-                componentvariant="searchbar"
+              <Searchbar
                 label={searchbarLabel}
                 backgroundcolor={semiTransparentWhite.main}
                 iconcolor={white.main}
                 outlinecolor="none"
-                shrunklabellocation="onnotch"
-                combinedfontcolor={white.main}
+                fontcolor={white.main}
+                placeholder="Search..."
+                onChange={() => {
+                  console.log('Search value changed')
+                }}
               />
             )}
           </Stack>

package/src/components/NumberField/index.tsx

@@ -0,0 +1,95 @@
+'use client'
+import React, { useState, useCallback } from 'react'
+import { TextField, TextFieldProps } from '@mui/material'
+import { styled } from '@mui/material/styles'
+
+export interface NumberFieldProps extends Omit<TextFieldProps, 'onChange'> {
+  initialValue?: string
+  onChange?: () => void
+  backgroundcolor?: string
+  outlinecolor?: string
+  fontcolor?: string
+  label?: string
+  min?: number
+  max?: number
+}
+
+const StyledTextField = styled(TextField)<{
+  backgroundcolor?: string
+  outlinecolor?: string
+  fontcolor?: string
+}>(({ theme, backgroundcolor, outlinecolor, fontcolor }) => ({
+  '& .MuiOutlinedInput-root': {
+    backgroundColor: backgroundcolor || theme.palette.background.paper,
+    '& fieldset': {
+      borderColor: outlinecolor || theme.palette.primary.main,
+    },
+    '&:hover fieldset': {
+      borderColor: outlinecolor || theme.palette.primary.main,
+    },
+    '&.Mui-focused fieldset': {
+      borderColor: outlinecolor || theme.palette.primary.main,
+    },
+  },
+  '& .MuiInputLabel-root': {
+    color: fontcolor || theme.palette.text.primary,
+    '&.Mui-focused': {
+      color: fontcolor || theme.palette.primary.main,
+    },
+  },
+  '& .MuiInputBase-input': {
+    color: fontcolor || theme.palette.text.primary,
+  },
+}))
+
+const NumberField: React.FC<NumberFieldProps> = ({
+  initialValue = '',
+  onChange,
+  backgroundcolor,
+  outlinecolor,
+  fontcolor,
+  label,
+  min,
+  max,
+  ...rest
+}) => {
+  const [value, setValue] = useState(initialValue)
+
+  const handleChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const newValue = event.target.value.replace(/[^0-9]/g, '')
+      if (newValue === '') {
+        setValue('')
+        onChange?.()
+        return
+      }
+      const numValue = parseInt(newValue, 10)
+      if (min !== undefined && numValue < min) {
+        setValue(min.toString())
+      } else if (max !== undefined && numValue > max) {
+        setValue(max.toString())
+      } else {
+        setValue(newValue)
+      }
+      onChange?.()
+    },
+    [onChange, min, max]
+  )
+
+  return (
+    <StyledTextField
+      value={value}
+      onChange={handleChange}
+      backgroundcolor={backgroundcolor}
+      outlinecolor={outlinecolor}
+      fontcolor={fontcolor}
+      label={label}
+      variant="outlined"
+      type="text"
+      inputMode="numeric"
+      {...rest}
+    />
+  )
+}
+
+export default NumberField

package/src/components/PasswordField/index.tsx

@@ -0,0 +1,105 @@
+'use client'
+import React, { useState, useCallback } from 'react'
+import { TextField, TextFieldProps, InputAdornment } from '@mui/material'
+import { styled } from '@mui/material/styles'
+import ShowHideEyeIcon from '../Icons/ShowHideEye'
+
+export interface PasswordFieldProps extends Omit<TextFieldProps, 'type'> {
+  backgroundcolor?: string
+  outlinecolor?: string
+  fontcolor?: string
+  label?: string
+}
+
+const StyledTextField = styled(TextField)<{
+  backgroundcolor?: string
+  outlinecolor?: string
+  fontcolor?: string
+}>(({ theme, backgroundcolor, outlinecolor, fontcolor }) => ({
+  '& .MuiOutlinedInput-root': {
+    backgroundColor: backgroundcolor || theme.palette.background.paper,
+    '& fieldset': {
+      borderColor: outlinecolor || theme.palette.primary.main,
+    },
+    '&:hover fieldset': {
+      borderColor: outlinecolor || theme.palette.primary.main,
+    },
+    '&.Mui-focused fieldset': {
+      borderColor: outlinecolor || theme.palette.primary.main,
+    },
+  },
+  '& .MuiInputLabel-root': {
+    color: fontcolor || theme.palette.text.primary,
+    '&.Mui-focused': {
+      color: fontcolor || theme.palette.primary.main,
+    },
+  },
+  '& .MuiInputBase-input': {
+    color: fontcolor || theme.palette.text.primary,
+  },
+}))
+
+interface AdornmentProps {
+  componentvariant: string
+  passwordVisible?: boolean
+  togglePasswordVisibility?: () => void
+}
+
+const EndAdornment: React.FC<AdornmentProps> = ({
+  componentvariant,
+  passwordVisible,
+  togglePasswordVisibility,
+}) => {
+  if (componentvariant === 'password') {
+    return (
+      <InputAdornment
+        position="end"
+        onClick={togglePasswordVisibility}
+        style={{ cursor: 'pointer' }}
+      >
+        <ShowHideEyeIcon visible={passwordVisible} />
+      </InputAdornment>
+    )
+  }
+  return null
+}
+
+const PasswordField: React.FC<PasswordFieldProps> = ({
+  backgroundcolor,
+  outlinecolor,
+  fontcolor,
+  label = 'Password',
+  ...rest
+}) => {
+  const [passwordVisible, setPasswordVisible] = useState(false)
+
+  const togglePasswordVisibility = useCallback(() => {
+    setPasswordVisible(prev => {
+      console.log('togglePasswordVisibility', { passwordVisible: !prev })
+      return !prev
+    })
+  }, [])
+
+  return (
+    <StyledTextField
+      type={passwordVisible ? 'text' : 'password'}
+      label={label}
+      backgroundcolor={backgroundcolor}
+      outlinecolor={outlinecolor}
+      fontcolor={fontcolor}
+      fullWidth
+      InputProps={{
+        endAdornment: (
+          <EndAdornment
+            componentvariant="password"
+            passwordVisible={passwordVisible}
+            togglePasswordVisibility={togglePasswordVisibility}
+          />
+        ),
+      }}
+      {...rest}
+    />
+  )
+}
+
+export default PasswordField

package/src/components/PhoneNumberField/index.tsx

@@ -0,0 +1,102 @@
+'use client'
+import React, { useState, useCallback } from 'react'
+import { TextField, TextFieldProps } from '@mui/material'
+import { styled } from '@mui/material/styles'
+
+interface PhoneNumberFieldProps extends Omit<TextFieldProps, 'onChange'> {
+  initialValue?: string
+  onChange?: () => void
+  backgroundcolor?: string
+  outlinecolor?: string
+  fontcolor?: string
+  label?: string
+}
+
+const StyledTextField = styled(TextField)<{
+  backgroundcolor?: string
+  outlinecolor?: string
+  fontcolor?: string
+}>(({ theme, backgroundcolor, outlinecolor, fontcolor }) => ({
+  '& .MuiOutlinedInput-root': {
+    backgroundColor: backgroundcolor || theme.palette.background.paper,
+    '& fieldset': {
+      borderColor: outlinecolor || theme.palette.primary.main,
+    },
+    '&:hover fieldset': {
+      borderColor: outlinecolor || theme.palette.primary.main,
+    },
+    '&.Mui-focused fieldset': {
+      borderColor: outlinecolor || theme.palette.primary.main,
+    },
+  },
+  '& .MuiInputLabel-root': {
+    color: fontcolor || theme.palette.text.primary,
+    '&.Mui-focused': {
+      color: fontcolor || theme.palette.primary.main,
+    },
+  },
+  '& .MuiInputBase-input': {
+    color: fontcolor || theme.palette.text.primary,
+  },
+}))
+
+const formatPhoneNumber = (value: string): string => {
+  const digits = value.replace(/\D/g, '')
+  const limitedDigits = digits.slice(0, 10)
+  let formattedNumber = '+1 '
+  if (limitedDigits.length > 0) {
+    formattedNumber += limitedDigits.slice(0, 3)
+    if (limitedDigits.length > 3) {
+      formattedNumber += '-' + limitedDigits.slice(3, 6)
+      if (limitedDigits.length > 6) {
+        formattedNumber += '-' + limitedDigits.slice(6)
+      }
+    }
+  }
+  return formattedNumber.trim()
+}
+
+const PhoneNumberField: React.FC<PhoneNumberFieldProps> = ({
+  initialValue = '',
+  onChange,
+  backgroundcolor,
+  outlinecolor,
+  fontcolor,
+  label = 'Phone Number',
+  ...rest
+}) => {
+  const [phoneNumber, setPhoneNumber] = useState(
+    formatPhoneNumber(initialValue)
+  )
+
+  const handlePhoneNumberChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      const input = e.target.value
+      let strippedInput = input.replace(/^\+1\s?/, '').replace(/\D/g, '')
+      strippedInput = strippedInput.slice(0, 10)
+      const formattedValue =
+        strippedInput.length > 0 ? formatPhoneNumber(strippedInput) : '+1 '
+      setPhoneNumber(formattedValue)
+      onChange?.()
+    },
+    [onChange]
+  )
+
+  return (
+    <StyledTextField
+      label={label}
+      value={phoneNumber}
+      onChange={handlePhoneNumberChange}
+      backgroundcolor={backgroundcolor}
+      outlinecolor={outlinecolor}
+      fontcolor={fontcolor}
+      fullWidth
+      inputProps={{
+        maxLength: 16,
+      }}
+      {...rest}
+    />
+  )
+}
+
+export default PhoneNumberField

package/src/components/PricingTable/index.tsx

@@ -6,7 +6,7 @@ import CheckCircleIcon from '@mui/icons-material/CheckCircle'
 import { Typography } from '../Typography'
 import StyledTooltip from '../Tooltip'
 import CustomButton from '../Button'
-import StyledComponent from '../StyledComponent'
+import Dropdown from '../Dropdown'
 import CustomGrid from './../../components/Grid'
 import { columnconfig, gridconfig } from './../../components/Grid/'
 import defaultConfig from './defaultconfig'
@@ -117,15 +117,17 @@ const PricingTable: React.FC<PricingProps> = props => {
       headerColumnConfigs.push({
         ...config.packagecolumns.columnconfig,
         component: (
-          <StyledComponent
+          <Dropdown
             label="Packages"
-            shrunklabellocation="above"
-            componentvariant="dropdown"
-            shrunkfontcolor={black.main}
-            outlinecolor={black.main}
-            backgroundcolor={semiTransparentBlack.main}
-            defaultOption="ThothOS"
             options={['ThothOS', 'ThothOS Pro', 'ThothOS Enterprise']}
+            defaultOption="ThothOS"
+            backgroundcolor={semiTransparentBlack.main}
+            outlinecolor={black.main}
+            fontcolor={black.main}
+            shrunkfontcolor={black.main}
+            onChange={() => {
+              console.log('Package selection changed')
+            }}
           />
         ),
       })

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