@oplytics/shared-ui

Shared UI component library for all Oplytics.digital subdomains. Provides standardised layouts, hierarchy management, RBAC, reporting, hooks, and design tokens as reusable building blocks.

Installation

pnpm add @oplytics/shared-ui

Requires .npmrc with @oplytics:registry=https://npm.pkg.github.com

Modules

| Module | Import | Description | |--------|--------|-------------| | Layout | @oplytics/shared-ui/layout | Config-driven sidebar, page header, footer, layout factory | | Hierarchy | @oplytics/shared-ui/hierarchy | Org hierarchy types, selection state, enterprise override | | RBAC | @oplytics/shared-ui/rbac | 7-role model, permission checks, error constants | | Reporting | @oplytics/shared-ui/reporting | Incident reporting and feedback toolbar types/config | | Components | @oplytics/shared-ui/components | SharedFooter, NotFound, ErrorBoundary, ViewOnlyBadge types | | Hooks | @oplytics/shared-ui/hooks | useMobile, useComposition, usePersistFn | | Theme | @oplytics/shared-ui/theme | Design tokens, color palette, typography, CSS variables |

Quick Start

// RBAC — check permissions
import { hasMinimumRole, ALL_ROLES } from '@oplytics/shared-ui/rbac';

if (hasMinimumRole(user.role, 'enterprise_admin')) {
  // show admin features
}

// Hierarchy — enterprise override
import { applyEnterpriseOverride } from '@oplytics/shared-ui/hierarchy';

const resolvedUser = applyEnterpriseOverride(user, req.headers.cookie);

// Layout — service config
import { SERVICE_CONFIGS, defineServiceLayout } from '@oplytics/shared-ui/layout';

const myConfig = SERVICE_CONFIGS.sqdcp;

// Theme — design tokens
import { OPLYTICS_COLORS, OPLYTICS_FONTS } from '@oplytics/shared-ui/theme';

// Hooks
import { useMobile, usePersistFn } from '@oplytics/shared-ui/hooks';

Theme CSS

Import the canonical Oplytics theme variables:

@import '@oplytics/shared-ui/theme/oplytics-theme.css';

This provides all --oplytics-* CSS custom properties for backgrounds, text, accents, borders, spacing, radius, and shadows.

Development

pnpm install
pnpm build        # Build with tsup
pnpm test         # Run vitest
pnpm typecheck    # TypeScript check

Architecture

The package is tree-shakeable with separate entry points per module. Each subdomain only imports what it needs:

src/
  layout/       # SharedSidebar, createServiceLayout, serviceConfigs
  hierarchy/    # orgHierarchy types, enterpriseOverride
  rbac/         # Roles, permissions, error constants
  reporting/    # ReportingToolbar types and config
  components/   # SharedFooter, NotFound, ErrorBoundary types
  hooks/        # useMobile, useComposition, usePersistFn
  theme/        # Design tokens, CSS variables

Versioning

• v0.x — Types, configs, and pure utilities (no React component rendering)
• v1.0 — Full React components with shadcn/ui primitives bundled

License

UNLICENSED — Internal Oplytics.digital use only.