@imola-solutions/ui

Reusable UI component library extracted from BOPC-ITMP. Pure MUI-based components with no domain coupling — safe to consume across Imola products.

Install

npm install @imola-solutions/ui

Peer dependencies (host-provided — you already have these in a React + MUI app):

• react >=18, react-dom >=18
• @mui/material >=5, @emotion/react, @emotion/styled

Everything else (dayjs, @phosphor-icons/react, tiptap, dnd-kit, react-hook-form, sonner, highlight.js, react-pdf, etc.) ships as a regular dependency and is installed for you automatically. You don't have to touch peer-dep resolution yourself.

Vite integration (important)

@imola-solutions/ui re-exports libraries whose transitive graph mixes ESM and CJS (hoist-non-react-statics, lowlight, @babel/runtime/regenerator, base64-js, unicode-trie). Vite's default optimizer works for most of them, but if you see errors like SyntaxError: The requested module '...' does not provide an export named 'default' or require is not defined, add this to your vite.config.{ts,js}:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: [
      "@imola-solutions/ui",
      "@imola-solutions/ui > highlight.js",
      "@imola-solutions/ui > highlight.js/lib/core",
      "@imola-solutions/ui > react-pdf",
      "@imola-solutions/ui > lowlight",
      "hoist-non-react-statics",
    ],
  },
  ssr: {
    // If you use SSR/Next: mark the package as noExternal so its CJS deps
    // are bundled instead of required at runtime.
    noExternal: ["@imola-solutions/ui"],
  },
});

Consumers who ran npx @imola-solutions/setup v0.2.0+ have this snippet noted in their setup outro.

Usage

import { DataTable, DetailDrawer, PageHeader, Toaster } from "@imola-solutions/ui";

What's included

Tables & data

• DataTable, EnhancedDataTable, TableToolbar, TableLegend, TableExportMenu

Drawers, dialogs, popovers

• DetailDrawer, Dropdown, DropdownPopover, DropdownTrigger

Forms & inputs

• MultiSelect, MultiSelectMenu, PhoneField, PronounSelect, FileDropzone, Option

Layout & feedback

• PageHeader, UtilityHeader, EmptyStateGuide, StatCard, QuickLinkCard, PropertyList, PropertyItem, Presence, Tip

Providers

• ThemeProvider, I18nProvider, LocalizationProvider, Rtl, SettingsProvider, UserConfigProvider

Editors & viewers

• TextEditor, TextEditorToolbar, PDFViewer, CodeHighlighter

Error handling

• RouteErrorBoundary, SectionErrorBoundary

Utilities

• logger, dayjs (re-exported so @imola-solutions/chat shares the singleton)
• formatDate, formatDateTime, formatCurrency, formatStatus
• exportToCsv

Hooks

• useMediaQuery, usePopover, useCountUp

What's NOT included (kept in BOPC or extracted separately)

• AI-assisted components (feature gates, extract panels) — depend on AI service
• Analytics — BOPC-specific
• Domain-specific search bars (records-search-bar) — extract with domain package
• Logos / legal footers — brand-specific

Building

npm run build

Outputs both ESM (dist/index.js) and CJS (dist/index.cjs).