react-panel-layout 0.5.2 → 0.6.0

package/src/demo/components/DataPreview.module.css

@@ -0,0 +1,177 @@
+.container {
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  color: var(--rpl-demo-text-primary);
+  border-radius: var(--rpl-demo-radius-lg);
+  box-shadow: var(--rpl-demo-shadow-lg);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  user-select: none;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+}
+
+.header {
+  padding: var(--rpl-demo-space-sm) var(--rpl-demo-space-md);
+  background: rgba(255, 255, 255, 0.5);
+  border-bottom: 1px solid var(--rpl-demo-sidebar-border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: grab;
+}
+
+.headerContent {
+  display: flex;
+  align-items: center;
+  gap: var(--rpl-demo-space-sm);
+}
+
+.headerIcon {
+  font-size: 1.125rem;
+}
+
+.headerTitle {
+  margin: 0;
+  font-size: var(--rpl-demo-font-size-sm);
+  font-weight: 600;
+}
+
+.headerBadge {
+  font-size: var(--rpl-demo-font-size-xs);
+  color: var(--rpl-demo-text-secondary);
+  background: rgba(0, 0, 0, 0.05);
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.tabs {
+  display: flex;
+  gap: 4px;
+  padding: 4px 8px;
+  background: rgba(0, 0, 0, 0.02);
+  border-bottom: 1px solid var(--rpl-demo-sidebar-border);
+}
+
+.tab {
+  padding: 4px 12px;
+  background: transparent;
+  color: var(--rpl-demo-text-secondary);
+  border: none;
+  border-radius: 4px;
+  font-size: var(--rpl-demo-font-size-xs);
+  cursor: pointer;
+  transition: all 0.2s;
+  font-weight: 500;
+}
+
+.tab:hover {
+  background: rgba(0, 0, 0, 0.05);
+  color: var(--rpl-demo-text-primary);
+}
+
+.tabActive {
+  background: #fff !important;
+  color: var(--rpl-demo-text-primary) !important;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.content {
+  flex: 1;
+  padding: var(--rpl-demo-space-md);
+  overflow: auto;
+  font-size: var(--rpl-demo-font-size-sm);
+}
+
+.footer {
+  padding: var(--rpl-demo-space-sm);
+  background: rgba(255, 255, 255, 0.5);
+  border-top: 1px solid var(--rpl-demo-sidebar-border);
+  font-size: var(--rpl-demo-font-size-xs);
+  color: var(--rpl-demo-text-tertiary);
+  text-align: center;
+}
+
+.propertyList {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rpl-demo-space-md);
+}
+
+.propertyLabel {
+  color: var(--rpl-demo-text-secondary);
+  font-size: var(--rpl-demo-font-size-xs);
+  margin-bottom: 2px;
+  font-weight: 500;
+}
+
+.propertyValue {
+  font-family: monospace;
+  color: var(--rpl-demo-text-primary);
+  background: rgba(0, 0, 0, 0.03);
+  padding: 2px 6px;
+  border-radius: 4px;
+  display: inline-block;
+}
+
+.propertyValueHighlight {
+  font-family: monospace;
+  color: #0071e3;
+  background: rgba(0, 113, 227, 0.1);
+  padding: 2px 6px;
+  border-radius: 4px;
+  display: inline-block;
+}
+
+.dataList {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rpl-demo-space-sm);
+}
+
+.codeBlock {
+  padding: var(--rpl-demo-space-sm);
+  background: #f5f5f7;
+  border-radius: var(--rpl-demo-radius-sm);
+  font-family: monospace;
+  font-size: var(--rpl-demo-font-size-xs);
+  border: 1px solid var(--rpl-demo-sidebar-border);
+}
+
+.codeComment {
+  color: #6a9955;
+}
+
+.codeKeyword {
+  color: #d73a49;
+}
+
+.codeVariable {
+  color: #005cc5;
+}
+
+.codeOperator {
+  color: #24292e;
+}
+
+.codeString {
+  color: #032f62;
+}
+
+.codeNumber {
+  color: #005cc5;
+}
+
+.codeIndent {
+  padding-left: 1rem;
+}
+
+.hint {
+  color: var(--rpl-demo-text-tertiary);
+  font-size: var(--rpl-demo-font-size-xs);
+  margin-top: var(--rpl-demo-space-sm);
+  text-align: center;
+}

package/src/demo/components/DataPreview.tsx

@@ -0,0 +1,115 @@
+/**
+ * @file Data Preview Component
+ * A draggable preview panel for demonstrating floating UI elements
+ */
+import * as React from "react";
+import { useLayerDragHandle } from "../../modules/grid/useLayerDragHandle";
+import styles from "./DataPreview.module.css";
+
+export type DataPreviewProps = {
+  width?: number;
+  height?: number;
+};
+
+const renderPropertiesTab = (width: number, height: number): React.ReactNode => {
+  return (
+    <div className={styles.propertyList}>
+      <div>
+        <div className={styles.propertyLabel}>ID</div>
+        <div className={styles.propertyValue}>data-preview-001</div>
+      </div>
+      <div>
+        <div className={styles.propertyLabel}>Type</div>
+        <div>Floating Panel</div>
+      </div>
+      <div>
+        <div className={styles.propertyLabel}>Position Mode</div>
+        <div className={styles.propertyValueHighlight}>absolute</div>
+      </div>
+      <div>
+        <div className={styles.propertyLabel}>Dimensions</div>
+        <div className={styles.propertyValue}>
+          {width}px × {height}px
+        </div>
+      </div>
+      <div>
+        <div className={styles.propertyLabel}>Draggable</div>
+        <div className={styles.propertyValueHighlight}>✓ Yes</div>
+      </div>
+      <div>
+        <div className={styles.propertyLabel}>Z-Index</div>
+        <div className={styles.propertyValue}>20</div>
+      </div>
+    </div>
+  );
+};
+
+const renderDataTab = (): React.ReactNode => {
+  return (
+    <div className={styles.dataList}>
+      <div className={styles.codeBlock}>
+        <div className={styles.codeComment}>// Sample data structure</div>
+        <div>
+          <span className={styles.codeKeyword}>const</span> <span className={styles.codeVariable}>config</span>{" "}
+          <span className={styles.codeOperator}>=</span> <span className={styles.codeOperator}>{"{"}</span>
+        </div>
+        <div className={styles.codeIndent}>
+          <span className={styles.codeVariable}>id</span>: <span className={styles.codeString}>"preview-001"</span>,
+        </div>
+        <div className={styles.codeIndent}>
+          <span className={styles.codeVariable}>draggable</span>: <span className={styles.codeKeyword}>true</span>,
+        </div>
+        <div className={styles.codeIndent}>
+          <span className={styles.codeVariable}>zIndex</span>: <span className={styles.codeNumber}>20</span>
+        </div>
+        <div>
+          <span className={styles.codeOperator}>{"}"}</span>;
+        </div>
+      </div>
+      <div className={styles.hint}>💡 Try dragging this panel around the canvas</div>
+    </div>
+  );
+};
+
+export const DataPreview: React.FC<DataPreviewProps> = ({ width = 300, height = 400 }) => {
+  const [selectedTab, setSelectedTab] = React.useState<"properties" | "data">("properties");
+  const dragHandleProps = useLayerDragHandle();
+
+  const renderContent = (): React.ReactNode => {
+    if (selectedTab === "properties") {
+      return renderPropertiesTab(width, height);
+    }
+    return renderDataTab();
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.header} {...dragHandleProps}>
+        <div className={styles.headerContent}>
+          <div className={styles.headerIcon}>📊</div>
+          <h4 className={styles.headerTitle}>Data Preview</h4>
+        </div>
+        <div className={styles.headerBadge}>Draggable</div>
+      </div>
+
+      <div className={styles.tabs}>
+        <button
+          className={`${styles.tab} ${selectedTab === "properties" ? styles.tabActive : ""}`}
+          onClick={() => setSelectedTab("properties")}
+        >
+          Properties
+        </button>
+        <button
+          className={`${styles.tab} ${selectedTab === "data" ? styles.tabActive : ""}`}
+          onClick={() => setSelectedTab("data")}
+        >
+          Data
+        </button>
+      </div>
+
+      <div className={styles.content}>{renderContent()}</div>
+
+      <div className={styles.footer}>Drag from header to reposition</div>
+    </div>
+  );
+};

package/src/demo/components/Story.module.css

@@ -0,0 +1,68 @@
+.section {
+  margin-bottom: 3rem;
+}
+
+.sectionTitle {
+  margin-bottom: 1rem;
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+.story {
+  margin-bottom: 2rem;
+}
+
+.storyHeader {
+  margin-bottom: 1rem;
+}
+
+.storyTitle {
+  margin-bottom: 0.5rem;
+  font-size: 1.125rem;
+  font-weight: 500;
+}
+
+.storyDescription {
+  margin-bottom: 1rem;
+  color: #666;
+  font-size: 0.875rem;
+}
+
+.storyPreview {
+  padding: 2rem;
+  background: #f5f5f5;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+}
+
+.storyActions {
+  margin-top: 1rem;
+  display: flex;
+  gap: 0.5rem;
+}
+
+.actionButton {
+  padding: 0.5rem 1rem;
+  background: #2196f3;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.875rem;
+  transition: background 0.2s;
+}
+
+.actionButton:hover {
+  background: #1976d2;
+}
+
+.actionButtonSecondary {
+  background: #757575;
+}
+
+.actionButtonSecondary:hover {
+  background: #616161;
+}

package/src/demo/components/Story.tsx

@@ -0,0 +1,54 @@
+/**
+ * @file Common Story components for preview pages
+ */
+import * as React from "react";
+import styles from "./Story.module.css";
+
+export type SectionProps = {
+  title: string;
+  children: React.ReactNode;
+};
+
+export const Section: React.FC<SectionProps> = ({ title, children }) => (
+  <div className={styles.section}>
+    <h2 className={styles.sectionTitle}>{title}</h2>
+    {children}
+  </div>
+);
+
+export type StoryProps = {
+  title: string;
+  description?: string;
+  children: React.ReactNode;
+  actions?: React.ReactNode;
+};
+
+export const Story: React.FC<StoryProps> = ({ title, description, children, actions }) => (
+  <div className={styles.story}>
+    <div className={styles.storyHeader}>
+      <h3 className={styles.storyTitle}>{title}</h3>
+      {description ? <p className={styles.storyDescription}>{description}</p> : null}
+    </div>
+    <div className={styles.storyPreview}>{children}</div>
+    {actions ? <div className={styles.storyActions}>{actions}</div> : null}
+  </div>
+);
+
+export type StoryActionButtonProps = {
+  onClick?: () => void;
+  children: React.ReactNode;
+  variant?: "primary" | "secondary";
+};
+
+export const StoryActionButton: React.FC<StoryActionButtonProps> = ({
+  onClick,
+  children,
+  variant = "primary",
+}) => (
+  <button
+    onClick={onClick}
+    className={variant === "primary" ? styles.actionButton : `${styles.actionButton} ${styles.actionButtonSecondary}`}
+  >
+    {children}
+  </button>
+);

package/src/demo/components/layout/CodePanel.module.css

@@ -0,0 +1,183 @@
+/**
+ * CodePanel styles - Modern IDE-like appearance
+ */
+
+.container {
+  display: flex;
+  flex-direction: column;
+  background: #1e1e2e;
+  border-radius: var(--rpl-demo-radius-md);
+  overflow: hidden;
+  box-shadow: var(--rpl-demo-shadow-md);
+  height: 100%;
+  min-height: 0;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  background: #181825;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  flex-shrink: 0;
+}
+
+.headerLeft {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.codeIcon {
+  color: rgba(255, 255, 255, 0.4);
+  flex-shrink: 0;
+}
+
+.title {
+  font-size: var(--rpl-demo-font-size-xs);
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.5);
+  font-family: var(--rpl-demo-font-family);
+  letter-spacing: 0.02em;
+}
+
+.copyButton {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 10px;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 6px;
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  font-family: var(--rpl-demo-font-family);
+}
+
+.copyButton:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.85);
+}
+
+.copyButton.copied {
+  background: rgba(40, 200, 64, 0.15);
+  border-color: rgba(40, 200, 64, 0.3);
+  color: #28c840;
+}
+
+.content {
+  flex: 1;
+  overflow: auto;
+  min-height: 0;
+}
+
+.pre {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  font-family: "JetBrains Mono", "Fira Code", "Monaco", "Menlo", "Ubuntu Mono", monospace;
+  font-size: 13px;
+  line-height: 1.6;
+  tab-size: 2;
+}
+
+.lineNumbers {
+  position: sticky;
+  left: 0;
+  padding: 14px 0;
+  padding-right: 12px;
+  padding-left: 14px;
+  background: #1e1e2e;
+  border-right: 1px solid rgba(255, 255, 255, 0.06);
+  user-select: none;
+  text-align: right;
+  flex-shrink: 0;
+}
+
+.lineNumber {
+  color: rgba(255, 255, 255, 0.2);
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.code {
+  flex: 1;
+  padding: 14px 16px;
+  color: #cdd6f4;
+  white-space: pre;
+  overflow-x: auto;
+}
+
+.shikiWrapper {
+  flex: 1;
+  overflow-x: auto;
+}
+
+.shikiWrapper :global(pre.shiki) {
+  margin: 0;
+  padding: 14px 16px;
+  background: transparent !important;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.shikiWrapper :global(pre.shiki code) {
+  display: block;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+/* Syntax highlighting colors (Catppuccin Mocha inspired) */
+.code :global(.keyword) {
+  color: #cba6f7;
+}
+
+.code :global(.string) {
+  color: #a6e3a1;
+}
+
+.code :global(.number) {
+  color: #fab387;
+}
+
+.code :global(.comment) {
+  color: #6c7086;
+  font-style: italic;
+}
+
+.code :global(.function) {
+  color: #89b4fa;
+}
+
+.code :global(.type) {
+  color: #f9e2af;
+}
+
+/* Scrollbar styling */
+.content::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.content::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.12);
+  border-radius: 4px;
+}
+
+.content::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.content::-webkit-scrollbar-corner {
+  background: transparent;
+}