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

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

@@ -0,0 +1,262 @@
+import * as React from "react"
+import { View } from "@tarojs/components"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react-taro"
+
+import { cn } from "@/lib/utils"
+import { Portal } from "@/components/ui/portal"
+
+const SheetContext = React.createContext<{
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+} | null>(null)
+
+const usePresence = (open: boolean | undefined, durationMs: number) => {
+  const [present, setPresent] = React.useState(!!open)
+  const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  React.useEffect(() => {
+    if (open) {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current)
+      timeoutRef.current = null
+      setPresent(true)
+      return
+    }
+
+    timeoutRef.current = setTimeout(() => setPresent(false), durationMs)
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current)
+      timeoutRef.current = null
+    }
+  }, [open, durationMs])
+
+  return present
+}
+
+interface SheetProps {
+    children: React.ReactNode
+    open?: boolean
+    defaultOpen?: boolean
+    onOpenChange?: (open: boolean) => void
+    modal?: boolean
+}
+
+const Sheet = ({ children, open: openProp, defaultOpen, onOpenChange }: SheetProps) => {
+    const [openState, setOpenState] = React.useState(defaultOpen || false)
+    const open = openProp !== undefined ? openProp : openState
+    
+    const handleOpenChange = (newOpen: boolean) => {
+        if (openProp === undefined) {
+            setOpenState(newOpen)
+        }
+        onOpenChange?.(newOpen)
+    }
+
+    return (
+        <SheetContext.Provider value={{ open, onOpenChange: handleOpenChange }}>
+            {children}
+        </SheetContext.Provider>
+    )
+}
+
+const SheetTrigger = React.forwardRef<
+    React.ElementRef<typeof View>,
+    React.ComponentPropsWithoutRef<typeof View> & { asChild?: boolean }
+>(({ className, children, asChild, ...props }, ref) => {
+    const context = React.useContext(SheetContext)
+    return (
+        <View
+          ref={ref}
+          className={cn("w-fit", className)}
+          onClick={(e) => {
+                e.stopPropagation()
+                context?.onOpenChange?.(true)
+            }}
+          {...props}
+        >
+            {children}
+        </View>
+    )
+})
+SheetTrigger.displayName = "SheetTrigger"
+
+const SheetClose = React.forwardRef<
+    React.ElementRef<typeof View>,
+    React.ComponentPropsWithoutRef<typeof View> & { asChild?: boolean }
+>(({ className, children, asChild, ...props }, ref) => {
+    const context = React.useContext(SheetContext)
+    return (
+        <View
+          ref={ref}
+          className={className}
+          onClick={(e) => {
+                e.stopPropagation()
+                context?.onOpenChange?.(false)
+            }}
+          {...props}
+        >
+            {children}
+        </View>
+    )
+})
+SheetClose.displayName = "SheetClose"
+
+const SheetPortal = ({ children }: { children: React.ReactNode }) => {
+    const context = React.useContext(SheetContext)
+    const present = usePresence(context?.open, 300)
+    if (!present) return null
+    return <Portal>{children}</Portal>
+}
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View>
+>(({ className, onClick, ...props }, ref) => {
+  const context = React.useContext(SheetContext)
+  const state = context?.open ? "open" : "closed"
+  return (
+      <View
+        data-state={state}
+        className={cn(
+          "fixed inset-0 isolate z-50 bg-black bg-opacity-10 transition-opacity duration-100 supports-[backdrop-filter]:backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+          className
+        )}
+        {...props}
+        ref={ref}
+        onClick={(e) => {
+            e.stopPropagation()
+            onClick?.(e)
+            context?.onOpenChange?.(false)
+        }}
+      />
+    )
+})
+SheetOverlay.displayName = "SheetOverlay"
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+)
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof View>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof View>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => {
+    const context = React.useContext(SheetContext)
+    const state = context?.open ? "open" : "closed"
+  return (
+    <SheetPortal>
+      <View
+        className="fixed inset-0 z-50"
+        onClick={() => context?.onOpenChange?.(false)}
+      >
+        <SheetOverlay />
+        <View
+          ref={ref}
+          className={cn(sheetVariants({ side }), "sheet-content", className)}
+          data-state={state}
+          data-side={side}
+          onClick={(e) => e.stopPropagation()}
+          {...props}
+        >
+          {children}
+          <View 
+            className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
+            data-state={state}
+            onClick={(e) => {
+                  e.stopPropagation()
+                  context?.onOpenChange?.(false)
+              }}
+          >
+            <X size={16} />
+            <View className="sr-only">Close</View>
+          </View>
+        </View>
+      </View>
+    </SheetPortal>
+  )
+})
+SheetContent.displayName = "SheetContent"
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof View>) => (
+  <View
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof View>) => (
+  <View
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View>
+>(({ className, ...props }, ref) => (
+  <View
+    ref={ref}
+    className={cn("text-lg font-semibold text-foreground", className)}
+    {...props}
+  />
+))
+SheetTitle.displayName = "SheetTitle"
+
+const SheetDescription = 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}
+  />
+))
+SheetDescription.displayName = "SheetDescription"
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

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

@@ -0,0 +1,17 @@
+import { View } from "@tarojs/components"
+
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof View>) {
+  return (
+    <View
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

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

@@ -0,0 +1,203 @@
+import * as React from "react"
+import { View } from "@tarojs/components"
+import Taro from "@tarojs/taro"
+
+import { cn } from "@/lib/utils"
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof View>,
+  Omit<React.ComponentPropsWithoutRef<typeof View>, "value" | "onChange"> & {
+    value?: number[]
+    defaultValue?: number[]
+    min?: number
+    max?: number
+    step?: number
+    onValueChange?: (value: number[]) => void
+    disabled?: boolean
+    orientation?: "horizontal" | "vertical"
+    trackClassName?: string
+    rangeClassName?: string
+    thumbClassName?: string
+  }
+>(({ className, trackClassName, rangeClassName, thumbClassName, value: valueProp, defaultValue, min = 0, max = 100, step = 1, onValueChange, disabled, orientation = "horizontal", ...props }, ref) => {
+  const [localValue, setLocalValue] = React.useState<number[]>(
+    valueProp || defaultValue || [min]
+  )
+  const [isDragging, setIsDragging] = React.useState(false)
+  const [rect, setRect] = React.useState<{ left: number; top: number; width: number; height: number } | null>(null)
+  const rectRef = React.useRef<{ left: number; top: number; width: number; height: number } | null>(null)
+  const idRef = React.useRef(`slider-${Math.random().toString(36).substr(2, 9)}`)
+  
+  const value = valueProp !== undefined ? valueProp : localValue
+  const currentValue = value[0] ?? min
+
+  React.useEffect(() => {
+    rectRef.current = rect
+  }, [rect])
+
+  React.useEffect(() => {
+    // Delay measurement to ensure the component is mounted and layout is ready
+    const timer = setTimeout(() => {
+      const query = Taro.createSelectorQuery()
+      query
+        .select(`#${idRef.current}`)
+        .boundingClientRect((res) => {
+        const measuredRect = Array.isArray(res) ? res[0] : res
+        if (measuredRect) {
+          setRect({ left: measuredRect.left, top: measuredRect.top, width: measuredRect.width, height: measuredRect.height })
+          rectRef.current = { left: measuredRect.left, top: measuredRect.top, width: measuredRect.width, height: measuredRect.height }
+        }
+      })
+        .exec()
+    }, 100)
+    return () => clearTimeout(timer)
+  }, [])
+
+  const updateValue = (pageX: number, pageY: number, passedRect?: { left: number; top: number; width: number; height: number } | null) => {
+    const currentRect = passedRect || rectRef.current
+    if (!currentRect || disabled) return
+
+    let percentage = 0
+    if (orientation === "horizontal") {
+      const { left, width } = currentRect
+      percentage = Math.min(Math.max((pageX - left) / width, 0), 1)
+    } else {
+      const { top, height } = currentRect
+      percentage = Math.min(Math.max(1 - (pageY - top) / height, 0), 1)
+    }
+
+    const rawValue = min + percentage * (max - min)
+    const steppedValue = Math.round((rawValue - min) / step) * step + min
+    const newValue = Math.min(Math.max(steppedValue, min), max)
+    
+    if (newValue !== currentValue) {
+      const nextValue = [newValue]
+      if (valueProp === undefined) {
+        setLocalValue(nextValue)
+      }
+      onValueChange?.(nextValue)
+    }
+  }
+
+  const handleTouchStart = (e: any) => {
+    if (disabled) return
+    setIsDragging(true)
+    // Try to update rect on touch start in case of layout changes
+    const query = Taro.createSelectorQuery()
+    query
+      .select(`#${idRef.current}`)
+      .boundingClientRect((res) => {
+        const measuredRect = Array.isArray(res) ? res[0] : res
+        if (measuredRect) {
+          setRect({ left: measuredRect.left, top: measuredRect.top, width: measuredRect.width, height: measuredRect.height })
+          rectRef.current = { left: measuredRect.left, top: measuredRect.top, width: measuredRect.width, height: measuredRect.height }
+          // If we have a touch event, update value immediately after getting fresh rect
+          const touch = e.touches[0] || e.changedTouches[0]
+          if (touch) {
+             updateValue(touch.pageX, touch.pageY, rectRef.current)
+          }
+        }
+      })
+      .exec()
+  }
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    if (disabled) return
+    setIsDragging(true)
+    
+    const query = Taro.createSelectorQuery()
+    query
+      .select(`#${idRef.current}`)
+      .boundingClientRect((res) => {
+        const measuredRect = Array.isArray(res) ? res[0] : res
+        if (measuredRect) {
+          setRect({ left: measuredRect.left, top: measuredRect.top, width: measuredRect.width, height: measuredRect.height })
+          rectRef.current = { left: measuredRect.left, top: measuredRect.top, width: measuredRect.width, height: measuredRect.height }
+          updateValue(e.pageX, e.pageY, rectRef.current)
+        }
+      })
+      .exec()
+
+    const onMouseMove = (moveEvent: MouseEvent) => {
+      updateValue(moveEvent.pageX, moveEvent.pageY)
+    }
+
+    const onMouseUp = (upEvent: MouseEvent) => {
+      setIsDragging(false)
+      updateValue(upEvent.pageX, upEvent.pageY)
+      document.removeEventListener('mousemove', onMouseMove)
+      document.removeEventListener('mouseup', onMouseUp)
+    }
+
+    if (typeof document !== 'undefined') {
+        document.addEventListener('mousemove', onMouseMove)
+        document.addEventListener('mouseup', onMouseUp)
+    }
+  }
+
+  const handleTouchMove = (e: any) => {
+    if (disabled) return
+    const touch = e.touches[0] || e.changedTouches[0]
+    if (touch) {
+      updateValue(touch.pageX, touch.pageY)
+    }
+  }
+
+  const handleTouchEnd = (e: any) => {
+    if (disabled) return
+    setIsDragging(false)
+    const touch = e.touches[0] || e.changedTouches[0]
+    if (touch) {
+      updateValue(touch.pageX, touch.pageY)
+    }
+  }
+
+  const percentage = ((currentValue - min) / (max - min)) * 100
+
+  return (
+    <View
+      ref={ref}
+      id={idRef.current}
+      className={cn(
+        "relative flex touch-none select-none items-center",
+        orientation === "horizontal" ? "w-full py-4" : "h-full flex-col px-4",
+        className
+      )}
+      onTouchStart={handleTouchStart}
+      onTouchMove={handleTouchMove}
+      onTouchEnd={handleTouchEnd}
+      // @ts-ignore
+      onMouseDown={handleMouseDown}
+      {...props}
+    >
+      <View 
+        className={cn(
+          "relative grow overflow-hidden rounded-full bg-secondary",
+          orientation === "horizontal" ? "h-1 w-full" : "w-1 h-full",
+          trackClassName
+        )}
+      >
+        <View 
+          className={cn("absolute bg-primary", orientation === "horizontal" ? "h-full" : "w-full bottom-0", rangeClassName)} 
+          style={orientation === "horizontal" ? { width: `${percentage}%` } : { height: `${percentage}%` }} 
+        />
+      </View>
+      <View
+        className={cn(
+            "absolute block h-3 w-3 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors disabled:pointer-events-none disabled:opacity-50",
+            isDragging && "ring-4 ring-primary ring-opacity-30",
+            disabled && "opacity-50",
+            thumbClassName
+        )}
+        style={
+          orientation === "horizontal" 
+          ? { left: `${percentage}%`, transform: 'translateX(-50%)' } 
+          : { bottom: `${percentage}%`, transform: 'translateY(50%)' }
+        }
+      />
+    </View>
+  )
+})
+Slider.displayName = "Slider"
+
+export { Slider }

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

@@ -0,0 +1 @@
+export * from "./toast"

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

@@ -0,0 +1,55 @@
+import * as React from "react"
+import { View } from "@tarojs/components"
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View> & {
+    checked?: boolean
+    defaultChecked?: boolean
+    onCheckedChange?: (checked: boolean) => void
+    disabled?: boolean
+  }
+>(({ className, checked, defaultChecked, onCheckedChange, disabled, ...props }, ref) => {
+  const [localChecked, setLocalChecked] = React.useState(defaultChecked || false)
+  const isControlled = checked !== undefined
+  const currentChecked = isControlled ? checked : localChecked
+
+  return (
+    <View
+      className={cn(
+        "inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background [-webkit-tap-highlight-color:transparent]",
+        disabled && "cursor-not-allowed opacity-50",
+        currentChecked ? "bg-primary" : "bg-input",
+        className
+      )}
+      data-state={currentChecked ? "checked" : "unchecked"}
+      hoverClass={
+        disabled
+          ? undefined
+          : "border-ring ring-2 ring-ring ring-offset-2 ring-offset-background"
+      }
+      {...props}
+      ref={ref}
+      onClick={(e) => {
+        if (disabled) return
+        e.stopPropagation()
+        const newChecked = !currentChecked
+        if (!isControlled) {
+            setLocalChecked(newChecked)
+        }
+        onCheckedChange?.(newChecked)
+      }}
+    >
+      <View
+        className={cn(
+          "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform",
+          currentChecked ? "translate-x-5" : "translate-x-0"
+        )}
+      />
+    </View>
+  )
+})
+Switch.displayName = "Switch"
+
+export { Switch }

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

@@ -0,0 +1,142 @@
+import * as React from "react"
+import { View } from "@tarojs/components"
+
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View>
+>(({ className, ...props }, ref) => (
+  <View className="relative w-full overflow-auto">
+    <View
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </View>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View>
+>(({ className, ...props }, ref) => (
+  <View ref={ref} className={cn("[&>view]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View>
+>(({ className, ...props }, ref) => (
+  <View
+    ref={ref}
+    className={cn("[&>view:last-child]:border-b-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View>
+>(({ className, ...props }, ref) => (
+  <View
+    ref={ref}
+    className={cn(
+      "border-t bg-muted bg-opacity-50 font-medium [&>view:last-child]:border-b-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View>
+>(({ className, ...props }, ref) => (
+  <View
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted hover:bg-opacity-50 data-[state=selected]:bg-muted flex flex-row",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View>
+>(({ className, ...props }, ref) => (
+  <View
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground flex flex-1 basis-0 min-w-0 items-center justify-start",
+      typeof className === "string" && /(^|\s)text-right(\s|$)/.test(className)
+        ? "justify-end"
+        : null,
+      typeof className === "string" && /(^|\s)w-/.test(className)
+        ? "flex-none basis-auto"
+        : null,
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View> & { colSpan?: number }
+>(({ className, colSpan, style, ...props }, ref) => (
+  <View
+    ref={ref}
+    style={
+      colSpan != null &&
+      typeof style === "object" &&
+      style != null &&
+      !Array.isArray(style) &&
+      !(typeof className === "string" && /(^|\s)w-/.test(className))
+        ? { ...(style as React.CSSProperties), flexGrow: colSpan }
+        : style
+    }
+    className={cn(
+      "p-4 align-middle flex flex-1 basis-0 min-w-0 items-center justify-start",
+      typeof className === "string" && /(^|\s)text-right(\s|$)/.test(className)
+        ? "justify-end"
+        : null,
+      typeof className === "string" && /(^|\s)w-/.test(className)
+        ? "flex-none basis-auto"
+        : null,
+      className
+    )}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View>
+>(({ className, ...props }, ref) => (
+  <View
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}