goobs-frontend 0.8.13 → 0.8.15

package/src/index.ts

@@ -28,7 +28,7 @@ import {
 } from './components/Accordion'
 import Card, { CardProps } from './components/Card'
 import CodeCopy, { CodeCopyProps } from './components/CodeCopy'
-import Nav, { NavProps } from './components/Nav'
+import Nav, { NavProps, NavItem } from './components/Nav' // <-- Vertical-only Nav
 import PricingTable, { PricingProps } from './components/PricingTable'
 import { CustomStepper, CustomStepperProps } from './components/Stepper'
 import CustomToolbar, { ToolbarProps } from './components/Toolbar'
@@ -39,6 +39,9 @@ import SearchableDropdown, {
   SearchableDropdownProps,
 } from './components/SearchableDropdown'
 
+// Here is the new horizontal `Tabs` import
+import Tabs, { TabsProps } from './components/Tabs'
+
 // New imports
 import DateField from './components/DateField'
 import Dropdown, { DropdownOption } from './components/Dropdown'
@@ -48,13 +51,15 @@ import PasswordField from './components/PasswordField'
 import PhoneNumberField from './components/PhoneNumberField'
 import Searchbar from './components/Searchbar'
 import TextField from './components/TextField'
+
 // Add FormDataGrid import
 import FormDataGrid from './components/Form/DataGrid'
 import type { FormDataGridProps } from './components/Form/DataGrid'
+
 // Animations
 import { Animation } from './components/Content/Structure/animations'
 
-// Importing ExtendedButtonProps from useButton
+// Importing Extended Props
 import { ExtendedComplexEditorProps } from './components/Content/Structure/complexeditor/useComplexEditor'
 import { ExtendedButtonProps } from './components/Content/Structure/button/useButton'
 import { ExtendedTypographyProps } from './components/Content/Structure/typography/useGridTypography'
@@ -190,7 +195,10 @@ declare type PhoneNumberFieldProps = React.ComponentProps<
 declare type SearchbarProps = React.ComponentProps<typeof Searchbar>
 declare type TextFieldProps = React.ComponentProps<typeof TextField>
 
-// Named exports
+/* -------------------------------------------------------------------------- */
+/*                            Named Component Exports                         */
+/* -------------------------------------------------------------------------- */
+
 export { CustomButton }
 export { CustomGrid }
 export { Typography }
@@ -201,7 +209,7 @@ export { ContentSection }
 export { Accordion, AccordionSummary, AccordionDetails }
 export { Card }
 export { CodeCopy }
-export { Nav }
+export { Nav } // vertical-only Nav
 export { PricingTable }
 export { CustomStepper }
 export { CustomToolbar }
@@ -211,6 +219,9 @@ export { formContainerStyle }
 export { QRCodeComponent }
 export { SearchableDropdown }
 
+// Horizontal Tabs export
+export { Tabs }
+
 // New named exports
 export { DateField }
 export { Dropdown }
@@ -224,14 +235,17 @@ export { TextField }
 // Add FormDataGrid to named exports
 export { FormDataGrid }
 
-// Add FormDataGrid type to type exports
+/* -------------------------------------------------------------------------- */
+/*                           Named Type Exports                                */
+/* -------------------------------------------------------------------------- */
+
 export type { FormDataGridProps }
 export type { DatagridProps }
 export type { ColumnDef, RowData }
 export type { CellParams, HeaderParams }
 export type { SearchableDropdownProps }
 
-// Exporting ExtendedButtonProps
+// Extended Props
 export type { ExtendedButtonProps }
 export type { ExtendedTypographyProps }
 export type { ExtendedTextFieldProps }
@@ -250,7 +264,11 @@ export type { ExtendedRadioGroupProps }
 export type { ExtendedPhoneNumberFieldProps }
 export type { ExtendedComplexEditorProps }
 
-// Type exports
+/* -------------------------------------------------------------------------- */
+/*                           Additional Type Exports                           */
+/* -------------------------------------------------------------------------- */
+
+// "Local" type exports for existing components
 export type { CustomButtonProps }
 export type { CustomGridProps }
 export type { columnconfig, gridconfig, cellconfig }
@@ -261,7 +279,7 @@ export type { PopupFormProps }
 export type { ContentSectionProps }
 export type { CardProps }
 export type { CodeCopyProps }
-export type { NavProps }
+export type { NavProps } // vertical-only
 export type { PricingProps }
 export type { CustomStepperProps }
 export type { ToolbarProps }
@@ -272,7 +290,7 @@ export type { ExtendedQRCodeProps }
 export type { ExtendedDropdownProps }
 export type { ExtendedDateFieldProps }
 
-// Additional type exports for the newly declared types
+// Additional types for newly declared fields
 export type { TypographyComponentProps }
 export type { ConfirmationCodeInputProps }
 export type { RadioGroupComponentProps }
@@ -299,10 +317,19 @@ export type { PhoneNumberFieldProps }
 export type { SearchbarProps }
 export type { TextFieldProps }
 
-// Animation type export
+// Horizontal Tabs Props
+export type { TabsProps }
+export type { NavItem }
+
+/* -------------------------------------------------------------------------- */
+/*                             Animation Exports                               */
+/* -------------------------------------------------------------------------- */
+
 export type { Animation }
 
-// Color exports
+/* -------------------------------------------------------------------------- */
+/*                            Color Exports                                   */
+/* -------------------------------------------------------------------------- */
 export {
   moss,
   aqua,
@@ -330,7 +357,9 @@ export {
   greyborder,
 }
 
-// Typography exports
+/* -------------------------------------------------------------------------- */
+/*                           Typography Exports                                */
+/* -------------------------------------------------------------------------- */
 export {
   arapeyh1,
   arapeyh2,

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

@@ -1,146 +0,0 @@
-'use client'
-import React, { useState, useEffect } from 'react'
-import { Box, Tabs, Tab } from '@mui/material'
-import { NavProps, SubNav, View } from '../index'
-import { usePathname } from 'next/navigation'
-
-type Alignment = 'left' | 'center' | 'right' | 'inherit' | 'justify'
-
-export interface ActiveTabValue {
-  tabId: string | false
-}
-
-export interface HorizontalVariantProps {
-  items: (NavProps | SubNav | View)[]
-  height?: string
-  alignment?: Alignment
-  navname?: string
-}
-
-function HorizontalVariant({
-  items,
-  height = '80px',
-  alignment = 'left',
-  navname = '',
-}: HorizontalVariantProps) {
-  const [activeTabValues, setActiveTabValues] = useState<
-    Record<string, ActiveTabValue>
-  >({})
-  const pathname = usePathname()
-
-  useEffect(() => {
-    const currentTab = items.find(
-      item => 'orientation' in item && item.route === pathname
-    ) as NavProps | undefined
-
-    setActiveTabValues(prev => ({
-      ...prev,
-      [navname]: { tabId: currentTab?.title || false },
-    }))
-  }, [items, navname, pathname])
-
-  const handleTabChange = (event: React.SyntheticEvent, newValue: string) => {
-    setActiveTabValues(prev => ({
-      ...prev,
-      [navname]: { tabId: newValue },
-    }))
-  }
-
-  const handleTabClick = (tab: NavProps) => {
-    if (tab.trigger === 'route') {
-      if (tab.route) {
-        window.location.href = tab.route
-      }
-    } else if (tab.trigger === 'onClick') {
-      if (tab.onClick) {
-        tab.onClick()
-      }
-    } else if (tab.trigger === 'routeonhorizontal') {
-      if (tab.route) {
-        window.location.href = tab.route
-      }
-    }
-  }
-
-  return (
-    <Box
-      sx={{
-        flexGrow: 1,
-        bgcolor: 'black',
-        display: 'flex',
-        height: height,
-        justifyContent: alignment,
-        paddingLeft: '5px',
-        paddingRight: '5px',
-      }}
-    >
-      <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>
-  )
-}
-
-export default HorizontalVariant