@lnpg/sol

LNPG Sol is a framework-agnostic, Bootstrap-based component library and design foundation. Components use typed vanilla TypeScript DOM factories; applications can wrap them with Vue, React, or other frameworks.

The npm package is public for LNPG application installs. It is marked UNLICENSED and is not licensed for third-party use.

Install

Install Sol and its peer dependencies from npm:

npm install @lnpg/sol bootstrap bootstrap-icons

Live application demo

From this repository, run npm install once, then npm run dev. Open the URL printed by Vite (normally http://localhost:5173/). The internal demo is a working sample application: navigate the sidebar, search/filter/sort members, page through results, add or edit a member, confirm a status change, export CSV, and inspect dashboard, reports, settings and component patterns. Sample data stays in the browser tab and resets on reload.

Development mode imports Sol's TypeScript and SCSS source directly, so saving a component or style updates the demo without an npm publish or dist build. Run npm run dev -- --mode external for the separate public component showcase. Static demo builds still import the compiled package with npm run build.

Sol requires Bootstrap ^5.3.8 and Bootstrap Icons ^1.11.3 as peer dependencies.

Styles

Import styles once from your application entry point:

import '@lnpg/sol/styles';

Layer-specific styles are available from @lnpg/sol/styles/foundation, @lnpg/sol/styles/admin, and @lnpg/sol/styles/public.

Internal navbar

Mount the shared navbar into an application-owned element:

import { mountInternalNavbar } from '@lnpg/sol/ui-components/navbar';

const navbar = mountInternalNavbar(document.querySelector('#navbar')!, {
  appName: 'Orbit',
  appUrl: import.meta.env.VITE_ORBIT_URL,
  activeAppId: 'orbit',
  appOverrides: {
    orbit: { href: import.meta.env.VITE_ORBIT_URL },
    identity: { href: import.meta.env.VITE_IDENTITY_URL },
    telescope: { href: import.meta.env.VITE_TELESCOPE_URL },
    socium: { href: import.meta.env.VITE_SOCIUM_URL },
    nexus: { enabled: false },
  },
  search: {
    placeholder: 'Search Orbit',
    action: import.meta.env.VITE_ORBIT_SEARCH_URL,
    method: 'post',
  },
  account: {
    accountHref: import.meta.env.VITE_ACCOUNT_URL,
    securityHref: import.meta.env.VITE_SECURITY_URL,
    sessionsHref: import.meta.env.VITE_SESSIONS_URL,
    showWorkAccount: false,
    logoutHref: import.meta.env.VITE_LOGOUT_URL,
  },
});

// On teardown:
navbar.destroy();

The switcher ships Orbit, Identity, Telescope, Socium, and Nexus with PNG icons and descriptions, but no destination URLs. Use appOverrides to change any field by app ID, including enabled: false to hide Nexus; use apps to replace the entire menu with custom entries. Each app has reusable transparent <id>-white.png and <id>-black.png icons at @lnpg/sol/assets/apps/. The dark switcher uses white icons; set appSwitcherTheme: 'light' to use black icons on light tiles and white icons on highlighted tiles. Browser-facing environment values are public configuration, not secrets. Search submits via POST by default; supply search.action or use search.onSubmit for SPA navigation. Notifications stay hidden unless showNotifications is enabled. Account menu labels remain visible without URLs, but cannot navigate until the consumer supplies their destinations.

The Account menu includes Security and Sessions. Work Account remains visible by default; set account.showWorkAccount to false to remove its entire section.

See installation and configuration guide for style layers, consumer configuration, and additional exports.