willa-workspace 0.0.3-alpha.2739b3e

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

@@ -0,0 +1,278 @@
+import { useState, type FormEvent } from "react";
+import { Button } from "willa/Button";
+import { Checkbox } from "willa/Checkbox";
+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 { 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/FormMessage.css";
+import "willa/Input.css";
+import "willa/Select.css";
+
+import { defineDoc } from "#example/catalog/defineDoc";
+
+const options = [
+  { value: "fast", label: "快速模式" },
+  { value: "balanced", label: "均衡模式" },
+  { value: "quality", label: "高质量模式" },
+];
+
+const FormPreview = () => {
+  const [submitting, setSubmitting] = useState(false);
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setSubmitting(true);
+    window.setTimeout(() => setSubmitting(false), 900);
+  };
+
+  return (
+    <Form
+      onSubmit={handleSubmit}
+      actions={
+        <FormActions>
+          <Button variant="ghost">取消</Button>
+          <Button type="submit" loading={submitting}>
+            保存
+          </Button>
+        </FormActions>
+      }
+    >
+      <FormGroup
+        title="创建 AI 配置"
+        description="用于产品后台、模型配置和轻量提交场景。"
+      >
+        <FormField label="配置名称" required>
+          <Input name="name" defaultValue="内容生成助手" width="100%" />
+        </FormField>
+        <FormField label="默认模式">
+          <Select
+            name="mode"
+            defaultValue="balanced"
+            options={options}
+            width="100%"
+          />
+        </FormField>
+        <Checkbox
+          name="search"
+          defaultChecked
+          label="允许联网检索"
+          description="回答前可以读取公开资料。"
+        />
+      </FormGroup>
+    </Form>
+  );
+};
+
+export default defineDoc({
+  id: "form",
+  name: "Form",
+  category: "form",
+  packageName: "willa/Form",
+  description: "统一表单语义、表单级错误、提交状态和底部操作区。",
+  imports: [{ name: "Form", from: "willa/Form" }],
+  css: "willa/Form.css",
+  demo: {
+    name: "FormPreview",
+    component: FormPreview,
+  },
+  code: `
+    import { useState, type FormEvent } from "react";
+    import { Button } from "willa/Button";
+    import { Checkbox } from "willa/Checkbox";
+    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 { 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/FormMessage.css";
+    import "willa/Input.css";
+    import "willa/Select.css";
+
+    const options = [
+      { value: "fast", label: "快速模式" },
+      { value: "balanced", label: "均衡模式" },
+      { value: "quality", label: "高质量模式" },
+    ];
+
+    const FormPreview = () => {
+      const [submitting, setSubmitting] = useState(false);
+
+      const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+        event.preventDefault();
+        setSubmitting(true);
+        window.setTimeout(() => setSubmitting(false), 900);
+      };
+
+      return (
+        <Form
+          onSubmit={handleSubmit}
+          actions={
+            <FormActions>
+              <Button variant="ghost">取消</Button>
+              <Button type="submit" loading={submitting}>
+                保存
+              </Button>
+            </FormActions>
+          }
+        >
+          <FormGroup
+            title="创建 AI 配置"
+            description="用于产品后台、模型配置和轻量提交场景。"
+          >
+            <FormField label="配置名称" required>
+              <Input name="name" defaultValue="内容生成助手" width="100%" />
+            </FormField>
+            <FormField label="默认模式">
+              <Select
+                name="mode"
+                defaultValue="balanced"
+                options={options}
+                width="100%"
+              />
+            </FormField>
+            <Checkbox
+              name="search"
+              defaultChecked
+              label="允许联网检索"
+              description="回答前可以读取公开资料。"
+            />
+          </FormGroup>
+        </Form>
+      );
+    };
+  `,
+  sections: [
+    {
+      title: "表单级错误",
+      code: `
+        <Form
+          error="保存失败，请检查配置名称和默认模式。"
+          actions={
+            <FormActions>
+              <Button variant="outline">返回</Button>
+              <Button type="submit">重新提交</Button>
+            </FormActions>
+          }
+        >
+          <FormGroup title="提交配置">
+            <FormField label="配置名称" error="配置名称不能为空。">
+              <Input invalid defaultValue="" width="100%" />
+            </FormField>
+          </FormGroup>
+        </Form>;
+      `,
+      content: (
+        <Form
+          error="保存失败，请检查配置名称和默认模式。"
+          actions={
+            <FormActions>
+              <Button variant="outline">返回</Button>
+              <Button type="submit">重新提交</Button>
+            </FormActions>
+          }
+        >
+          <FormGroup title="提交配置">
+            <FormField label="配置名称" error="配置名称不能为空。">
+              <Input invalid defaultValue="" width="100%" />
+            </FormField>
+          </FormGroup>
+        </Form>
+      ),
+    },
+    {
+      title: "禁用状态",
+      code: `
+        <Form
+          disabled
+          actions={
+            <FormActions>
+              <Button disabled>保存</Button>
+            </FormActions>
+          }
+        >
+          <FormGroup title="只读配置">
+            <FormMessage tone="info">loading 或 disabled 会禁用表单主体。</FormMessage>
+            <FormField label="配置名称">
+              <Input defaultValue="已锁定配置" width="100%" />
+            </FormField>
+            <Checkbox defaultChecked label="企业策略锁定" />
+          </FormGroup>
+        </Form>;
+      `,
+      content: (
+        <Form
+          disabled
+          actions={
+            <FormActions>
+              <Button disabled>保存</Button>
+            </FormActions>
+          }
+        >
+          <FormGroup title="只读配置">
+            <FormMessage tone="info">
+              loading 或 disabled 会禁用表单主体。
+            </FormMessage>
+            <FormField label="配置名称">
+              <Input defaultValue="已锁定配置" width="100%" />
+            </FormField>
+            <Checkbox defaultChecked label="企业策略锁定" />
+          </FormGroup>
+        </Form>
+      ),
+    },
+  ],
+  props: [
+    {
+      name: "children",
+      type: "ReactNode",
+      required: true,
+      description: "表单主体字段。",
+    },
+    {
+      name: "error",
+      type: "ReactNode",
+      description: "表单级错误提示。",
+    },
+    {
+      name: "actions",
+      type: "ReactNode",
+      description: "底部操作区，通常放 FormActions。",
+    },
+    {
+      name: "gap",
+      type: '"sm" | "md" | "lg"',
+      defaultValue: '"md"',
+      description: "表单字段间距。",
+    },
+    {
+      name: "disabled",
+      type: "boolean",
+      defaultValue: "false",
+      description: "禁用表单主体。",
+    },
+    {
+      name: "loading",
+      type: "boolean",
+      defaultValue: "false",
+      description: "标记提交中，并禁用表单主体。",
+    },
+  ],
+});

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

@@ -0,0 +1,198 @@
+import {
+  CheckIcon,
+  Cross2Icon,
+  DownloadIcon,
+  ReloadIcon,
+} from "@radix-ui/react-icons";
+import { Button } from "willa/Button";
+import { FormActions } from "willa/FormActions";
+import { IconButton } from "willa/IconButton";
+import "willa/Button.css";
+import "willa/FormActions.css";
+import "willa/IconButton.css";
+
+import { defineDoc } from "#example/catalog/defineDoc";
+
+const stackStyle = {
+  display: "grid",
+  gap: "1rem",
+  maxWidth: "42rem",
+} as const;
+
+export default defineDoc({
+  id: "form-actions",
+  name: "FormActions",
+  category: "form",
+  packageName: "willa/FormActions",
+  description: "用于表单底部提交、取消和辅助操作的布局组件。",
+  imports: [{ name: "FormActions", from: "willa/FormActions" }],
+  css: "willa/FormActions.css",
+  demo: {
+    name: "FormActions",
+    component: FormActions,
+    props: { gap: "md" },
+    children: [
+      {
+        name: "Button",
+        component: Button,
+        props: { variant: "ghost" },
+        children: "取消",
+      },
+      {
+        name: "Button",
+        component: Button,
+        props: { type: "submit" },
+        children: "保存",
+      },
+    ],
+  },
+  code: `
+    import { Button } from "willa/Button";
+    import { FormActions } from "willa/FormActions";
+    import "willa/Button.css";
+    import "willa/FormActions.css";
+
+    <FormActions gap="md">
+      <Button variant="ghost">取消</Button>
+      <Button type="submit">保存</Button>
+    </FormActions>;
+  `,
+  sections: [
+    {
+      title: "对齐方式",
+      code: `
+        <div style={stackStyle}>
+          <FormActions align="start">
+            <Button size="sm">保存</Button>
+            <Button size="sm" variant="ghost">
+              取消
+            </Button>
+          </FormActions>
+          <FormActions align="between">
+            <Button size="sm" variant="ghost">
+              删除
+            </Button>
+            <Button size="sm">保存</Button>
+          </FormActions>
+        </div>;
+      `,
+      content: (
+        <div style={stackStyle}>
+          <FormActions align="start">
+            <Button size="sm">保存</Button>
+            <Button size="sm" variant="ghost">
+              取消
+            </Button>
+          </FormActions>
+          <FormActions align="between">
+            <Button size="sm" variant="ghost">
+              删除
+            </Button>
+            <Button size="sm">保存</Button>
+          </FormActions>
+        </div>
+      ),
+    },
+    {
+      title: "图标操作",
+      code: `
+        <FormActions align="start" gap="xs">
+          <IconButton
+            icon={<ReloadIcon />}
+            ariaLabel="重新加载"
+            size="sm"
+            variant="ghost"
+          />
+          <IconButton
+            icon={<DownloadIcon />}
+            ariaLabel="下载"
+            size="sm"
+            variant="ghost"
+          />
+          <IconButton icon={<CheckIcon />} ariaLabel="确认" size="sm" variant="ghost" />
+          <IconButton
+            icon={<Cross2Icon />}
+            ariaLabel="关闭"
+            size="sm"
+            variant="ghost"
+          />
+        </FormActions>;
+      `,
+      content: (
+        <FormActions align="start" gap="xs">
+          <IconButton
+            icon={<ReloadIcon />}
+            ariaLabel="重新加载"
+            size="sm"
+            variant="ghost"
+          />
+          <IconButton
+            icon={<DownloadIcon />}
+            ariaLabel="下载"
+            size="sm"
+            variant="ghost"
+          />
+          <IconButton
+            icon={<CheckIcon />}
+            ariaLabel="确认"
+            size="sm"
+            variant="ghost"
+          />
+          <IconButton
+            icon={<Cross2Icon />}
+            ariaLabel="关闭"
+            size="sm"
+            variant="ghost"
+          />
+        </FormActions>
+      ),
+    },
+    {
+      title: "纵向布局",
+      code: `
+        <FormActions direction="column">
+          <Button>确认提交</Button>
+          <Button variant="outline">稍后再说</Button>
+        </FormActions>;
+      `,
+      content: (
+        <FormActions direction="column">
+          <Button>确认提交</Button>
+          <Button variant="outline">稍后再说</Button>
+        </FormActions>
+      ),
+    },
+  ],
+  props: [
+    {
+      name: "children",
+      type: "ReactNode",
+      required: true,
+      description: "操作按钮或自定义操作内容。",
+    },
+    {
+      name: "align",
+      type: '"start" | "end" | "between"',
+      defaultValue: '"end"',
+      description: "横向对齐方式。",
+    },
+    {
+      name: "direction",
+      type: '"row" | "column"',
+      defaultValue: '"row"',
+      description: "排列方向。",
+    },
+    {
+      name: "gap",
+      type: '"xs" | "sm" | "md"',
+      defaultValue: '"sm"',
+      description: "操作项之间的间距。",
+    },
+    {
+      name: "sticky",
+      type: "boolean",
+      defaultValue: "false",
+      description: "吸附在滚动容器底部。",
+    },
+  ],
+});

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

@@ -0,0 +1,193 @@
+import { Button } from "willa/Button";
+import { FormField } from "willa/FormField";
+import { Input } from "willa/Input";
+import { TextArea } from "willa/TextArea";
+import "willa/Button.css";
+import "willa/FormField.css";
+import "willa/Input.css";
+import "willa/TextArea.css";
+
+import { defineDoc } from "#example/catalog/defineDoc";
+
+const stackStyle = {
+  display: "grid",
+  gap: "1rem",
+  maxWidth: "42rem",
+} as const;
+
+const rowStyle = {
+  display: "flex",
+  flexWrap: "wrap",
+  gap: "0.7rem",
+} as const;
+
+export default defineDoc({
+  id: "form-field",
+  name: "FormField",
+  category: "form",
+  packageName: "willa/FormField",
+  description: "统一表单字段的 label、说明、必填和错误状态。",
+  imports: [{ name: "FormField", from: "willa/FormField" }],
+  css: "willa/FormField.css",
+  demo: {
+    name: "FormField",
+    component: FormField,
+    props: {
+      label: "项目名称",
+      description: "用于工作台、文档和分享链接中的展示名称。",
+      required: true,
+    },
+    children: [
+      {
+        name: "Input",
+        component: Input,
+        props: {
+          placeholder: "输入项目名称",
+          width: "100%",
+        },
+      },
+    ],
+  },
+  code: `
+    import { FormField } from "willa/FormField";
+    import { Input } from "willa/Input";
+    import "willa/FormField.css";
+    import "willa/Input.css";
+
+    <FormField
+      label="项目名称"
+      description="用于工作台、文档和分享链接中的展示名称。"
+      required
+    >
+      <Input placeholder="输入项目名称" width="100%" />
+    </FormField>;
+  `,
+  sections: [
+    {
+      title: "字段状态",
+      code: `
+        <div style={stackStyle}>
+          <FormField label="名称" description="建议控制在 20 个字以内。">
+            <Input defaultValue="客户反馈分析" width="100%" />
+          </FormField>
+          <FormField label="说明" required>
+            <TextArea placeholder="描述这个配置的用途" width="100%" />
+          </FormField>
+          <FormField label="API Key" error="请输入有效的 API Key。">
+            <Input invalid defaultValue="missing" width="100%" />
+          </FormField>
+        </div>;
+      `,
+      content: (
+        <div style={stackStyle}>
+          <FormField label="名称" description="建议控制在 20 个字以内。">
+            <Input defaultValue="客户反馈分析" width="100%" />
+          </FormField>
+          <FormField label="说明" required>
+            <TextArea placeholder="描述这个配置的用途" width="100%" />
+          </FormField>
+          <FormField label="API Key" error="请输入有效的 API Key。">
+            <Input invalid defaultValue="missing" width="100%" />
+          </FormField>
+        </div>
+      ),
+    },
+    {
+      title: "横向布局",
+      code: `
+        <div style={stackStyle}>
+          <FormField
+            label="默认模型"
+            description="适合设置页和密集配置表单。"
+            orientation="horizontal"
+          >
+            <Input defaultValue="willa-ai-default" width="100%" />
+          </FormField>
+          <FormField label="提交" orientation="horizontal">
+            <div style={rowStyle}>
+              <Button size="sm">保存</Button>
+              <Button size="sm" variant="ghost">
+                取消
+              </Button>
+            </div>
+          </FormField>
+        </div>;
+      `,
+      content: (
+        <div style={stackStyle}>
+          <FormField
+            label="默认模型"
+            description="适合设置页和密集配置表单。"
+            orientation="horizontal"
+          >
+            <Input defaultValue="willa-ai-default" width="100%" />
+          </FormField>
+          <FormField label="提交" orientation="horizontal">
+            <div style={rowStyle}>
+              <Button size="sm">保存</Button>
+              <Button size="sm" variant="ghost">
+                取消
+              </Button>
+            </div>
+          </FormField>
+        </div>
+      ),
+    },
+  ],
+  props: [
+    {
+      name: "children",
+      type: "ReactNode",
+      required: true,
+      description: "字段控件内容。",
+    },
+    {
+      name: "label",
+      type: "ReactNode",
+      description: "字段名称。",
+    },
+    {
+      name: "description",
+      type: "ReactNode",
+      description: "字段补充说明。",
+    },
+    {
+      name: "error",
+      type: "ReactNode",
+      description: "错误提示；存在时展示错误状态。",
+    },
+    {
+      name: "required",
+      type: "boolean",
+      defaultValue: "false",
+      description: "展示必填标记。",
+    },
+    {
+      name: "htmlFor",
+      type: "string",
+      description: "关联内部控件 id。",
+    },
+    {
+      name: "size",
+      type: '"sm" | "md"',
+      defaultValue: '"md"',
+      description: "字段文字尺寸。",
+    },
+    {
+      name: "orientation",
+      type: '"vertical" | "horizontal"',
+      defaultValue: '"vertical"',
+      description: "字段标签和控件的排列方式。",
+    },
+    {
+      name: "controlClassName",
+      type: "string",
+      description: "控制层 className。",
+    },
+    {
+      name: "labelClassName",
+      type: "string",
+      description: "标签 className。",
+    },
+  ],
+});