@statsbygg/layout 0.0.1

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@statsbygg/layout",
+  "version": "0.0.1",
+  "publishConfig": { "access": "public" },
+  "description": "Shared layout components for Statsbygg microfrontend architecture",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+"scripts": {
+  "build": "tsup",
+  "dev": "tsup --watch",
+  "lint": "eslint src --ext .ts,.tsx",
+  "type-check": "tsc --noEmit"
+},
+  "peerDependencies": {
+    "next": ">=14.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "zustand": "^5.0.4"
+  },
+  "dependencies": {
+    "@digdir/designsystemet-react": "^1.5.1",
+    "@statsbygg/design-tokens": "^0.2.0",
+    "clsx": "^2.0.0",
+    "zustand": "^5.0.4",
+    "lucide-react": "^0.514.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "tsup": "^8.0.0",
+    "zustand": "^5.0.4",
+    "typescript": "^5.0.0"
+  },
+  "sideEffects": ["**/*.css"]
+}

package/src/components/Breadcrumbs/Breadcrumbs.module.css

@@ -0,0 +1,22 @@
+.breadcrumbs {
+  --dsc-breadcrumbs-color: var(--ds-color-text-default);
+  padding: 2.5rem 0 0 0;
+}
+
+.link {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  color: var(--ds-color-text-default);
+}
+
+.link:hover 
+.link:visited{
+  color: var(--ds-color-text-default);
+}
+
+.currentLink {
+  text-decoration: none;
+  font-weight: 500;
+  pointer-events: none;
+  color: var(--ds-color-text-default);
+}

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import { Breadcrumbs } from '@digdir/designsystemet-react';
+import clsx from 'clsx';
+import type { BreadcrumbsProps } from './Breadcrumbs.types';
+import styles from './Breadcrumbs.module.css';
+import { getBreadcrumbs, getZoneRoot, transformHrefForZone } from '@/routes';
+
+export function SbBreadcrumbs({ className, zone }: BreadcrumbsProps) {
+ const pathname = usePathname();
+  const isDev = process.env.NODE_ENV === 'development';
+  const prodUrl = 'https://www.statsbygg.no';
+  const zoneRoot = getZoneRoot(zone);
+  
+  const fullPath = isDev && zoneRoot !== '/' && !pathname.startsWith(zoneRoot)
+    ? `${zoneRoot}${pathname}`
+    : pathname;
+  
+  const breadcrumbs = getBreadcrumbs(zone, fullPath);
+
+  if (breadcrumbs.length <= 1) {
+    return null;
+  }
+
+
+  return (
+    <Breadcrumbs aria-label="Du er her:" className={clsx(styles.breadcrumbs, className)}>
+      <Breadcrumbs.List>
+        {breadcrumbs.map((crumb, index) => {
+          const isLast = index === breadcrumbs.length - 1;
+          const href = transformHrefForZone(crumb.href, zone, { isDev, prodUrl });
+          
+          return (
+            <Breadcrumbs.Item key={crumb.href}>
+              <Breadcrumbs.Link
+                href={href}
+                aria-current={isLast ? 'page' : undefined}
+                className={isLast ? styles.currentLink : styles.link}
+              >
+                {crumb.label}
+              </Breadcrumbs.Link>
+            </Breadcrumbs.Item>
+          );
+        })}
+      </Breadcrumbs.List>
+    </Breadcrumbs>
+  );
+}

package/src/components/Breadcrumbs/Breadcrumbs.types.ts

@@ -0,0 +1,4 @@
+export interface BreadcrumbsProps {
+  className?: string;
+  zone: string;
+}

package/src/components/Breadcrumbs/index.ts

@@ -0,0 +1,2 @@
+export { SbBreadcrumbs as Breadcrumbs } from './Breadcrumbs';
+export type { BreadcrumbsProps } from './Breadcrumbs.types';

package/src/components/GlobalFooter/GlobalFooter.module.css

@@ -0,0 +1,28 @@
+.footer {
+  background-color: var(--ds-color-neutral-surface-subtle);
+  border-top: 1px solid var(--ds-color-neutral-border-subtle);
+  margin-top: auto;
+}
+
+.container {
+  max-width: 1440px;
+  margin: 0 auto;
+  padding: var(--ds-spacing-6) var(--ds-spacing-4);
+}
+
+.content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--ds-spacing-4);
+  flex-wrap: wrap;
+}
+
+@media (max-width: 768px) {
+  .content {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+
+}

package/src/components/GlobalFooter/GlobalFooter.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { Paragraph } from '@digdir/designsystemet-react';
+import clsx from 'clsx';
+import type { GlobalFooterProps } from './GlobalFooter.types';
+import styles from './GlobalFooter.module.css';
+
+export function GlobalFooter({ className }: GlobalFooterProps) {
+
+  return (
+    <footer className={clsx(styles.footer, className)}>
+      <div className={styles.container}>
+        <div className={styles.content}>
+          <Paragraph>
+            Statsbygg Footer
+          </Paragraph>
+
+
+        </div>
+      </div>
+    </footer>
+  );
+}

package/src/components/GlobalFooter/GlobalFooter.types.ts

@@ -0,0 +1,3 @@
+export interface GlobalFooterProps {
+  className?: string;
+}

package/src/components/GlobalFooter/index.ts

@@ -0,0 +1,2 @@
+export { GlobalFooter } from './GlobalFooter';
+export type { GlobalFooterProps } from './GlobalFooter.types';

package/src/components/GlobalHeader/GlobalHeader.module.css

@@ -0,0 +1,70 @@
+.header {
+  background-color: var(--ds-color-accent-surface-tinted);
+  border-bottom: 1px solid var(--ds-color-neutral-border-subtle);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.headerContainer {
+  max-width: 90rem;
+  margin: 0 auto;
+  padding: 0 var(--ds-size-30);
+}
+
+.topBarContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.25rem 0;
+}
+
+.logo {
+  margin: 0;
+  color: var(--ds-color-neutral-text-default);
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  min-height: inherit;
+}
+
+.actionsContainer {
+  display: flex;
+  align-items: stretch;
+  gap: var(--ds-size-9);
+  min-height: inherit;
+}
+
+.searchInput {
+  min-width: 12.5rem;
+  display: flex;
+  align-items: center;
+}
+
+@media (max-width: 768px) {
+  .container {
+    padding: 0 var(--ds-spacing-4);
+  }
+
+  .topBar {
+    flex-wrap: wrap;
+    padding: var(--ds-spacing-4) 0;
+  }
+
+  .actions {
+    order: 3;
+    width: 100%;
+    flex-direction: column;
+    gap: var(--ds-spacing-3);
+  }
+
+  .searchInput {
+    width: 100%;
+    min-width: auto;
+  }
+
+  .menuButton {
+    width: 100%;
+    justify-content: center;
+  }
+}

package/src/components/GlobalHeader/GlobalHeader.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { useState } from 'react';
+import { Link, Textfield } from '@digdir/designsystemet-react';
+import clsx from 'clsx';
+import { Breadcrumbs } from '../Breadcrumbs';
+import { MenuButton } from '../MenuButton';
+import type { GlobalHeaderProps } from './GlobalHeader.types';
+import styles from './GlobalHeader.module.css';
+import logo from '../../logo.svg'; 
+import Image from 'next/image';
+
+export function GlobalHeader({ className, zone }: GlobalHeaderProps) {
+  const [searchValue, setSearchValue] = useState('');
+
+  return (
+    <header className={clsx(styles.header, className)}>
+      <div className={styles.headerContainer}>
+        <div className={styles.topBarContainer}>
+          <Link href="https://www.statsbygg.no">
+            <Image src={logo} alt="Logo" className={styles.logo} />
+          </Link>
+          <div className={styles.actionsContainer}>
+            <Textfield
+              value={searchValue}
+              onChange={(e) => setSearchValue(e.target.value)}
+              placeholder="Søk..."
+              className={styles.searchInput}
+              aria-label="Søk"
+            />
+            <MenuButton zone={zone}/>
+          </div>
+        </div>
+        <Breadcrumbs zone={zone} />
+      </div>
+    </header>
+  );
+}

package/src/components/GlobalHeader/GlobalHeader.types.ts

@@ -0,0 +1,4 @@
+export interface GlobalHeaderProps {
+  className?: string;
+  zone: string;
+}

package/src/components/GlobalHeader/index.ts

@@ -0,0 +1,2 @@
+export { GlobalHeader } from './GlobalHeader';
+export type { GlobalHeaderProps } from './GlobalHeader.types';

package/src/components/MenuButton/MenuButton.module.css

@@ -0,0 +1,41 @@
+.userInfo {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-spacing-1);
+  padding: var(--ds-spacing-2) var(--ds-spacing-3);
+}
+
+.userName {
+  font-size: var(--ds-font-size-sm);
+  font-weight: var(--ds-font-weight-medium);
+  color: var(--ds-color-neutral-text-default);
+}
+
+.userEmail {
+  font-size: var(--ds-font-size-xs);
+  color: var(--ds-color-neutral-text-subtle);
+}
+
+.menuButton {
+  background-color: var(--ds-color-neutral-base-default);
+}
+
+.devContainer {
+  display: flex;
+  gap: var(--ds-spacing-4);
+  padding: var(--ds-spacing-2);
+}
+
+.zoneSection {
+  flex: 1;
+  min-width: 12rem;
+}
+
+.zoneTitle {
+  font-weight: 600;
+  padding: var(--ds-spacing-2);
+  color: var(--ds-color-neutral-text-default);
+  border-bottom: 1px solid var(--ds-color-neutral-border-subtle);
+  margin-bottom: var(--ds-spacing-2);
+  text-transform: capitalize;
+}

package/src/components/MenuButton/MenuButton.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import Link from 'next/link';
+import { Dropdown } from '@digdir/designsystemet-react';
+import { Menu } from 'lucide-react';
+import { getZoneMenuRoutes, getAllZones, transformHrefForZone } from '@/routes';
+import type { MenuButtonProps } from './MenuButton.types';
+import styles from './MenuButton.module.css';
+
+export function MenuButton({ zone }: MenuButtonProps) {
+  const isDev = process.env.NODE_ENV === 'development';
+  // TODO: Temporary here. Should come from env or something
+  const prodUrl = 'https://www.statsbygg.no';
+  const allZones = getAllZones();
+
+  return (
+    <Dropdown.TriggerContext>
+      <Dropdown.Trigger asChild className={styles.menuButton}>
+        <Menu size={20} aria-hidden />
+        Meny
+      </Dropdown.Trigger>
+      <Dropdown>
+       {isDev ? (
+        <div className={styles.devContainer}>
+          {allZones.map((z) => {
+            const routes = getZoneMenuRoutes(z);
+            return (
+              <div key={z} className={styles.zoneSection}>
+                <div className={styles.zoneTitle}>{z}</div>
+                <Dropdown.List>
+                  {routes.map((r) => (
+                    <Dropdown.Item key={`${r.zone}:${r.path}`}>
+                      <Link href={transformHrefForZone(r.path, zone, { isDev, prodUrl })}>
+                        {r.label}
+                      </Link>
+                    </Dropdown.Item>
+                  ))}
+                </Dropdown.List>
+              </div>
+            );
+          })}
+        </div>
+      ) : (
+        <Dropdown.List>
+          {getZoneMenuRoutes(zone).map((r) => (
+            <Dropdown.Item key={`${r.zone}:${r.path}`}>
+              <Link href={transformHrefForZone(r.path, zone, { isDev, prodUrl })}>
+                {r.label}
+              </Link>
+            </Dropdown.Item>
+          ))}
+        </Dropdown.List>
+        )}
+      </Dropdown>
+    </Dropdown.TriggerContext>
+  );
+}

package/src/components/MenuButton/MenuButton.types.ts

@@ -0,0 +1,3 @@
+export type MenuButtonProps = {
+  zone: string;
+};

package/src/components/MenuButton/index.ts

@@ -0,0 +1,2 @@
+export { MenuButton } from './MenuButton';
+export type { MenuButtonProps } from './MenuButton.types';

package/src/components/RootLayout/RootLayout.module.css

@@ -0,0 +1,9 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.main {
+  flex: 1;
+}

package/src/components/RootLayout/RootLayout.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { useEffect } from 'react';
+import clsx from 'clsx';
+import { GlobalHeader } from '../GlobalHeader';
+import { GlobalFooter } from '../GlobalFooter';
+import type { RootLayoutProps } from './RootLayout.types';
+import styles from './RootLayout.module.css';
+import { useGlobalStore } from '@/store/globalState';
+
+export function RootLayout({
+  children,
+  zone,        
+  className,
+}: RootLayoutProps) {
+  const initialize = useGlobalStore((state) => state.initialize);
+
+  useEffect(() => {
+    try {
+      const maybe = initialize();
+      if (maybe && typeof (maybe as Promise<void>).then === 'function') {
+        (maybe as Promise<void>).catch((error) => {
+          console.error('Failed to initialize global state:', error);
+        });
+      }
+    } catch (error) {
+      console.error('Failed to initialize global state:', error);
+    }
+  }, [initialize]);
+
+
+  return (
+    <div className={clsx(styles.root, className)} data-zone={zone}>
+      <GlobalHeader zone={zone}/>
+      <main className={styles.main}>{children}</main>
+      <GlobalFooter />
+    </div>
+  );
+}

package/src/components/RootLayout/RootLayout.types.ts

@@ -0,0 +1,5 @@
+export interface RootLayoutProps {
+  children: React.ReactNode;
+  zone: string;
+  className?: string;
+}

package/src/components/RootLayout/index.ts

@@ -0,0 +1,2 @@
+export { RootLayout } from './RootLayout';
+export type { RootLayoutProps } from './RootLayout.types';

package/src/index.ts

@@ -0,0 +1,6 @@
+
+export { RootLayout } from './components/RootLayout';
+export type { RootLayoutProps } from './components/RootLayout';
+
+export { useGlobalStore } from './store/globalState';
+export type { GlobalState } from './store/globalState';