goobs-frontend 0.8.13 → 0.8.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.8.13",
+  "version": "0.8.14",
   "type": "module",
   "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",
@@ -28,7 +28,7 @@
     "highlight.js": "^11.10.0",
     "jotai": "^2.10.3",
     "lodash": "^4.17.21",
-    "next": "15.1.0",
+    "next": "15.1.2",
     "otplib": "^12.0.1",
     "react-datepicker": "^7.5.0",
     "react-qr-code": "^2.0.15",
@@ -45,7 +45,7 @@
     "@typescript-eslint/eslint-plugin": "^8.18.0",
     "@typescript-eslint/parser": "^8.18.0",
     "eslint": "^9.16.0",
-    "eslint-config-next": "^15.1.0",
+    "eslint-config-next": "^15.1.2",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "prettier": "^3.4.2",

package/src/components/Button/index.tsx

@@ -29,35 +29,52 @@ const StyledButton = styled(Button, {
   backgroundcolor?: string
   iconlocation?: 'left' | 'right' | 'above'
   fontlocation?: 'left' | 'center' | 'right'
-}>(({ backgroundcolor, iconlocation, fontlocation }) => ({
-  minWidth: 'auto',
-  width: '100%',
-  height: '40px',
-  padding: '8px 16px',
-  display: 'flex',
-  flexDirection: iconlocation === 'above' ? 'column' : 'row',
-  alignItems: 'center',
-  justifyContent:
-    fontlocation === 'left'
-      ? 'flex-start'
-      : fontlocation === 'right'
-        ? 'flex-end'
-        : 'center',
-  gap: '8px',
-  ...(backgroundcolor && {
-    backgroundColor: backgroundcolor,
-    '&:hover': {
+}>(({ backgroundcolor, iconlocation, fontlocation }) => {
+  // Determine styles based on backgroundcolor
+  let backgroundStyles = {}
+  if (backgroundcolor && backgroundcolor !== 'none') {
+    backgroundStyles = {
       backgroundColor: backgroundcolor,
-      opacity: 0.9,
+      '&:hover': {
+        backgroundColor: backgroundcolor,
+        opacity: 0.9,
+      },
+    }
+  } else if (backgroundcolor === 'none') {
+    // No background, behave like a text button
+    backgroundStyles = {
+      backgroundColor: 'transparent',
+      '&:hover': {
+        backgroundColor: 'transparent',
+        opacity: 0.9,
+      },
+    }
+  }
+
+  return {
+    minWidth: 'auto',
+    width: '100%',
+    height: '40px',
+    padding: '8px 16px',
+    display: 'flex',
+    flexDirection: iconlocation === 'above' ? 'column' : 'row',
+    alignItems: 'center',
+    justifyContent:
+      fontlocation === 'left'
+        ? 'flex-start'
+        : fontlocation === 'right'
+          ? 'flex-end'
+          : 'center',
+    gap: '8px',
+    ...backgroundStyles,
+    '& .MuiButton-startIcon': {
+      margin: 0,
     },
-  }),
-  '& .MuiButton-startIcon': {
-    margin: 0,
-  },
-  '& .MuiButton-endIcon': {
-    margin: 0,
-  },
-}))
+    '& .MuiButton-endIcon': {
+      margin: 0,
+    },
+  }
+})
 
 const StyledBox = styled(Box)({
   display: 'flex',

package/src/components/DataGrid/Footer/index.tsx

@@ -98,6 +98,7 @@ function CustomFooter({
               text="Manage Columns"
               fontvariant="merriparagraph"
               fontcolor="black"
+              backgroundcolor="none"
               icon={<ShowHideEyeIcon visible={true} />}
               iconcolor="black"
               iconlocation="left"

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

@@ -44,6 +44,7 @@ function FormDataGrid({ title, description, datagrid }: FormDataGridProps) {
             width: '100%',
             textAlign: 'left',
             fontFamily: 'Merriweather',
+            marginLeft: 2,
             fontSize: '1.5rem',
             fontWeight: 400,
             color: 'black',
@@ -57,6 +58,7 @@ function FormDataGrid({ title, description, datagrid }: FormDataGridProps) {
             textAlign: 'left',
             fontFamily: 'Merriweather',
             fontSize: '1.25rem',
+            marginLeft: 2,
             fontWeight: 400,
             color: 'black',
           }}

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

@@ -1,6 +1,6 @@
 'use client'
 import React, { useState, useEffect } from 'react'
-import { Box, Tabs, Tab } from '@mui/material'
+import { AppBar, Toolbar, Box, Tabs, Tab } from '@mui/material'
 import { NavProps, SubNav, View } from '../index'
 import { usePathname } from 'next/navigation'
 
@@ -19,8 +19,7 @@ export interface HorizontalVariantProps {
 
 function HorizontalVariant({
   items,
-  height = '80px',
-  alignment = 'left',
+  height = '48px',
   navname = '',
 }: HorizontalVariantProps) {
   const [activeTabValues, setActiveTabValues] = useState<
@@ -63,83 +62,110 @@ function HorizontalVariant({
   }
 
   return (
-    <Box
+    <AppBar
+      position="sticky"
       sx={{
-        flexGrow: 1,
-        bgcolor: 'black',
-        display: 'flex',
-        height: height,
-        justifyContent: alignment,
-        paddingLeft: '5px',
-        paddingRight: '5px',
+        backgroundColor: 'black',
+        color: 'white',
       }}
     >
-      <Tabs
-        value={activeTabValues[navname]?.tabId || false}
-        onChange={handleTabChange}
-        aria-label="nav tabs"
+      <Toolbar
+        disableGutters
         sx={{
-          height: height,
-          '& .MuiTabs-flexContainer': {
-            height: '100%',
-          },
-          '& .MuiTab-root': {
-            height: '100%',
-            minHeight: 'unset',
-          },
+          paddingLeft: 0,
+          paddingRight: 0,
+          height: `${height} !important`,
+          minHeight: `${height} !important`,
+          borderTop: '1px solid white',
         }}
       >
-        {items.map((item: NavProps | SubNav | View) => {
-          if ('orientation' in item) {
-            const tab = item as NavProps
-            return (
-              <Tab
-                key={tab.title}
-                value={tab.title || ''}
-                label={tab.title || ''}
-                onClick={() => handleTabClick(tab)}
-                sx={{
-                  minHeight: 0,
-                  textTransform: 'none',
-                  border: 'none',
-                  boxSizing: 'border-box',
-                  backgroundColor: 'black',
-                  color: '#fff',
-                  fontWeight: 500,
-                  fontFamily: 'Merriweather',
-                  fontSize: 16,
-                  height: height,
-                  '&:hover': {
-                    backgroundColor: 'rgba(255, 255, 255, 0.1)',
-                  },
-                  '& .MuiTouchRipple-root': {
-                    color: '#fff',
-                  },
-                  '&.Mui-selected': {
-                    color: '#fff',
-                    backgroundColor: 'rgba(255, 255, 255, 0.2)',
-                  },
-                  '& .MuiSvgIcon-root': {
-                    color: '#fff',
-                  },
-                  ...(tab.hasleftborder === 'true' && {
-                    borderLeft: '1px solid white',
-                  }),
-                  ...(tab.hasrightborder === 'true' && {
-                    borderRight: '1px solid white',
-                  }),
-                  width: 'auto',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  px: 4,
-                }}
-              />
-            )
-          }
-          return null
-        })}
-      </Tabs>
-    </Box>
+        <Box
+          sx={{
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'flex-start',
+          }}
+        >
+          <Box
+            sx={{
+              flexGrow: 1,
+              display: 'flex',
+              height: height,
+              justifyContent: 'flex-start',
+              paddingLeft: 0,
+              paddingRight: 0,
+            }}
+          >
+            <Tabs
+              value={activeTabValues[navname]?.tabId || false}
+              onChange={handleTabChange}
+              aria-label="nav tabs"
+              sx={{
+                height: height,
+                '& .MuiTabs-flexContainer': {
+                  height: '100%',
+                },
+                '& .MuiTab-root': {
+                  height: '100%',
+                  minHeight: 'unset',
+                },
+              }}
+            >
+              {items.map((item: NavProps | SubNav | View) => {
+                if ('orientation' in item) {
+                  const tab = item as NavProps
+                  return (
+                    <Tab
+                      key={tab.title}
+                      value={tab.title || ''}
+                      label={tab.title || ''}
+                      onClick={() => handleTabClick(tab)}
+                      sx={{
+                        minHeight: 0,
+                        textTransform: 'none',
+                        border: 'none',
+                        boxSizing: 'border-box',
+                        backgroundColor: 'black',
+                        color: '#fff',
+                        fontWeight: 500,
+                        fontFamily: 'Merriweather',
+                        fontSize: 16,
+                        height: height,
+                        '&:hover': {
+                          backgroundColor: 'rgba(255, 255, 255, 0.1)',
+                        },
+                        '& .MuiTouchRipple-root': {
+                          color: '#fff',
+                        },
+                        '&.Mui-selected': {
+                          color: '#fff',
+                          backgroundColor: 'rgba(255, 255, 255, 0.2)',
+                        },
+                        '& .MuiSvgIcon-root': {
+                          color: '#fff',
+                        },
+                        ...(tab.hasleftborder === 'true' && {
+                          borderLeft: '1px solid white',
+                        }),
+                        ...(tab.hasrightborder === 'true' && {
+                          borderRight: '1px solid white',
+                        }),
+                        width: 'auto',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        px: 4,
+                      }}
+                    />
+                  )
+                }
+                return null
+              })}
+            </Tabs>
+          </Box>
+        </Box>
+      </Toolbar>
+    </AppBar>
   )
 }
 

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

@@ -40,6 +40,8 @@ export interface VerticalVariantProps {
   onClose?: () => void
   variant?: 'temporary' | 'permanent'
   spacingfromtopofscreen?: string
+  marginabovetitle?: string
+  marginbelowtitle?: string
 }
 
 function VerticalVariant({
@@ -63,6 +65,8 @@ function VerticalVariant({
   onClose,
   variant = 'permanent',
   spacingfromtopofscreen = '0px',
+  marginabovetitle = '0px',
+  marginbelowtitle = '0px',
 }: VerticalVariantProps) {
   const router = useRouter()
   const [selectedNav, setSelectedNav] = useState<string | null>(null)
@@ -109,6 +113,7 @@ function VerticalVariant({
       activeAndHoverColor = semiTransparentWhite.main
     ) => {
       if ('title' in item && 'subnavs' in item) {
+        // This is a NavProps item (top-level nav)
         const nav = item as NavProps
         const isExpanded = expandedNavs.includes(nav.title ?? '')
         return (
@@ -191,9 +196,11 @@ function VerticalVariant({
           </MuiAccordion>
         )
       } else if ('title' in item && 'views' in item) {
+        // This is a SubNav item
         const subnav = item as SubNav
         const isExpanded = expandedSubnavs.includes(subnav.title ?? '')
-        if (subnav.views?.length === 0) {
+        if (!subnav.views || subnav.views.length === 0) {
+          // SubNav with no views, just a route
           return (
             <Link
               key={subnav.title}
@@ -214,6 +221,15 @@ function VerticalVariant({
                     backgroundColor: activeAndHoverColor,
                   },
                 }}
+                onClick={() => {
+                  if (
+                    subnav.trigger === 'route' &&
+                    variant === 'temporary' &&
+                    onClose
+                  ) {
+                    onClose()
+                  }
+                }}
               >
                 <Typography
                   fontvariant="merrih6"
@@ -224,6 +240,7 @@ function VerticalVariant({
             </Link>
           )
         } else {
+          // SubNav with views
           return (
             <MuiAccordion
               key={subnav.title}
@@ -302,6 +319,7 @@ function VerticalVariant({
           )
         }
       } else if ('title' in item && 'route' in item) {
+        // This is a View item
         const view = item as View
         return (
           <Link
@@ -311,7 +329,15 @@ function VerticalVariant({
               color: 'white',
             }}
             href={view.route ?? ''}
-            onClick={variant === 'temporary' ? onClose : undefined}
+            onClick={() => {
+              if (
+                view.trigger === 'route' &&
+                variant === 'temporary' &&
+                onClose
+              ) {
+                onClose()
+              }
+            }}
           >
             <MenuItem
               sx={{
@@ -351,7 +377,7 @@ function VerticalVariant({
     <>
       <Box px={`15px`}>
         {showTitle && (
-          <Box pt="0px" pb="0px">
+          <Box mt={marginabovetitle} mb={marginbelowtitle}>
             <Link
               href={titleUrl || '/'}
               passHref

package/src/components/Nav/index.tsx

@@ -37,6 +37,8 @@ export interface NavProps {
   onClose?: () => void // Handler for closing mobile drawer
   variant?: 'temporary' | 'permanent' // Drawer variant for mobile/desktop
   spacingfromtopofscreen?: string // Spacing from top of screen
+  marginabovetitle?: string // Margin above the title in vertical variant
+  marginbelowtitle?: string // Margin below the title in vertical variant
 }
 
 /**
@@ -48,6 +50,7 @@ export type SubNav = {
   subtitle?: string // Subtitle for the sub-nav
   views?: View[] // Views within the sub-nav
   navname?: string // Name of the sub-nav
+  trigger?: 'route' | 'onClick' | 'routeonhorizontal' // Trigger type for the sub-nav
 }
 
 /**
@@ -58,6 +61,7 @@ export type View = {
   title?: string // Title of the view
   subtitle?: string // Subtitle for the view
   navname?: string // Name of the view
+  trigger?: 'route' | 'onClick' | 'routeonhorizontal' // Trigger type for the view
 }
 
 /**
@@ -85,6 +89,8 @@ function Nav({
   onClose,
   variant = 'permanent',
   spacingfromtopofscreen,
+  marginabovetitle = '0px',
+  marginbelowtitle = '0px',
 }: NavProps): JSX.Element {
   // State for expanded navigation items
   const [expandedNavs, setExpandedNavs] = useState<string[]>([])
@@ -132,6 +138,8 @@ function Nav({
         onClose={onClose}
         variant={variant}
         spacingfromtopofscreen={spacingfromtopofscreen}
+        marginabovetitle={marginabovetitle}
+        marginbelowtitle={marginbelowtitle}
       />
     )
   } else {

package/src/components/PricingTable/defaultconfig.tsx

@@ -307,6 +307,15 @@ const defaultConfig: PricingProps = {
       row: 7,
       column: 1,
       mobilewidth: '100%',
+      margintop: {
+        xs: 2,
+        sm: 2,
+        md: 2,
+        ms: 2,
+        ml: 2,
+        lg: 2,
+        xl: 2,
+      },
       marginbottom: {
         xs: 1,
         sm: 1,