react-panel-layout 0.5.1 → 0.6.0

package/src/demo/pages/Pivot/components/Pivot.module.css

@@ -0,0 +1,278 @@
+/* Pivot demo styles */
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 24px;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.nav {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.panel {
+  flex: 1;
+  background: var(--rpl-color-surface, #f5f5f5);
+  border-radius: 8px;
+  padding: 16px;
+  overflow: auto;
+}
+
+.indicator {
+  font-size: 12px;
+  color: var(--rpl-color-text-secondary, #666);
+  margin-bottom: 12px;
+  padding: 4px 8px;
+  background: var(--rpl-color-surface-elevated, #fff);
+  border-radius: 4px;
+  display: inline-block;
+}
+
+.content {
+  /* No animation - let Pivot handle transitions */
+}
+
+.content h3 {
+  margin: 0 0 12px 0;
+  color: var(--rpl-color-text-primary, #333);
+}
+
+.content p {
+  margin: 0 0 12px 0;
+  color: var(--rpl-color-text-secondary, #666);
+  line-height: 1.6;
+}
+
+.content ul {
+  margin: 0;
+  padding-left: 20px;
+}
+
+.content li {
+  margin-bottom: 8px;
+  color: var(--rpl-color-text-secondary, #666);
+}
+
+.codeBlock {
+  background: var(--rpl-color-surface-elevated, #1e1e1e);
+  color: var(--rpl-color-text-on-dark, #d4d4d4);
+  padding: 16px;
+  border-radius: 8px;
+  overflow-x: auto;
+  font-family: "SF Mono", Menlo, Monaco, "Courier New", monospace;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+/* Tabs variant */
+.tabsContainer {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.tabList {
+  display: flex;
+  border-bottom: 1px solid var(--rpl-color-border, #e0e0e0);
+  background: var(--rpl-color-surface, #f5f5f5);
+}
+
+.tab {
+  padding: 12px 20px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 14px;
+  color: var(--rpl-color-text-secondary, #666);
+  border-bottom: 2px solid transparent;
+  transition: all 0.15s ease;
+}
+
+.tab:hover {
+  color: var(--rpl-color-text-primary, #333);
+  background: var(--rpl-color-surface-hover, #eee);
+}
+
+.tab[data-active="true"] {
+  color: var(--rpl-color-primary, #0066cc);
+  border-bottom-color: var(--rpl-color-primary, #0066cc);
+}
+
+.tabPanel {
+  flex: 1;
+  padding: 24px;
+  overflow: auto;
+}
+
+/* Sidebar variant */
+.sidebarContainer {
+  display: flex;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.sidebar {
+  width: 200px;
+  background: var(--rpl-color-surface, #f5f5f5);
+  border-right: 1px solid var(--rpl-color-border, #e0e0e0);
+  padding: 16px 0;
+}
+
+.sidebarNav {
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebarItem {
+  padding: 12px 20px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 14px;
+  color: var(--rpl-color-text-secondary, #666);
+  text-align: left;
+  transition: all 0.15s ease;
+  border-left: 3px solid transparent;
+}
+
+.sidebarItem:hover {
+  background: var(--rpl-color-surface-hover, #eee);
+  color: var(--rpl-color-text-primary, #333);
+}
+
+.sidebarItem[data-active="true"] {
+  background: var(--rpl-color-surface-elevated, #fff);
+  color: var(--rpl-color-primary, #0066cc);
+  border-left-color: var(--rpl-color-primary, #0066cc);
+}
+
+.mainContent {
+  flex: 1;
+  padding: 24px;
+  overflow: auto;
+}
+
+
+/* Transitions comparison demo */
+.transitionsContainer {
+  padding: 24px;
+  height: 100%;
+  box-sizing: border-box;
+  overflow: auto;
+}
+
+.transitionsGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 20px;
+}
+
+.transitionDemoCard {
+  background: var(--rpl-color-surface, #f5f5f5);
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid var(--rpl-color-border, #e0e0e0);
+}
+
+.transitionDemoHeader {
+  padding: 16px;
+  background: var(--rpl-color-surface-elevated, #fff);
+  border-bottom: 1px solid var(--rpl-color-border, #e0e0e0);
+}
+
+.transitionDemoHeader h4 {
+  margin: 0 0 4px 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--rpl-color-text-primary, #333);
+}
+
+.transitionDemoDescription {
+  display: block;
+  font-size: 12px;
+  color: var(--rpl-color-text-secondary, #666);
+  margin-bottom: 8px;
+}
+
+.transitionDemoCode {
+  display: inline-block;
+  font-size: 11px;
+  padding: 2px 6px;
+  background: var(--rpl-color-surface, #f0f0f0);
+  border-radius: 4px;
+  color: var(--rpl-color-text-secondary, #666);
+  font-family: "SF Mono", Menlo, Monaco, monospace;
+}
+
+.transitionDemoTabs {
+  display: flex;
+  background: var(--rpl-color-surface, #f5f5f5);
+  border-bottom: 1px solid var(--rpl-color-border, #e0e0e0);
+}
+
+.transitionDemoTab {
+  flex: 1;
+  padding: 10px 12px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--rpl-color-text-secondary, #666);
+  transition: background 0.1s ease;
+}
+
+.transitionDemoTab:hover {
+  background: var(--rpl-color-surface-hover, #eee);
+}
+
+.transitionDemoTab[data-active="true"] {
+  background: var(--rpl-color-surface-elevated, #fff);
+  color: var(--rpl-color-primary, #0066cc);
+  font-weight: 500;
+}
+
+.transitionDemoContent {
+  padding: 16px;
+  min-height: 100px;
+}
+
+/* Content without animation for transitions demo */
+.transitionDemoInnerContent h3 {
+  margin: 0 0 8px 0;
+  font-size: 14px;
+  color: var(--rpl-color-text-primary, #333);
+}
+
+.transitionDemoInnerContent p {
+  margin: 0;
+  font-size: 13px;
+  color: var(--rpl-color-text-secondary, #666);
+}
+
+/* Design tokens section */
+.designTokensSection {
+  margin-top: 24px;
+  padding: 20px;
+  background: var(--rpl-color-surface, #f5f5f5);
+  border-radius: 12px;
+  border: 1px solid var(--rpl-color-border, #e0e0e0);
+}
+
+.designTokensSection h4 {
+  margin: 0 0 8px 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--rpl-color-text-primary, #333);
+}
+
+.designTokensSection p {
+  margin: 0 0 12px 0;
+  font-size: 13px;
+  color: var(--rpl-color-text-secondary, #666);
+}

package/src/demo/pages/Pivot/components/PivotBasics.tsx

@@ -0,0 +1,103 @@
+/**
+ * @file Basic Pivot hook demo - headless content switching
+ */
+import * as React from "react";
+import { usePivot } from "../../../../pivot/index";
+import type { PivotItem } from "../../../../pivot/index";
+import { DemoButton } from "../../../components/ui/DemoButton";
+import styles from "./Pivot.module.css";
+
+const items: PivotItem[] = [
+  {
+    id: "overview",
+    label: "Overview",
+    content: (
+      <div className={styles.content}>
+        <h3>Overview</h3>
+        <p>
+          This is the Overview panel. The Pivot hook provides headless content switching - you control the UI, it
+          manages the state and accessibility.
+        </p>
+        <ul>
+          <li>Controlled and uncontrolled modes</li>
+          <li>ARIA attributes for accessibility</li>
+          <li>React.Activity for efficient rendering</li>
+        </ul>
+      </div>
+    ),
+  },
+  {
+    id: "features",
+    label: "Features",
+    content: (
+      <div className={styles.content}>
+        <h3>Features</h3>
+        <p>The usePivot hook provides:</p>
+        <ul>
+          <li>
+            <strong>activeId</strong> - Current active item ID
+          </li>
+          <li>
+            <strong>setActiveId</strong> - Change active item
+          </li>
+          <li>
+            <strong>getItemProps</strong> - Props for navigation elements
+          </li>
+          <li>
+            <strong>Outlet</strong> - Component to render content
+          </li>
+        </ul>
+      </div>
+    ),
+  },
+  {
+    id: "usage",
+    label: "Usage",
+    content: (
+      <div className={styles.content}>
+        <h3>Usage</h3>
+        <pre className={styles.codeBlock}>
+          {`const { getItemProps, Outlet } = usePivot({
+  items,
+  defaultActiveId: "overview"
+});`}
+        </pre>
+      </div>
+    ),
+  },
+];
+
+export const PivotBasics: React.FC = () => {
+  const { activeId, getItemProps, Outlet } = usePivot({
+    items,
+    defaultActiveId: "overview",
+  });
+
+  return (
+    <div className={styles.container}>
+      <nav className={styles.nav}>
+        {items.map((item) => {
+          const props = getItemProps(item.id);
+          return (
+            <DemoButton
+              key={item.id}
+              variant={props["aria-selected"] ? "primary" : "secondary"}
+              size="md"
+              onClick={props.onClick}
+              aria-selected={props["aria-selected"]}
+              tabIndex={props.tabIndex}
+              data-pivot-item={props["data-pivot-item"]}
+              data-active={props["data-active"]}
+            >
+              {item.label}
+            </DemoButton>
+          );
+        })}
+      </nav>
+      <div className={styles.panel}>
+        <div className={styles.indicator}>Active: {activeId}</div>
+        <Outlet />
+      </div>
+    </div>
+  );
+};

package/src/demo/pages/Pivot/components/PivotSidebar.tsx

@@ -0,0 +1,168 @@
+/**
+ * @file Pivot as sidebar navigation demo
+ */
+import * as React from "react";
+import { usePivot } from "../../../../pivot/index";
+import type { PivotItem } from "../../../../pivot/index";
+import styles from "./Pivot.module.css";
+
+const items: PivotItem[] = [
+  {
+    id: "dashboard",
+    label: "Dashboard",
+    content: (
+      <div className={styles.content}>
+        <h3>Dashboard</h3>
+        <p>Welcome to your dashboard. Here you can see an overview of your activity.</p>
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))",
+            gap: 16,
+            marginTop: 20,
+          }}
+        >
+          <div style={{ background: "#e3f2fd", padding: 16, borderRadius: 8 }}>
+            <div style={{ fontSize: 24, fontWeight: "bold" }}>128</div>
+            <div style={{ fontSize: 12, color: "#666" }}>Active Users</div>
+          </div>
+          <div style={{ background: "#e8f5e9", padding: 16, borderRadius: 8 }}>
+            <div style={{ fontSize: 24, fontWeight: "bold" }}>42</div>
+            <div style={{ fontSize: 12, color: "#666" }}>Projects</div>
+          </div>
+          <div style={{ background: "#fff3e0", padding: 16, borderRadius: 8 }}>
+            <div style={{ fontSize: 24, fontWeight: "bold" }}>89%</div>
+            <div style={{ fontSize: 12, color: "#666" }}>Completion</div>
+          </div>
+        </div>
+      </div>
+    ),
+  },
+  {
+    id: "projects",
+    label: "Projects",
+    content: (
+      <div className={styles.content}>
+        <h3>Projects</h3>
+        <p>Manage your projects and track progress.</p>
+        <ul style={{ marginTop: 16, listStyle: "none", padding: 0 }}>
+          {["Website Redesign", "Mobile App", "API Integration", "Documentation"].map((project) => (
+            <li
+              key={project}
+              style={{
+                padding: 12,
+                background: "#f5f5f5",
+                marginBottom: 8,
+                borderRadius: 4,
+                display: "flex",
+                justifyContent: "space-between",
+              }}
+            >
+              <span>{project}</span>
+              <span style={{ color: "#666", fontSize: 12 }}>In Progress</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+    ),
+  },
+  {
+    id: "team",
+    label: "Team",
+    content: (
+      <div className={styles.content}>
+        <h3>Team Members</h3>
+        <p>View and manage your team.</p>
+        <div style={{ marginTop: 16 }}>
+          {["Alice", "Bob", "Charlie", "Diana"].map((name) => (
+            <div
+              key={name}
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: 12,
+                padding: 12,
+                borderBottom: "1px solid #eee",
+              }}
+            >
+              <div
+                style={{
+                  width: 32,
+                  height: 32,
+                  borderRadius: "50%",
+                  background: "#0066cc",
+                  color: "white",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  fontSize: 14,
+                }}
+              >
+                {name[0]}
+              </div>
+              <div>
+                <div style={{ fontWeight: 500 }}>{name}</div>
+                <div style={{ fontSize: 12, color: "#666" }}>Developer</div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    ),
+  },
+  {
+    id: "settings",
+    label: "Settings",
+    content: (
+      <div className={styles.content}>
+        <h3>Settings</h3>
+        <p>Configure your workspace preferences.</p>
+        <div style={{ marginTop: 16 }}>
+          <label style={{ display: "block", marginBottom: 12 }}>
+            <input type="checkbox" defaultChecked /> Email notifications
+          </label>
+          <label style={{ display: "block", marginBottom: 12 }}>
+            <input type="checkbox" /> Push notifications
+          </label>
+          <label style={{ display: "block", marginBottom: 12 }}>
+            <input type="checkbox" defaultChecked /> Weekly digest
+          </label>
+        </div>
+      </div>
+    ),
+  },
+];
+
+export const PivotSidebar: React.FC = () => {
+  const { getItemProps, Outlet } = usePivot({
+    items,
+    defaultActiveId: "dashboard",
+  });
+
+  return (
+    <div className={styles.sidebarContainer}>
+      <aside className={styles.sidebar}>
+        <nav className={styles.sidebarNav}>
+          {items.map((item) => {
+            const props = getItemProps(item.id);
+            return (
+              <button
+                key={item.id}
+                className={styles.sidebarItem}
+                onClick={props.onClick}
+                aria-selected={props["aria-selected"]}
+                tabIndex={props.tabIndex}
+                data-active={props["data-active"]}
+              >
+                {item.label}
+              </button>
+            );
+          })}
+        </nav>
+      </aside>
+      <main className={styles.mainContent}>
+        <Outlet />
+      </main>
+    </div>
+  );
+};

package/src/demo/pages/Pivot/components/PivotTabs.tsx

@@ -0,0 +1,129 @@
+/**
+ * @file Pivot as tab navigation demo
+ */
+import * as React from "react";
+import { usePivot } from "../../../../pivot/index";
+import type { PivotItem } from "../../../../pivot/index";
+import styles from "./Pivot.module.css";
+
+const items: PivotItem[] = [
+  {
+    id: "general",
+    label: "General",
+    content: (
+      <div className={styles.content}>
+        <h3>General Settings</h3>
+        <p>Configure basic application preferences.</p>
+        <div style={{ marginTop: 16 }}>
+          <label style={{ display: "block", marginBottom: 8 }}>
+            <input type="checkbox" defaultChecked /> Enable notifications
+          </label>
+          <label style={{ display: "block", marginBottom: 8 }}>
+            <input type="checkbox" /> Dark mode
+          </label>
+          <label style={{ display: "block", marginBottom: 8 }}>
+            <input type="checkbox" defaultChecked /> Auto-save
+          </label>
+        </div>
+      </div>
+    ),
+  },
+  {
+    id: "account",
+    label: "Account",
+    content: (
+      <div className={styles.content}>
+        <h3>Account Settings</h3>
+        <p>Manage your account information.</p>
+        <div style={{ marginTop: 16 }}>
+          <div style={{ marginBottom: 12 }}>
+            <label style={{ display: "block", marginBottom: 4, fontSize: 12 }}>Email</label>
+            <input type="email" defaultValue="user@example.com" style={{ padding: 8, width: "100%", maxWidth: 300 }} />
+          </div>
+          <div style={{ marginBottom: 12 }}>
+            <label style={{ display: "block", marginBottom: 4, fontSize: 12 }}>Username</label>
+            <input type="text" defaultValue="johndoe" style={{ padding: 8, width: "100%", maxWidth: 300 }} />
+          </div>
+        </div>
+      </div>
+    ),
+  },
+  {
+    id: "privacy",
+    label: "Privacy",
+    content: (
+      <div className={styles.content}>
+        <h3>Privacy Settings</h3>
+        <p>Control your privacy preferences.</p>
+        <div style={{ marginTop: 16 }}>
+          <label style={{ display: "block", marginBottom: 8 }}>
+            <input type="checkbox" /> Share usage data
+          </label>
+          <label style={{ display: "block", marginBottom: 8 }}>
+            <input type="checkbox" defaultChecked /> Remember login
+          </label>
+          <label style={{ display: "block", marginBottom: 8 }}>
+            <input type="checkbox" /> Allow cookies
+          </label>
+        </div>
+      </div>
+    ),
+  },
+  {
+    id: "advanced",
+    label: "Advanced",
+    content: (
+      <div className={styles.content}>
+        <h3>Advanced Settings</h3>
+        <p>Configure advanced options for power users.</p>
+        <div style={{ marginTop: 16 }}>
+          <div style={{ marginBottom: 12 }}>
+            <label style={{ display: "block", marginBottom: 4, fontSize: 12 }}>API Endpoint</label>
+            <input
+              type="text"
+              defaultValue="https://api.example.com"
+              style={{ padding: 8, width: "100%", maxWidth: 400 }}
+            />
+          </div>
+          <div style={{ marginBottom: 12 }}>
+            <label style={{ display: "block", marginBottom: 4, fontSize: 12 }}>Timeout (ms)</label>
+            <input type="number" defaultValue="5000" style={{ padding: 8, width: 100 }} />
+          </div>
+        </div>
+      </div>
+    ),
+  },
+];
+
+export const PivotTabs: React.FC = () => {
+  const { getItemProps, Outlet } = usePivot({
+    items,
+    defaultActiveId: "general",
+  });
+
+  return (
+    <div className={styles.tabsContainer}>
+      <div className={styles.tabList} role="tablist">
+        {items.map((item) => {
+          const props = getItemProps(item.id);
+          return (
+            <button
+              key={item.id}
+              className={styles.tab}
+              role="tab"
+              onClick={props.onClick}
+              aria-selected={props["aria-selected"]}
+              tabIndex={props.tabIndex}
+              data-active={props["data-active"]}
+            >
+              {item.label}
+            </button>
+          );
+        })}
+      </div>
+      <div className={styles.tabPanel} role="tabpanel">
+        <Outlet />
+      </div>
+    </div>
+  );
+};