@fabio.caffarello/react-design-system 1.4.1 → 1.5.0

package/src/ui/molecules/SidebarHeader/SidebarHeader.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import type { HTMLAttributes, ReactNode } from "react";
+import { Text } from "../../atoms";
+import { Button } from "../../atoms";
+
+export interface SidebarHeaderProps extends HTMLAttributes<HTMLDivElement> {
+  title: string;
+  onClose?: () => void;
+  showCloseButton?: boolean;
+  children?: ReactNode;
+}
+
+/**
+ * SidebarHeader Component
+ * 
+ * Header section of a sidebar with title and optional close button.
+ * Follows Atomic Design principles as a Molecule component.
+ * 
+ * @example
+ * ```tsx
+ * <SidebarHeader title="Navigation" onClose={handleClose} />
+ * ```
+ */
+export default function SidebarHeader({
+  title,
+  onClose,
+  showCloseButton = false,
+  children,
+  className = "",
+  ...props
+}: SidebarHeaderProps) {
+  const baseClasses = [
+    "flex",
+    "items-center",
+    "justify-between",
+    "px-4",
+    "py-4",
+    "border-b",
+    "border-gray-200",
+  ];
+
+  const classes = [
+    ...baseClasses,
+    className,
+  ].filter(Boolean).join(" ");
+
+  return (
+    <div className={classes} {...props}>
+      <Text as="h2" className="text-lg font-semibold text-gray-900">
+        {title}
+      </Text>
+      <div className="flex items-center space-x-2">
+        {children}
+        {showCloseButton && onClose && (
+          <Button
+            variant="secondary"
+            onClick={onClose}
+            className="p-1"
+            aria-label="Close sidebar"
+          >
+            <svg
+              className="h-5 w-5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/ui/molecules/index.ts

@@ -14,3 +14,12 @@ export type { EmptyStateProps } from "./EmptyState/EmptyState";
 
 export { default as Dropdown } from "./Dropdown/Dropdown";
 export type { DropdownProps, DropdownItem } from "./Dropdown/Dropdown";
+
+export { default as SidebarGroup } from "./SidebarGroup/SidebarGroup";
+export type { SidebarGroupProps } from "./SidebarGroup/SidebarGroup";
+
+export { default as SidebarHeader } from "./SidebarHeader/SidebarHeader";
+export type { SidebarHeaderProps } from "./SidebarHeader/SidebarHeader";
+
+export { default as NavbarGroup } from "./NavbarGroup/NavbarGroup";
+export type { NavbarGroupProps } from "./NavbarGroup/NavbarGroup";

package/src/ui/organisms/Sidebar/Sidebar.stories.tsx

@@ -0,0 +1,117 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Sidebar from "./Sidebar";
+
+const meta: Meta<typeof Sidebar> = {
+  title: "UI/Organisms/Sidebar",
+  component: Sidebar,
+  parameters: {
+    docs: {
+      description: {
+        component: "A sidebar navigation component with header, groups, and items. Uses Compound Components pattern.",
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "collapsed"],
+      description: "Visual variant of the sidebar",
+    },
+    title: {
+      control: "text",
+      description: "Title displayed in the header",
+    },
+    showHeader: {
+      control: "boolean",
+      description: "Whether to show the header",
+    },
+  },
+};
+
+export const Default: StoryObj<typeof Sidebar> = {
+  args: {
+    title: "Navigation",
+    showHeader: true,
+    children: (
+      <>
+        <Sidebar.Group title="Agile">
+          <Sidebar.Item href="/epics" isActive>
+            Epics
+          </Sidebar.Item>
+          <Sidebar.Item href="/stories">Stories</Sidebar.Item>
+          <Sidebar.Item href="/backlog">Backlog</Sidebar.Item>
+          <Sidebar.Item href="/kanban">Kanban</Sidebar.Item>
+          <Sidebar.Item href="/sprints">Sprints</Sidebar.Item>
+        </Sidebar.Group>
+        <Sidebar.Group title="Documentation">
+          <Sidebar.Item href="/adrs">ADRs</Sidebar.Item>
+          <Sidebar.Item href="/roadmap">Roadmap</Sidebar.Item>
+        </Sidebar.Group>
+      </>
+    ),
+  },
+};
+
+export const WithIcons: StoryObj<typeof Sidebar> = {
+  args: {
+    title: "Navigation",
+    showHeader: true,
+    children: (
+      <Sidebar.Group title="Agile">
+        <Sidebar.Item
+          href="/epics"
+          isActive
+          icon={
+            <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+            </svg>
+          }
+        >
+          Epics
+        </Sidebar.Item>
+        <Sidebar.Item
+          href="/stories"
+          icon={
+            <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+            </svg>
+          }
+        >
+          Stories
+        </Sidebar.Item>
+      </Sidebar.Group>
+    ),
+  },
+};
+
+export const Collapsed: StoryObj<typeof Sidebar> = {
+  args: {
+    title: "Navigation",
+    variant: "collapsed",
+    showHeader: true,
+    children: (
+      <Sidebar.Group>
+        <Sidebar.Item href="/epics" isActive>
+          Epics
+        </Sidebar.Item>
+        <Sidebar.Item href="/stories">Stories</Sidebar.Item>
+      </Sidebar.Group>
+    ),
+  },
+};
+
+export const WithoutHeader: StoryObj<typeof Sidebar> = {
+  args: {
+    showHeader: false,
+    children: (
+      <Sidebar.Group>
+        <Sidebar.Item href="/epics" isActive>
+          Epics
+        </Sidebar.Item>
+        <Sidebar.Item href="/stories">Stories</Sidebar.Item>
+      </Sidebar.Group>
+    ),
+  },
+};
+
+export default meta;

package/src/ui/organisms/Sidebar/Sidebar.test.tsx

@@ -0,0 +1,40 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import Sidebar from "./Sidebar";
+
+describe("Sidebar", () => {
+  it("renders with title and children", () => {
+    render(
+      <Sidebar title="Navigation">
+        <Sidebar.Group>
+          <Sidebar.Item href="/epics">Epics</Sidebar.Item>
+        </Sidebar.Group>
+      </Sidebar>
+    );
+    expect(screen.getByText("Navigation")).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: /epics/i })).toBeInTheDocument();
+  });
+
+  it("hides header when showHeader is false", () => {
+    render(
+      <Sidebar title="Navigation" showHeader={false}>
+        <Sidebar.Group>
+          <Sidebar.Item href="/epics">Epics</Sidebar.Item>
+        </Sidebar.Group>
+      </Sidebar>
+    );
+    expect(screen.queryByText("Navigation")).not.toBeInTheDocument();
+  });
+
+  it("applies collapsed variant styles", () => {
+    const { container } = render(
+      <Sidebar variant="collapsed" title="Navigation">
+        <Sidebar.Group>
+          <Sidebar.Item href="/epics">Epics</Sidebar.Item>
+        </Sidebar.Group>
+      </Sidebar>
+    );
+    const sidebar = container.querySelector("aside");
+    expect(sidebar?.className).toContain("w-16");
+  });
+});

package/src/ui/organisms/Sidebar/Sidebar.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import type { HTMLAttributes, ReactNode } from "react";
+import SidebarHeader from "../../molecules/SidebarHeader/SidebarHeader";
+import SidebarGroup from "../../molecules/SidebarGroup/SidebarGroup";
+import SidebarItem from "../../atoms/SidebarItem/SidebarItem";
+
+export interface SidebarProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: "default" | "collapsed";
+  title?: string;
+  showHeader?: boolean;
+  onClose?: () => void;
+  children: ReactNode;
+}
+
+/**
+ * Sidebar Component
+ * 
+ * A sidebar navigation component with header, groups, and items.
+ * Follows Atomic Design principles as an Organism component.
+ * Uses Compound Components pattern.
+ * 
+ * @example
+ * ```tsx
+ * <Sidebar title="Navigation" variant="default">
+ *   <Sidebar.Group title="Agile">
+ *     <Sidebar.Item href="/epics" isActive>Epics</Sidebar.Item>
+ *     <Sidebar.Item href="/stories">Stories</Sidebar.Item>
+ *   </Sidebar.Group>
+ * </Sidebar>
+ * ```
+ */
+function SidebarComponent({
+  variant = "default",
+  title,
+  showHeader = true,
+  onClose,
+  children,
+  className = "",
+  ...props
+}: SidebarProps) {
+  const baseClasses = [
+    "flex",
+    "flex-col",
+    "bg-white",
+    "border-r",
+    "border-gray-200",
+    "h-full",
+  ];
+
+  const variantClasses = {
+    default: "w-64",
+    collapsed: "w-16",
+  };
+
+  const classes = [
+    ...baseClasses,
+    variantClasses[variant],
+    className,
+  ].filter(Boolean).join(" ");
+
+  return (
+    <aside className={classes} {...props}>
+      {showHeader && title && (
+        <SidebarHeader
+          title={title}
+          onClose={onClose}
+          showCloseButton={!!onClose}
+        />
+      )}
+      <nav className="flex-1 overflow-y-auto py-4">
+        {children}
+      </nav>
+    </aside>
+  );
+}
+
+// Compound Components
+SidebarComponent.Group = SidebarGroup;
+SidebarComponent.Item = SidebarItem;
+SidebarComponent.Header = SidebarHeader;
+
+export default SidebarComponent;

package/src/ui/organisms/index.ts

@@ -4,3 +4,6 @@ export { default as Modal } from "./Modal/Modal";
 
 export { default as Table } from "./Table/Table";
 export type { TableColumn } from "./Table/Table";
+
+export { default as Sidebar } from "./Sidebar/Sidebar";
+export type { SidebarProps } from "./Sidebar/Sidebar";