tharaday 0.7.1 → 0.7.3

package/src/components/Tree/TreeItem.tsx

@@ -1,8 +1,21 @@
 import clsx from 'clsx';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
+import type { FocusEvent, KeyboardEvent, MouseEvent } from 'react';
 import type { TreeItemProps } from './TreeItem.types';
 import styles from './TreeItem.module.css';
 
+function focusTreeItem(item: HTMLElement) {
+  const tree = item.closest('[role="tree"]');
+  if (!tree) {
+    return;
+  }
+  tree.querySelectorAll<HTMLElement>('[role="treeitem"]').forEach((el) => {
+    el.tabIndex = -1;
+  });
+  item.tabIndex = 0;
+  item.focus();
+}
+
 export const TreeItem = ({
   data,
   label,
@@ -10,14 +23,91 @@ export const TreeItem = ({
   expandIcon,
   collapseIcon,
   isRoot,
+  level,
+  setSize,
+  posInSet,
 }: TreeItemProps) => {
   const [isExpanded, setIsExpanded] = useState(isRoot ? true : (defaultExpanded ?? false));
+  const itemRef = useRef<HTMLDivElement>(null);
 
   const isObject = data !== null && typeof data === 'object';
   const hasChildren =
-    isObject && (Array.isArray(data) ? data.length > 0 : Object.keys(data).length > 0);
+    isObject && (Array.isArray(data) ? data.length > 0 : Object.keys(data as object).length > 0);
+
+  const childLevel = isRoot ? level : level + 1;
+
+  const getChildren = (): { key: string; value: unknown }[] => {
+    if (!isObject) {
+      return [];
+    }
+    if (Array.isArray(data)) {
+      return (data as unknown[]).map((v, i) => ({ key: String(i), value: v }));
+    }
+    return Object.entries(data as Record<string, unknown>).map(([k, v]) => ({ key: k, value: v }));
+  };
 
-  const toggle = () => setIsExpanded(!isExpanded);
+  const children = getChildren();
+
+  const handleClick = (e: MouseEvent) => {
+    e.stopPropagation();
+    if (hasChildren) {
+      setIsExpanded((prev) => !prev);
+    }
+    if (itemRef.current) {
+      focusTreeItem(itemRef.current);
+    }
+  };
+
+  const handleFocus = (e: FocusEvent) => {
+    e.stopPropagation();
+    if (!itemRef.current) {
+      return;
+    }
+    const tree = itemRef.current.closest('[role="tree"]');
+    if (!tree) {
+      return;
+    }
+    tree.querySelectorAll<HTMLElement>('[role="treeitem"]').forEach((el) => {
+      el.tabIndex = -1;
+    });
+    itemRef.current.tabIndex = 0;
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+    switch (e.key) {
+      case 'Enter':
+      case ' ':
+        e.preventDefault();
+        if (hasChildren) {
+          setIsExpanded((prev) => !prev);
+        }
+        break;
+      case 'ArrowRight':
+        e.preventDefault();
+        e.stopPropagation();
+        if (hasChildren && !isExpanded) {
+          setIsExpanded(true);
+        } else if (hasChildren && isExpanded) {
+          const firstChild = itemRef.current?.querySelector<HTMLElement>('[role="treeitem"]');
+          if (firstChild) {
+            focusTreeItem(firstChild);
+          }
+        }
+        break;
+      case 'ArrowLeft':
+        e.preventDefault();
+        e.stopPropagation();
+        if (hasChildren && isExpanded) {
+          setIsExpanded(false);
+        } else {
+          const parent = itemRef.current?.parentElement?.closest<HTMLElement>('[role="treeitem"]');
+          if (parent) {
+            focusTreeItem(parent);
+          }
+        }
+        break;
+    }
+  };
 
   const defaultExpandIcon = (
     <svg
@@ -49,98 +139,73 @@ export const TreeItem = ({
     </svg>
   );
 
-  const renderContent = () => {
+  const renderLeafContent = () => {
     if (data === undefined) {
       return <span className={styles.empty}>undefined</span>;
     }
-
     if (data === null) {
       return <span className={styles.empty}>null</span>;
     }
-
     if (typeof data !== 'object') {
       return <span className={styles.value}>{String(data)}</span>;
     }
-
-    if (Array.isArray(data)) {
-      if (data.length === 0) {
-        return <span className={styles.empty}>[]</span>;
-      }
-      return (
-        <ul
-          className={clsx(
-            styles.list,
-            styles.collapsibleContent,
-            isExpanded && styles.expanded,
-            isRoot && styles.rootList
-          )}
-        >
-          {data.map((item, index) => (
-            <li key={index} className={styles.item}>
-              <TreeItem
-                data={item}
-                defaultExpanded={defaultExpanded}
-                expandIcon={expandIcon}
-                collapseIcon={collapseIcon}
-              />
-            </li>
-          ))}
-        </ul>
-      );
+    if (Array.isArray(data) && (data as unknown[]).length === 0) {
+      return <span className={styles.empty}>[]</span>;
     }
-
-    if (Object.keys(data).length === 0) {
-      return <span className={styles.empty}>{}</span>;
+    if (!Array.isArray(data) && Object.keys(data as object).length === 0) {
+      return <span className={styles.empty}>{'{}'}</span>;
     }
-
-    return (
-      <ul
-        className={clsx(
-          styles.list,
-          styles.collapsibleContent,
-          isExpanded && styles.expanded,
-          isRoot && styles.rootList
-        )}
-      >
-        {Object.entries(data).map(([key, value]) => (
-          <li key={key} className={styles.item}>
-            <TreeItem
-              label={key}
-              data={value}
-              defaultExpanded={defaultExpanded}
-              expandIcon={expandIcon}
-              collapseIcon={collapseIcon}
-            />
-          </li>
-        ))}
-      </ul>
-    );
+    return null;
   };
 
+  const childrenNodes = children.map((child, index) => (
+    <TreeItem
+      key={child.key}
+      label={Array.isArray(data) ? undefined : child.key}
+      data={child.value}
+      defaultExpanded={defaultExpanded}
+      expandIcon={expandIcon}
+      collapseIcon={collapseIcon}
+      level={childLevel}
+      setSize={children.length}
+      posInSet={index + 1}
+    />
+  ));
+
+  if (isRoot) {
+    return hasChildren ? <>{childrenNodes}</> : <>{renderLeafContent()}</>;
+  }
+
   return (
-    <div>
-      {!isRoot && (
-        <div className={styles.itemHeader}>
-          {hasChildren ? (
-            <button
-              type="button"
-              className={styles.toggleButton}
-              onClick={toggle}
-              aria-expanded={isExpanded}
-            >
-              {isExpanded
-                ? (collapseIcon ?? defaultCollapseIcon)
-                : (expandIcon ?? defaultExpandIcon)}
-            </button>
-          ) : (
-            <div className={styles.toggleButton} aria-hidden="true" />
-          )}
-          {label && <span className={styles.key}>{label}:</span>}
-          {!hasChildren && renderContent()}
+    <div
+      ref={itemRef}
+      role="treeitem"
+      aria-expanded={hasChildren ? isExpanded : undefined}
+      aria-level={level}
+      aria-setsize={setSize}
+      aria-posinset={posInSet}
+      tabIndex={-1}
+      className={clsx(styles.item, hasChildren && styles.branch)}
+      onClick={handleClick}
+      onFocus={handleFocus}
+      onKeyDown={handleKeyDown}
+    >
+      <div className={styles.itemHeader}>
+        <span className={styles.toggleIcon} aria-hidden="true">
+          {hasChildren
+            ? isExpanded
+              ? (collapseIcon ?? defaultCollapseIcon)
+              : (expandIcon ?? defaultExpandIcon)
+            : null}
+        </span>
+        {label !== undefined && <span className={styles.key}>{label}:</span>}
+        {!hasChildren && renderLeafContent()}
+      </div>
+      {hasChildren && isExpanded && (
+        <div role="group" className={styles.childGroup}>
+          {childrenNodes}
         </div>
       )}
-      {hasChildren && renderContent()}
-      {isRoot && !hasChildren && <div className={styles.itemHeader}>{renderContent()}</div>}
     </div>
   );
 };

package/src/components/Tree/TreeItem.types.ts

@@ -13,4 +13,10 @@ export interface TreeItemProps {
   collapseIcon?: ReactNode;
   /** Whether the tree item is a root element */
   isRoot?: boolean;
+  /** ARIA level (depth in the tree, 1-based) */
+  level: number;
+  /** Total number of siblings at this level */
+  setSize: number;
+  /** 1-based position among siblings */
+  posInSet: number;
 }

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>}