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

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

@@ -0,0 +1,114 @@
+import * as React from "react"
+import { View } from "@tarojs/components"
+import { cn } from "@/lib/utils"
+
+const TabsContext = React.createContext<{
+  value?: string
+  onValueChange?: (value: string) => void
+} | null>(null)
+
+const Tabs = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View> & {
+      value?: string
+      defaultValue?: string
+      onValueChange?: (value: string) => void
+  }
+>(({ className, value: valueProp, defaultValue, onValueChange, ...props }, ref) => {
+    const [valueState, setValueState] = React.useState<string | undefined>(defaultValue)
+    const value = valueProp !== undefined ? valueProp : valueState
+    
+    const handleValueChange = (newValue: string) => {
+        if (valueProp === undefined) {
+            setValueState(newValue)
+        }
+        onValueChange?.(newValue)
+    }
+
+  return (
+      <TabsContext.Provider value={{ value, onValueChange: handleValueChange }}>
+        <View
+          ref={ref}
+          className={cn(className)}
+          {...props}
+        />
+    </TabsContext.Provider>
+  )
+})
+Tabs.displayName = "Tabs"
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View>
+>(({ className, ...props }, ref) => (
+  <View
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = "TabsList"
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View> & {
+      value: string
+      disabled?: boolean
+  }
+>(({ className, value, onClick, disabled, ...props }, ref) => {
+    const context = React.useContext(TabsContext)
+    const isActive = context?.value === value
+    
+    const handleClick = (e: any) => {
+        if (disabled) return
+        context?.onValueChange?.(value)
+        onClick?.(e)
+    }
+
+  return (
+    <View
+      ref={ref}
+      onClick={handleClick}
+      className={cn(
+        "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1 text-sm font-medium ring-offset-background transition-all focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background disabled:pointer-events-none disabled:opacity-50",
+        isActive && "bg-background text-foreground shadow-sm",
+        disabled && "opacity-50 pointer-events-none",
+        className
+        )}
+      hoverClass={
+        disabled
+          ? undefined
+          : "border-ring ring-2 ring-ring ring-offset-2 ring-offset-background"
+      }
+      {...props}
+    />
+  )
+})
+TabsTrigger.displayName = "TabsTrigger"
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View> & {
+      value: string
+  }
+>(({ className, value, ...props }, ref) => {
+    const context = React.useContext(TabsContext)
+    if (context?.value !== value) return null
+
+  return (
+    <View
+      ref={ref}
+      className={cn(
+        "mt-2 ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+TabsContent.displayName = "TabsContent"
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

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

@@ -0,0 +1,54 @@
+import * as React from "react"
+import { Textarea as TaroTextarea, View } from "@tarojs/components"
+
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps
+  extends React.ComponentPropsWithoutRef<typeof TaroTextarea> {
+  className?: string
+  autoFocus?: boolean
+}
+
+const Textarea = React.forwardRef<
+  React.ElementRef<typeof TaroTextarea>,
+  TextareaProps
+>(({ className, autoFocus, focus, onFocus, onBlur, ...props }, ref) => {
+  const [isFocused, setIsFocused] = React.useState(false)
+  const disabled = !!(props as any).disabled
+
+  React.useEffect(() => {
+    if (autoFocus || focus) setIsFocused(true)
+  }, [autoFocus, focus])
+  return (
+    <View
+      className={cn(
+        "flex h-20 w-full rounded-md border border-input bg-background px-3 py-2 ring-offset-background focus-within:border-ring focus-within:ring-4 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-background",
+        isFocused && "border-ring ring-4 ring-ring ring-offset-2 ring-offset-background",
+        className
+      )}
+      onTouchStart={() => {
+        if (disabled) return
+        setIsFocused(true)
+      }}
+    >
+      <TaroTextarea
+        className="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 selection:bg-selection selection:text-selection-foreground"
+        placeholderClass="text-muted-foreground"
+        ref={ref}
+        focus={autoFocus || focus}
+        onFocus={(e) => {
+          setIsFocused(true)
+          onFocus?.(e)
+        }}
+        onBlur={(e) => {
+          setIsFocused(false)
+          onBlur?.(e)
+        }}
+        {...props}
+      />
+    </View>
+  )
+})
+Textarea.displayName = "Textarea"
+
+export { Textarea }

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

@@ -0,0 +1,517 @@
+import * as React from "react"
+import { Text, View } from "@tarojs/components"
+import Taro from "@tarojs/taro"
+import {
+  Check,
+  Info,
+  Loader,
+  TriangleAlert,
+  X,
+  CircleAlert
+} from "lucide-react-taro"
+import { cn } from "@/lib/utils"
+import { Portal } from "@/components/ui/portal"
+
+export type ToastPosition =
+  | "top-left"
+  | "top-right"
+  | "bottom-left"
+  | "bottom-right"
+  | "top-center"
+  | "bottom-center"
+
+export type ToastType = "success" | "info" | "warning" | "error" | "loading" | "default"
+
+export interface ToastAction {
+  label: string
+  onClick: () => void
+}
+
+export interface ToastData {
+  id?: string | number
+  title?: React.ReactNode
+  description?: React.ReactNode
+  type?: ToastType
+  duration?: number
+  position?: ToastPosition
+  invert?: boolean
+  dismissible?: boolean
+  descriptionClassName?: string
+  action?: ToastAction
+  cancel?: ToastAction
+  onDismiss?: (toast: Toast) => void
+  onAutoClose?: (toast: Toast) => void
+  richColors?: boolean
+  closeButton?: boolean
+  style?: React.CSSProperties
+  className?: string
+  jsx?: React.ReactNode | ((id: string | number) => React.ReactNode)
+}
+
+export interface Toast extends ToastData {
+  id: string | number
+}
+
+const listeners: Array<(toasts: Toast[]) => void> = []
+let toasts: Toast[] = []
+
+const notify = () => {
+  listeners.forEach((l) => l([...toasts]))
+}
+
+const createToast = (title: React.ReactNode, data: ToastData = {}) => {
+  const id = data.id || Date.now().toString() + Math.random().toString(36).substring(2, 9)
+  
+  const existingToast = toasts.find((t) => t.id === id)
+  
+  if (existingToast) {
+    toasts = toasts.map((t) => 
+      t.id === id ? { ...t, ...data, title: title || t.title } : t
+    )
+  } else {
+    const newToast: Toast = {
+      ...data,
+      id,
+      title,
+      type: data.type || "default",
+      dismissible: data.dismissible ?? true,
+    }
+    toasts = [...toasts, newToast]
+  }
+  
+  notify()
+  return id
+}
+
+const dismiss = (id?: string | number) => {
+  if (!id) {
+    toasts = []
+  } else {
+    toasts = toasts.filter((t) => t.id !== id)
+  }
+  notify()
+}
+
+type ToastFunction = (title: string | React.ReactNode, data?: ToastData) => string | number
+
+const toastFn: ToastFunction = (title, data) => createToast(title, data)
+
+const toast = Object.assign(toastFn, {
+  success: (title: string | React.ReactNode, data?: ToastData) => 
+    createToast(title, { ...data, type: "success" }),
+  error: (title: string | React.ReactNode, data?: ToastData) => 
+    createToast(title, { ...data, type: "error" }),
+  warning: (title: string | React.ReactNode, data?: ToastData) => 
+    createToast(title, { ...data, type: "warning" }),
+  info: (title: string | React.ReactNode, data?: ToastData) => 
+    createToast(title, { ...data, type: "info" }),
+  loading: (title: string | React.ReactNode, data?: ToastData) => 
+    createToast(title, { ...data, type: "loading" }),
+  message: (title: string | React.ReactNode, data?: ToastData) => 
+    createToast(title, { ...data, type: "default" }),
+  custom: (jsx: (id: string | number) => React.ReactNode, data?: ToastData) => {
+    const id = data?.id || Date.now().toString()
+    return createToast(null, { ...data, id, jsx })
+  },
+  dismiss,
+  promise: <T,>(
+    promise: Promise<T> | (() => Promise<T>),
+    data: {
+      loading?: string | React.ReactNode
+      success?: string | React.ReactNode | ((data: T) => React.ReactNode)
+      error?: string | React.ReactNode | ((error: any) => React.ReactNode)
+      finally?: () => void
+    } & ToastData
+  ) => {
+    const id = toast.loading(data.loading, { ...data })
+    
+    const p = typeof promise === "function" ? promise() : promise
+    
+    p.then((res) => {
+      const successMessage = typeof data.success === "function" ? data.success(res) : data.success
+      toast.success(successMessage, { id, ...data })
+    })
+    .catch((err) => {
+      const errorMessage = typeof data.error === "function" ? data.error(err) : data.error
+      toast.error(errorMessage, { id, ...data })
+    })
+    .finally(() => {
+      data.finally?.()
+    })
+    
+    return id
+  }
+})
+
+interface ToasterProps {
+  position?: ToastPosition
+  richColors?: boolean
+  expand?: boolean
+  closeButton?: boolean
+  offset?: number
+  dir?: "rtl" | "ltr" | "auto"
+  visibleToasts?: number
+  duration?: number
+  gap?: number
+  theme?: "light" | "dark" | "system"
+  className?: string
+  style?: React.CSSProperties
+  toastOptions?: Omit<ToastData, "id">
+}
+
+const Toaster = ({
+  position = "bottom-right",
+  richColors = false,
+  expand = false,
+  closeButton = false,
+  visibleToasts = 3,
+  duration = 4000,
+  gap = 14,
+  className,
+  style,
+  toastOptions
+}: ToasterProps) => {
+  const [activeToasts, setActiveToasts] = React.useState<Toast[]>([])
+  const [closingIds, setClosingIds] = React.useState<Set<string | number>>(() => new Set())
+  const [frontHeight, setFrontHeight] = React.useState<number | null>(null)
+  const frontIdRef = React.useRef(`toaster-front-${Math.random().toString(36).slice(2, 9)}`)
+
+  React.useEffect(() => {
+    listeners.push(setActiveToasts)
+    return () => {
+      const index = listeners.indexOf(setActiveToasts)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [])
+
+  const getPositionStyle = (pos: ToastPosition) => {
+    switch (pos) {
+      case "top-left": return "top-0 left-0 right-0 justify-start"
+      case "top-right": return "top-0 left-0 right-0 justify-end"
+      case "bottom-left": return "bottom-0 left-0 right-0 justify-start"
+      case "bottom-right": return "bottom-0 left-0 right-0 justify-end"
+      case "top-center": return "top-0 left-0 right-0 justify-center"
+      case "bottom-center": return "bottom-0 left-0 right-0 justify-center"
+      default: return "bottom-0 left-0 right-0 justify-end"
+    }
+  }
+
+  const isTop = position.includes("top")
+
+  React.useEffect(() => {
+    if (expand) return
+    if (activeToasts.length <= visibleToasts) return
+
+    const overflow = activeToasts.slice(0, activeToasts.length - visibleToasts)
+    const nextToClose = overflow.find((t) => !closingIds.has(t.id))
+    if (!nextToClose) return
+
+    setClosingIds((prev) => {
+      if (prev.has(nextToClose.id)) return prev
+      const next = new Set(prev)
+      next.add(nextToClose.id)
+      return next
+    })
+  }, [activeToasts, closingIds, expand, visibleToasts])
+
+  React.useEffect(() => {
+    setClosingIds((prev) => {
+      if (prev.size === 0) return prev
+      const activeIds = new Set(activeToasts.map((t) => t.id))
+      const next = new Set<string | number>()
+      prev.forEach((id) => {
+        if (activeIds.has(id)) next.add(id)
+      })
+      return next.size === prev.size ? prev : next
+    })
+  }, [activeToasts])
+
+  const toastsToRender = React.useMemo(() => {
+    if (expand) return activeToasts
+    const keep = activeToasts.slice(-visibleToasts)
+    const overflowCount = Math.max(0, activeToasts.length - visibleToasts)
+    const overflowIds = new Set(activeToasts.slice(0, overflowCount).map((t) => t.id))
+    const closing = activeToasts.filter((t) => overflowIds.has(t.id) && closingIds.has(t.id))
+    return [...closing, ...keep]
+  }, [activeToasts, closingIds, expand, visibleToasts])
+
+  const listStyle = expand ? ({ gap } as React.CSSProperties) : undefined
+
+  React.useEffect(() => {
+    if (toastsToRender.length === 0) return
+    const timer = setTimeout(() => {
+      const query = Taro.createSelectorQuery()
+      query
+        .select(`#${frontIdRef.current}`)
+        .boundingClientRect((res) => {
+          const rect = Array.isArray(res) ? res[0] : res
+          if (rect?.height) setFrontHeight(rect.height)
+        })
+        .exec()
+    }, 50)
+    return () => clearTimeout(timer)
+  }, [toastsToRender.length])
+
+  return (
+    <Portal>
+      <View
+        className={cn(
+          "toaster fixed z-[100] flex p-4 w-full pointer-events-none",
+          getPositionStyle(position),
+          className
+        )}
+        data-position={position}
+        style={style}
+      >
+        <View
+          className={cn(
+            "toaster-list relative w-full flex",
+            isTop ? "flex-col-reverse" : "flex-col"
+          )}
+          style={listStyle}
+        >
+          {toastsToRender.map((t, index) => {
+            const isFront = index === toastsToRender.length - 1
+            const stackIndex = toastsToRender.length - 1 - index
+
+            return (
+              <ToastItem
+                key={t.id}
+                elementId={isFront ? frontIdRef.current : undefined}
+                item={t}
+                isExpanded={expand}
+                isFront={isFront}
+                stackIndex={stackIndex}
+                isTop={isTop}
+                gap={gap}
+                forceClose={!expand && closingIds.has(t.id)}
+                frontHeight={frontHeight}
+                duration={t.duration || duration}
+                richColors={t.richColors ?? richColors}
+                closeButton={t.closeButton ?? closeButton}
+                toastOptions={toastOptions}
+              />
+            )
+          })}
+        </View>
+      </View>
+    </Portal>
+  )
+}
+
+const ToastItem = ({
+  elementId,
+  item,
+  isExpanded,
+  isFront,
+  stackIndex,
+  isTop,
+  gap,
+  forceClose,
+  frontHeight,
+  duration,
+  richColors,
+  closeButton,
+  toastOptions
+}: {
+  elementId?: string
+  item: Toast
+  isExpanded: boolean
+  isFront: boolean
+  stackIndex: number
+  isTop: boolean
+  gap: number
+  forceClose: boolean
+  frontHeight: number | null
+  duration: number
+  richColors: boolean
+  closeButton: boolean
+  toastOptions?: Omit<ToastData, "id">
+}) => {
+  const [isVisible, setIsVisible] = React.useState(false)
+  const [isRemoved, setIsRemoved] = React.useState(false)
+  const timeOutRef = React.useRef<NodeJS.Timeout>()
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => setIsVisible(true), 16)
+    
+    if (item.duration === Infinity) return
+
+    const d = item.duration || duration
+    timeOutRef.current = setTimeout(() => {
+      handleDismiss()
+    }, d)
+
+    return () => {
+      clearTimeout(timer)
+      clearTimeout(timeOutRef.current)
+    }
+  }, [item.duration, duration])
+
+  const handleDismiss = () => {
+    setIsVisible(false)
+    setTimeout(() => {
+      setIsRemoved(true)
+      item.onDismiss?.(item)
+      dismiss(item.id)
+    }, 400)
+  }
+
+  React.useEffect(() => {
+    if (!forceClose) return
+    const t = setTimeout(() => handleDismiss(), 16)
+    return () => clearTimeout(t)
+  }, [forceClose])
+  
+  const TypeIcon = {
+    success: Check,
+    error: CircleAlert,
+    warning: TriangleAlert,
+    info: Info,
+    loading: Loader,
+    default: null
+  }[item.type || "default"]
+
+  const palette = React.useMemo(() => {
+    if (!richColors) return null
+    const type = item.type || "default"
+    if (type === "success") {
+      return { backgroundColor: "hsl(143, 85%, 96%)", borderColor: "hsl(145, 92%, 87%)", color: "hsl(140, 100%, 27%)" }
+    }
+    if (type === "info") {
+      return { backgroundColor: "hsl(208, 100%, 97%)", borderColor: "hsl(221, 91%, 93%)", color: "hsl(210, 92%, 45%)" }
+    }
+    if (type === "warning") {
+      return { backgroundColor: "hsl(49, 100%, 97%)", borderColor: "hsl(49, 91%, 84%)", color: "hsl(31, 92%, 45%)" }
+    }
+    if (type === "error") {
+      return { backgroundColor: "hsl(359, 100%, 97%)", borderColor: "hsl(359, 100%, 94%)", color: "hsl(360, 100%, 45%)" }
+    }
+    return null
+  }, [item.type, richColors])
+
+  const iconColor = palette?.color
+
+  const isCollapsedStack = !isExpanded && !isFront
+  const lift = isTop ? 1 : -1
+  const enterOffset = (frontHeight ?? 80) * 1.5
+  const stackTranslate = lift * gap * stackIndex
+  const stackScale = 1 - stackIndex * 0.05
+  const transform = isCollapsedStack
+    ? `translateY(${stackTranslate}px) scale(${stackScale})`
+    : isVisible
+        ? "translateY(0px)"
+        : `translateY(${(-lift * enterOffset).toFixed(0)}px)`
+
+  const motionStyle: React.CSSProperties = {
+    transform,
+    opacity: isVisible ? 1 : 0,
+    transition: "transform 400ms ease, opacity 400ms ease, height 400ms ease, box-shadow 200ms ease",
+    transformOrigin: isCollapsedStack ? (isTop ? "bottom" : "top") : "center"
+  }
+
+  if (isRemoved) return null
+
+  const isCustom = typeof item.jsx !== "undefined"
+
+  const baseClasses = cn(
+    "toast pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-4 shadow-lg",
+    !palette && "bg-background border-border text-foreground",
+    item.className,
+    toastOptions?.className
+  )
+  
+  const finalStyle: React.CSSProperties = {
+    ...(palette || {}),
+    ...item.style,
+    ...motionStyle,
+    position: isCollapsedStack ? "absolute" : "relative",
+    ...(isCollapsedStack ? (isTop ? { bottom: 0 } : { top: 0 }) : (isTop ? { top: 0 } : { bottom: 0 })),
+    left: 0,
+    right: 0,
+    zIndex: isFront ? 50 : 40 - stackIndex,
+    pointerEvents: isCollapsedStack ? "none" : "auto",
+    ...(isCollapsedStack && frontHeight ? { height: frontHeight } : {})
+  }
+
+  if (isCustom) {
+    const content = typeof item.jsx === "function" ? item.jsx(item.id) : item.jsx
+    return (
+      <View
+        className={cn(
+          "pointer-events-auto w-full"
+        )}
+        id={elementId}
+        style={finalStyle}
+      >
+        <View style={{ opacity: isCollapsedStack ? 0 : 1, transition: "opacity 400ms ease" }}>
+          {content}
+        </View>
+      </View>
+    )
+  }
+
+  return (
+    <View className={baseClasses} style={finalStyle} id={elementId}>
+      <View className="flex gap-3 items-center flex-1" style={{ opacity: isCollapsedStack ? 0 : 1, transition: "opacity 400ms ease" }}>
+        {TypeIcon && (
+          <TypeIcon className={cn("shrink-0", item.type === "loading" && "animate-spin")} color={iconColor} size={20} />
+        )}
+        <View className="flex flex-col gap-1 flex-1">
+          {item.title && <Text className="text-sm font-semibold leading-none" style={palette ? { color: palette.color } : undefined}>{item.title}</Text>}
+          {item.description && (
+            <Text className={cn("text-xs opacity-90 leading-normal", item.descriptionClassName)} style={palette ? { color: palette.color } : undefined}>
+              {item.description}
+            </Text>
+          )}
+        </View>
+      </View>
+
+      {(item.action || item.cancel) && (
+        <View className="flex flex-nowrap items-center gap-2 shrink-0" style={{ opacity: isCollapsedStack ? 0 : 1, transition: "opacity 400ms ease" }}>
+          {item.cancel && (
+            <View
+              className="text-xs font-medium opacity-70 active:opacity-100 whitespace-nowrap"
+              onClick={(e) => {
+                e.stopPropagation()
+                item.cancel?.onClick()
+                handleDismiss()
+              }}
+            >
+              {item.cancel.label}
+            </View>
+          )}
+          {item.action && (
+            <View
+              className="text-xs font-medium active:opacity-80 px-3 py-2 rounded-md bg-primary text-primary-foreground shadow hover:bg-primary hover:bg-opacity-90 whitespace-nowrap"
+              onClick={(e) => {
+                e.stopPropagation()
+                item.action?.onClick()
+                handleDismiss()
+              }}
+            >
+              {item.action.label}
+            </View>
+          )}
+        </View>
+      )}
+
+      {closeButton && (
+        <View
+          className="absolute right-2 top-2 rounded-md p-1 opacity-50 transition-opacity hover:opacity-100 focus:opacity-100 focus:outline-none focus:ring-2"
+          style={{ opacity: isCollapsedStack ? 0 : undefined, transition: "opacity 400ms ease" }}
+          onClick={(e) => {
+            e.stopPropagation()
+            handleDismiss()
+          }}
+        >
+          <X color={iconColor} size={16} />
+        </View>
+      )}
+    </View>
+  )
+}
+
+export { Toaster, toast }