Skip to content

Commit e1bbc2c

Browse files
craquetcraquet
committed
Fully isolate tailwind styles to only this component
1 parent a4ab511 commit e1bbc2c

14 files changed

+278
-285
lines changed

‎.storybook/decorators/RootClass.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { Decorator } from "@storybook/react"
2+
3+
export const withRootClass: Decorator = (Story) => {
4+
return (
5+
<div className="rfs-root">
6+
<Story />
7+
</div>
8+
)
9+
}

‎.storybook/preview.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import type { Preview } from "@storybook/react"
22
import { withThemeByClassName } from "@storybook/addon-themes"
33

44
import "../src/index.css"
5+
import { withRootClass } from "./decorators/RootClass"
56

67
const preview: Preview = {
78
parameters: {
@@ -24,7 +25,8 @@ const preview: Preview = {
2425
dark: "dark"
2526
},
2627
defaultTheme: "light"
27-
})
28+
}),
29+
withRootClass
2830
]
2931
}
3032

‎package-lock.json

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,7 @@
103103
"style-loader": "^4.0.0",
104104
"tailwindcss": "^3.4.16",
105105
"tailwindcss-animate": "^1.0.7",
106+
"tailwindcss-scoped-preflight": "^3.4.12",
106107
"ts-loader": "^9.5.2",
107108
"tsc-alias": "^1.8.10",
108109
"typescript": "^5.7.3",

‎src/components/ReactSearchComponent.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,7 @@ export function ReactSearchComponent({
128128
return (
129129
<ErrorBoundary view={ErrorView}>
130130
<Layout
131+
className={"rfs-root"}
131132
header={
132133
<SearchBox
133134
autocompleteMinimumCharacters={3}

‎src/components/ui/carousel.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@ const CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HT
135135
const { carouselRef, orientation } = useCarousel()
136136

137137
return (
138-
<div ref={carouselRef} className="rfs-overflow-hidden">
138+
<div ref={carouselRef} className="rfs-root rfs-overflow-hidden">
139139
<div ref={ref} className={cn("rfs-flex", orientation === "horizontal" ? "rfs--ml-4" : "rfs--mt-4 rfs-flex-col", className)} {...props} />
140140
</div>
141141
)

‎src/components/ui/dialog.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const DialogContent = React.forwardRef<
3838
<DialogPrimitive.Content
3939
ref={ref}
4040
className={cn(
41-
"rfs-fixed rfs-left-[50%] rfs-top-[50%] rfs-z-50 rfs-grid rfs-w-full rfs-max-w-lg rfs-translate-x-[-50%] rfs-translate-y-[-50%] rfs-gap-4 rfs-border rfs-bg-background rfs-p-6 rfs-shadow-lg rfs-duration-200 data-[state=open]:rfs-animate-in data-[state=closed]:rfs-animate-out data-[state=closed]:rfs-fade-out-0 data-[state=open]:rfs-fade-in-0 data-[state=closed]:rfs-zoom-out-95 data-[state=open]:rfs-zoom-in-95 data-[state=closed]:rfs-slide-out-to-left-1/2 data-[state=closed]:rfs-slide-out-to-top-[48%] data-[state=open]:rfs-slide-in-from-left-1/2 data-[state=open]:rfs-slide-in-from-top-[48%] sm:rfs-rounded-lg",
41+
"rfs-root rfs-fixed rfs-left-[50%] rfs-top-[50%] rfs-z-50 rfs-grid rfs-w-full rfs-max-w-lg rfs-translate-x-[-50%] rfs-translate-y-[-50%] rfs-gap-4 rfs-border rfs-bg-background rfs-p-6 rfs-shadow-lg rfs-duration-200 data-[state=open]:rfs-animate-in data-[state=closed]:rfs-animate-out data-[state=closed]:rfs-fade-out-0 data-[state=open]:rfs-fade-in-0 data-[state=closed]:rfs-zoom-out-95 data-[state=open]:rfs-zoom-in-95 data-[state=closed]:rfs-slide-out-to-left-1/2 data-[state=closed]:rfs-slide-out-to-top-[48%] data-[state=open]:rfs-slide-in-from-left-1/2 data-[state=open]:rfs-slide-in-from-top-[48%] sm:rfs-rounded-lg",
4242
className
4343
)}
4444
{...props}

‎src/components/ui/dropdown-menu.tsx

Lines changed: 119 additions & 138 deletions
Original file line numberDiff line numberDiff line change
@@ -17,182 +17,163 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub
1717
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
1818

1919
const DropdownMenuSubTrigger = React.forwardRef<
20-
React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
21-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
22-
inset?: boolean
23-
}
20+
React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
21+
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
22+
inset?: boolean
23+
}
2424
>(({ className, inset, children, ...props }, ref) => (
25-
<DropdownMenuPrimitive.SubTrigger
26-
ref={ref}
27-
className={cn(
28-
"rfs-flex rfs-cursor-default rfs-gap-2 rfs-select-none rfs-items-center rfs-rounded-sm rfs-px-2 rfs-py-1.5 rfs-text-sm rfs-outline-none focus:rfs-bg-accent data-[state=open]:rfs-bg-accent [&_svg]:rfs-pointer-events-none [&_svg]:rfs-size-4 [&_svg]:rfs-shrink-0",
29-
inset && "rfs-pl-8",
30-
className
31-
)}
32-
{...props}
33-
>
34-
{children}
35-
<ChevronRight className="rfs-ml-auto" />
36-
</DropdownMenuPrimitive.SubTrigger>
25+
<DropdownMenuPrimitive.SubTrigger
26+
ref={ref}
27+
className={cn(
28+
"rfs-flex rfs-cursor-default rfs-gap-2 rfs-select-none rfs-items-center rfs-rounded-sm rfs-px-2 rfs-py-1.5 rfs-text-sm rfs-outline-none focus:rfs-bg-accent data-[state=open]:rfs-bg-accent [&_svg]:rfs-pointer-events-none [&_svg]:rfs-size-4 [&_svg]:rfs-shrink-0",
29+
inset && "rfs-pl-8",
30+
className
31+
)}
32+
{...props}
33+
>
34+
{children}
35+
<ChevronRight className="rfs-ml-auto" />
36+
</DropdownMenuPrimitive.SubTrigger>
3737
))
38-
DropdownMenuSubTrigger.displayName =
39-
DropdownMenuPrimitive.SubTrigger.displayName
38+
DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName
4039

4140
const DropdownMenuSubContent = React.forwardRef<
42-
React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
43-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
41+
React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
42+
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
4443
>(({ className, ...props }, ref) => (
45-
<DropdownMenuPrimitive.SubContent
46-
ref={ref}
47-
className={cn(
48-
"rfs-z-50 rfs-min-w-[8rem] rfs-overflow-hidden rfs-rounded-md rfs-border rfs-bg-popover rfs-p-1 rfs-text-popover-foreground rfs-shadow-lg data-[state=open]:rfs-animate-in data-[state=closed]:rfs-animate-out data-[state=closed]:rfs-fade-out-0 data-[state=open]:rfs-fade-in-0 data-[state=closed]:rfs-zoom-out-95 data-[state=open]:rfs-zoom-in-95 data-[side=bottom]:rfs-slide-in-from-top-2 data-[side=left]:rfs-slide-in-from-right-2 data-[side=right]:rfs-slide-in-from-left-2 data-[side=top]:rfs-slide-in-from-bottom-2",
49-
className
50-
)}
51-
{...props}
52-
/>
44+
<DropdownMenuPrimitive.SubContent
45+
ref={ref}
46+
className={cn(
47+
"rfs-z-50 rfs-min-w-[8rem] rfs-overflow-hidden rfs-rounded-md rfs-border rfs-bg-popover rfs-p-1 rfs-text-popover-foreground rfs-shadow-lg data-[state=open]:rfs-animate-in data-[state=closed]:rfs-animate-out data-[state=closed]:rfs-fade-out-0 data-[state=open]:rfs-fade-in-0 data-[state=closed]:rfs-zoom-out-95 data-[state=open]:rfs-zoom-in-95 data-[side=bottom]:rfs-slide-in-from-top-2 data-[side=left]:rfs-slide-in-from-right-2 data-[side=right]:rfs-slide-in-from-left-2 data-[side=top]:rfs-slide-in-from-bottom-2",
48+
className
49+
)}
50+
{...props}
51+
/>
5352
))
54-
DropdownMenuSubContent.displayName =
55-
DropdownMenuPrimitive.SubContent.displayName
53+
DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName
5654

5755
const DropdownMenuContent = React.forwardRef<
58-
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
59-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
56+
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
57+
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
6058
>(({ className, sideOffset = 4, ...props }, ref) => (
61-
<DropdownMenuPrimitive.Portal>
62-
<DropdownMenuPrimitive.Content
63-
ref={ref}
64-
sideOffset={sideOffset}
65-
className={cn(
66-
"rfs-z-50 rfs-min-w-[8rem] rfs-overflow-hidden rfs-rounded-md rfs-border rfs-bg-popover rfs-p-1 rfs-text-popover-foreground rfs-shadow-md data-[state=open]:rfs-animate-in data-[state=closed]:rfs-animate-out data-[state=closed]:rfs-fade-out-0 data-[state=open]:rfs-fade-in-0 data-[state=closed]:rfs-zoom-out-95 data-[state=open]:rfs-zoom-in-95 data-[side=bottom]:rfs-slide-in-from-top-2 data-[side=left]:rfs-slide-in-from-right-2 data-[side=right]:rfs-slide-in-from-left-2 data-[side=top]:rfs-slide-in-from-bottom-2",
67-
className
68-
)}
69-
{...props}
70-
/>
71-
</DropdownMenuPrimitive.Portal>
59+
<DropdownMenuPrimitive.Portal>
60+
<DropdownMenuPrimitive.Content
61+
ref={ref}
62+
sideOffset={sideOffset}
63+
className={cn(
64+
"rfs-root rfs-z-50 rfs-min-w-[8rem] rfs-overflow-hidden rfs-rounded-md rfs-border rfs-bg-popover rfs-p-1 rfs-text-popover-foreground rfs-shadow-md data-[state=open]:rfs-animate-in data-[state=closed]:rfs-animate-out data-[state=closed]:rfs-fade-out-0 data-[state=open]:rfs-fade-in-0 data-[state=closed]:rfs-zoom-out-95 data-[state=open]:rfs-zoom-in-95 data-[side=bottom]:rfs-slide-in-from-top-2 data-[side=left]:rfs-slide-in-from-right-2 data-[side=right]:rfs-slide-in-from-left-2 data-[side=top]:rfs-slide-in-from-bottom-2",
65+
className
66+
)}
67+
{...props}
68+
/>
69+
</DropdownMenuPrimitive.Portal>
7270
))
7371
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
7472

7573
const DropdownMenuItem = React.forwardRef<
76-
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
77-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
78-
inset?: boolean
79-
}
74+
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
75+
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
76+
inset?: boolean
77+
}
8078
>(({ className, inset, ...props }, ref) => (
81-
<DropdownMenuPrimitive.Item
82-
ref={ref}
83-
className={cn(
84-
"rfs-relative rfs-flex rfs-cursor-default rfs-select-none rfs-items-center rfs-gap-2 rfs-rounded-sm rfs-px-2 rfs-py-1.5 rfs-text-sm rfs-outline-none rfs-transition-colors focus:rfs-bg-accent focus:rfs-text-accent-foreground data-[disabled]:rfs-pointer-events-none data-[disabled]:rfs-opacity-50 [&_svg]:rfs-pointer-events-none [&_svg]:rfs-size-4 [&_svg]:rfs-shrink-0",
85-
inset && "rfs-pl-8",
86-
className
87-
)}
88-
{...props}
89-
/>
79+
<DropdownMenuPrimitive.Item
80+
ref={ref}
81+
className={cn(
82+
"rfs-relative rfs-flex rfs-cursor-default rfs-select-none rfs-items-center rfs-gap-2 rfs-rounded-sm rfs-px-2 rfs-py-1.5 rfs-text-sm rfs-outline-none rfs-transition-colors focus:rfs-bg-accent focus:rfs-text-accent-foreground data-[disabled]:rfs-pointer-events-none data-[disabled]:rfs-opacity-50 [&_svg]:rfs-pointer-events-none [&_svg]:rfs-size-4 [&_svg]:rfs-shrink-0",
83+
inset && "rfs-pl-8",
84+
className
85+
)}
86+
{...props}
87+
/>
9088
))
9189
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
9290

9391
const DropdownMenuCheckboxItem = React.forwardRef<
94-
React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
95-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
92+
React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
93+
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
9694
>(({ className, children, checked, ...props }, ref) => (
97-
<DropdownMenuPrimitive.CheckboxItem
98-
ref={ref}
99-
className={cn(
100-
"rfs-relative rfs-flex rfs-cursor-default rfs-select-none rfs-items-center rfs-rounded-sm rfs-py-1.5 rfs-pl-8 rfs-pr-2 rfs-text-sm rfs-outline-none rfs-transition-colors focus:rfs-bg-accent focus:rfs-text-accent-foreground data-[disabled]:rfs-pointer-events-none data-[disabled]:rfs-opacity-50",
101-
className
102-
)}
103-
checked={checked}
104-
{...props}
105-
>
106-
<span className="rfs-absolute rfs-left-2 rfs-flex rfs-h-3.5 rfs-w-3.5 rfs-items-center rfs-justify-center">
107-
<DropdownMenuPrimitive.ItemIndicator>
108-
<Check className="rfs-h-4 rfs-w-4" />
109-
</DropdownMenuPrimitive.ItemIndicator>
110-
</span>
111-
{children}
112-
</DropdownMenuPrimitive.CheckboxItem>
95+
<DropdownMenuPrimitive.CheckboxItem
96+
ref={ref}
97+
className={cn(
98+
"rfs-relative rfs-flex rfs-cursor-default rfs-select-none rfs-items-center rfs-rounded-sm rfs-py-1.5 rfs-pl-8 rfs-pr-2 rfs-text-sm rfs-outline-none rfs-transition-colors focus:rfs-bg-accent focus:rfs-text-accent-foreground data-[disabled]:rfs-pointer-events-none data-[disabled]:rfs-opacity-50",
99+
className
100+
)}
101+
checked={checked}
102+
{...props}
103+
>
104+
<span className="rfs-absolute rfs-left-2 rfs-flex rfs-h-3.5 rfs-w-3.5 rfs-items-center rfs-justify-center">
105+
<DropdownMenuPrimitive.ItemIndicator>
106+
<Check className="rfs-h-4 rfs-w-4" />
107+
</DropdownMenuPrimitive.ItemIndicator>
108+
</span>
109+
{children}
110+
</DropdownMenuPrimitive.CheckboxItem>
113111
))
114-
DropdownMenuCheckboxItem.displayName =
115-
DropdownMenuPrimitive.CheckboxItem.displayName
112+
DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName
116113

117114
const DropdownMenuRadioItem = React.forwardRef<
118-
React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
119-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
115+
React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
116+
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
120117
>(({ className, children, ...props }, ref) => (
121-
<DropdownMenuPrimitive.RadioItem
122-
ref={ref}
123-
className={cn(
124-
"rfs-relative rfs-flex rfs-cursor-default rfs-select-none rfs-items-center rfs-rounded-sm rfs-py-1.5 rfs-pl-8 rfs-pr-2 rfs-text-sm rfs-outline-none rfs-transition-colors focus:rfs-bg-accent focus:rfs-text-accent-foreground data-[disabled]:rfs-pointer-events-none data-[disabled]:rfs-opacity-50",
125-
className
126-
)}
127-
{...props}
128-
>
129-
<span className="rfs-absolute rfs-left-2 rfs-flex rfs-h-3.5 rfs-w-3.5 rfs-items-center rfs-justify-center">
130-
<DropdownMenuPrimitive.ItemIndicator>
131-
<Circle className="rfs-h-2 rfs-w-2 rfs-fill-current" />
132-
</DropdownMenuPrimitive.ItemIndicator>
133-
</span>
134-
{children}
135-
</DropdownMenuPrimitive.RadioItem>
118+
<DropdownMenuPrimitive.RadioItem
119+
ref={ref}
120+
className={cn(
121+
"rfs-relative rfs-flex rfs-cursor-default rfs-select-none rfs-items-center rfs-rounded-sm rfs-py-1.5 rfs-pl-8 rfs-pr-2 rfs-text-sm rfs-outline-none rfs-transition-colors focus:rfs-bg-accent focus:rfs-text-accent-foreground data-[disabled]:rfs-pointer-events-none data-[disabled]:rfs-opacity-50",
122+
className
123+
)}
124+
{...props}
125+
>
126+
<span className="rfs-absolute rfs-left-2 rfs-flex rfs-h-3.5 rfs-w-3.5 rfs-items-center rfs-justify-center">
127+
<DropdownMenuPrimitive.ItemIndicator>
128+
<Circle className="rfs-h-2 rfs-w-2 rfs-fill-current" />
129+
</DropdownMenuPrimitive.ItemIndicator>
130+
</span>
131+
{children}
132+
</DropdownMenuPrimitive.RadioItem>
136133
))
137134
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
138135

139136
const DropdownMenuLabel = React.forwardRef<
140-
React.ElementRef<typeof DropdownMenuPrimitive.Label>,
141-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
142-
inset?: boolean
143-
}
137+
React.ElementRef<typeof DropdownMenuPrimitive.Label>,
138+
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
139+
inset?: boolean
140+
}
144141
>(({ className, inset, ...props }, ref) => (
145-
<DropdownMenuPrimitive.Label
146-
ref={ref}
147-
className={cn(
148-
"rfs-px-2 rfs-py-1.5 rfs-text-sm rfs-font-semibold",
149-
inset && "rfs-pl-8",
150-
className
151-
)}
152-
{...props}
153-
/>
142+
<DropdownMenuPrimitive.Label
143+
ref={ref}
144+
className={cn("rfs-px-2 rfs-py-1.5 rfs-text-sm rfs-font-semibold", inset && "rfs-pl-8", className)}
145+
{...props}
146+
/>
154147
))
155148
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
156149

157150
const DropdownMenuSeparator = React.forwardRef<
158-
React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
159-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
151+
React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
152+
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
160153
>(({ className, ...props }, ref) => (
161-
<DropdownMenuPrimitive.Separator
162-
ref={ref}
163-
className={cn("rfs--mx-1 rfs-my-1 rfs-h-px rfs-bg-muted", className)}
164-
{...props}
165-
/>
154+
<DropdownMenuPrimitive.Separator ref={ref} className={cn("rfs--mx-1 rfs-my-1 rfs-h-px rfs-bg-muted", className)} {...props} />
166155
))
167156
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
168157

169-
const DropdownMenuShortcut = ({
170-
className,
171-
...props
172-
}: React.HTMLAttributes<HTMLSpanElement>) => {
173-
return (
174-
<span
175-
className={cn("rfs-ml-auto rfs-text-xs rfs-tracking-widest rfs-opacity-60", className)}
176-
{...props}
177-
/>
178-
)
158+
const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
159+
return <span className={cn("rfs-ml-auto rfs-text-xs rfs-tracking-widest rfs-opacity-60", className)} {...props} />
179160
}
180161
DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
181162

182163
export {
183-
DropdownMenu,
184-
DropdownMenuTrigger,
185-
DropdownMenuContent,
186-
DropdownMenuItem,
187-
DropdownMenuCheckboxItem,
188-
DropdownMenuRadioItem,
189-
DropdownMenuLabel,
190-
DropdownMenuSeparator,
191-
DropdownMenuShortcut,
192-
DropdownMenuGroup,
193-
DropdownMenuPortal,
194-
DropdownMenuSub,
195-
DropdownMenuSubContent,
196-
DropdownMenuSubTrigger,
197-
DropdownMenuRadioGroup,
164+
DropdownMenu,
165+
DropdownMenuTrigger,
166+
DropdownMenuContent,
167+
DropdownMenuItem,
168+
DropdownMenuCheckboxItem,
169+
DropdownMenuRadioItem,
170+
DropdownMenuLabel,
171+
DropdownMenuSeparator,
172+
DropdownMenuShortcut,
173+
DropdownMenuGroup,
174+
DropdownMenuPortal,
175+
DropdownMenuSub,
176+
DropdownMenuSubContent,
177+
DropdownMenuSubTrigger,
178+
DropdownMenuRadioGroup
198179
}

0 commit comments

Comments
 (0)