@mostrom/app-shell 0.1.0

package/src/components/global-header/GlobalHeaderSearch.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+
+import { GlobalSearch, type SearchOption } from "../search/GlobalSearch";
+import {
+  ServicesMenu,
+  type MenuDropdownItems,
+  type MenuItemClickHandler,
+} from "./ServicesMenu";
+
+export type GlobalHeaderSearchProps = {
+  appsMenuItems: MenuDropdownItems;
+  onAppsMenuItemClick?: MenuItemClickHandler;
+  categoriesMenuItems: MenuDropdownItems;
+  onCategoriesMenuItemClick?: MenuItemClickHandler;
+  searchValue: string;
+  onSearchChange: (value: string) => void;
+  onSearchSelect: (option: SearchOption) => void;
+  searchPlaceholder?: string;
+  searchOptions: SearchOption[];
+  empty?: React.ReactNode;
+  loading?: boolean;
+};
+
+export function GlobalHeaderSearch({
+  appsMenuItems,
+  onAppsMenuItemClick,
+  categoriesMenuItems,
+  onCategoriesMenuItemClick,
+  searchValue,
+  onSearchChange,
+  onSearchSelect,
+  searchPlaceholder,
+  searchOptions,
+  empty,
+  loading,
+}: GlobalHeaderSearchProps) {
+  return (
+    <div className="app-shell-search app-shell-header-search">
+      <span className="app-shell-separator">|</span>
+      <ServicesMenu
+        appsMenuItems={appsMenuItems}
+        categoriesMenuItems={categoriesMenuItems}
+        onAppsMenuItemClick={onAppsMenuItemClick}
+        onCategoriesMenuItemClick={onCategoriesMenuItemClick}
+      />
+      <GlobalSearch
+        value={searchValue}
+        onChange={onSearchChange}
+        onSelect={onSearchSelect}
+        placeholder={searchPlaceholder}
+        options={searchOptions}
+        empty={empty}
+        loading={loading}
+      />
+    </div>
+  );
+}

package/src/components/global-header/HeaderUtilities.tsx

@@ -0,0 +1,243 @@
+import React from "react";
+
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import { Settings2 } from "lucide-react";
+
+import type {
+  MenuDropdownItems,
+  MenuDropdownItem,
+  MenuDropdownItemGroup,
+  MenuItemClickDetail,
+} from "./ServicesMenu";
+
+const UserIcon = () => (
+  <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+    <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z" />
+    <path d="M8 9a5 5 0 0 0-5 5v.5a.5.5 0 0 0 1 0V14a4 4 0 0 1 8 0v.5a.5.5 0 0 0 1 0V14a5 5 0 0 0-5-5Z" />
+  </svg>
+);
+
+const ChevronDownIcon = () => (
+  <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+    <path d="M4.427 6.427a.75.75 0 0 1 1.06 0L8 8.94l2.513-2.513a.75.75 0 1 1 1.06 1.06l-3.043 3.043a.75.75 0 0 1-1.06 0L4.427 7.487a.75.75 0 0 1 0-1.06Z" />
+  </svg>
+);
+
+export interface HeaderMenuDropdownProps {
+  icon: React.ReactNode;
+  label?: string;
+  ariaLabel: string;
+  items: MenuDropdownItems;
+  onItemClick?: (detail: MenuItemClickDetail) => void;
+}
+
+type MenuItem = MenuDropdownItem | MenuDropdownItemGroup;
+
+const isGroup = (item: MenuItem): item is MenuDropdownItemGroup =>
+  typeof (item as MenuDropdownItemGroup).items !== "undefined";
+
+export function HeaderMenuDropdown({
+  icon,
+  label,
+  ariaLabel,
+  items,
+  onItemClick,
+}: HeaderMenuDropdownProps) {
+  const [open, setOpen] = React.useState(false);
+
+  const handleItemClick = (item: MenuDropdownItem) => () => {
+    if (item.disabled) return;
+
+    onItemClick?.({
+      id: item.id,
+      href: item.href,
+      external: item.external,
+    });
+
+    setOpen(false);
+  };
+
+  const renderItems = (menuItems: MenuDropdownItems) => {
+    return menuItems.map((item, index) => {
+      if (isGroup(item)) {
+        return (
+          <React.Fragment key={`group-${index}`}>
+            {item.text && (
+              <DropdownMenu.Label className="app-shell-header-dropdown-label">
+                {item.text}
+              </DropdownMenu.Label>
+            )}
+            {item.items.map((subItem) => renderItem(subItem))}
+            {index < menuItems.length - 1 && (
+              <DropdownMenu.Separator className="app-shell-header-dropdown-separator" />
+            )}
+          </React.Fragment>
+        );
+      }
+      return renderItem(item as MenuDropdownItem);
+    });
+  };
+
+  const renderItem = (item: MenuDropdownItem) => {
+    const content = (
+      <>
+        <span className="app-shell-header-dropdown-item-text">{item.text}</span>
+        {item.description && (
+          <span className="app-shell-header-dropdown-item-description">
+            {item.description}
+          </span>
+        )}
+      </>
+    );
+
+    if (item.href) {
+      return (
+        <DropdownMenu.Item key={item.id} asChild disabled={item.disabled}>
+          <a
+            href={item.href}
+            target={item.external ? "_blank" : undefined}
+            rel={item.external ? "noopener noreferrer" : undefined}
+            className="app-shell-header-dropdown-item"
+            onClick={handleItemClick(item)}
+          >
+            {content}
+          </a>
+        </DropdownMenu.Item>
+      );
+    }
+
+    return (
+      <DropdownMenu.Item
+        key={item.id}
+        disabled={item.disabled}
+        className="app-shell-header-dropdown-item"
+        onSelect={handleItemClick(item)}
+      >
+        {content}
+      </DropdownMenu.Item>
+    );
+  };
+
+  return (
+    <DropdownMenu.Root open={open} onOpenChange={setOpen}>
+      <DropdownMenu.Trigger asChild>
+        {/* suppressHydrationWarning: browser extensions inject attributes before hydration */}
+        <button
+          type="button"
+          className={label ? "app-shell-header-menu-button" : "app-shell-header-utility-button"}
+          aria-label={ariaLabel}
+          suppressHydrationWarning
+        >
+          <span className="app-shell-header-menu-icon">{icon}</span>
+          {label && <span className="app-shell-header-menu-label">{label}</span>}
+          {label && <span className="app-shell-header-menu-chevron"><ChevronDownIcon /></span>}
+        </button>
+      </DropdownMenu.Trigger>
+
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content
+          className="app-shell-header-dropdown"
+          sideOffset={8}
+          align="end"
+        >
+          {renderItems(items)}
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  );
+}
+
+export interface HeaderUtilitiesProps {
+  settingsItems?: MenuDropdownItems;
+  settingsLabel?: string;
+  onSettingsItemClick?: (detail: MenuItemClickDetail) => void;
+  userItems?: MenuDropdownItems;
+  userLabel?: string;
+  onUserItemClick?: (detail: MenuItemClickDetail) => void;
+  showThemeToggle?: boolean;
+  theme?: "light" | "dark";
+  onThemeToggle?: () => void;
+  themeIcons?: {
+    light: React.ReactNode;
+    dark: React.ReactNode;
+  };
+}
+
+export function HeaderUtilities({
+  settingsItems,
+  settingsLabel = "Settings",
+  onSettingsItemClick,
+  userItems,
+  userLabel = "Profile",
+  onUserItemClick,
+  showThemeToggle = true,
+  theme = "light",
+  onThemeToggle,
+  themeIcons,
+}: HeaderUtilitiesProps) {
+  const defaultLightIcon = (
+    <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+      <circle cx="8" cy="8" r="3" fill="none" stroke="currentColor" strokeWidth="1.5" />
+      <path
+        d="M8 1.5v2M8 12.5v2M1.5 8h2M12.5 8h2M3.1 3.1l1.4 1.4M11.5 11.5l1.4 1.4M12.9 3.1l-1.4 1.4M4.5 11.5l-1.4 1.4"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+
+  const defaultDarkIcon = (
+    <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+      <path
+        d="M11.5 10.5A5.5 5.5 0 0 1 5.5 4.5a5 5 0 1 0 6 6Z"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+
+  const sunIcon = themeIcons?.light ?? defaultLightIcon;
+  const moonIcon = themeIcons?.dark ?? defaultDarkIcon;
+
+  return (
+    <>
+      {settingsItems && settingsItems.length > 0 && (
+        <HeaderMenuDropdown
+          icon={<Settings2 className="h-5 w-5" />}
+          label={settingsLabel}
+          ariaLabel="Settings"
+          items={settingsItems}
+          onItemClick={onSettingsItemClick}
+        />
+      )}
+
+      {showThemeToggle && (
+        // suppressHydrationWarning: browser extensions inject attributes before hydration
+        <button
+          type="button"
+          className="app-shell-header-utility-button"
+          aria-label="Toggle theme"
+          onClick={onThemeToggle}
+          suppressHydrationWarning
+        >
+          {theme === "dark" ? sunIcon : moonIcon}
+        </button>
+      )}
+
+      {userItems && userItems.length > 0 && (
+        <HeaderMenuDropdown
+          icon={<UserIcon />}
+          label={userLabel}
+          ariaLabel="User menu"
+          items={userItems}
+          onItemClick={onUserItemClick}
+        />
+      )}
+    </>
+  );
+}

package/src/components/global-header/ServicesMenu.tsx

@@ -0,0 +1,246 @@
+import { useState, useMemo, type MouseEvent } from "react";
+
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+
+// Custom types to replace Cloudscape ButtonDropdownProps
+export interface MenuDropdownItem {
+  id: string;
+  text: string;
+  description?: string;
+  href?: string;
+  external?: boolean;
+  disabled?: boolean;
+}
+
+export interface MenuDropdownItemGroup {
+  type?: "group";
+  text?: string;
+  items: readonly MenuDropdownItem[];
+}
+
+export type MenuDropdownItemOrGroup = MenuDropdownItem | MenuDropdownItemGroup;
+export type MenuDropdownItems = readonly MenuDropdownItemOrGroup[];
+
+export interface MenuItemClickDetail {
+  id: string;
+  href?: string;
+  external?: boolean;
+}
+
+export type MenuItemClickHandler = (detail: MenuItemClickDetail) => void;
+
+export type ServicesMenuProps = {
+  appsMenuItems: MenuDropdownItems;
+  categoriesMenuItems: MenuDropdownItems;
+  onAppsMenuItemClick?: MenuItemClickHandler;
+  onCategoriesMenuItemClick?: MenuItemClickHandler;
+};
+
+type MenuItem = MenuDropdownItemOrGroup;
+
+const DotsNineIcon = () => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    {([5, 12, 19] as const).flatMap((cx) =>
+      ([5, 12, 19] as const).map((cy) => (
+        <circle key={`${cx}-${cy}`} cx={cx} cy={cy} r={1.6} fill="currentColor" />
+      )),
+    )}
+  </svg>
+);
+
+const isGroup = (item: MenuItem): item is MenuDropdownItemGroup =>
+  typeof (item as MenuDropdownItemGroup).items !== "undefined";
+
+const flattenItems = (items: MenuDropdownItems): MenuDropdownItem[] => {
+  const result: MenuDropdownItem[] = [];
+
+  items.forEach((item) => {
+    if (isGroup(item)) {
+      result.push(...flattenItems(item.items));
+    } else {
+      result.push(item as MenuDropdownItem);
+    }
+  });
+
+  return result;
+};
+
+const normalizeGroups = (
+  items: MenuDropdownItems,
+): Array<{ title?: string; items: MenuDropdownItem[] }> =>
+  items.map((item) => {
+    if (isGroup(item)) {
+      return { title: item.text, items: flattenItems(item.items) };
+    }
+
+    return { title: undefined, items: [item as MenuDropdownItem] };
+  });
+
+export function ServicesMenu({
+  appsMenuItems,
+  categoriesMenuItems,
+  onAppsMenuItemClick,
+  onCategoriesMenuItemClick,
+}: ServicesMenuProps) {
+  const [open, setOpen] = useState(false);
+  const categories = useMemo(
+    () => flattenItems(categoriesMenuItems),
+    [categoriesMenuItems],
+  );
+  const groups = useMemo(
+    () => normalizeGroups(appsMenuItems),
+    [appsMenuItems],
+  );
+
+  const handleItemClick =
+    (item: MenuDropdownItem) => (event: MouseEvent<HTMLElement>) => {
+      if (item.disabled) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+
+      onAppsMenuItemClick?.({
+        id: item.id,
+        href: item.href,
+        external: item.external,
+      });
+
+      setOpen(false);
+    };
+
+  const handleCategoryClick =
+    (item: MenuDropdownItem) => (event: MouseEvent<HTMLElement>) => {
+      if (item.disabled) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+
+      if (onCategoriesMenuItemClick) {
+        event.preventDefault();
+        onCategoriesMenuItemClick({
+          id: item.id,
+          href: item.href,
+          external: item.external,
+        });
+      }
+
+      setOpen(false);
+    };
+
+  return (
+    <DropdownMenu.Root open={open} onOpenChange={setOpen}>
+      <DropdownMenu.Trigger asChild>
+        <button type="button" aria-label="All services" className="app-shell-apps-button">
+          <span className="app-shell-apps-icon">
+            <DotsNineIcon />
+          </span>
+        </button>
+      </DropdownMenu.Trigger>
+
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content
+          className="app-shell-services-dropdown"
+          sideOffset={8}
+          align="start"
+          avoidCollisions={false}
+        >
+          <div className="app-shell-services-menu" role="menu">
+            <div className="app-shell-services-categories" role="presentation">
+              <div className="app-shell-services-categories-title">Categories</div>
+              <ul>
+                {categories.map((category) => (
+                  <li key={category.id}>
+                    {category.href ? (
+                      <a
+                        className="app-shell-services-category"
+                        href={category.href}
+                        target={category.external ? "_blank" : undefined}
+                        rel={category.external ? "noopener noreferrer" : undefined}
+                        aria-disabled={category.disabled || undefined}
+                        onClick={handleCategoryClick(category)}
+                      >
+                        {category.text}
+                      </a>
+                    ) : (
+                      <button
+                        type="button"
+                        className="app-shell-services-category"
+                        disabled={category.disabled}
+                        onClick={handleCategoryClick(category)}
+                      >
+                        {category.text}
+                      </button>
+                    )}
+                  </li>
+                ))}
+              </ul>
+            </div>
+            <div className="app-shell-services-divider" aria-hidden="true" />
+            <div className="app-shell-services-list" role="presentation">
+              {groups.map((group, groupIndex) => (
+                <div className="app-shell-services-group" key={`${group.title}-${groupIndex}`}>
+                  {group.title ? (
+                    <div className="app-shell-services-group-title">{group.title}</div>
+                  ) : null}
+                  <ul>
+                    {group.items.map((item) => {
+                      const isDisabled = Boolean(item.disabled);
+                      const content = (
+                        <>
+                          <span className="app-shell-services-item-text">{item.text}</span>
+                          {item.description ? (
+                            <span className="app-shell-services-item-description">
+                              {item.description}
+                            </span>
+                          ) : null}
+                        </>
+                      );
+
+                      if (item.href) {
+                        return (
+                          <li key={item.id}>
+                            <a
+                              className="app-shell-services-item"
+                              href={item.href}
+                              target={item.external ? "_blank" : undefined}
+                              rel={item.external ? "noopener noreferrer" : undefined}
+                              aria-disabled={isDisabled || undefined}
+                              onClick={handleItemClick(item)}
+                            >
+                              {content}
+                            </a>
+                          </li>
+                        );
+                      }
+
+                      return (
+                        <li key={item.id}>
+                          <button
+                            type="button"
+                            className="app-shell-services-item"
+                            disabled={isDisabled}
+                            onClick={handleItemClick(item)}
+                          >
+                            {content}
+                          </button>
+                        </li>
+                      );
+                    })}
+                  </ul>
+                </div>
+              ))}
+            </div>
+          </div>
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  );
+}

package/src/components/layout/AppBreadcrumb.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "../ui/breadcrumb";
+
+export interface BreadcrumbItem {
+  /** Display text for the breadcrumb */
+  text: string;
+  /** URL for the breadcrumb link */
+  href: string;
+}
+
+export interface AppBreadcrumbProps {
+  /** Array of breadcrumb items */
+  items: BreadcrumbItem[];
+  /** Callback when a breadcrumb link is clicked */
+  onFollow?: (event: React.MouseEvent, item: BreadcrumbItem) => void;
+  /** Additional class name */
+  className?: string;
+}
+
+/**
+ * AppBreadcrumb - A wrapper around reui Breadcrumb components
+ * that provides a similar API to Cloudscape's BreadcrumbGroup
+ */
+export function AppBreadcrumb({ items, onFollow, className }: AppBreadcrumbProps) {
+  if (!items || items.length === 0) {
+    return null;
+  }
+
+  const handleClick = (event: React.MouseEvent, item: BreadcrumbItem) => {
+    if (onFollow) {
+      event.preventDefault();
+      onFollow(event, item);
+    }
+  };
+
+  return (
+    <Breadcrumb className={className}>
+      <BreadcrumbList>
+        {items.map((item, index) => {
+          const isLast = index === items.length - 1;
+
+          return (
+            <React.Fragment key={item.href || index}>
+              <BreadcrumbItem>
+                {isLast ? (
+                  <BreadcrumbPage>{item.text}</BreadcrumbPage>
+                ) : (
+                  <BreadcrumbLink
+                    href={item.href}
+                    onClick={(e) => handleClick(e, item)}
+                  >
+                    {item.text}
+                  </BreadcrumbLink>
+                )}
+              </BreadcrumbItem>
+              {!isLast && <BreadcrumbSeparator />}
+            </React.Fragment>
+          );
+        })}
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+}

package/src/components/layout/AppFlashbar.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import React from "react";
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+  AlertAction,
+} from "../reui/alert";
+import { Button } from "../ui/button";
+import {
+  CircleCheckIcon,
+  CircleAlertIcon,
+  InfoIcon,
+  XCircleIcon,
+  XIcon,
+} from "lucide-react";
+
+export interface FlashbarMessage {
+  /** Unique identifier for the message */
+  id?: string;
+  /** Type of flash message - determines color and icon */
+  type?: "success" | "warning" | "info" | "error";
+  /** Header/title text for the message */
+  header?: React.ReactNode;
+  /** Main content/description of the message */
+  content?: React.ReactNode;
+  /** Whether the message can be dismissed */
+  dismissible?: boolean;
+  /** Callback when the dismiss button is clicked */
+  onDismiss?: () => void;
+  /** Action button or element to display */
+  action?: React.ReactNode;
+  /** Loading state for the message */
+  loading?: boolean;
+}
+
+export interface AppFlashbarProps {
+  /** Array of flash messages to display */
+  items: FlashbarMessage[];
+}
+
+const typeToVariant = {
+  success: "success",
+  warning: "warning",
+  info: "info",
+  error: "destructive",
+} as const;
+
+const typeToIcon = {
+  success: CircleCheckIcon,
+  warning: CircleAlertIcon,
+  info: InfoIcon,
+  error: XCircleIcon,
+} as const;
+
+export function AppFlashbar({ items }: AppFlashbarProps) {
+  if (!items || items.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      {items.map((item, index) => {
+        const variant = item.type ? typeToVariant[item.type] : "default";
+        const Icon = item.type ? typeToIcon[item.type] : InfoIcon;
+        const key = item.id ?? `flash-${index}`;
+
+        return (
+          <Alert key={key} variant={variant}>
+            <Icon aria-hidden="true" />
+            {item.header && <AlertTitle>{item.header}</AlertTitle>}
+            {item.content && <AlertDescription>{item.content}</AlertDescription>}
+            {(item.action || item.dismissible) && (
+              <AlertAction>
+                {item.action}
+                {item.dismissible && (
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-6 w-6"
+                    onClick={item.onDismiss}
+                    aria-label="Dismiss"
+                  >
+                    <XIcon className="h-4 w-4" />
+                  </Button>
+                )}
+              </AlertAction>
+            )}
+          </Alert>
+        );
+      })}
+    </div>
+  );
+}