Skip to content

Commit 25e38ed

Browse files
irsyadadlirsyadadl
authored
Merge pull request #361 from irsyadadl/refactor-cn
Refactor cn
2 parents 7bc89e7 + 032a14a commit 25e38ed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

71 files changed

+457
-589
lines changed

Diff for: ‎app/(app)/(home)/partials/resources.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
"use client"
22

33
import { IconBrandJustdBlocks } from "@/components/icons/icon-brand-justd-blocks"
4-
import { cn } from "@/utils/classes"
54
import {
65
IconBrandAstro,
76
IconBrandLaravel,
87
IconBrandNextjs,
98
IconBrandRemix,
109
IconWindowVisitFill,
1110
} from "justd-icons"
11+
import { twMerge } from "tailwind-merge"
1212
import { Badge, Card, Container, Heading, Link } from "ui"
1313

1414
const resources = [
@@ -159,7 +159,10 @@ export function Wrapper({
159159
return (
160160
<div
161161
data-slot={slot}
162-
className={cn("relative rounded-md border bg-overlay px-4 py-10 sm:px-6 sm:py-8", className)}
162+
className={twMerge(
163+
"relative rounded-md border bg-overlay px-4 py-10 sm:px-6 sm:py-8",
164+
className,
165+
)}
163166
{...props}
164167
/>
165168
)

Diff for: ‎app/(app)/icons/partials/icons-list.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import { Menu } from "ui"
1313
import { copyToClipboard } from "usemods"
1414

1515
import { aliasLookup } from "@/app/(app)/icons/partials/aliases"
16-
import { cn } from "@/utils/classes"
1716
import { Controller } from "./controller"
1817
import { box, item } from "./styles"
1918

@@ -89,7 +88,7 @@ export function IconListItem({ name, Icon }: IconListItemProps) {
8988
className={item()}
9089
textValue={name}
9190
>
92-
<Icon className={cn(selectedSize)} key={name} />
91+
<Icon className={selectedSize} key={name} />
9392
<Menu isOpen={isSelected} onOpenChange={setSelected}>
9493
<Menu.Content
9594
triggerRef={triggerRef}

Diff for: ‎app/(app)/themes/partials/generated-theme.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
1-
import { cn } from "@/utils/classes"
1+
import { twMerge } from "tailwind-merge"
22

33
export function GeneratedTheme({ className, ...props }: React.ComponentProps<"div">) {
44
return (
55
<div>
6-
<div className={cn("grid max-h-48 gap-4 overflow-y-auto lg:gap-6", className)} {...props}>
6+
<div
7+
className={twMerge("grid max-h-48 gap-4 overflow-y-auto lg:gap-6", className)}
8+
{...props}
9+
>
710
<div className="sticky inset-x-0 top-0 h-10 w-full bg-linear-to-b from-5% from-bg to-transparent" />
811
<div className="-mt-12 -mb-12 flex flex-col gap-y-6">
912
<ColorBox>

Diff for: ‎app/(app)/themes/partials/theme-customizer.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import type React from "react"
55
import { useTheme } from "@/components/theme-provider"
66
import colors from "@/resources/colors/colors.json"
77
import { neutralColors } from "@/resources/lib/colors"
8-
import { cn } from "@/utils/classes"
98
import type { Key } from "react-aria-components"
9+
import { twMerge } from "tailwind-merge"
1010
import { Badge, Select } from "ui"
1111

1212
interface ColorSelectProps extends React.ComponentProps<typeof Select> {
@@ -49,7 +49,7 @@ const ColorSelect = ({
4949
>
5050
<div
5151
data-slot="icon"
52-
className={cn(
52+
className={twMerge(
5353
"inset-ring inset-ring-(--inset-ring-color)/15 size-4 rounded-sm dark:inset-ring-(--inset-ring-color)/5",
5454
className,
5555
)}

Diff for: ‎app/layout.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import type React from "react"
22

33
import { Providers } from "@/components/providers"
44
import { siteConfig } from "@/resources/config/site"
5-
import { cn } from "@/utils/classes"
65
import "@/resources/styles/app.css"
76
import type { Metadata, Viewport } from "next"
87
import { Geist_Mono } from "next/font/google"
@@ -76,7 +75,7 @@ export default function RootLayout({
7675
}}
7776
/>
7877
</head>
79-
<body className={cn("min-h-screen font-sans antialiased")}>
78+
<body className="min-h-screen font-sans antialiased">
8079
<Providers>
8180
<Toast />
8281
<main>{children}</main>

Diff for: ‎bun.lockb

384 Bytes
Binary file not shown.

Diff for: ‎components/code/block-sandbox.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import { IconDevicePhone } from "@/components/icon-device"
1010
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/resizable"
1111
import quotes from "@/resources/json/quotes.json"
1212
import type { RegistryItem } from "@/resources/types"
13-
import { cn } from "@/utils/classes"
1413
import {
1514
IconCube,
1615
IconDeviceDesktop2,
@@ -24,6 +23,7 @@ import {
2423
} from "justd-icons"
2524
import { type Key, Tab, TabList, ToggleButtonGroup } from "react-aria-components"
2625
import type { ImperativePanelHandle } from "react-resizable-panels"
26+
import { twMerge } from "tailwind-merge"
2727
import {
2828
Button,
2929
Link,
@@ -161,7 +161,7 @@ function Component({ folders, fullscreen, isIframe = false, title, ...props }: P
161161
<TabList className="flex items-center text-xs">
162162
<Tab
163163
className={({ isSelected }) =>
164-
cn(
164+
twMerge(
165165
"cursor-pointer rounded-sm px-2.5 py-1.5 outline-hidden",
166166
isSelected && "bg-primary text-primary-fg",
167167
)
@@ -172,7 +172,7 @@ function Component({ folders, fullscreen, isIframe = false, title, ...props }: P
172172
</Tab>
173173
<Tab
174174
className={({ isSelected }) =>
175-
cn(
175+
twMerge(
176176
"cursor-pointer rounded-sm px-2.5 py-1.5 outline-hidden",
177177
isSelected && "bg-primary text-primary-fg",
178178
)

Diff for: ‎components/code/code-block.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
import { CodeHighlighter } from "@/components/code/code-highlighter"
44
import { CopyButton } from "@/components/code/copy-button"
55
import { copyToClipboard } from "@/resources/lib/copy"
6-
import { cn } from "@/utils/classes"
76
import {
87
IconBrackets2,
98
IconBrandCss,
@@ -13,6 +12,7 @@ import {
1312
} from "justd-icons"
1413
import { useEffect, useState } from "react"
1514
import { Tab } from "react-aria-components"
15+
import { twMerge } from "tailwind-merge"
1616
import { Tabs } from "ui"
1717

1818
interface Props {
@@ -59,7 +59,7 @@ export function CodeBlock({ source }: Props) {
5959
{Object.keys(contents).map((key) => (
6060
<Tab
6161
className={(values) =>
62-
cn(
62+
twMerge(
6363
"flex cursor-pointer items-center gap-x-1.5 whitespace-nowrap px-3 py-2.5 font-mono text-muted-fg text-xs tracking-tight outline-hidden",
6464
"**:data-[slot=icon]:-ml-0.5 border-transparent border-x first:border-l-0 **:data-[slot=icon]:size-4 **:data-[slot=icon]:shrink-0",
6565
(values.isSelected || values.isFocused || values.isFocusVisible) &&

Diff for: ‎components/code/code-highlighter.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,8 @@
22

33
import React, { useState } from "react"
44

5-
import { cn } from "@/utils/classes"
6-
75
import { codeToHtml } from "shiki"
6+
import { twMerge } from "tailwind-merge"
87

98
export interface CodeHighlighterProps {
109
plain?: boolean
@@ -54,7 +53,7 @@ export const CodeHighlighter = ({
5453
) : (
5554
<div
5655
{...props}
57-
className={cn(
56+
className={twMerge(
5857
"not-prose overflow-auto font-mono text-sm leading-8 **:[pre]:outline-hidden",
5958
max96 && "max-h-96",
6059
!plain && "rounded-lg bg-shiki-bg px-4 py-2.5 ring-1 ring-border",

Diff for: ‎components/code/code-sandbox.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ import { CodeHighlighter } from "@/components/code/code-highlighter"
77
import { CopyButton, CopyMotionButton } from "@/components/code/copy-button"
88
import { copyToClipboard } from "@/resources/lib/copy"
99
import type { RegistryItem } from "@/resources/types"
10-
import { cn } from "@/utils/classes"
1110
import { IconBrandCss, IconBrandReactjs, IconFile, IconWindowVisitFill } from "justd-icons"
1211
import { Tab } from "react-aria-components"
12+
import { twMerge } from "tailwind-merge"
1313
import { Loader, Tabs } from "ui"
1414

1515
interface Props {
@@ -52,7 +52,7 @@ export function CodeSandbox({ isIframe = true, classNames, source, src }: Props)
5252
<TabsList src={src} />
5353
<Tabs.Panel
5454
id="preview"
55-
className={cn("max-h-110 grow overflow-y-auto", classNames?.preview)}
55+
className={twMerge("max-h-110 grow overflow-y-auto", classNames?.preview)}
5656
>
5757
<React.Suspense
5858
fallback={
@@ -82,7 +82,7 @@ export function CodeSandbox({ isIframe = true, classNames, source, src }: Props)
8282
{Object.keys(rawSourceCode).map((key) => (
8383
<Tab
8484
className={(values) =>
85-
cn(
85+
twMerge(
8686
"flex cursor-pointer items-center gap-x-1.5 whitespace-nowrap p-3 font-mono text-muted-fg text-xs tracking-tight",
8787
"**:data-[slot=icon]:-ml-0.5 border-transparent border-x outline-hidden first:border-l-0 **:data-[slot=icon]:size-4 **:data-[slot=icon]:shrink-0",
8888
(values.isSelected || values.isFocused || values.isFocusVisible) &&

Diff for: ‎components/code/copy-button.tsx

+5-21
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React, { useEffect, useState } from "react"
22

33
import { copyToClipboard } from "@/resources/lib/copy"
4-
import { cn } from "@/utils/classes"
54
import { IconCheck, IconDuplicate } from "justd-icons"
65
import { Button } from "react-aria-components"
6+
import { twMerge } from "tailwind-merge"
77
import { composeTailwindRenderProps } from "ui"
88

99
interface CopyButtonProps extends React.ComponentProps<typeof Button> {
@@ -49,7 +49,7 @@ export function CopyButton({
4949
onPress={props.onPress || onPressHandler}
5050
className={composeTailwindRenderProps(
5151
className,
52-
cn(
52+
twMerge(
5353
"ml-auto grid size-8 place-content-center text-muted-fg outline-hidden hover:text-fg group-hover:opacity-100",
5454
!alwaysVisible ? "opacity-0" : "opacity-100",
5555
isCopied && "opacity-100",
@@ -62,22 +62,6 @@ export function CopyButton({
6262
)
6363
}
6464

65-
// function ClipboardIcon(props: React.ComponentPropsWithoutRef<"svg">) {
66-
// return (
67-
// <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
68-
// <path
69-
// strokeWidth="0"
70-
// d="M5.5 13.5v-5a2 2 0 0 1 2-2l.447-.894A2 2 0 0 1 9.737 4.5h.527a2 2 0 0 1 1.789 1.106l.447.894a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2Z"
71-
// />
72-
// <path
73-
// fill="none"
74-
// strokeLinejoin="round"
75-
// d="M12.5 6.5a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2m5 0-.447-.894a2 2 0 0 0-1.79-1.106h-.527a2 2 0 0 0-1.789 1.106L7.5 6.5m5 0-1 1h-3l-1-1"
76-
// />
77-
// </svg>
78-
// )
79-
// }
80-
8165
export function CopyMotionButton({ className, text }: { className?: string; text: string }) {
8266
const [copyCount, setCopyCount] = useState(0)
8367
const copied = copyCount > 0
@@ -94,7 +78,7 @@ export function CopyMotionButton({ className, text }: { className?: string; text
9478
return (
9579
<button
9680
type="button"
97-
className={cn(
81+
className={twMerge(
9882
"group/button -top-0.5 absolute right-0 overflow-hidden rounded-sm py-1 pr-2.5 pl-1.5 font-medium text-[0.70rem]/[1.20rem] opacity-0 backdrop-blur transition focus:opacity-100 group-hover/how:opacity-100",
9983
copied
10084
? "bg-blue-400/10 ring-1 ring-blue-400/20 ring-inset"
@@ -109,7 +93,7 @@ export function CopyMotionButton({ className, text }: { className?: string; text
10993
>
11094
<span
11195
aria-hidden={copied}
112-
className={cn(
96+
className={twMerge(
11397
"pointer-events-none flex items-center gap-0.5 text-zinc-500 transition duration-300 dark:text-zinc-400",
11498
copied && "-translate-y-1.5 opacity-0",
11599
)}
@@ -119,7 +103,7 @@ export function CopyMotionButton({ className, text }: { className?: string; text
119103
</span>
120104
<span
121105
aria-hidden={!copied}
122-
className={cn(
106+
className={twMerge(
123107
"pointer-events-none absolute inset-0 flex items-center justify-center text-blue-400 transition duration-300",
124108
!copied && "translate-y-1.5 opacity-0",
125109
)}

Diff for: ‎components/code/doc-how.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ import { CodeHighlighter } from "@/components/code/code-highlighter"
77
import { TabsList } from "@/components/code/code-sandbox"
88
import { createFetchRegistryFile } from "@/resources/lib/fetch-registry"
99
import type { RegistryItem } from "@/resources/types"
10-
import { cn } from "@/utils/classes"
1110
import { Group } from "react-aria-components"
11+
import { twMerge } from "tailwind-merge"
1212
import { Loader, Tabs } from "ui"
1313

1414
const registry = generated as Record<string, RegistryItem>
@@ -75,14 +75,14 @@ export const DocHow = ({
7575
const divProps = { ...props } as React.HTMLProps<HTMLDivElement>
7676
return (
7777
<div
78-
className={cn("not-prose group/how forced-color-adjust-non relative my-4", className)}
78+
className={twMerge("not-prose group/how forced-color-adjust-non relative my-4", className)}
7979
{...divProps}
8080
>
8181
<Tabs aria-label="Packages">
8282
<TabsList copyButton={copyButton} code={processedSourceCode as string} src={src} />
8383
<Tabs.Panel className="w-full" id="preview">
8484
<div
85-
className={cn(
85+
className={twMerge(
8686
!withNoPadding && "relative gap-4 rounded-lg border bg-bg p-6 dark:bg-secondary/40",
8787
isCenter &&
8888
"preview flex min-h-56 items-center justify-center overflow-x-auto py-6 sm:py-24 lg:min-h-110",
@@ -96,7 +96,7 @@ export const DocHow = ({
9696
</div>
9797
}
9898
>
99-
<div className={cn(minW72 && "min-w-72", "not-prose", className)}>
99+
<div className={twMerge(minW72 && "min-w-72", "not-prose", className)}>
100100
<Component />
101101
</div>
102102
</React.Suspense>

Diff for: ‎components/code/editor-text.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import { CodeHighlighter } from "@/components/code/code-highlighter"
77
import { CopyButton } from "@/components/code/copy-button"
88
import { copyToClipboard } from "@/resources/lib/copy"
99
import type { RegistryItem } from "@/resources/types"
10-
import { cn } from "@/utils/classes"
1110
import {
1211
IconBrackets2,
1312
IconBrandCss,
@@ -16,6 +15,7 @@ import {
1615
IconFile,
1716
} from "justd-icons"
1817
import { Tab } from "react-aria-components"
18+
import { twMerge } from "tailwind-merge"
1919
import { Tabs } from "ui"
2020

2121
interface Props {
@@ -86,7 +86,7 @@ export function EditorText({ source }: Props) {
8686
{Object.keys(rawSourceCode).map((key) => (
8787
<Tab
8888
className={(values) =>
89-
cn(
89+
twMerge(
9090
"flex cursor-pointer items-center gap-x-1.5 whitespace-nowrap p-3 font-mono text-muted-fg text-xs tracking-tight",
9191
"**:data-[slot=icon]:-ml-0.5 border-transparent border-x outline-hidden first:border-l-0 **:data-[slot=icon]:size-4 **:data-[slot=icon]:shrink-0",
9292
(values.isSelected || values.isFocused || values.isFocusVisible) &&

Diff for: ‎components/code/plain-code.tsx

+4-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
"use client"
22
import { ScrollArea, ScrollBar, ScrollViewport } from "@/components/ui/scroll-area"
33
import { useCopyButton } from "@/resources/lib/copy"
4-
import { cn } from "@/utils/classes"
54
import type { ScrollAreaViewportProps } from "@radix-ui/react-scroll-area"
65
import { IconCheck, IconDuplicate } from "justd-icons"
76
import {
@@ -45,7 +44,7 @@ export const Pre = ({ className, ref, ...props }: React.ComponentProps<"pre">) =
4544
return (
4645
<pre
4746
ref={ref}
48-
className={cn("w-full p-4 leading-relaxed focus-visible:outline-hidden", className)}
47+
className={twMerge("w-full p-4 leading-relaxed focus-visible:outline-hidden", className)}
4948
{...props}
5049
>
5150
{props.children}
@@ -81,7 +80,7 @@ export const PlainCode = ({
8180
<figure
8281
ref={ref}
8382
{...props}
84-
className={cn(
83+
className={twMerge(
8584
"not-prose group relative my-6 max-w-4xl overflow-hidden rounded-lg border bg-secondary/50 text-sm",
8685
keepBackground && "bg-white dark:bg-zinc-950!",
8786
className,
@@ -115,7 +114,7 @@ export const PlainCode = ({
115114
<ScrollArea ref={areaRef} className="w-full" dir="ltr">
116115
<ScrollViewport
117116
{...viewportProps}
118-
className={cn("max-h-[600px]", viewportProps?.className)}
117+
className={twMerge("max-h-[600px]", viewportProps?.className)}
119118
>
120119
{props.children}
121120
</ScrollViewport>
@@ -137,7 +136,7 @@ function CopyButton({
137136
return (
138137
<button
139138
type="button"
140-
className={cn(
139+
className={twMerge(
141140
buttonStyles({
142141
size: "square-petite",
143142
intent: "plain",

Diff for: ‎components/docs/outside/option-preview.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
"use client"
22

33
import type React from "react"
4-
5-
import { cn } from "@/utils/classes"
4+
import { twMerge } from "tailwind-merge"
65

76
export function OptionPreview({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
87
return (
98
<div
10-
className={cn("absolute top-4 left-4 inline-flex min-w-32 flex-col gap-1", className)}
9+
className={twMerge("absolute top-4 left-4 inline-flex min-w-32 flex-col gap-1", className)}
1110
{...props}
1211
/>
1312
)

0 commit comments

Comments
 (0)