feat: tailwind prefix 제거 (#60)

* feat(ui): tailwind prefix 설정 변경 * feat(ui): components.json rsc true 변경 * feat(ui): 컴포넌트 tailwind prefix 제거 * feat(ui): 컴포넌트 tailwind prefix 제거 * docs: tailwind prefix 제거 * docs: tailwind prefix 제거 * feat(ui): Pagination 컴포넌트 이전/다음 텍스트 변경 --------- Co-authored-by: kjjlss2 <[email protected]>
freemed-it · Nov 21, 2024 · 842a6c4 · 842a6c4
1 parent e2b436b
commit 842a6c4
Show file tree

Hide file tree

Showing 51 changed files with 411 additions and 466 deletions.
diff --git a/apps/docs/stories/accordion.stories.tsx b/apps/docs/stories/accordion.stories.tsx
@@ -12,7 +12,7 @@ type Story = StoryObj<typeof Accordion>
 
 export const Docs: Story = {
   render: args => (
-    <Accordion className="tw-w-full" collapsible type="single">
+    <Accordion className="w-full" collapsible type="single">
       <AccordionItem value="item-1">
         <AccordionTrigger>Is it accessible?</AccordionTrigger>
         <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>

diff --git a/apps/docs/stories/alert.stories.tsx b/apps/docs/stories/alert.stories.tsx
@@ -14,7 +14,7 @@ type Story = StoryObj<typeof Alert>
 export const Default: Story = {
   render: args => (
     <Alert>
-      <Terminal className="tw-h-4 tw-w-4" />
+      <Terminal className="h-4 w-4" />
       <AlertTitle>Heads up!</AlertTitle>
       <AlertDescription>You can add components to your app using the cli.</AlertDescription>
     </Alert>
@@ -24,7 +24,7 @@ export const Default: Story = {
 export const Destructive: Story = {
   render: args => (
     <Alert variant="destructive">
-      <AlertCircle className="tw-h-4 tw-w-4" />
+      <AlertCircle className="h-4 w-4" />
       <AlertTitle>Error</AlertTitle>
       <AlertDescription>Your session has expired. Please log in again.</AlertDescription>
     </Alert>

diff --git a/apps/docs/stories/calendar.stories.tsx b/apps/docs/stories/calendar.stories.tsx
@@ -14,6 +14,6 @@ type Story = StoryObj<typeof Calendar>
 export const Docs: Story = {
   render: function Render(args) {
     const [date, setDate] = useState<Date | undefined>(new Date())
-    return <Calendar className="tw-rounded-md tw-border tw-w-fit" mode="single" onSelect={setDate} selected={date} />
+    return <Calendar className="rounded-md border w-fit" mode="single" onSelect={setDate} selected={date} />
   },
 }
diff --git a/apps/docs/stories/card.stories.tsx b/apps/docs/stories/card.stories.tsx
@@ -22,22 +22,22 @@ type Story = StoryObj<typeof Card>
 
 export const Docs: Story = {
   render: args => (
-    <Card className="tw-w-[350px]">
+    <Card className="w-[350px]">
       <CardHeader>
         <CardTitle>Create project</CardTitle>
         <CardDescription>Deploy your new project in one-click.</CardDescription>
       </CardHeader>
       <CardContent>
         <form>
-          <div className="tw-grid tw-w-full tw-items-center tw-gap-4">
-            <div className="tw-flex tw-flex-col tw-space-y-1.5">
+          <div className="grid w-full items-center gap-4">
+            <div className="flex flex-col space-y-1.5">
               <Label htmlFor="name">Name</Label>
               <Input id="name" placeholder="Name of your project" />
             </div>
           </div>
         </form>
       </CardContent>
-      <CardFooter className="tw-flex tw-justify-between">
+      <CardFooter className="flex justify-between">
         <Button variant="outline">Cancel</Button>
         <Button>Deploy</Button>
       </CardFooter>

diff --git a/apps/docs/stories/checkbox.stories.tsx b/apps/docs/stories/checkbox.stories.tsx
@@ -16,16 +16,16 @@ type Story = StoryObj<typeof Checkbox>
 
 export const Default: Story = {
   render: args => (
-    <div className="tw-items-top tw-flex tw-space-x-2">
+    <div className="items-top flex space-x-2">
       <Checkbox id="terms1" />
-      <div className="tw-grid tw-gap-1.5 tw-leading-none">
+      <div className="grid gap-1.5 leading-none">
         <Label
-          className="tw-text-sm tw-font-medium tw-leading-none tw-peer-disabled:cursor-not-allowed tw-peer-disabled:opacity-70"
+          className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
           htmlFor="terms1"
         >
           Accept terms and conditions
         </Label>
-        <p className="tw-text-sm tw-text-muted-foreground">You agree to our Terms of Service and Privacy Policy.</p>
+        <p className="text-sm text-muted-foreground">You agree to our Terms of Service and Privacy Policy.</p>
       </div>
     </div>
   ),

diff --git a/apps/docs/stories/command.stories.tsx b/apps/docs/stories/command.stories.tsx
@@ -24,7 +24,7 @@ type Story = StoryObj<typeof Command>
 
 export const Default: Story = {
   render: args => (
-    <Command className="tw-border tw-rounded-md">
+    <Command className="border rounded-md">
       <CommandInput placeholder="Type a command or search..." />
       <CommandList>
         <CommandEmpty>No results found.</CommandEmpty>
@@ -57,15 +57,17 @@ export const Dialog: Story = {
       }
 
       document.addEventListener('keydown', down)
-      return () => { document.removeEventListener('keydown', down); }
+      return () => {
+        document.removeEventListener('keydown', down)
+      }
     }, [])
 
     return (
       <>
-        <p className="tw-text-sm tw-text-muted-foreground">
+        <p className="text-sm text-muted-foreground">
           Press{' '}
-          <kbd className="tw-pointer-events-none tw-inline-flex tw-h-5 tw-select-none tw-items-center tw-gap-1 tw-rounded tw-border tw-bg-muted tw-px-1.5 tw-font-mono tw-text-[10px] tw-font-medium tw-text-muted-foreground tw-opacity-100">
-            <span className="tw-text-xs">⌘</span>J
+          <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
+            <span className="text-xs">⌘</span>J
           </kbd>
         </p>
         <CommandDialog onOpenChange={setOpen} open={open}>

diff --git a/apps/docs/stories/dialog.stories.tsx b/apps/docs/stories/dialog.stories.tsx
@@ -28,23 +28,23 @@ export const Default: Story = {
       <DialogTrigger asChild>
         <Button variant="outline">Edit Profile</Button>
       </DialogTrigger>
-      <DialogContent className="tw-sm:max-w-[425px]">
+      <DialogContent className="sm:max-w-[425px]">
         <DialogHeader>
           <DialogTitle>Edit profile</DialogTitle>
           <DialogDescription>Make changes to your profile here. Click save when you&apos;re done.</DialogDescription>
         </DialogHeader>
-        <div className="tw-grid tw-gap-4 tw-py-4">
-          <div className="tw-grid tw-grid-cols-4 tw-items-center tw-gap-4">
-            <Label className="tw-text-right" htmlFor="name">
+        <div className="grid gap-4 py-4">
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label className="text-right" htmlFor="name">
               Name
             </Label>
-            <Input className="tw-col-span-3" defaultValue="Pedro Duarte" id="name" />
+            <Input className="col-span-3" defaultValue="Pedro Duarte" id="name" />
           </div>
-          <div className="tw-grid tw-grid-cols-4 tw-items-center tw-gap-4">
-            <Label className="tw-text-right" htmlFor="username">
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label className="text-right" htmlFor="username">
               Username
             </Label>
-            <Input className="tw-col-span-3" defaultValue="@peduarte" id="username" />
+            <Input className="col-span-3" defaultValue="@peduarte" id="username" />
           </div>
         </div>
       </DialogContent>
@@ -58,23 +58,23 @@ export const DialogWithButton: Story = {
       <DialogTrigger asChild>
         <Button variant="outline">Edit Profile</Button>
       </DialogTrigger>
-      <DialogContent className="tw-sm:max-w-[425px]">
+      <DialogContent className="sm:max-w-[425px]">
         <DialogHeader>
           <DialogTitle>Edit profile</DialogTitle>
           <DialogDescription>Make changes to your profile here. Click save when you&apos;re done.</DialogDescription>
         </DialogHeader>
-        <div className="tw-grid tw-gap-4 tw-py-4">
-          <div className="tw-grid tw-grid-cols-4 tw-items-center tw-gap-4">
-            <Label className="tw-text-right" htmlFor="name">
+        <div className="grid gap-4 py-4">
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label className="text-right" htmlFor="name">
               Name
             </Label>
-            <Input className="tw-col-span-3" defaultValue="Pedro Duarte" id="name" />
+            <Input className="col-span-3" defaultValue="Pedro Duarte" id="name" />
           </div>
-          <div className="tw-grid tw-grid-cols-4 tw-items-center tw-gap-4">
-            <Label className="tw-text-right" htmlFor="username">
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label className="text-right" htmlFor="username">
               Username
             </Label>
-            <Input className="tw-col-span-3" defaultValue="@peduarte" id="username" />
+            <Input className="col-span-3" defaultValue="@peduarte" id="username" />
           </div>
         </div>
         <DialogFooter className="sm:justify-start">

diff --git a/apps/docs/stories/input.stories.tsx b/apps/docs/stories/input.stories.tsx
@@ -50,7 +50,7 @@ export const InputPassword: Story = {
 
 export const InputFile: Story = {
   render: args => (
-    <div className="tw-grid tw-w-full tw-max-w-sm tw-items-center tw-gap-1.5">
+    <div className="grid w-full max-w-sm items-center gap-1.5">
       <Label htmlFor="picture">Picture</Label>
       <Input id="picture" type="file" />
     </div>
@@ -59,7 +59,7 @@ export const InputFile: Story = {
 
 export const InputWithLabel: Story = {
   render: args => (
-    <div className="tw-grid tw-w-full tw-max-w-sm tw-items-center tw-gap-1.5">
+    <div className="grid w-full max-w-sm items-center gap-1.5">
       <Label htmlFor="email">Email</Label>
       <Input id="email" placeholder="Email" type="email" />
     </div>
@@ -68,7 +68,7 @@ export const InputWithLabel: Story = {
 
 export const InputWithButton: Story = {
   render: args => (
-    <div className="tw-flex tw-w-full tw-max-w-sm tw-items-center tw-space-x-2">
+    <div className="flex w-full max-w-sm items-center space-x-2">
       <Input placeholder="Email" type="email" />
       <Button type="submit">Subscribe</Button>
     </div>

diff --git a/apps/docs/stories/popover.stories.tsx b/apps/docs/stories/popover.stories.tsx
@@ -16,28 +16,28 @@ export const Docs: Story = {
       <PopoverTrigger asChild>
         <Button variant="outline">Open popover</Button>
       </PopoverTrigger>
-      <PopoverContent className="tw-w-80">
-        <div className="tw-grid tw-gap-4">
-          <div className="tw-space-y-2">
-            <h4 className="tw-font-medium tw-leading-none">Dimensions</h4>
-            <p className="tw-text-sm tw-text-muted-foreground">Set the dimensions for the layer.</p>
+      <PopoverContent className="w-80">
+        <div className="grid gap-4">
+          <div className="space-y-2">
+            <h4 className="font-medium leading-none">Dimensions</h4>
+            <p className="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
           </div>
-          <div className="tw-grid tw-gap-2">
-            <div className="tw-grid tw-grid-cols-3 tw-items-center tw-gap-4">
+          <div className="grid gap-2">
+            <div className="grid grid-cols-3 items-center gap-4">
               <Label htmlFor="width">Width</Label>
-              <Input className="tw-col-span-2 tw-h-8" defaultValue="100%" id="width" />
+              <Input className="col-span-2 h-8" defaultValue="100%" id="width" />
             </div>
-            <div className="tw-grid tw-grid-cols-3 tw-items-center tw-gap-4">
+            <div className="grid grid-cols-3 items-center gap-4">
               <Label htmlFor="maxWidth">Max. width</Label>
-              <Input className="tw-col-span-2 tw-h-8" defaultValue="300px" id="maxWidth" />
+              <Input className="col-span-2 h-8" defaultValue="300px" id="maxWidth" />
             </div>
-            <div className="tw-grid tw-grid-cols-3 tw-items-center tw-gap-4">
+            <div className="grid grid-cols-3 items-center gap-4">
               <Label htmlFor="height">Height</Label>
-              <Input className="tw-col-span-2 tw-h-8" defaultValue="25px" id="height" />
+              <Input className="col-span-2 h-8" defaultValue="25px" id="height" />
             </div>
-            <div className="tw-grid tw-grid-cols-3 tw-items-center tw-gap-4">
+            <div className="grid grid-cols-3 items-center gap-4">
               <Label htmlFor="maxHeight">Max. height</Label>
-              <Input className="tw-col-span-2 tw-h-8" defaultValue="none" id="maxHeight" />
+              <Input className="col-span-2 h-8" defaultValue="none" id="maxHeight" />
             </div>
           </div>
         </div>

diff --git a/apps/docs/stories/resizable.stories.tsx b/apps/docs/stories/resizable.stories.tsx
@@ -25,19 +25,16 @@ export const Horizontal: Story = {
     direction: 'horizontal',
   },
   render: ({ direction }) => (
-    <ResizablePanelGroup
-      className="tw-min-h-[200px] tw-max-w-md tw-rounded-lg tw-border tw-md:min-w-[450px]"
-      direction={direction}
-    >
+    <ResizablePanelGroup className="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]" direction={direction}>
       <ResizablePanel defaultSize={50}>
-        <div className="tw-flex tw-h-[200px] tw-items-center tw-justify-center tw-p-6">
-          <span className="tw-font-semibold">One</span>
+        <div className="flex h-[200px] items-center justify-center p-6">
+          <span className="font-semibold">One</span>
         </div>
       </ResizablePanel>
       <ResizableHandle />
       <ResizablePanel defaultSize={50}>
-        <div className="tw-flex tw-h-[200px] tw-items-center tw-justify-center tw-p-6">
-          <span className="tw-font-semibold">Two</span>
+        <div className="flex h-[200px] items-center justify-center p-6">
+          <span className="font-semibold">Two</span>
         </div>
       </ResizablePanel>
     </ResizablePanelGroup>
@@ -49,19 +46,16 @@ export const Vertical: Story = {
     direction: 'vertical',
   },
   render: ({ direction }) => (
-    <ResizablePanelGroup
-      className="tw-min-h-[200px] tw-max-w-md tw-rounded-lg tw-border tw-md:min-w-[450px]"
-      direction={direction}
-    >
+    <ResizablePanelGroup className="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]" direction={direction}>
       <ResizablePanel defaultSize={25}>
-        <div className="tw-flex tw-h-full tw-items-center tw-justify-center tw-p-6">
-          <span className="tw-font-semibold">Header</span>
+        <div className="flex h-full items-center justify-center p-6">
+          <span className="font-semibold">Header</span>
         </div>
       </ResizablePanel>
       <ResizableHandle />
       <ResizablePanel defaultSize={75}>
-        <div className="tw-flex tw-h-full tw-items-center tw-justify-center tw-p-6">
-          <span className="tw-font-semibold">Content</span>
+        <div className="flex h-full items-center justify-center p-6">
+          <span className="font-semibold">Content</span>
         </div>
       </ResizablePanel>
     </ResizablePanelGroup>
@@ -73,19 +67,16 @@ export const WithHandle: Story = {
     direction: 'horizontal',
   },
   render: ({ direction }) => (
-    <ResizablePanelGroup
-      className="tw-min-h-[200px] tw-max-w-md tw-rounded-lg tw-border tw-md:min-w-[450px]"
-      direction={direction}
-    >
+    <ResizablePanelGroup className="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]" direction={direction}>
       <ResizablePanel defaultSize={25}>
-        <div className="tw-flex tw-h-full tw-items-center tw-justify-center tw-p-6">
-          <span className="tw-font-semibold">Sidebar</span>
+        <div className="flex h-full items-center justify-center p-6">
+          <span className="font-semibold">Sidebar</span>
         </div>
       </ResizablePanel>
       <ResizableHandle withHandle />
       <ResizablePanel defaultSize={75}>
-        <div className="tw-flex tw-h-full tw-items-center tw-justify-center tw-p-6">
-          <span className="tw-font-semibold">Content</span>
+        <div className="flex h-full items-center justify-center p-6">
+          <span className="font-semibold">Content</span>
         </div>
       </ResizablePanel>
     </ResizablePanelGroup>

diff --git a/apps/docs/stories/scroll-area.stories.tsx b/apps/docs/stories/scroll-area.stories.tsx
@@ -12,7 +12,7 @@ type Story = StoryObj<typeof ScrollArea>
 
 export const Docs: Story = {
   render: args => (
-    <ScrollArea className="tw-h-[200px] tw-w-[350px] tw-rounded-md tw-border tw-p-4">
+    <ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
       Jokester began sneaking into the castle in the middle of the night and leaving jokes all over the place: under the
       king&apos;s pillow, in his soup, even in the royal toilet. The king was furious, but he couldn&apos;t seem to stop
       Jokester. And then, one day, the people of the kingdom discovered that the jokes left by Jokester were so funny

diff --git a/apps/docs/stories/select.stories.tsx b/apps/docs/stories/select.stories.tsx
@@ -21,7 +21,7 @@ type Story = StoryObj<typeof Select>
 export const Default: Story = {
   render: args => (
     <Select>
-      <SelectTrigger className="tw-w-[180px]">
+      <SelectTrigger className="w-[180px]">
         <SelectValue placeholder="Select a fruit" />
       </SelectTrigger>
       <SelectContent>
@@ -41,7 +41,7 @@ export const Default: Story = {
 export const Scrollable: Story = {
   render: args => (
     <Select>
-      <SelectTrigger className="tw-w-[280px]">
+      <SelectTrigger className="w-[280px]">
         <SelectValue placeholder="Select a timezone" />
       </SelectTrigger>
       <SelectContent>

diff --git a/apps/docs/stories/separator.stories.tsx b/apps/docs/stories/separator.stories.tsx
@@ -20,12 +20,12 @@ type Story = StoryObj<typeof Separator>
 export const Docs: Story = {
   render: args => (
     <div>
-      <div className="tw-space-y-1">
-        <h4 className="tw-text-sm tw-font-medium tw-leading-none">Radix Primitives</h4>
-        <p className="tw-text-sm tw-text-muted-foreground">An open-source UI component library.</p>
+      <div className="space-y-1">
+        <h4 className="text-sm font-medium leading-none">Radix Primitives</h4>
+        <p className="text-sm text-muted-foreground">An open-source UI component library.</p>
       </div>
-      <Separator className="tw-my-4" />
-      <div className="tw-flex tw-h-5 tw-items-center tw-space-x-4 tw-text-sm">
+      <Separator className="my-4" />
+      <div className="flex h-5 items-center space-x-4 text-sm">
         <div>Blog</div>
         <Separator orientation="vertical" />
         <div>Docs</div>