willa-workspace 0.0.3-alpha.2739b3e

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

@@ -0,0 +1,459 @@
+import { useState, type CSSProperties } from "react";
+import { ScheduleCalendar, type ScheduleCalendarEvent } from "willa/Calendar";
+import { Badge } from "willa/Badge";
+import "willa/Calendar.css";
+import "willa/Badge.css";
+
+import { defineDoc } from "#example/catalog/defineDoc";
+
+const demoFrameStyle: CSSProperties = {
+  display: "grid",
+  justifyItems: "center",
+};
+
+const stackStyle: CSSProperties = {
+  display: "grid",
+  width: "min(100%, 56rem)",
+  minWidth: 0,
+  gap: "0.82rem",
+};
+
+const noteBadgeStyle: CSSProperties = {
+  maxWidth: "100%",
+  whiteSpace: "normal",
+  lineHeight: 1.5,
+  textAlign: "left",
+};
+
+const scheduleEvents: Array<ScheduleCalendarEvent> = [
+  {
+    id: "standup",
+    title: "产品站会",
+    start: "2026-06-16 09:30",
+    end: "2026-06-16 10:00",
+    tone: "info",
+    meta: "30 分钟",
+  },
+  {
+    id: "review",
+    title: "发布评审",
+    start: "2026-06-18 14:00",
+    end: "2026-06-18 15:30",
+    tone: "success",
+    meta: "组件和文档",
+  },
+  {
+    id: "holiday",
+    title: "端午排期冻结",
+    start: "2026-06-19 11:00",
+    end: "2026-06-19 12:00",
+    tone: "warning",
+    meta: "发布窗口",
+  },
+  {
+    id: "risk-review",
+    title: "风险复核",
+    start: "2026-06-18 14:30",
+    end: "2026-06-18 15:30",
+    tone: "warning",
+    meta: "并行评审",
+  },
+];
+
+const allDayScheduleEvents: Array<ScheduleCalendarEvent> = [
+  {
+    id: "freeze",
+    title: "发布冻结",
+    start: "2026-06-19",
+    end: "2026-06-20",
+    tone: "warning",
+  },
+];
+
+const ScheduleCalendarPreview = () => {
+  const [selectedEventId, setSelectedEventId] = useState("review");
+
+  return (
+    <div style={demoFrameStyle}>
+      <ScheduleCalendar
+        width="min(100%, 56rem)"
+        defaultVisibleDate={new Date(2026, 5, 16)}
+        selectedEventId={selectedEventId}
+        slotMinutes={30}
+        startHour={8}
+        endHour={18}
+        events={scheduleEvents}
+        allDayEvents={allDayScheduleEvents}
+        onEventClick={(event) => setSelectedEventId(event.id)}
+      />
+    </div>
+  );
+};
+
+const SelectedScheduleCalendar = () => {
+  const [selectedEventId, setSelectedEventId] = useState("review");
+  const [selectedSlot, setSelectedSlot] = useState("2026-06-17 10:00");
+
+  return (
+    <div style={stackStyle}>
+      <Badge tone="info" style={noteBadgeStyle}>
+        当前选择：{selectedEventId || selectedSlot || "未选择"}
+      </Badge>
+      <ScheduleCalendar
+        defaultVisibleDate={new Date(2026, 5, 16)}
+        selectedEventId={selectedEventId}
+        selectedSlot={selectedSlot}
+        slotMinutes={30}
+        startHour={8}
+        endHour={18}
+        events={scheduleEvents}
+        allDayEvents={allDayScheduleEvents}
+        onEventClick={(event) => {
+          setSelectedEventId(event.id);
+          setSelectedSlot("");
+        }}
+        onSlotClick={(value) => {
+          setSelectedEventId("");
+          setSelectedSlot(value);
+        }}
+      />
+    </div>
+  );
+};
+
+export default defineDoc({
+  id: "schedule-calendar",
+  name: "ScheduleCalendar",
+  displayName: "排期日历",
+  category: "form",
+  packageName: "willa/Calendar",
+  description:
+    "排期查看器，用于展示周排期、月排期、全天事件和可点击的时间格；适合查看、选择和触发外部操作，不内置拖拽创建或事件编辑。",
+  imports: [
+    { name: "ScheduleCalendar", from: "willa/Calendar" },
+    { name: "Badge", from: "willa/Badge" },
+  ],
+  css: "willa/Calendar.css",
+  demo: {
+    name: "ScheduleCalendarPreview",
+    component: ScheduleCalendarPreview,
+  },
+  code: `
+    import { useState } from "react";
+    import {
+      ScheduleCalendar,
+      type ScheduleCalendarEvent,
+    } from "willa/Calendar";
+    import "willa/Calendar.css";
+
+    const events: Array<ScheduleCalendarEvent> = [
+      {
+        id: "standup",
+        title: "产品站会",
+        start: "2026-06-16 09:30",
+        end: "2026-06-16 10:00",
+        tone: "info",
+        meta: "30 分钟",
+      },
+      {
+        id: "review",
+        title: "发布评审",
+        start: "2026-06-18 14:00",
+        end: "2026-06-18 15:30",
+        tone: "success",
+        meta: "组件和文档",
+      },
+    ];
+
+    const Demo = () => {
+      const [selectedEventId, setSelectedEventId] = useState("review");
+
+      return (
+        <ScheduleCalendar
+          width="min(100%, 56rem)"
+          defaultVisibleDate={new Date(2026, 5, 16)}
+          selectedEventId={selectedEventId}
+          slotMinutes={30}
+          startHour={8}
+          endHour={18}
+          events={events}
+          onEventClick={(event) => setSelectedEventId(event.id)}
+        />
+      );
+    };
+  `,
+  sections: [
+    {
+      title: "定位边界",
+      code: `
+        <ScheduleCalendar
+          width="min(100%, 56rem)"
+          defaultVisibleDate={new Date(2026, 5, 16)}
+          events={scheduleEvents}
+          allDayEvents={allDayScheduleEvents}
+        />
+      `,
+      content: (
+        <div style={stackStyle}>
+          <Badge tone="info" style={noteBadgeStyle}>
+            适合排期查看、事件选择和空白时间格点击；编辑表单、拖拽创建和保存流程由业务侧承接。
+          </Badge>
+          <Badge tone="warning" style={noteBadgeStyle}>
+            周视图和月视图是桌面优先的信息密度，移动端保留横向浏览，不压缩为完整移动排期工作台。
+          </Badge>
+          <ScheduleCalendar
+            width="min(100%, 56rem)"
+            defaultVisibleDate={new Date(2026, 5, 16)}
+            events={scheduleEvents}
+            allDayEvents={allDayScheduleEvents}
+          />
+        </div>
+      ),
+    },
+    {
+      title: "周视图和月视图",
+      code: `
+        <div style={stackStyle}>
+          <ScheduleCalendar
+            defaultVisibleDate={new Date(2026, 5, 16)}
+            defaultView="week"
+            slotMinutes={30}
+            startHour={8}
+            endHour={18}
+            events={scheduleEvents}
+            allDayEvents={allDayScheduleEvents}
+          />
+          <ScheduleCalendar
+            defaultVisibleDate={new Date(2026, 5, 16)}
+            defaultView="month"
+            events={scheduleEvents}
+            allDayEvents={allDayScheduleEvents}
+          />
+        </div>
+      `,
+      content: (
+        <div style={stackStyle}>
+          <ScheduleCalendar
+            defaultVisibleDate={new Date(2026, 5, 16)}
+            defaultView="week"
+            slotMinutes={30}
+            startHour={8}
+            endHour={18}
+            events={scheduleEvents}
+            allDayEvents={allDayScheduleEvents}
+          />
+          <ScheduleCalendar
+            defaultVisibleDate={new Date(2026, 5, 16)}
+            defaultView="month"
+            events={scheduleEvents}
+            allDayEvents={allDayScheduleEvents}
+          />
+        </div>
+      ),
+    },
+    {
+      title: "选中态",
+      code: `
+        const [selectedEventId, setSelectedEventId] = useState("review");
+        const [selectedSlot, setSelectedSlot] = useState("2026-06-17 10:00");
+
+        <ScheduleCalendar
+          defaultVisibleDate={new Date(2026, 5, 16)}
+          selectedEventId={selectedEventId}
+          selectedSlot={selectedSlot}
+          slotMinutes={30}
+          startHour={8}
+          endHour={18}
+          events={scheduleEvents}
+          allDayEvents={allDayScheduleEvents}
+          onEventClick={(event) => {
+            setSelectedEventId(event.id);
+            setSelectedSlot("");
+          }}
+          onSlotClick={(value) => {
+            setSelectedEventId("");
+            setSelectedSlot(value);
+          }}
+        />;
+      `,
+      content: <SelectedScheduleCalendar />,
+    },
+    {
+      title: "空态和禁用",
+      code: `
+        <ScheduleCalendar
+          defaultVisibleDate={new Date(2026, 5, 16)}
+          emptyText="当前范围没有排期"
+          disabledDate={(value) => {
+            const day = new Date(\`\${value}T00:00:00\`).getDay();
+
+            return day === 0 || day === 6;
+          }}
+          disabledSlot={(value) => value.endsWith("12:00")}
+        />;
+      `,
+      content: (
+        <div style={stackStyle}>
+          <ScheduleCalendar
+            defaultVisibleDate={new Date(2026, 5, 16)}
+            emptyText="当前范围没有排期"
+            disabledDate={(value) => {
+              const day = new Date(`${value}T00:00:00`).getDay();
+
+              return day === 0 || day === 6;
+            }}
+            disabledSlot={(value) => value.endsWith("12:00")}
+          />
+        </div>
+      ),
+    },
+    {
+      title: "事件时间语义",
+      code: `
+        const allDayEvents: Array<ScheduleCalendarEvent> = [
+          {
+            id: "freeze",
+            title: "发布冻结",
+            start: "2026-06-19",
+            end: "2026-06-20",
+            tone: "warning",
+          },
+        ];
+
+        <ScheduleCalendar
+          defaultVisibleDate={new Date(2026, 5, 16)}
+          allDayEvents={allDayEvents}
+        />;
+      `,
+      content: (
+        <div style={stackStyle}>
+          <Badge tone="warning" style={noteBadgeStyle}>
+            全天事件的 end 是包含结束日；events
+            只接收单日时段，跨天或无时间的时段事件会被忽略并提示。
+          </Badge>
+          <ScheduleCalendar
+            defaultVisibleDate={new Date(2026, 5, 16)}
+            allDayEvents={allDayScheduleEvents}
+          />
+        </div>
+      ),
+    },
+  ],
+  props: [
+    {
+      name: "width",
+      type: "CSSProperties['width']",
+      description: "自定义宽度；设置为 100% 时占满父容器。",
+    },
+    {
+      name: "view",
+      type: '"week" | "month"',
+      description:
+        "受控排期视图；week 展示小时网格，month 展示月排期网格。两种视图都是桌面优先布局，移动端保留横向浏览。",
+    },
+    {
+      name: "defaultView",
+      type: '"week" | "month"',
+      defaultValue: '"week"',
+      description: "非受控默认排期视图。",
+    },
+    {
+      name: "visibleDate",
+      type: "Date",
+      description: "受控当前展示日期；周视图定位周，月视图定位月份。",
+    },
+    {
+      name: "defaultVisibleDate",
+      type: "Date",
+      defaultValue: "今天所在视图",
+      description:
+        "非受控初始展示日期；week 锚定到所在周，month 锚定到所在月。",
+    },
+    {
+      name: "events",
+      type: "Array<ScheduleCalendarEvent>",
+      defaultValue: "[]",
+      description:
+        "时段事件，start 和 end 使用 YYYY-MM-DD HH:mm；只按单日时段布局，跨天或无时间的事件会被忽略并提示。",
+    },
+    {
+      name: "allDayEvents",
+      type: "Array<ScheduleCalendarEvent>",
+      defaultValue: "[]",
+      description:
+        "全天或日期区间事件，start 和 end 可以只传日期，end 为包含结束日。跨天排期优先放到这里表达。",
+    },
+    {
+      name: "selectedEventId",
+      type: "string",
+      description: "当前选中的事件 id。",
+    },
+    {
+      name: "selectedSlot",
+      type: "string",
+      description:
+        "当前选中的空白时间格，格式为 YYYY-MM-DD 或 YYYY-MM-DD HH:mm。",
+    },
+    {
+      name: "emptyText",
+      type: "ReactNode",
+      defaultValue: '"暂无日程"',
+      description: "没有事件时展示的空态内容；不内置创建入口。",
+    },
+    {
+      name: "disabledDate",
+      type: "(value: string) => boolean",
+      description: "禁用指定日期；会影响全天格和月视图日期格。",
+    },
+    {
+      name: "disabledSlot",
+      type: "(value: string) => boolean",
+      description: "禁用指定时段格，value 为 YYYY-MM-DD HH:mm。",
+    },
+    {
+      name: "slotMinutes",
+      type: "number",
+      defaultValue: "60",
+      description: "时间格粒度；常用 15、30 或 60。",
+    },
+    {
+      name: "startHour",
+      type: "number",
+      defaultValue: "8",
+      description: "周排期网格的起始小时。",
+    },
+    {
+      name: "endHour",
+      type: "number",
+      defaultValue: "18",
+      description: "周排期网格的结束小时。",
+    },
+    {
+      name: "renderEvent",
+      type: "(event: ScheduleCalendarEvent, context: ScheduleCalendarEventContext) => ReactNode",
+      description: "自定义事件块展示内容；编辑表单和保存流程由业务侧处理。",
+    },
+    {
+      name: "onViewChange",
+      type: "(view: ScheduleCalendarView) => void",
+      description: "排期视图切换时触发。",
+    },
+    {
+      name: "onVisibleDateChange",
+      type: "(date: Date) => void",
+      description: "排期面板翻页时触发。",
+    },
+    {
+      name: "onSlotClick",
+      type: "(value: string) => void",
+      description:
+        "点击空白时间格时触发，可用于打开外部创建流程；组件不内置创建交互。",
+    },
+    {
+      name: "onEventClick",
+      type: "(event: ScheduleCalendarEvent) => void",
+      description:
+        "点击事件块时触发，可用于打开外部详情或编辑流程；组件不内置事件编辑。",
+    },
+  ],
+});

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

@@ -0,0 +1,217 @@
+import { useState } from "react";
+import { Badge } from "willa/Badge";
+import { SearchInput } from "willa/SearchInput";
+import "willa/Badge.css";
+import "willa/SearchInput.css";
+
+import { defineDoc } from "#example/catalog/defineDoc";
+
+const stackStyle = {
+  display: "grid",
+  gap: "0.85rem",
+  maxWidth: "44rem",
+  marginInline: "auto",
+} as const;
+
+const rowStyle = {
+  display: "flex",
+  flexWrap: "wrap",
+  alignItems: "center",
+  gap: "0.75rem",
+  maxWidth: "44rem",
+  marginInline: "auto",
+} as const;
+
+const ControlledSearchPreview = () => {
+  const [keyword, setKeyword] = useState("组件文档");
+  const [submitted, setSubmitted] = useState("组件文档");
+
+  return (
+    <div style={stackStyle}>
+      <SearchInput
+        value={keyword}
+        onValueChange={setKeyword}
+        onSearch={setSubmitted}
+        onClear={() => setSubmitted("")}
+        placeholder="搜索组件、文档或示例"
+        width="100%"
+      />
+      <Badge tone={submitted ? "info" : "neutral"}>
+        {submitted ? `已搜索：${submitted}` : "暂无搜索内容"}
+      </Badge>
+    </div>
+  );
+};
+
+export default defineDoc({
+  id: "search-input",
+  name: "SearchInput",
+  category: "form",
+  packageName: "willa/SearchInput",
+  description: "带搜索图标、清除按钮和回车搜索语义的单行输入框。",
+  imports: [{ name: "SearchInput", from: "willa/SearchInput" }],
+  css: "willa/SearchInput.css",
+  demo: {
+    name: "SearchInput",
+    component: SearchInput,
+    props: {
+      placeholder: "搜索组件、文档或示例",
+      width: "100%",
+    },
+  },
+  code: `
+    import { SearchInput } from "willa/SearchInput";
+    import "willa/SearchInput.css";
+
+    <SearchInput placeholder="搜索组件、文档或示例" width="100%" />;
+  `,
+  sections: [
+    {
+      title: "基础搜索",
+      code: `
+        <div style={stackStyle}>
+          <SearchInput placeholder="搜索项目" width="100%" />
+          <SearchInput size="sm" placeholder="紧凑搜索" width="16rem" />
+          <SearchInput size="lg" placeholder="大尺寸搜索" width="100%" />
+        </div>;
+      `,
+      content: (
+        <div style={stackStyle}>
+          <SearchInput placeholder="搜索项目" width="100%" />
+          <SearchInput size="sm" placeholder="紧凑搜索" width="16rem" />
+          <SearchInput size="lg" placeholder="大尺寸搜索" width="100%" />
+        </div>
+      ),
+    },
+    {
+      title: "受控和清除",
+      code: `
+        import { useState } from "react";
+        import { Badge } from "willa/Badge";
+        import { SearchInput } from "willa/SearchInput";
+        import "willa/Badge.css";
+        import "willa/SearchInput.css";
+
+        const Demo = () => {
+          const [keyword, setKeyword] = useState("组件文档");
+          const [submitted, setSubmitted] = useState("组件文档");
+
+          return (
+            <div style={stackStyle}>
+              <SearchInput
+                value={keyword}
+                onValueChange={setKeyword}
+                onSearch={setSubmitted}
+                onClear={() => setSubmitted("")}
+                placeholder="搜索组件、文档或示例"
+                width="100%"
+              />
+              <Badge tone={submitted ? "info" : "neutral"}>
+                {submitted ? \`已搜索：\${submitted}\` : "暂无搜索内容"}
+              </Badge>
+            </div>
+          );
+        };
+      `,
+      content: <ControlledSearchPreview />,
+    },
+    {
+      title: "状态",
+      code: `
+        <div style={rowStyle}>
+          <SearchInput defaultValue="发布记录" clearable={false} />
+          <SearchInput invalid defaultValue="错误关键词" />
+          <SearchInput disabled placeholder="当前不可搜索" />
+        </div>;
+      `,
+      content: (
+        <div style={rowStyle}>
+          <SearchInput defaultValue="发布记录" clearable={false} />
+          <SearchInput invalid defaultValue="错误关键词" />
+          <SearchInput disabled placeholder="当前不可搜索" />
+        </div>
+      ),
+    },
+  ],
+  props: [
+    {
+      name: "value",
+      type: "string",
+      description: "受控搜索内容。",
+    },
+    {
+      name: "defaultValue",
+      type: "string",
+      defaultValue: '""',
+      description: "非受控搜索默认内容。",
+    },
+    {
+      name: "clearable",
+      type: "boolean",
+      defaultValue: "true",
+      description: "是否在有内容时展示清除按钮，默认开启。",
+    },
+    {
+      name: "clearLabel",
+      type: "string",
+      defaultValue: '"清空搜索"',
+      description: "清除按钮的无障碍文案。",
+    },
+    {
+      name: "onValueChange",
+      type: "(value: string) => void",
+      description: "输入内容变化时触发。",
+    },
+    {
+      name: "onSearch",
+      type: "(value: string) => void",
+      description: "按 Enter 触发搜索时回调，传入 trim 后的内容。",
+    },
+    {
+      name: "onClear",
+      type: "() => void",
+      description: "点击清除按钮后触发。",
+    },
+    {
+      name: "size",
+      type: '"sm" | "md" | "lg"',
+      defaultValue: '"md"',
+      description: "继承 Input 的尺寸。",
+    },
+    {
+      name: "width",
+      type: "CSSProperties['width']",
+      description: "自定义搜索框宽度。",
+    },
+    {
+      name: "backgroundColor",
+      type: "string",
+      description: "背景色。",
+    },
+    {
+      name: "inputClassName",
+      type: "string",
+      description: "input 元素 className。",
+    },
+    {
+      name: "invalid",
+      type: "boolean",
+      description: "是否无效状态。",
+    },
+    {
+      name: "leadingAddon",
+      type: "ReactNode",
+      description: "前后置附加元素。",
+    },
+    {
+      name: "textColor",
+      type: "string",
+      description: "文本色。",
+    },
+    {
+      name: "variant",
+      type: "InputVariant",
+      description: "展示变体。",
+    },
+  ],
+});