willa-workspace 0.0.3-alpha.2739b3e

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

@@ -0,0 +1,255 @@
+import { useState } from "react";
+import { PaperPlaneIcon } from "@radix-ui/react-icons";
+import { Badge } from "willa/Badge";
+import { Button } from "willa/Button";
+import { Group } from "willa/Group";
+import { InputPanel } from "willa/InputPanel";
+import "willa/Badge.css";
+import "willa/Button.css";
+import "willa/Group.css";
+import "willa/InputPanel.css";
+
+import { defineDoc } from "#example/catalog/defineDoc";
+
+const panelFrameStyle = {
+  display: "grid",
+  gap: "0.85rem",
+  width: "min(100%, 52rem)",
+  margin: "0 auto",
+} as const;
+
+const InputPanelPreview = () => {
+  const [value, setValue] = useState("");
+  const [submitted, setSubmitted] = useState("");
+
+  return (
+    <div style={panelFrameStyle}>
+      <InputPanel
+        value={value}
+        onValueChange={setValue}
+        placeholder="写下问题、反馈或操作指令..."
+        footer={value ? `${value.length} 个字符` : "⌘ Enter 提交"}
+        onSubmit={(nextValue) => setSubmitted(nextValue)}
+      />
+      {submitted ? <Badge tone="success">已提交：{submitted}</Badge> : null}
+    </div>
+  );
+};
+
+export default defineDoc({
+  id: "input-panel",
+  name: "InputPanel",
+  category: "content",
+  packageName: "willa/InputPanel",
+  description: "用于封装多行输入、底部信息、快捷操作和提交按钮的通用输入面板。",
+  imports: [{ name: "InputPanel", from: "willa/InputPanel" }],
+  css: "willa/InputPanel.css",
+  demo: {
+    name: "InputPanelPreview",
+    component: InputPanelPreview,
+  },
+  code: `
+    import { useState } from "react";
+    import { InputPanel } from "willa/InputPanel";
+    import "willa/InputPanel.css";
+
+    const Demo = () => {
+      const [value, setValue] = useState("");
+
+      return (
+        <InputPanel
+          value={value}
+          onValueChange={setValue}
+          placeholder="写下问题、反馈或操作指令..."
+          footer={value ? \`\${value.length} 个字符\` : "⌘ Enter 提交"}
+          onSubmit={(nextValue) => console.log(nextValue)}
+        />
+      );
+    };
+  `,
+  sections: [
+    {
+      title: "Enter 发送",
+      code: `
+        import { PaperPlaneIcon } from "@radix-ui/react-icons";
+
+        <InputPanel
+          submitShortcut="enter"
+          submitIcon={<PaperPlaneIcon />}
+          submitLabel="发送"
+          placeholder="输入 AI 指令，Enter 发送，Shift Enter 换行"
+          footer="适合 AI 对话、搜索和生成任务入口"
+        />;
+      `,
+      content: (
+        <div style={panelFrameStyle}>
+          <InputPanel
+            submitShortcut="enter"
+            submitIcon={<PaperPlaneIcon />}
+            submitLabel="发送"
+            placeholder="输入 AI 指令，Enter 发送，Shift Enter 换行"
+            footer="适合 AI 对话、搜索和生成任务入口"
+          />
+        </div>
+      ),
+    },
+    {
+      title: "扩展区域",
+      code: `
+        <InputPanel
+          beforeInput={
+            <div className="willa-input-panel-reference">
+              <span className="willa-input-panel-reference-author">
+                @产品设计
+              </span>
+              <span className="willa-input-panel-reference-content">
+                这段说明可以再补充一个实际产品里的信息结构示例。
+              </span>
+            </div>
+          }
+          placeholder="回复这条讨论..."
+          actions={
+            <Group gap="xs">
+              <Button size="sm" variant="ghost">
+                @
+              </Button>
+              <Button size="sm" variant="ghost">
+                表情
+              </Button>
+            </Group>
+          }
+          footer="业务可以通过 beforeInput 和 actions 接入引用、提及、表情和附件"
+        />;
+      `,
+      content: (
+        <div style={panelFrameStyle}>
+          <InputPanel
+            beforeInput={
+              <div className="willa-input-panel-reference">
+                <span className="willa-input-panel-reference-author">
+                  @产品设计
+                </span>
+                <span className="willa-input-panel-reference-content">
+                  这段说明可以再补充一个实际产品里的信息结构示例。
+                </span>
+              </div>
+            }
+            placeholder="回复这条讨论..."
+            actions={
+              <Group gap="xs">
+                <Button size="sm" variant="ghost">
+                  @
+                </Button>
+                <Button size="sm" variant="ghost">
+                  表情
+                </Button>
+              </Group>
+            }
+            footer="业务可以通过 beforeInput 和 actions 接入引用、提及、表情和附件"
+          />
+        </div>
+      ),
+    },
+  ],
+  props: [
+    {
+      name: "value",
+      type: "string | number | ReadonlyArray<string>",
+      description: "受控输入值，透传给 textarea。",
+    },
+    {
+      name: "defaultValue",
+      type: "string | number | ReadonlyArray<string>",
+      defaultValue: '""',
+      description: "非受控默认值。",
+    },
+    {
+      name: "onValueChange",
+      type: "(value: string) => void",
+      description: "输入值变化回调。",
+    },
+    {
+      name: "onSubmit",
+      type: "(value: string, event: InputPanelSubmitEvent) => void",
+      description: "提交回调。",
+    },
+    {
+      name: "size",
+      type: '"md" | "lg"',
+      defaultValue: '"md"',
+      description: "输入面板尺寸。",
+    },
+    {
+      name: "autoResize",
+      type: "boolean",
+      defaultValue: "true",
+      description: "是否根据内容自动调整高度，默认开启。",
+    },
+    {
+      name: "minRows",
+      type: "number",
+      defaultValue: "3",
+      description: "最小行数，默认 3。",
+    },
+    {
+      name: "maxRows",
+      type: "number",
+      defaultValue: "8",
+      description: "自动高度时的最大行数，默认 8。",
+    },
+    {
+      name: "submitShortcut",
+      type: '"enter" | "mod-enter" | "none"',
+      defaultValue: '"mod-enter"',
+      description: "键盘提交方式，默认 mod-enter。",
+    },
+    {
+      name: "allowEmptySubmit",
+      type: "boolean",
+      defaultValue: "false",
+      description: "是否允许空内容提交。",
+    },
+    {
+      name: "loading",
+      type: "boolean",
+      defaultValue: "false",
+      description: "提交按钮加载态。",
+    },
+    {
+      name: "beforeInput",
+      type: "ReactNode",
+      description: "输入区上方内容，适合引用、上下文或附件摘要。",
+    },
+    {
+      name: "footer",
+      type: "ReactNode",
+      description: "底部左侧说明内容。",
+    },
+    {
+      name: "actions",
+      type: "ReactNode",
+      description: "提交按钮前的快捷操作。",
+    },
+    {
+      name: "submitLabel",
+      type: "ReactNode",
+      defaultValue: '"提交"',
+      description: "提交按钮文案。",
+    },
+    {
+      name: "submitIcon",
+      type: "ReactNode",
+      description: "提交按钮图标。",
+    },
+    {
+      name: "submitButton",
+      type: "ReactNode",
+      description: "自定义提交按钮，传入后会替换默认按钮。",
+    },
+    {
+      name: "slotClassNames",
+      type: "InputPanelSlotClassNames",
+      description: "插槽样式。",
+    },
+  ],
+});

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

@@ -0,0 +1,162 @@
+import { Group } from "willa/Group";
+import { Kbd, KbdShortcut } from "willa/Kbd";
+import "willa/Group.css";
+import "willa/Kbd.css";
+
+import { defineDoc } from "#example/catalog/defineDoc";
+
+function KbdPreview() {
+  return (
+    <p>
+      按 <KbdShortcut keys={["⌘", "K"]} /> 打开命令面板，或按 <Kbd>Esc</Kbd>{" "}
+      关闭当前浮层。
+    </p>
+  );
+}
+
+export default defineDoc({
+  id: "kbd",
+  name: "Kbd",
+  packageName: "willa/Kbd",
+  description: "用于展示键盘按键、快捷键和命令提示的内联组件。",
+  imports: [
+    { name: "Kbd, KbdShortcut", from: "willa/Kbd" },
+    { name: "Group", from: "willa/Group" },
+  ],
+  css: "willa/Kbd.css",
+  demo: {
+    name: "KbdPreview",
+    component: KbdPreview,
+  },
+  code: `
+    import { Kbd, KbdShortcut } from "willa/Kbd";
+    import "willa/Kbd.css";
+
+    <p>
+      按 <KbdShortcut keys={["⌘", "K"]} /> 打开命令面板，或按 <Kbd>Esc</Kbd>{" "}
+      关闭当前浮层。
+    </p>;
+  `,
+  sections: [
+    {
+      title: "基础按键",
+      code: `
+        <Group gap="sm">
+          <Kbd>Esc</Kbd>
+          <Kbd>Tab</Kbd>
+          <Kbd>Enter</Kbd>
+          <Kbd>Space</Kbd>
+        </Group>;
+      `,
+      content: (
+        <Group gap="sm">
+          <Kbd>Esc</Kbd>
+          <Kbd>Tab</Kbd>
+          <Kbd>Enter</Kbd>
+          <Kbd>Space</Kbd>
+        </Group>
+      ),
+    },
+    {
+      title: "组合快捷键",
+      code: `
+        <Group gap="sm">
+          <KbdShortcut keys={["⌘", "K"]} />
+          <KbdShortcut keys={["⌘", "Shift", "P"]} />
+          <KbdShortcut keys={["Ctrl", "/"]} />
+        </Group>;
+      `,
+      content: (
+        <Group gap="sm">
+          <KbdShortcut keys={["⌘", "K"]} />
+          <KbdShortcut keys={["⌘", "Shift", "P"]} />
+          <KbdShortcut keys={["Ctrl", "/"]} />
+        </Group>
+      ),
+    },
+    {
+      title: "尺寸",
+      code: `
+        <Group gap="sm">
+          <Kbd size="sm">Esc</Kbd>
+          <Kbd size="md">Esc</Kbd>
+        </Group>;
+      `,
+      content: (
+        <Group gap="sm">
+          <Kbd size="sm">Esc</Kbd>
+          <Kbd size="md">Esc</Kbd>
+        </Group>
+      ),
+    },
+    {
+      title: "视觉类型",
+      code: `
+        <Group gap="sm">
+          <Kbd variant="surface">Enter</Kbd>
+          <Kbd variant="outline">Enter</Kbd>
+        </Group>;
+      `,
+      content: (
+        <Group gap="sm">
+          <Kbd variant="surface">Enter</Kbd>
+          <Kbd variant="outline">Enter</Kbd>
+        </Group>
+      ),
+    },
+    {
+      title: "正文使用",
+      code: `
+        <p>
+          按 <KbdShortcut keys={["⌘", "K"]} /> 打开命令面板，或按 <Kbd>Esc</Kbd>{" "}
+          关闭当前浮层。
+        </p>;
+      `,
+      content: (
+        <p>
+          按 <KbdShortcut keys={["⌘", "K"]} /> 打开命令面板，或按 <Kbd>Esc</Kbd>{" "}
+          关闭当前浮层。
+        </p>
+      ),
+    },
+  ],
+  props: [
+    {
+      name: "size",
+      type: '"sm" | "md"',
+      defaultValue: '"md"',
+      description: "按键尺寸。",
+    },
+    {
+      name: "variant",
+      type: '"surface" | "outline"',
+      defaultValue: '"surface"',
+      description: "按键视觉类型。",
+    },
+    {
+      name: "className",
+      type: "string",
+      description: "可选的外层 className。",
+    },
+    {
+      name: "children",
+      type: "ReactNode",
+      required: true,
+      description: "按键展示内容。",
+    },
+    {
+      name: "KbdShortcut.keys",
+      group: "KbdShortcut",
+      type: "Array<ReactNode>",
+      required: true,
+      description: "KbdShortcut 组件渲染的组合按键列表。",
+    },
+    {
+      name: "KbdShortcut.separator",
+      group: "KbdShortcut",
+      type: '"plus" | "none"',
+      defaultValue: '"plus"',
+      description: "KbdShortcut 组件的按键分隔方式。",
+    },
+  ],
+});

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

@@ -0,0 +1,184 @@
+import { unindent } from "aidly";
+import { useState } from "react";
+import { Button } from "willa/Button";
+import { Image } from "willa/Image";
+import { ImageGallery } from "willa/ImageGallery";
+import { Lightbox } from "willa/Lightbox";
+import { Separator } from "willa/Separator";
+
+import "willa/Button.css";
+import "willa/Image.css";
+import "willa/ImageGallery.css";
+import "willa/Lightbox.css";
+import "willa/Separator.css";
+
+import { defineDoc } from "#example/catalog/defineDoc";
+
+const lakeImage = {
+  src: "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1200&q=80",
+  alt: "金色时刻的湖边风景",
+  caption: "湖泊",
+};
+
+const roadImage = {
+  src: "https://images.unsplash.com/photo-1470770841072-f978cf4d019e?auto=format&fit=crop&w=800&q=80",
+  alt: "山间公路",
+  caption: "公路",
+};
+
+const forestImage = {
+  src: "https://images.unsplash.com/photo-1448375240586-882707db888b?auto=format&fit=crop&w=800&q=80",
+  alt: "雾气里的森林",
+  caption: "森林",
+};
+
+const galleryImages = [roadImage, forestImage];
+
+const LightboxPreview = () => {
+  const [controlledOpen, setControlledOpen] = useState(false);
+
+  return (
+    <div className="docs-demo-stack">
+      <section className="docs-demo-group">
+        <div className="docs-demo-title">自动接管 Image 和 ImageGallery</div>
+        <Lightbox backdrop="solid">
+          <Image {...lakeImage} title="风景预览" />
+          <ImageGallery images={galleryImages} columns={2} />
+        </Lightbox>
+      </section>
+
+      <Separator className="docs-demo-separator" size="sm" />
+
+      <section className="docs-demo-group">
+        <div className="docs-demo-title">传入 image 的受控弹层</div>
+        <Button variant="outline" onClick={() => setControlledOpen(true)}>
+          打开受控预览
+        </Button>
+        {controlledOpen ? (
+          <Lightbox
+            image={roadImage}
+            onClose={() => setControlledOpen(false)}
+          />
+        ) : null}
+      </section>
+    </div>
+  );
+};
+
+export default defineDoc({
+  id: "lightbox",
+  name: "Lightbox",
+  packageName: "willa/Lightbox",
+  description: "占满视口的图片预览弹层。",
+  imports: [
+    { name: "Button", from: "willa/Button" },
+    { name: "Image", from: "willa/Image" },
+    { name: "ImageGallery", from: "willa/ImageGallery" },
+    { name: "Lightbox", from: "willa/Lightbox" },
+  ],
+  css: "willa/Lightbox.css",
+  demo: {
+    name: "LightboxPreview",
+    component: LightboxPreview,
+  },
+  code: unindent(`
+    import { useState } from "react";
+    import { Button } from "willa/Button";
+    import { Image } from "willa/Image";
+    import { ImageGallery } from "willa/ImageGallery";
+    import { Lightbox } from "willa/Lightbox";
+
+    import "willa/Button.css";
+    import "willa/Image.css";
+    import "willa/ImageGallery.css";
+    import "willa/Lightbox.css";
+
+    const lakeImage = {
+      src: "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1200&q=80",
+      alt: "金色时刻的湖边风景",
+      caption: "湖泊",
+    };
+
+    const roadImage = {
+      src: "https://images.unsplash.com/photo-1470770841072-f978cf4d019e?auto=format&fit=crop&w=800&q=80",
+      alt: "山间公路",
+      caption: "公路",
+    };
+
+    const forestImage = {
+      src: "https://images.unsplash.com/photo-1448375240586-882707db888b?auto=format&fit=crop&w=800&q=80",
+      alt: "雾气里的森林",
+      caption: "森林",
+    };
+
+    const galleryImages = [roadImage, forestImage];
+
+    function LightboxPreview() {
+      const [controlledOpen, setControlledOpen] = useState(false);
+
+      return (
+        <>
+          <Lightbox backdrop="solid">
+            <Image {...lakeImage} title="风景预览" />
+            <ImageGallery images={galleryImages} columns={2} />
+          </Lightbox>
+
+          <Button variant="outline" onClick={() => setControlledOpen(true)}>
+            打开受控预览
+          </Button>
+          {controlledOpen ? (
+            <Lightbox
+              image={roadImage}
+              onClose={() => setControlledOpen(false)}
+            />
+          ) : null}
+        </>
+      );
+    }
+  `),
+  props: [
+    {
+      name: "children",
+      type: "ReactNode",
+      required: true,
+      description:
+        "通常传入 Image 或 ImageGallery，Lightbox 会自动接管打开和切换状态。",
+    },
+    {
+      name: "image",
+      type: "LightboxImage",
+      description: "受控模式下在弹层中渲染的图片。",
+    },
+    {
+      name: "onClose",
+      type: "() => void",
+      description: "受控模式下弹层需要关闭时触发。",
+    },
+    {
+      name: "onPrev",
+      type: "() => void",
+      description: "可选的上一张图片操作。",
+    },
+    {
+      name: "onNext",
+      type: "() => void",
+      description: "可选的下一张图片操作。",
+    },
+    {
+      name: "backdrop",
+      type: '"translucent" | "solid"',
+      description: "弹层背景模式，默认半透明，可切换为纯色背景。",
+    },
+    {
+      name: "className",
+      type: "string",
+      description: "受控弹层模式下传给弹层根节点的 className。",
+    },
+    {
+      name: "transitionDirection",
+      type: "-1 | 0 | 1",
+      defaultValue: "0",
+      description: "受控模式下的图片切换动画方向。",
+    },
+  ],
+});