@statsbygg/layout
v0.1.12
Published
Shared layout components for Statsbygg microfrontend architecture
Readme
@statsbygg/layout
Self-contained shared layout package for Statsbygg's Next.js microfrontend architecture using DigDir Designsystemet.
Overview
This package provides a consistent layout and state management across multiple independent Next.js applications (zones) in a microfrontend architecture.
Features
- DigDir Designsystemet Integration: Uses official Norwegian design system components
- Self-Contained State Management: Built-in zustand store for global state (user, theme, locale)
- Dynamic Breadcrumbs: Automatic breadcrumb generation with responsive behavior
- Cross-Zone Synchronization: State persists across browser tabs and zone navigation
- CSS Modules with Colocation: Each component follows ComponentName/ComponentName.tsx pattern
- TypeScript: Full type safety with separate .types.ts files
- Function Declarations: All functions use function declaration syntax
Installation
npm install @statsbygg/layoutPeer Dependencies
This package requires:
next>= 14.0.0react>= 18.0.0react-dom>= 18.0.0
Package Structure
src/
├── components/
│ ├── Breadcrumbs/
│ │ ├── Breadcrumbs.tsx
│ │ ├── Breadcrumbs.types.ts
│ │ ├── Breadcrumbs.module.css
│ │ └── index.ts
│ ├── GlobalHeader/
│ │ ├── GlobalHeader.tsx
│ │ ├── GlobalHeader.types.ts
│ │ ├── GlobalHeader.module.css
│ │ └── index.ts
│ ├── GlobalFooter/
│ │ ├── GlobalFooter.tsx
│ │ ├── GlobalFooter.types.ts
│ │ ├── GlobalFooter.module.css
│ │ └── index.ts
│ └── RootLayout/
│ ├── RootLayout.tsx
│ ├── RootLayout.types.ts
│ ├── RootLayout.module.css
│ └── index.ts
├── store/
│ └── globalState.ts
├── utils/
│ └── routeRegistry.ts
└── index.tsUsage
Basic Setup
In your Next.js zone's root layout file (app/layout.tsx):
import { RootLayout } from '@statsbygg/layout';
import '@digdir/designsystemet-theme';
import '@digdir/designsystemet-css';
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="no">
<body>
<RootLayout zoneName="your-app-zone">
{children}
</RootLayout>
</body>
</html>
);
}Using the Global Store
The package exports a zustand store for managing global state:
import { useGlobalStore } from '@statsbygg/layout';
function MyComponent() {
const { user, theme, setUser, setTheme } = useGlobalStore();
function handleLogin() {
setUser({ name: 'John Doe', email: '[email protected]' });
}
function toggleTheme() {
setTheme(theme === 'light' ? 'dark' : 'light');
}
return (
<div>
<p>Current theme: {theme}</p>
{user && <p>Logged in as {user.name}</p>}
<button onClick={toggleTheme}>Toggle theme</button>
</div>
);
}API Reference
RootLayout
Main layout component that orchestrates the entire layout structure.
interface RootLayoutProps {
children: React.ReactNode;
zoneName: string;
className?: string;
}useGlobalStore
Zustand store hook for global state management.
interface GlobalState {
user: { name: string; email: string } | null;
theme: 'light' | 'dark';
locale: 'no' | 'en';
setUser: (user: { name: string; email: string } | null) => void;
setTheme: (theme: 'light' | 'dark') => void;
setLocale: (locale: 'no' | 'en') => void;
initialize: () => Promise<void>;
}Breadcrumbs Behavior
The Breadcrumbs component uses Designsystemet's responsive behavior:
- On narrow screens (<650px): Shows a back button to parent level
- On wide screens (≥650px): Shows full breadcrumb path
- Last item: Automatically marked with
aria-current="page"
State Persistence
Global state is automatically persisted to localStorage using zustand's persist middleware. This enables:
- Cross-tab synchronization: Changes in one tab reflect in others
- Cross-zone persistence: State is maintained when navigating between zones
- Session persistence: State survives page refreshes
Design System Integration
This package uses DigDir Designsystemet components:
Breadcrumbs(with List, Item, Link)ButtonHeadingLinkParagraph
All styling uses Designsystemet design tokens:
--ds-spacing-*for spacing--ds-color-*for colors--ds-font-size-*for typography
Development
# Install dependencies
npm install
# Build the package
npm run build
# Watch mode for development
npm run dev
# Type checking
npm run type-check
# Linting
npm run lintDependencies
This package includes:
@digdir/designsystemet-react^1.5.1@statsbygg/design-tokens^0.2.0clsx^2.0.0zustand^5.0.4
License
Internal use only - Statsbygg