react-panel-layout 0.5.1 → 0.6.0

package/src/demo/pages/Stack/components/StackBasics.tsx

@@ -0,0 +1,217 @@
+/**
+ * @file Stack Navigation demo - iOS-style hierarchical navigation
+ */
+import * as React from "react";
+import { useStackNavigation } from "../../../../modules/stack/useStackNavigation.js";
+import { useStackSwipeInput } from "../../../../modules/stack/useStackSwipeInput.js";
+import { StackContent } from "../../../../modules/stack/StackContent.js";
+import type { StackPanel } from "../../../../modules/stack/types.js";
+import styles from "./Stack.module.css";
+
+const panels: StackPanel[] = [
+  {
+    id: "list",
+    title: "Items",
+    content: null, // Will be replaced with dynamic content
+  },
+  {
+    id: "detail",
+    title: "Item Detail",
+    content: null,
+  },
+  {
+    id: "edit",
+    title: "Edit Item",
+    content: null,
+  },
+];
+
+// Sample data
+const listItems = [
+  { id: 1, name: "Document 1", description: "A sample document" },
+  { id: 2, name: "Document 2", description: "Another document" },
+  { id: 3, name: "Document 3", description: "Yet another document" },
+];
+
+type BackButtonProps = {
+  onClick: () => void;
+  disabled: boolean;
+};
+
+const BackButton: React.FC<BackButtonProps> = ({ onClick, disabled }) => (
+  <button className={styles.backButton} onClick={onClick} disabled={disabled}>
+    ← Back
+  </button>
+);
+
+type EditButtonProps = {
+  onClick: () => void;
+};
+
+const EditButton: React.FC<EditButtonProps> = ({ onClick }) => (
+  <button className={styles.actionButton} onClick={onClick}>
+    Edit
+  </button>
+);
+
+export const StackBasics: React.FC = () => {
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const [selectedItem, setSelectedItem] = React.useState<typeof listItems[0] | null>(null);
+
+  const navigation = useStackNavigation({
+    panels,
+    displayMode: "overlay",
+    transitionMode: "css",
+  });
+
+  const { isEdgeSwiping, progress, containerProps } = useStackSwipeInput({
+    containerRef,
+    navigation,
+    edge: "left",
+    edgeWidth: 30,
+  });
+
+  const handleItemClick = (item: typeof listItems[0]) => {
+    setSelectedItem(item);
+    navigation.push("detail");
+  };
+
+  const handleEdit = () => {
+    navigation.push("edit");
+  };
+
+  const backButtonProps = navigation.getBackButtonProps();
+
+  const getHeaderTitle = (): string => {
+    if (navigation.state.depth === 0) {
+      return "Items";
+    }
+    if (navigation.state.depth === 1) {
+      return selectedItem?.name ?? "";
+    }
+    if (navigation.state.depth === 2) {
+      return "Edit";
+    }
+    return "";
+  };
+
+  const showBackButton = navigation.state.depth > 0;
+  const showEditButton = navigation.state.depth === 1;
+
+  return (
+    <div className={styles.container}>
+      {/* Header */}
+      <header className={styles.header}>
+        {showBackButton && <BackButton onClick={backButtonProps.onClick} disabled={backButtonProps.disabled} />}
+        <h1 className={styles.title}>{getHeaderTitle()}</h1>
+        {showEditButton ? <EditButton onClick={handleEdit} /> : null}
+      </header>
+
+      {/* Stack content area */}
+      <div
+        ref={containerRef}
+        className={styles.stackContainer}
+        {...containerProps}
+      >
+        {/* List Panel */}
+        <StackContent
+          id="list"
+          depth={0}
+          isActive={navigation.currentPanelId === "list"}
+          displayMode="overlay"
+          transitionMode="css"
+          navigationState={navigation.state}
+          swipeProgress={navigation.currentPanelId === "list" ? progress : undefined}
+        >
+          <div className={styles.panel}>
+            <ul className={styles.list}>
+              {listItems.map((item) => (
+                <li key={item.id} className={styles.listItem}>
+                  <button
+                    className={styles.listItemButton}
+                    onClick={() => handleItemClick(item)}
+                  >
+                    <span className={styles.listItemName}>{item.name}</span>
+                    <span className={styles.listItemDesc}>{item.description}</span>
+                    <span className={styles.chevron}>→</span>
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </StackContent>
+
+        {/* Detail Panel */}
+        <StackContent
+          id="detail"
+          depth={1}
+          isActive={navigation.currentPanelId === "detail"}
+          displayMode="overlay"
+          transitionMode="css"
+          navigationState={navigation.state}
+          swipeProgress={navigation.currentPanelId === "detail" ? progress : undefined}
+        >
+          <div className={styles.panel}>
+            <div className={styles.detailContent}>
+              <h2>{selectedItem?.name}</h2>
+              <p>{selectedItem?.description}</p>
+              <div className={styles.detailMeta}>
+                <span>ID: {selectedItem?.id}</span>
+              </div>
+              <p className={styles.hint}>
+                Swipe from the left edge to go back, or tap the Back button.
+              </p>
+            </div>
+          </div>
+        </StackContent>
+
+        {/* Edit Panel */}
+        <StackContent
+          id="edit"
+          depth={2}
+          isActive={navigation.currentPanelId === "edit"}
+          displayMode="overlay"
+          transitionMode="css"
+          navigationState={navigation.state}
+          swipeProgress={navigation.currentPanelId === "edit" ? progress : undefined}
+        >
+          <div className={styles.panel}>
+            <div className={styles.editContent}>
+              <h2>Edit {selectedItem?.name}</h2>
+              <div className={styles.form}>
+                <label className={styles.label}>
+                  Name
+                  <input
+                    type="text"
+                    className={styles.input}
+                    defaultValue={selectedItem?.name}
+                  />
+                </label>
+                <label className={styles.label}>
+                  Description
+                  <textarea
+                    className={styles.textarea}
+                    defaultValue={selectedItem?.description}
+                  />
+                </label>
+              </div>
+              <button
+                className={styles.saveButton}
+                onClick={() => navigation.go(-1)}
+              >
+                Save Changes
+              </button>
+            </div>
+          </div>
+        </StackContent>
+      </div>
+
+      {/* Debug info */}
+      <div className={styles.debugInfo}>
+        <span>Depth: {navigation.state.depth}</span>
+        <span>Current: {navigation.currentPanelId}</span>
+        {isEdgeSwiping ? <span>Swiping: {Math.round(progress * 100)}%</span> : null}
+      </div>
+    </div>
+  );
+};

package/src/demo/pages/Stack/components/StackTablet.module.css

@@ -0,0 +1,299 @@
+/* Stack Tablet demo styles - iPad Settings-style stacking sidebar */
+
+/*
+ * Animation customization via CSS custom properties:
+ * --stack-duration: Animation duration
+ * --stack-easing: Animation easing curve
+ * --stack-shadow: Shadow for panels
+ * --stack-parallax: Parallax offset for underlying panels
+ */
+
+/*
+ * iOS Navigation Transition Reference:
+ * - Duration: 350ms (0.35s)
+ * - Easing: cubic-bezier(0.32, 0.72, 0, 1) - iOS spring-like curve
+ * - Push: new panel 100% → 0%, old panel 0% → -33%
+ * - Pop: current panel 0% → 100%, previous panel -33% → 0%
+ * - Shadow: left edge shadow on incoming panel
+ * - No scale transformation
+ */
+
+/* iOS-style push animation - start beyond 100% to account for shadow */
+@keyframes stack-ios-push {
+  0% {
+    transform: translateX(calc(100% + 40px));
+  }
+  100% {
+    transform: translateX(0%);
+  }
+}
+
+/* iOS-style pop animation - exit beyond 100% so shadow also leaves */
+@keyframes stack-ios-pop {
+  0% {
+    transform: translateX(0%);
+  }
+  100% {
+    transform: translateX(calc(100% + 40px));
+  }
+}
+
+/* Base stack panel */
+.stackPanel {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--rpl-color-surface, #fff);
+  transform-origin: center center;
+  /* iOS spring-like easing */
+  transition:
+    transform var(--stack-duration, 350ms) var(--stack-easing, cubic-bezier(0.32, 0.72, 0, 1)),
+    opacity var(--stack-duration, 350ms) var(--stack-easing, cubic-bezier(0.32, 0.72, 0, 1));
+  will-change: transform, opacity;
+}
+
+/* Entering animation (push) */
+.panelEntering {
+  animation: stack-ios-push var(--stack-duration, 350ms) var(--stack-easing, cubic-bezier(0.32, 0.72, 0, 1)) forwards;
+}
+
+/* Exiting animation (pop) */
+.panelExiting {
+  animation: stack-ios-pop var(--stack-duration, 350ms) var(--stack-easing, cubic-bezier(0.32, 0.72, 0, 1)) forwards;
+}
+
+.container {
+  display: flex;
+  height: 100%;
+  box-sizing: border-box;
+  background: var(--rpl-color-background, #f2f2f7);
+}
+
+/* Sidebar (left side) - contains stacking menus */
+.sidebar {
+  width: 320px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--rpl-color-surface, #fff);
+  border-right: 1px solid var(--rpl-color-border, #c6c6c8);
+}
+
+.sidebarContent {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+}
+
+/* Menu panel - each stacked panel has its own header */
+.menuPanel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--rpl-color-surface, #fff);
+}
+
+.panelHeader {
+  display: flex;
+  flex-direction: column;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--rpl-color-border, #c6c6c8);
+  background: var(--rpl-color-surface, #fff);
+}
+
+.panelBackButton {
+  padding: 4px 0;
+  margin-bottom: 4px;
+  font-size: 17px;
+  color: var(--rpl-color-primary, #007aff);
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+}
+
+.panelBackButton:hover {
+  text-decoration: underline;
+}
+
+.panelTitle {
+  margin: 0;
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--rpl-color-text-primary, #000);
+}
+
+/* Menu list */
+.menuList {
+  margin: 0;
+  padding: 8px;
+  list-style: none;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.menuItem {
+  margin-bottom: 2px;
+}
+
+.menuButton {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 12px;
+  background: transparent;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.15s ease;
+  gap: 12px;
+}
+
+.menuButton:hover {
+  background: var(--rpl-color-surface-hover, #e5e5ea);
+}
+
+.menuButtonActive {
+  background: var(--rpl-color-primary, #007aff);
+}
+
+.menuButtonActive .menuLabel {
+  color: #fff;
+}
+
+.menuButtonActive .menuChevron {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.menuIcon {
+  font-size: 24px;
+  width: 32px;
+  text-align: center;
+}
+
+.menuLabel {
+  flex: 1;
+  font-size: 17px;
+  color: var(--rpl-color-text-primary, #000);
+}
+
+.menuChevron {
+  font-size: 20px;
+  color: var(--rpl-color-text-tertiary, #c7c7cc);
+  font-weight: 600;
+}
+
+/* Leaf content (when no more children) */
+.leafContent {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  text-align: center;
+}
+
+.leafText {
+  margin: 0 0 8px 0;
+  font-size: 17px;
+  color: var(--rpl-color-text-primary, #000);
+}
+
+.leafHint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--rpl-color-text-tertiary, #aeaeb2);
+}
+
+/* Detail panel (right side) */
+.detail {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: var(--rpl-color-background, #f2f2f7);
+  min-width: 0;
+}
+
+.detailHeader {
+  padding: 16px 24px;
+  background: var(--rpl-color-surface, #fff);
+  border-bottom: 1px solid var(--rpl-color-border, #c6c6c8);
+}
+
+.detailTitle {
+  margin: 0;
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--rpl-color-text-primary, #000);
+}
+
+.detailBody {
+  flex: 1;
+  padding: 20px;
+  overflow-y: auto;
+}
+
+.detailList {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  background: var(--rpl-color-surface, #fff);
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.detailItem {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--rpl-color-border, #c6c6c8);
+}
+
+.detailItem:last-child {
+  border-bottom: none;
+}
+
+.detailLabel {
+  font-size: 17px;
+  color: var(--rpl-color-text-primary, #000);
+}
+
+.detailValue {
+  font-size: 17px;
+  color: var(--rpl-color-text-secondary, #8e8e93);
+}
+
+/* Debug info */
+.debugInfo {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 8px 16px;
+  font-size: 12px;
+  color: var(--rpl-color-text-tertiary, #8e8e93);
+  background: var(--rpl-color-surface, #fff);
+  border-top: 1px solid var(--rpl-color-border, #c6c6c8);
+}
+
+.themeSelector {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.themeSelector select {
+  padding: 2px 8px;
+  font-size: 12px;
+  border: 1px solid var(--rpl-color-border, #c6c6c8);
+  border-radius: 4px;
+  background: var(--rpl-color-surface, #fff);
+  color: var(--rpl-color-text-primary, #000);
+}