@orbit-work/ui 0.1.1 → 0.1.2

package/src/components/Layout/SidebarShell/SidebarShell.stories.tsx

@@ -1,676 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { useState } from "react"
-import { Help as HelpCircle, Folder as Home, Logout, Settings as User } from "../../composite/Icons"
-import { WindowBand } from "../../composite/TitleBar"
-import { Button } from "../../primitives/Button"
-import { AppLayout } from "../AppLayout"
-import { SidebarShell } from "./index"
-
-const meta = {
-  title: "Layout/SidebarShell",
-  parameters: {
-    layout: "fullscreen",
-  },
-  tags: ["autodocs"],
-} satisfies Meta
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-/** SidebarCurrent（ow/components/surfaces/SidebarCurrent）壳级语法示例：
- *  当前项＝var(--ow-current-bg) 底＋500 字重（主编码；信标点属产品侧栏语境，壳不强制）；
- *  运行中＝行尾 var(--ow-progress-fill) 实心点＋mono 计数（tabular-nums）＝状态极改形。
- *  全部走语义 token，浅/暗主题（工具栏 data-theme 切换）下同一份样式。 */
-const sampleItems: { icon: typeof Home; label: string; current?: boolean; running?: string }[] = [
-  { icon: Home, label: "首页", current: true },
-  { icon: User, label: "用户" },
-  { icon: User, label: "设置", running: "3/7" },
-  { icon: HelpCircle, label: "帮助" },
-]
-
-const SampleNav = () => (
-  <nav style={{ display: "flex", flexDirection: "column", gap: 4, padding: "0 8px" }}>
-    {sampleItems.map(({ icon: Icon, label, current, running }) => (
-      <button
-        key={label}
-        aria-current={current ? "page" : undefined}
-        style={{
-          display: "flex",
-          alignItems: "center",
-          gap: 12,
-          padding: "8px 12px",
-          background: current ? "var(--ow-current-bg)" : "transparent",
-          border: "none",
-          borderRadius: 8,
-          color: current ? "var(--ow-text)" : "var(--ow-text-2)",
-          fontSize: 14,
-          fontWeight: current ? 500 : 400,
-          cursor: "pointer",
-          transition: "background var(--ow-dur-1) var(--ow-ease-beacon), color var(--ow-dur-1) var(--ow-ease-beacon)",
-        }}
-        onMouseEnter={(e) => {
-          if (current) return
-          e.currentTarget.style.background = "var(--ow-hover)"
-          e.currentTarget.style.color = "var(--ow-text)"
-        }}
-        onMouseLeave={(e) => {
-          if (current) return
-          e.currentTarget.style.background = "transparent"
-          e.currentTarget.style.color = "var(--ow-text-2)"
-        }}
-      >
-        <Icon width={16} height={16} />
-        <span style={{ flex: 1, textAlign: "left" }}>{label}</span>
-        {running && (
-          <>
-            <span
-              aria-hidden="true"
-              style={{ width: 6, height: 6, borderRadius: 999, background: "var(--ow-progress-fill)", flexShrink: 0 }}
-            />
-            <span
-              style={{
-                fontFamily: "var(--ow-font-mono)",
-                fontSize: 10,
-                color: "var(--ow-text-2)",
-                fontVariantNumeric: "tabular-nums",
-              }}
-            >
-              {running}
-            </span>
-          </>
-        )}
-      </button>
-    ))}
-  </nav>
-)
-
-/** windows · 展开：带在上、钮在带里、侧栏无顶行——这是 R2 之后唯一还有通栏带的平台。 */
-export const SidebarDefault: Story = {
-  render: () => {
-    const [collapsed, setCollapsed] = useState(false)
-    const [width, setWidth] = useState(280)
-
-    return (
-      <div
-        style={{
-          height: 600,
-          display: "flex",
-          flexDirection: "column",
-          border: "1px solid var(--ow-border)",
-          background: "var(--ow-bg)",
-        }}
-      >
-        {/* windows：frame:false、三键必须自绘 → 通栏带留着，折叠钮住在带里（原型 657–663），
-            侧栏因此无顶行、折叠宽 0 —— 折叠/展开时钮一像素不动 */}
-        <WindowBand platform="windows" collapsed={collapsed} onToggle={() => setCollapsed(!collapsed)} />
-        <div style={{ flex: 1, minHeight: 0, display: "flex" }}>
-          <SidebarShell
-            platform="windows"
-            collapsed={collapsed}
-            onCollapsedChange={setCollapsed}
-            width={width}
-            onWidthChange={setWidth}
-            header={
-              <div style={{ padding: "12px 16px", borderBottom: "1px solid var(--ow-border)" }}>
-                <div style={{ fontSize: 16, fontWeight: 600, color: "var(--ow-text)" }}>应用名称</div>
-              </div>
-            }
-            footer={
-              <div style={{ padding: 16, borderTop: "1px solid var(--ow-border)" }}>
-                <button
-                  style={{
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 8,
-                    padding: "8px 12px",
-                    background: "transparent",
-                    border: "none",
-                    borderRadius: 8,
-                    color: "var(--ow-text-3)",
-                    fontSize: 13,
-                    cursor: "pointer",
-                    width: "100%",
-                  }}
-                >
-                  <Logout width={14} height={14} />
-                  <span>退出登录</span>
-                </button>
-              </div>
-            }
-          >
-            <div style={{ padding: "12px 0" }}>
-              <SampleNav />
-            </div>
-          </SidebarShell>
-          <div
-            style={{
-              flex: 1,
-              padding: 24,
-              background: "var(--ow-surface)",
-              borderLeft: "1px solid var(--ow-border)",
-            }}
-          >
-            <h2 style={{ marginBottom: 16 }}>主内容区域</h2>
-            <p style={{ color: "var(--ow-text-2)" }}>
-              当前宽度：{width}px，状态：{collapsed ? "折叠" : "展开"}
-            </p>
-            <p style={{ color: "var(--ow-text-3)", fontSize: 13, marginTop: 8 }}>
-              侧栏与内容区之间那条 1px 挂在内容区左沿，不挂侧栏右沿：折叠归零后不留孤线。
-            </p>
-          </div>
-        </div>
-      </div>
-    )
-  },
-}
-
-/** windows · 折叠：侧栏整条卸载（宽 0），钮仍在带里同一处坐标。 */
-export const SidebarCollapsed: Story = {
-  render: () => {
-    const [collapsed, setCollapsed] = useState(true)
-
-    return (
-      <div
-        style={{
-          height: 600,
-          display: "flex",
-          flexDirection: "column",
-          border: "1px solid var(--ow-border)",
-          background: "var(--ow-bg)",
-        }}
-      >
-        <WindowBand platform="windows" collapsed={collapsed} onToggle={() => setCollapsed(!collapsed)} />
-        <div style={{ flex: 1, minHeight: 0, display: "flex" }}>
-          <SidebarShell
-            platform="windows"
-            collapsed={collapsed}
-            onCollapsedChange={setCollapsed}
-            header={
-              <div style={{ padding: "12px 16px" }}>
-                <div style={{ fontSize: 16, fontWeight: 600 }}>品牌</div>
-              </div>
-            }
-          >
-            <SampleNav />
-          </SidebarShell>
-          <div
-            style={{
-              flex: 1,
-              padding: 24,
-              background: "var(--ow-surface)",
-              borderLeft: "1px solid var(--ow-border)",
-            }}
-          >
-            <h2 style={{ marginBottom: 16 }}>折叠后整条卸载</h2>
-            <p style={{ color: "var(--ow-text-2)" }}>
-              collapsedWidth = 0（默认，走 var(--ow-sidebar-collapsed-w)）：根宽归零、inner 整块不渲染， 也不留 1px
-              边线。展开钮不在这里 —— 它一直在上方窗口带的同一处坐标上。
-            </p>
-          </div>
-        </div>
-      </div>
-    )
-  },
-}
-
-/* ---------------- R2：mac / linux 的折叠钮住在侧栏顶行（无通栏带） ---------------- */
-
-/** 顶行示例壳：只有一个 platform 开关，钮与让位块都由 SidebarShell 自己出。 */
-const TopRowDemo = ({
-  platform,
-  fullscreen = false,
-  initialCollapsed = false,
-  note,
-}: {
-  platform: "mac" | "linux"
-  fullscreen?: boolean
-  initialCollapsed?: boolean
-  note: string
-}) => {
-  const [collapsed, setCollapsed] = useState(initialCollapsed)
-  return (
-    <div style={{ height: 420, display: "flex", background: "var(--ow-bg)" }}>
-      <SidebarShell
-        platform={platform}
-        fullscreen={fullscreen}
-        collapsed={collapsed}
-        onCollapsedChange={setCollapsed}
-        header={<div style={{ padding: "0 9px 20px", font: "600 var(--ow-fs-ui) var(--ow-font-sans)" }}>orbitwork</div>}
-      >
-        <SampleNav />
-      </SidebarShell>
-      <div
-        style={{
-          flex: 1,
-          padding: 24,
-          background: "var(--ow-surface)",
-          borderLeft: "1px solid var(--ow-border)",
-        }}
-      >
-        <h2 style={{ marginBottom: 16 }}>{platform}</h2>
-        <p style={{ color: "var(--ow-text-2)", fontSize: 13 }}>{note}</p>
-        <p style={{ color: "var(--ow-text-3)", fontSize: 13, marginTop: 8 }}>
-          当前：{collapsed ? "折叠（rail）" : "展开"} —— 点顶行那枚钮切换，钮的坐标两态一致。
-        </p>
-      </div>
-    </div>
-  )
-}
-
-/** mac · 展开：顶行 48，行内＝68 让位块 ＋ gap 4 ＋ 28 钮 → 钮落 x=80、y=10。内容面顶到 y=0。 */
-export const TopRowMac: Story = {
-  args: {},
-  render: () => (
-    <TopRowDemo platform="mac" note="没有通栏带：红绿灯让位块与折叠钮都在侧栏自己的第一行里，内容面从窗口顶端起。" />
-  ),
-}
-
-/** mac · 折叠：rail 宽 116（8+68+4+28+8），只剩顶行；钮仍在 x=80、y=10。 */
-export const TopRowMacRail: Story = {
-  args: {},
-  render: () => (
-    <TopRowDemo
-      platform="mac"
-      initialCollapsed
-      note="rail 宽 var(--ow-sidebar-collapsed-w-mac)=116：导航/项目/底栏整块不渲染，只留顶行。"
-    />
-  ),
-}
-
-/** mac · 全屏：红绿灯消失 → 让位块收 0，钮回到 x=8；折叠 rail 收到 44。 */
-export const TopRowMacFullscreen: Story = {
-  args: {},
-  render: () => (
-    <TopRowDemo
-      platform="mac"
-      fullscreen
-      note="fullscreen：让位块整块不出，钮吃左内距落在 x=8，折叠 rail 与 linux 同为 44。"
-    />
-  ),
-}
-
-/** linux/web · 展开：系统自带边框条，App 不画带；顶行无让位块，钮落 x=8。 */
-export const TopRowLinux: Story = {
-  args: {},
-  render: () => <TopRowDemo platform="linux" note="linux/web 无让位块：顶行左内距 8 直接接钮，坐标 x=8、y=10。" />,
-}
-
-/** linux/web · 折叠：rail 宽 44（8+28+8）。 */
-export const TopRowLinuxRail: Story = {
-  args: {},
-  render: () => (
-    <TopRowDemo platform="linux" initialCollapsed note="rail 宽 var(--ow-sidebar-collapsed-w)=44：只留顶行那枚钮。" />
-  ),
-}
-
-/** 消费方自定 rail（`collapsedWidth=64`）：与平台 rail 无关，inner 按 rail 宽照常渲染。 */
-export const SidebarRailMode: Story = {
-  render: () => {
-    const [collapsed, setCollapsed] = useState(true)
-
-    return (
-      <div style={{ height: 600, display: "flex", border: "1px solid var(--ow-border)" }}>
-        <SidebarShell
-          collapsed={collapsed}
-          onCollapsedChange={setCollapsed}
-          collapsedWidth={64}
-          header={
-            <div style={{ padding: "12px 16px" }}>
-              <div style={{ fontSize: 16, fontWeight: 600 }}>品牌</div>
-            </div>
-          }
-        >
-          <div style={{ padding: "12px 0" }}>
-            <nav style={{ display: "flex", flexDirection: "column", gap: 4, padding: "0 8px" }}>
-              {[Home, User, User, HelpCircle].map((Icon, i) => (
-                <button
-                  key={i}
-                  style={{
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    padding: 12,
-                    background: "transparent",
-                    border: "none",
-                    borderRadius: 8,
-                    color: "var(--ow-text-2)",
-                    cursor: "pointer",
-                  }}
-                  title={["首页", "用户", "设置", "帮助"][i]}
-                >
-                  <Icon width={20} height={20} />
-                </button>
-              ))}
-            </nav>
-          </div>
-        </SidebarShell>
-        <div style={{ flex: 1, padding: 24, background: "var(--ow-bg)" }}>
-          <h2 style={{ marginBottom: 16 }}>Icon Rail 模式</h2>
-          <p style={{ color: "var(--ow-text-2)" }}>collapsedWidth = 64，折叠后保留图标导航栏。</p>
-        </div>
-      </div>
-    )
-  },
-}
-
-export const SidebarResizable: Story = {
-  render: () => {
-    const [width, setWidth] = useState(280)
-
-    return (
-      <div style={{ height: 600, display: "flex", border: "1px solid var(--ow-border)" }}>
-        <SidebarShell
-          width={width}
-          onWidthChange={setWidth}
-          minWidth={200}
-          maxWidth={480}
-          header={<div style={{ padding: 16, fontSize: 16, fontWeight: 600 }}>可拖拽侧边栏</div>}
-        >
-          <div style={{ padding: 16, color: "var(--ow-text-2)", fontSize: 13 }}>
-            拖拽右边界调整宽度
-            <br />
-            当前：{width}px
-            <br />
-            范围：200px - 480px
-          </div>
-        </SidebarShell>
-        <div style={{ flex: 1, padding: 24, background: "var(--ow-bg)" }}>
-          <h2>主内容</h2>
-          <p style={{ color: "var(--ow-text-2)" }}>
-            鼠标悬浮在侧边栏右边界时那条边会加深描边（--ow-border-strong，中性色不是蓝），可以拖拽调整宽度。
-          </p>
-        </div>
-      </div>
-    )
-  },
-}
-
-export const SidebarNotResizable: Story = {
-  render: () => (
-    <div style={{ height: 600, display: "flex", border: "1px solid var(--ow-border)" }}>
-      <SidebarShell
-        resizable={false}
-        width={240}
-        header={<div style={{ padding: 16, fontSize: 16, fontWeight: 600 }}>固定宽度</div>}
-      >
-        <div style={{ padding: 16, color: "var(--ow-text-2)", fontSize: 13 }}>
-          resizable=false，侧边栏宽度固定，不可拖拽。
-        </div>
-      </SidebarShell>
-      <div style={{ flex: 1, padding: 24, background: "var(--ow-bg)" }}>
-        <h2>主内容</h2>
-      </div>
-    </div>
-  ),
-}
-
-export const SidebarNoToggle: Story = {
-  render: () => {
-    const [collapsed, setCollapsed] = useState(false)
-
-    return (
-      <div style={{ height: 600, display: "flex", border: "1px solid var(--ow-border)" }}>
-        <SidebarShell
-          collapsed={collapsed}
-          onCollapsedChange={setCollapsed}
-          header={
-            <div
-              style={{
-                padding: 16,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
-                borderBottom: "1px solid var(--ow-border)",
-              }}
-            >
-              <div style={{ fontSize: 16, fontWeight: 600 }}>应用</div>
-              <Button variant="ghost" size="sm" onClick={() => setCollapsed(!collapsed)}>
-                {collapsed ? "展开" : "折叠"}
-              </Button>
-            </div>
-          }
-        >
-          <SampleNav />
-        </SidebarShell>
-        <div style={{ flex: 1, padding: 24, background: "var(--ow-bg)" }}>
-          <h2 style={{ marginBottom: 16 }}>外部控制折叠</h2>
-          <p style={{ color: "var(--ow-text-2)" }}>
-            壳本身从不渲染折叠钮（钮归窗口带）；这里演示由消费方自备的按钮驱动同一套受控折叠。
-          </p>
-        </div>
-      </div>
-    )
-  },
-}
-
-export const SidebarUnstyled: Story = {
-  render: () => {
-    const [collapsed, setCollapsed] = useState(false)
-    const [width, setWidth] = useState(280)
-
-    return (
-      <div style={{ height: 600, display: "flex", border: "1px solid var(--ow-border)" }}>
-        <SidebarShell
-          collapsed={collapsed}
-          onCollapsedChange={setCollapsed}
-          width={width}
-          onWidthChange={setWidth}
-          unstyled
-          className="custom-sidebar"
-        >
-          {/* 判据 7「品牌外渐变一律清除」：这一格原来是 V1 的蓝紫渐变
-              （135° 蓝紫两停渐变 ＋ 纯白字 ＋ 白色半透明钮底），
-              在 Storybook 的可见面上整块复活了 V1 气质。unstyled 演示的是「壳不管样式」，
-              用中性语义 token 一样说得清。 */}
-          <div
-            style={{
-              height: "100%",
-              background: "var(--ow-surface-2)",
-              color: "var(--ow-text)",
-              padding: 24,
-            }}
-          >
-            <h3 style={{ marginBottom: 16 }}>自定义样式</h3>
-            <p style={{ fontSize: "var(--ow-fs-ui)", color: "var(--ow-text-2)" }}>
-              unstyled=true，不应用默认样式，完全由消费方控制布局。
-            </p>
-            <button
-              onClick={() => setCollapsed(!collapsed)}
-              style={{
-                marginTop: 20,
-                padding: "8px 16px",
-                background: "var(--ow-surface)",
-                border: "1px solid var(--ow-border)",
-                borderRadius: 8,
-                color: "var(--ow-text)",
-                cursor: "pointer",
-              }}
-            >
-              {collapsed ? "展开" : "折叠"}
-            </button>
-          </div>
-        </SidebarShell>
-        <div style={{ flex: 1, padding: 24, background: "var(--ow-bg)" }}>
-          <h2>主内容</h2>
-        </div>
-      </div>
-    )
-  },
-}
-
-export const AppLayoutComplete: Story = {
-  render: () => {
-    const [collapsed, setCollapsed] = useState(false)
-    const [width, setWidth] = useState(280)
-
-    return (
-      <div style={{ height: "100vh", display: "flex", flexDirection: "column" }}>
-        <AppLayout
-          header={
-            <div
-              style={{
-                padding: "12px 24px",
-                borderBottom: "1px solid var(--ow-border)",
-                background: "var(--ow-bg)",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
-              }}
-            >
-              <div style={{ fontSize: 18, fontWeight: 600, color: "var(--ow-text)" }}>应用标题</div>
-              <Button variant="primary" size="sm">
-                操作
-              </Button>
-            </div>
-          }
-          sidebar={
-            <SidebarShell
-              collapsed={collapsed}
-              onCollapsedChange={setCollapsed}
-              width={width}
-              onWidthChange={setWidth}
-              header={
-                <div style={{ padding: 16, borderBottom: "1px solid var(--ow-border)" }}>
-                  <div style={{ fontSize: 14, fontWeight: 500, color: "var(--ow-text-2)" }}>导航</div>
-                </div>
-              }
-              footer={
-                <div style={{ padding: 16, borderTop: "1px solid var(--ow-border)" }}>
-                  <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
-                    <div
-                      style={{
-                        width: 32,
-                        height: 32,
-                        borderRadius: "50%",
-                        background: "var(--ow-info)",
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        color: "var(--ow-on-fill)",
-                        fontSize: 13,
-                        fontWeight: 600,
-                      }}
-                    >
-                      U
-                    </div>
-                    <div style={{ flex: 1, fontSize: 13 }}>
-                      <div style={{ fontWeight: 500 }}>用户名</div>
-                      <div style={{ color: "var(--ow-text-3)", fontSize: 11 }}>user@example.com</div>
-                    </div>
-                  </div>
-                </div>
-              }
-            >
-              <div style={{ padding: "12px 0" }}>
-                <SampleNav />
-              </div>
-            </SidebarShell>
-          }
-          footer={
-            <div
-              style={{
-                padding: "8px 24px",
-                borderTop: "1px solid var(--ow-border)",
-                background: "var(--ow-bg)",
-                fontSize: 12,
-                color: "var(--ow-text-3)",
-                textAlign: "center",
-              }}
-            >
-              © 2024 公司名称
-            </div>
-          }
-        >
-          <div style={{ padding: 24 }}>
-            <h1 style={{ marginBottom: 16 }}>完整布局示例</h1>
-            <p style={{ color: "var(--ow-text-2)", marginBottom: 24 }}>
-              AppLayout 组合 header、sidebar、content、footer 四个区域。
-            </p>
-            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
-              {Array.from({ length: 6 }).map((_, i) => (
-                <div
-                  key={i}
-                  style={{
-                    padding: 20,
-                    background: "var(--ow-surface)",
-                    borderRadius: 12,
-                    border: "1px solid var(--ow-border)",
-                  }}
-                >
-                  <div style={{ fontSize: 14, fontWeight: 500, marginBottom: 8 }}>卡片 {i + 1}</div>
-                  <div style={{ fontSize: 12, color: "var(--ow-text-3)" }}>这是卡片内容</div>
-                </div>
-              ))}
-            </div>
-          </div>
-        </AppLayout>
-      </div>
-    )
-  },
-}
-
-export const AppLayoutMinimal: Story = {
-  render: () => (
-    <div style={{ height: 600 }}>
-      <AppLayout
-        sidebar={
-          <SidebarShell width={240}>
-            <SampleNav />
-          </SidebarShell>
-        }
-      >
-        <div style={{ padding: 24 }}>
-          <h2>最小化布局</h2>
-          <p style={{ color: "var(--ow-text-2)" }}>只有 sidebar 和 content，没有 header 和 footer。</p>
-        </div>
-      </AppLayout>
-    </div>
-  ),
-}
-
-export const AppLayoutNoSidebar: Story = {
-  render: () => (
-    <div style={{ height: 600 }}>
-      <AppLayout
-        header={
-          <div
-            style={{
-              padding: "12px 24px",
-              borderBottom: "1px solid var(--ow-border)",
-              fontSize: 18,
-              fontWeight: 600,
-            }}
-          >
-            无侧边栏布局
-          </div>
-        }
-      >
-        <div style={{ padding: 24 }}>
-          <h2>主内容</h2>
-          <p style={{ color: "var(--ow-text-2)" }}>只有 header 和 content，适合单页面应用或文档页。</p>
-        </div>
-      </AppLayout>
-    </div>
-  ),
-}
-
-/** 双主题对照：同一份样式在浅/暗两档（不写死主题，靠 data-theme 作用域）。 */
-export const ThemeMatrix: Story = {
-  render: () => (
-    <div style={{ display: "flex", gap: 16, padding: 16 }}>
-      {(["light", "dark"] as const).map((theme) => (
-        <div key={theme} data-theme={theme} style={{ background: "var(--ow-bg)", padding: 12 }}>
-          <div style={{ height: 320, display: "flex", border: "1px solid var(--ow-border)", overflow: "hidden" }}>
-            <SidebarShell
-              resizable={false}
-              footer={<div style={{ fontSize: 12, color: "var(--ow-text-3)" }}>底部固定区</div>}
-            >
-              <SampleNav />
-            </SidebarShell>
-            <div style={{ width: 200, padding: 16, fontSize: 13, color: "var(--ow-text-2)" }}>内容区</div>
-          </div>
-        </div>
-      ))}
-    </div>
-  ),
-}