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

package/lib/__templates__/taro/src/components/ui/navigation-menu.tsx

@@ -0,0 +1,264 @@
+import * as React from "react"
+import { View, ScrollView } from "@tarojs/components"
+import { ChevronDown } from "lucide-react-taro"
+import { cva } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+import { isH5 } from "@/lib/platform"
+import { computePosition, getRectById, getViewport } from "@/lib/measure"
+import { Portal } from "@/components/ui/portal"
+
+const NavigationMenuContext = React.createContext<{
+  value?: string
+  onValueChange?: (value: string | undefined) => void
+} | null>(null)
+
+const NavigationMenu = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View> & {
+    value?: string
+    onValueChange?: (value: string | undefined) => void
+  }
+>(({ className, children, value: valueProp, onValueChange, ...props }, ref) => {
+  const [valueState, setValueState] = React.useState<string | undefined>()
+  const value = valueProp !== undefined ? valueProp : valueState
+
+  const handleValueChange = (newValue: string | undefined) => {
+    if (valueProp === undefined) {
+      setValueState(newValue)
+    }
+    onValueChange?.(newValue)
+  }
+
+  return (
+    <NavigationMenuContext.Provider value={{ value, onValueChange: handleValueChange }}>
+      <View
+        ref={ref}
+        className={cn(
+          "relative z-10 flex max-w-max flex-1 items-center justify-center",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </View>
+    </NavigationMenuContext.Provider>
+  )
+})
+NavigationMenu.displayName = "NavigationMenu"
+
+const NavigationMenuList = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View>
+>(({ className, ...props }, ref) => (
+  <View
+    ref={ref}
+    className={cn(
+      "group flex flex-1 list-none items-center justify-center space-x-1",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuList.displayName = "NavigationMenuList"
+
+const NavigationMenuItemContext = React.createContext<{ value: string; triggerId: string } | null>(null)
+
+const NavigationMenuItem = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View> & { value?: string }
+>(({ children, value: valueProp, ...props }, ref) => {
+  const id = React.useId()
+  const value = valueProp || id
+  const triggerIdRef = React.useRef(`navigation-menu-trigger-${Math.random().toString(36).slice(2, 10)}`)
+  return (
+    <NavigationMenuItemContext.Provider value={{ value, triggerId: triggerIdRef.current }}>
+      <View ref={ref} {...props}>
+        {children}
+      </View>
+    </NavigationMenuItemContext.Provider>
+  )
+})
+NavigationMenuItem.displayName = "NavigationMenuItem"
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:bg-opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent"
+)
+
+const NavigationMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View>
+>(({ className, children, ...props }, ref) => {
+  const context = React.useContext(NavigationMenuContext)
+  const item = React.useContext(NavigationMenuItemContext)
+  const isOpen = context?.value === item?.value
+
+  return (
+    <View
+      ref={ref}
+      id={item?.triggerId}
+      data-slot="navigation-menu-trigger"
+      data-state={isOpen ? "open" : "closed"}
+      className={cn(navigationMenuTriggerStyle(), "group", className)}
+      onClick={() => context?.onValueChange?.(isOpen ? undefined : item?.value)}
+      {...props}
+    >
+      {children}{" "}
+      <ChevronDown
+        className={cn(
+          "relative top-[1px] ml-1 h-3 w-3 transition duration-200",
+          isOpen && "rotate-180"
+        )}
+        aria-hidden="true"
+      />
+    </View>
+  )
+})
+NavigationMenuTrigger.displayName = "NavigationMenuTrigger"
+
+const NavigationMenuContent = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View> & {
+    align?: "start" | "center" | "end"
+    side?: "top" | "bottom" | "left" | "right"
+    sideOffset?: number
+  }
+>(({ className, align = "start", side = "bottom", sideOffset = 4, children, ...props }, ref) => {
+  const context = React.useContext(NavigationMenuContext)
+  const item = React.useContext(NavigationMenuItemContext)
+  const isOpen = context?.value === item?.value
+  const contentId = React.useRef(`navigation-menu-content-${Math.random().toString(36).slice(2, 10)}`)
+  const [position, setPosition] = React.useState<{ left: number; top: number } | null>(null)
+  const [contentWidth, setContentWidth] = React.useState<number | null>(null)
+
+  React.useEffect(() => {
+    if (!isOpen) {
+      setPosition(null)
+      setContentWidth(null)
+      return
+    }
+
+    let cancelled = false
+
+    const compute = async () => {
+      const triggerId = item?.triggerId
+      if (!triggerId) return
+      const [triggerRect, contentRect] = await Promise.all([
+        getRectById(triggerId),
+        getRectById(contentId.current),
+      ])
+
+      if (cancelled) return
+      if (!triggerRect?.width || !contentRect?.width) return
+
+      setContentWidth(contentRect.width)
+      setPosition(
+        computePosition({
+          triggerRect,
+          contentRect,
+          align,
+          side,
+          sideOffset,
+        })
+      )
+    }
+
+    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, isOpen, item?.triggerId, side, sideOffset])
+
+  React.useEffect(() => {
+    if (!isOpen) return
+    if (!isH5() || typeof document === "undefined") return
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        context?.onValueChange?.(undefined)
+      }
+    }
+    document.addEventListener("keydown", onKeyDown)
+    return () => document.removeEventListener("keydown", onKeyDown)
+  }, [context, isOpen])
+
+  if (!isOpen) return null
+
+  const baseClassName =
+    "fixed z-50 min-w-32 w-max max-w-[95vw] overflow-hidden rounded-lg border border-border bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground ring-opacity-10 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+
+  const vw = getViewport().width
+  const isMobileLayout = vw < 640
+  const shouldFullWidth = isMobileLayout && contentWidth !== null && contentWidth > vw - 16
+
+  const contentStyle = position
+    ? (shouldFullWidth
+        ? ({ left: 8, right: 8, top: position.top } as React.CSSProperties)
+        : ({ left: position.left, top: position.top } as React.CSSProperties))
+    : ({
+        left: shouldFullWidth ? 8 : 0,
+        right: shouldFullWidth ? 8 : undefined,
+        top: 0,
+        opacity: 0,
+        pointerEvents: "none",
+      } as React.CSSProperties)
+
+  return (
+    <Portal>
+      <View
+        className="fixed inset-0 z-50 bg-transparent"
+        onClick={() => context?.onValueChange?.(undefined)}
+      />
+      <View
+        ref={ref}
+        id={contentId.current}
+        data-slot="navigation-menu-content"
+        data-state="open"
+        data-side={side}
+        className={cn(
+          baseClassName,
+          className
+        )}
+        style={contentStyle}
+        onClick={(e) => e.stopPropagation()}
+        {...props}
+      >
+        <ScrollView scrollY className="max-h-[70vh] overflow-x-hidden overflow-y-auto">
+          {children}
+        </ScrollView>
+      </View>
+    </Portal>
+  )
+})
+NavigationMenuContent.displayName = "NavigationMenuContent"
+
+const NavigationMenuLink = ({ children, className, ...props }: any) => (
+  <View className={cn("block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground", className)} {...props}>
+    {children}
+  </View>
+)
+
+const NavigationMenuViewport = () => null
+
+const NavigationMenuIndicator = () => null
+
+export {
+  navigationMenuTriggerStyle,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+}

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

@@ -0,0 +1,118 @@
+import * as React from "react"
+import { View, Text } from "@tarojs/components"
+import { ChevronLeft, ChevronRight, Ellipsis } from "lucide-react-taro"
+
+import { cn } from "@/lib/utils"
+import { ButtonProps, buttonVariants } from "@/components/ui/button"
+
+const Pagination = ({ className, ...props }: React.ComponentPropsWithoutRef<typeof View>) => (
+  <View
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props}
+  />
+)
+Pagination.displayName = "Pagination"
+
+const PaginationContent = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View>
+>(({ className, ...props }, ref) => (
+  <View
+    ref={ref}
+    className={cn("flex flex-row items-center gap-1", className)}
+    {...props}
+  />
+))
+PaginationContent.displayName = "PaginationContent"
+
+const PaginationItem = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View>
+>(({ className, ...props }, ref) => (
+  <View ref={ref} className={cn("", className)} {...props} />
+))
+PaginationItem.displayName = "PaginationItem"
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<ButtonProps, "size"> &
+  React.ComponentPropsWithoutRef<typeof View>
+
+const PaginationLink = ({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) => (
+  <View
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size,
+      }),
+      className
+    )}
+    {...props}
+  />
+)
+PaginationLink.displayName = "PaginationLink"
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    className={cn("gap-1 pl-3", className)}
+    {...props}
+  >
+    <ChevronLeft size={16} />
+    <Text>上一页</Text>
+  </PaginationLink>
+)
+PaginationPrevious.displayName = "PaginationPrevious"
+
+const PaginationNext = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    className={cn("gap-1 pr-3", className)}
+    {...props}
+  >
+    <Text>下一页</Text>
+    <ChevronRight size={16} />
+  </PaginationLink>
+)
+PaginationNext.displayName = "PaginationNext"
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof View>) => (
+  <View
+    aria-hidden
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <Ellipsis size={16} />
+    <View className="sr-only">More pages</View>
+  </View>
+)
+PaginationEllipsis.displayName = "PaginationEllipsis"
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+}

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

@@ -0,0 +1,291 @@
+import * as React from "react"
+import { View } from "@tarojs/components"
+import Taro from "@tarojs/taro"
+import { cn } from "@/lib/utils"
+import { Portal } from "@/components/ui/portal"
+import { useKeyboardOffset } from "@/lib/hooks/use-keyboard-offset"
+import { isH5 } from "@/lib/platform"
+
+const PopoverContext = React.createContext<{
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  triggerId: string
+} | null>(null)
+
+interface PopoverProps {
+    children: React.ReactNode
+    open?: boolean
+    defaultOpen?: boolean
+    onOpenChange?: (open: boolean) => void
+}
+
+const Popover = ({ open: openProp, defaultOpen, onOpenChange, children }: PopoverProps) => {
+    const baseIdRef = React.useRef(
+        `popover-${Math.random().toString(36).slice(2, 10)}`
+    )
+    const [openState, setOpenState] = React.useState(defaultOpen || false)
+    const open = openProp !== undefined ? openProp : openState
+    
+    const handleOpenChange = (newOpen: boolean) => {
+        if (openProp === undefined) {
+            setOpenState(newOpen)
+        }
+        onOpenChange?.(newOpen)
+    }
+
+    React.useEffect(() => {
+        if (!isH5()) return
+        if (!open) return
+
+        const onKeyDown = (e: KeyboardEvent) => {
+            if (e.key !== "Escape") return
+            e.stopPropagation()
+            handleOpenChange(false)
+        }
+
+        window.addEventListener("keydown", onKeyDown, true)
+        return () => {
+            window.removeEventListener("keydown", onKeyDown, true)
+        }
+    }, [open])
+
+    return (
+        <PopoverContext.Provider value={{ open, onOpenChange: handleOpenChange, triggerId: baseIdRef.current }}>
+            {children}
+        </PopoverContext.Provider>
+    )
+}
+
+const PopoverTrigger = React.forwardRef<
+    React.ElementRef<typeof View>,
+    React.ComponentPropsWithoutRef<typeof View> & { asChild?: boolean }
+>(({ className, children, asChild, ...props }, ref) => {
+    const context = React.useContext(PopoverContext)
+    return (
+        <View
+          ref={ref}
+          id={context?.triggerId}
+          className={cn("w-fit", className)}
+          onClick={(e) => {
+                e.stopPropagation()
+                context?.onOpenChange?.(!context.open)
+            }}
+          {...props}
+        >
+            {children}
+        </View>
+    )
+})
+PopoverTrigger.displayName = "PopoverTrigger"
+
+interface PopoverContentProps extends React.ComponentPropsWithoutRef<typeof View> {
+    align?: "center" | "start" | "end"
+    side?: "top" | "bottom" | "left" | "right"
+    position?: "top" | "bottom" | "left" | "right"
+    sideOffset?: number
+}
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof View>,
+  PopoverContentProps
+>(({ className, align = "center", side, position: positionProp, sideOffset = 4, style, ...props }, ref) => {
+    const context = React.useContext(PopoverContext)
+    const offset = useKeyboardOffset()
+    const resolvedSide = positionProp ?? side ?? "bottom"
+    const contentId = React.useRef(
+        `popover-content-${Math.random().toString(36).slice(2, 10)}`
+    )
+    const [contentPosition, setContentPosition] = React.useState<
+        | {
+              left: number
+              top: number
+          }
+        | null
+    >(null)
+
+    React.useEffect(() => {
+        if (!context?.open) {
+            setContentPosition(null)
+            return
+        }
+
+        let cancelled = false
+
+        const getViewport = () => {
+            if (isH5() && typeof window !== "undefined") {
+                return { width: window.innerWidth, height: window.innerHeight }
+            }
+            try {
+                const info = Taro.getSystemInfoSync()
+                return { width: info.windowWidth, height: info.windowHeight }
+            } catch {
+                return { width: 375, height: 667 }
+            }
+        }
+
+        const getRectH5 = (id: string) => {
+            if (!isH5() || typeof document === "undefined") return null
+            const el = document.getElementById(id)
+            if (!el) return null
+            const r = el.getBoundingClientRect()
+            return { left: r.left, top: r.top, width: r.width, height: r.height }
+        }
+
+        const getRect = (id: string) => {
+            const h5Rect = getRectH5(id)
+            if (h5Rect) return Promise.resolve(h5Rect)
+            return new Promise<any>((resolve) => {
+                const query = Taro.createSelectorQuery()
+                query
+                    .select(`#${id}`)
+                    .boundingClientRect((res) => {
+                        const rect = Array.isArray(res) ? res[0] : res
+                        resolve(rect || null)
+                    })
+                    .exec()
+            })
+        }
+
+        const compute = async () => {
+            const [triggerRect, contentRect] = await Promise.all([
+                getRect(context.triggerId),
+                getRect(contentId.current),
+            ])
+
+            if (cancelled) return
+            if (!triggerRect?.width || !contentRect?.width) return
+
+            const viewport = getViewport()
+            const vw = viewport.width
+            const vh = Math.max(0, viewport.height - (isH5() ? 0 : offset || 0))
+            const margin = 8
+
+            const crossStart =
+                resolvedSide === "left" || resolvedSide === "right" ? triggerRect.top : triggerRect.left
+            const crossSize =
+                resolvedSide === "left" || resolvedSide === "right" ? triggerRect.height : triggerRect.width
+            const contentCrossSize =
+                resolvedSide === "left" || resolvedSide === "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 (resolvedSide === "bottom" || resolvedSide === "top") {
+                left = cross
+                top =
+                    resolvedSide === "bottom"
+                        ? triggerRect.top + triggerRect.height + sideOffset
+                        : triggerRect.top - contentRect.height - sideOffset
+            } else {
+                top = cross
+                left =
+                    resolvedSide === "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)
+
+            setContentPosition({ 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, offset, resolvedSide, sideOffset])
+    
+    if (!context?.open) return null
+
+    const baseClassName =
+        "fixed z-50 w-72 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 = contentPosition
+        ? ({
+              ...(style as object),
+              left: contentPosition.left,
+              top: contentPosition.top,
+          } as React.CSSProperties)
+        : ({
+              ...(style as object),
+              left: 0,
+              top: 0,
+              opacity: 0,
+              pointerEvents: "none",
+          } as React.CSSProperties)
+
+    return (
+        <Portal>
+            <View 
+              className="fixed inset-0 z-50 bg-transparent"
+              onClick={() => context.onOpenChange?.(false)}
+            />
+            <View
+              ref={ref}
+              className={cn(
+                    baseClassName,
+                    className
+                )}
+              id={contentId.current}
+              style={contentStyle}
+              {...props}
+            />
+        </Portal>
+    )
+})
+PopoverContent.displayName = "PopoverContent"
+
+const PopoverHeader = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View>
+>(({ className, ...props }, ref) => (
+  <View ref={ref} className={cn("grid gap-1.5", className)} {...props} />
+))
+PopoverHeader.displayName = "PopoverHeader"
+
+const PopoverTitle = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View>
+>(({ className, ...props }, ref) => (
+  <View ref={ref} className={cn("font-medium leading-none", className)} {...props} />
+))
+PopoverTitle.displayName = "PopoverTitle"
+
+const PopoverDescription = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View>
+>(({ className, ...props }, ref) => (
+  <View
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+PopoverDescription.displayName = "PopoverDescription"
+
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverDescription,
+}

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

@@ -0,0 +1,19 @@
+import * as React from "react"
+import * as TaroComponents from "@tarojs/components"
+import { createPortal } from "react-dom"
+import { isH5 } from "@/lib/platform"
+
+const RootPortal = (TaroComponents as any).RootPortal
+
+const Portal = ({ children }: { children: React.ReactNode }) => {
+  if (isH5()) {
+    if (typeof document === "undefined") return <>{children}</>
+    return createPortal(children, document.body)
+  }
+  if (!RootPortal) {
+    return <>{children}</>
+  }
+  return <RootPortal>{children}</RootPortal>
+}
+
+export { Portal }