react-panel-layout 0.5.2 → 0.6.1

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);
+}

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

@@ -0,0 +1,204 @@
+/**
+ * @file CardExpandDemo - Apple Music style card expansion using viewTransition
+ */
+import * as React from "react";
+import { useSharedElementTransition } from "../../../../hooks/useSharedElementTransition.js";
+import { DemoButton } from "../../../components/ui/DemoButton.js";
+import styles from "./CardExpandDemo.module.css";
+
+type Album = {
+  id: string;
+  title: string;
+  artist: string;
+  color: string;
+};
+
+const albums: Album[] = [
+  { id: "1", title: "Midnight Dreams", artist: "Luna", color: "#1a1a2e" },
+  { id: "2", title: "Ocean Waves", artist: "The Currents", color: "#16213e" },
+  { id: "3", title: "Summer Nights", artist: "Sunset", color: "#e94560" },
+  { id: "4", title: "City Lights", artist: "Neon", color: "#0f3460" },
+  { id: "5", title: "Forest Walk", artist: "Nature", color: "#2d4a22" },
+  { id: "6", title: "Golden Hour", artist: "Horizon", color: "#c9a227" },
+];
+
+type AlbumCardProps = {
+  album: Album;
+  sourceProps: { style: React.CSSProperties };
+  onClick: () => void;
+};
+
+const AlbumCard: React.FC<AlbumCardProps> = ({ album, sourceProps, onClick }) => {
+  return (
+    <button
+      type="button"
+      className={styles.card}
+      style={{ backgroundColor: album.color, ...sourceProps.style }}
+      onClick={onClick}
+    >
+      <div className={styles.cardArt}>
+        <svg viewBox="0 0 100 100" className={styles.cardIcon}>
+          <circle cx="50" cy="50" r="30" fill="rgba(255,255,255,0.2)" />
+          <circle cx="50" cy="50" r="10" fill="rgba(255,255,255,0.4)" />
+        </svg>
+      </div>
+      <div className={styles.cardInfo}>
+        <div className={styles.cardTitle}>{album.title}</div>
+        <div className={styles.cardArtist}>{album.artist}</div>
+      </div>
+    </button>
+  );
+};
+
+type ExpandedViewProps = {
+  album: Album;
+  targetProps: { style: React.CSSProperties };
+  swipeContainerProps: React.HTMLAttributes<HTMLElement> & { style: React.CSSProperties };
+  onClose: () => void;
+};
+
+const ExpandedView: React.FC<ExpandedViewProps> = ({ album, targetProps, swipeContainerProps, onClose }) => {
+  const handleBackdropClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  // Extract event handlers from swipeContainerProps (exclude style to merge manually)
+  const { style: swipeStyle, ...swipeEventHandlers } = swipeContainerProps;
+
+  // Merge all styles properly
+  const mergedStyle: React.CSSProperties = {
+    backgroundColor: album.color,
+    ...swipeStyle,
+    ...targetProps.style,
+  };
+
+  return (
+    <div className={styles.backdrop} onClick={handleBackdropClick}>
+      <div
+        className={styles.expanded}
+        style={mergedStyle}
+        {...swipeEventHandlers}
+      >
+        <div className={styles.dragHandle} />
+
+        <div className={styles.expandedArt}>
+          <svg viewBox="0 0 100 100" className={styles.expandedIcon}>
+            <circle cx="50" cy="50" r="40" fill="rgba(255,255,255,0.15)" />
+            <circle cx="50" cy="50" r="15" fill="rgba(255,255,255,0.3)" />
+          </svg>
+        </div>
+
+        <div className={styles.expandedInfo}>
+          <h2 className={styles.expandedTitle}>{album.title}</h2>
+          <p className={styles.expandedArtist}>{album.artist}</p>
+        </div>
+
+        <div className={styles.controls}>
+          <div className={styles.progressBar}>
+            <div className={styles.progressFill} style={{ width: "35%" }} />
+          </div>
+          <div className={styles.timeLabels}>
+            <span>1:24</span>
+            <span>-2:36</span>
+          </div>
+        </div>
+
+        <div className={styles.playbackControls}>
+          <button type="button" className={styles.controlButton}>
+            <svg viewBox="0 0 24 24" width="32" height="32">
+              <path fill="currentColor" d="M6 6h2v12H6zm3.5 6l8.5 6V6z" />
+            </svg>
+          </button>
+          <button type="button" className={styles.playButton}>
+            <svg viewBox="0 0 24 24" width="40" height="40">
+              <path fill="currentColor" d="M6 4h4v16H6zm8 0h4v16h-4z" />
+            </svg>
+          </button>
+          <button type="button" className={styles.controlButton}>
+            <svg viewBox="0 0 24 24" width="32" height="32">
+              <path fill="currentColor" d="M6 18l8.5-6L6 6v12zm10-12v12h2V6h-2z" />
+            </svg>
+          </button>
+        </div>
+
+        <DemoButton variant="ghost" onClick={onClose} className={styles.closeButton}>
+          Close
+        </DemoButton>
+      </div>
+    </div>
+  );
+};
+
+// Global CSS for view transitions (CSS Modules don't support global pseudo-elements)
+const viewTransitionStyles = `
+  /* Disable default root crossfade during view transition */
+  ::view-transition-old(root),
+  ::view-transition-new(root) {
+    animation: none;
+  }
+
+  /* Album card/expanded morph animation */
+  ::view-transition-group(*) {
+    animation-duration: 0.35s;
+    animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
+    /* Ensure morph is above backdrop */
+    z-index: 2000;
+  }
+
+  /* Show destination state immediately, hide source */
+  ::view-transition-old(*) {
+    animation: none;
+    opacity: 0;
+  }
+  ::view-transition-new(*) {
+    animation: none;
+    opacity: 1;
+  }
+`;
+
+/**
+ * Demo component for Apple Music style card expansion using viewTransition
+ */
+export const CardExpandDemo: React.FC = () => {
+  const { expandedItem, expand, collapse, getSourceProps, getTargetProps, getSwipeContainerProps, isSupported } =
+    useSharedElementTransition<Album>({
+      // Use single transition name for the whole card/expanded view
+      getTransitionName: (album) => `album-${album.id}`,
+      getKey: (album) => album.id,
+    });
+
+  return (
+    <div className={styles.container}>
+      <style>{viewTransitionStyles}</style>
+      <div className={styles.header}>
+        <h3 className={styles.sectionTitle}>Recently Played</h3>
+        <p className={styles.hint}>
+          Tap a card to expand
+          {isSupported ? " (View Transitions API)" : " (fallback mode)"}
+        </p>
+      </div>
+
+      <div className={styles.grid}>
+        {albums.map((album) => (
+          <AlbumCard
+            key={album.id}
+            album={album}
+            sourceProps={getSourceProps(album)}
+            onClick={() => expand(album)}
+          />
+        ))}
+      </div>
+
+      {expandedItem && (
+        <ExpandedView
+          album={expandedItem}
+          targetProps={getTargetProps()}
+          swipeContainerProps={getSwipeContainerProps()}
+          onClose={collapse}
+        />
+      )}
+    </div>
+  );
+};