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

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

@@ -0,0 +1,228 @@
+import * as React from "react"
+import { View, Text } from "@tarojs/components"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+import { Separator } from "@/components/ui/separator"
+
+function FieldSet({ className, ...props }: React.ComponentPropsWithoutRef<typeof View>) {
+  return (
+    <View
+      data-slot="field-set"
+      className={cn(
+        "flex flex-col gap-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}: React.ComponentPropsWithoutRef<typeof View> & { variant?: "legend" | "label" }) {
+  return (
+    <View
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        "mb-1 font-medium",
+        "data-[variant=legend]:text-base",
+        "data-[variant=label]:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldGroup({ className, ...props }: React.ComponentPropsWithoutRef<typeof View>) {
+  return (
+    <View
+      data-slot="field-group"
+      className={cn(
+        "flex w-full flex-col gap-3 data-[slot=checkbox-group]:gap-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const fieldVariants = cva(
+  "data-[invalid=true]:text-destructive flex w-full gap-1",
+  {
+    variants: {
+      orientation: {
+        vertical: ["flex-col [&>view]:w-full [&>label]:w-full"],
+        horizontal: [
+          "flex-row items-center",
+        ],
+        responsive: ["flex-col [&>view]:w-full [&>label]:w-full"],
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  }
+)
+
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentPropsWithoutRef<typeof View> & VariantProps<typeof fieldVariants>) {
+  return (
+    <View
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function FieldContent({ className, ...props }: React.ComponentPropsWithoutRef<typeof View>) {
+  return (
+    <View
+      data-slot="field-content"
+      className={cn(
+        "flex flex-1 flex-col gap-2 leading-snug",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLabel({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof Label>) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        "flex w-fit gap-2 leading-snug",
+        "[&>view]:p-1",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldTitle({ className, ...props }: React.ComponentPropsWithoutRef<typeof View>) {
+  return (
+    <View
+      data-slot="field-label"
+      className={cn(
+        "flex w-fit items-center gap-2 text-sm font-medium leading-snug",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldDescription({ className, ...props }: React.ComponentPropsWithoutRef<typeof View>) {
+  return (
+    <View
+      data-slot="field-description"
+      className={cn(
+        "text-muted-foreground text-sm font-normal leading-normal",
+        // "group-has-[[data-orientation=horizontal]]/field:text-balance", // text-balance not supported in Taro
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof View> & {
+  children?: React.ReactNode
+}) {
+  return (
+    <View
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn(
+        "relative -my-2 h-5 text-sm",
+        className
+      )}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <View
+          className="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </View>
+      )}
+    </View>
+  )
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof View> & {
+  errors?: Array<{ message?: string } | undefined>
+}) {
+    // Memoize content if needed, or just render.
+    let content = children
+
+    if (!content && errors) {
+        if (errors.length === 1 && errors[0]?.message) {
+            content = <Text>{errors[0].message}</Text>
+        } else if (errors.length > 0) {
+            content = (
+                <View className="ml-4 flex flex-col gap-1">
+                    {errors.map((error, index) => 
+                        error?.message && <Text key={index} className="text-xs">{`\u2022 ${error.message}`}</Text>
+                    )}
+                </View>
+            )
+        }
+    }
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <View
+      role="alert"
+      data-slot="field-error"
+      className={cn("text-destructive text-sm font-normal", className)}
+      {...props}
+    >
+      {content}
+    </View>
+  )
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+}

package/lib/__templates__/taro/src/components/ui/hover-card.tsx

@@ -0,0 +1,282 @@
+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 HoverCardProps = {
+  children: React.ReactNode
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+const HoverCardContext = React.createContext<{
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  triggerId: string
+  setHoverPart?: (part: "trigger" | "content", hovering: boolean) => void
+} | null>(null)
+
+const HoverCard = ({
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  children,
+}: HoverCardProps) => {
+  const baseIdRef = React.useRef(
+    `hover-card-${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 (
+    <HoverCardContext.Provider
+      value={{
+        open,
+        onOpenChange: handleOpenChange,
+        triggerId: baseIdRef.current,
+        setHoverPart,
+      }}
+    >
+      {children}
+    </HoverCardContext.Provider>
+  )
+}
+
+const HoverCardTrigger = 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(HoverCardContext)
+  return (
+    <View
+      {...props}
+      ref={ref}
+      id={context?.triggerId}
+      className={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)
+        : {})}
+    >
+      {children}
+    </View>
+  )
+})
+HoverCardTrigger.displayName = "HoverCardTrigger"
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View> & {
+    align?: "start" | "center" | "end"
+    side?: "top" | "bottom" | "left" | "right"
+    sideOffset?: number
+    onMouseEnter?: (e: any) => void
+    onMouseLeave?: (e: any) => void
+  }
+>(
+  (
+    {
+      className,
+      align = "center",
+      side = "bottom",
+      sideOffset = 4,
+      onMouseEnter,
+      onMouseLeave,
+      ...props
+    },
+    ref
+  ) => {
+  const context = React.useContext(HoverCardContext)
+  const contentId = React.useRef(
+    `hover-card-content-${Math.random().toString(36).slice(2, 10)}`
+  )
+  const [position, setPosition] = React.useState<
+    | {
+        left: number
+        top: number
+      }
+    | null
+  >(null)
+
+  React.useEffect(() => {
+    if (!context?.open) {
+      setPosition(null)
+      return
+    }
+
+    let cancelled = false
+
+    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 margin = 8
+
+      const crossStart = (side === "left" || side === "right")
+        ? triggerRect.top
+        : triggerRect.left
+      const crossSize = (side === "left" || side === "right")
+        ? triggerRect.height
+        : triggerRect.width
+      const contentCrossSize = (side === "left" || side === "right")
+        ? contentRect.height
+        : contentRect.width
+
+      const cross = (() => {
+        if (align === "start") return crossStart
+        if (align === "end") return crossStart + crossSize - contentCrossSize
+        return crossStart + crossSize / 2 - contentCrossSize / 2
+      })()
+
+      let left = 0
+      let top = 0
+
+      if (side === "bottom" || side === "top") {
+        left = cross
+        top =
+          side === "bottom"
+            ? triggerRect.top + triggerRect.height + sideOffset
+            : triggerRect.top - contentRect.height - sideOffset
+      } else {
+        top = cross
+        left =
+          side === "right"
+            ? triggerRect.left + triggerRect.width + sideOffset
+            : triggerRect.left - contentRect.width - sideOffset
+      }
+
+      left = Math.min(Math.max(left, margin), vw - contentRect.width - margin)
+      top = Math.min(Math.max(top, margin), vh - contentRect.height - margin)
+
+      setPosition({ left, top })
+    }
+
+    const raf = (() => {
+      if (typeof requestAnimationFrame !== "undefined") {
+        return requestAnimationFrame(() => compute())
+      }
+      return setTimeout(() => compute(), 0) as unknown as number
+    })()
+
+    return () => {
+      cancelled = true
+      if (typeof cancelAnimationFrame !== "undefined") {
+        cancelAnimationFrame(raf)
+      } else {
+        clearTimeout(raf)
+      }
+    }
+  }, [align, context?.open, context?.triggerId, side, sideOffset])
+
+  if (!context?.open) return null
+
+  const baseClassName =
+    "fixed z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"
+
+  const contentStyle = position
+    ? ({ left: position.left, top: position.top } as React.CSSProperties)
+    : ({
+        left: 0,
+        top: 0,
+        opacity: 0,
+        pointerEvents: "none",
+      } as React.CSSProperties)
+
+  const overlay =
+    !isH5() ? (
+      <View
+        className="fixed inset-0 z-50 bg-transparent"
+        onClick={() => context.onOpenChange?.(false)}
+      />
+    ) : null
+
+  return (
+    <Portal>
+      {overlay}
+      <View
+        {...props}
+        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)
+          : {})}
+      />
+    </Portal>
+  )
+}
+)
+HoverCardContent.displayName = "HoverCardContent"
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }

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

@@ -0,0 +1,197 @@
+import * as React from "react"
+import { View, Text, Input, Textarea } from "@tarojs/components"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+interface InputGroupContextValue {
+  isFocused: boolean
+  setIsFocused: (value: boolean) => void
+  disabled?: boolean
+}
+
+const InputGroupContext = React.createContext<InputGroupContextValue>({
+  isFocused: false,
+  setIsFocused: () => {},
+  disabled: false,
+})
+
+function InputGroup({ className, disabled, ...props }: React.ComponentPropsWithoutRef<typeof View> & { disabled?: boolean }) {
+  const [isFocused, setIsFocused] = React.useState(false)
+
+  return (
+    <InputGroupContext.Provider value={{ isFocused, setIsFocused, disabled }}>
+      <View
+        data-slot="input-group"
+        className={cn(
+          "border-input dark:bg-input dark:bg-opacity-30 shadow-xs relative flex w-full min-h-9 flex-wrap items-center rounded-md border outline-none transition-[color,box-shadow]",
+          isFocused && "ring-2 ring-ring ring-offset-2 ring-offset-background",
+          className
+        )}
+        {...props}
+      />
+    </InputGroupContext.Provider>
+  )
+}
+
+const inputGroupAddonVariants = cva(
+  "text-muted-foreground flex h-auto cursor-text select-none items-center justify-center gap-2 py-1 text-sm font-medium [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start":
+          "order-first pl-3",
+        "inline-end":
+          "order-last pr-3",
+        "block-start":
+          "[.border-b]:pb-3 order-first w-full justify-start px-3 pt-3",
+        "block-end":
+          "[.border-t]:pt-3 order-last w-full justify-start px-3 pb-3",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  }
+)
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: React.ComponentPropsWithoutRef<typeof View> & VariantProps<typeof inputGroupAddonVariants>) {
+  const { disabled } = React.useContext(InputGroupContext)
+  return (
+    <View
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), disabled && "opacity-50", className)}
+      {...props}
+    />
+  )
+}
+
+const inputGroupButtonVariants = cva(
+  "flex items-center gap-2 text-sm shadow-none",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 [&>svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-2 rounded-md px-2",
+        "icon-xs":
+          "size-6 rounded-[calc(var(--radius)-5px)] p-0",
+        "icon-sm": "size-8 p-0",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  }
+)
+
+function InputGroupButton({
+  className,
+  variant = "ghost",
+  size = "xs",
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "size"> &
+  VariantProps<typeof inputGroupButtonVariants>) {
+  return (
+    <Button
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+function InputGroupText({ className, ...props }: React.ComponentPropsWithoutRef<typeof Text>) {
+  return (
+    <Text
+      className={cn(
+        "text-muted-foreground flex items-center gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupInput({
+  className,
+  onFocus,
+  onBlur,
+  autoFocus,
+  focus,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof Input> & { autoFocus?: boolean }) {
+  const { setIsFocused } = React.useContext(InputGroupContext)
+
+  return (
+    <View className="flex h-full flex-1 items-center px-2 py-2">
+      <Input
+        data-slot="input-group-control"
+        className={cn(
+          "flex-1 bg-transparent text-base text-foreground placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        )}
+        placeholderClass="text-muted-foreground"
+        onFocus={(e) => {
+          setIsFocused(true)
+          onFocus?.(e)
+        }}
+        onBlur={(e) => {
+          setIsFocused(false)
+          onBlur?.(e)
+        }}
+        focus={autoFocus || focus}
+        {...props}
+      />
+    </View>
+  )
+}
+
+function InputGroupTextarea({
+  className,
+  onFocus,
+  onBlur,
+  autoFocus,
+  focus,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof Textarea> & { autoFocus?: boolean }) {
+  const { setIsFocused } = React.useContext(InputGroupContext)
+
+  return (
+    <View className="flex h-full flex-1 min-w-20 m-2">
+      <Textarea
+        data-slot="input-group-control"
+        className={cn(
+          "flex-1 w-full h-full bg-transparent text-base text-foreground placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        )}
+        placeholderClass="text-muted-foreground"
+        onFocus={(e) => {
+          setIsFocused(true)
+          onFocus?.(e)
+        }}
+        onBlur={(e) => {
+          setIsFocused(false)
+          onBlur?.(e)
+        }}
+        focus={autoFocus || focus}
+        {...props}
+      />
+    </View>
+  )
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+}