ptech-shell-ui

Composable app shell layout for PTECH Module Federation remotes.

This package owns layout patterns — not shell service contracts (see ptech-shell-sdk), not MSAL/router adapters (see ptech-shell-react), and not standalone mocks (see ptech-shell-dev).

Install

npm i ptech-shell-ui ptech-shell-sdk react react-router

Quick start

import { Suspense } from 'react';
import { Routes, Route } from 'react-router';
import {
  AppShellLayout,
  HeaderProvider,
  ShellTopBar,
  useHeaderConfig,
  useRouteBreadcrumbs,
} from 'ptech-shell-ui';
import { Home } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { ROUTE_META } from './config/routeConfig';
import { AppSidebar } from './AppSidebar';
import { UserMenu } from './UserMenu';

function DashboardPage() {
  const { t } = useTranslation();
  const breadcrumbs = useRouteBreadcrumbs({
    routeMeta: ROUTE_META,
    translate: t,
    homeIcon: Home,
  });

  useHeaderConfig({
    variant: 'breadcrumb',
    breadcrumbs,
    currentIcon: Home,
    currentTitle: t('nav.dashboard'),
  });

  return <div>...</div>;
}

export function AppShell({ children }: { children?: React.ReactNode }) {
  return (
    <HeaderProvider>
      <AppShellLayout
        sidebar={<AppSidebar />}
        header={
          <ShellTopBar
            trailing={<UserMenu />}
            classNames={{
              root: 'h-12 border-b border-ps-header bg-ps-header backdrop-blur-sm',
              breadcrumbLink: 'text-ps-subtle hover:text-ps-aqua transition-colors truncate',
              breadcrumbCurrent: 'flex items-center gap-1.5 shrink-0 font-semibold text-ps whitespace-nowrap',
              breadcrumbCurrentIcon: 'w-4 h-4 text-ps-aqua',
            }}
          />
        }
      >
        <Suspense fallback={null}>
          <Routes>
            <Route path="dashboard" element={<DashboardPage />} />
          </Routes>
        </Suspense>
      </AppShellLayout>
    </HeaderProvider>
  );
}

Standalone bootstrap

Pair with initStandaloneApp from ptech-shell-dev and MSAL from ptech-shell-react:

import { initStandaloneApp } from 'ptech-shell-dev';
import { createMsalUserService } from 'ptech-shell-react';

initStandaloneApp({
  appKey: 'my-remote',
  apiBase: import.meta.env.PUBLIC_API_URL,
  tenant: { tenantId: '...', tenantSlug: 'dev' },
  createUserService: () =>
    createMsalUserService({
      msal: msalInstance,
      defaultScopes: ['api://example/access_as_user'],
      loginMode: 'redirect',
    }),
  defaultAuthScopes: ['api://example/access_as_user'],
});

Exports

| Export | Purpose | |--------|---------| | AppShellLayout | Sidebar + header slots, scrollable content, --app-sidebar-width CSS var | | HeaderProvider / useHeaderConfig | Page-driven top bar state | | useHeaderActions | Inject header actions from nested components | | ShellTopBar | Breadcrumb/overview top bar driven by header context | | useRouteBreadcrumbs | Build parent crumbs from a route meta map | | useAppPath / useAppPathResolver | Basename-aware hrefs via shell NavigationService |

Build

npm run build -w ptech-shell-ui