@mostrom/app-shell 0.1.0

package/src/components/layout/AppSidebar.tsx

@@ -0,0 +1,229 @@
+import React from "react";
+import { ChevronLeft } from "lucide-react";
+import type { NavigationItem, NavigationFollowEvent } from "./AppNavigation";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuButton,
+  SidebarMenuSub,
+  SidebarMenuSubItem,
+  SidebarMenuSubButton,
+  SidebarSeparator,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarGroupContent,
+  useSidebar,
+} from "../ui/sidebar";
+import { cn } from "../../lib/utils";
+
+export interface AppSidebarProps {
+  /** Service name displayed in the header */
+  serviceName: string;
+  /** Link destination when clicking the service name */
+  headerHref?: string;
+  /** Navigation items for the sidebar */
+  items?: ReadonlyArray<NavigationItem>;
+  /** Currently active navigation item href for highlighting */
+  activeHref?: string;
+  /** Callback when a navigation item is clicked */
+  onFollow?: (event: NavigationFollowEvent) => void;
+  /** Additional className for the sidebar */
+  className?: string;
+}
+
+/**
+ * AppSidebar - A sidebar wrapper that provides Cloudscape-compatible API
+ * using shadcn Sidebar components internally.
+ */
+export function AppSidebar({
+  serviceName,
+  headerHref = "#",
+  items = [],
+  activeHref,
+  onFollow,
+  className,
+}: AppSidebarProps) {
+  const { toggleSidebar } = useSidebar();
+
+  const handleClick = (
+    event: React.MouseEvent,
+    item: { href?: string; external?: boolean }
+  ) => {
+    if (onFollow) {
+      const followEvent: NavigationFollowEvent = {
+        detail: {
+          href: item.href ?? "",
+          external: item.external ?? false,
+        },
+        preventDefault: () => event.preventDefault(),
+        stopPropagation: () => event.stopPropagation(),
+      };
+      onFollow(followEvent);
+    }
+  };
+
+  const renderItem = (item: NavigationItem, index: number): React.ReactNode => {
+    if (item.type === "divider") {
+      return <SidebarSeparator key={`divider-${index}`} />;
+    }
+
+    if (item.type === "section") {
+      return (
+        <SidebarGroup key={`section-${index}`}>
+          {item.text && <SidebarGroupLabel>{item.text}</SidebarGroupLabel>}
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {item.items?.map((subItem, subIndex) =>
+                renderItem(subItem, subIndex)
+              )}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      );
+    }
+
+    if (item.type === "section-group") {
+      return (
+        <SidebarGroup key={`section-group-${index}`}>
+          {item.title && <SidebarGroupLabel>{item.title}</SidebarGroupLabel>}
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {item.items?.map((subItem, subIndex) =>
+                renderItem(subItem, subIndex)
+              )}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      );
+    }
+
+    if (item.type === "link") {
+      const isActive = activeHref === item.href;
+
+      // Check if this link has nested items
+      if (item.items && item.items.length > 0) {
+        return (
+          <SidebarMenuItem key={`link-${index}`}>
+            <SidebarMenuButton
+              asChild
+              isActive={isActive}
+              tooltip={item.text}
+            >
+              <a
+                href={item.href}
+                onClick={(e) => handleClick(e, item)}
+                target={item.external ? "_blank" : undefined}
+                rel={item.external ? "noopener noreferrer" : undefined}
+              >
+                <span>{item.text}</span>
+              </a>
+            </SidebarMenuButton>
+            <SidebarMenuSub>
+              {item.items.map((subItem, subIndex) => {
+                if (subItem.type !== "link") return null;
+                const isSubActive = activeHref === subItem.href;
+                return (
+                  <SidebarMenuSubItem key={`sublink-${subIndex}`}>
+                    <SidebarMenuSubButton
+                      asChild
+                      isActive={isSubActive}
+                    >
+                      <a
+                        href={subItem.href}
+                        onClick={(e) => handleClick(e, subItem)}
+                        target={subItem.external ? "_blank" : undefined}
+                        rel={subItem.external ? "noopener noreferrer" : undefined}
+                      >
+                        <span>{subItem.text}</span>
+                      </a>
+                    </SidebarMenuSubButton>
+                  </SidebarMenuSubItem>
+                );
+              })}
+            </SidebarMenuSub>
+          </SidebarMenuItem>
+        );
+      }
+
+      return (
+        <SidebarMenuItem key={`link-${index}`}>
+          <SidebarMenuButton
+            asChild
+            isActive={isActive}
+            tooltip={item.text}
+          >
+            <a
+              href={item.href}
+              onClick={(e) => handleClick(e, item)}
+              target={item.external ? "_blank" : undefined}
+              rel={item.external ? "noopener noreferrer" : undefined}
+            >
+              <span>{item.text}</span>
+            </a>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      );
+    }
+
+    if (item.type === "expandable-link-group") {
+      return (
+        <SidebarGroup key={`expandable-${index}`}>
+          {item.text && <SidebarGroupLabel>{item.text}</SidebarGroupLabel>}
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {item.items?.map((subItem, subIndex) =>
+                renderItem(subItem, subIndex)
+              )}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      );
+    }
+
+    return null;
+  };
+
+  return (
+    <Sidebar className={cn("app-sidebar", className)}>
+      <SidebarHeader>
+        <div className="flex items-center justify-between">
+          <SidebarMenu className="flex-1">
+            <SidebarMenuItem>
+              <SidebarMenuButton
+                asChild
+                size="lg"
+                className="font-semibold"
+              >
+                <a href={headerHref} onClick={(e) => handleClick(e, { href: headerHref })}>
+                  <span>{serviceName}</span>
+                </a>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+          <button
+            type="button"
+            onClick={toggleSidebar}
+            className="text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground flex h-8 w-8 items-center justify-center rounded-md"
+            aria-label="Close sidebar"
+          >
+            <ChevronLeft className="h-5 w-5" />
+          </button>
+        </div>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {items.map((item, index) => renderItem(item, index))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  );
+}
+
+export { useSidebar, SidebarProvider, SidebarTrigger, SidebarInset } from "./ui/sidebar";

package/src/components/patterns/index.ts

@@ -0,0 +1,14 @@
+// Pattern Components (reui.io)
+// Each pattern exports as Pattern, so we rename them for unique exports
+// Note: AutocompletePattern uses @base-ui/react which has CJS/SSR issues
+// export { Pattern as AutocompletePattern } from "./p-autocomplete-5";
+export { Pattern as BreadcrumbPattern } from "./p-breadcrumb-1";
+export { Pattern as CopyButtonPattern } from "./p-button-42";
+export { Pattern as CardDefaultPattern } from "./p-card-1";
+export { Pattern as CardWithHeaderPattern } from "./p-card-2";
+export { Pattern as CardWithLinkPattern } from "./p-card-5";
+export { Pattern as CollapsiblePattern } from "./p-collapsible-7";
+export { Pattern as DialogPattern } from "./p-dialog-1";
+export { Pattern as EmptyStatePattern } from "./p-empty-2";
+export { Pattern as FileUploadPattern } from "./p-file-upload-1";
+export { Pattern as FiltersPattern } from "./p-filters-1";

package/src/components/patterns/p-alert-5.tsx

@@ -0,0 +1,19 @@
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@/components/reui/alert"
+import { CircleAlertIcon } from "lucide-react"
+
+export function Pattern() {
+  return (
+    <Alert variant="info">
+      <CircleAlertIcon
+      />
+      <AlertTitle>Info! Something important</AlertTitle>
+      <AlertDescription>
+        This is an important message. Please read it carefully.
+      </AlertDescription>
+    </Alert>
+  )
+}

package/src/components/patterns/p-autocomplete-5.tsx

@@ -0,0 +1,89 @@
+import { useState } from "react"
+import {
+  Autocomplete,
+  AutocompleteContent,
+  AutocompleteEmpty,
+  AutocompleteInput,
+  AutocompleteItem,
+  AutocompleteList,
+} from "@/components/reui/autocomplete"
+
+export function Pattern() {
+  const [value, setValue] = useState<string>("")
+
+  const filteredItems = items.filter((item) =>
+    item.value.toLowerCase().includes(value.toLowerCase())
+  )
+
+  return (
+    <div className="w-full max-w-xs">
+      <Autocomplete
+        value={value}
+        onValueChange={setValue}
+        items={filteredItems}
+        itemToStringValue={(item: unknown) => (item as Item).value}
+      >
+        <AutocompleteInput placeholder="e.g. feature" showClear />
+        <AutocompleteContent>
+          <AutocompleteEmpty>No items found.</AutocompleteEmpty>
+          <AutocompleteList>
+            {(item) => (
+              <AutocompleteItem key={item.id} value={item}>
+                {item.value}
+              </AutocompleteItem>
+            )}
+          </AutocompleteList>
+        </AutocompleteContent>
+      </Autocomplete>
+    </div>
+  )
+}
+
+interface Item {
+  id: string
+  value: string
+}
+
+const items: Item[] = [
+  { id: "t1", value: "feature" },
+  { id: "t2", value: "fix" },
+  { id: "t3", value: "bug" },
+  { id: "t4", value: "docs" },
+  { id: "t5", value: "internal" },
+  { id: "t6", value: "mobile" },
+  { id: "c-accordion", value: "component: accordion" },
+  { id: "c-alert-dialog", value: "component: alert dialog" },
+  { id: "c-autocomplete", value: "component: autocomplete" },
+  { id: "c-avatar", value: "component: avatar" },
+  { id: "c-checkbox", value: "component: checkbox" },
+  { id: "c-checkbox-group", value: "component: checkbox group" },
+  { id: "c-collapsible", value: "component: collapsible" },
+  { id: "c-combobox", value: "component: combobox" },
+  { id: "c-context-menu", value: "component: context menu" },
+  { id: "c-dialog", value: "component: dialog" },
+  { id: "c-field", value: "component: field" },
+  { id: "c-fieldset", value: "component: fieldset" },
+  { id: "c-filterable-menu", value: "component: filterable menu" },
+  { id: "c-form", value: "component: form" },
+  { id: "c-input", value: "component: input" },
+  { id: "c-menu", value: "component: menu" },
+  { id: "c-menubar", value: "component: menubar" },
+  { id: "c-meter", value: "component: meter" },
+  { id: "c-navigation-menu", value: "component: navigation menu" },
+  { id: "c-number-field", value: "component: number field" },
+  { id: "c-popover", value: "component: popover" },
+  { id: "c-preview-card", value: "component: preview card" },
+  { id: "c-progress", value: "component: progress" },
+  { id: "c-radio", value: "component: radio" },
+  { id: "c-scroll-area", value: "component: scroll area" },
+  { id: "c-select", value: "component: select" },
+  { id: "c-separator", value: "component: separator" },
+  { id: "c-slider", value: "component: slider" },
+  { id: "c-switch", value: "component: switch" },
+  { id: "c-tabs", value: "component: tabs" },
+  { id: "c-toast", value: "component: toast" },
+  { id: "c-toggle", value: "component: toggle" },
+  { id: "c-toggle-group", value: "component: toggle group" },
+  { id: "c-toolbar", value: "component: toolbar" },
+  { id: "c-tooltip", value: "component: tooltip" },
+]

package/src/components/patterns/p-breadcrumb-1.tsx

@@ -0,0 +1,28 @@
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb"
+
+export function Pattern() {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">Components</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}

package/src/components/patterns/p-button-42.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
+import { Button } from "@/components/ui/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { CheckIcon, CopyIcon } from "lucide-react"
+
+export function Pattern() {
+  const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 1500 })
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            size="icon"
+            variant="outline"
+            aria-label={isCopied ? "Copied" : "Copy"}
+            onClick={() => copyToClipboard("https://reui.io")}
+          >
+            {isCopied ? (
+              <CheckIcon aria-hidden="true" />
+            ) : (
+              <CopyIcon aria-hidden="true" />
+            )}
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>{isCopied ? "Copied" : "Copy link"}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  )
+}

package/src/components/patterns/p-button-51.tsx

@@ -0,0 +1,14 @@
+import { Button } from "@/components/ui/button"
+import { PlusIcon } from "lucide-react"
+
+export function Pattern() {
+  return (
+    <Button className="group/fab relative flex h-10 w-10 items-center overflow-hidden rounded-full px-3 transition-[width] duration-300 ease-in-out hover:w-32">
+      <PlusIcon aria-hidden="true" className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transition-transform duration-300 group-hover/fab:left-3 group-hover/fab:translate-x-0" />
+
+      <span className="ml-8 pr-2 whitespace-nowrap opacity-0 transition-opacity duration-300 group-hover/fab:opacity-100">
+        Create New
+      </span>
+    </Button>
+  )
+}

package/src/components/patterns/p-button-6.tsx

@@ -0,0 +1,5 @@
+import { Button } from "@/components/ui/button"
+
+export function Pattern() {
+  return <Button variant="link">Link</Button>
+}

package/src/components/patterns/p-calendar-1.tsx

@@ -0,0 +1,18 @@
+"use client"
+
+import { useState } from "react"
+
+import { Calendar } from "@/components/ui/calendar"
+import { Card, CardContent } from "@/components/ui/card"
+
+export function Pattern() {
+  const [date, setDate] = useState<Date | undefined>(new Date())
+
+  return (
+    <Card className="p-0">
+      <CardContent className="p-0">
+        <Calendar mode="single" onSelect={setDate} selected={date} />
+      </CardContent>
+    </Card>
+  )
+}

package/src/components/patterns/p-card-1.tsx

@@ -0,0 +1,33 @@
+import { Button } from "@/components/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+
+export function Pattern() {
+  return (
+    <Card className="w-full max-w-xs">
+      <CardHeader>
+        <CardTitle>Default Card</CardTitle>
+        <CardDescription>
+          This card uses the default size variant.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p>
+          The card component supports a size prop that defaults to
+          &quot;default&quot; for standard spacing and sizing.
+        </p>
+      </CardContent>
+      <CardFooter>
+        <Button variant="outline" className="w-full">
+          Action
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}

package/src/components/patterns/p-card-2.tsx

@@ -0,0 +1,26 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+
+export function Pattern() {
+  return (
+    <Card className="w-full max-w-xs">
+      <CardHeader className="border-b">
+        <CardTitle>Header with Border</CardTitle>
+        <CardDescription>
+          This is a card with a header that has a bottom border.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p>
+          The header has a border-b class applied, creating a visual separation
+          between the header and content sections.
+        </p>
+      </CardContent>
+    </Card>
+  )
+}

package/src/components/patterns/p-card-5.tsx

@@ -0,0 +1,31 @@
+import { Button } from "@/components/ui/button"
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { ExternalLinkIcon } from "lucide-react"
+
+export function Pattern() {
+  return (
+    <Card className="w-full max-w-xs gap-2 pt-5">
+      <CardHeader>
+        <CardTitle>Need a help in Claim?</CardTitle>
+      </CardHeader>
+      <CardContent className="mb-2">
+        <p>
+          Go to this step by step guideline process on how to certify for your
+          weekly benefits:
+        </p>
+      </CardContent>
+      <CardFooter className="py-2">
+        <Button variant="link" className="px-0">
+          See our guideline
+          <ExternalLinkIcon aria-hidden="true" />
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}

package/src/components/patterns/p-collapsible-7.tsx

@@ -0,0 +1,121 @@
+import { useState } from "react"
+import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
+import {
+  Frame,
+  FrameHeader,
+  FramePanel,
+  FrameTitle,
+} from "@/components/reui/frame"
+
+import { Button } from "@/components/ui/button"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { ChevronRightIcon, PlusIcon, LockIcon, MoreHorizontalIcon, CheckIcon, CopyIcon, TrashIcon } from "lucide-react"
+
+const initialKeys = [
+  { id: "1", name: "Production", key: "AUDO230454*242SDIFPPL" },
+  { id: "2", name: "Development", key: "DUILO30454*242SDIFUIP" },
+  { id: "3", name: "Staging", key: "IPPODAS230454*242SDI" },
+]
+
+export function Pattern() {
+  const [keys, setKeys] = useState(initialKeys)
+
+  return (
+    <div className="h-54 w-full max-w-xs">
+      <Frame stacked dense spacing="sm">
+        <Collapsible defaultOpen>
+          <CollapsibleTrigger className="flex w-full">
+            <FrameHeader className="flex grow flex-row items-center justify-between gap-1.5 py-1!">
+              <ChevronRightIcon aria-hidden="true" className="text-muted-foreground size-4 transition-transform in-data-[state=open]:rotate-90" />
+              <FrameTitle className="text-sm font-medium">API Keys</FrameTitle>
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                className="hover:border-border ml-auto"
+              >
+                <PlusIcon aria-hidden="true" />
+              </Button>
+            </FrameHeader>
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            <FramePanel>
+              <div className="flex flex-col gap-2.5">
+                {keys.map((item) => (
+                  <ApiKeyItem
+                    key={item.id}
+                    item={item}
+                    onDelete={(id) =>
+                      setKeys((k) => k.filter((i) => i.id !== id))
+                    }
+                  />
+                ))}
+              </div>
+            </FramePanel>
+          </CollapsibleContent>
+        </Collapsible>
+      </Frame>
+    </div>
+  )
+}
+
+function ApiKeyItem({
+  item,
+  onDelete,
+}: {
+  item: (typeof initialKeys)[0]
+  onDelete: (id: string) => void
+}) {
+  const { isCopied, copyToClipboard } = useCopyToClipboard()
+
+  return (
+    <div className="flex items-center justify-between gap-3.5">
+      <div className="flex items-center gap-3">
+        <div className="flex items-center gap-1.5">
+          <div className="bg-muted border-border/60 flex size-5.5 shrink-0 items-center justify-center rounded-sm border-2">
+            <LockIcon aria-hidden="true" className="size-3.25 text-emerald-600" />
+          </div>
+          <div className="w-10 truncate text-xs">{item.name}</div>
+        </div>
+        <div className="bg-muted w-40 truncate rounded-md px-2 py-1 text-xs">
+          {item.key}
+        </div>
+      </div>
+      <div className="flex shrink-0 items-center">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="icon-xs">
+              <MoreHorizontalIcon aria-hidden="true" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" className="min-w-32">
+            <DropdownMenuItem onClick={() => copyToClipboard(item.key)}>
+              {isCopied ? (
+                <CheckIcon aria-hidden="true" className="text-green-500" />
+              ) : (
+                <CopyIcon aria-hidden="true" />
+              )}
+              <span>{isCopied ? "Copied" : "Copy key"}</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              variant="destructive"
+              onClick={() => onDelete(item.id)}
+            >
+              <TrashIcon aria-hidden="true" />
+              <span>Delete</span>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </div>
+  )
+}