goobs-frontend 0.8.11 → 0.8.13

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

@@ -1,5 +1,4 @@
 'use client'
-
 import React, { useState, useCallback } from 'react'
 import {
   Drawer,
@@ -36,6 +35,11 @@ export interface VerticalVariantProps {
   backgroundcolor?: string
   shrunkfontcolor?: string
   unshrunkfontcolor?: string
+  titleUrl?: string
+  mobileOpen?: boolean
+  onClose?: () => void
+  variant?: 'temporary' | 'permanent'
+  spacingfromtopofscreen?: string
 }
 
 function VerticalVariant({
@@ -54,6 +58,11 @@ function VerticalVariant({
   backgroundcolor,
   shrunkfontcolor = white.main,
   unshrunkfontcolor = white.main,
+  titleUrl = '/',
+  mobileOpen = false,
+  onClose,
+  variant = 'permanent',
+  spacingfromtopofscreen = '0px',
 }: VerticalVariantProps) {
   const router = useRouter()
   const [selectedNav, setSelectedNav] = useState<string | null>(null)
@@ -68,17 +77,22 @@ function VerticalVariant({
       if (nav.trigger === 'route') {
         if (nav.route) {
           router.push(nav.route)
+          if (variant === 'temporary' && onClose) {
+            onClose()
+          }
         }
       } else if (nav.trigger === 'onClick') {
         if (nav.onClick) {
           nav.onClick()
+          if (variant === 'temporary' && onClose) {
+            onClose()
+          }
         }
       }
     },
-    [router]
+    [router, variant, onClose]
   )
 
-  // Adjusted handler to match the SearchableDropdown onChange signature
   const handleSearchableNavChange = useCallback(
     (newValue: { value: string } | null) => {
       const newVal = newValue ? newValue.value : null
@@ -297,6 +311,7 @@ function VerticalVariant({
               color: 'white',
             }}
             href={view.route ?? ''}
+            onClick={variant === 'temporary' ? onClose : undefined}
           >
             <MenuItem
               sx={{
@@ -327,35 +342,21 @@ function VerticalVariant({
       expandedSubnavs,
       setExpandedSubnavs,
       handleNavClick,
+      variant,
+      onClose,
     ]
   )
 
-  return (
-    <Drawer
-      variant="permanent"
-      anchor={anchor}
-      elevation={0}
-      sx={{
-        width: verticalNavWidth,
-        height: '100%',
-        flexShrink: 0,
-        '& .MuiDrawer-paper': {
-          width: verticalNavWidth,
-          border: 0,
-          zIndex: theme => theme.zIndex.drawer - 1,
-          backgroundColor: ocean.main,
-          pt: '17px',
-          boxSizing: 'border-box',
-        },
-      }}
-    >
+  const drawerContent = (
+    <>
       <Box px={`15px`}>
         {showTitle && (
           <Box pt="0px" pb="0px">
             <Link
-              href="/dashboard/"
+              href={titleUrl || '/'}
               passHref
               style={{ textDecoration: 'none' }}
+              onClick={variant === 'temporary' ? onClose : undefined}
             >
               <Typography
                 fontvariant="merrih4"
@@ -366,7 +367,7 @@ function VerticalVariant({
           </Box>
         )}
         {showSearchableNav && (
-          <Stack mt={0} spacing={0}>
+          <Stack mt={{ xs: '10px', md: '10px', lg: 0 }} spacing={0}>
             <Box
               sx={{
                 position: 'relative',
@@ -408,6 +409,35 @@ function VerticalVariant({
             )
             .map(item => renderItem(item, 0))
         : items.map(item => renderItem(item, 0))}
+    </>
+  )
+
+  return (
+    <Drawer
+      variant={variant}
+      anchor={anchor}
+      open={variant === 'temporary' ? mobileOpen : true}
+      onClose={onClose}
+      elevation={0}
+      sx={{
+        width: variant === 'permanent' ? verticalNavWidth : 'auto',
+        height: '100%',
+        flexShrink: 0,
+        '& .MuiDrawer-paper': {
+          width: verticalNavWidth,
+          border: 0,
+          zIndex: theme =>
+            variant === 'temporary'
+              ? theme.zIndex.drawer + 2
+              : theme.zIndex.drawer - 1,
+          backgroundColor: ocean.main,
+          pt: '17px',
+          boxSizing: 'border-box',
+          marginTop: spacingfromtopofscreen,
+        },
+      }}
+    >
+      {drawerContent}
     </Drawer>
   )
 }

package/src/components/Nav/index.tsx

@@ -32,6 +32,11 @@ export interface NavProps {
   backgroundcolor?: string
   shrunkfontcolor?: string // Color of the label when shrunk
   unshrunkfontcolor?: string // Color of the label when not shrunk
+  titleUrl?: string // Changed from url to titleUrl
+  mobileOpen?: boolean // Controls mobile drawer open state
+  onClose?: () => void // Handler for closing mobile drawer
+  variant?: 'temporary' | 'permanent' // Drawer variant for mobile/desktop
+  spacingfromtopofscreen?: string // Spacing from top of screen
 }
 
 /**
@@ -75,6 +80,11 @@ function Nav({
   shrunkfontcolor = 'black',
   unshrunkfontcolor = 'black',
   backgroundcolor,
+  titleUrl, // Changed from url to titleUrl
+  mobileOpen = false,
+  onClose,
+  variant = 'permanent',
+  spacingfromtopofscreen,
 }: NavProps): JSX.Element {
   // State for expanded navigation items
   const [expandedNavs, setExpandedNavs] = useState<string[]>([])
@@ -116,7 +126,12 @@ function Nav({
         verticalNavWidth={`${verticalNavWidth}px`}
         shrunkfontcolor={shrunkfontcolor}
         unshrunkfontcolor={unshrunkfontcolor}
-        backgroundcolor={backgroundcolor} // Pass backgroundcolor to VerticalVariant
+        backgroundcolor={backgroundcolor}
+        titleUrl={titleUrl}
+        mobileOpen={mobileOpen}
+        onClose={onClose}
+        variant={variant}
+        spacingfromtopofscreen={spacingfromtopofscreen}
       />
     )
   } else {

package/src/components/PhoneNumberField/index.tsx

@@ -1,9 +1,15 @@
 'use client'
-import React, { useCallback, useMemo, useState } from 'react'
-import { Box, TextField as MuiTextField, TextFieldProps } from '@mui/material'
+import React, { useCallback, useState, useMemo } from 'react'
+import { Box } from '@mui/material'
+import TextField, { TextFieldProps } from '../TextField'
+
+const formatPhoneNumber = (inputValue: string): string => {
+  let digits = inputValue.replace(/\D/g, '')
+  // If it starts with '1', remove it because we already provide '+1'
+  if (digits.startsWith('1')) {
+    digits = digits.slice(1)
+  }
 
-const formatPhoneNumber = (value: string): string => {
-  const digits = value.replace(/\D/g, '')
   const limitedDigits = digits.slice(0, 10)
   let formattedNumber = '+1 '
   if (limitedDigits.length > 0) {
@@ -39,10 +45,17 @@ const PhoneNumberField: React.FC<TextFieldProps> = React.memo(props => {
     (e: React.ChangeEvent<HTMLInputElement>) => {
       const input = e.target.value
       let strippedInput = input.replace(/^\+1\s?/, '').replace(/\D/g, '')
+
+      // Remove leading '1' if present
+      if (strippedInput.startsWith('1')) {
+        strippedInput = strippedInput.slice(1)
+      }
+
       strippedInput = strippedInput.slice(0, 10)
       const formattedValue =
         strippedInput.length > 0 ? formatPhoneNumber(strippedInput) : '+1 '
       setPhoneNumber(formattedValue)
+
       if (onChange) {
         onChange(e)
       }
@@ -72,24 +85,30 @@ const PhoneNumberField: React.FC<TextFieldProps> = React.memo(props => {
     e.preventDefault()
   }, [])
 
-  const inputProps = useMemo(
-    () => ({
-      style: {
-        height: '40px',
-        padding: '8px 14px',
+  const mergedSlotProps = useMemo(() => {
+    return {
+      input: {
+        sx: {
+          height: '40px',
+          padding: '8px 0px',
+        },
       },
-    }),
-    []
-  )
-
-  const InputProps = useMemo(
-    () => ({
-      style: {
-        height: '45px',
+      inputLabel: {
+        sx: {
+          '&.MuiInputLabel-shrink': {
+            top: '0px',
+            left: '0px',
+          },
+          '&:not(.MuiInputLabel-shrink)': {
+            transform: 'scale(1)',
+            transformOrigin: 'top left',
+            top: '9px',
+            left: '12px',
+          },
+        },
       },
-    }),
-    []
-  )
+    }
+  }, [])
 
   return (
     <Box
@@ -98,12 +117,10 @@ const PhoneNumberField: React.FC<TextFieldProps> = React.memo(props => {
         flexDirection: 'column',
         justifyContent: 'center',
         width: '100%',
-        marginTop: '5px',
-        height: '70px',
       }}
       onClick={handleClick}
     >
-      <MuiTextField
+      <TextField
         name={name}
         label={label}
         placeholder={placeholder}
@@ -114,8 +131,7 @@ const PhoneNumberField: React.FC<TextFieldProps> = React.memo(props => {
         error={error}
         fullWidth
         variant="outlined"
-        inputProps={inputProps}
-        InputProps={InputProps}
+        slotProps={mergedSlotProps}
         {...restProps}
       />
     </Box>

package/src/components/PricingTable/defaultconfig.tsx

@@ -2,13 +2,16 @@ import { PricingProps } from './index'
 
 /**
  * Default configuration for the PricingTable component
+ *
+ * All margin and padding values are now defined as ResponsiveObject<number> directly
+ * in the columnconfig, allowing you to edit each breakpoint value individually.
  */
+
 const defaultConfig: PricingProps = {
   // Configuration for the header grid
   headerGridConfig: {
     gridname: 'pricingtableheader',
     alignment: 'center' as const,
-    margintop: 1,
     gridwidth: '100%',
   },
   // Configuration for the table title
@@ -19,11 +22,27 @@ const defaultConfig: PricingProps = {
       column: 1,
       gridname: 'pricingtableheader',
       alignment: 'left' as const,
-      marginleft: 3,
-      marginbottom: 1,
+      paddingleft: {
+        xs: 2,
+        sm: 2,
+        md: 2,
+        ms: 2,
+        ml: 2,
+        lg: 2,
+        xl: 2,
+      },
+      paddingtop: {
+        xs: 1,
+        sm: 1,
+        md: 1,
+        ms: 1,
+        ml: 1,
+        lg: 1,
+        xl: 1,
+      },
       mobilewidth: '100%',
       tabletwidth: '100%',
-      computerwidth: '100%',
+      computerwidth: '50%',
     },
   },
   // Configuration for package columns
@@ -31,10 +50,46 @@ const defaultConfig: PricingProps = {
     packagenames: ['ThothOS', 'ThothOS Pro', 'ThothOS Enterprise'],
     columnconfig: {
       row: 1,
-      column: 2,
+      column: 1,
       gridname: 'pricingtableheader',
       alignment: 'center' as const,
-      mobilewidth: '80%',
+      paddingleft: {
+        xs: 2,
+        sm: 2,
+        md: 2,
+        ms: 2,
+        ml: 2,
+        lg: 2,
+        xl: 2,
+      },
+      paddingright: {
+        xs: 2,
+        sm: 2,
+        md: 2,
+        ms: 2,
+        ml: 2,
+        lg: 2,
+        xl: 2,
+      },
+      paddingtop: {
+        xs: 2.5,
+        sm: 2.5,
+        md: 2.5,
+        ms: 2.5,
+        ml: 2.5,
+        lg: 2.5,
+        xl: 2.5,
+      },
+      paddingbottom: {
+        xs: 1,
+        sm: 2,
+        md: 2,
+        ms: 2,
+        ml: 2,
+        lg: 2,
+        xl: 2,
+      },
+      mobilewidth: '100%',
       tabletwidth: '48%',
       computerwidth: '48%',
     },
@@ -250,10 +305,35 @@ const defaultConfig: PricingProps = {
     ],
     columnconfig: {
       row: 7,
-      column: 2,
+      column: 1,
       mobilewidth: '100%',
-      marginbottom: 1,
-      marginright: 1,
+      marginbottom: {
+        xs: 1,
+        sm: 1,
+        md: 1,
+        ms: 1,
+        ml: 1,
+        lg: 1,
+        xl: 1,
+      },
+      marginright: {
+        xs: 1,
+        sm: 1,
+        md: 1,
+        ms: 1,
+        ml: 1,
+        lg: 1,
+        xl: 1,
+      },
+      marginleft: {
+        xs: 1,
+        sm: 1,
+        md: 1,
+        ms: 1,
+        ml: 1,
+        lg: 1,
+        xl: 1,
+      },
       tabletwidth: '100%',
       computerwidth: '48%',
       gridname: 'pricingtablefeatures',

package/src/components/PricingTable/index.tsx

@@ -129,6 +129,9 @@ const PricingTable: React.FC<PricingProps> = props => {
     if (config.packagecolumns && config.packagecolumns.columnconfig) {
       headerColumnConfigs.push({
         ...config.packagecolumns.columnconfig,
+        // Add 5px margin above (margintop: 0.625) and to the right (marginright: 0.625)
+        margintop: 1,
+        marginright: 0.625,
         component: (
           <Dropdown
             label="Packages"
@@ -138,6 +141,7 @@ const PricingTable: React.FC<PricingProps> = props => {
             }))}
             defaultValue={selectedPackage}
             backgroundcolor={semiTransparentBlack.main}
+            shrunklabelposition="aboveNotch"
             outlinecolor={black.main}
             fontcolor={black.main}
             shrunkfontcolor={black.main}
@@ -177,6 +181,8 @@ const PricingTable: React.FC<PricingProps> = props => {
       if (feature.columnconfig) {
         featureColumnConfigs.push({
           ...feature.columnconfig,
+          margintop: 1,
+          paddingleft: 2,
           component: (
             <Box display="flex" alignItems="center">
               <Typography
@@ -207,6 +213,7 @@ const PricingTable: React.FC<PricingProps> = props => {
       if (feature.tiedtopackage && feature.tiedtopackage.columnconfig) {
         const tiedConfig: columnconfig = {
           ...feature.tiedtopackage.columnconfig,
+          margintop: 1,
           cellconfig: {
             minHeight: '40px',
           },
@@ -225,6 +232,8 @@ const PricingTable: React.FC<PricingProps> = props => {
         if (subFeature.columnconfig) {
           featureColumnConfigs.push({
             ...subFeature.columnconfig,
+            margintop: 1,
+            paddingleft: 3,
             component: (
               <Box display="flex" alignItems="center">
                 <Typography
@@ -255,6 +264,7 @@ const PricingTable: React.FC<PricingProps> = props => {
         if (subFeature.tiedtopackage && subFeature.tiedtopackage.columnconfig) {
           const tiedConfig: columnconfig = {
             ...subFeature.tiedtopackage.columnconfig,
+            margintop: 1,
             cellconfig: {
               minHeight: '40px',
             },
@@ -279,6 +289,7 @@ const PricingTable: React.FC<PricingProps> = props => {
 
       featureColumnConfigs.push({
         ...config.buttoncolumns.columnconfig,
+        margintop: 1,
         component: (
           <CustomButton
             variant="contained"

package/src/components/TextField/index.tsx

@@ -31,40 +31,115 @@ export type TextFieldProps = (
     left?: number
   }
   backgroundcolor?: string
+  outlinecolor?: string
+  fontcolor?: string
+  inputfontcolor?: string
+  shrunkfontcolor?: string
+  unshrunkfontcolor?: string
+  placeholdercolor?: string
+  shrunklabelposition?: 'onNotch' | 'aboveNotch'
   sx?: MuiTextFieldProps['sx']
   slotProps?: MuiTextFieldProps['slotProps']
 }
 
-const StyledMuiTextField = styled(MuiTextField)<{
+interface StyledTextFieldProps {
   hasvalue: string
   textalign?: string
   paddingleft?: number
   paddingtop?: number
-}>(({ hasvalue, textalign = 'left' }) => ({
-  '& .MuiOutlinedInput-root': {
-    minHeight: '40px',
-    height: '40px',
-    '& fieldset': {
-      borderColor: hasvalue === 'true' ? 'black' : 'rgba(0, 0, 0, 0.23)',
-    },
-    '&:hover fieldset': {
-      borderColor: hasvalue === 'true' ? 'black' : 'rgba(0, 0, 0, 0.23)',
+  backgroundcolor?: string
+  outlinecolor?: string
+  fontcolor?: string
+  inputfontcolor?: string
+  shrunkfontcolor?: string
+  unshrunkfontcolor?: string
+  placeholdercolor?: string
+  shrunklabelposition?: 'onNotch' | 'aboveNotch'
+}
+
+const StyledMuiTextField = styled(MuiTextField, {
+  shouldForwardProp: prop =>
+    ![
+      'hasvalue',
+      'textalign',
+      'paddingleft',
+      'paddingtop',
+      'backgroundcolor',
+      'outlinecolor',
+      'fontcolor',
+      'inputfontcolor',
+      'shrunkfontcolor',
+      'unshrunkfontcolor',
+      'placeholdercolor',
+      'shrunklabelposition',
+    ].includes(prop as string),
+})<StyledTextFieldProps>(
+  ({
+    hasvalue,
+    textalign = 'left',
+    backgroundcolor,
+    outlinecolor,
+    fontcolor,
+    inputfontcolor,
+    shrunkfontcolor,
+    unshrunkfontcolor,
+    placeholdercolor,
+    shrunklabelposition,
+  }) => ({
+    '& .MuiOutlinedInput-root': {
+      minHeight: '40px',
+      height: '40px',
+      backgroundColor: backgroundcolor || 'inherit',
+      color: fontcolor || 'black',
+      '& fieldset': {
+        borderColor:
+          outlinecolor ||
+          (hasvalue === 'true' ? 'black' : 'rgba(0, 0, 0, 0.23)'),
+        ...(shrunklabelposition === 'aboveNotch' && {
+          legend: {
+            width: '0px !important',
+          },
+        }),
+      },
+      '&:hover fieldset': {
+        borderColor:
+          outlinecolor ||
+          (hasvalue === 'true' ? 'black' : 'rgba(0, 0, 0, 0.23)'),
+      },
+      '&.Mui-focused fieldset': {
+        borderColor:
+          outlinecolor ||
+          (hasvalue === 'true' ? 'black' : 'rgba(0, 0, 0, 0.23)'),
+      },
+      '& input': {
+        color: inputfontcolor || fontcolor || 'black',
+        '&::placeholder': {
+          color: placeholdercolor || 'rgba(0, 0, 0, 0.54)',
+          opacity: 1,
+        },
+      },
     },
-    '&.Mui-focused fieldset': {
-      borderColor: hasvalue === 'true' ? 'black' : 'rgba(0, 0, 0, 0.23)',
+    '& .MuiInputLabel-root': {
+      color: unshrunkfontcolor || 'black',
+      '&.Mui-focused': {
+        color: shrunkfontcolor || 'black',
+      },
+      '&.MuiInputLabel-shrink': {
+        color: shrunkfontcolor || 'black',
+        ...(shrunklabelposition === 'aboveNotch' && {
+          transform: 'translate(0px, -17px) scale(0.75)',
+        }),
+        ...(shrunklabelposition === 'onNotch' && {
+          transform: 'translate(13px, -4px) scale(0.75)',
+        }),
+      },
     },
-  },
-  '& .MuiInputLabel-root': {
-    color: 'black',
-    '&.Mui-focused': {
-      color: 'black',
+    '& .MuiOutlinedInput-input': {
+      padding: '8px 14px',
+      textAlign: textalign,
     },
-  },
-  '& .MuiOutlinedInput-input': {
-    padding: '8px 14px',
-    textAlign: textalign,
-  },
-}))
+  })
+)
 
 const TextField = React.memo<TextFieldProps>(props => {
   const {
@@ -81,6 +156,13 @@ const TextField = React.memo<TextFieldProps>(props => {
     textAlign = 'left',
     slotProps: customSlotProps = {},
     backgroundcolor,
+    outlinecolor,
+    fontcolor,
+    inputfontcolor,
+    shrunkfontcolor,
+    unshrunkfontcolor,
+    placeholdercolor,
+    shrunklabelposition,
     ...restProps
   } = props
 
@@ -193,6 +275,14 @@ const TextField = React.memo<TextFieldProps>(props => {
         variant="outlined"
         hasvalue={hasValue}
         textalign={textAlign}
+        backgroundcolor={backgroundcolor}
+        outlinecolor={outlinecolor}
+        fontcolor={fontcolor}
+        inputfontcolor={inputfontcolor}
+        shrunkfontcolor={shrunkfontcolor}
+        unshrunkfontcolor={unshrunkfontcolor}
+        placeholdercolor={placeholdercolor}
+        shrunklabelposition={shrunklabelposition}
         {...restProps}
       />
     </Box>