react-panel-layout 0.6.0 → 0.7.0

package/src/components/window/useRevealDrawerTransform.ts

@@ -0,0 +1,105 @@
+/**
+ * @file Hook for managing reveal-mode drawer transform (backward-compatible wrapper).
+ *
+ * This hook is a thin wrapper around useDrawerTransform with mode="reveal".
+ * For new code, prefer using useDrawerTransform directly.
+ *
+ * @deprecated Use useDrawerTransform with mode="reveal" instead.
+ */
+import * as React from "react";
+import type { ContinuousOperationState } from "../../hooks/gesture/types.js";
+import type { DrawerPlacement } from "./drawerStyles.js";
+import {
+  useDrawerTransform,
+  type DrawerAnimationPhase,
+  type UseDrawerTransformResult,
+} from "./useDrawerTransform.js";
+import { getContentElement } from "./drawerRevealAnimationUtils.js";
+
+/**
+ * Phase of reveal drawer animation lifecycle.
+ * @deprecated Use DrawerAnimationPhase from useDrawerTransform.ts
+ */
+export type RevealDrawerAnimationPhase = DrawerAnimationPhase;
+
+/**
+ * Options for useRevealDrawerTransform hook.
+ */
+export type UseRevealDrawerTransformOptions = {
+  /** Ref to the drawer element */
+  drawerRef: React.RefObject<HTMLElement | null>;
+  /** Drawer placement */
+  placement: DrawerPlacement;
+  /** Drawer size in pixels */
+  drawerSize: number;
+  /** Whether the drawer is open */
+  isOpen: boolean;
+  /** Current swipe state */
+  swipeState: ContinuousOperationState;
+  /** Current swipe displacement */
+  displacement: number;
+  /** Whether opening via swipe */
+  isOpening: boolean;
+  /** Whether closing via swipe */
+  isClosing: boolean;
+  /** Whether this hook is enabled */
+  enabled: boolean;
+  /** Whether drawer is inline (affects target element) */
+  inline: boolean;
+  /** Grid container ref for inline mode */
+  gridRef?: React.RefObject<HTMLElement | null>;
+  /** Content background color for stacking context */
+  contentBackground?: string;
+};
+
+/**
+ * Result from useRevealDrawerTransform hook.
+ */
+export type UseRevealDrawerTransformResult = UseDrawerTransformResult;
+
+/**
+ * Hook for managing reveal-mode drawer transform.
+ *
+ * @deprecated Use useDrawerTransform with mode="reveal" instead.
+ */
+export function useRevealDrawerTransform(
+  options: UseRevealDrawerTransformOptions,
+): UseRevealDrawerTransformResult {
+  const {
+    drawerRef,
+    placement,
+    drawerSize,
+    isOpen,
+    swipeState,
+    displacement,
+    isOpening,
+    isClosing,
+    enabled,
+    inline,
+    gridRef,
+    contentBackground = "#fff",
+  } = options;
+
+  // Create a content ref that resolves the content element
+  const contentRef = React.useRef<HTMLElement | null>(null);
+  React.useLayoutEffect(() => {
+    contentRef.current = getContentElement(inline, gridRef);
+  }, [inline, gridRef]);
+
+  return useDrawerTransform({
+    mode: "reveal",
+    drawerRef,
+    contentRef,
+    placement,
+    drawerSize,
+    isOpen,
+    swipeState,
+    displacement,
+    isOpening,
+    isClosing,
+    enabled,
+    inline,
+    gridRef,
+    contentBackground,
+  });
+}

package/src/constants/styles.ts

@@ -259,3 +259,22 @@ export const SPLIT_HANDLE_THICKNESS = SIZE_SPLIT_HANDLE_THICKNESS;
  */
 export const HORIZONTAL_DIVIDER_WIDTH = "var(--rpl-size-horizontal-divider-width, 4px)";
 export const HORIZONTAL_DIVIDER_HIT_AREA_OFFSET = "var(--rpl-space-horizontal-divider-hit-area-offset, 4px)";
+
+/**
+ * Modal
+ */
+export const COLOR_MODAL_BACKDROP = "var(--rpl-color-modal-backdrop, rgba(0, 0, 0, 0.5))";
+export const MODAL_TRANSITION_DURATION = "var(--rpl-modal-transition-duration, 200ms)";
+export const MODAL_TRANSITION_EASING = "var(--rpl-modal-transition-easing, ease-out)";
+export const MODAL_MIN_WIDTH = "var(--rpl-modal-min-width, 280px)";
+export const MODAL_MAX_WIDTH = "var(--rpl-modal-max-width, 90vw)";
+export const MODAL_MAX_HEIGHT = "var(--rpl-modal-max-height, 85vh)";
+
+/**
+ * Alert Dialog
+ */
+export const ALERT_DIALOG_WIDTH = "var(--rpl-alert-dialog-width, 320px)";
+export const ALERT_DIALOG_BUTTON_GAP = "var(--rpl-alert-dialog-button-gap, 8px)";
+export const ALERT_DIALOG_ACTIONS_PADDING = "var(--rpl-alert-dialog-actions-padding, 12px)";
+export const ALERT_DIALOG_MESSAGE_PADDING = "var(--rpl-alert-dialog-message-padding, 16px)";
+export const ALERT_DIALOG_INPUT_MARGIN_TOP = "var(--rpl-alert-dialog-input-margin-top, 12px)";

package/src/demo/components/FullscreenDemoPage.tsx

@@ -0,0 +1,47 @@
+/**
+ * @file Fullscreen demo page wrapper
+ *
+ * Renders fullscreen demos by ID from the route parameter.
+ */
+import * as React from "react";
+import { useParams, Link } from "react-router";
+import { getFullscreenDemo } from "../fullscreenRoutes";
+
+export const FullscreenDemoPage: React.FC = () => {
+  const { id } = useParams<{ id: string }>();
+  const demo = id ? getFullscreenDemo(id) : undefined;
+
+  if (!demo) {
+    return (
+      <div style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        height: "100vh",
+        gap: "16px",
+        fontFamily: "system-ui, sans-serif",
+      }}>
+        <h1>Demo not found</h1>
+        <p>The fullscreen demo "{id}" does not exist.</p>
+        <Link to="/" style={{ color: "#1d9bf0" }}>Go back home</Link>
+      </div>
+    );
+  }
+
+  return (
+    <React.Suspense fallback={
+      <div style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        height: "100vh",
+        fontFamily: "system-ui, sans-serif",
+      }}>
+        Loading...
+      </div>
+    }>
+      {demo.element}
+    </React.Suspense>
+  );
+};

package/src/demo/fullscreenRoutes.tsx

@@ -0,0 +1,32 @@
+/**
+ * @file Fullscreen demo route configuration
+ *
+ * Demos that need to be rendered outside the main Layout
+ * (e.g., reveal-mode drawer that transforms the body).
+ */
+import * as React from "react";
+
+export type FullscreenDemo = {
+  id: string;
+  label: string;
+  element: React.ReactNode;
+};
+
+// Lazy load fullscreen demos
+// eslint-disable-next-line no-restricted-syntax -- dynamic import required for lazy loading
+const DrawerRevealFullscreen = React.lazy(() => import("./pages/Drawer/reveal-fullscreen"));
+
+export const fullscreenDemos: Record<string, FullscreenDemo> = {
+  "drawer-reveal": {
+    id: "drawer-reveal",
+    label: "Drawer Reveal Mode",
+    element: <DrawerRevealFullscreen />,
+  },
+};
+
+/**
+ * Get a fullscreen demo by ID.
+ */
+export function getFullscreenDemo(id: string): FullscreenDemo | undefined {
+  return fullscreenDemos[id];
+}

package/src/demo/index.tsx

@@ -8,6 +8,7 @@ import { HashRouter, Routes, Route, Outlet, Link } from "react-router";
 import { Layout } from "./Layout";
 import { PanelLayoutDemo } from "./pages/PanelLayout/PanelLayoutDemo";
 import { demoCategories } from "./routes";
+import { FullscreenDemoPage } from "./components/FullscreenDemoPage";
 import * as React from "react";
 import { useMedia } from "./hooks/useMedia";
 import "./demo.css";
@@ -263,6 +264,10 @@ function App() {
   return (
     <HashRouter>
       <Routes>
+        {/* Fullscreen pages (outside Layout) */}
+        <Route path="/fullscreen/:id" element={<FullscreenDemoPage />} />
+
+        {/* Regular pages (inside Layout) */}
         <Route path="/" element={<Layout />}>
           <Route index element={<Home />} />
           <Route path="panel-demo" element={<PanelLayoutDemo />} />

package/src/demo/pages/Dialog/alerts/index.tsx

@@ -0,0 +1,22 @@
+/**
+ * @file Dialog - Alerts page
+ */
+import * as React from "react";
+import { AlertDialogDemo } from "../components/AlertDialogDemo";
+import AlertDialogDemoSource from "../components/AlertDialogDemo.tsx?raw";
+import { SingleSamplePage } from "../../../components/layout";
+
+const Page: React.FC = () => {
+  return (
+    <SingleSamplePage
+      title="Dialog / Alert, Confirm, Prompt"
+      code={AlertDialogDemoSource}
+      codeTitle="AlertDialogDemo.tsx"
+      previewHeight={520}
+    >
+      <AlertDialogDemo />
+    </SingleSamplePage>
+  );
+};
+
+export default Page;

package/src/demo/pages/Dialog/card/index.tsx

@@ -0,0 +1,22 @@
+/**
+ * @file Dialog - Card Expansion page (Apple Music style)
+ */
+import * as React from "react";
+import { CardExpandDemo } from "../components/CardExpandDemo.js";
+import CardExpandDemoSource from "../components/CardExpandDemo.tsx?raw";
+import { SingleSamplePage } from "../../../components/layout/index.js";
+
+const Page: React.FC = () => {
+  return (
+    <SingleSamplePage
+      title="Dialog / Card Expansion"
+      code={CardExpandDemoSource}
+      codeTitle="CardExpandDemo.tsx"
+      previewHeight={600}
+    >
+      <CardExpandDemo />
+    </SingleSamplePage>
+  );
+};
+
+export default Page;

package/src/demo/pages/Dialog/components/AlertDialogDemo.tsx

@@ -0,0 +1,124 @@
+/**
+ * @file Alert, Confirm, Prompt dialog demo
+ */
+import * as React from "react";
+import { useDialog } from "../../../../modules/dialog/useDialog";
+import { DemoButton } from "../../../components/ui/DemoButton";
+import styles from "./DialogDemos.module.css";
+
+export const AlertDialogDemo: React.FC = () => {
+  const { alert, confirm, prompt, Outlet } = useDialog();
+  const [lastResult, setLastResult] = React.useState<string>("");
+
+  const handleAlert = async () => {
+    await alert({
+      title: "Information",
+      message: "This is an alert dialog. It displays information and waits for acknowledgment.",
+      okLabel: "Got it",
+    });
+    setLastResult("alert: acknowledged");
+  };
+
+  const handleConfirm = async () => {
+    const result = await confirm({
+      title: "Confirm Action",
+      message: "Are you sure you want to proceed? This action cannot be undone.",
+      confirmLabel: "Proceed",
+      cancelLabel: "Cancel",
+    });
+    setLastResult(`confirm: ${result ? "confirmed" : "cancelled"}`);
+  };
+
+  const handlePrompt = async () => {
+    const result = await prompt({
+      title: "Enter Name",
+      message: "Please enter your name:",
+      placeholder: "John Doe",
+      defaultValue: "",
+    });
+    setLastResult(`prompt: ${result === null ? "cancelled" : `"${result}"`}`);
+  };
+
+  const handlePasswordPrompt = async () => {
+    const result = await prompt({
+      title: "Enter Password",
+      message: "Please enter your password:",
+      inputType: "password",
+      confirmLabel: "Submit",
+    });
+    setLastResult(`password prompt: ${result === null ? "cancelled" : "(password entered)"}`);
+  };
+
+  const handleSequence = async () => {
+    await alert("First, let me explain...");
+
+    const proceed = await confirm({
+      message: "Would you like to continue with the setup?",
+      confirmLabel: "Yes",
+      cancelLabel: "No",
+    });
+
+    if (!proceed) {
+      setLastResult("sequence: cancelled at step 2");
+      return;
+    }
+
+    const name = await prompt({
+      message: "What is your name?",
+      defaultValue: "Anonymous",
+    });
+
+    if (name === null) {
+      setLastResult("sequence: cancelled at step 3");
+      return;
+    }
+
+    await alert(`Hello, ${name}! Setup complete.`);
+    setLastResult(`sequence: completed with name "${name}"`);
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.section}>
+        <h3>Alert Dialog</h3>
+        <p>Simple information dialog that waits for acknowledgment.</p>
+        <DemoButton variant="primary" size="md" onClick={handleAlert}>
+          Show Alert
+        </DemoButton>
+      </div>
+
+      <div className={styles.section}>
+        <h3>Confirm Dialog</h3>
+        <p>Yes/No dialog that returns a boolean result.</p>
+        <DemoButton variant="primary" size="md" onClick={handleConfirm}>
+          Show Confirm
+        </DemoButton>
+      </div>
+
+      <div className={styles.section}>
+        <h3>Prompt Dialog</h3>
+        <p>Input dialog that returns the entered value or null if cancelled.</p>
+        <div className={styles.buttonGroup}>
+          <DemoButton variant="primary" size="md" onClick={handlePrompt}>
+            Show Prompt
+          </DemoButton>
+          <DemoButton variant="secondary" size="md" onClick={handlePasswordPrompt}>
+            Password Prompt
+          </DemoButton>
+        </div>
+      </div>
+
+      <div className={styles.section}>
+        <h3>Dialog Sequence</h3>
+        <p>Chain multiple dialogs together using async/await.</p>
+        <DemoButton variant="primary" size="md" onClick={handleSequence}>
+          Start Sequence
+        </DemoButton>
+      </div>
+
+      {lastResult ? <div className={styles.resultBox}>Last result: {lastResult}</div> : null}
+
+      <Outlet />
+    </div>
+  );
+};

package/src/demo/pages/Dialog/components/CardExpandDemo.module.css

@@ -0,0 +1,243 @@
+.container {
+  padding: 16px;
+}
+
+.header {
+  margin-bottom: 16px;
+}
+
+.sectionTitle {
+  margin: 0 0 4px;
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--color-text-primary, #1a1a1a);
+}
+
+.hint {
+  margin: 0;
+  font-size: 13px;
+  color: var(--color-text-secondary, #6b7280);
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 12px;
+}
+
+/* Card styles */
+.card {
+  display: flex;
+  flex-direction: column;
+  aspect-ratio: 1;
+  border: none;
+  border-radius: 12px;
+  padding: 0;
+  cursor: pointer;
+  overflow: hidden;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.card:hover {
+  transform: scale(1.02);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+}
+
+.card:active {
+  transform: scale(0.98);
+}
+
+.cardArt {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cardIcon {
+  width: 60%;
+  height: 60%;
+  opacity: 0.8;
+}
+
+.cardInfo {
+  padding: 10px;
+  background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(10px);
+}
+
+.cardTitle {
+  font-size: 13px;
+  font-weight: 600;
+  color: #fff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.cardArtist {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.7);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Backdrop */
+.backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  z-index: 1000;
+  /* Fade in animation separate from view transition */
+  animation: backdropFadeIn 0.35s ease-out;
+}
+
+@keyframes backdropFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Expanded view styles */
+.expanded {
+  width: 100vw;
+  max-width: 420px;
+  height: 85vh;
+  max-height: 700px;
+  border-radius: 24px 24px 0 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 12px 24px 32px;
+  box-sizing: border-box;
+  color: #fff;
+}
+
+.dragHandle {
+  width: 36px;
+  height: 5px;
+  background: rgba(255, 255, 255, 0.4);
+  border-radius: 3px;
+  margin-bottom: 24px;
+  flex-shrink: 0;
+}
+
+.expandedArt {
+  width: min(280px, 70vw);
+  aspect-ratio: 1;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
+  margin-bottom: 32px;
+}
+
+.expandedIcon {
+  width: 70%;
+  height: 70%;
+}
+
+.expandedInfo {
+  text-align: center;
+  margin-bottom: 32px;
+}
+
+.expandedTitle {
+  margin: 0 0 8px;
+  font-size: 22px;
+  font-weight: 700;
+}
+
+.expandedArtist {
+  margin: 0;
+  font-size: 16px;
+  opacity: 0.8;
+}
+
+.controls {
+  width: 100%;
+  max-width: 320px;
+  margin-bottom: 24px;
+}
+
+.progressBar {
+  height: 4px;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.progressFill {
+  height: 100%;
+  background: #fff;
+  border-radius: 2px;
+}
+
+.timeLabels {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 8px;
+  font-size: 12px;
+  opacity: 0.7;
+}
+
+.playbackControls {
+  display: flex;
+  align-items: center;
+  gap: 32px;
+  margin-bottom: 24px;
+}
+
+.controlButton {
+  background: none;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  padding: 8px;
+  opacity: 0.9;
+  transition: opacity 0.15s, transform 0.15s;
+}
+
+.controlButton:hover {
+  opacity: 1;
+}
+
+.controlButton:active {
+  transform: scale(0.9);
+}
+
+.playButton {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.2);
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.15s, transform 0.15s;
+}
+
+.playButton:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.playButton:active {
+  transform: scale(0.95);
+}
+
+.closeButton {
+  margin-top: auto;
+  color: rgba(255, 255, 255, 0.8);
+}