willa-workspace 0.0.3-alpha.2739b3e

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

@@ -0,0 +1,124 @@
+import { unindent } from "aidly";
+import { ActivityLogIcon, LightningBoltIcon } from "@radix-ui/react-icons";
+import { Grid } from "willa/Grid";
+import { Statistic } from "willa/Statistic";
+import "willa/Grid.css";
+import "willa/Statistic.css";
+
+import { defineDoc } from "#example/catalog/defineDoc";
+
+export default defineDoc({
+  id: "statistic",
+  name: "Statistic",
+  category: "content",
+  packageName: "willa/Statistic",
+  description: "用于展示指标、趋势和轻量统计数据。",
+  imports: [{ name: "Statistic", from: "willa/Statistic" }],
+  css: "willa/Statistic.css",
+  demo: {
+    name: "Statistic",
+    component: Statistic,
+    props: {
+      label: "本月调用量",
+      value: "128.4K",
+      description: "包含 API 与组件站点请求",
+      trend: "up",
+      trendLabel: "+12.8%",
+      icon: <ActivityLogIcon />,
+      tone: "info",
+    },
+  },
+  code: unindent(`
+    import { Statistic } from "willa/Statistic";
+    import "willa/Statistic.css";
+
+    <Statistic
+      label="本月调用量"
+      value="128.4K"
+      trend="up"
+      trendLabel="+12.8%"
+      description="包含 API 与组件站点请求"
+    />
+  `),
+  props: [
+    {
+      name: "label",
+      type: "ReactNode",
+      required: true,
+      description: "指标名称。",
+    },
+    {
+      name: "value",
+      type: "ReactNode",
+      required: true,
+      description: "指标值。",
+    },
+    { name: "prefix", type: "ReactNode", description: "数值前缀。" },
+    { name: "suffix", type: "ReactNode", description: "数值后缀。" },
+    { name: "description", type: "ReactNode", description: "辅助说明。" },
+    {
+      name: "trend",
+      type: '"up" | "down" | "neutral"',
+      defaultValue: '"neutral"',
+      description: "趋势语义。",
+    },
+    { name: "trendLabel", type: "ReactNode", description: "趋势文案。" },
+    { name: "icon", type: "ReactNode", description: "指标图标。" },
+    {
+      name: "tone",
+      type: '"default" | "info" | "success" | "warning" | "danger"',
+      defaultValue: '"default"',
+      description: "指标强调色。",
+    },
+    {
+      name: "size",
+      type: '"sm" | "md" | "lg"',
+      defaultValue: '"md"',
+      description: "尺寸。",
+    },
+    {
+      name: "...divProps",
+      type: "ComponentPropsWithoutRef<'div'>",
+      description: "透传到外层容器。",
+    },
+  ],
+  sections: [
+    {
+      title: "指标组",
+      code: `
+        <Grid columns={3} gap="lg">
+          <Statistic label="成功率" value="99.2" suffix="%" tone="success" />
+          <Statistic label="平均耗时" value="420" suffix="ms" tone="warning" />
+          <Statistic label="失败任务" value="18" tone="danger" />
+        </Grid>
+      `,
+      content: (
+        <Grid columns={3} gap="lg">
+          <Statistic
+            label="成功率"
+            value="99.2"
+            suffix="%"
+            tone="success"
+            trend="up"
+            trendLabel="+1.4%"
+          />
+          <Statistic
+            label="平均耗时"
+            value="420"
+            suffix="ms"
+            tone="warning"
+            trend="down"
+            trendLabel="-30ms"
+          />
+          <Statistic
+            label="失败任务"
+            value="18"
+            tone="danger"
+            icon={<LightningBoltIcon />}
+            description="近 7 天"
+          />
+        </Grid>
+      ),
+    },
+  ],
+});

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

@@ -0,0 +1,88 @@
+import { Step } from "willa/Step";
+import { Steps } from "willa/Steps";
+import "willa/Steps.css";
+
+import { defineDoc } from "#example/catalog/defineDoc";
+
+const steps = [
+  {
+    name: "Step",
+    component: Step,
+    props: { title: "安装" },
+    children: "使用 pnpm 安装依赖。",
+  },
+  {
+    name: "Step",
+    component: Step,
+    props: { title: "构建" },
+    children: "发布前先构建所有包。",
+  },
+  {
+    name: "Step",
+    component: Step,
+    props: { title: "运行" },
+    children: "启动示例应用。",
+  },
+];
+
+export default defineDoc({
+  id: "steps",
+  name: "Steps",
+  packageName: "willa/Steps",
+  description: "带连续标记的步骤说明组件。",
+  imports: [
+    { name: "Step", from: "willa/Step" },
+    { name: "Steps", from: "willa/Steps" },
+  ],
+  css: "willa/Steps.css",
+  demo: {
+    name: "Steps",
+    component: Steps,
+    props: { title: "项目准备", markerColor: "#2563eb" },
+    children: steps,
+  },
+  code: `
+    import { Step } from "willa/Step";
+    import { Steps } from "willa/Steps";
+    import "willa/Steps.css";
+
+    <Steps title="项目准备" markerColor="#2563eb">
+      <Step title="安装">使用 pnpm 安装依赖。</Step>
+      <Step title="构建">发布前先构建所有包。</Step>
+      <Step title="运行">启动示例应用。</Step>
+    </Steps>;
+  `,
+  props: [
+    {
+      name: "title",
+      type: "ReactNode",
+      description: "整组步骤或单个步骤的可选标题。",
+    },
+    {
+      name: "markerColor",
+      type: "string",
+      description: "步骤标记的强调色。",
+    },
+    {
+      name: "markerTextColor",
+      type: "string",
+      description: "步骤标记的文字颜色。",
+    },
+    {
+      name: "direction",
+      type: '"vertical" | "horizontal"',
+      defaultValue: '"vertical"',
+      description: "步骤排列方向。",
+    },
+    {
+      name: "className",
+      type: "string",
+      description: "可选的外层 className。",
+    },
+    {
+      name: "children",
+      type: "ReactNode",
+      description: "步骤内容。",
+    },
+  ],
+});

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

@@ -0,0 +1,259 @@
+import { useState } from "react";
+import {
+  FileTextIcon,
+  LightningBoltIcon,
+  MagicWandIcon,
+  MagnifyingGlassIcon,
+} from "@radix-ui/react-icons";
+
+import {
+  SuggestionChips,
+  type SuggestionChipItem,
+} from "willa/SuggestionChips";
+import { Panel } from "willa/Panel";
+import { PromptInput } from "willa/PromptInput";
+import "willa/Panel.css";
+import "willa/SuggestionChips.css";
+import "willa/PromptInput.css";
+
+import { defineDoc } from "#example/catalog/defineDoc";
+
+const suggestions: Array<SuggestionChipItem> = [
+  {
+    id: "summarize",
+    label: "总结这份文档",
+    description: "输出重点和风险",
+    icon: <FileTextIcon />,
+  },
+  {
+    id: "search",
+    label: "检索相关资料",
+    description: "补充来源证据",
+    icon: <MagnifyingGlassIcon />,
+  },
+  {
+    id: "plan",
+    label: "拆成执行计划",
+    description: "按优先级排序",
+    icon: <LightningBoltIcon />,
+  },
+];
+
+const SuggestionChipsPreview = () => {
+  const [value, setValue] = useState("");
+
+  return (
+    <Panel padding="md" style={{ width: "min(100%, 56rem)" }}>
+      <SuggestionChips
+        items={suggestions}
+        style={{ marginBottom: "0.8rem" }}
+        onSelect={(item) => {
+          setValue(String(item.label));
+        }}
+      />
+      <PromptInput
+        value={value}
+        placeholder="选择一个建议，或直接输入问题..."
+        minRows={2}
+        maxRows={5}
+        onChange={(event) => setValue(event.currentTarget.value)}
+      />
+    </Panel>
+  );
+};
+
+export default defineDoc({
+  id: "suggestion-chips",
+  name: "SuggestionChips",
+  category: "ai",
+  packageName: "willa/SuggestionChips",
+  description: "用于展示快捷提示词、推荐问题和 AI 任务入口。",
+  imports: [
+    { name: "SuggestionChips", from: "willa/SuggestionChips" },
+    { name: "Panel", from: "willa/Panel" },
+  ],
+  css: "willa/SuggestionChips.css",
+  demo: {
+    name: "SuggestionChipsPreview",
+    component: SuggestionChipsPreview,
+  },
+  code: `
+    import { SuggestionChips } from "willa/SuggestionChips";
+    import "willa/SuggestionChips.css";
+
+    <SuggestionChips
+      items={[
+        { id: "summarize", label: "总结这份文档" },
+        { id: "search", label: "检索相关资料" },
+        { id: "plan", label: "拆成执行计划" },
+      ]}
+      onSelect={(item) => {
+        console.log(item.label);
+      }}
+    />;
+  `,
+  sections: [
+    {
+      title: "多选模式",
+      code: `
+        <SuggestionChips
+          multiple
+          variant="outline"
+          defaultSelectedIds={["reason"]}
+          items={[
+            {
+              id: "reason",
+              label: "补充推理依据",
+              icon: <MagicWandIcon />,
+            },
+            {
+              id: "source",
+              label: "附带来源链接",
+              icon: <MagnifyingGlassIcon />,
+            },
+            {
+              id: "short",
+              label: "回答精简一点",
+              disabled: true,
+            },
+          ]}
+        />;
+      `,
+      content: (
+        <SuggestionChips
+          multiple
+          variant="outline"
+          defaultSelectedIds={["reason"]}
+          items={[
+            {
+              id: "reason",
+              label: "补充推理依据",
+              icon: <MagicWandIcon />,
+            },
+            {
+              id: "source",
+              label: "附带来源链接",
+              icon: <MagnifyingGlassIcon />,
+            },
+            {
+              id: "short",
+              label: "回答精简一点",
+              disabled: true,
+            },
+          ]}
+        />
+      ),
+    },
+    {
+      title: "紧凑建议",
+      code: `
+        <SuggestionChips
+          size="sm"
+          items={[
+            { id: "translate", label: "翻译" },
+            { id: "rewrite", label: "润色" },
+            { id: "extract", label: "提取要点" },
+            { id: "compare", label: "对比差异" },
+          ]}
+        />;
+      `,
+      content: (
+        <SuggestionChips
+          size="sm"
+          items={[
+            { id: "translate", label: "翻译" },
+            { id: "rewrite", label: "润色" },
+            { id: "extract", label: "提取要点" },
+            { id: "compare", label: "对比差异" },
+          ]}
+        />
+      ),
+    },
+  ],
+  props: [
+    {
+      name: "items",
+      type: "Array<SuggestionChipItem>",
+      required: true,
+      description: "建议项列表。",
+    },
+    {
+      name: "size",
+      type: '"sm" | "md"',
+      defaultValue: '"md"',
+      description: "尺寸，默认 md。",
+    },
+    {
+      name: "variant",
+      type: '"soft" | "outline"',
+      defaultValue: '"soft"',
+      description: "样式形态，默认 soft。",
+    },
+    {
+      name: "selectedIds",
+      type: "Array<string>",
+      description: "受控选中项 id。",
+    },
+    {
+      name: "defaultSelectedIds",
+      type: "Array<string>",
+      defaultValue: "[]",
+      description: "非受控默认选中项 id。",
+    },
+    {
+      name: "multiple",
+      type: "boolean",
+      defaultValue: "false",
+      description: "是否允许多选，默认 false。",
+    },
+    {
+      name: "disabled",
+      type: "boolean",
+      defaultValue: "false",
+      description: "是否禁用整组建议。",
+    },
+    {
+      name: "onSelect",
+      type: "(item: SuggestionChipItem, event: MouseEvent<HTMLButtonElement>) => void",
+      description: "点击建议项时触发。",
+    },
+    {
+      name: "onChange",
+      type: "(selectedIds: Array<string>, item: SuggestionChipItem, event: MouseEvent<HTMLButtonElement>) => void",
+      description: "选中项变化时触发。",
+    },
+    {
+      name: "SuggestionChipItem.id",
+      type: "string",
+      required: true,
+      group: "SuggestionChipItem",
+      description: "建议项唯一标识。",
+    },
+    {
+      name: "SuggestionChipItem.label",
+      type: "ReactNode",
+      required: true,
+      group: "SuggestionChipItem",
+      description: "建议文案。",
+    },
+    {
+      name: "SuggestionChipItem.description",
+      type: "ReactNode",
+      group: "SuggestionChipItem",
+      description: "建议补充说明。",
+    },
+    {
+      name: "SuggestionChipItem.icon",
+      type: "ReactNode",
+      group: "SuggestionChipItem",
+      description: "建议图标。",
+    },
+    {
+      name: "SuggestionChipItem.disabled",
+      type: "boolean",
+      defaultValue: "false",
+      group: "SuggestionChipItem",
+      description: "是否禁用单个建议。",
+    },
+  ],
+});

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

@@ -0,0 +1,110 @@
+import { Switch } from "willa/Switch";
+import "willa/Switch.css";
+
+import { defineDoc } from "#example/catalog/defineDoc";
+
+const stackStyle = {
+  display: "grid",
+  gap: "0.9rem",
+  maxWidth: "42rem",
+} as const;
+
+export default defineDoc({
+  id: "switch",
+  name: "Switch",
+  category: "form",
+  packageName: "willa/Switch",
+  description: "用于开关型配置，适合产品设置和能力启停。",
+  imports: [{ name: "Switch", from: "willa/Switch" }],
+  css: "willa/Switch.css",
+  demo: {
+    name: "Switch",
+    component: Switch,
+    props: {
+      label: "启用自动摘要",
+      description: "生成结果后自动提取重点。",
+      defaultChecked: true,
+    },
+  },
+  code: `
+    import { Switch } from "willa/Switch";
+    import "willa/Switch.css";
+
+    <Switch
+      label="启用自动摘要"
+      description="生成结果后自动提取重点。"
+      defaultChecked
+    />;
+  `,
+  sections: [
+    {
+      title: "配置项",
+      code: `
+        <div style={stackStyle}>
+          <Switch label="联网检索" description="允许模型访问公开资料。" />
+          <Switch
+            defaultChecked
+            label="引用来源"
+            description="回答里展示来源和可信度。"
+          />
+          <Switch disabled label="企业策略锁定" />
+        </div>;
+      `,
+      content: (
+        <div style={stackStyle}>
+          <Switch label="联网检索" description="允许模型访问公开资料。" />
+          <Switch
+            defaultChecked
+            label="引用来源"
+            description="回答里展示来源和可信度。"
+          />
+          <Switch disabled label="企业策略锁定" />
+        </div>
+      ),
+    },
+    {
+      title: "状态",
+      code: `
+        <div style={stackStyle}>
+          <Switch invalid label="错误状态" />
+          <Switch size="sm" label="紧凑开关" />
+        </div>;
+      `,
+      content: (
+        <div style={stackStyle}>
+          <Switch invalid label="错误状态" />
+          <Switch size="sm" label="紧凑开关" />
+        </div>
+      ),
+    },
+  ],
+  props: [
+    {
+      name: "label",
+      type: "ReactNode",
+      description: "开关文案。",
+    },
+    {
+      name: "description",
+      type: "ReactNode",
+      description: "开关补充说明。",
+    },
+    {
+      name: "size",
+      type: '"sm" | "md"',
+      defaultValue: '"md"',
+      description: "开关尺寸。",
+    },
+    {
+      name: "invalid",
+      type: "boolean",
+      defaultValue: "false",
+      description: "展示错误状态。",
+    },
+    {
+      name: "inputClassName",
+      type: "string",
+      description: "传给内部 input 元素的 className。",
+    },
+  ],
+});