Work on tailwind prefixing

Author: craquet

components.json

@@ -8,7 +8,7 @@
         "css": "src/index.css",
         "baseColor": "neutral",
         "cssVariables": true,
-        "prefix": ""
+        "prefix": "rfs-"
     },
     "aliases": {
         "components": "@/components",

package-lock.json

@@ -30,13 +30,13 @@
         "@elastic/react-search-ui-views": "^1.22.0",
         "@elastic/search-ui": "^1.22.0",
         "@elastic/search-ui-elasticsearch-connector": "^1.22.0",
-        "@radix-ui/react-checkbox": "^1.1.2",
+        "@radix-ui/react-checkbox": "^1.1.3",
         "@radix-ui/react-dialog": "^1.1.4",
-        "@radix-ui/react-dropdown-menu": "^2.1.2",
-        "@radix-ui/react-label": "^2.1.0",
-        "@radix-ui/react-popover": "^1.1.2",
-        "@radix-ui/react-select": "^2.1.2",
-        "@radix-ui/react-slot": "^1.1.0",
+        "@radix-ui/react-dropdown-menu": "^2.1.4",
+        "@radix-ui/react-label": "^2.1.1",
+        "@radix-ui/react-popover": "^1.1.4",
+        "@radix-ui/react-select": "^2.1.4",
+        "@radix-ui/react-slot": "^1.1.1",
         "@types/luxon": "^3.4.2",
         "@xyflow/react": "^12.3.6",
         "class-variance-authority": "^0.7.1",

package.json

@@ -1,34 +1,36 @@
-import { cn } from "@/lib/utils"
+import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import * as React from "react"
+import { cn } from "@/lib/utils"
 
 const badgeVariants = cva(
-    "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-    {
-        variants: {
-            variant: {
-                default:
-                    "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-                secondary:
-                    "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-                destructive:
-                    "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-                outline: "text-foreground"
-            }
-        },
-        defaultVariants: {
-            variant: "default"
-        }
-    }
+  "rfs-inline-flex rfs-items-center rfs-rounded-full rfs-border rfs-px-2.5 rfs-py-0.5 rfs-text-xs rfs-font-semibold rfs-transition-colors focus:rfs-outline-none focus:rfs-ring-2 focus:rfs-ring-ring focus:rfs-ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "rfs-border-transparent rfs-bg-primary rfs-text-primary-foreground hover:rfs-bg-primary/80",
+        secondary:
+          "rfs-border-transparent rfs-bg-secondary rfs-text-secondary-foreground hover:rfs-bg-secondary/80",
+        destructive:
+          "rfs-border-transparent rfs-bg-destructive rfs-text-destructive-foreground hover:rfs-bg-destructive/80",
+        outline: "rfs-text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
 )
 
 export interface BadgeProps
-    extends React.HTMLAttributes<HTMLDivElement>,
-        VariantProps<typeof badgeVariants> {}
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
 
 function Badge({ className, variant, ...props }: BadgeProps) {
-    return <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
 }
 
 export { Badge, badgeVariants }

src/components/ui/badge.tsx

@@ -1,53 +1,55 @@
-import { cn } from "@/lib/utils"
+import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import * as React from "react"
+import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-    {
-        variants: {
-            variant: {
-                default: "bg-primary text-primary-foreground hover:bg-primary/90",
-                destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-                outline:
-                    "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-                secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-                ghost: "hover:bg-accent hover:text-accent-foreground",
-                link: "text-primary underline-offset-4 hover:underline"
-            },
-            size: {
-                default: "h-10 px-4 py-2",
-                sm: "h-9 rounded-md px-3",
-                lg: "h-11 rounded-md px-8",
-                icon: "size-10"
-            }
-        },
-        defaultVariants: {
-            variant: "default",
-            size: "default"
-        }
-    }
+  "rfs-inline-flex rfs-items-center rfs-justify-center rfs-gap-2 rfs-whitespace-nowrap rfs-rounded-md rfs-text-sm rfs-font-medium rfs-ring-offset-background rfs-transition-colors focus-visible:rfs-outline-none focus-visible:rfs-ring-2 focus-visible:rfs-ring-ring focus-visible:rfs-ring-offset-2 disabled:rfs-pointer-events-none disabled:rfs-opacity-50 [&_svg]:rfs-pointer-events-none [&_svg]:rfs-size-4 [&_svg]:rfs-shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "rfs-bg-primary rfs-text-primary-foreground hover:rfs-bg-primary/90",
+        destructive:
+          "rfs-bg-destructive rfs-text-destructive-foreground hover:rfs-bg-destructive/90",
+        outline:
+          "rfs-border rfs-border-input rfs-bg-background hover:rfs-bg-accent hover:rfs-text-accent-foreground",
+        secondary:
+          "rfs-bg-secondary rfs-text-secondary-foreground hover:rfs-bg-secondary/80",
+        ghost: "hover:rfs-bg-accent hover:rfs-text-accent-foreground",
+        link: "rfs-text-primary rfs-underline-offset-4 hover:rfs-underline",
+      },
+      size: {
+        default: "rfs-h-10 rfs-px-4 rfs-py-2",
+        sm: "rfs-h-9 rfs-rounded-md rfs-px-3",
+        lg: "rfs-h-11 rfs-rounded-md rfs-px-8",
+        icon: "rfs-h-10 rfs-w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
 )
 
 export interface ButtonProps
-    extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-        VariantProps<typeof buttonVariants> {
-    asChild?: boolean
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-    ({ className, variant, size, asChild = false, ...props }, ref) => {
-        const Comp = asChild ? Slot : "button"
-        return (
-            <Comp
-                className={cn(buttonVariants({ variant, size, className }))}
-                ref={ref}
-                {...props}
-            />
-        )
-    }
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
 )
 Button.displayName = "Button"
 

src/components/ui/button.tsx

@@ -1,27 +1,27 @@
-import { cn } from "@/lib/utils"
+import * as React from "react"
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
 import { Check } from "lucide-react"
 
-import * as React from "react"
+import { cn } from "@/lib/utils"
 
 const Checkbox = React.forwardRef<
-    React.ElementRef<typeof CheckboxPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
 >(({ className, ...props }, ref) => (
-    <CheckboxPrimitive.Root
-        ref={ref}
-        className={cn(
-            "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-            className
-        )}
-        {...props}
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "rfs-peer rfs-h-4 rfs-w-4 rfs-shrink-0 rfs-rounded-sm rfs-border rfs-border-primary rfs-ring-offset-background focus-visible:rfs-outline-none focus-visible:rfs-ring-2 focus-visible:rfs-ring-ring focus-visible:rfs-ring-offset-2 disabled:rfs-cursor-not-allowed disabled:rfs-opacity-50 data-[state=checked]:rfs-bg-primary data-[state=checked]:rfs-text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("rfs-flex rfs-items-center rfs-justify-center rfs-text-current")}
     >
-        <CheckboxPrimitive.Indicator
-            className={cn("flex items-center justify-center text-current")}
-        >
-            <Check className="size-4" />
-        </CheckboxPrimitive.Indicator>
-    </CheckboxPrimitive.Root>
+      <Check className="rfs-h-4 rfs-w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
 ))
 Checkbox.displayName = CheckboxPrimitive.Root.displayName