Utilities

The @jumbo/utilities directory provides helper functions, format utilities, style utilities, and constants used throughout the @jumbo framework and the application source.

helpers.ts

@jumbo/utilities/helpers contains general-purpose utilities:

typescript

import { createJumboTheme, getAssetPath } from '@jumbo/utilities/helpers';

createJumboTheme

Composes four region MUI themes into a JumboThemeConfig:

typescript

function createJumboTheme(
  mainTheme:    Theme,
  headerTheme:  Theme,
  sidebarTheme: Theme,
  footerTheme:  Theme,
): JumboThemeConfig

This is the primary theme composition function used in src/config/index.ts and all demo layout config files.

formatHelpers.ts

@jumbo/utilities/formatHelpers provides data formatting utilities:

typescript

import { formatDate, formatCurrency, formatNumber } from '@jumbo/utilities/formatHelpers';

Function	Signature	Description
`formatDate`	`(date: Date \| string, format?: string) => string`	Format a date using Moment.js
`formatCurrency`	`(value: number, currency?: string) => string`	Format a number as currency
`formatNumber`	`(value: number, decimals?: number) => string`	Format a number with decimal places

styleHelpers.ts

@jumbo/utilities/styleHelpers provides MUI sx and style utilities:

typescript

import { getTextColor, getBgColor } from '@jumbo/utilities/styleHelpers';

Function	Description
`getTextColor(color)`	Returns an `sx` object setting `color` from the MUI palette
`getBgColor(color)`	Returns an `sx` object setting `backgroundColor` from the palette

systemHelpers.ts

@jumbo/utilities/systemHelpers contains system-level utility functions:

typescript

import { getAssetPath } from '@jumbo/utilities/systemHelpers';

Function	Signature	Description
`getAssetPath`	`(path: string) => string`	Prepends `NEXT_PUBLIC_IMAGES_PATH` to a relative path

Usage:

typescript

const avatarUrl = getAssetPath('avatars/user1.jpg');
// → '/assets/images/avatars/user1.jpg' (uses NEXT_PUBLIC_IMAGES_PATH env var)

constants.ts

@jumbo/utilities/constants exports all layout-related enums:

typescript

import {
  SIDEBAR_VARIANTS,
  SIDEBAR_STYLES,
  SIDEBAR_VIEWS,
  SIDEBAR_SCROLL_TYPES,
  SIDEBAR_ANCHOR_POSITIONS,
  LAYOUT_ACTIONS,
  LAYOUT_DENSITIES,
  LAYOUT_CONTAINER_STYLES,
} from '@jumbo/utilities/constants';

SIDEBAR_VARIANTS

Value	Description
`TEMPORARY`	Overlay drawer; closes on click-away
`PERSISTENT`	Pushes content; stays open until closed explicitly
`PERMANENT`	Always visible; cannot be closed

SIDEBAR_STYLES

Value	Description
`FULL_HEIGHT`	Sidebar extends the full viewport height
`CLIPPED_UNDER_HEADER`	Sidebar starts below the header

SIDEBAR_VIEWS

Value	Description
`FULL`	Full-width sidebar with labels
`MINI`	Icon-only collapsed sidebar (width: `minWidth`)

LAYOUT_ACTIONS

Actions dispatched to the jumboLayoutReducer. Used by context hooks under the hood; rarely needed directly unless implementing a custom layout control:

typescript

LAYOUT_ACTIONS.SET_OPTIONS           // replace full LayoutOptions
LAYOUT_ACTIONS.SET_SIDEBAR_OPTIONS   // merge sidebar sub-options
LAYOUT_ACTIONS.SET_HEADER_OPTIONS    // merge header sub-options
LAYOUT_ACTIONS.SET_FOOTER_OPTIONS    // merge footer sub-options
LAYOUT_ACTIONS.SET_CONTENT_OPTIONS   // merge content sub-options
LAYOUT_ACTIONS.SET_ROOT_OPTIONS      // merge root sub-options

Prefer context hooks over direct dispatch

Use useJumboLayoutSidebarOptions() and related hooks rather than dispatching LAYOUT_ACTIONS directly. The hooks provide a typed interface and encapsulate the dispatch call.

Shared primitives

@jumbo/shared provides lightweight HTML-element wrappers for common patterns:

typescript

import { Div, Span } from '@jumbo/shared/components/Div';
import { Link } from '@jumbo/shared/components/Link';
import { CardIconText } from '@jumbo/shared/components/CardIconText';

Component	Description
`Div`	`<div>` with `sx` prop support and optional `component` override
`Span`	`<span>` with `sx` prop support
`Link`	Next.js `<Link>` with MUI `sx` prop and `underline` control
`CardIconText`	Icon + label layout used in compact stat cards