willa-workspace 0.0.3-alpha.2739b3e

package/example/src/docs/CodeTabs.demo.tsx

@@ -0,0 +1,285 @@
+import { unindent } from "aidly";
+import { CodeTabs, type CodeTabsItem } from "willa/CodeTabs";
+import "willa/CodeTabs.css";
+
+import { defineDoc } from "#example/catalog/defineDoc";
+
+const installItems: Array<CodeTabsItem> = [
+  {
+    label: "pnpm",
+    language: "bash",
+    code: "pnpm add willa",
+  },
+  {
+    label: "npm",
+    language: "bash",
+    code: "npm install willa",
+  },
+  {
+    label: "yarn",
+    language: "bash",
+    code: "yarn add willa",
+  },
+];
+
+const usageItems: Array<CodeTabsItem> = [
+  {
+    label: "ShareButton.tsx",
+    language: "tsx",
+    code: unindent(`
+      import { useState } from "react";
+      import { Button } from "willa/Button";
+      import "willa/Button.css";
+
+      type ShareButtonProps = {
+        url: string;
+      };
+
+      export function ShareButton(props: ShareButtonProps) {
+        const [copied, setCopied] = useState(false);
+
+        return (
+          <Button
+            copyText={props.url}
+            variant={copied ? "solid" : "soft"}
+            onClick={() => setCopied(true)}
+          >
+            {copied ? "已复制" : "复制链接"}
+          </Button>
+        );
+      }
+    `),
+    highlightLines: [5, [12, 16]],
+  },
+  {
+    label: "theme.css",
+    language: "css",
+    code: unindent(`
+      .share-button {
+        display: flex;
+        gap: 0.75rem;
+        align-items: center;
+      }
+    `),
+  },
+];
+
+const languageItems: Array<CodeTabsItem> = [
+  {
+    label: "C++",
+    language: "c++",
+    code: unindent(`
+      #include <iostream>
+
+      int main() {
+        std::cout << "Hello Willa";
+      }
+    `),
+  },
+  {
+    label: "Rust",
+    language: "rust",
+    code: unindent(`
+      fn main() {
+        println!("Hello Willa");
+      }
+    `),
+  },
+  {
+    label: "Go",
+    language: "go",
+    code: unindent(`
+      package main
+
+      import "fmt"
+
+      func main() {
+        fmt.Println("Hello Willa")
+      }
+    `),
+  },
+  {
+    label: "HTML",
+    language: "html",
+    code: unindent(`
+      <article class="willa-card">
+        <h2>Hello Willa</h2>
+      </article>
+    `),
+  },
+];
+
+export default defineDoc({
+  id: "code-tabs",
+  name: "CodeTabs",
+  packageName: "willa/CodeTabs",
+  description:
+    "用于在一组相关代码片段之间切换，例如安装命令、多框架示例和配置片段。",
+  imports: [{ name: "CodeTabs", from: "willa/CodeTabs" }],
+  css: "willa/CodeTabs.css",
+  demo: {
+    name: "CodeTabs",
+    component: CodeTabs,
+    props: {
+      items: usageItems,
+      showLineNumbers: true,
+    },
+  },
+  code: `
+    import { CodeTabs } from "willa/CodeTabs";
+    import "willa/CodeTabs.css";
+
+    const items = [
+      {
+        label: "ShareButton.tsx",
+        language: "tsx",
+        code: "export function ShareButton() { ... }",
+        highlightLines: [5, [12, 16]],
+      },
+      {
+        label: "theme.css",
+        language: "css",
+        code: ".share-button { ... }",
+      },
+    ];
+
+    <CodeTabs items={items} showLineNumbers />;
+  `,
+  sections: [
+    {
+      title: "多语言高亮",
+      code: `
+        <CodeTabs items={languageItems} />;
+      `,
+      content: <CodeTabs items={languageItems} />,
+    },
+    {
+      title: "尺寸",
+      code: `
+      <CodeTabs items={installItems} size="sm" />;
+    `,
+      content: <CodeTabs items={installItems} size="sm" />,
+    },
+    {
+      title: "内层定制",
+      code: `
+      <CodeTabs
+        items={installItems}
+        className="docs-code-tabs-custom"
+        codeBlockClassName="docs-code-tabs-code"
+      />;
+    `,
+      content: (
+        <CodeTabs
+          items={installItems}
+          className="docs-code-tabs-custom"
+          codeBlockClassName="docs-code-tabs-code"
+        />
+      ),
+    },
+    {
+      title: "禁用标签",
+      code: `
+      <CodeTabs
+        items={[
+            ...installItems,
+            {
+              label: "bun",
+              language: "bash",
+              code: "bun add willa",
+              disabled: true,
+            },
+          ]}
+        />;
+      `,
+      content: (
+        <CodeTabs
+          items={[
+            ...installItems,
+            {
+              label: "bun",
+              language: "bash",
+              code: "bun add willa",
+              disabled: true,
+            },
+          ]}
+        />
+      ),
+    },
+  ],
+  props: [
+    {
+      name: "items",
+      type: "Array<CodeTabsItem>",
+      required: true,
+      description: "代码标签列表。",
+    },
+    {
+      name: "size",
+      type: '"sm" | "md"',
+      defaultValue: '"md"',
+      description: "标签按钮尺寸。",
+    },
+    {
+      name: "showLineNumbers",
+      type: "boolean",
+      defaultValue: "false",
+      description: "是否展示行号；单个 item 可通过 showLineNumbers 覆盖。",
+    },
+    {
+      name: "copiedDuration",
+      type: "number",
+      defaultValue: "300",
+      description: "复制成功反馈持续时间，单位为毫秒，默认 300。",
+    },
+    {
+      name: "className",
+      type: "string",
+      description: "可选的外层 className。",
+    },
+    {
+      name: "codeBlockClassName",
+      type: "string",
+      description: "可选的内层 CodeBlock className。",
+    },
+    {
+      name: "CodeTabsItem.label",
+      type: "ReactNode",
+      required: true,
+      group: "CodeTabsItem",
+      description: "标签上展示的内容。",
+    },
+    {
+      name: "CodeTabsItem.code",
+      type: "string",
+      required: true,
+      group: "CodeTabsItem",
+      description: "代码内容。",
+    },
+    {
+      name: "CodeTabsItem.language",
+      type: "string",
+      group: "CodeTabsItem",
+      description: "代码语言，用于语法高亮和右上角语言标记。",
+    },
+    {
+      name: "CodeTabsItem.disabled",
+      type: "boolean",
+      group: "CodeTabsItem",
+      description: "禁用当前代码标签。",
+    },
+    {
+      name: "CodeTabsItem.highlightLines",
+      type: "Array<number | [number, number]>",
+      group: "CodeTabsItem",
+      description: "需要高亮的代码行，支持单行或区间。",
+    },
+    {
+      name: "CodeTabsItem.showLineNumbers",
+      type: "boolean",
+      group: "CodeTabsItem",
+      defaultValue: "继承 showLineNumbers",
+      description: "覆盖当前代码项是否展示行号。",
+    },
+  ],
+});

package/example/src/docs/Collapse.demo.tsx

@@ -0,0 +1,306 @@
+import { InfoCircledIcon, LockClosedIcon } from "@radix-ui/react-icons";
+import { useState } from "react";
+import { Button } from "willa/Button";
+import { Collapse } from "willa/Collapse";
+import { Group } from "willa/Group";
+import { Stack } from "willa/Stack";
+import "willa/Button.css";
+import "willa/Collapse.css";
+import "willa/Group.css";
+import "willa/Stack.css";
+
+import { defineDoc } from "#example/catalog/defineDoc";
+
+function ControlledCollapsePreview() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div style={{ width: "100%", maxWidth: "24rem" }}>
+      <Stack gap="sm">
+        <Group gap="sm">
+          <Button
+            variant="ghost"
+            size="sm"
+            style={{ width: "4.5rem" }}
+            onClick={() => setOpen(true)}
+          >
+            展开
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            style={{ width: "4.5rem" }}
+            onClick={() => setOpen(false)}
+          >
+            收起
+          </Button>
+        </Group>
+        <Collapse
+          title="受控面板"
+          hint="外部状态控制折叠开关"
+          icon={<InfoCircledIcon />}
+          open={open}
+          onOpenChange={setOpen}
+        >
+          这种写法适合需要和表单、同步按钮或路由状态联动的内容面板。
+        </Collapse>
+      </Stack>
+    </div>
+  );
+}
+
+export default defineDoc({
+  id: "collapse",
+  name: "Collapse",
+  packageName: "willa/Collapse",
+  description:
+    "用于 FAQ、配置面板和文档内容分组的折叠块；支持受控/非受控开关、提示信息、自定义头部图标和操作区。",
+  imports: [
+    { name: "Button", from: "willa/Button" },
+    { name: "Collapse", from: "willa/Collapse" },
+    { name: "Group", from: "willa/Group" },
+    { name: "Stack", from: "willa/Stack" },
+    { name: "InfoCircledIcon, LockClosedIcon", from: "@radix-ui/react-icons" },
+  ],
+  css: "willa/Collapse.css",
+  demo: {
+    name: "Collapse",
+    component: Collapse,
+    props: {
+      title: "实现说明",
+      hint: "默认展开 / 可收起",
+      defaultOpen: true,
+    },
+    children: "把补充细节收起来，不打断主要阅读流程。",
+  },
+  code: `
+    import { Collapse } from "willa/Collapse";
+    import "willa/Collapse.css";
+
+    <Collapse title="实现说明" hint="默认展开 / 可收起" defaultOpen>
+      把补充细节收起来，不打断主要阅读流程。
+    </Collapse>;
+  `,
+  sections: [
+    {
+      title: "自定义头部",
+      code: `
+        <Collapse
+          title="发布前检查"
+          hint="包含图标和受限状态"
+          icon={<InfoCircledIcon />}
+        >
+          <p style={{ margin: 0 }}>适合放在 FAQ、配置说明、补充解释里。</p>
+        </Collapse>;
+      `,
+      content: (
+        <Collapse
+          title="发布前检查"
+          hint="包含图标和受限状态"
+          icon={<InfoCircledIcon />}
+        >
+          <p style={{ margin: 0 }}>适合放在 FAQ、配置说明、补充解释里。</p>
+        </Collapse>
+      ),
+    },
+    {
+      title: "带操作区",
+      code: `
+        <Collapse
+          title="发布前检查"
+          hint="右侧可以放额外操作"
+          extra={<Button variant="ghost" size="sm">复制内容</Button>}
+        >
+          <p style={{ margin: 0 }}>
+            当折叠块需要和跳转、复制、编辑等操作并列时，直接放在头部右侧。
+          </p>
+        </Collapse>;
+      `,
+      content: (
+        <Collapse
+          title="发布前检查"
+          hint="右侧可以放额外操作"
+          extra={
+            <Button variant="ghost" size="sm">
+              复制内容
+            </Button>
+          }
+        >
+          <p style={{ margin: 0 }}>
+            当折叠块需要和跳转、复制、编辑等操作并列时，直接放在头部右侧。
+          </p>
+        </Collapse>
+      ),
+    },
+    {
+      title: "不同尺寸",
+      code: `
+        <Stack gap="sm">
+          <Collapse title="紧凑折叠块" size="sm" defaultOpen>
+            <p style={{ margin: 0 }}>适合放在聊天、列表卡片或侧栏说明里。</p>
+          </Collapse>
+          <Collapse title="标准折叠块" size="md" defaultOpen>
+            <p style={{ margin: 0 }}>适合放在正文、配置面板和详情页里。</p>
+          </Collapse>
+          <Collapse title="强调折叠块" size="lg" defaultOpen>
+            <p style={{ margin: 0 }}>适合承载更重要的说明或操作分组。</p>
+          </Collapse>
+        </Stack>;
+      `,
+      content: (
+        <Stack gap="sm">
+          <Collapse title="紧凑折叠块" size="sm" defaultOpen>
+            <p style={{ margin: 0 }}>适合放在聊天、列表卡片或侧栏说明里。</p>
+          </Collapse>
+          <Collapse title="标准折叠块" size="md" defaultOpen>
+            <p style={{ margin: 0 }}>适合放在正文、配置面板和详情页里。</p>
+          </Collapse>
+          <Collapse title="强调折叠块" size="lg" defaultOpen>
+            <p style={{ margin: 0 }}>适合承载更重要的说明或操作分组。</p>
+          </Collapse>
+        </Stack>
+      ),
+    },
+    {
+      title: "受控状态",
+      code: `
+        import { useState } from "react";
+        import { Button } from "willa/Button";
+        import { Collapse } from "willa/Collapse";
+        import { Group } from "willa/Group";
+        import { Stack } from "willa/Stack";
+
+        const Demo = () => {
+          const [open, setOpen] = useState(false);
+
+          return (
+            <Stack gap="sm">
+              <Group gap="sm">
+                <Button variant="ghost" size="sm" onClick={() => setOpen(true)}>
+                  展开
+                </Button>
+                <Button variant="ghost" size="sm" onClick={() => setOpen(false)}>
+                  收起
+                </Button>
+              </Group>
+              <Collapse title="受控面板" size="sm" open={open} onOpenChange={setOpen}>
+                这种写法适合需要和表单、同步按钮或路由状态联动的内容面板。
+              </Collapse>
+            </Stack>
+          );
+        };
+      `,
+      content: <ControlledCollapsePreview />,
+    },
+    {
+      title: "默认收起",
+      code: `
+        <Collapse
+          title="默认收起"
+          hint="第一次进入时保持折叠"
+        >
+          默认关闭时，适合让正文先保持轻量，再按需展开补充说明。
+        </Collapse>;
+      `,
+      content: (
+        <Collapse title="默认收起" hint="第一次进入时保持折叠">
+          默认关闭时，适合让正文先保持轻量，再按需展开补充说明。
+        </Collapse>
+      ),
+    },
+    {
+      title: "禁用状态",
+      code: `
+        <Collapse
+          title="只读说明"
+          hint="禁用后不可展开"
+          icon={<LockClosedIcon />}
+          disabled
+        >
+          这是一个只读信息块。
+        </Collapse>;
+      `,
+      content: (
+        <Collapse
+          title="只读说明"
+          hint="禁用后不可展开"
+          icon={<LockClosedIcon />}
+          disabled
+        >
+          这是一个只读信息块。
+        </Collapse>
+      ),
+    },
+  ],
+  props: [
+    {
+      name: "title",
+      type: "ReactNode",
+      required: true,
+      description: "折叠块的主标题。",
+    },
+    {
+      name: "hint",
+      type: "ReactNode",
+      description: "标题下方的辅助说明。",
+    },
+    {
+      name: "size",
+      type: '"sm" | "md" | "lg"',
+      defaultValue: '"md"',
+      description: "折叠块的视觉尺寸。",
+    },
+    {
+      name: "icon",
+      type: "ReactNode",
+      description: "标题左侧的装饰图标，未传时不显示。",
+    },
+    {
+      name: "extra",
+      type: "ReactNode",
+      description: "标题行右侧的附加操作区。",
+    },
+    {
+      name: "open",
+      type: "boolean",
+      description: "受控展开状态。",
+    },
+    {
+      name: "defaultOpen",
+      type: "boolean",
+      defaultValue: "false",
+      description: "非受控模式下的初始展开状态。",
+    },
+    {
+      name: "disabled",
+      type: "boolean",
+      defaultValue: "false",
+      description: "是否禁用折叠交互。",
+    },
+    {
+      name: "onOpenChange",
+      type: "(open: boolean) => void",
+      description: "展开状态变化时触发。",
+    },
+    {
+      name: "triggerClassName",
+      type: "string",
+      description: "触发按钮的 className。",
+    },
+    {
+      name: "bodyClassName",
+      type: "string",
+      description: "内容区域的 className。",
+    },
+    {
+      name: "className",
+      type: "string",
+      description: "外层容器的 className。",
+    },
+    {
+      name: "children",
+      type: "ReactNode",
+      description: "折叠内容。",
+    },
+  ],
+});