@coze-arch/cli 0.0.1-beta.6 → 0.0.2

package/lib/__templates__/taro/src/components/ui/toggle-group.tsx

@@ -0,0 +1,120 @@
+import * as React from "react"
+import { View } from "@tarojs/components"
+import { type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "@/components/ui/toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants> & {
+      value?: string | string[]
+      onValueChange?: (value: string) => void
+      type: "single" | "multiple"
+  }
+>({
+  size: "default",
+  variant: "default",
+  type: "single"
+})
+
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View> &
+    VariantProps<typeof toggleVariants> & {
+        type?: "single" | "multiple"
+        value?: string | string[]
+        defaultValue?: string | string[]
+        onValueChange?: (value: string | string[]) => void
+    }
+>(({ className, variant, size, children, type = "single", value: valueProp, defaultValue, onValueChange, ...props }, ref) => {
+    const [valueState, setValueState] = React.useState<string | string[]>(
+        defaultValue || (type === "multiple" ? [] : "")
+    )
+    const value = valueProp !== undefined ? valueProp : valueState
+
+    const handleValueChange = (itemValue: string) => {
+        let newValue: string | string[]
+        if (type === "multiple") {
+            const current = Array.isArray(value) ? value : []
+            if (current.includes(itemValue)) {
+                newValue = current.filter(v => v !== itemValue)
+            } else {
+                newValue = [...current, itemValue]
+            }
+        } else {
+             // In Radix ToggleGroup "single", clicking active item deselects it? 
+             // Actually yes, unless `rovingFocus` logic etc. 
+             // But usually it behaves like radio if required=true.
+             // Radix primitive has `rovingFocus` and `loop`.
+             // We'll implement simple toggle logic.
+             if (value === itemValue) {
+                 newValue = "" // Deselect
+             } else {
+                 newValue = itemValue
+             }
+        }
+
+        if (valueProp === undefined) {
+            setValueState(newValue)
+        }
+        onValueChange?.(newValue)
+    }
+
+  return (
+    <View
+      ref={ref}
+      className={cn("flex items-center justify-center gap-1", className)}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size, value, onValueChange: handleValueChange, type }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </View>
+  )
+})
+
+ToggleGroup.displayName = "ToggleGroup"
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View> &
+    VariantProps<typeof toggleVariants> & {
+        value: string
+        disabled?: boolean
+    }
+>(({ className, children, variant, size, value, disabled, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext)
+  
+  const checked = context.type === "multiple" 
+    ? Array.isArray(context.value) && context.value.includes(value)
+    : context.value === value
+
+  return (
+    <View
+      ref={ref}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className,
+        checked && "bg-accent text-accent-foreground",
+        disabled && "opacity-50 pointer-events-none"
+      )}
+      data-state={checked ? "on" : "off"}
+      data-disabled={disabled ? "" : undefined}
+      onClick={(e) => {
+        if (disabled) return
+        context.onValueChange?.(value)
+        props.onClick?.(e)
+      }}
+      {...props}
+    >
+      {children}
+    </View>
+  )
+})
+
+ToggleGroupItem.displayName = "ToggleGroupItem"
+
+export { ToggleGroup, ToggleGroupItem }

package/lib/__templates__/taro/src/components/ui/toggle.tsx

@@ -0,0 +1,77 @@
+import * as React from "react"
+import { View } from "@tarojs/components"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-10 px-3 min-w-10",
+        sm: "h-9 px-3 min-w-9",
+        lg: "h-11 px-5 min-w-11",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View> &
+    VariantProps<typeof toggleVariants> & {
+        pressed?: boolean
+        onPressedChange?: (pressed: boolean) => void
+        defaultPressed?: boolean
+        disabled?: boolean
+    }
+>(({ className, variant, size, pressed: pressedProp, defaultPressed, onPressedChange, disabled, ...props }, ref) => {
+    const [pressedState, setPressedState] = React.useState(defaultPressed || false)
+    const pressed = pressedProp !== undefined ? pressedProp : pressedState
+    
+    const handleClick = (e) => {
+        if (disabled) return
+        const newPressed = !pressed
+        if (pressedProp === undefined) {
+            setPressedState(newPressed)
+        }
+        onPressedChange?.(newPressed)
+        props.onClick?.(e)
+    }
+  const tabIndex = (props as { tabIndex?: number }).tabIndex ?? (disabled ? -1 : 0)
+
+  return (
+    <View
+      ref={ref}
+      className={cn(
+          toggleVariants({ variant, size, className }),
+          pressed && "bg-accent text-accent-foreground",
+          disabled && "opacity-50 pointer-events-none"
+        )}
+      data-state={pressed ? "on" : "off"}
+      data-disabled={disabled ? "" : undefined}
+      {...({ tabIndex } as { tabIndex?: number })}
+      hoverClass={
+        disabled
+          ? undefined
+          : "border-ring ring-2 ring-ring ring-offset-2 ring-offset-background"
+      }
+      onClick={handleClick}
+      {...props}
+    />
+  )
+})
+
+Toggle.displayName = "Toggle"
+
+export { Toggle, toggleVariants }

package/lib/__templates__/taro/src/components/ui/tooltip.tsx

@@ -0,0 +1,455 @@
+import * as React from "react"
+import { View } from "@tarojs/components"
+import { cn } from "@/lib/utils"
+import { isH5 } from "@/lib/platform"
+import { getRectById, getViewport } from "@/lib/measure"
+import { Portal } from "@/components/ui/portal"
+
+type TooltipProviderProps = {
+  children: React.ReactNode
+}
+
+type TooltipProps = {
+  children: React.ReactNode
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+type TooltipSide = "top" | "bottom" | "left" | "right"
+type TooltipAlign = "start" | "center" | "end"
+
+const TooltipContext = React.createContext<{
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  triggerId: string
+  setHoverPart?: (part: "trigger" | "content", hovering: boolean) => void
+} | null>(null)
+
+const TooltipProvider = ({ children }: TooltipProviderProps) => <>{children}</>
+
+const Tooltip = ({
+  children,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+}: TooltipProps) => {
+  const baseIdRef = React.useRef(
+    `tooltip-${Math.random().toString(36).slice(2, 10)}`
+  )
+  const [openState, setOpenState] = React.useState(defaultOpen)
+  const open = openProp !== undefined ? openProp : openState
+  const hoverRef = React.useRef({ trigger: false, content: false })
+  const closeTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const handleOpenChange = (newOpen: boolean) => {
+    if (openProp === undefined) {
+      setOpenState(newOpen)
+    }
+    onOpenChange?.(newOpen)
+  }
+
+  const setHoverPart = React.useCallback(
+    (part: "trigger" | "content", hovering: boolean) => {
+      if (!isH5()) return
+      hoverRef.current[part] = hovering
+      if (hovering) {
+        if (closeTimerRef.current) clearTimeout(closeTimerRef.current)
+        closeTimerRef.current = null
+        handleOpenChange(true)
+        return
+      }
+      if (closeTimerRef.current) clearTimeout(closeTimerRef.current)
+      closeTimerRef.current = setTimeout(() => {
+        if (!hoverRef.current.trigger && !hoverRef.current.content) {
+          handleOpenChange(false)
+        }
+      }, 80)
+    },
+    [handleOpenChange]
+  )
+
+  React.useEffect(() => {
+    return () => {
+      if (closeTimerRef.current) clearTimeout(closeTimerRef.current)
+    }
+  }, [])
+
+  return (
+    <TooltipContext.Provider
+      value={{
+        open,
+        onOpenChange: handleOpenChange,
+        triggerId: baseIdRef.current,
+        setHoverPart,
+      }}
+    >
+      {children}
+    </TooltipContext.Provider>
+  )
+}
+
+const TooltipTrigger = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View> & {
+    onMouseEnter?: (e: any) => void
+    onMouseLeave?: (e: any) => void
+  }
+>(
+  (
+    { className, children, onClick, onMouseEnter, onMouseLeave, ...props },
+    ref
+  ) => {
+    const context = React.useContext(TooltipContext)
+    return (
+      <View
+        ref={ref}
+        id={context?.triggerId}
+        className={cn("inline-flex w-fit justify-self-start", className)}
+        onClick={(e) => {
+          onClick?.(e)
+          e.stopPropagation()
+          context?.onOpenChange(!context.open)
+        }}
+        {...(isH5()
+          ? ({
+              onMouseEnter: (e: any) => {
+                onMouseEnter?.(e)
+                context?.setHoverPart?.("trigger", true)
+              },
+              onMouseLeave: (e: any) => {
+                onMouseLeave?.(e)
+                context?.setHoverPart?.("trigger", false)
+              },
+            } as any)
+          : {})}
+        {...props}
+      >
+        {children}
+      </View>
+    )
+  }
+)
+TooltipTrigger.displayName = "TooltipTrigger"
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View> & {
+    align?: TooltipAlign
+    side?: TooltipSide
+    sideOffset?: number
+    avoidCollisions?: boolean
+    collisionPadding?: number
+    showArrow?: boolean
+    arrowSize?: number
+    onMouseEnter?: (e: any) => void
+    onMouseLeave?: (e: any) => void
+  }
+>(
+  (
+    {
+      children,
+      className,
+      align = "center",
+      side = "top",
+      sideOffset = 4,
+      avoidCollisions = true,
+      collisionPadding = 8,
+      showArrow = true,
+      arrowSize = 8,
+      onMouseEnter,
+      onMouseLeave,
+      ...props
+    },
+    ref
+  ) => {
+    const context = React.useContext(TooltipContext)
+    const contentId = React.useRef(
+      `tooltip-content-${Math.random().toString(36).slice(2, 10)}`
+    )
+    const [layout, setLayout] = React.useState<
+      | {
+          left: number
+          top: number
+          side: TooltipSide
+          arrowLeft?: number
+          arrowTop?: number
+        }
+      | null
+    >(null)
+
+    React.useEffect(() => {
+      if (!context?.open) {
+        setLayout(null)
+        return
+      }
+
+      let cancelled = false
+
+      let rafId: number | null = null
+
+      const compute = async () => {
+        const [triggerRect, contentRect] = await Promise.all([
+          getRectById(context.triggerId),
+          getRectById(contentId.current),
+        ])
+
+        if (cancelled) return
+        if (!triggerRect?.width || !contentRect?.width) return
+
+        const vw = getViewport().width
+        const vh = getViewport().height
+        const padding = Math.max(0, collisionPadding)
+
+        const computeForSide = (s: TooltipSide) => {
+          const isLR = s === "left" || s === "right"
+          const crossStart = isLR ? triggerRect.top : triggerRect.left
+          const crossSize = isLR ? triggerRect.height : triggerRect.width
+          const contentCrossSize = isLR ? contentRect.height : contentRect.width
+          const mainOffset = sideOffset + (showArrow ? arrowSize / 2 : 0)
+
+          const cross = (() => {
+            if (align === "start") return crossStart
+            if (align === "end") return crossStart + crossSize - contentCrossSize
+            return crossStart + crossSize / 2 - contentCrossSize / 2
+          })()
+
+          if (s === "bottom" || s === "top") {
+            const left = cross
+            const top =
+              s === "bottom"
+                ? triggerRect.top + triggerRect.height + mainOffset
+                : triggerRect.top - contentRect.height - mainOffset
+            return { left, top }
+          }
+
+          const top = cross
+          const left =
+            s === "right"
+              ? triggerRect.left + triggerRect.width + mainOffset
+              : triggerRect.left - contentRect.width - mainOffset
+          return { left, top }
+        }
+
+        const oppositeSide = (s: TooltipSide): TooltipSide => {
+          if (s === "top") return "bottom"
+          if (s === "bottom") return "top"
+          if (s === "left") return "right"
+          return "left"
+        }
+
+        const wouldOverflowMainAxis = (s: TooltipSide, left: number, top: number) => {
+          if (s === "top") return top < padding
+          if (s === "bottom") return top + contentRect.height > vh - padding
+          if (s === "left") return left < padding
+          return left + contentRect.width > vw - padding
+        }
+
+        let resolvedSide: TooltipSide = side
+        let { left, top } = computeForSide(resolvedSide)
+
+        if (avoidCollisions && wouldOverflowMainAxis(resolvedSide, left, top)) {
+          const flipped = oppositeSide(resolvedSide)
+          const flippedPos = computeForSide(flipped)
+          if (!wouldOverflowMainAxis(flipped, flippedPos.left, flippedPos.top)) {
+            resolvedSide = flipped
+            left = flippedPos.left
+            top = flippedPos.top
+          }
+        }
+
+        const maxLeft = Math.max(padding, vw - contentRect.width - padding)
+        const maxTop = Math.max(padding, vh - contentRect.height - padding)
+        left = Math.min(Math.max(left, padding), maxLeft)
+        top = Math.min(Math.max(top, padding), maxTop)
+
+        const triggerCenterX = triggerRect.left + triggerRect.width / 2
+        const triggerCenterY = triggerRect.top + triggerRect.height / 2
+        const arrowGap = 6
+
+        if (resolvedSide === "top" || resolvedSide === "bottom") {
+          const rawArrowLeft = triggerCenterX - left - arrowSize / 2
+          const minArrowLeft = arrowGap
+          const maxArrowLeft = contentRect.width - arrowSize - arrowGap
+          const arrowLeft = Math.min(Math.max(rawArrowLeft, minArrowLeft), maxArrowLeft)
+          setLayout({ left, top, side: resolvedSide, arrowLeft })
+          return
+        }
+
+        const rawArrowTop = triggerCenterY - top - arrowSize / 2
+        const minArrowTop = arrowGap
+        const maxArrowTop = contentRect.height - arrowSize - arrowGap
+        const arrowTop = Math.min(Math.max(rawArrowTop, minArrowTop), maxArrowTop)
+        setLayout({ left, top, side: resolvedSide, arrowTop })
+      }
+
+      const schedule = () => {
+        if (rafId != null) {
+          if (typeof cancelAnimationFrame !== "undefined") {
+            cancelAnimationFrame(rafId)
+          } else {
+            clearTimeout(rafId)
+          }
+          rafId = null
+        }
+        if (typeof requestAnimationFrame !== "undefined") {
+          rafId = requestAnimationFrame(() => compute())
+        } else {
+          rafId = setTimeout(() => compute(), 0) as unknown as number
+        }
+      }
+
+      schedule()
+
+      const onWindowChange = () => schedule()
+
+      if (isH5() && typeof window !== "undefined") {
+        window.addEventListener("resize", onWindowChange)
+        window.addEventListener("scroll", onWindowChange, true)
+      }
+
+      return () => {
+        cancelled = true
+        if (rafId != null) {
+          if (typeof cancelAnimationFrame !== "undefined") {
+            cancelAnimationFrame(rafId)
+          } else {
+            clearTimeout(rafId)
+          }
+        }
+        if (isH5() && typeof window !== "undefined") {
+          window.removeEventListener("resize", onWindowChange)
+          window.removeEventListener("scroll", onWindowChange, true)
+        }
+      }
+    }, [
+      align,
+      avoidCollisions,
+      collisionPadding,
+      context?.open,
+      context?.triggerId,
+      side,
+      sideOffset,
+      arrowSize,
+    ])
+
+    if (!context?.open) return null
+
+    const baseClassName =
+      "fixed z-50 overflow-visible rounded-md bg-black px-3 py-2 text-sm text-white shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
+
+    const px = (n: number) => `${n}px`
+
+    const contentStyle = layout
+      ? (isH5()
+          ? ({ left: px(layout.left), top: px(layout.top) } as React.CSSProperties)
+          : ({ left: layout.left, top: layout.top } as React.CSSProperties))
+      : ({
+          left: 0,
+          top: 0,
+          opacity: 0,
+          pointerEvents: "none",
+        } as React.CSSProperties)
+
+    const arrow =
+      showArrow && layout ? (
+        <View
+          className="absolute rotate-45 bg-black"
+          style={
+            layout.side === "top"
+              ? (isH5()
+                  ? ({
+                      width: px(arrowSize),
+                      height: px(arrowSize),
+                      bottom: px(-arrowSize / 2),
+                      left: px(layout.arrowLeft ?? 0),
+                    } as React.CSSProperties)
+                  : ({
+                      width: arrowSize,
+                      height: arrowSize,
+                      bottom: -arrowSize / 2,
+                      left: layout.arrowLeft ?? 0,
+                    } as React.CSSProperties))
+              : layout.side === "bottom"
+                ? (isH5()
+                    ? ({
+                        width: px(arrowSize),
+                        height: px(arrowSize),
+                        top: px(-arrowSize / 2),
+                        left: px(layout.arrowLeft ?? 0),
+                      } as React.CSSProperties)
+                    : ({
+                        width: arrowSize,
+                        height: arrowSize,
+                        top: -arrowSize / 2,
+                        left: layout.arrowLeft ?? 0,
+                      } as React.CSSProperties))
+                : layout.side === "left"
+                  ? (isH5()
+                      ? ({
+                          width: px(arrowSize),
+                          height: px(arrowSize),
+                          right: px(-arrowSize / 2),
+                          top: px(layout.arrowTop ?? 0),
+                        } as React.CSSProperties)
+                      : ({
+                          width: arrowSize,
+                          height: arrowSize,
+                          right: -arrowSize / 2,
+                          top: layout.arrowTop ?? 0,
+                        } as React.CSSProperties))
+                  : (isH5()
+                      ? ({
+                          width: px(arrowSize),
+                          height: px(arrowSize),
+                          left: px(-arrowSize / 2),
+                          top: px(layout.arrowTop ?? 0),
+                        } as React.CSSProperties)
+                      : ({
+                          width: arrowSize,
+                          height: arrowSize,
+                          left: -arrowSize / 2,
+                          top: layout.arrowTop ?? 0,
+                        } as React.CSSProperties))
+          }
+        />
+      ) : null
+
+    const overlay = !isH5() ? (
+      <View
+        className="fixed inset-0 z-50 bg-transparent"
+        onClick={() => context.onOpenChange(false)}
+      />
+    ) : null
+
+    return (
+      <Portal>
+        {overlay}
+        <View
+          ref={ref}
+          id={contentId.current}
+          className={cn(baseClassName, className)}
+          style={contentStyle}
+          {...(isH5()
+            ? ({
+                onMouseEnter: (e: any) => {
+                  onMouseEnter?.(e)
+                  context?.setHoverPart?.("content", true)
+                },
+                onMouseLeave: (e: any) => {
+                  onMouseLeave?.(e)
+                  context?.setHoverPart?.("content", false)
+                },
+              } as any)
+            : {})}
+          {...props}
+        >
+          {arrow}
+          {children}
+        </View>
+      </Portal>
+    )
+})
+TooltipContent.displayName = "TooltipContent"
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/lib/__templates__/taro/src/index.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
+  <meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-touch-fullscreen" content="yes">
+  <meta name="format-detection" content="telephone=no,address=no">
+  <meta name="apple-mobile-web-app-status-bar-style" content="white">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <title><%= appName %></title>
+  <script><%%= htmlWebpackPlugin.options.script %></script>
+</head>
+
+<body>
+  <div id="app">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="lab(2.86037 0.455312 0.568903)"
+      stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="
+        position: fixed;
+        inset: 0;
+        margin: auto;
+        width: 24px;
+        height: 24px;
+        animation: __app-loading-spin 1s linear infinite;
+      ">
+      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+    </svg>
+    <style>
+      @keyframes __app-loading-spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+    </style>
+  </div>
+</body>
+
+</html>