themelia-react-ui 2.0.2 → 2.0.4

package/templates/admin-shell-template.tsx

@@ -0,0 +1,382 @@
+import { useState, type ReactNode } from 'react';
+import {
+	BarChart3,
+	Package,
+	Settings,
+	ShoppingBag,
+	Store,
+	Users,
+} from 'lucide-react';
+
+import { IconBadge } from 'themelia-react-ui/base/display';
+import { Stack } from 'themelia-react-ui/base/structure';
+import { useSidebar } from 'themelia-react-ui/base/sidebar';
+import {
+	type BreadcrumbItem,
+	type LayoutLinkRenderProps,
+	type WorkspaceLink,
+} from 'themelia-react-ui/layout';
+import { AppLayout, type AppLayoutVariant } from 'themelia-react-ui/layout/app-shell';
+import {
+	HeaderBreadcrumbs,
+	HeaderNotifications,
+	HeaderUserMenu,
+	type HeaderNotification,
+	type HeaderUserMenuProps,
+} from 'themelia-react-ui/layout/header';
+import {
+	AppSidebar,
+	LayoutSidebarProvider,
+	SidebarNavigationUser,
+	type AppSidebarProps,
+} from 'themelia-react-ui/layout/sidebar';
+import { Text } from 'themelia-react-ui/typography';
+import {
+	UIProvider,
+	type ComponentScale,
+	type UIConfig,
+} from 'themelia-react-ui/ui-provider';
+
+import { AnalyticsOperationsTemplate } from './analytics-operations-template';
+import { CustomersAdminTemplate } from './customers-template';
+import { OrdersAdminTemplate } from './orders-template';
+import { ProductsAdminTemplate } from './products-template';
+import { UserPermissionsTemplate } from './user-permissions-template';
+
+export type AdminTemplateId =
+	| 'orders'
+	| 'products'
+	| 'customers'
+	| 'user-permissions'
+	| 'analytics';
+
+interface TemplateRouteMeta {
+	id: AdminTemplateId;
+	label: string;
+	url: string;
+	breadcrumbs: BreadcrumbItem[];
+}
+
+const TEMPLATE_ROUTES: Record<AdminTemplateId, TemplateRouteMeta> = {
+	analytics: {
+		id: 'analytics',
+		label: 'Overview',
+		url: '/admin/overview',
+		breadcrumbs: [{ label: 'Store overview' }],
+	},
+	orders: {
+		id: 'orders',
+		label: 'Orders',
+		url: '/admin/orders',
+		breadcrumbs: [
+			{ label: 'Orders', href: '/admin/orders' },
+			{ label: '#1042' },
+		],
+	},
+	products: {
+		id: 'products',
+		label: 'Products',
+		url: '/admin/products',
+		breadcrumbs: [
+			{ label: 'Products', href: '/admin/products' },
+			{ label: 'Merino Wool Crewneck Sweater' },
+		],
+	},
+	customers: {
+		id: 'customers',
+		label: 'Customers',
+		url: '/admin/customers',
+		breadcrumbs: [
+			{ label: 'Customers', href: '/admin/customers' },
+			{ label: 'Elena Rostova' },
+		],
+	},
+	'user-permissions': {
+		id: 'user-permissions',
+		label: 'Settings',
+		url: '/admin/settings',
+		breadcrumbs: [
+			{ label: 'Settings', href: '/admin/settings' },
+			{ label: 'Staff & permissions' },
+		],
+	},
+};
+
+const SIDEBAR_ICON_MAP: NonNullable<AppSidebarProps['iconMap']> = {
+	analytics: BarChart3,
+	orders: ShoppingBag,
+	products: Package,
+	customers: Users,
+	settings: Settings,
+};
+
+const NAVIGATION_GROUPS: NonNullable<AppSidebarProps['navigationGroups']> = {
+	Store: [
+		{
+			label: 'Overview',
+			href: '/admin/overview',
+			icon: 'analytics',
+		},
+		{
+			label: 'Orders',
+			href: '/admin/orders',
+			icon: 'orders',
+			badge: '3',
+		},
+		{
+			label: 'Products',
+			href: '/admin/products',
+			icon: 'products',
+		},
+		{
+			label: 'Customers',
+			href: '/admin/customers',
+			icon: 'customers',
+		},
+	],
+	Settings: [
+		{
+			label: 'Staff & permissions',
+			href: '/admin/settings',
+			icon: 'settings',
+		},
+	],
+};
+
+const WORKSPACE_LINKS: WorkspaceLink[] = [
+	{
+		label: 'Oak & Loom — US Online Store',
+		url: '/admin/overview',
+	},
+];
+
+const CURRENT_USER: NonNullable<HeaderUserMenuProps['user']> = {
+	name: 'Maya Lin',
+	email: 'maya.lin@oakandloom.com',
+	role: 'Store Operations Lead',
+};
+
+const INITIAL_NOTIFICATIONS: HeaderNotification[] = [
+	{
+		id: 'notif-1',
+		title: 'Order #1042 shipped via UPS Ground',
+		description: 'Tracking 1Z999AA10123456784 scanned at Brooklyn hub.',
+		time: '12m ago',
+		tone: 'info',
+		read: false,
+	},
+	{
+		id: 'notif-2',
+		title: 'Low stock alert · Midnight Navy / Large',
+		description: '6 units remaining at Brooklyn Warehouse.',
+		time: '1h ago',
+		tone: 'warning',
+		read: false,
+	},
+	{
+		id: 'notif-3',
+		title: 'Daily Stripe payout deposited',
+		description: '6,420.50 USD settled to operating account.',
+		time: '3h ago',
+		tone: 'success',
+		read: true,
+	},
+];
+
+export const adminStarterUIDefaults: UIConfig = {
+	density: { defaultScale: 'md' },
+	card: {
+		defaultSurface: 'card',
+	},
+	formatting: { locale: 'en-US' },
+	money: { defaultCurrency: 'USD' },
+};
+
+export interface AdminStarterShellProps {
+	defaultTemplate?: AdminTemplateId;
+	activeTemplate?: AdminTemplateId;
+	onTemplateChange?: (template: AdminTemplateId) => void;
+	defaultShellVariant?: AppLayoutVariant;
+	children?: ReactNode;
+}
+
+function TemplateLink({ href, children, active, disabled, external, target, rel, onClick, onNavigate, ...props }: LayoutLinkRenderProps & { onNavigate: (id: AdminTemplateId) => void }) {
+	const { setOpenMobile } = useSidebar();
+	return <a {...props} href={disabled ? undefined : href} target={target ?? (external ? '_blank' : undefined)} rel={rel ?? (external ? 'noopener noreferrer' : undefined)} aria-current={active ? 'page' : undefined} aria-disabled={disabled || undefined} onClick={(event) => {
+		onClick?.(event);
+		if (disabled) { event.preventDefault(); return; }
+		if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || external || (target && target !== '_self')) return;
+		const route = Object.values(TEMPLATE_ROUTES).find((item) => item.url === href);
+		if (route) { event.preventDefault(); onNavigate(route.id); setOpenMobile(false); }
+	}}>{children}</a>;
+}
+
+function TemplateUserMenu({ sidebar = false, onNavigate }: { sidebar?: boolean; onNavigate: (id: AdminTemplateId) => void }) {
+	const { setOpenMobile } = useSidebar();
+	const openSettings = () => { onNavigate('user-permissions'); setOpenMobile(false); };
+	return sidebar ? <SidebarNavigationUser user={CURRENT_USER} onSettings={openSettings} /> : <HeaderUserMenu user={CURRENT_USER} onSettings={openSettings} />;
+}
+
+export function AdminStarterShell({
+	defaultTemplate = 'orders',
+	activeTemplate: controlledTemplate,
+	onTemplateChange,
+	defaultShellVariant = 'inset',
+	children,
+}: AdminStarterShellProps) {
+	const [internalTemplate, setInternalTemplate] = useState<AdminTemplateId>(defaultTemplate);
+	const [notifications, setNotifications] =
+		useState<HeaderNotification[]>(INITIAL_NOTIFICATIONS);
+
+	const activeTemplate = controlledTemplate ?? internalTemplate;
+	const activeMeta = TEMPLATE_ROUTES[activeTemplate];
+
+	const selectTemplate = (next: AdminTemplateId) => {
+		if (controlledTemplate === undefined) {
+			setInternalTemplate(next);
+		}
+		onTemplateChange?.(next);
+	};
+
+	const renderLink = (props: LayoutLinkRenderProps) => <TemplateLink {...props} onNavigate={selectTemplate} />;
+
+	const brandLogo = (
+		<Stack direction="horizontal" align="center" gap="sm" wrap={false}>
+			<IconBadge icon={Store} tone="primary" shape="square" />
+			<Stack gap="none" className="min-w-0">
+				<Text weight="semibold" size="sm" className="truncate">
+					Oak & Loom
+				</Text>
+				<Text size="xs" type="secondary" className="truncate">
+					Online Store
+				</Text>
+			</Stack>
+		</Stack>
+	);
+
+	const sidebarNode = (
+		<AppSidebar
+			className="h-full"
+			logo={brandLogo}
+			collapsedLogo={<IconBadge icon={Store} tone="primary" shape="square" />}
+			workspaceLinks={WORKSPACE_LINKS}
+			navigationGroups={NAVIGATION_GROUPS}
+			iconMap={SIDEBAR_ICON_MAP}
+			currentUrl={activeMeta.url}
+			renderLink={renderLink}
+			searchable
+			slots={{
+				footer: (
+					<TemplateUserMenu sidebar onNavigate={selectTemplate} />
+				),
+			}}
+		/>
+	);
+
+	const breadcrumbsNode = (
+		<HeaderBreadcrumbs
+			homeBreadcrumb={{ label: 'Oak & Loom', href: '/admin/overview' }}
+			breadcrumbs={activeMeta.breadcrumbs}
+			renderLink={renderLink}
+		/>
+	);
+
+	const trailingToolsNode = (
+		<Stack direction="horizontal" align="center" gap="sm" wrap={false}>
+			<HeaderNotifications
+				notifications={notifications}
+				onMarkAllRead={() =>
+					setNotifications((current) =>
+						current.map((item) => ({ ...item, read: true })),
+					)
+				}
+			/>
+			<TemplateUserMenu onNavigate={selectTemplate} />
+		</Stack>
+	);
+
+	const activePageNode =
+		children ??
+		(activeTemplate === 'orders' ? (
+			<OrdersAdminTemplate />
+		) : activeTemplate === 'products' ? (
+			<ProductsAdminTemplate />
+		) : activeTemplate === 'customers' ? (
+			<CustomersAdminTemplate />
+		) : activeTemplate === 'user-permissions' ? (
+			<UserPermissionsTemplate />
+		) : (
+			<AnalyticsOperationsTemplate />
+		));
+
+	return (
+		<LayoutSidebarProvider adaptTo="container" className="h-full min-h-0">
+			{defaultShellVariant === 'sidebar' || defaultShellVariant === 'inset' ? (
+				<AppLayout
+					variant={defaultShellVariant}
+					className="h-full min-h-0"
+					sidebar={sidebarNode}
+					slots={{
+						toolbarStart: breadcrumbsNode,
+						toolbarEnd: trailingToolsNode,
+					}}
+				>
+					{activePageNode}
+				</AppLayout>
+			) : defaultShellVariant === 'stacked' ? (
+				<AppLayout variant="stacked" className="h-full min-h-0" logo={brandLogo}
+					nav={<Stack direction="horizontal" gap="lg">{Object.values(TEMPLATE_ROUTES).map((route) => <TemplateLink key={route.id} href={route.url} active={route.id === activeTemplate} onNavigate={selectTemplate}>{route.label}</TemplateLink>)}</Stack>}
+					slots={{ headerEnd: trailingToolsNode }}>
+					{activePageNode}
+				</AppLayout>
+			) : (
+				<AppLayout
+					variant={defaultShellVariant}
+					className="h-full min-h-0"
+					logo={brandLogo}
+					sidebar={sidebarNode}
+					slots={{
+						headerStart: breadcrumbsNode,
+						headerEnd: trailingToolsNode,
+					}}
+				>
+					{activePageNode}
+				</AppLayout>
+			)}
+		</LayoutSidebarProvider>
+	);
+}
+
+export interface AdminTemplatesShowcaseProps extends AdminStarterShellProps {
+	defaultDensity?: ComponentScale;
+}
+
+export function AdminTemplatesShowcase({ defaultDensity = 'md', ...props }: AdminTemplatesShowcaseProps) {
+	return (
+		<UIProvider config={{ ...adminStarterUIDefaults, density: { defaultScale: defaultDensity } }}>
+			<AdminStarterShell {...props} />
+		</UIProvider>
+	);
+}
+
+export function OrdersTemplatePreview() {
+	return <OrdersAdminTemplate />;
+}
+
+export function ProductsTemplatePreview() {
+	return <ProductsAdminTemplate />;
+}
+
+export function CustomersTemplatePreview() {
+	return <CustomersAdminTemplate />;
+}
+
+export function UserPermissionsTemplatePreview() {
+	return <UserPermissionsTemplate />;
+}
+
+export function AnalyticsOperationsTemplatePreview() {
+	return <AnalyticsOperationsTemplate />;
+}
+
+export default AdminTemplatesShowcase;