Skip to content

Commit bf4c350

Browse files
anthonyshewanthonyshew
authored
docs(chore): remove classnames dependency (#10339)
### Description `classnames` does exactly the same as the `cn` utility, so we can drop the dependency for the sake of having less code. ### Testing Instructions You can poke around the preview to make sure styles have stayed intact.
1 parent fce4e6f commit bf4c350

15 files changed

+69
-87
lines changed

‎docs/site/app/(no-sidebar)/page.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
"use client";
22

33
import React, { useState } from "react";
4-
import cn from "classnames";
4+
import { cn } from "@/components/cn";
55
import Link from "next/link";
66
import { motion } from "framer-motion";
77
import { Clients } from "@/app/_clients/clients";

‎docs/site/app/(no-sidebar)/showcase/page.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,16 @@ function Showcase(): JSX.Element {
1616
<main className="container mx-auto pt-12">
1717
<div className="mx-auto">
1818
<div className="py-16 lg:text-center">
19-
<h1 className="mt-2 text-3xl font-extrabold leading-8 tracking-tight text-gray-900 dark:text-white sm:text-4xl sm:leading-10 md:text-5xl">
19+
<h1 className="mt-2 text-3xl font-extrabold leading-8 tracking-tight text-black dark:text-white sm:text-4xl sm:leading-10 md:text-5xl">
2020
Showcase
2121
</h1>
22-
<p className="mt-4 max-w-3xl font-mono text-xl leading-7 text-gray-900 dark:text-gray-900 lg:mx-auto">
22+
<p className="mt-4 max-w-3xl font-mono text-xl leading-7 text-black dark:text-white lg:mx-auto">
2323
Who is using Turborepo?
2424
</p>
2525
</div>
2626
</div>
2727

28-
<div className="mb-8 px-0 sm:px-8 grid grid-cols-3 items-center gap-16 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-7 ">
28+
<div className="mb-8 px-0 min-h-screen sm:px-8 grid grid-cols-3 items-center gap-16 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-7 ">
2929
<Clients linked />
3030
</div>
3131
</main>

‎docs/site/app/_clients/client-logo.tsx

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from "react";
2-
import cn from "classnames";
2+
import { cn } from "@/components/cn";
33
import Image from "next/image";
44
import type { TurboUser } from "./users";
55

@@ -12,10 +12,12 @@ export function Logo({
1212
user,
1313
theme,
1414
isLink,
15+
className,
1516
}: {
1617
user: TurboUser;
1718
theme: "dark" | "light";
1819
isLink: boolean;
20+
className?: string;
1921
}): JSX.Element {
2022
const styles = {
2123
...DEFAULT_SIZE,
@@ -32,10 +34,7 @@ export function Logo({
3234
const logo = (
3335
<Image
3436
alt={`${user.caption}'s Logo`}
35-
className={cn("mx-8", {
36-
"hidden dark:inline": theme !== "dark",
37-
"inline dark:hidden": theme === "dark",
38-
})}
37+
className={cn("mx-8", className)}
3938
// biome-ignore lint/style/noNonNullAssertion: Ignored using `--suppress`
4039
height={numericHeight!}
4140
priority
@@ -52,10 +51,7 @@ export function Logo({
5251
if (isLink) {
5352
return (
5453
<a
55-
className={cn("item-center flex justify-center", {
56-
"hidden dark:flex": theme !== "dark",
57-
"flex dark:hidden": theme === "dark",
58-
})}
54+
className="item-center flex justify-center"
5955
href={user.infoLink}
6056
rel="noopener noreferrer"
6157
target="_blank"

‎docs/site/app/_clients/clients.tsx

Lines changed: 37 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,19 @@
1-
import type { ReactElement, JSX } from "react";
2-
import React from "react";
3-
import cn from "classnames";
1+
"use client";
2+
3+
import type { ReactElement } from "react";
4+
import React, { useEffect, useState } from "react";
5+
import { cn } from "@/components/cn";
46
import { users } from "./users";
57
import { Logo } from "./client-logo";
8+
import { useTheme } from "next-themes";
69

710
interface LogoWrapperProps {
811
className: string;
9-
children: JSX.Element;
12+
children: ReactElement;
1013
staticWidth?: boolean;
1114
}
1215

13-
function LogoWrapper({
14-
className,
15-
children,
16-
staticWidth,
17-
}: LogoWrapperProps): JSX.Element {
16+
function LogoWrapper({ className, children, staticWidth }: LogoWrapperProps) {
1817
if (!staticWidth) return children;
1918
return (
2019
<div
@@ -33,39 +32,36 @@ export function Clients({
3332
linked?: boolean;
3433
staticWidth?: boolean;
3534
companyList?: string[];
36-
}): JSX.Element {
37-
const showcaseDark: ReactElement[] = [];
38-
const showcaseLight: ReactElement[] = [];
35+
}) {
36+
const [mounted, setMounted] = useState(false);
37+
const { theme } = useTheme();
38+
39+
useEffect(() => {
40+
setMounted(true);
41+
}, []);
42+
43+
// avoid hydration errors
44+
if (!mounted) return null;
3945

40-
users
46+
return users
4147
.filter((i) => (companyList ? companyList.includes(i.caption) : true))
42-
.forEach((user) => {
43-
if (user.pinned) {
44-
showcaseDark.push(
45-
<LogoWrapper
46-
className="flex dark:hidden"
47-
key={`${user.caption}-dark`}
48-
staticWidth={staticWidth}
49-
>
50-
<Logo isLink={linked ?? false} theme="dark" user={user} />
51-
</LogoWrapper>
52-
);
53-
showcaseLight.push(
54-
<LogoWrapper
55-
className="hidden dark:flex"
56-
key={`${user.caption}-light`}
57-
staticWidth={staticWidth}
58-
>
59-
<Logo isLink={linked ?? false} theme="light" user={user} />
60-
</LogoWrapper>
61-
);
62-
}
63-
});
48+
.map((user) => {
49+
const isDark = theme === "dark";
50+
const imgTheme = isDark ? "light" : "dark";
6451

65-
return (
66-
<>
67-
{showcaseDark}
68-
{showcaseLight}
69-
</>
70-
);
52+
return (
53+
<LogoWrapper
54+
className={isDark ? "hidden dark:flex" : "dark:hidden flex"}
55+
key={`${user.caption}-${imgTheme}`}
56+
staticWidth={staticWidth}
57+
>
58+
<Logo
59+
className={isDark ? "hidden dark:flex" : "dark:hidden flex"}
60+
isLink={linked ?? false}
61+
theme={imgTheme}
62+
user={user}
63+
/>
64+
</LogoWrapper>
65+
);
66+
});
7167
}

‎docs/site/app/_components/footer.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useRouter } from "next/navigation";
44
import Link from "next/link";
55
import type { ReactNode, ReactElement } from "react";
66
import { useState } from "react";
7-
import cn from "classnames";
7+
import { cn } from "@/components/cn";
88
import { VercelLogo } from "./logos";
99
import { gitHubRepoUrl } from "@/lib/constants";
1010

‎docs/site/app/_components/logo-context.tsx

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import type { MouseEvent } from "react";
44
import { useEffect, useCallback, useState, useRef } from "react";
55
import Link from "next/link";
6-
import classNames from "classnames";
6+
import { cn } from "@/components/cn";
77
import { VercelLogo } from "./logos";
88
import { PRODUCT_MENU_ITEMS, PLATFORM_MENU_ITEMS } from "./items";
99
import type { MenuItemProps } from "./types";
@@ -17,9 +17,7 @@ function MenuDivider({
1717
}): JSX.Element {
1818
return (
1919
<h3
20-
className={classNames(
21-
"group flex items-center px-4 py-2 text-xs font-bold text-gray-500 dark:text-gray-600"
22-
)}
20+
className="group flex items-center px-4 py-2 text-xs font-bold text-gray-500 dark:text-gray-600"
2321
{...other}
2422
>
2523
{children}
@@ -63,7 +61,7 @@ function MenuItem({
6361
}
6462
}, [copied, closeMenu]);
6563

66-
const classes = classNames(
64+
const classes = cn(
6765
className,
6866
"group flex items-center px-4 py-2 text-sm dark:hover:bg-gray-800 hover:bg-gray-200 w-full rounded-md"
6967
);
@@ -170,7 +168,7 @@ export function LogoContext(): JSX.Element {
170168
</MenuItem>
171169
))}
172170
<MenuDivider>Products</MenuDivider>
173-
{PRODUCT_MENU_ITEMS({ theme }).map((item) => (
171+
{PRODUCT_MENU_ITEMS().map((item) => (
174172
<MenuItem
175173
closeMenu={() => {
176174
setOpen(false);

‎docs/site/app/_components/logos.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import classNames from "classnames";
1+
import { cn } from "@/components/cn";
22

33
export function VercelLogo({ className }: { className?: string }): JSX.Element {
44
return (
55
<svg
6-
className={classNames(className, "fill-black dark:fill-white")}
6+
className={cn(className, "fill-black dark:fill-white")}
77
fill="none"
88
height={22}
99
viewBox="0 0 235 203"

‎docs/site/app/_components/turbohero-background.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import cn from "classnames";
1+
import { cn } from "@/components/cn";
22
import type { JSX } from "react";
33
import styles from "./turbohero-background.module.css";
44

‎docs/site/components/authors.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import cn from "classnames";
1+
import { cn } from "@/components/cn";
22
import { TURBO_TEAM } from "./team";
33
import type { Author } from "./team";
44
import { Avatar } from "./avatar";

‎docs/site/components/badge.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import cn from "classnames";
1+
import { cn } from "@/components/cn";
22
import type { ReactNode } from "react";
33

44
export type BadgeProps = React.ComponentProps<"span"> & {

‎docs/site/components/files.tsx

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import classNames from "classnames";
1+
import { cn } from "@/components/cn";
22
import {
33
File as FumaFile,
44
Folder as FumaFolder,
@@ -18,9 +18,10 @@ export function File({
1818
}): JSX.Element {
1919
return (
2020
<FumaFile
21-
className={`${classNames({
22-
"text-green-700 dark:text-green-900": green,
23-
})} ${className}`}
21+
className={cn(
22+
green ? "text-green-700 dark:text-green-900" : "",
23+
className
24+
)}
2425
name={name}
2526
{...props}
2627
/>
@@ -39,9 +40,10 @@ export function Folder({
3940
}): JSX.Element {
4041
return (
4142
<FumaFolder
42-
className={`${classNames({
43-
"text-green-700 dark:text-green-900": green,
44-
})} ${className}`}
43+
className={cn(
44+
green ? "text-green-700 dark:text-green-900" : "",
45+
className
46+
)}
4547
name={name}
4648
{...props}
4749
/>

‎docs/site/components/image/themed-image-figure.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from "react";
2-
import cn from "classnames";
2+
import { cn } from "@/components/cn";
33
import type { ImageFigureProps } from "./image-figure";
44
import type { ThemedImageProps } from "./themed-image";
55
import { ThemedImage } from "./themed-image";
@@ -27,10 +27,8 @@ export function ThemedImageFigure(
2727
<div
2828
className={cn(
2929
"border-box relative inline-block max-w-full overflow-hidden text-[0px]",
30-
{
31-
"rounded-md": borderRadius,
32-
"shadow-lg": shadow,
33-
}
30+
borderRadius ? "rounded-md" : "",
31+
shadow ? "shadow-lg" : ""
3432
)}
3533
>
3634
{}

‎docs/site/components/theme-aware-image.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from "react";
2-
import cn from "classnames";
2+
import { cn } from "@/components/cn";
33
import type { ImageProps } from "next/image";
44
import Image from "next/image";
55

‎docs/site/package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,6 @@
3434
"@vercel/speed-insights": "1.2.0",
3535
"algoliasearch": "^4.23.3",
3636
"class-variance-authority": "^0.7.1",
37-
"classnames": "^2.5.1",
3837
"clsx": "^2.1.1",
3938
"copy-to-clipboard": "^3.3.3",
4039
"fast-glob": "^3.3.2",

‎pnpm-lock.yaml

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

0 commit comments

Comments
 (0)