@baishuyun/ai-design 2.0.37 → 2.1.0-alpha.0

package/src/stories/OfficeContainer.stories.tsx

@@ -1,287 +1,287 @@
-import { useState } from "react";
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { OfficeContainer, type FullScreenPart } from "../components/office-container";
-
-const meta: Meta<typeof OfficeContainer> = {
-  title: "AI Office/OfficeContainer",
-  component: OfficeContainer,
-  tags: ["autodocs"],
-  argTypes: {
-    onResize: { action: "resized" },
-  },
-  parameters: {
-    layout: "fullscreen",
-  },
-  decorators: [
-    (Story) => (
-      <div style={{ height: "100vh", width: "100vw", overflow: "hidden" }}>
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const PlaceholderHeader = ({
-  children,
-  // bg = "bg-blue-500",
-}: {
-  children: React.ReactNode;
-  bg?: string;
-}) => (
-  <div className={`h-full w-full flex items-center px-4`}>
-    <span className="text-sm font-semibold">{children}</span>
-  </div>
-);
-
-const PlaceholderContent = ({
-  children,
-  bg = "bg-blue-50",
-}: {
-  children: React.ReactNode;
-  bg?: string;
-}) => (
-  <div className={`h-500 rounded-lg border-2 border-dashed border-gray-300 p-4 text-gray-500 ${bg} m-4`}>
-    {children}
-  </div>
-);
-
-export const Base: Story = {
-  args: {
-    headerHeight: 64,
-    leftColHeaderElement: <PlaceholderHeader>Left Header</PlaceholderHeader>,
-    leftColContentElement: (
-      <PlaceholderContent>Left Content (scrollable)</PlaceholderContent>
-    ),
-    rightColHeaderElement: (
-      <PlaceholderHeader bg="bg-emerald-500">Right Header</PlaceholderHeader>
-    ),
-    rightColContentElement: (
-      <PlaceholderContent bg="bg-emerald-50">
-        Right Content (scrollable)
-      </PlaceholderContent>
-    ),
-  },
-};
-
-export const CustomHeaderHeight: Story = {
-  args: {
-    headerHeight: 96,
-    leftColHeaderElement: (
-      <PlaceholderHeader>Left Header (96px)</PlaceholderHeader>
-    ),
-    leftColContentElement: <PlaceholderContent>Left Content</PlaceholderContent>,
-    rightColHeaderElement: (
-      <PlaceholderHeader bg="bg-emerald-500">
-        Right Header (96px)
-      </PlaceholderHeader>
-    ),
-    rightColContentElement: (
-      <PlaceholderContent bg="bg-emerald-50">Right Content</PlaceholderContent>
-    ),
-  },
-};
-
-export const RightColResizable: Story = {
-  args: {
-    rightColWidthRange: [400, 700],
-    leftColHeaderElement: (
-      <PlaceholderHeader>Left Header (flexible)</PlaceholderHeader>
-    ),
-    leftColContentElement: (
-      <PlaceholderContent>
-        Left Content — this column now flex-fills remaining space
-      </PlaceholderContent>
-    ),
-    rightColHeaderElement: (
-      <PlaceholderHeader bg="bg-emerald-500">
-        Right Header (resizable)
-      </PlaceholderHeader>
-    ),
-    rightColContentElement: (
-      <PlaceholderContent bg="bg-emerald-50">
-        Right Content — drag the resizer to resize this column (400–700px)
-      </PlaceholderContent>
-    ),
-  },
-};
-
-export const CustomColumnStyles: Story = {
-  args: {
-    leftColCls: "bg-amber-50",
-    rightColCls: "bg-sky-50",
-    leftColHeaderElement: <PlaceholderHeader>Left (amber-50 bg)</PlaceholderHeader>,
-    leftColContentElement: (
-      <PlaceholderContent bg="bg-amber-100">
-        Custom left column background via leftColCls
-      </PlaceholderContent>
-    ),
-    rightColHeaderElement: (
-      <PlaceholderHeader bg="bg-sky-500">Right (sky-50 bg)</PlaceholderHeader>
-    ),
-    rightColContentElement: (
-      <PlaceholderContent bg="bg-sky-100">
-        Custom right column background via rightColCls
-      </PlaceholderContent>
-    ),
-  },
-};
-
-export const FullscreenLeftCol: Story = {
-  args: {
-    fullscreenPart: "leftCol",
-    leftColHeaderElement: <PlaceholderHeader>Left Header (Fullscreen)</PlaceholderHeader>,
-    leftColContentElement: (
-      <PlaceholderContent>Left Content — now filling the entire viewport</PlaceholderContent>
-    ),
-    rightColHeaderElement: (
-      <PlaceholderHeader bg="bg-emerald-500">Right Header (hidden)</PlaceholderHeader>
-    ),
-    rightColContentElement: (
-      <PlaceholderContent bg="bg-emerald-50">
-        Right Content — hidden when left is fullscreen
-      </PlaceholderContent>
-    ),
-  },
-};
-
-export const FullscreenRightCol: Story = {
-  args: {
-    fullscreenPart: "rightCol",
-    leftColHeaderElement: <PlaceholderHeader>Left Header (hidden)</PlaceholderHeader>,
-    leftColContentElement: (
-      <PlaceholderContent>
-        Left Content — hidden when right is fullscreen
-      </PlaceholderContent>
-    ),
-    rightColHeaderElement: (
-      <PlaceholderHeader bg="bg-emerald-500">Right Header (Fullscreen)</PlaceholderHeader>
-    ),
-    rightColContentElement: (
-      <PlaceholderContent bg="bg-emerald-50">
-        Right Content — now filling the entire viewport
-      </PlaceholderContent>
-    ),
-  },
-};
-
-const WidthReadout = ({ leftW, rightW }: { leftW: number; rightW: number }) => (
-  <div
-    style={{
-      position: "absolute",
-      bottom: 12,
-      left: "50%",
-      transform: "translateX(-50%)",
-      zIndex: 20,
-      background: "rgba(0,0,0,0.75)",
-      color: "#fff",
-      padding: "6px 16px",
-      borderRadius: 6,
-      fontSize: 13,
-      fontFamily: "monospace",
-      display: "flex",
-      gap: 16,
-    }}
-  >
-    <span>Left: {leftW}px</span>
-    <span>Right: {rightW}px</span>
-  </div>
-);
-
-export const OnResize: Story = {
-  render: () => {
-    const [widths, setWidths] = useState({ left: 0, right: 0 });
-
-    return (
-      <div style={{ height: "100vh", width: "100vw", position: "relative" }}>
-        <OfficeContainer
-          rightColWidthRange={[400, 700]}
-          leftColHeaderElement={<PlaceholderHeader>Left Header (flexible)</PlaceholderHeader>}
-          leftColContentElement={
-            <PlaceholderContent>
-              Drag the resizer — the width readout at the bottom updates in real time via onResize.
-            </PlaceholderContent>
-          }
-          rightColHeaderElement={
-            <PlaceholderHeader bg="bg-emerald-500">Right Header (resizable)</PlaceholderHeader>
-          }
-          rightColContentElement={
-            <PlaceholderContent bg="bg-emerald-50">
-              Right column: 400–700px
-            </PlaceholderContent>
-          }
-          onResize={(leftW, rightW) => setWidths({ left: leftW, right: rightW })}
-        />
-        <WidthReadout leftW={widths.left} rightW={widths.right} />
-      </div>
-    );
-  },
-};
-
-export const ToggleFullscreen: Story = {
-  render: () => {
-    const [part, setPart] = useState<FullScreenPart>("none");
-
-    const labels: Record<FullScreenPart, string> = {
-      none: "Normal",
-      leftCol: "Left Fullscreen",
-      rightCol: "Right Fullscreen",
-    };
-
-    return (
-      <div style={{ height: "100vh", width: "100vw", display: "flex", flexDirection: "column" }}>
-        <div
-          style={{
-            position: "absolute",
-            top: 12,
-            left: "50%",
-            transform: "translateX(-50%)",
-            zIndex: 20,
-            display: "flex",
-            gap: 8,
-          }}
-        >
-          {(["none", "leftCol", "rightCol"] as FullScreenPart[]).map((p) => (
-            <button
-              key={p}
-              onClick={() => setPart(p)}
-              style={{
-                padding: "6px 16px",
-                borderRadius: 6,
-                border: part === p ? "2px solid #0265fc" : "1px solid #d0d0d0",
-                background: part === p ? "#e8f0fe" : "#fff",
-                cursor: "pointer",
-                fontSize: 13,
-                fontWeight: part === p ? 600 : 400,
-              }}
-            >
-              {labels[p]}
-            </button>
-          ))}
-        </div>
-        <div style={{ flex: 1 }}>
-          <OfficeContainer
-            fullscreenPart={part}
-            leftColHeaderElement={<PlaceholderHeader>Left Header</PlaceholderHeader>}
-            leftColContentElement={
-              <PlaceholderContent>
-                Left Content — watch the smooth transition when toggling fullscreen
-              </PlaceholderContent>
-            }
-            rightColHeaderElement={
-              <PlaceholderHeader bg="bg-emerald-500">Right Header</PlaceholderHeader>
-            }
-            rightColContentElement={
-              <PlaceholderContent bg="bg-emerald-50">
-                Right Content — watch the smooth transition when toggling fullscreen
-              </PlaceholderContent>
-            }
-          />
-        </div>
-      </div>
-    );
-  },
-};
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { OfficeContainer, type FullScreenPart } from "../components/office-container";
+
+const meta: Meta<typeof OfficeContainer> = {
+  title: "AI Office/OfficeContainer",
+  component: OfficeContainer,
+  tags: ["autodocs"],
+  argTypes: {
+    onResize: { action: "resized" },
+  },
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ height: "100vh", width: "100vw", overflow: "hidden" }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const PlaceholderHeader = ({
+  children,
+  // bg = "bg-blue-500",
+}: {
+  children: React.ReactNode;
+  bg?: string;
+}) => (
+  <div className={`h-full w-full flex items-center px-4`}>
+    <span className="text-sm font-semibold">{children}</span>
+  </div>
+);
+
+const PlaceholderContent = ({
+  children,
+  bg = "bg-blue-50",
+}: {
+  children: React.ReactNode;
+  bg?: string;
+}) => (
+  <div className={`h-500 rounded-lg border-2 border-dashed border-gray-300 p-4 text-gray-500 ${bg} m-4`}>
+    {children}
+  </div>
+);
+
+export const Base: Story = {
+  args: {
+    headerHeight: 64,
+    leftColHeaderElement: <PlaceholderHeader>Left Header</PlaceholderHeader>,
+    leftColContentElement: (
+      <PlaceholderContent>Left Content (scrollable)</PlaceholderContent>
+    ),
+    rightColHeaderElement: (
+      <PlaceholderHeader bg="bg-emerald-500">Right Header</PlaceholderHeader>
+    ),
+    rightColContentElement: (
+      <PlaceholderContent bg="bg-emerald-50">
+        Right Content (scrollable)
+      </PlaceholderContent>
+    ),
+  },
+};
+
+export const CustomHeaderHeight: Story = {
+  args: {
+    headerHeight: 96,
+    leftColHeaderElement: (
+      <PlaceholderHeader>Left Header (96px)</PlaceholderHeader>
+    ),
+    leftColContentElement: <PlaceholderContent>Left Content</PlaceholderContent>,
+    rightColHeaderElement: (
+      <PlaceholderHeader bg="bg-emerald-500">
+        Right Header (96px)
+      </PlaceholderHeader>
+    ),
+    rightColContentElement: (
+      <PlaceholderContent bg="bg-emerald-50">Right Content</PlaceholderContent>
+    ),
+  },
+};
+
+export const RightColResizable: Story = {
+  args: {
+    rightColWidthRange: [400, 700],
+    leftColHeaderElement: (
+      <PlaceholderHeader>Left Header (flexible)</PlaceholderHeader>
+    ),
+    leftColContentElement: (
+      <PlaceholderContent>
+        Left Content — this column now flex-fills remaining space
+      </PlaceholderContent>
+    ),
+    rightColHeaderElement: (
+      <PlaceholderHeader bg="bg-emerald-500">
+        Right Header (resizable)
+      </PlaceholderHeader>
+    ),
+    rightColContentElement: (
+      <PlaceholderContent bg="bg-emerald-50">
+        Right Content — drag the resizer to resize this column (400–700px)
+      </PlaceholderContent>
+    ),
+  },
+};
+
+export const CustomColumnStyles: Story = {
+  args: {
+    leftColCls: "bg-amber-50",
+    rightColCls: "bg-sky-50",
+    leftColHeaderElement: <PlaceholderHeader>Left (amber-50 bg)</PlaceholderHeader>,
+    leftColContentElement: (
+      <PlaceholderContent bg="bg-amber-100">
+        Custom left column background via leftColCls
+      </PlaceholderContent>
+    ),
+    rightColHeaderElement: (
+      <PlaceholderHeader bg="bg-sky-500">Right (sky-50 bg)</PlaceholderHeader>
+    ),
+    rightColContentElement: (
+      <PlaceholderContent bg="bg-sky-100">
+        Custom right column background via rightColCls
+      </PlaceholderContent>
+    ),
+  },
+};
+
+export const FullscreenLeftCol: Story = {
+  args: {
+    fullscreenPart: "leftCol",
+    leftColHeaderElement: <PlaceholderHeader>Left Header (Fullscreen)</PlaceholderHeader>,
+    leftColContentElement: (
+      <PlaceholderContent>Left Content — now filling the entire viewport</PlaceholderContent>
+    ),
+    rightColHeaderElement: (
+      <PlaceholderHeader bg="bg-emerald-500">Right Header (hidden)</PlaceholderHeader>
+    ),
+    rightColContentElement: (
+      <PlaceholderContent bg="bg-emerald-50">
+        Right Content — hidden when left is fullscreen
+      </PlaceholderContent>
+    ),
+  },
+};
+
+export const FullscreenRightCol: Story = {
+  args: {
+    fullscreenPart: "rightCol",
+    leftColHeaderElement: <PlaceholderHeader>Left Header (hidden)</PlaceholderHeader>,
+    leftColContentElement: (
+      <PlaceholderContent>
+        Left Content — hidden when right is fullscreen
+      </PlaceholderContent>
+    ),
+    rightColHeaderElement: (
+      <PlaceholderHeader bg="bg-emerald-500">Right Header (Fullscreen)</PlaceholderHeader>
+    ),
+    rightColContentElement: (
+      <PlaceholderContent bg="bg-emerald-50">
+        Right Content — now filling the entire viewport
+      </PlaceholderContent>
+    ),
+  },
+};
+
+const WidthReadout = ({ leftW, rightW }: { leftW: number; rightW: number }) => (
+  <div
+    style={{
+      position: "absolute",
+      bottom: 12,
+      left: "50%",
+      transform: "translateX(-50%)",
+      zIndex: 20,
+      background: "rgba(0,0,0,0.75)",
+      color: "#fff",
+      padding: "6px 16px",
+      borderRadius: 6,
+      fontSize: 13,
+      fontFamily: "monospace",
+      display: "flex",
+      gap: 16,
+    }}
+  >
+    <span>Left: {leftW}px</span>
+    <span>Right: {rightW}px</span>
+  </div>
+);
+
+export const OnResize: Story = {
+  render: () => {
+    const [widths, setWidths] = useState({ left: 0, right: 0 });
+
+    return (
+      <div style={{ height: "100vh", width: "100vw", position: "relative" }}>
+        <OfficeContainer
+          rightColWidthRange={[400, 700]}
+          leftColHeaderElement={<PlaceholderHeader>Left Header (flexible)</PlaceholderHeader>}
+          leftColContentElement={
+            <PlaceholderContent>
+              Drag the resizer — the width readout at the bottom updates in real time via onResize.
+            </PlaceholderContent>
+          }
+          rightColHeaderElement={
+            <PlaceholderHeader bg="bg-emerald-500">Right Header (resizable)</PlaceholderHeader>
+          }
+          rightColContentElement={
+            <PlaceholderContent bg="bg-emerald-50">
+              Right column: 400–700px
+            </PlaceholderContent>
+          }
+          onResize={(leftW, rightW) => setWidths({ left: leftW, right: rightW })}
+        />
+        <WidthReadout leftW={widths.left} rightW={widths.right} />
+      </div>
+    );
+  },
+};
+
+export const ToggleFullscreen: Story = {
+  render: () => {
+    const [part, setPart] = useState<FullScreenPart>("none");
+
+    const labels: Record<FullScreenPart, string> = {
+      none: "Normal",
+      leftCol: "Left Fullscreen",
+      rightCol: "Right Fullscreen",
+    };
+
+    return (
+      <div style={{ height: "100vh", width: "100vw", display: "flex", flexDirection: "column" }}>
+        <div
+          style={{
+            position: "absolute",
+            top: 12,
+            left: "50%",
+            transform: "translateX(-50%)",
+            zIndex: 20,
+            display: "flex",
+            gap: 8,
+          }}
+        >
+          {(["none", "leftCol", "rightCol"] as FullScreenPart[]).map((p) => (
+            <button
+              key={p}
+              onClick={() => setPart(p)}
+              style={{
+                padding: "6px 16px",
+                borderRadius: 6,
+                border: part === p ? "2px solid #0265fc" : "1px solid #d0d0d0",
+                background: part === p ? "#e8f0fe" : "#fff",
+                cursor: "pointer",
+                fontSize: 13,
+                fontWeight: part === p ? 600 : 400,
+              }}
+            >
+              {labels[p]}
+            </button>
+          ))}
+        </div>
+        <div style={{ flex: 1 }}>
+          <OfficeContainer
+            fullscreenPart={part}
+            leftColHeaderElement={<PlaceholderHeader>Left Header</PlaceholderHeader>}
+            leftColContentElement={
+              <PlaceholderContent>
+                Left Content — watch the smooth transition when toggling fullscreen
+              </PlaceholderContent>
+            }
+            rightColHeaderElement={
+              <PlaceholderHeader bg="bg-emerald-500">Right Header</PlaceholderHeader>
+            }
+            rightColContentElement={
+              <PlaceholderContent bg="bg-emerald-50">
+                Right Content — watch the smooth transition when toggling fullscreen
+              </PlaceholderContent>
+            }
+          />
+        </div>
+      </div>
+    );
+  },
+};