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

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

@@ -0,0 +1,256 @@
+import * as React from "react"
+import { View } from "@tarojs/components"
+import { X } from "lucide-react-taro"
+import { cn } from "@/lib/utils"
+import { Portal } from "@/components/ui/portal"
+import { useKeyboardOffset } from "@/lib/hooks/use-keyboard-offset"
+
+const DialogContext = 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 DialogProps {
+  children: React.ReactNode
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  modal?: boolean
+}
+
+const Dialog = ({ children, open: openProp, defaultOpen, onOpenChange }: DialogProps) => {
+    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 (
+        <DialogContext.Provider value={{ open, onOpenChange: handleOpenChange }}>
+            {children}
+        </DialogContext.Provider>
+    )
+}
+
+const DialogTrigger = React.forwardRef<
+    React.ElementRef<typeof View>,
+    React.ComponentPropsWithoutRef<typeof View> & { asChild?: boolean }
+>(({ className, children, asChild, ...props }, ref) => {
+    const context = React.useContext(DialogContext)
+    return (
+        <View
+          ref={ref}
+          className={cn("w-fit", className)}
+          onClick={(e) => {
+                e.stopPropagation()
+                context?.onOpenChange?.(true)
+            }}
+          {...props}
+        >
+            {children}
+        </View>
+    )
+})
+DialogTrigger.displayName = "DialogTrigger"
+
+const DialogPortal = ({ children }: { children: React.ReactNode }) => {
+    const context = React.useContext(DialogContext)
+    const present = usePresence(context?.open, 200)
+    if (!present) return null
+    
+    return <Portal>{children}</Portal>
+}
+
+const DialogOverlay = React.forwardRef<
+    React.ElementRef<typeof View>,
+    React.ComponentPropsWithoutRef<typeof View>
+>(({ className, onClick, ...props }, ref) => {
+    const context = React.useContext(DialogContext)
+    const state = context?.open ? "open" : "closed"
+    return (
+        <View
+          ref={ref}
+          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
+            )}
+          onClick={(e) => {
+                e.stopPropagation()
+                onClick?.(e)
+                context?.onOpenChange?.(false)
+            }}
+          {...props}
+        />
+    )
+})
+DialogOverlay.displayName = "DialogOverlay"
+
+interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof View> {
+    closeClassName?: string
+}
+
+const DialogContent = React.forwardRef<
+    React.ElementRef<typeof View>,
+    DialogContentProps
+>(({ className, children, style, closeClassName, ...props }, ref) => {
+    const context = React.useContext(DialogContext)
+    const offset = useKeyboardOffset()
+    const state = context?.open ? "open" : "closed"
+    
+    return (
+        <DialogPortal>
+            <View
+              className="fixed inset-0 z-50"
+              onClick={() => context?.onOpenChange?.(false)}
+            >
+              <DialogOverlay />
+              <View
+                ref={ref}
+                data-state={state}
+                className={cn(
+                      "fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-xl",
+                      className
+                  )}
+                style={{
+                  ...(style as object),
+                  top: offset > 0 ? `calc(50% - ${offset / 2}px)` : undefined
+                }}
+                onClick={(e) => e.stopPropagation()}
+                {...props}
+              >
+                  {children}
+                  <View 
+                    data-slot="dialog-close"
+                    className={cn(
+                        "absolute right-4 top-4 flex h-6 w-6 items-center justify-center 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-accent data-[state=open]:text-muted-foreground",
+                        closeClassName
+                    )}
+                    data-state={state}
+                    onClick={(e) => {
+                          e.stopPropagation()
+                          context?.onOpenChange?.(false)
+                      }}
+                  >
+                      <X size={16} />
+                      <View className="sr-only">Close</View>
+                  </View>
+              </View>
+            </View>
+        </DialogPortal>
+    )
+})
+DialogContent.displayName = "DialogContent"
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof View>) => (
+  <View
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  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}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View>
+>(({ className, ...props }, ref) => (
+  <View
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = "DialogTitle"
+
+const DialogDescription = 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}
+  />
+))
+DialogDescription.displayName = "DialogDescription"
+
+const DialogClose = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View>
+>(({ className, ...props }, ref) => {
+    const context = React.useContext(DialogContext)
+    return (
+        <View
+          ref={ref}
+          className={className}
+          onClick={(e) => {
+                e.stopPropagation()
+                context?.onOpenChange?.(false)
+            }}
+          {...props}
+        />
+    )
+})
+DialogClose.displayName = "DialogClose"
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}

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

@@ -0,0 +1,192 @@
+import * as React from "react"
+import { View } from "@tarojs/components"
+import { cn } from "@/lib/utils"
+import { Portal } from "@/components/ui/portal"
+
+const DrawerContext = React.createContext<{
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+} | null>(null)
+
+interface DrawerProps extends React.ComponentPropsWithoutRef<typeof View> {
+    shouldScaleBackground?: boolean
+    open?: boolean
+    defaultOpen?: boolean
+    onOpenChange?: (open: boolean) => void
+}
+
+const Drawer = ({
+  shouldScaleBackground = true,
+  children,
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+  ...props
+}: DrawerProps) => {
+    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 (
+    <DrawerContext.Provider value={{ open, onOpenChange: handleOpenChange }}>
+        <View {...props}>{children}</View>
+    </DrawerContext.Provider>
+  )
+}
+Drawer.displayName = "Drawer"
+
+const DrawerTrigger = React.forwardRef<
+    React.ElementRef<typeof View>,
+    React.ComponentPropsWithoutRef<typeof View> & { asChild?: boolean }
+>(({ className, children, asChild, ...props }, ref) => {
+    const context = React.useContext(DrawerContext)
+    return (
+        <View
+          ref={ref}
+          className={cn("w-fit", className)}
+          onClick={(e) => {
+                e.stopPropagation()
+                context?.onOpenChange?.(true)
+            }}
+          {...props}
+        >
+            {children}
+        </View>
+    )
+})
+DrawerTrigger.displayName = "DrawerTrigger"
+
+const DrawerPortal = ({ children }: { children: React.ReactNode }) => {
+    const context = React.useContext(DrawerContext)
+    if (!context?.open) return null
+    return <Portal>{children}</Portal>
+}
+
+const DrawerClose = React.forwardRef<
+    React.ElementRef<typeof View>,
+    React.ComponentPropsWithoutRef<typeof View> & { asChild?: boolean }
+>(({ className, children, asChild, ...props }, ref) => {
+    const context = React.useContext(DrawerContext)
+    return (
+        <View
+          ref={ref}
+          className={className}
+          onClick={(e) => {
+                e.stopPropagation()
+                context?.onOpenChange?.(false)
+            }}
+          {...props}
+        >
+            {children}
+        </View>
+    )
+})
+DrawerClose.displayName = "DrawerClose"
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View>
+>(({ className, ...props }, ref) => {
+    const context = React.useContext(DrawerContext)
+  return (
+    <View
+      ref={ref}
+      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
+      )}
+      onClick={() => context?.onOpenChange?.(false)}
+      {...props}
+    />
+  )
+})
+DrawerOverlay.displayName = "DrawerOverlay"
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <View
+      ref={ref}
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom duration-300",
+        className
+      )}
+      {...props}
+    >
+      <View className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      {children}
+    </View>
+  </DrawerPortal>
+))
+DrawerContent.displayName = "DrawerContent"
+
+const DrawerHeader = ({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof View>) => (
+  <View
+    className={cn("grid gap-2 p-4 text-center sm:text-left", className)}
+    {...props}
+  />
+)
+DrawerHeader.displayName = "DrawerHeader"
+
+const DrawerFooter = ({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof View>) => (
+  <View
+    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+    {...props}
+  />
+)
+DrawerFooter.displayName = "DrawerFooter"
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View>
+>(({ className, ...props }, ref) => (
+  <View
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DrawerTitle.displayName = "DrawerTitle"
+
+const DrawerDescription = 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}
+  />
+))
+DrawerDescription.displayName = "DrawerDescription"
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}