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

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

@@ -0,0 +1,228 @@
+import * as React from "react"
+import { View, Swiper, SwiperItem } from "@tarojs/components"
+import { ArrowLeft, ArrowRight } from "lucide-react-taro"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+type CarouselProps = {
+  opts?: {
+    loop?: boolean
+    autoplay?: boolean
+    interval?: number
+    duration?: number
+    displayMultipleItems?: number
+  }
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+  className?: string
+  children?: React.ReactNode
+}
+
+export type CarouselApi = {
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+  scrollTo: (index: number) => void
+  selectedScrollSnap: () => number
+}
+
+type CarouselContextProps = {
+  orientation: "horizontal" | "vertical"
+  current: number
+  setCurrent: (index: number) => void
+  count: number
+  setCount: (count: number) => void
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+  opts?: CarouselProps["opts"]
+}
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+  return context
+}
+
+const Carousel = React.forwardRef<
+  React.ElementRef<typeof View>,
+  CarouselProps
+>(({ opts, orientation = "horizontal", setApi, className, children, ...props }, ref) => {
+  const [current, setCurrent] = React.useState(0)
+  const [count, setCount] = React.useState(0)
+
+  const scrollPrev = React.useCallback(() => {
+    setCurrent((prev) => Math.max(0, prev - 1))
+  }, [])
+
+  const scrollNext = React.useCallback(() => {
+    setCurrent((prev) => Math.min(count - 1, prev + 1))
+  }, [count])
+
+  const canScrollPrev = current > 0
+  const canScrollNext = current < count - 1
+
+  const scrollTo = React.useCallback((index: number) => {
+    setCurrent(index)
+  }, [])
+
+  const selectedScrollSnap = React.useCallback(() => current, [current])
+
+  React.useEffect(() => {
+    if (setApi) {
+      setApi({
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+        scrollTo,
+        selectedScrollSnap,
+      })
+    }
+  }, [setApi, scrollPrev, scrollNext, canScrollPrev, canScrollNext, scrollTo, selectedScrollSnap])
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        orientation,
+        current,
+        setCurrent,
+        count,
+        setCount,
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+        opts,
+      }}
+    >
+      <View
+        ref={ref}
+        className={cn("relative w-full", className)}
+        {...props}
+      >
+        {children}
+      </View>
+    </CarouselContext.Provider>
+  )
+})
+Carousel.displayName = "Carousel"
+
+const CarouselContent = React.forwardRef<
+  React.ElementRef<typeof Swiper>,
+  React.ComponentPropsWithoutRef<typeof Swiper>
+>(({ className, children, ...props }, ref) => {
+  const { orientation, current, setCurrent, setCount, opts } = useCarousel()
+
+  React.useEffect(() => {
+    const childCount = React.Children.count(children)
+    setCount(childCount)
+  }, [children, setCount])
+
+  return (
+    <View className={cn("overflow-hidden", className)}>
+      <Swiper
+        ref={ref}
+        className="h-full w-full"
+        vertical={orientation === "vertical"}
+        current={current}
+        onChange={(e) => setCurrent(e.detail.current)}
+        circular={opts?.loop}
+        autoplay={opts?.autoplay}
+        interval={opts?.interval || 5000}
+        duration={opts?.duration || 500}
+        displayMultipleItems={opts?.displayMultipleItems || 1}
+        {...props}
+      >
+        {React.Children.map(children, (child) => {
+          if (React.isValidElement(child)) {
+            return <SwiperItem className="h-full w-full">{child}</SwiperItem>
+          }
+          return null
+        })}
+      </Swiper>
+    </View>
+  )
+})
+CarouselContent.displayName = "CarouselContent"
+
+const CarouselItem = ({ className, children, ...props }: React.ComponentProps<typeof View>) => {
+  return (
+    <View className={cn("h-full w-full", className)} {...props}>
+      {children}
+    </View>
+  )
+}
+CarouselItem.displayName = "CarouselItem"
+
+const CarouselPrevious = React.forwardRef<
+  React.ElementRef<typeof Button>,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute h-8 w-8 rounded-full z-10 bg-background bg-opacity-80 backdrop-blur-sm",
+        orientation === "horizontal"
+          ? "-left-12 top-1/2 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft size={16} />
+      <View className="sr-only">Previous slide</View>
+    </Button>
+  )
+})
+CarouselPrevious.displayName = "CarouselPrevious"
+
+const CarouselNext = React.forwardRef<
+  React.ElementRef<typeof Button>,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute h-8 w-8 rounded-full z-10 bg-background bg-opacity-80 backdrop-blur-sm",
+        orientation === "horizontal"
+          ? "-right-12 top-1/2 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight size={16} />
+      <View className="sr-only">Next slide</View>
+    </Button>
+  )
+})
+CarouselNext.displayName = "CarouselNext"
+
+export {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+}

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

@@ -0,0 +1,58 @@
+import * as React from "react"
+import { View } from "@tarojs/components"
+import { Check } from "lucide-react-taro"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof View>,
+  Omit<React.ComponentPropsWithoutRef<typeof View>, "onClick"> & {
+    checked?: boolean
+    defaultChecked?: boolean
+    onCheckedChange?: (checked: boolean) => void
+    disabled?: boolean
+  }
+>(({ className, checked: checkedProp, defaultChecked, onCheckedChange, disabled, ...props }, ref) => {
+  const [checkedState, setCheckedState] = React.useState<boolean>(
+    defaultChecked ?? false
+  )
+
+  const isControlled = checkedProp !== undefined
+  const checked = isControlled ? checkedProp : checkedState
+
+  const handleClick = (e) => {
+    if (disabled) return
+    e.stopPropagation()
+    const newChecked = !checked
+    if (!isControlled) {
+      setCheckedState(newChecked)
+    }
+    onCheckedChange?.(newChecked)
+  }
+
+  const tabIndex = (props as any).tabIndex ?? (disabled ? -1 : 0)
+
+  return (
+    <View
+      ref={ref}
+      className={cn(
+        "h-4 w-4 shrink-0 rounded-sm border-2 border-primary ring-offset-background flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
+        checked ? "bg-primary text-primary-foreground" : "bg-transparent",
+        className
+      )}
+      {...({ tabIndex } as any)}
+      hoverClass={
+        disabled
+          ? undefined
+          : "border-ring ring-2 ring-ring ring-offset-2 ring-offset-background"
+      }
+      onClick={handleClick}
+      {...props}
+    >
+      {checked && <Check color="#fff" size={12} strokeWidth={3} className="text-current" />}
+    </View>
+  )
+})
+Checkbox.displayName = "Checkbox"
+
+export { Checkbox }

package/lib/__templates__/taro/src/components/ui/code-block.tsx

@@ -0,0 +1,169 @@
+import { View, Text } from '@tarojs/components'
+import { useMemo } from 'react'
+import { Copy } from 'lucide-react-taro'
+import { Button } from '@/components/ui/button'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { cn } from '@/lib/utils'
+import Taro from '@tarojs/taro'
+import type { FC } from 'react'
+
+type TokenType =
+    | 'keyword'
+    | 'string'
+    | 'comment'
+    | 'number'
+    | 'function'
+    | 'tag'
+    | 'attr'
+    | 'operator'
+    | 'plain'
+
+interface Token {
+    type: TokenType
+    content: string
+}
+
+const RULES: { type: TokenType; regex: RegExp }[] = (
+    [
+        { type: 'comment', regex: /\/\/.*/ },
+        { type: 'comment', regex: /\/\*[\s\S]*?\*\// },
+        {
+            type: 'string',
+            regex: /"(?:\\.|[^\\"])*"|'(?:\\.|[^\\'])*'|`(?:\\.|[^\\`])*`/,
+        },
+        {
+            type: 'keyword',
+            regex: /\b(?:import|from|export|default|const|let|var|function|return|if|else|switch|case|break|continue|for|while|do|try|catch|finally|throw|new|this|super|class|extends|implements|interface|type|enum|namespace|as|async|await|yield|void|delete|typeof|instanceof|in|of|null|undefined|true|false)\b/,
+        },
+        { type: 'number', regex: /\b\d+(\.\d+)?\b/ },
+        { type: 'tag', regex: /<\/?[a-zA-Z][a-zA-Z0-9]*\b/ },
+        { type: 'attr', regex: /\b[a-z][a-z0-9]*(?==)/i },
+        { type: 'function', regex: /\b[a-zA-Z_$][a-zA-Z0-9_$]*(?=\s*\()/ },
+        { type: 'operator', regex: /[+\-*/%=<>!&|^~]/ },
+    ] as { type: TokenType; regex: RegExp }[]
+).map(rule => ({
+    ...rule,
+    regex: new RegExp(rule.regex.source, (rule.regex.flags || '') + 'y'),
+}))
+
+function tokenize(code: string): Token[] {
+    const tokens: Token[] = []
+    let lastIndex = 0
+
+    while (lastIndex < code.length) {
+        let matchFound = false
+
+        for (const rule of RULES) {
+            rule.regex.lastIndex = lastIndex
+            const match = rule.regex.exec(code)
+            if (match) {
+                tokens.push({ type: rule.type, content: match[0] })
+                lastIndex += match[0].length
+                matchFound = true
+                break
+            }
+        }
+
+        if (!matchFound) {
+            let plainContent = code[lastIndex]
+            lastIndex++
+
+            // Look ahead for next match to group plain text
+            while (lastIndex < code.length) {
+                let nextMatch = false
+                for (const rule of RULES) {
+                    rule.regex.lastIndex = lastIndex
+                    const match = rule.regex.exec(code)
+                    if (match) {
+                        nextMatch = true
+                        break
+                    }
+                }
+                if (nextMatch) break
+                plainContent += code[lastIndex]
+                lastIndex++
+            }
+            tokens.push({ type: 'plain', content: plainContent })
+        }
+    }
+
+    return tokens
+}
+
+interface CodeBlockProps {
+  code: string
+  className?: string
+  style?: React.CSSProperties
+  scrollAreaClassName?: string
+  showCopyButton?: boolean
+  language?: string
+}
+
+const getTokenColor = (type: TokenType) => {
+  switch (type) {
+    case 'keyword': return '#D73A49' // red
+    case 'string': return '#032F62' // dark blue
+    case 'comment': return '#6A737D' // gray
+    case 'number': return '#005CC5' // blue
+    case 'function': return '#6F42C1' // purple
+    case 'tag': return '#005CC5' // blue
+    case 'attr': return '#6F42C1' // purple
+    case 'operator': return '#D73A49' // red
+    default: return '#24292E'
+  }
+}
+
+const CodeBlock: FC<CodeBlockProps> = ({ 
+  code, 
+  className, 
+  style,
+  scrollAreaClassName, 
+  showCopyButton = true,
+  language
+}) => {
+  const tokens = useMemo(() => tokenize(code), [code])
+
+  const copyCode = async () => {
+    await Taro.setClipboardData({ data: code })
+    Taro.showToast({ title: '已复制', icon: 'success' })
+  }
+
+  return (
+    <View className={cn("relative w-full overflow-hidden", className)} style={style}>
+      <ScrollArea 
+        orientation="both" 
+        className={cn("bg-code rounded-lg w-full", scrollAreaClassName)}
+      >
+        <View className="p-4 inline-block box-border min-w-full">
+          {language && (
+            <Text className="absolute top-2 left-2 text-xs text-muted-foreground uppercase font-mono pointer-events-none">
+              {language}
+            </Text>
+          )}
+          <Text className="text-xs font-mono whitespace-pre">
+            {tokens.map((token, i) => (
+              <Text 
+                key={i} 
+                style={{ color: getTokenColor(token.type) }}
+              >
+                {token.content}
+              </Text>
+            ))}
+          </Text>
+        </View>
+      </ScrollArea>
+      {showCopyButton && (
+        <Button 
+          variant="ghost" 
+          size="icon" 
+          className="absolute top-1 right-1 h-6 w-6"
+          onClick={copyCode}
+        >
+          <Copy size={12} color="#a3a3a3" />
+        </Button>
+      )}
+    </View>
+  )
+}
+
+export { CodeBlock }

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

@@ -0,0 +1,71 @@
+import * as React from "react"
+import { View } from "@tarojs/components"
+
+const CollapsibleContext = React.createContext<{
+    open: boolean
+    onOpenChange: (open: boolean) => void
+} | null>(null)
+
+const Collapsible = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View> & {
+      open?: boolean
+      defaultOpen?: boolean
+      onOpenChange?: (open: boolean) => void
+      disabled?: boolean
+  }
+>(({ open: openProp, defaultOpen, onOpenChange, disabled, ...props }, ref) => {
+    const [openState, setOpenState] = React.useState(defaultOpen || false)
+    const open = openProp !== undefined ? openProp : openState
+
+    const handleOpenChange = (newOpen: boolean) => {
+        if (disabled) return
+        if (openProp === undefined) {
+            setOpenState(newOpen)
+        }
+        onOpenChange?.(newOpen)
+    }
+
+    return (
+        <CollapsibleContext.Provider value={{ open, onOpenChange: handleOpenChange }}>
+            <View ref={ref} {...props} />
+        </CollapsibleContext.Provider>
+    )
+})
+Collapsible.displayName = "Collapsible"
+
+const CollapsibleTrigger = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View> & {
+    asChild?: boolean
+  }
+>(({ className, onClick, asChild, ...props }, ref) => {
+    const context = React.useContext(CollapsibleContext)
+    
+    return (
+        <View
+          ref={ref}
+          className={className}
+          onClick={(e: any) => {
+            context?.onOpenChange(!context.open)
+            onClick?.(e)
+          }}
+          {...(props as any)}
+        />
+    )
+})
+CollapsibleTrigger.displayName = "CollapsibleTrigger"
+
+const CollapsibleContent = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View>
+>(({ className, ...props }, ref) => {
+    const context = React.useContext(CollapsibleContext)
+    
+    if (!context?.open) return null
+
+    return <View ref={ref} className={className} {...props} />
+})
+CollapsibleContent.displayName = "CollapsibleContent"
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }