@baishuyun/ai-design 1.0.2 → 1.0.4

package/src/components/subform-fields-value-checker.tsx

@@ -0,0 +1,185 @@
+import { memo, useCallback, useEffect, useState } from 'react';
+import { FieldType, ValueOf } from '@baishuyun/types';
+import { FieldTypeNameMap } from '../const/ui';
+import { ToolUIPart } from 'ai';
+import { FieldsTools } from '@baishuyun/agents';
+import { toHumanReadable } from '../lib/utils';
+import { Collapsible, CollapsibleContent } from './collapsible';
+import LineChecker from './line-checker';
+
+const Checker = ({
+  disabled,
+  onCheckedChange,
+
+  label,
+  val,
+  streaming,
+  readonly,
+}: {
+  label: string;
+  val: string;
+  onCheckedChange: (v: boolean) => void;
+  disabled?: boolean;
+  desc: string;
+  readonly?: boolean;
+  streaming?: boolean;
+}) => {
+  return (
+    <LineChecker
+      streaming={streaming}
+      readonly={readonly}
+      title={label}
+      disabled={disabled}
+      defaultChecked={true}
+      onCheckedChange={onCheckedChange}
+      className="pl-9"
+      shortDesc={val}
+    />
+  );
+};
+
+const SubFieldChecker = memo(
+  ({
+    field,
+    readonly,
+    onCheckedChange,
+    streaming,
+  }: {
+    onCheckedChange: (
+      checked: boolean,
+      field: ValueOf<Pick<ToolUIPart<FieldsTools>, 'output'>>
+    ) => void;
+    readonly?: boolean;
+    streaming?: boolean;
+    field: ValueOf<Pick<ToolUIPart<FieldsTools>, 'output'>>;
+  }) => {
+    const { widget, label } = field;
+    if (!widget) {
+      return null;
+    }
+
+    const { type, value: v } = widget;
+    const t = type as FieldType;
+    if (!FieldTypeNameMap.hasOwnProperty(t)) {
+      return null;
+    }
+
+    const value = toHumanReadable(v, t);
+
+    const typeDesc = FieldTypeNameMap[t] || FieldTypeNameMap.unknown;
+
+    const handleCheckChange = useCallback(
+      (v: boolean) => {
+        onCheckedChange(v, field);
+      },
+      [field]
+    );
+
+    useEffect(() => {
+      // 默认勾选上
+      handleCheckChange(true);
+    }, []);
+
+    return (
+      <Checker
+        streaming={streaming}
+        readonly={readonly}
+        desc={typeDesc}
+        label={label}
+        val={value as string}
+        onCheckedChange={handleCheckChange}
+      />
+    );
+  },
+  (p1, p2) => {
+    const isNameEqual =
+      p1.field.widget?.widgetName === p2.field.widget?.widgetName &&
+      p1.readonly === p2.readonly &&
+      p1.streaming === p2.streaming;
+    return isNameEqual;
+  }
+);
+
+type F = ValueOf<Pick<ToolUIPart<FieldsTools>, 'output'>>;
+
+interface generatedField {
+  label: string;
+  fieldName: string;
+  fieldType: string;
+  value: any;
+}
+
+type onSubformFieldChangeParam = {
+  checked: boolean;
+  field: F;
+  parentFieldName: string;
+  row?: number;
+  col?: number;
+};
+
+/**
+ * 专门渲染子表单下的字段勾选
+ */
+export const SubformFieldsValueChecker = ({
+  subformField,
+  onChange,
+  streaming,
+  readonly,
+}: {
+  onChange: (p: onSubformFieldChangeParam) => void;
+  subformField: ValueOf<Pick<ToolUIPart<FieldsTools>, 'output'>>;
+  streaming?: boolean;
+  readonly?: boolean;
+}) => {
+  if (!subformField.widget.value || !subformField.widget.value.length) {
+    return null;
+  }
+
+  const subformRecords = subformField.widget.value;
+
+  // 默认展开
+  const [openAll, setOpenAll] = useState(true);
+
+  return (
+    <Collapsible open={openAll} onOpenChange={setOpenAll}>
+      <CollapsibleContent>
+        {subformRecords.map((rowData: generatedField[], row: number) => {
+          if (!rowData || !rowData.length) {
+            return null;
+          }
+          return (
+            <Collapsible defaultOpen={true} key={row}>
+              <CollapsibleContent>
+                {rowData.map((fData: generatedField, col: number) => {
+                  return (
+                    <SubFieldChecker
+                      readonly={readonly}
+                      streaming={streaming}
+                      field={{
+                        label: fData.label,
+                        widget: {
+                          widgetName: fData.fieldName,
+                          type: fData.fieldType,
+                          value: fData.value,
+                        },
+                      }}
+                      onCheckedChange={(checked: boolean, field: F) => {
+                        onChange({
+                          checked,
+                          field,
+                          row,
+                          col,
+                          parentFieldName: subformField.widget.widgetName,
+                        });
+                      }}
+                    />
+                  );
+                })}
+              </CollapsibleContent>
+            </Collapsible>
+          );
+        })}
+      </CollapsibleContent>
+    </Collapsible>
+  );
+};

package/src/components/ui/button.tsx

@@ -5,14 +5,14 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '../../lib/utils';
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-[14px] transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 rounded-[4px]',
   {
     variants: {
       variant: {
         default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
         destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
         outline:
-          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+          'border border-[#e0e0e0] bg-white hover:bg-[#e0e0e0] text-[#121111]',
         secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',

package/src/components/ui/calendar.tsx

@@ -0,0 +1,57 @@
+import {
+  DayPicker,
+  type DayPickerProps,
+} from 'react-day-picker';
+import 'react-day-picker/style.css';
+
+import { cn } from '../../lib/utils';
+
+export type CalendarProps = DayPickerProps;
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn('p-2', className)}
+      classNames={{
+        months: 'flex flex-col gap-2',
+        month: 'flex flex-col gap-2',
+        caption: 'flex justify-center pt-1 relative items-center w-full',
+        caption_label: 'text-[12px] font-medium text-[#121111]',
+        nav: 'flex items-center gap-1',
+        button_previous:
+          'absolute left-1 h-5 w-5 flex items-center justify-center rounded-[2px] hover:bg-[#EFF0F6] text-[#666666]',
+        button_next:
+          'absolute right-1 h-5 w-5 flex items-center justify-center rounded-[2px] hover:bg-[#EFF0F6] text-[#666666]',
+        month_grid: 'w-full border-collapse',
+        weekdays: 'flex',
+        weekday:
+          'flex-1 h-7 flex items-center justify-center text-[12px] text-[#999999] font-normal',
+        week: 'flex w-full mt-0.5',
+        day: 'flex-1 h-7 flex items-center justify-center text-[12px] text-[#121111] rounded-[2px] hover:bg-[#EFF0F6] cursor-pointer aria-selected:opacity-100',
+        day_button: 'w-full h-full flex items-center justify-center',
+        range_start:
+          'bg-[#0265FF] text-white rounded-r-none hover:bg-[#0265FF]',
+        range_end:
+          'bg-[#0265FF] text-white rounded-l-none hover:bg-[#0265FF]',
+        range_middle:
+          'bg-[#F0F6FF] text-[#0265FF] rounded-none hover:bg-[#E6EEFF]',
+        selected: 'bg-[#0265FF] text-white hover:bg-[#0265FF]',
+        today: 'text-[#0265FF] font-bold',
+        outside:
+          'text-[#CCCCCC] aria-selected:text-[#CCCCCC]',
+        disabled: 'text-[#CCCCCC] opacity-50',
+        hidden: 'invisible',
+        ...classNames,
+      }}
+      {...props}
+    />
+  );
+}
+
+export { Calendar };

package/src/components/ui/drawer.tsx

@@ -0,0 +1,276 @@
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "@/lib/utils"
+import { IconBtn } from "../icon-btn"
+import { CloseIcon } from "../bs-icons"
+
+function Drawer({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
+}
+
+function DrawerTrigger({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
+}
+
+function DrawerPortal({
+  container,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Portal> & {
+  container?: HTMLElement | null;
+}) {
+  return (
+    <DrawerPrimitive.Portal
+      data-slot="drawer-portal"
+      container={container ?? undefined}
+      {...props}
+    />
+  )
+}
+
+function DrawerClose({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
+}
+
+function DrawerOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+  return (
+    <DrawerPrimitive.Overlay
+      data-slot="drawer-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/30 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerContent({
+  className,
+  children,
+  container: containerProp,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content> & {
+  container?: HTMLElement | null;
+}) {
+  const [autoContainer, setAutoContainer] = React.useState<HTMLElement | null>(null);
+
+  const setDetectorRef = React.useCallback((node: HTMLElement | null) => {
+    if (!node) return;
+    const rootNode = node.getRootNode();
+    if (rootNode instanceof ShadowRoot) {
+      const existing = rootNode.querySelector<HTMLElement>('[data-bs-drawer-portal]');
+      if (existing) {
+        setAutoContainer(existing);
+        return;
+      }
+
+      // vaul injects its CSS (keyframes, transitions) into document.head at module load.
+      // Clone it into the ShadowRoot so animations work when portaled inside Shadow DOM.
+      if (!rootNode.querySelector('style[data-bs-vaul-style]')) {
+        const vaulStyle = Array.from(document.head.querySelectorAll('style')).find(
+          (el) => el.textContent?.includes('[data-vaul-drawer]')
+        );
+        if (vaulStyle) {
+          const cloned = vaulStyle.cloneNode(true) as HTMLStyleElement;
+          cloned.setAttribute('data-bs-vaul-style', '');
+          rootNode.appendChild(cloned);
+        }
+      }
+
+      const container = document.createElement('div');
+      container.setAttribute('data-bs-drawer-portal', 'true');
+      rootNode.appendChild(container);
+      setAutoContainer(container);
+    }
+  }, []);
+
+  const effectiveContainer = containerProp !== undefined ? containerProp : autoContainer;
+
+  return (
+    <>
+      {containerProp === undefined && (
+        <span ref={setDetectorRef} style={{ display: 'none' }} aria-hidden />
+      )}
+      <DrawerPortal container={effectiveContainer ?? undefined}>
+        <DrawerOverlay />
+        <DrawerPrimitive.Content
+          data-slot="drawer-content"
+          className={cn(
+            "group/drawer-content fixed z-50 flex h-auto flex-col bg-white shadow-xl",
+            "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg",
+            "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[calc(100vh-52px)] data-[vaul-drawer-direction=bottom]:rounded-t-[10px]",
+            "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:sm:max-w-sm",
+            "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:sm:max-w-sm",
+            "rounded-0!",
+            className
+          )}
+          {...props}
+          style={{
+            ...(props.style || {}),
+            borderRadius: 0,
+          }}
+        >
+          {children}
+        </DrawerPrimitive.Content>
+      </DrawerPortal>
+    </>
+  )
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn(
+        "flex items-center justify-center relative h-[50px] shrink-0 border-b border-[#E0E0E0]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerBody({ className, children, style, ...props }: React.ComponentProps<"div"> & {
+  full?: boolean;
+}) {
+  const bodyRef = React.useRef<HTMLDivElement>(null);
+  const contentRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    const el = bodyRef.current;
+    if (!el) return;
+
+    const handleWheel = (e: WheelEvent) => {
+      const { scrollTop, scrollHeight, clientHeight } = el;
+      const atTop = scrollTop <= 0;
+      const atBottom = scrollTop + clientHeight >= scrollHeight - 1;
+
+      if ((e.deltaY > 0 && !atBottom) || (e.deltaY < 0 && !atTop)) {
+        e.stopPropagation();
+      }
+    };
+
+    el.addEventListener("wheel", handleWheel);
+    return () => el.removeEventListener("wheel", handleWheel);
+  }, []);
+
+  React.useEffect(() => {
+    const content = contentRef.current;
+    const body = bodyRef.current;
+    if (!content || !body) return;
+
+    const observer = new ResizeObserver(() => {
+      body.scrollTo({ top: body.scrollHeight, behavior: "smooth" });
+    });
+
+    observer.observe(content);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div
+      ref={bodyRef}
+      data-slot="drawer-body"
+      className={cn("flex-1 overflow-y-auto bg-[#F5F7FA]", className)}
+      style={{ scrollbarGutter: "stable", ...style }}
+      {...props}
+    >
+      <div
+        ref={contentRef}
+        className={cn("content-wrapper w-[1120px] bg-white mx-auto p-5 rounded-lg my-5", {
+          "w-[calc(100%-40px)]": props.full,
+          "h-[calc(100%-40px)]": props.full,
+          'mx-5': props.full,
+          "w-[1120px]": !props.full,
+        })}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn(
+        "flex items-center justify-center gap-4 h-[52px] shrink-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn("text-[18px] font-semibold text-black", className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+const DrawerCloseButton = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Close>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Close>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Close
+    ref={ref}
+    className={cn(
+      "absolute right-3 top-1/2 -translate-y-1/2 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+      className
+    )}
+    {...props}
+  >
+    {/* <X className="h-4 w-4" /> */}
+    <IconBtn
+      icon={ <CloseIcon />}
+    />
+    <span className="sr-only">Close</span>
+  </DrawerPrimitive.Close>
+))
+DrawerCloseButton.displayName = "DrawerCloseButton"
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerBody,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerCloseButton,
+}