34 lines
2.4 KiB
TypeScript
34 lines
2.4 KiB
TypeScript
import { useState } from "react";
|
|
import { Folder, LayoutDashboard, Mail } from "lucide-react";
|
|
import NavigationPreferenceEditor from "../src/components/NavigationPreferenceEditor";
|
|
import { PlatformLanguageProvider } from "../src/i18n/LanguageContext";
|
|
import IconRail from "../src/layout/IconRail";
|
|
import type { NavigationPreferences, PlatformNavItem, ProductAreaContribution } from "../src/types";
|
|
import type { NavigationPreferenceScope } from "../src/components/navigationPreferenceLayout";
|
|
|
|
const items: PlatformNavItem[] = [
|
|
{ to: "/dashboard", label: "Dashboard", surfaceId: "dashboard", navigationId: "dashboard", icon: LayoutDashboard, navigationLocked: true, navigationLayers: { module: { order: 0, visible: true, locked: false }, system: { order: 0, visible: true, locked: true }, tenant: { order: 0, visible: true, locked: true } } },
|
|
{ to: "/files", label: "Files", surfaceId: "files", navigationId: "files", icon: Folder, order: 1 },
|
|
{ to: "/mail", label: "Mail", surfaceId: "mail", navigationId: "mail", icon: Mail, order: 2 }
|
|
];
|
|
const areas: ProductAreaContribution[] = [
|
|
{ id: "content", moduleId: "files", label: "Documents", iconName: "files", surfaceIds: ["files"], order: 1 },
|
|
{ id: "communication", moduleId: "mail", label: "Communication", iconName: "mail", surfaceIds: ["mail"], order: 2 }
|
|
];
|
|
|
|
export default function NavigationLayoutScenario({ scope = "user", disabled = false, language = "en" }: { scope?: NavigationPreferenceScope; disabled?: boolean; language?: string }) {
|
|
const [value, setValue] = useState<NavigationPreferences | null>(() => new URLSearchParams(window.location.search).has("unavailable") ? {
|
|
contract_version: "1", order: ["dashboard", "optional.navigation.absent", "files", "mail"], hidden: [], separators: []
|
|
} : null);
|
|
return <PlatformLanguageProvider preferredLanguageCode={language}>
|
|
<div style={{ display: "grid", gridTemplateColumns: "auto minmax(0, 1fr)", minWidth: 0 }}>
|
|
<IconRail navItems={items} productAreas={areas} presentation={{ navigation: value }} />
|
|
<main style={{ minWidth: 0, padding: 16 }}>
|
|
<h1>Navigation editor fixture</h1>
|
|
<NavigationPreferenceEditor items={items} productAreas={areas} value={value} onChange={setValue} scope={scope} disabled={disabled} />
|
|
<output data-testid="navigation-draft" style={{ display: "none" }}>{JSON.stringify(value)}</output>
|
|
</main>
|
|
</div>
|
|
</PlatformLanguageProvider>;
|
|
}
|