tharaday 0.7.1 → 0.7.2

package/src/layouts/AppLayout/AppLayout.stories.tsx

@@ -5,6 +5,8 @@ import { AppLayout } from './AppLayout.tsx';
 import { Box } from '../../components/Box/Box.tsx';
 import { Button } from '../../components/Button/Button.tsx';
 import { Card, CardHeader, CardContent } from '../../components/Card/Card.tsx';
+import { Header } from '../../components/Header/Header.tsx';
+import { NavBar } from '../../components/NavBar/NavBar.tsx';
 import { Text } from '../../components/Text/Text.tsx';
 
 const meta = {
@@ -13,13 +15,6 @@ const meta = {
   parameters: {
     layout: 'fullscreen',
   },
-  args: {
-    headerTitle: 'Tharaday',
-    onLogin: fn(),
-    onLogout: fn(),
-    onCreateAccount: fn(),
-    onNavItemClick: fn(),
-  },
 } satisfies Meta<typeof AppLayout>;
 
 export default meta;
@@ -46,14 +41,26 @@ const navItems = [
 
 export const Default: Story = {
   args: {
-    headerLogo: logo,
-    user: { name: 'John Doe' },
-    navItems,
-    activeNavId: 'dashboard',
-    navActions: (
-      <Button size="sm" variant="outline">
-        Feedback
-      </Button>
+    header: (
+      <Header
+        logo={logo}
+        title="Tharaday"
+        user={{ name: 'John Doe' }}
+        onLogout={fn()}
+        onCreateAccount={fn()}
+      />
+    ),
+    navbar: (
+      <NavBar
+        items={navItems}
+        activeId="dashboard"
+        actions={
+          <Button size="sm" variant="outline">
+            Feedback
+          </Button>
+        }
+        onItemClick={fn()}
+      />
     ),
     children: (
       <Box display="flex" flexDirection="column" gap={6}>
@@ -72,7 +79,7 @@ export const Default: Story = {
                 The top bar is the <strong>Header</strong>. It handles:
               </Text>
               <ul>
-                <li>Global Branding (Logo & Title)</li>
+                <li>Global Branding (Logo &amp; Title)</li>
                 <li>User Identity (Welcome message)</li>
                 <li>Session State (Log out button)</li>
               </ul>
@@ -111,31 +118,36 @@ export const Default: Story = {
 
 export const LoggedOut: Story = {
   args: {
-    ...Default.args,
-    user: undefined,
-    navItems: [
-      { id: 'home', label: 'Home' },
-      { id: 'features', label: 'Features' },
-      { id: 'pricing', label: 'Pricing' },
-      { id: 'docs', label: 'Documentation' },
-    ],
-    activeNavId: 'home',
-  },
-};
-
-export const LoggedOutWithoutHeaderActions: Story = {
-  args: {
-    ...LoggedOut.args,
-    onLogin: undefined,
-    onCreateAccount: undefined,
+    header: <Header logo={logo} title="Tharaday" onLogin={fn()} onCreateAccount={fn()} />,
+    navbar: (
+      <NavBar
+        items={[
+          { id: 'home', label: 'Home' },
+          { id: 'features', label: 'Features' },
+          { id: 'pricing', label: 'Pricing' },
+          { id: 'docs', label: 'Documentation' },
+        ]}
+        activeId="home"
+        onItemClick={fn()}
+      />
+    ),
+    children: Default.args?.children,
   },
 };
 
 export const LongHeaderContent: Story = {
   args: {
-    ...Default.args,
-    headerTitle: 'Tharaday Design System Platform',
-    user: { name: 'Alexandria Catherine Montgomery' },
+    header: (
+      <Header
+        logo={logo}
+        title="Tharaday Design System Platform"
+        user={{ name: 'Alexandria Catherine Montgomery' }}
+        onLogout={fn()}
+        maxWidth="48rem"
+      />
+    ),
+    navbar: <NavBar items={navItems} activeId="dashboard" onItemClick={fn()} maxWidth="48rem" />,
     maxWidth: '48rem',
+    children: Default.args?.children,
   },
 };

package/src/layouts/AppLayout/AppLayout.tsx

@@ -3,48 +3,18 @@ import clsx from 'clsx';
 import styles from './AppLayout.module.css';
 import type { AppLayoutProps } from './AppLayout.types.ts';
 import { Box } from '../../components/Box/Box.tsx';
-import { Header } from '../../components/Header/Header.tsx';
-import { NavBar } from '../../components/NavBar/NavBar.tsx';
 
-/**
- * AppLayout provides a standard layout structure that includes both
- * a Header (for branding and user state) and a NavBar (for navigation).
- *
- * This component demonstrates the distinct roles of Header and NavBar.
- */
 export const AppLayout = ({
-  headerLogo,
-  headerTitle,
-  user,
-  navItems,
-  activeNavId,
-  navActions,
+  header,
+  navbar,
   children,
-  onLogin,
-  onLogout,
-  onCreateAccount,
-  onNavItemClick,
   className,
   maxWidth = '75rem',
 }: AppLayoutProps) => {
   return (
     <div className={clsx(styles.root, className)}>
-      <Header
-        logo={headerLogo}
-        title={headerTitle}
-        user={user}
-        onLogin={onLogin}
-        onLogout={onLogout}
-        onCreateAccount={onCreateAccount}
-        maxWidth={maxWidth}
-      />
-      <NavBar
-        items={navItems}
-        activeId={activeNavId}
-        actions={navActions}
-        onItemClick={onNavItemClick}
-        maxWidth={maxWidth}
-      />
+      {header}
+      {navbar}
       <main className={styles.main}>
         <Box className={styles.container} maxWidth={maxWidth}>
           {children}

package/src/layouts/AppLayout/AppLayout.types.ts

@@ -1,58 +1,14 @@
 import type { ReactNode } from 'react';
 
-import type { NavBarItem } from '../../components/NavBar/NavBar.types.ts';
-
 export interface AppLayoutProps {
-  /**
-   * Additional class name for the layout root
-   */
+  /** Additional class name for the layout root */
   className?: string;
-  /**
-   * Max width for header and navbar containers
-   */
+  /** Max width for the main content container */
   maxWidth?: string | number;
-  /**
-   * Header logo element
-   */
-  headerLogo?: ReactNode;
-  /**
-   * Header title
-   */
-  headerTitle?: string;
-  /**
-   * Current user object for the Header
-   */
-  user?: { name: string };
-  /**
-   * NavBar navigation items
-   */
-  navItems: NavBarItem[];
-  /**
-   * Active NavBar item ID
-   */
-  activeNavId?: string;
-  /**
-   * NavBar actions (right side)
-   */
-  navActions?: ReactNode;
-  /**
-   * Content to display in the main area
-   */
+  /** Header slot — render a pre-configured Header component */
+  header?: ReactNode;
+  /** NavBar slot — render a pre-configured NavBar component */
+  navbar?: ReactNode;
+  /** Main content */
   children: ReactNode;
-  /**
-   * Callback for header login
-   */
-  onLogin?: () => void;
-  /**
-   * Callback for header logout
-   */
-  onLogout?: () => void;
-  /**
-   * Callback for header create account
-   */
-  onCreateAccount?: () => void;
-  /**
-   * Callback for nav item click
-   */
-  onNavItemClick?: (id: string) => void;
 }

package/src/layouts/DashboardLayout/DashboardLayout.stories.tsx

@@ -8,6 +8,7 @@ import { Box } from '../../components/Box/Box.tsx';
 import { Breadcrumbs, BreadcrumbItem } from '../../components/Breadcrumbs/Breadcrumbs.tsx';
 import { Button } from '../../components/Button/Button.tsx';
 import { Card, CardHeader, CardContent } from '../../components/Card/Card.tsx';
+import { Header } from '../../components/Header/Header.tsx';
 import { Text } from '../../components/Text/Text.tsx';
 
 const meta = {
@@ -16,12 +17,6 @@ const meta = {
   parameters: {
     layout: 'fullscreen',
   },
-  args: {
-    headerTitle: 'DS Creator',
-    onLogin: fn(),
-    onLogout: fn(),
-    onCreateAccount: fn(),
-  },
 } satisfies Meta<typeof DashboardLayout>;
 
 export default meta;
@@ -41,8 +36,9 @@ const logo = (
 
 export const Overview: Story = {
   args: {
-    headerLogo: logo,
-    user: { name: 'Design Creator' },
+    header: (
+      <Header logo={logo} title="DS Creator" user={{ name: 'Design Creator' }} onLogout={fn()} />
+    ),
     breadcrumbs: (
       <Breadcrumbs>
         <BreadcrumbItem href="#">Home</BreadcrumbItem>

package/src/layouts/DashboardLayout/DashboardLayout.tsx

@@ -2,33 +2,18 @@ import clsx from 'clsx';
 
 import styles from './DashboardLayout.module.css';
 import type { DashboardLayoutProps } from './DashboardLayout.types.tsx';
-import { Header } from '../../components/Header/Header.tsx';
 
 export const DashboardLayout = ({
-  headerLogo,
-  headerTitle,
+  header,
   breadcrumbs,
   actions,
   stats,
   children,
-  user,
-  onLogin,
-  onLogout,
-  onCreateAccount,
   className,
-  maxWidth,
 }: DashboardLayoutProps) => {
   return (
     <div className={clsx(styles.root, className)}>
-      <Header
-        logo={headerLogo}
-        title={headerTitle}
-        user={user}
-        onLogin={onLogin}
-        onLogout={onLogout}
-        onCreateAccount={onCreateAccount}
-        maxWidth={maxWidth}
-      />
+      {header}
       <main className={styles.main}>
         <div className={styles.container}>
           {(breadcrumbs || actions) && (

package/src/layouts/DashboardLayout/DashboardLayout.types.tsx

@@ -2,15 +2,10 @@ import type { ReactNode } from 'react';
 
 export interface DashboardLayoutProps {
   className?: string;
-  maxWidth?: string | number;
-  headerLogo?: ReactNode;
-  headerTitle?: string;
+  /** Header slot — render a pre-configured Header component */
+  header?: ReactNode;
   breadcrumbs?: ReactNode;
   actions?: ReactNode;
   stats?: ReactNode;
   children: ReactNode;
-  user?: { name: string };
-  onLogin?: () => void;
-  onLogout?: () => void;
-  onCreateAccount?: () => void;
 }

package/src/layouts/SettingsLayout/SettingsLayout.stories.tsx

@@ -6,6 +6,7 @@ import { Box } from '../../components/Box/Box.tsx';
 import { Breadcrumbs, BreadcrumbItem } from '../../components/Breadcrumbs/Breadcrumbs.tsx';
 import { Button } from '../../components/Button/Button.tsx';
 import { Card, CardHeader, CardContent, CardFooter } from '../../components/Card/Card.tsx';
+import { Header } from '../../components/Header/Header.tsx';
 import { Input } from '../../components/Input/Input.tsx';
 import { Notification } from '../../components/Notification/Notification.tsx';
 import { Text } from '../../components/Text/Text.tsx';
@@ -17,20 +18,28 @@ const meta = {
   parameters: {
     layout: 'fullscreen',
   },
-  args: {
-    headerTitle: 'DS Creator',
-    onLogin: fn(),
-    onLogout: fn(),
-    onCreateAccount: fn(),
-  },
 } satisfies Meta<typeof SettingsLayout>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+const logo = (
+  <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fillRule="evenodd">
+      <path
+        d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+        fill="#3b82f6"
+      />
+      <path d="M16 8l8 12H8l8-12z" fill="#FFF" />
+    </g>
+  </svg>
+);
+
 export const ProfileSettings: Story = {
   args: {
-    user: { name: 'Design Creator' },
+    header: (
+      <Header logo={logo} title="DS Creator" user={{ name: 'Design Creator' }} onLogout={fn()} />
+    ),
     breadcrumbs: (
       <Breadcrumbs>
         <BreadcrumbItem href="#">Home</BreadcrumbItem>

package/src/layouts/SettingsLayout/SettingsLayout.tsx

@@ -2,32 +2,17 @@ import clsx from 'clsx';
 
 import styles from './SettingsLayout.module.css';
 import type { SettingsLayoutProps } from './SettingsLayout.types.tsx';
-import { Header } from '../../components/Header/Header.tsx';
 
 export const SettingsLayout = ({
-  headerLogo,
-  headerTitle,
+  header,
   breadcrumbs,
   sidebar,
   children,
-  user,
-  onLogin,
-  onLogout,
-  onCreateAccount,
   className,
-  maxWidth,
 }: SettingsLayoutProps) => {
   return (
     <div className={clsx(styles.root, className)}>
-      <Header
-        logo={headerLogo}
-        title={headerTitle}
-        user={user}
-        onLogin={onLogin}
-        onLogout={onLogout}
-        onCreateAccount={onCreateAccount}
-        maxWidth={maxWidth}
-      />
+      {header}
       <main className={styles.main}>
         <div className={styles.container}>
           {breadcrumbs && <div className={styles.breadcrumbs}>{breadcrumbs}</div>}

package/src/layouts/SettingsLayout/SettingsLayout.types.tsx

@@ -2,14 +2,9 @@ import type { ReactNode } from 'react';
 
 export interface SettingsLayoutProps {
   className?: string;
-  maxWidth?: string | number;
-  headerLogo?: ReactNode;
-  headerTitle?: string;
+  /** Header slot — render a pre-configured Header component */
+  header?: ReactNode;
   breadcrumbs?: ReactNode;
   sidebar?: ReactNode;
   children: ReactNode;
-  user?: { name: string };
-  onLogin?: () => void;
-  onLogout?: () => void;
-  onCreateAccount?: () => void;
 }