feat(dashboard-shell): add @bytelyst/dashboard-shell package (4.3) — 41 tests
Components: - DashboardShell — main layout combining sidebar + topbar + content area - Sidebar — collapsible nav with sections, badges, active state, auto-settings link - TopBar — user avatar/menu, notifications bell, sign out, custom actions - ProfilePage — avatar, name/email form, loading/error/success states - BillingPage — current plan card, status badge, trial info, plan comparison grid - SettingsPage — section-based layout with empty state Features: - NavItem[] or NavSection[] for flat or grouped navigation - ShellFeatures toggle: profile, billing, settings, notifications, themeToggle - ShellUser with avatar, role, initials fallback - onNavigate callback for SPA routers (Next.js, etc.) - Collapsible sidebar with toggle button - All styled via --bl-shell-* CSS custom properties with fallbacks - 41 tests covering all components
This commit is contained in:
saravanakumardb1
parent
6354711f97
commit
1fda345d38
36
packages/dashboard-shell/package.json
Normal file
36
packages/dashboard-shell/package.json
Normal file
@ -0,0 +1,36 @@
|
||||
{
|
||||
"name": "@bytelyst/dashboard-shell",
|
||||
"version": "0.1.0",
|
||||
"description": "Configurable Next.js dashboard layout with sidebar, profile, billing, and settings pages",
|
||||
"type": "module",
|
||||
"main": "./dist/index.js",
|
||||
"types": "./dist/index.d.ts",
|
||||
"exports": {
|
||||
".": {
|
||||
"import": "./dist/index.js",
|
||||
"types": "./dist/index.d.ts"
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "tsc",
|
||||
"test": "vitest run",
|
||||
"typecheck": "tsc --noEmit"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=18.0.0",
|
||||
"react-dom": ">=18.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@testing-library/react": "^16.3.2",
|
||||
"@types/react": "^19.2.14",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"happy-dom": "^18.0.1",
|
||||
"react": "^19.2.4",
|
||||
"react-dom": "^19.2.4",
|
||||
"typescript": "^5.7.3",
|
||||
"vitest": "^4.0.18"
|
||||
}
|
||||
}
|
||||
189
packages/dashboard-shell/src/BillingPage.tsx
Normal file
189
packages/dashboard-shell/src/BillingPage.tsx
Normal file
@ -0,0 +1,189 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import type { BillingPageProps } from './types.js';
|
||||
|
||||
const statusColors: Record<string, string> = {
|
||||
active: 'var(--color-success, #16a34a)',
|
||||
trialing: 'var(--color-warning, #d97706)',
|
||||
past_due: 'var(--color-destructive, #dc2626)',
|
||||
canceled: 'var(--color-muted-foreground, #6b7280)',
|
||||
};
|
||||
|
||||
export function BillingPage({
|
||||
currentPlan = 'Free',
|
||||
status = 'active',
|
||||
trialEndsAt,
|
||||
onManageBilling,
|
||||
plans = [],
|
||||
}: BillingPageProps): ReactNode {
|
||||
return (
|
||||
<div data-testid="bl-shell-billing-page" style={{ maxWidth: 800 }}>
|
||||
<h1
|
||||
style={{
|
||||
fontSize: 24,
|
||||
fontWeight: 700,
|
||||
marginBottom: 24,
|
||||
color: 'var(--color-foreground, #111827)',
|
||||
}}
|
||||
>
|
||||
Billing
|
||||
</h1>
|
||||
|
||||
{/* Current plan card */}
|
||||
<div
|
||||
data-testid="bl-billing-current"
|
||||
style={{
|
||||
padding: 24,
|
||||
borderRadius: 12,
|
||||
border: '1px solid var(--bl-shell-border, var(--color-border, #e5e7eb))',
|
||||
marginBottom: 32,
|
||||
background: 'var(--color-surface, #fff)',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: 16,
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: 14,
|
||||
color: 'var(--color-muted-foreground, #6b7280)',
|
||||
marginBottom: 4,
|
||||
}}
|
||||
>
|
||||
Current Plan
|
||||
</div>
|
||||
<div
|
||||
style={{ fontSize: 24, fontWeight: 700, color: 'var(--color-foreground, #111827)' }}
|
||||
>
|
||||
{currentPlan}
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
data-testid="bl-billing-status"
|
||||
style={{
|
||||
padding: '4px 12px',
|
||||
borderRadius: 20,
|
||||
fontSize: 12,
|
||||
fontWeight: 600,
|
||||
color: statusColors[status] || statusColors.active,
|
||||
background: `color-mix(in srgb, ${statusColors[status] || statusColors.active} 10%, transparent)`,
|
||||
border: `1px solid color-mix(in srgb, ${statusColors[status] || statusColors.active} 30%, transparent)`,
|
||||
}}
|
||||
>
|
||||
{status.replace('_', ' ')}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{trialEndsAt && (
|
||||
<div
|
||||
data-testid="bl-billing-trial"
|
||||
style={{ fontSize: 14, color: 'var(--color-warning, #d97706)', marginBottom: 12 }}
|
||||
>
|
||||
Trial ends: {trialEndsAt}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{onManageBilling && (
|
||||
<button
|
||||
data-testid="bl-billing-manage"
|
||||
onClick={onManageBilling}
|
||||
style={{
|
||||
padding: '10px 20px',
|
||||
borderRadius: 8,
|
||||
border: '1px solid var(--bl-shell-border, var(--color-border, #e5e7eb))',
|
||||
fontSize: 14,
|
||||
fontWeight: 500,
|
||||
cursor: 'pointer',
|
||||
background: 'var(--color-surface, #fff)',
|
||||
color: 'var(--color-foreground, #111827)',
|
||||
}}
|
||||
>
|
||||
Manage Billing
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Plan comparison */}
|
||||
{plans.length > 0 && (
|
||||
<div>
|
||||
<h2
|
||||
style={{
|
||||
fontSize: 18,
|
||||
fontWeight: 600,
|
||||
marginBottom: 16,
|
||||
color: 'var(--color-foreground, #111827)',
|
||||
}}
|
||||
>
|
||||
Available Plans
|
||||
</h2>
|
||||
<div
|
||||
data-testid="bl-billing-plans"
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: `repeat(${Math.min(plans.length, 3)}, 1fr)`,
|
||||
gap: 16,
|
||||
}}
|
||||
>
|
||||
{plans.map(plan => (
|
||||
<div
|
||||
key={plan.name}
|
||||
data-testid={`bl-billing-plan-${plan.name.toLowerCase()}`}
|
||||
style={{
|
||||
padding: 24,
|
||||
borderRadius: 12,
|
||||
border: plan.current
|
||||
? '2px solid var(--bl-shell-accent, var(--color-primary, #2563eb))'
|
||||
: '1px solid var(--bl-shell-border, var(--color-border, #e5e7eb))',
|
||||
background: 'var(--color-surface, #fff)',
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: 18, fontWeight: 600, marginBottom: 4 }}>{plan.name}</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: 24,
|
||||
fontWeight: 700,
|
||||
marginBottom: 16,
|
||||
color: 'var(--bl-shell-accent, var(--color-primary, #2563eb))',
|
||||
}}
|
||||
>
|
||||
{plan.price}
|
||||
</div>
|
||||
<ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
|
||||
{plan.features.map(f => (
|
||||
<li
|
||||
key={f}
|
||||
style={{
|
||||
fontSize: 14,
|
||||
padding: '4px 0',
|
||||
color: 'var(--color-muted-foreground, #6b7280)',
|
||||
}}
|
||||
>
|
||||
✓ {f}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
{plan.current && (
|
||||
<div
|
||||
style={{
|
||||
marginTop: 16,
|
||||
fontSize: 13,
|
||||
fontWeight: 600,
|
||||
color: 'var(--bl-shell-accent, var(--color-primary, #2563eb))',
|
||||
}}
|
||||
>
|
||||
Current Plan
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
73
packages/dashboard-shell/src/DashboardShell.tsx
Normal file
73
packages/dashboard-shell/src/DashboardShell.tsx
Normal file
@ -0,0 +1,73 @@
|
||||
import { useState, type ReactNode } from 'react';
|
||||
import type { DashboardShellProps } from './types.js';
|
||||
import { Sidebar } from './Sidebar.js';
|
||||
import { TopBar } from './TopBar.js';
|
||||
|
||||
export function DashboardShell({
|
||||
productName,
|
||||
logo,
|
||||
version,
|
||||
nav,
|
||||
pathname: externalPathname,
|
||||
user,
|
||||
features = {},
|
||||
onSignOut,
|
||||
onNavigate,
|
||||
sidebarFooter,
|
||||
topBarActions,
|
||||
children,
|
||||
}: DashboardShellProps): ReactNode {
|
||||
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
|
||||
|
||||
// Use external pathname or default to '/'
|
||||
const pathname = externalPathname ?? '/';
|
||||
|
||||
return (
|
||||
<div
|
||||
data-testid="bl-dashboard-shell"
|
||||
style={{
|
||||
display: 'flex',
|
||||
minHeight: '100vh',
|
||||
background: 'var(--bl-shell-bg, var(--color-background, #f9fafb))',
|
||||
}}
|
||||
>
|
||||
{/* Sidebar */}
|
||||
<Sidebar
|
||||
productName={productName}
|
||||
logo={logo}
|
||||
version={version}
|
||||
nav={nav}
|
||||
pathname={pathname}
|
||||
features={features}
|
||||
onNavigate={onNavigate}
|
||||
footer={sidebarFooter}
|
||||
collapsed={sidebarCollapsed}
|
||||
onToggleCollapse={() => setSidebarCollapsed(!sidebarCollapsed)}
|
||||
/>
|
||||
|
||||
{/* Main content area */}
|
||||
<div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
|
||||
{/* Top bar */}
|
||||
<TopBar
|
||||
user={user}
|
||||
features={features}
|
||||
onSignOut={onSignOut}
|
||||
onNavigate={onNavigate}
|
||||
actions={topBarActions}
|
||||
/>
|
||||
|
||||
{/* Page content */}
|
||||
<main
|
||||
data-testid="bl-shell-main"
|
||||
style={{
|
||||
flex: 1,
|
||||
padding: '24px 32px',
|
||||
overflow: 'auto',
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
180
packages/dashboard-shell/src/ProfilePage.tsx
Normal file
180
packages/dashboard-shell/src/ProfilePage.tsx
Normal file
@ -0,0 +1,180 @@
|
||||
import { useState, type ReactNode } from 'react';
|
||||
import type { ProfilePageProps } from './types.js';
|
||||
|
||||
export function ProfilePage({
|
||||
user,
|
||||
onUpdateProfile,
|
||||
isLoading,
|
||||
error,
|
||||
success,
|
||||
}: ProfilePageProps): ReactNode {
|
||||
const [name, setName] = useState(user.name);
|
||||
const [email, setEmail] = useState(user.email);
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (onUpdateProfile) onUpdateProfile({ name, email });
|
||||
};
|
||||
|
||||
return (
|
||||
<div data-testid="bl-shell-profile-page" style={{ maxWidth: 600 }}>
|
||||
<h1
|
||||
style={{
|
||||
fontSize: 24,
|
||||
fontWeight: 700,
|
||||
marginBottom: 24,
|
||||
color: 'var(--color-foreground, #111827)',
|
||||
}}
|
||||
>
|
||||
Profile
|
||||
</h1>
|
||||
|
||||
{error && (
|
||||
<div data-testid="bl-profile-error" style={alertStyle('var(--color-destructive, #dc2626)')}>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
{success && (
|
||||
<div data-testid="bl-profile-success" style={alertStyle('var(--color-success, #16a34a)')}>
|
||||
{success}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Avatar */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 32 }}>
|
||||
<div
|
||||
data-testid="bl-profile-avatar"
|
||||
style={{
|
||||
width: 64,
|
||||
height: 64,
|
||||
borderRadius: '50%',
|
||||
background: 'var(--bl-shell-accent, var(--color-primary, #2563eb))',
|
||||
color: '#fff',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: 24,
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
{user.avatarUrl ? (
|
||||
<img
|
||||
src={user.avatarUrl}
|
||||
alt={user.name}
|
||||
style={{ width: 64, height: 64, borderRadius: '50%' }}
|
||||
/>
|
||||
) : (
|
||||
user.name
|
||||
.split(' ')
|
||||
.map(w => w[0])
|
||||
.join('')
|
||||
.toUpperCase()
|
||||
.slice(0, 2)
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ fontSize: 18, fontWeight: 600 }}>{user.name}</div>
|
||||
<div style={{ fontSize: 14, color: 'var(--color-muted-foreground, #6b7280)' }}>
|
||||
{user.email}
|
||||
</div>
|
||||
{user.role && (
|
||||
<div
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: 'var(--color-muted-foreground, #6b7280)',
|
||||
marginTop: 2,
|
||||
}}
|
||||
>
|
||||
Role: {user.role}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Form */}
|
||||
<form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||||
<div>
|
||||
<label style={labelStyle} htmlFor="bl-profile-name">
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
id="bl-profile-name"
|
||||
data-testid="bl-profile-name"
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={e => setName(e.target.value)}
|
||||
required
|
||||
style={inputStyle}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label style={labelStyle} htmlFor="bl-profile-email">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
id="bl-profile-email"
|
||||
data-testid="bl-profile-email"
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={e => setEmail(e.target.value)}
|
||||
required
|
||||
style={inputStyle}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{onUpdateProfile && (
|
||||
<button
|
||||
data-testid="bl-profile-submit"
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
style={{
|
||||
padding: '10px 20px',
|
||||
borderRadius: 8,
|
||||
border: 'none',
|
||||
fontSize: 14,
|
||||
fontWeight: 600,
|
||||
cursor: isLoading ? 'not-allowed' : 'pointer',
|
||||
background: 'var(--bl-shell-accent, var(--color-primary, #2563eb))',
|
||||
color: '#fff',
|
||||
opacity: isLoading ? 0.6 : 1,
|
||||
alignSelf: 'flex-start',
|
||||
}}
|
||||
>
|
||||
{isLoading ? 'Saving...' : 'Save Changes'}
|
||||
</button>
|
||||
)}
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const labelStyle: React.CSSProperties = {
|
||||
display: 'block',
|
||||
fontSize: 14,
|
||||
fontWeight: 500,
|
||||
marginBottom: 6,
|
||||
color: 'var(--color-foreground, #111827)',
|
||||
};
|
||||
|
||||
const inputStyle: React.CSSProperties = {
|
||||
width: '100%',
|
||||
padding: '10px 12px',
|
||||
borderRadius: 8,
|
||||
border: '1px solid var(--bl-shell-border, var(--color-border, #e5e7eb))',
|
||||
fontSize: 14,
|
||||
background: 'var(--color-surface, #fff)',
|
||||
color: 'var(--color-foreground, #111827)',
|
||||
boxSizing: 'border-box',
|
||||
};
|
||||
|
||||
function alertStyle(color: string): React.CSSProperties {
|
||||
return {
|
||||
padding: '10px 14px',
|
||||
borderRadius: 8,
|
||||
marginBottom: 16,
|
||||
fontSize: 14,
|
||||
color,
|
||||
background: `color-mix(in srgb, ${color} 10%, transparent)`,
|
||||
border: `1px solid color-mix(in srgb, ${color} 30%, transparent)`,
|
||||
};
|
||||
}
|
||||
71
packages/dashboard-shell/src/SettingsPage.tsx
Normal file
71
packages/dashboard-shell/src/SettingsPage.tsx
Normal file
@ -0,0 +1,71 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import type { SettingsPageProps } from './types.js';
|
||||
|
||||
export function SettingsPage({ productName, sections = [] }: SettingsPageProps): ReactNode {
|
||||
return (
|
||||
<div data-testid="bl-shell-settings-page" style={{ maxWidth: 700 }}>
|
||||
<h1
|
||||
style={{
|
||||
fontSize: 24,
|
||||
fontWeight: 700,
|
||||
marginBottom: 24,
|
||||
color: 'var(--color-foreground, #111827)',
|
||||
}}
|
||||
>
|
||||
Settings
|
||||
</h1>
|
||||
|
||||
{sections.length === 0 && (
|
||||
<div
|
||||
data-testid="bl-settings-empty"
|
||||
style={{
|
||||
padding: 32,
|
||||
textAlign: 'center',
|
||||
color: 'var(--color-muted-foreground, #6b7280)',
|
||||
fontSize: 14,
|
||||
}}
|
||||
>
|
||||
No settings configured for {productName}.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{sections.map((section, i) => (
|
||||
<div
|
||||
key={i}
|
||||
data-testid={`bl-settings-section-${i}`}
|
||||
style={{
|
||||
padding: 24,
|
||||
borderRadius: 12,
|
||||
border: '1px solid var(--bl-shell-border, var(--color-border, #e5e7eb))',
|
||||
marginBottom: 16,
|
||||
background: 'var(--color-surface, #fff)',
|
||||
}}
|
||||
>
|
||||
<h2
|
||||
style={{
|
||||
fontSize: 16,
|
||||
fontWeight: 600,
|
||||
marginBottom: 4,
|
||||
color: 'var(--color-foreground, #111827)',
|
||||
}}
|
||||
>
|
||||
{section.title}
|
||||
</h2>
|
||||
{section.description && (
|
||||
<p
|
||||
style={{
|
||||
fontSize: 14,
|
||||
color: 'var(--color-muted-foreground, #6b7280)',
|
||||
marginBottom: 16,
|
||||
marginTop: 0,
|
||||
}}
|
||||
>
|
||||
{section.description}
|
||||
</p>
|
||||
)}
|
||||
<div>{section.content}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
236
packages/dashboard-shell/src/Sidebar.tsx
Normal file
236
packages/dashboard-shell/src/Sidebar.tsx
Normal file
@ -0,0 +1,236 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import type { SidebarProps, NavItem, NavSection } from './types.js';
|
||||
|
||||
function isNavSections(nav: NavItem[] | NavSection[]): nav is NavSection[] {
|
||||
return nav.length > 0 && 'items' in nav[0];
|
||||
}
|
||||
|
||||
function NavLink({
|
||||
item,
|
||||
active,
|
||||
collapsed,
|
||||
onNavigate,
|
||||
}: {
|
||||
item: NavItem;
|
||||
active: boolean;
|
||||
collapsed: boolean;
|
||||
onNavigate?: (href: string) => void;
|
||||
}): ReactNode {
|
||||
if (item.hidden) return null;
|
||||
|
||||
const handleClick = (e: React.MouseEvent) => {
|
||||
if (onNavigate) {
|
||||
e.preventDefault();
|
||||
onNavigate(item.href);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<a
|
||||
href={item.href}
|
||||
onClick={handleClick}
|
||||
data-testid={`bl-nav-${item.href.replace(/\//g, '-').replace(/^-/, '')}`}
|
||||
title={collapsed ? item.label : undefined}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 10,
|
||||
padding: collapsed ? '10px 0' : '10px 12px',
|
||||
justifyContent: collapsed ? 'center' : 'flex-start',
|
||||
borderRadius: 8,
|
||||
fontSize: 14,
|
||||
fontWeight: active ? 600 : 400,
|
||||
color: active
|
||||
? 'var(--bl-shell-nav-active-text, var(--color-foreground, #111827))'
|
||||
: 'var(--bl-shell-nav-text, var(--color-muted-foreground, #6b7280))',
|
||||
background: active
|
||||
? 'var(--bl-shell-nav-active-bg, var(--color-muted, #f3f4f6))'
|
||||
: 'transparent',
|
||||
textDecoration: 'none',
|
||||
transition: 'background 0.15s, color 0.15s',
|
||||
}}
|
||||
>
|
||||
{item.icon && (
|
||||
<span style={{ fontSize: 16, width: 20, textAlign: 'center', flexShrink: 0 }}>
|
||||
{item.icon}
|
||||
</span>
|
||||
)}
|
||||
{!collapsed && <span style={{ flex: 1 }}>{item.label}</span>}
|
||||
{!collapsed && item.badge !== undefined && (
|
||||
<span
|
||||
style={{
|
||||
fontSize: 11,
|
||||
fontWeight: 600,
|
||||
padding: '2px 6px',
|
||||
borderRadius: 10,
|
||||
background: 'var(--bl-shell-badge-bg, var(--color-primary, #2563eb))',
|
||||
color: 'var(--bl-shell-badge-text, #fff)',
|
||||
}}
|
||||
>
|
||||
{item.badge}
|
||||
</span>
|
||||
)}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
export function Sidebar({
|
||||
productName,
|
||||
logo,
|
||||
version,
|
||||
nav,
|
||||
pathname,
|
||||
features = {},
|
||||
onNavigate,
|
||||
footer,
|
||||
collapsed = false,
|
||||
onToggleCollapse,
|
||||
}: SidebarProps): ReactNode {
|
||||
const sections: NavSection[] = isNavSections(nav) ? nav : [{ items: nav }];
|
||||
|
||||
const isActive = (href: string) => pathname === href || pathname.startsWith(href + '/');
|
||||
|
||||
// Add built-in settings nav if enabled and not already present
|
||||
const hasSettings = features.settings !== false;
|
||||
const allItems = sections.flatMap(s => s.items);
|
||||
const settingsExists = allItems.some(i => i.href === '/settings');
|
||||
|
||||
return (
|
||||
<aside
|
||||
data-testid="bl-shell-sidebar"
|
||||
style={{
|
||||
width: collapsed ? 64 : 220,
|
||||
minHeight: '100vh',
|
||||
background: 'var(--bl-shell-sidebar-bg, var(--color-surface, #fff))',
|
||||
borderRight: '1px solid var(--bl-shell-border, var(--color-border, #e5e7eb))',
|
||||
padding: '16px 0',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
flexShrink: 0,
|
||||
transition: 'width 0.2s ease',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<div
|
||||
style={{
|
||||
padding: collapsed ? '0 8px 16px' : '0 16px 16px',
|
||||
borderBottom: '1px solid var(--bl-shell-border, var(--color-border, #e5e7eb))',
|
||||
marginBottom: 8,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
gap: 8,
|
||||
}}
|
||||
>
|
||||
<div style={{ overflow: 'hidden', flex: 1 }}>
|
||||
{logo ? (
|
||||
<div data-testid="bl-shell-logo">{logo}</div>
|
||||
) : (
|
||||
<span
|
||||
data-testid="bl-shell-product-name"
|
||||
style={{
|
||||
fontSize: collapsed ? 14 : 18,
|
||||
fontWeight: 700,
|
||||
color: 'var(--bl-shell-accent, var(--color-primary, #2563eb))',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
{collapsed ? productName.charAt(0) : productName}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{onToggleCollapse && (
|
||||
<button
|
||||
data-testid="bl-shell-collapse-toggle"
|
||||
onClick={onToggleCollapse}
|
||||
style={{
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
padding: 4,
|
||||
fontSize: 16,
|
||||
color: 'var(--bl-shell-nav-text, var(--color-muted-foreground, #6b7280))',
|
||||
}}
|
||||
aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
|
||||
>
|
||||
{collapsed ? '▸' : '◂'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav
|
||||
data-testid="bl-shell-nav"
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 2,
|
||||
padding: collapsed ? '0 8px' : '0 8px',
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
{sections.map((section, si) => (
|
||||
<div key={si}>
|
||||
{section.title && !collapsed && (
|
||||
<div
|
||||
style={{
|
||||
padding: '12px 12px 4px',
|
||||
fontSize: 11,
|
||||
fontWeight: 600,
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.05em',
|
||||
color: 'var(--bl-shell-nav-text, var(--color-muted-foreground, #6b7280))',
|
||||
}}
|
||||
>
|
||||
{section.title}
|
||||
</div>
|
||||
)}
|
||||
{section.items.map(item => (
|
||||
<NavLink
|
||||
key={item.href}
|
||||
item={item}
|
||||
active={isActive(item.href)}
|
||||
collapsed={collapsed}
|
||||
onNavigate={onNavigate}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Built-in settings link */}
|
||||
{hasSettings && !settingsExists && (
|
||||
<div style={{ marginTop: 'auto' }}>
|
||||
<NavLink
|
||||
item={{ href: '/settings', label: 'Settings', icon: '⚙' }}
|
||||
active={isActive('/settings')}
|
||||
collapsed={collapsed}
|
||||
onNavigate={onNavigate}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</nav>
|
||||
|
||||
{/* Footer */}
|
||||
<div
|
||||
data-testid="bl-shell-sidebar-footer"
|
||||
style={{
|
||||
marginTop: 'auto',
|
||||
padding: collapsed ? '12px 8px' : '12px 16px',
|
||||
borderTop: '1px solid var(--bl-shell-border, var(--color-border, #e5e7eb))',
|
||||
fontSize: 12,
|
||||
color: 'var(--bl-shell-nav-text, var(--color-muted-foreground, #6b7280))',
|
||||
textAlign: collapsed ? 'center' : 'left',
|
||||
}}
|
||||
>
|
||||
{footer
|
||||
? footer
|
||||
: version
|
||||
? collapsed
|
||||
? `v${version}`
|
||||
: `${productName} v${version}`
|
||||
: null}
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
244
packages/dashboard-shell/src/TopBar.tsx
Normal file
244
packages/dashboard-shell/src/TopBar.tsx
Normal file
@ -0,0 +1,244 @@
|
||||
import { useState, type ReactNode } from 'react';
|
||||
import type { TopBarProps } from './types.js';
|
||||
|
||||
export function TopBar({
|
||||
user,
|
||||
features = {},
|
||||
onSignOut,
|
||||
onNavigate,
|
||||
actions,
|
||||
onToggleSidebar,
|
||||
}: TopBarProps): ReactNode {
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
|
||||
const handleNav = (href: string) => {
|
||||
setMenuOpen(false);
|
||||
if (onNavigate) onNavigate(href);
|
||||
};
|
||||
|
||||
const initials = user
|
||||
? user.name
|
||||
.split(' ')
|
||||
.map(w => w[0])
|
||||
.join('')
|
||||
.toUpperCase()
|
||||
.slice(0, 2)
|
||||
: '?';
|
||||
|
||||
return (
|
||||
<header
|
||||
data-testid="bl-shell-topbar"
|
||||
style={{
|
||||
height: 56,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
padding: '0 24px',
|
||||
borderBottom: '1px solid var(--bl-shell-border, var(--color-border, #e5e7eb))',
|
||||
background: 'var(--bl-shell-topbar-bg, var(--color-surface, #fff))',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
{/* Left: mobile hamburger */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||
{onToggleSidebar && (
|
||||
<button
|
||||
data-testid="bl-shell-hamburger"
|
||||
onClick={onToggleSidebar}
|
||||
style={{
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
fontSize: 20,
|
||||
padding: 4,
|
||||
color: 'var(--bl-shell-nav-text, var(--color-muted-foreground, #6b7280))',
|
||||
}}
|
||||
aria-label="Toggle sidebar"
|
||||
>
|
||||
☰
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right: actions + user menu */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
|
||||
{actions}
|
||||
|
||||
{features.notifications && (
|
||||
<button
|
||||
data-testid="bl-shell-notifications"
|
||||
style={{
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
fontSize: 18,
|
||||
padding: 4,
|
||||
color: 'var(--bl-shell-nav-text, var(--color-muted-foreground, #6b7280))',
|
||||
}}
|
||||
aria-label="Notifications"
|
||||
>
|
||||
🔔
|
||||
</button>
|
||||
)}
|
||||
|
||||
{user && (
|
||||
<div style={{ position: 'relative' }}>
|
||||
<button
|
||||
data-testid="bl-shell-user-menu-trigger"
|
||||
onClick={() => setMenuOpen(!menuOpen)}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
padding: '4px 8px',
|
||||
borderRadius: 8,
|
||||
}}
|
||||
>
|
||||
{user.avatarUrl ? (
|
||||
<img
|
||||
src={user.avatarUrl}
|
||||
alt={user.name}
|
||||
style={{ width: 32, height: 32, borderRadius: '50%' }}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
data-testid="bl-shell-user-avatar"
|
||||
style={{
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: '50%',
|
||||
background: 'var(--bl-shell-accent, var(--color-primary, #2563eb))',
|
||||
color: '#fff',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: 13,
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
{initials}
|
||||
</div>
|
||||
)}
|
||||
<span
|
||||
style={{
|
||||
fontSize: 14,
|
||||
color: 'var(--color-foreground, #111827)',
|
||||
}}
|
||||
>
|
||||
{user.name}
|
||||
</span>
|
||||
<span style={{ fontSize: 10 }}>▾</span>
|
||||
</button>
|
||||
|
||||
{menuOpen && (
|
||||
<div
|
||||
data-testid="bl-shell-user-menu"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: '100%',
|
||||
marginTop: 4,
|
||||
minWidth: 180,
|
||||
background: 'var(--bl-shell-topbar-bg, var(--color-surface, #fff))',
|
||||
border: '1px solid var(--bl-shell-border, var(--color-border, #e5e7eb))',
|
||||
borderRadius: 8,
|
||||
boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
|
||||
zIndex: 50,
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
padding: '12px 16px',
|
||||
borderBottom: '1px solid var(--bl-shell-border, var(--color-border, #e5e7eb))',
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: 14, fontWeight: 600 }}>{user.name}</div>
|
||||
<div style={{ fontSize: 12, color: 'var(--color-muted-foreground, #6b7280)' }}>
|
||||
{user.email}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{features.profile !== false && (
|
||||
<a
|
||||
data-testid="bl-shell-menu-profile"
|
||||
href="/profile"
|
||||
onClick={e => {
|
||||
e.preventDefault();
|
||||
handleNav('/profile');
|
||||
}}
|
||||
style={menuItemStyle}
|
||||
>
|
||||
Profile
|
||||
</a>
|
||||
)}
|
||||
{features.billing && (
|
||||
<a
|
||||
data-testid="bl-shell-menu-billing"
|
||||
href="/billing"
|
||||
onClick={e => {
|
||||
e.preventDefault();
|
||||
handleNav('/billing');
|
||||
}}
|
||||
style={menuItemStyle}
|
||||
>
|
||||
Billing
|
||||
</a>
|
||||
)}
|
||||
{features.settings !== false && (
|
||||
<a
|
||||
data-testid="bl-shell-menu-settings"
|
||||
href="/settings"
|
||||
onClick={e => {
|
||||
e.preventDefault();
|
||||
handleNav('/settings');
|
||||
}}
|
||||
style={menuItemStyle}
|
||||
>
|
||||
Settings
|
||||
</a>
|
||||
)}
|
||||
|
||||
{onSignOut && (
|
||||
<button
|
||||
data-testid="bl-shell-menu-signout"
|
||||
onClick={() => {
|
||||
setMenuOpen(false);
|
||||
onSignOut();
|
||||
}}
|
||||
style={{
|
||||
...menuItemStyle,
|
||||
width: '100%',
|
||||
textAlign: 'left',
|
||||
borderTop: '1px solid var(--bl-shell-border, var(--color-border, #e5e7eb))',
|
||||
color: 'var(--color-destructive, #dc2626)',
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
borderTopStyle: 'solid',
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: 'var(--bl-shell-border, var(--color-border, #e5e7eb))',
|
||||
}}
|
||||
>
|
||||
Sign Out
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
const menuItemStyle: React.CSSProperties = {
|
||||
display: 'block',
|
||||
padding: '10px 16px',
|
||||
fontSize: 14,
|
||||
color: 'var(--color-foreground, #111827)',
|
||||
textDecoration: 'none',
|
||||
cursor: 'pointer',
|
||||
};
|
||||
376
packages/dashboard-shell/src/__tests__/dashboard-shell.test.tsx
Normal file
376
packages/dashboard-shell/src/__tests__/dashboard-shell.test.tsx
Normal file
@ -0,0 +1,376 @@
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { render, screen, fireEvent, cleanup } from '@testing-library/react';
|
||||
import { DashboardShell } from '../DashboardShell.js';
|
||||
import { Sidebar } from '../Sidebar.js';
|
||||
import { TopBar } from '../TopBar.js';
|
||||
import { ProfilePage } from '../ProfilePage.js';
|
||||
import { BillingPage } from '../BillingPage.js';
|
||||
import { SettingsPage } from '../SettingsPage.js';
|
||||
import type { NavItem, NavSection, ShellUser } from '../types.js';
|
||||
|
||||
const NAV: NavItem[] = [
|
||||
{ href: '/dashboard', label: 'Dashboard', icon: '◈' },
|
||||
{ href: '/tasks', label: 'Tasks', icon: '✓' },
|
||||
{ href: '/settings', label: 'Settings', icon: '⚙' },
|
||||
];
|
||||
|
||||
const USER: ShellUser = {
|
||||
id: 'u1',
|
||||
name: 'Alice Smith',
|
||||
email: 'alice@example.com',
|
||||
role: 'admin',
|
||||
};
|
||||
|
||||
// ── DashboardShell ───────────────────────────────────────────────────────────
|
||||
|
||||
describe('DashboardShell', () => {
|
||||
beforeEach(() => cleanup());
|
||||
|
||||
it('renders sidebar, topbar, and content', () => {
|
||||
render(
|
||||
<DashboardShell productName="TestApp" nav={NAV} pathname="/dashboard">
|
||||
<div>Page content</div>
|
||||
</DashboardShell>
|
||||
);
|
||||
expect(screen.getByTestId('bl-dashboard-shell')).toBeDefined();
|
||||
expect(screen.getByTestId('bl-shell-sidebar')).toBeDefined();
|
||||
expect(screen.getByTestId('bl-shell-topbar')).toBeDefined();
|
||||
expect(screen.getByTestId('bl-shell-main')).toBeDefined();
|
||||
expect(screen.getByText('Page content')).toBeDefined();
|
||||
});
|
||||
|
||||
it('passes product name to sidebar', () => {
|
||||
render(
|
||||
<DashboardShell productName="MyProduct" nav={NAV} pathname="/">
|
||||
<div />
|
||||
</DashboardShell>
|
||||
);
|
||||
expect(screen.getByTestId('bl-shell-product-name').textContent).toBe('MyProduct');
|
||||
});
|
||||
|
||||
it('passes user to topbar', () => {
|
||||
render(
|
||||
<DashboardShell productName="TestApp" nav={NAV} pathname="/" user={USER}>
|
||||
<div />
|
||||
</DashboardShell>
|
||||
);
|
||||
expect(screen.getByText('Alice Smith')).toBeDefined();
|
||||
});
|
||||
|
||||
it('calls onSignOut when sign out clicked', () => {
|
||||
const onSignOut = vi.fn();
|
||||
render(
|
||||
<DashboardShell
|
||||
productName="TestApp"
|
||||
nav={NAV}
|
||||
pathname="/"
|
||||
user={USER}
|
||||
onSignOut={onSignOut}
|
||||
>
|
||||
<div />
|
||||
</DashboardShell>
|
||||
);
|
||||
// Open user menu
|
||||
fireEvent.click(screen.getByTestId('bl-shell-user-menu-trigger'));
|
||||
fireEvent.click(screen.getByTestId('bl-shell-menu-signout'));
|
||||
expect(onSignOut).toHaveBeenCalledOnce();
|
||||
});
|
||||
|
||||
it('toggles sidebar collapse', () => {
|
||||
render(
|
||||
<DashboardShell productName="TestApp" nav={NAV} pathname="/dashboard">
|
||||
<div />
|
||||
</DashboardShell>
|
||||
);
|
||||
const toggle = screen.getByTestId('bl-shell-collapse-toggle');
|
||||
// Initially expanded — product name shows full text
|
||||
expect(screen.getByTestId('bl-shell-product-name').textContent).toBe('TestApp');
|
||||
fireEvent.click(toggle);
|
||||
// Collapsed — shows first letter
|
||||
expect(screen.getByTestId('bl-shell-product-name').textContent).toBe('T');
|
||||
});
|
||||
});
|
||||
|
||||
// ── Sidebar ──────────────────────────────────────────────────────────────────
|
||||
|
||||
describe('Sidebar', () => {
|
||||
beforeEach(() => cleanup());
|
||||
|
||||
it('renders nav items', () => {
|
||||
render(<Sidebar productName="TestApp" nav={NAV} pathname="/dashboard" />);
|
||||
expect(screen.getByText('Dashboard')).toBeDefined();
|
||||
expect(screen.getByText('Tasks')).toBeDefined();
|
||||
});
|
||||
|
||||
it('highlights active nav item', () => {
|
||||
render(<Sidebar productName="TestApp" nav={NAV} pathname="/dashboard" />);
|
||||
const dashLink = screen.getByTestId('bl-nav-dashboard');
|
||||
expect(dashLink.style.fontWeight).toBe('600');
|
||||
});
|
||||
|
||||
it('calls onNavigate when item clicked', () => {
|
||||
const onNavigate = vi.fn();
|
||||
render(<Sidebar productName="TestApp" nav={NAV} pathname="/" onNavigate={onNavigate} />);
|
||||
fireEvent.click(screen.getByTestId('bl-nav-tasks'));
|
||||
expect(onNavigate).toHaveBeenCalledWith('/tasks');
|
||||
});
|
||||
|
||||
it('supports NavSection format', () => {
|
||||
const sections: NavSection[] = [
|
||||
{ title: 'Main', items: [{ href: '/home', label: 'Home' }] },
|
||||
{ title: 'Admin', items: [{ href: '/admin', label: 'Admin Panel' }] },
|
||||
];
|
||||
render(<Sidebar productName="TestApp" nav={sections} pathname="/" />);
|
||||
expect(screen.getByText('Main')).toBeDefined();
|
||||
expect(screen.getByText('Admin')).toBeDefined();
|
||||
expect(screen.getByText('Home')).toBeDefined();
|
||||
expect(screen.getByText('Admin Panel')).toBeDefined();
|
||||
});
|
||||
|
||||
it('hides hidden nav items', () => {
|
||||
const items: NavItem[] = [
|
||||
{ href: '/visible', label: 'Visible' },
|
||||
{ href: '/hidden', label: 'Hidden', hidden: true },
|
||||
];
|
||||
render(<Sidebar productName="TestApp" nav={items} pathname="/" />);
|
||||
expect(screen.getByText('Visible')).toBeDefined();
|
||||
expect(screen.queryByText('Hidden')).toBeNull();
|
||||
});
|
||||
|
||||
it('shows badge on nav item', () => {
|
||||
const items: NavItem[] = [{ href: '/inbox', label: 'Inbox', badge: 5 }];
|
||||
render(<Sidebar productName="TestApp" nav={items} pathname="/" />);
|
||||
expect(screen.getByText('5')).toBeDefined();
|
||||
});
|
||||
|
||||
it('renders version in footer', () => {
|
||||
render(<Sidebar productName="TestApp" nav={NAV} pathname="/" version="1.2.3" />);
|
||||
expect(screen.getByTestId('bl-shell-sidebar-footer').textContent).toContain('v1.2.3');
|
||||
});
|
||||
|
||||
it('renders custom footer', () => {
|
||||
render(<Sidebar productName="TestApp" nav={NAV} pathname="/" footer={<span>Custom</span>} />);
|
||||
expect(screen.getByText('Custom')).toBeDefined();
|
||||
});
|
||||
|
||||
it('renders logo instead of product name', () => {
|
||||
render(
|
||||
<Sidebar
|
||||
productName="TestApp"
|
||||
nav={NAV}
|
||||
pathname="/"
|
||||
logo={<span data-testid="logo">Logo</span>}
|
||||
/>
|
||||
);
|
||||
expect(screen.getByTestId('logo')).toBeDefined();
|
||||
});
|
||||
|
||||
it('auto-adds settings link when not present', () => {
|
||||
const items: NavItem[] = [{ href: '/dashboard', label: 'Dashboard' }];
|
||||
render(
|
||||
<Sidebar productName="TestApp" nav={items} pathname="/" features={{ settings: true }} />
|
||||
);
|
||||
expect(screen.getByTestId('bl-nav-settings')).toBeDefined();
|
||||
});
|
||||
|
||||
it('does not duplicate settings link when already present', () => {
|
||||
render(<Sidebar productName="TestApp" nav={NAV} pathname="/" />);
|
||||
const settingsLinks = screen.getAllByText('Settings');
|
||||
expect(settingsLinks.length).toBe(1);
|
||||
});
|
||||
});
|
||||
|
||||
// ── TopBar ───────────────────────────────────────────────────────────────────
|
||||
|
||||
describe('TopBar', () => {
|
||||
beforeEach(() => cleanup());
|
||||
|
||||
it('renders user name', () => {
|
||||
render(<TopBar user={USER} />);
|
||||
expect(screen.getByText('Alice Smith')).toBeDefined();
|
||||
});
|
||||
|
||||
it('renders initials avatar when no avatarUrl', () => {
|
||||
render(<TopBar user={USER} />);
|
||||
expect(screen.getByTestId('bl-shell-user-avatar').textContent).toBe('AS');
|
||||
});
|
||||
|
||||
it('opens and closes user menu', () => {
|
||||
render(<TopBar user={USER} />);
|
||||
expect(screen.queryByTestId('bl-shell-user-menu')).toBeNull();
|
||||
fireEvent.click(screen.getByTestId('bl-shell-user-menu-trigger'));
|
||||
expect(screen.getByTestId('bl-shell-user-menu')).toBeDefined();
|
||||
fireEvent.click(screen.getByTestId('bl-shell-user-menu-trigger'));
|
||||
expect(screen.queryByTestId('bl-shell-user-menu')).toBeNull();
|
||||
});
|
||||
|
||||
it('shows profile link in menu by default', () => {
|
||||
render(<TopBar user={USER} />);
|
||||
fireEvent.click(screen.getByTestId('bl-shell-user-menu-trigger'));
|
||||
expect(screen.getByTestId('bl-shell-menu-profile')).toBeDefined();
|
||||
});
|
||||
|
||||
it('shows billing link when feature enabled', () => {
|
||||
render(<TopBar user={USER} features={{ billing: true }} />);
|
||||
fireEvent.click(screen.getByTestId('bl-shell-user-menu-trigger'));
|
||||
expect(screen.getByTestId('bl-shell-menu-billing')).toBeDefined();
|
||||
});
|
||||
|
||||
it('hides billing link when feature disabled', () => {
|
||||
render(<TopBar user={USER} features={{ billing: false }} />);
|
||||
fireEvent.click(screen.getByTestId('bl-shell-user-menu-trigger'));
|
||||
expect(screen.queryByTestId('bl-shell-menu-billing')).toBeNull();
|
||||
});
|
||||
|
||||
it('shows notifications bell when enabled', () => {
|
||||
render(<TopBar user={USER} features={{ notifications: true }} />);
|
||||
expect(screen.getByTestId('bl-shell-notifications')).toBeDefined();
|
||||
});
|
||||
|
||||
it('calls onSignOut', () => {
|
||||
const onSignOut = vi.fn();
|
||||
render(<TopBar user={USER} onSignOut={onSignOut} />);
|
||||
fireEvent.click(screen.getByTestId('bl-shell-user-menu-trigger'));
|
||||
fireEvent.click(screen.getByTestId('bl-shell-menu-signout'));
|
||||
expect(onSignOut).toHaveBeenCalledOnce();
|
||||
});
|
||||
|
||||
it('calls onNavigate for menu items', () => {
|
||||
const onNavigate = vi.fn();
|
||||
render(<TopBar user={USER} onNavigate={onNavigate} />);
|
||||
fireEvent.click(screen.getByTestId('bl-shell-user-menu-trigger'));
|
||||
fireEvent.click(screen.getByTestId('bl-shell-menu-profile'));
|
||||
expect(onNavigate).toHaveBeenCalledWith('/profile');
|
||||
});
|
||||
|
||||
it('renders custom actions', () => {
|
||||
render(<TopBar user={USER} actions={<button data-testid="custom-action">Action</button>} />);
|
||||
expect(screen.getByTestId('custom-action')).toBeDefined();
|
||||
});
|
||||
|
||||
it('shows hamburger when onToggleSidebar provided', () => {
|
||||
const toggle = vi.fn();
|
||||
render(<TopBar user={USER} onToggleSidebar={toggle} />);
|
||||
fireEvent.click(screen.getByTestId('bl-shell-hamburger'));
|
||||
expect(toggle).toHaveBeenCalledOnce();
|
||||
});
|
||||
});
|
||||
|
||||
// ── ProfilePage ──────────────────────────────────────────────────────────────
|
||||
|
||||
describe('ProfilePage', () => {
|
||||
beforeEach(() => cleanup());
|
||||
|
||||
it('renders user info', () => {
|
||||
render(<ProfilePage user={USER} />);
|
||||
expect(screen.getByTestId('bl-shell-profile-page')).toBeDefined();
|
||||
expect(screen.getByTestId('bl-profile-avatar')).toBeDefined();
|
||||
});
|
||||
|
||||
it('pre-fills form fields', () => {
|
||||
render(<ProfilePage user={USER} />);
|
||||
const nameInput = screen.getByTestId('bl-profile-name') as unknown as { value: string };
|
||||
const emailInput = screen.getByTestId('bl-profile-email') as unknown as { value: string };
|
||||
expect(nameInput.value).toBe('Alice Smith');
|
||||
expect(emailInput.value).toBe('alice@example.com');
|
||||
});
|
||||
|
||||
it('calls onUpdateProfile with form data', () => {
|
||||
const onUpdate = vi.fn();
|
||||
render(<ProfilePage user={USER} onUpdateProfile={onUpdate} />);
|
||||
fireEvent.change(screen.getByTestId('bl-profile-name'), { target: { value: 'Bob Jones' } });
|
||||
fireEvent.submit(screen.getByTestId('bl-profile-submit').closest('form')!);
|
||||
expect(onUpdate).toHaveBeenCalledWith({ name: 'Bob Jones', email: 'alice@example.com' });
|
||||
});
|
||||
|
||||
it('shows loading state', () => {
|
||||
render(<ProfilePage user={USER} onUpdateProfile={vi.fn()} isLoading />);
|
||||
expect(screen.getByText('Saving...')).toBeDefined();
|
||||
});
|
||||
|
||||
it('shows error and success messages', () => {
|
||||
const { rerender } = render(<ProfilePage user={USER} error="Failed" />);
|
||||
expect(screen.getByTestId('bl-profile-error')).toBeDefined();
|
||||
|
||||
rerender(<ProfilePage user={USER} success="Saved" />);
|
||||
expect(screen.getByTestId('bl-profile-success')).toBeDefined();
|
||||
});
|
||||
|
||||
it('shows role when present', () => {
|
||||
render(<ProfilePage user={USER} />);
|
||||
expect(screen.getByText('Role: admin')).toBeDefined();
|
||||
});
|
||||
});
|
||||
|
||||
// ── BillingPage ──────────────────────────────────────────────────────────────
|
||||
|
||||
describe('BillingPage', () => {
|
||||
beforeEach(() => cleanup());
|
||||
|
||||
it('renders current plan', () => {
|
||||
render(<BillingPage currentPlan="Pro" status="active" />);
|
||||
expect(screen.getByTestId('bl-shell-billing-page')).toBeDefined();
|
||||
expect(screen.getByText('Pro')).toBeDefined();
|
||||
});
|
||||
|
||||
it('shows status badge', () => {
|
||||
render(<BillingPage currentPlan="Free" status="trialing" />);
|
||||
expect(screen.getByTestId('bl-billing-status').textContent).toBe('trialing');
|
||||
});
|
||||
|
||||
it('shows trial end date', () => {
|
||||
render(<BillingPage trialEndsAt="2026-04-01" />);
|
||||
expect(screen.getByTestId('bl-billing-trial').textContent).toContain('2026-04-01');
|
||||
});
|
||||
|
||||
it('calls onManageBilling', () => {
|
||||
const onManage = vi.fn();
|
||||
render(<BillingPage onManageBilling={onManage} />);
|
||||
fireEvent.click(screen.getByTestId('bl-billing-manage'));
|
||||
expect(onManage).toHaveBeenCalledOnce();
|
||||
});
|
||||
|
||||
it('renders plan comparison grid', () => {
|
||||
const plans = [
|
||||
{ name: 'Free', price: '$0/mo', features: ['Basic features'], current: true },
|
||||
{ name: 'Pro', price: '$9/mo', features: ['All features', 'Priority support'] },
|
||||
];
|
||||
render(<BillingPage plans={plans} />);
|
||||
expect(screen.getByTestId('bl-billing-plans')).toBeDefined();
|
||||
expect(screen.getByTestId('bl-billing-plan-free')).toBeDefined();
|
||||
expect(screen.getByTestId('bl-billing-plan-pro')).toBeDefined();
|
||||
expect(screen.getByText('$9/mo')).toBeDefined();
|
||||
});
|
||||
|
||||
it('defaults to Free plan when not specified', () => {
|
||||
render(<BillingPage />);
|
||||
expect(screen.getByText('Free')).toBeDefined();
|
||||
});
|
||||
});
|
||||
|
||||
// ── SettingsPage ─────────────────────────────────────────────────────────────
|
||||
|
||||
describe('SettingsPage', () => {
|
||||
beforeEach(() => cleanup());
|
||||
|
||||
it('renders empty state when no sections', () => {
|
||||
render(<SettingsPage productName="TestApp" />);
|
||||
expect(screen.getByTestId('bl-shell-settings-page')).toBeDefined();
|
||||
expect(screen.getByTestId('bl-settings-empty')).toBeDefined();
|
||||
expect(screen.getByText('No settings configured for TestApp.')).toBeDefined();
|
||||
});
|
||||
|
||||
it('renders sections', () => {
|
||||
const sections = [
|
||||
{ title: 'Notifications', description: 'Manage alerts', content: <div>Toggle</div> },
|
||||
{ title: 'Theme', content: <div>Dark mode</div> },
|
||||
];
|
||||
render(<SettingsPage productName="TestApp" sections={sections} />);
|
||||
expect(screen.getByTestId('bl-settings-section-0')).toBeDefined();
|
||||
expect(screen.getByTestId('bl-settings-section-1')).toBeDefined();
|
||||
expect(screen.getByText('Notifications')).toBeDefined();
|
||||
expect(screen.getByText('Manage alerts')).toBeDefined();
|
||||
expect(screen.getByText('Toggle')).toBeDefined();
|
||||
expect(screen.getByText('Dark mode')).toBeDefined();
|
||||
});
|
||||
});
|
||||
30
packages/dashboard-shell/src/index.ts
Normal file
30
packages/dashboard-shell/src/index.ts
Normal file
@ -0,0 +1,30 @@
|
||||
/**
|
||||
* @bytelyst/dashboard-shell
|
||||
*
|
||||
* Configurable Next.js dashboard layout with sidebar, top bar,
|
||||
* and built-in pages for profile, billing, and settings.
|
||||
*
|
||||
* All components read CSS custom properties (--bl-shell-*, --color-*)
|
||||
* with sensible fallback defaults.
|
||||
*/
|
||||
|
||||
export { DashboardShell } from './DashboardShell.js';
|
||||
export { Sidebar } from './Sidebar.js';
|
||||
export { TopBar } from './TopBar.js';
|
||||
export { ProfilePage } from './ProfilePage.js';
|
||||
export { BillingPage } from './BillingPage.js';
|
||||
export { SettingsPage } from './SettingsPage.js';
|
||||
|
||||
export type {
|
||||
DashboardShellProps,
|
||||
SidebarProps,
|
||||
TopBarProps,
|
||||
NavItem,
|
||||
NavSection,
|
||||
ShellUser,
|
||||
ShellFeatures,
|
||||
ProfilePageProps,
|
||||
BillingPageProps,
|
||||
SettingsPageProps,
|
||||
SettingsSection,
|
||||
} from './types.js';
|
||||
131
packages/dashboard-shell/src/types.ts
Normal file
131
packages/dashboard-shell/src/types.ts
Normal file
@ -0,0 +1,131 @@
|
||||
import type { ReactNode } from 'react';
|
||||
|
||||
// ── Navigation ───────────────────────────────────────────────────────────────
|
||||
|
||||
export interface NavItem {
|
||||
href: string;
|
||||
label: string;
|
||||
icon?: ReactNode;
|
||||
badge?: string | number;
|
||||
/** Hide this item from nav (useful for feature-flag gating) */
|
||||
hidden?: boolean;
|
||||
}
|
||||
|
||||
export interface NavSection {
|
||||
title?: string;
|
||||
items: NavItem[];
|
||||
}
|
||||
|
||||
// ── User ─────────────────────────────────────────────────────────────────────
|
||||
|
||||
export interface ShellUser {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
avatarUrl?: string;
|
||||
role?: string;
|
||||
}
|
||||
|
||||
// ── Features ─────────────────────────────────────────────────────────────────
|
||||
|
||||
export interface ShellFeatures {
|
||||
/** Show profile page link in user menu (default: true) */
|
||||
profile?: boolean;
|
||||
/** Show billing page link in user menu (default: false) */
|
||||
billing?: boolean;
|
||||
/** Show settings page link in sidebar (default: true) */
|
||||
settings?: boolean;
|
||||
/** Show notifications icon in top bar (default: false) */
|
||||
notifications?: boolean;
|
||||
/** Show dark/light theme toggle (default: false) */
|
||||
themeToggle?: boolean;
|
||||
}
|
||||
|
||||
// ── Shell Config ─────────────────────────────────────────────────────────────
|
||||
|
||||
export interface DashboardShellProps {
|
||||
/** Product display name shown in sidebar header */
|
||||
productName: string;
|
||||
/** Product logo element (replaces text name if provided) */
|
||||
logo?: ReactNode;
|
||||
/** Product version shown in sidebar footer */
|
||||
version?: string;
|
||||
/** Navigation items or sections */
|
||||
nav: NavItem[] | NavSection[];
|
||||
/** Current pathname for active state (if not using internal detection) */
|
||||
pathname?: string;
|
||||
/** Currently logged-in user */
|
||||
user?: ShellUser;
|
||||
/** Feature toggles for built-in pages */
|
||||
features?: ShellFeatures;
|
||||
/** Called when user clicks Sign Out */
|
||||
onSignOut?: () => void;
|
||||
/** Called when a nav item is clicked (for SPA routers) */
|
||||
onNavigate?: (href: string) => void;
|
||||
/** Sidebar footer content (replaces default) */
|
||||
sidebarFooter?: ReactNode;
|
||||
/** Content to render in the top bar (right side) */
|
||||
topBarActions?: ReactNode;
|
||||
/** Dashboard page content */
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
// ── Sidebar Props ────────────────────────────────────────────────────────────
|
||||
|
||||
export interface SidebarProps {
|
||||
productName: string;
|
||||
logo?: ReactNode;
|
||||
version?: string;
|
||||
nav: NavItem[] | NavSection[];
|
||||
pathname: string;
|
||||
features?: ShellFeatures;
|
||||
onNavigate?: (href: string) => void;
|
||||
footer?: ReactNode;
|
||||
collapsed?: boolean;
|
||||
onToggleCollapse?: () => void;
|
||||
}
|
||||
|
||||
// ── Top Bar Props ────────────────────────────────────────────────────────────
|
||||
|
||||
export interface TopBarProps {
|
||||
user?: ShellUser;
|
||||
features?: ShellFeatures;
|
||||
onSignOut?: () => void;
|
||||
onNavigate?: (href: string) => void;
|
||||
actions?: ReactNode;
|
||||
onToggleSidebar?: () => void;
|
||||
}
|
||||
|
||||
// ── Built-in Page Props ──────────────────────────────────────────────────────
|
||||
|
||||
export interface ProfilePageProps {
|
||||
user: ShellUser;
|
||||
onUpdateProfile?: (data: { name: string; email: string }) => void;
|
||||
isLoading?: boolean;
|
||||
error?: string;
|
||||
success?: string;
|
||||
}
|
||||
|
||||
export interface BillingPageProps {
|
||||
currentPlan?: string;
|
||||
status?: 'active' | 'trialing' | 'past_due' | 'canceled';
|
||||
trialEndsAt?: string;
|
||||
onManageBilling?: () => void;
|
||||
plans?: Array<{
|
||||
name: string;
|
||||
price: string;
|
||||
features: string[];
|
||||
current?: boolean;
|
||||
}>;
|
||||
}
|
||||
|
||||
export interface SettingsPageProps {
|
||||
productName: string;
|
||||
sections?: SettingsSection[];
|
||||
}
|
||||
|
||||
export interface SettingsSection {
|
||||
title: string;
|
||||
description?: string;
|
||||
content: ReactNode;
|
||||
}
|
||||
11
packages/dashboard-shell/tsconfig.json
Normal file
11
packages/dashboard-shell/tsconfig.json
Normal file
@ -0,0 +1,11 @@
|
||||
{
|
||||
"extends": "../../tsconfig.base.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "dist",
|
||||
"rootDir": "src",
|
||||
"jsx": "react-jsx",
|
||||
"lib": ["ES2022", "DOM", "DOM.Iterable"]
|
||||
},
|
||||
"include": ["src"],
|
||||
"exclude": ["dist", "src/**/*.test.*"]
|
||||
}
|
||||
7
packages/dashboard-shell/vitest.config.ts
Normal file
7
packages/dashboard-shell/vitest.config.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import { defineConfig } from 'vitest/config';
|
||||
|
||||
export default defineConfig({
|
||||
test: {
|
||||
environment: 'happy-dom',
|
||||
},
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user