goobs-frontend 0.8.12 → 0.8.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.8.12",
+  "version": "0.8.13",
   "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",

package/src/components/Grid/index.tsx

@@ -4,9 +4,6 @@ import React from 'react'
 import Grid2, { Grid2Props } from '@mui/material/Grid2'
 import { useMediaQuery } from '@mui/material'
 
-// Remove all theme creation and usage
-// We will manually define our media queries instead of using createTheme or ThemeProvider
-
 type Alignment = 'left' | 'center' | 'right' | 'inherit' | 'justify'
 type BorderProp = 'none' | 'solid'
 type WrapProp = 'nowrap' | 'wrap'
@@ -24,16 +21,34 @@ interface ResponsiveObject<T> {
 
 type ResponsiveValue<T> = T | ResponsiveObject<T>
 
+type cellconfig = {
+  border?: BorderProp
+  minHeight?: string
+  maxHeight?: string
+  width?: string
+  mobilewidth?: string
+  tabletwidth?: string
+  computerwidth?: string
+  borderColor?: string
+  backgroundColor?: string
+  onClick?: () => void
+  wrap?: WrapProp
+}
+
 type columnconfig = {
   row: number
   column: number
   gridname?: string
   alignment?: Alignment
   margintop?: ResponsiveValue<number>
-  columnwidth?: string
   marginbottom?: ResponsiveValue<number>
   marginright?: ResponsiveValue<number>
   marginleft?: ResponsiveValue<number>
+  paddingtop?: ResponsiveValue<number>
+  paddingbottom?: ResponsiveValue<number>
+  paddingright?: ResponsiveValue<number>
+  paddingleft?: ResponsiveValue<number>
+  columnwidth?: string
   component?: React.ReactNode
   bordercolor?: string
   cellconfig?: cellconfig
@@ -49,24 +64,14 @@ type gridconfig = {
   marginbottom?: ResponsiveValue<number>
   marginright?: ResponsiveValue<number>
   marginleft?: ResponsiveValue<number>
+  paddingtop?: ResponsiveValue<number>
+  paddingbottom?: ResponsiveValue<number>
+  paddingright?: ResponsiveValue<number>
+  paddingleft?: ResponsiveValue<number>
   gridwidth?: string
   bordercolor?: string
 }
 
-type cellconfig = {
-  border?: BorderProp
-  minHeight?: string
-  maxHeight?: string
-  width?: string
-  mobilewidth?: string
-  tabletwidth?: string
-  computerwidth?: string
-  borderColor?: string
-  backgroundColor?: string
-  onClick?: () => void
-  wrap?: WrapProp
-}
-
 type CustomGridProps = Omit<Grid2Props, 'children'> & {
   gridconfig?: gridconfig
   columnconfig?: columnconfig[]
@@ -134,6 +139,41 @@ function CustomGrid({
         ? 'flex-end'
         : 'center'
 
+  // Get responsive margin and padding values for the overall grid
+  const gridMarginTop = getResponsiveValue(
+    gridConfigValues?.margintop,
+    currentBreakpoint
+  )
+  const gridMarginBottom = getResponsiveValue(
+    gridConfigValues?.marginbottom,
+    currentBreakpoint
+  )
+  const gridMarginLeft = getResponsiveValue(
+    gridConfigValues?.marginleft,
+    currentBreakpoint
+  )
+  const gridMarginRight = getResponsiveValue(
+    gridConfigValues?.marginright,
+    currentBreakpoint
+  )
+
+  const gridPaddingTop = getResponsiveValue(
+    gridConfigValues?.paddingtop,
+    currentBreakpoint
+  )
+  const gridPaddingBottom = getResponsiveValue(
+    gridConfigValues?.paddingbottom,
+    currentBreakpoint
+  )
+  const gridPaddingLeft = getResponsiveValue(
+    gridConfigValues?.paddingleft,
+    currentBreakpoint
+  )
+  const gridPaddingRight = getResponsiveValue(
+    gridConfigValues?.paddingright,
+    currentBreakpoint
+  )
+
   const rows = Math.max(...(columnconfig || []).map(c => c.row || 1))
 
   return (
@@ -148,10 +188,16 @@ function CustomGrid({
         padding: 0,
         margin: 0,
         gap: 0,
+        // Apply grid-level margins and paddings
+        marginTop: gridMarginTop ? `${gridMarginTop * 8}px` : 0,
+        marginBottom: gridMarginBottom ? `${gridMarginBottom * 8}px` : 0,
+        marginLeft: gridMarginLeft ? `${gridMarginLeft * 8}px` : 0,
+        marginRight: gridMarginRight ? `${gridMarginRight * 8}px` : 0,
+        paddingTop: gridPaddingTop ? `${gridPaddingTop * 8}px` : 0,
+        paddingBottom: gridPaddingBottom ? `${gridPaddingBottom * 8}px` : 0,
+        paddingLeft: gridPaddingLeft ? `${gridPaddingLeft * 8}px` : 0,
+        paddingRight: gridPaddingRight ? `${gridPaddingRight * 8}px` : 0,
         // Remove or adjust the child selector that sets margin:0
-        // If we must not remove code, we can make it more specific so it doesn't override column margins.
-        // Change '& > *' to a more specific selector that doesn't conflict with column Grid2 items:
-        // For example, limit it to direct child elements that are not Grid2:
         '& > *:not(.grid-column)': {
           border: 'none !important',
           padding: 0,
@@ -221,6 +267,7 @@ function CustomGrid({
                     ? 'flex-end'
                     : 'center'
 
+              // Get responsive margin and padding values for the column
               const marginTop = getResponsiveValue(
                 currentColumnConfig?.margintop,
                 currentBreakpoint
@@ -238,6 +285,23 @@ function CustomGrid({
                 currentBreakpoint
               )
 
+              const paddingTop = getResponsiveValue(
+                currentColumnConfig?.paddingtop,
+                currentBreakpoint
+              )
+              const paddingBottom = getResponsiveValue(
+                currentColumnConfig?.paddingbottom,
+                currentBreakpoint
+              )
+              const paddingLeft = getResponsiveValue(
+                currentColumnConfig?.paddingleft,
+                currentBreakpoint
+              )
+              const paddingRight = getResponsiveValue(
+                currentColumnConfig?.paddingright,
+                currentBreakpoint
+              )
+
               return (
                 <Grid2
                   key={`column-${columnIndex}`}
@@ -252,8 +316,8 @@ function CustomGrid({
                     flexShrink: hasFixedWidth ? 0 : 1,
                     flexBasis: hasFixedWidth ? columnWidth : 'auto',
                     height: 'fit-content',
-                    padding: 0,
-                    // Add !important to ensure we override any parent styles
+
+                    // Apply margin
                     marginLeft: marginLeft
                       ? `${marginLeft * 8}px !important`
                       : '0 !important',
@@ -266,6 +330,21 @@ function CustomGrid({
                     marginBottom: marginBottom
                       ? `${marginBottom * 8}px !important`
                       : '0 !important',
+
+                    // Apply padding
+                    paddingLeft: paddingLeft
+                      ? `${paddingLeft * 8}px !important`
+                      : '0 !important',
+                    paddingRight: paddingRight
+                      ? `${paddingRight * 8}px !important`
+                      : '0 !important',
+                    paddingTop: paddingTop
+                      ? `${paddingTop * 8}px !important`
+                      : '0 !important',
+                    paddingBottom: paddingBottom
+                      ? `${paddingBottom * 8}px !important`
+                      : '0 !important',
+
                     border: 'none',
                     backgroundColor: currentCellConfig?.backgroundColor,
                     minHeight: 'min-content',

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

@@ -1,5 +1,4 @@
 'use client'
-
 import React, { useState, useCallback } from 'react'
 import {
   Drawer,
@@ -40,6 +39,7 @@ export interface VerticalVariantProps {
   mobileOpen?: boolean
   onClose?: () => void
   variant?: 'temporary' | 'permanent'
+  spacingfromtopofscreen?: string
 }
 
 function VerticalVariant({
@@ -62,6 +62,7 @@ function VerticalVariant({
   mobileOpen = false,
   onClose,
   variant = 'permanent',
+  spacingfromtopofscreen = '0px',
 }: VerticalVariantProps) {
   const router = useRouter()
   const [selectedNav, setSelectedNav] = useState<string | null>(null)
@@ -432,6 +433,7 @@ function VerticalVariant({
           backgroundColor: ocean.main,
           pt: '17px',
           boxSizing: 'border-box',
+          marginTop: spacingfromtopofscreen,
         },
       }}
     >

package/src/components/Nav/index.tsx

@@ -36,6 +36,7 @@ export interface NavProps {
   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
 }
 
 /**
@@ -83,6 +84,7 @@ function Nav({
   mobileOpen = false,
   onClose,
   variant = 'permanent',
+  spacingfromtopofscreen,
 }: NavProps): JSX.Element {
   // State for expanded navigation items
   const [expandedNavs, setExpandedNavs] = useState<string[]>([])
@@ -129,6 +131,7 @@ function Nav({
         mobileOpen={mobileOpen}
         onClose={onClose}
         variant={variant}
+        spacingfromtopofscreen={spacingfromtopofscreen}
       />
     )
   } else {

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"