willa-workspace 0.0.3-alpha.2739b3e

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

@@ -0,0 +1,188 @@
+import { Checkbox } from "willa/Checkbox";
+import { Button } from "willa/Button";
+import { Form } from "willa/Form";
+import { FormActions } from "willa/FormActions";
+import { FormField } from "willa/FormField";
+import { FormGroup } from "willa/FormGroup";
+import { Input } from "willa/Input";
+import { Select } from "willa/Select";
+import "willa/Button.css";
+import "willa/Checkbox.css";
+import "willa/Form.css";
+import "willa/FormActions.css";
+import "willa/FormField.css";
+import "willa/FormGroup.css";
+import "willa/Input.css";
+import "willa/Select.css";
+
+import { defineDoc } from "#example/catalog/defineDoc";
+
+const modelOptions = [
+  { value: "fast", label: "快速模型" },
+  { value: "balanced", label: "均衡模型" },
+  { value: "quality", label: "高质量模型" },
+];
+
+export default defineDoc({
+  id: "form-group",
+  name: "FormGroup",
+  category: "form",
+  packageName: "willa/FormGroup",
+  description: "用于表单分组、字段间距和移动端自适应布局。",
+  imports: [{ name: "FormGroup", from: "willa/FormGroup" }],
+  css: "willa/FormGroup.css",
+  demo: {
+    name: "FormGroup",
+    component: FormGroup,
+    props: {
+      title: "基础配置",
+      description: "把相关字段收拢在同一组里。",
+    },
+    children: [
+      {
+        name: "FormField",
+        component: FormField,
+        props: {
+          label: "工作区名称",
+        },
+        children: [
+          {
+            name: "Input",
+            component: Input,
+            props: { defaultValue: "Willa AI" },
+          },
+        ],
+      },
+    ],
+  },
+  code: `
+    import { FormField } from "willa/FormField";
+    import { FormGroup } from "willa/FormGroup";
+    import { Input } from "willa/Input";
+    import "willa/FormField.css";
+    import "willa/FormGroup.css";
+    import "willa/Input.css";
+
+    <FormGroup title="基础配置" description="把相关字段收拢在同一组里。">
+      <FormField label="工作区名称">
+        <Input defaultValue="Willa AI" />
+      </FormField>
+    </FormGroup>;
+  `,
+  sections: [
+    {
+      title: "完整表单",
+      code: `
+        <Form
+          actions={
+            <FormActions>
+              <Button variant="ghost">取消</Button>
+              <Button type="submit">保存</Button>
+            </FormActions>
+          }
+        >
+          <FormGroup
+            title="模型配置"
+            description="适合产品设置、AI 参数和后台筛选场景。"
+          >
+            <FormField label="配置名称" required>
+              <Input defaultValue="内容生成助手" width="100%" />
+            </FormField>
+            <FormField label="默认模型">
+              <Select defaultValue="balanced" options={modelOptions} width="100%" />
+            </FormField>
+            <Checkbox
+              defaultChecked
+              label="允许联网检索"
+              description="启用后会在回答前检索公开资料。"
+            />
+          </FormGroup>
+        </Form>;
+      `,
+      content: (
+        <Form
+          actions={
+            <FormActions>
+              <Button variant="ghost">取消</Button>
+              <Button type="submit">保存</Button>
+            </FormActions>
+          }
+        >
+          <FormGroup
+            title="模型配置"
+            description="适合产品设置、AI 参数和后台筛选场景。"
+          >
+            <FormField label="配置名称" required>
+              <Input defaultValue="内容生成助手" width="100%" />
+            </FormField>
+            <FormField label="默认模型">
+              <Select
+                defaultValue="balanced"
+                options={modelOptions}
+                width="100%"
+              />
+            </FormField>
+            <Checkbox
+              defaultChecked
+              label="允许联网检索"
+              description="启用后会在回答前检索公开资料。"
+            />
+          </FormGroup>
+        </Form>
+      ),
+    },
+    {
+      title: "双列布局",
+      code: `
+        <FormGroup title="基础信息" columns={2}>
+          <FormField label="项目名">
+            <Input placeholder="项目名" width="100%" />
+          </FormField>
+          <FormField label="负责人">
+            <Input placeholder="负责人" width="100%" />
+          </FormField>
+        </FormGroup>;
+      `,
+      content: (
+        <FormGroup title="基础信息" columns={2}>
+          <FormField label="项目名">
+            <Input placeholder="项目名" width="100%" />
+          </FormField>
+          <FormField label="负责人">
+            <Input placeholder="负责人" width="100%" />
+          </FormField>
+        </FormGroup>
+      ),
+    },
+  ],
+  props: [
+    {
+      name: "children",
+      type: "ReactNode",
+      required: true,
+      description: "分组内的字段内容。",
+    },
+    {
+      name: "title",
+      type: "ReactNode",
+      description: "分组标题。",
+    },
+    {
+      name: "description",
+      type: "ReactNode",
+      description: "分组说明。",
+    },
+    {
+      name: "gap",
+      type: '"sm" | "md" | "lg"',
+      defaultValue: '"md"',
+      description: "字段间距。",
+    },
+    {
+      name: "columns",
+      type: "1 | 2",
+      defaultValue: "1",
+      description: "字段列数；移动端自动回到单列。",
+    },
+  ],
+});

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

@@ -0,0 +1,158 @@
+import {
+  CheckCircledIcon,
+  ExclamationTriangleIcon,
+  InfoCircledIcon,
+} from "@radix-ui/react-icons";
+import { Button } from "willa/Button";
+import { Form } from "willa/Form";
+import { FormActions } from "willa/FormActions";
+import { FormField } from "willa/FormField";
+import { FormGroup } from "willa/FormGroup";
+import { FormMessage } from "willa/FormMessage";
+import { Input } from "willa/Input";
+import "willa/Button.css";
+import "willa/Form.css";
+import "willa/FormActions.css";
+import "willa/FormField.css";
+import "willa/FormGroup.css";
+import "willa/FormMessage.css";
+import "willa/Input.css";
+
+import { defineDoc } from "#example/catalog/defineDoc";
+
+const stackStyle = {
+  display: "grid",
+  gap: "0.85rem",
+  maxWidth: "42rem",
+} as const;
+
+export default defineDoc({
+  id: "form-message",
+  name: "FormMessage",
+  category: "form",
+  packageName: "willa/FormMessage",
+  description: "用于表单中的辅助提示、状态反馈和提交结果说明。",
+  imports: [{ name: "FormMessage", from: "willa/FormMessage" }],
+  css: "willa/FormMessage.css",
+  demo: {
+    name: "FormMessage",
+    component: FormMessage,
+    props: {
+      tone: "info",
+      icon: <InfoCircledIcon />,
+    },
+    children: "保存后会立即同步到当前工作区。",
+  },
+  code: `
+    import { InfoCircledIcon } from "@radix-ui/react-icons";
+    import { FormMessage } from "willa/FormMessage";
+    import "willa/FormMessage.css";
+
+    <FormMessage tone="info" icon={<InfoCircledIcon />}>
+      保存后会立即同步到当前工作区。
+    </FormMessage>;
+  `,
+  sections: [
+    {
+      title: "表单内使用",
+      code: `
+        <Form
+          actions={
+            <FormActions>
+              <Button variant="ghost">取消</Button>
+              <Button type="submit">保存</Button>
+            </FormActions>
+          }
+        >
+          <FormGroup title="发布配置" description="适合展示提交前后的状态信息。">
+            <FormField label="配置名称" required>
+              <Input defaultValue="模型发布策略" width="100%" />
+            </FormField>
+            <FormMessage tone="warning" icon={<ExclamationTriangleIcon />}>
+              当前配置会影响线上模型，请确认灰度范围。
+            </FormMessage>
+          </FormGroup>
+        </Form>;
+      `,
+      content: (
+        <Form
+          actions={
+            <FormActions>
+              <Button variant="ghost">取消</Button>
+              <Button type="submit">保存</Button>
+            </FormActions>
+          }
+        >
+          <FormGroup
+            title="发布配置"
+            description="适合展示提交前后的状态信息。"
+          >
+            <FormField label="配置名称" required>
+              <Input defaultValue="模型发布策略" width="100%" />
+            </FormField>
+            <FormMessage tone="warning" icon={<ExclamationTriangleIcon />}>
+              当前配置会影响线上模型，请确认灰度范围。
+            </FormMessage>
+          </FormGroup>
+        </Form>
+      ),
+    },
+    {
+      title: "状态类型",
+      code: `
+        <div style={stackStyle}>
+          <FormMessage tone="info" icon={<InfoCircledIcon />}>
+            保存后会立即同步到当前工作区。
+          </FormMessage>
+          <FormMessage tone="success" icon={<CheckCircledIcon />}>
+            配置已保存，可以继续发布。
+          </FormMessage>
+          <FormMessage tone="warning" icon={<ExclamationTriangleIcon />}>
+            当前配置会影响线上模型，请确认灰度范围。
+          </FormMessage>
+          <FormMessage tone="error">提交失败，请检查必填字段。</FormMessage>
+        </div>;
+      `,
+      content: (
+        <div style={stackStyle}>
+          <FormMessage tone="info" icon={<InfoCircledIcon />}>
+            保存后会立即同步到当前工作区。
+          </FormMessage>
+          <FormMessage tone="success" icon={<CheckCircledIcon />}>
+            配置已保存，可以继续发布。
+          </FormMessage>
+          <FormMessage tone="warning" icon={<ExclamationTriangleIcon />}>
+            当前配置会影响线上模型，请确认灰度范围。
+          </FormMessage>
+          <FormMessage tone="error">提交失败，请检查必填字段。</FormMessage>
+        </div>
+      ),
+    },
+  ],
+  props: [
+    {
+      name: "children",
+      type: "ReactNode",
+      required: true,
+      description: "消息内容。",
+    },
+    {
+      name: "tone",
+      type: '"info" | "success" | "warning" | "error"',
+      defaultValue: '"info"',
+      description: "消息语义类型。",
+    },
+    {
+      name: "icon",
+      type: "ReactNode",
+      defaultValue: "由 tone 决定",
+      description: "消息前置图标。",
+    },
+    {
+      name: "role",
+      type: "AriaRole",
+      defaultValue: 'tone === "error" ? "alert" : "status"',
+      description: "自定义可访问性角色；错误态默认 alert，其余默认 status。",
+    },
+  ],
+});