Utilities

The @jumbo/utilities package contains the shared constants, helper functions, cookie utilities, and formatting helpers used across the @jumbo framework and application code.

Import paths

typescript
import { createJumboTheme, getBackgroundColorStyle } from '@jumbo/utilities/helpers';
import {
  SIDEBAR_VARIANTS,
  SIDEBAR_STYLES,
  SIDEBAR_VIEWS,
  SIDEBAR_ANCHOR_POSITIONS,
  SIDEBAR_SCROLL_TYPES,
} from '@jumbo/utilities/constants';
import { getCookie, setCookie, eraseCookie, getCookieValue } from '@jumbo/utilities/cookies';
import { getMarginStyle, getBackgroundImageStyle } from '@jumbo/utilities/helpers';

helpers.ts

createJumboTheme()

Assembles a JumboThemeConfig from four MUI ThemeOptions objects. See the JumboTheme docs for full details.

typescript
function createJumboTheme(
  mainTheme: ThemeOptions,
  headerTheme: ThemeOptions,
  sidebarTheme: ThemeOptions,
  footerTheme: ThemeOptions,
): JumboThemeConfig

getBackgroundColorStyle()

Converts a color array into a CSS background style object. Returns backgroundColor for a single color and backgroundImage with a linear-gradient for two or more.

typescript
function getBackgroundColorStyle(colors?: string[]): Record<string, string>
 
// Examples
getBackgroundColorStyle(['#7352C7'])
// → { backgroundColor: '#7352C7' }
 
getBackgroundColorStyle(['#7352C7', '135deg', '#4E2F9E'])
// → { backgroundImage: 'linear-gradient(135deg, #7352C7, #4E2F9E)' }

getBackgroundImageStyle()

Returns a CSS background shorthand object for a given image URL.

typescript
function getBackgroundImageStyle(src?: string): Record<string, string>

getMarginStyle()

Converts a shorthand margin value (number, string, or array) into an explicit top/right/bottom/left object for use in inline styles.

typescript
function getMarginStyle(
  input?: number | string | (number | string)[]
): Record<string, string | number>

Nav type guards

typescript
function isNavItem(object: object): object is NavbarItem
function isNavGroup(object: object): object is NavbarGroup
function isNavSection(object: object): object is NavbarSection
function getNavChildren(item: NavbarGroup | NavbarSection): (NavbarGroup | NavbarItem)[]

Use these to safely narrow the union nav type when building custom navigation renderers.

constants.ts

All enums used to configure LayoutOptions.

SIDEBAR_VARIANTS

typescript
enum SIDEBAR_VARIANTS {
  TEMPORARY  = 'temporary',   // Overlay drawer; closes on outside click
  PERSISTENT = 'persistent',  // Mounted but can be open/closed; pushes content
  PERMANENT  = 'permanent',   // Always visible; cannot be closed
}

SIDEBAR_STYLES

typescript
enum SIDEBAR_STYLES {
  FULL_HEIGHT         = 'full-height',          // Sidebar extends above the header
  CLIPPED_UNDER_HEADER = 'clipped-under-header', // Sidebar sits below the header
}

SIDEBAR_VIEWS

typescript
enum SIDEBAR_VIEWS {
  MINI = 'mini',  // Icons only — collapsed state
  FULL = 'full',  // Icons + labels — expanded state
}

SIDEBAR_ANCHOR_POSITIONS

typescript
enum SIDEBAR_ANCHOR_POSITIONS {
  LEFT   = 'left',
  RIGHT  = 'right',
  TOP    = 'top',
  BOTTOM = 'bottom',
}

SIDEBAR_SCROLL_TYPES

typescript
enum SIDEBAR_SCROLL_TYPES {
  DEFAULT = 'default',  // Sidebar scrolls independently
  FIXED   = 'fixed',    // Sidebar position is fixed; content scrolls independently
}

cookies.ts

Browser cookie utilities used by AuthProvider to persist the auth session.

setCookie()

typescript
function setCookie(name: string, value: unknown, days: number): void

Sets a cookie that expires in days days. Encodes the value via .toString().

getCookie()

typescript
function getCookie(name: string): string | null

Returns the raw cookie string value, or null if the cookie is not set.

eraseCookie()

typescript
function eraseCookie(name: string): void

Deletes a cookie by setting its expiry to January 1, 1970.

getCookieValue()

typescript
function getCookieValue(name: string): unknown

Retrieves and JSON.parses a URL-encoded JSON cookie. Used to read the auth-user session object.

formatHelpers.ts

Date and number formatting utilities. Import from @jumbo/utilities/formatHelpers.

styleHelpers.ts

MUI sx prop utilities. Import from @jumbo/utilities/styleHelpers.

systemHelpers.ts

Browser and environment detection utilities. Import from @jumbo/utilities/systemHelpers.