Remove lots of unecessary cn

oBusk · May 3, 2023 · ee44310 · ee44310
1 parent 17000ba
commit ee44310
Show file tree

Hide file tree

Showing 43 changed files with 117 additions and 133 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -48,7 +48,6 @@
         "@radix-ui/react-tooltip": "^1.0.5",
         "@vercel/analytics": "^1.0.0",
         "class-variance-authority": "^0.6.0",
-        "clsx": "^1.2.1",
         "downshift": "^7.6.0",
         "gitdiff-parser": "^0.3.1",
         "jest": "^29.5.0",

diff --git a/src/app/[...parts]/_error/ErrorBox.tsx b/src/app/[...parts]/_error/ErrorBox.tsx
@@ -1,14 +1,14 @@
 import { ElementRef, forwardRef } from "react";
 import BorderBox, { BorderBoxProps } from "^/components/ui/BorderBox";
-import cn from "^/lib/cn";
+import { cx } from "^/lib/cva";
 
 export interface ErrorBoxProps extends BorderBoxProps {}
 
 const ErrorBox = forwardRef<ElementRef<typeof BorderBox>, ErrorBoxProps>(
-    (props, ref) => {
+    ({ className, ...props }, ref) => {
         return (
             <BorderBox
-                className={cn("bg-red-200 dark:bg-red-700")}
+                className={cx("bg-red-200 dark:bg-red-700", className)}
                 {...props}
                 ref={ref}
             />

diff --git a/src/app/[...parts]/_page/DiffIntro/DiffIntro.tsx b/src/app/[...parts]/_page/DiffIntro/DiffIntro.tsx
@@ -10,7 +10,7 @@ import {
     Text,
 } from "@chakra-ui/react";
 import { ReactNode } from "react";
-import cn from "^/lib/cn";
+import { cx } from "^/lib/cva";
 import { NpmDiffOptions } from "^/lib/npmDiff";
 import SimplePackageSpec from "^/lib/SimplePackageSpec";
 import contentVisibility from "^/lib/utils/contentVisibility";
@@ -41,7 +41,7 @@ const DiffIntro = forwardRef<DiffIntroProps, "h2">(
                 css={{
                     label: "DiffIntro",
                 }}
-                className={cn(contentVisibility("700px"), className)}
+                className={cx(contentVisibility("700px"), className)}
                 {...props}
                 ref={ref}
             >

diff --git a/src/app/[...parts]/_page/DiffIntro/Options.tsx b/src/app/[...parts]/_page/DiffIntro/Options.tsx
@@ -1,7 +1,7 @@
 import { Code, Heading, Text } from "@chakra-ui/react";
 import { ElementRef, forwardRef } from "react";
 import BorderBox, { BorderBoxProps } from "^/components/ui/BorderBox";
-import cn from "^/lib/cn";
+import { cx } from "^/lib/cva";
 import { NpmDiffOptions } from "^/lib/npmDiff";
 
 interface OptionsProps extends BorderBoxProps {
@@ -18,7 +18,7 @@ const Options = forwardRef<ElementRef<typeof BorderBox>, OptionsProps>(
         );
 
         return (
-            <BorderBox className={cn("my-2", className)} {...props} ref={ref}>
+            <BorderBox className={cx("my-2", className)} {...props} ref={ref}>
                 <Heading size="xs" marginBottom="1em">
                     Options
                 </Heading>

diff --git a/src/app/[...parts]/_page/NpmDiff/DiffFiles/DiffFile/DiffFile.skeleton.tsx b/src/app/[...parts]/_page/NpmDiff/DiffFiles/DiffFile/DiffFile.skeleton.tsx
@@ -1,6 +1,6 @@
 import { Box, Skeleton } from "@chakra-ui/react";
 import CollapsableBorderBox from "^/components/CollapsableBorderBox";
-import cn from "^/lib/cn";
+import { cx } from "^/lib/cva";
 import contentVisibility from "^/lib/utils/contentVisibility";
 import { DiffFileHeaderSkeleton } from "./DiffFileHeader";
 
@@ -23,7 +23,7 @@ const FakeCodeRow = ({
 export default function DiffFileSkeleton() {
     return (
         <CollapsableBorderBox
-            className={cn("my-4 text-base", contentVisibility("700px"))}
+            className={cx("my-4 text-base", contentVisibility("700px"))}
             header={<DiffFileHeaderSkeleton />}
         >
             <Box

diff --git a/src/app/[...parts]/_page/NpmDiff/DiffFiles/DiffFile/DiffFile.tsx b/src/app/[...parts]/_page/NpmDiff/DiffFiles/DiffFile/DiffFile.tsx
@@ -7,7 +7,7 @@ import "react-diff-view/style/index.css";
 import CollapsableBorderBox, {
     CollapsableBorderBoxProps,
 } from "^/components/CollapsableBorderBox";
-import cn from "^/lib/cn";
+import { cx } from "^/lib/cva";
 import SimplePackageSpec from "^/lib/SimplePackageSpec";
 import contentVisibility from "^/lib/utils/contentVisibility";
 import countChanges from "^/lib/utils/countChanges";
@@ -63,7 +63,7 @@ const DiffFile = forwardRef<DiffFileProps, typeof CollapsableBorderBox>(
                     label: "DiffFile",
                     margin: "1em 0",
                 }}
-                className={cn(contentVisibility("700px", className))}
+                className={cx(contentVisibility("700px", className))}
                 header={
                     <DiffFileHeader
                         a={a}

diff --git a/src/app/[...parts]/_page/NpmDiff/DiffFiles/DiffFile/DiffHunk.tsx b/src/app/[...parts]/_page/NpmDiff/DiffFiles/DiffFile/DiffHunk.tsx
@@ -1,7 +1,6 @@
 import { Text } from "@chakra-ui/react";
 import { FunctionComponent } from "react";
 import { HunkData } from "react-diff-view";
-import cn from "^/lib/cn";
 import contentVisibility from "^/lib/utils/contentVisibility";
 import { Decoration, Hunk } from "./react-diff-view";
 
@@ -20,7 +19,7 @@ const DiffHunk: FunctionComponent<DiffHunkProps> = ({ hunk }) => (
             css={{
                 label: "DiffHunk",
             }}
-            className={cn(contentVisibility("800px"))}
+            className={contentVisibility("800px")}
         >
             <Text padding="10px">{hunk.content}</Text>
         </Decoration>

diff --git a/src/app/[...parts]/_page/NpmDiff/DiffFiles/DiffFiles.tsx b/src/app/[...parts]/_page/NpmDiff/DiffFiles/DiffFiles.tsx
@@ -1,7 +1,6 @@
 import { Box } from "@chakra-ui/react";
 import { FunctionComponent } from "react";
 import { FileData } from "react-diff-view";
-import cn from "^/lib/cn";
 import SimplePackageSpec from "^/lib/SimplePackageSpec";
 import useViewType from "^/lib/utils/useViewType";
 import DiffFileComponent from "./DiffFile";
@@ -25,7 +24,7 @@ const DiffFiles: FunctionComponent<DiffFilesProps> = ({ a, b, files }) => {
                     b={b}
                     file={file}
                     viewType={viewType}
-                    className={cn("w-full")}
+                    className="w-full"
                 />
             ))}
         </Box>

diff --git a/src/app/[...parts]/_page/SizeComparison/SizeComparison.tsx b/src/app/[...parts]/_page/SizeComparison/SizeComparison.tsx
@@ -4,7 +4,7 @@ import { Box, Flex, Heading, Text } from "@chakra-ui/react";
 import { FunctionComponent, ReactNode } from "react";
 import ExternalLink, { ExternalLinkProps } from "^/components/ExternalLink";
 import Span from "^/components/Span";
-import cn from "^/lib/cn";
+import { cx } from "^/lib/cva";
 import { Service, ServiceName, Services } from "^/lib/Services";
 import SimplePackageSpec from "^/lib/SimplePackageSpec";
 import { prettyByte } from "^/lib/utils/prettyByte";
@@ -60,7 +60,7 @@ const LinkButton: FunctionComponent<
                 {...props}
             /> */}
             <ExternalLink
-                className={cn("rounded-lg p-2 text-center", className)}
+                className={cx("rounded-lg p-2 text-center", className)}
                 href={service.url(pkg)}
                 {...props}
             />
@@ -152,7 +152,7 @@ const SizeComparison = ({
                     </LinkButton>
                 }
                 center={
-                    <Box className={cn("p-2")} textAlign="center">
+                    <Box className="p-2" textAlign="center">
                         {sizeRows.map((sizeRow) => (
                             <Text key={sizeRow.name}>{sizeRow.name}</Text>
                         ))}

diff --git a/src/app/_layout/Footer.tsx b/src/app/_layout/Footer.tsx
@@ -1,12 +1,12 @@
 import { forwardRef, HTMLAttributes } from "react";
-import cn from "^/lib/cn";
+import { cx } from "^/lib/cva";
 
 interface FooterProps extends HTMLAttributes<HTMLDivElement> {}
 
 const Footer = forwardRef<HTMLDivElement, FooterProps>(
     ({ className, ...props }, ref) => (
         <footer
-            className={cn("contain-content flex", className)}
+            className={cx("contain-content flex", className)}
             {...props}
             ref={ref}
         />

diff --git a/src/app/_layout/Header/ColorModeToggle.tsx b/src/app/_layout/Header/ColorModeToggle.tsx
@@ -5,12 +5,12 @@ import { useTheme } from "next-themes";
 import { forwardRef, useEffect, useState } from "react";
 import Button, { ButtonProps } from "^/components/ui/Button";
 import Tooltip from "^/components/ui/Tooltip";
-import cn from "^/lib/cn";
+import { cx } from "^/lib/cva";
 
 export interface ColorModeToggleProps extends ButtonProps {}
 
 const ColorModeToggle = forwardRef<HTMLButtonElement, ColorModeToggleProps>(
-    ({ ...props }, ref) => {
+    ({ className, ...props }, ref) => {
         const [mounted, setMounted] = useState(false);
         const { setTheme, theme } = useTheme();
 
@@ -29,9 +29,10 @@ const ColorModeToggle = forwardRef<HTMLButtonElement, ColorModeToggleProps>(
                         setTheme(theme === "dark" ? "light" : "dark")
                     }
                     aria-label={label}
-                    className={cn(
+                    className={cx(
                         "transition-opacity duration-500",
                         !mounted && "opacity-0",
+                        className,
                     )}
                     {...props}
                     ref={ref}

diff --git a/src/app/_layout/Header/GithubLink.tsx b/src/app/_layout/Header/GithubLink.tsx
@@ -3,7 +3,6 @@ import { ElementRef, forwardRef } from "react";
 import ExternalLink, { ExternalLinkProps } from "^/components/ExternalLink";
 import { buttonVariants } from "^/components/ui/Button";
 import Tooltip from "^/components/ui/Tooltip";
-import cn from "^/lib/cn";
 
 export interface GithubLinkProps
     extends Omit<ExternalLinkProps, "aria-label"> {}
@@ -14,13 +13,11 @@ const GithubLink = forwardRef<ElementRef<typeof ExternalLink>, GithubLinkProps>(
         return (
             <Tooltip label={label}>
                 <ExternalLink
-                    className={cn(
-                        buttonVariants({
-                            className,
-                            variant: "ghost",
-                            size: "xs",
-                        }),
-                    )}
+                    className={buttonVariants({
+                        className,
+                        variant: "ghost",
+                        size: "xs",
+                    })}
                     aria-label={label}
                     href="https://github.com/oBusk/npm-diff.app"
                     {...props}

diff --git a/src/app/_layout/Header/Header.tsx b/src/app/_layout/Header/Header.tsx
@@ -1,7 +1,7 @@
 import Link from "next/link";
 import { forwardRef, HTMLAttributes } from "react";
 import Heading from "^/components/ui/Heading";
-import cn from "^/lib/cn";
+import { cx } from "^/lib/cva";
 import ColorModeToggle from "./ColorModeToggle";
 import GithubLink from "./GithubLink";
 import NavLink from "./NavLink";
@@ -11,7 +11,7 @@ export interface HeaderProps extends HTMLAttributes<HTMLElement> {}
 const Header = forwardRef<HTMLElement, HeaderProps>(
     ({ className, ...props }, ref) => (
         <nav
-            className={cn(
+            className={cx(
                 "sticky inset-x-0 top-0 z-10 flex items-center justify-between px-4 py-6",
                 className,
             )}

diff --git a/src/app/_layout/Header/NavLink.tsx b/src/app/_layout/Header/NavLink.tsx
@@ -1,10 +1,9 @@
 "use client";
 
-import { cva } from "class-variance-authority";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { AnchorHTMLAttributes, forwardRef, useEffect, useState } from "react";
-import cn from "^/lib/cn";
+import { cva } from "^/lib/cva";
 
 const navLinkVariants = cva(
     "block rounded-md transition-all duration-200 focus:outline-none",
@@ -41,7 +40,7 @@ const NavLink = forwardRef<HTMLAnchorElement, NavLinkProps>(
         return (
             <Link
                 href={href}
-                className={cn(navLinkVariants({ isActive, className }))}
+                className={navLinkVariants({ isActive, className })}
                 {...props}
                 ref={ref}
             />

diff --git a/src/app/_page/ExamplesList.tsx b/src/app/_page/ExamplesList.tsx
@@ -1,7 +1,6 @@
 import Link from "next/link";
 import { ElementRef, forwardRef } from "react";
 import Stack, { StackProps } from "^/components/ui/Stack";
-import cn from "^/lib/cn";
 import EXAMPLES from "^/lib/examples";
 import { QueryParams } from "^/lib/query";
 
@@ -31,10 +30,10 @@ const ExamplesList = forwardRef<ElementRef<typeof Stack>, ExamplesListProps>(
 
         return (
             <Stack align="center" {...props} ref={ref}>
-                <h2 className={cn("text-xl font-bold")}>Examples</h2>
+                <h2 className="text-xl font-bold">Examples</h2>
                 {EXAMPLES.map((ex) => (
                     <Link
-                        className={cn("my-1 hover:underline")}
+                        className="my-1 hover:underline"
                         key={ex}
                         href={{
                             pathname: `/${ex}`,

diff --git a/src/app/_page/Intro.tsx b/src/app/_page/Intro.tsx
@@ -1,19 +1,18 @@
 import { forwardRef, HTMLAttributes } from "react";
 import ExternalLink from "^/components/ExternalLink";
 import Code from "^/components/ui/Code";
-import cn from "^/lib/cn";
 
 export interface IntroProps extends HTMLAttributes<HTMLElement> {}
 
 const Intro = forwardRef<HTMLElement, IntroProps>((props, ref) => (
     <section {...props} ref={ref}>
-        <p className={cn("text-center")}>
+        <p className="text-center">
             <ExternalLink href="https://docs.npmjs.com/cli/v7/commands/npm-diff">
                 <Code>npm diff</Code>
             </ExternalLink>{" "}
             online!
         </p>
-        <p className={cn("text-center")}>
+        <p className="text-center">
             Web tool to compare versions, or branches, of NPM packages.
         </p>
     </section>

diff --git a/src/app/_page/MainForm/CenterInputAddon.tsx b/src/app/_page/MainForm/CenterInputAddon.tsx
@@ -1,12 +1,12 @@
 import { forwardRef, HTMLAttributes } from "react";
-import cn from "^/lib/cn";
+import { cx } from "^/lib/cva";
 
 export interface InputAddonProps extends HTMLAttributes<HTMLDivElement> {}
 
 const CenterInputAddon = forwardRef<HTMLDivElement, InputAddonProps>(
     ({ className, ...props }, ref) => (
         <div
-            className={cn("h-10 select-none border bg-accent p-2", className)}
+            className={cx("h-10 select-none border bg-accent p-2", className)}
             {...props}
             ref={ref}
         />

diff --git a/src/app/_page/MainForm/MainForm.tsx b/src/app/_page/MainForm/MainForm.tsx
@@ -19,7 +19,7 @@ import {
     TooltipTrigger,
 } from "^/components/ui/Tooltip";
 import { AutocompleteSuggestion } from "^/lib/autocomplete";
-import cn from "^/lib/cn";
+import { cx } from "^/lib/cva";
 import CenterInputAddon from "./CenterInputAddon";
 import SpecInput from "./SpecInput";
 
@@ -86,7 +86,7 @@ const MainForm = forwardRef<HTMLFormElement, MainFormProps>(
 
         return (
             <form
-                className={cn(
+                className={cx(
                     "flex flex-col lg:flex-row",
                     "items-center justify-center",
                     className,
@@ -108,7 +108,7 @@ const MainForm = forwardRef<HTMLFormElement, MainFormProps>(
                         }
                     }}
                     inputProps={{
-                        className: cn("lg:rounded-r-none", "lg:border-r-0"),
+                        className: "lg:rounded-r-none lg:border-r-0",
                         ...(overrideA
                             ? {
                                   value: overrideA,
@@ -128,10 +128,10 @@ const MainForm = forwardRef<HTMLFormElement, MainFormProps>(
                     onInputValueChange={setB}
                     optionalPackageFilter={bPackageFilter}
                     wrapperProps={{
-                        className: cn("mt-2", "lg:mt-0"),
+                        className: "mt-2 lg:mt-0",
                     }}
                     inputProps={{
-                        className: cn("lg:rounded-l-none", "lg:border-l-0"),
+                        className: "lg:rounded-l-none lg:border-l-0",
                         ...(overrideB
                             ? {
                                   value: overrideB,

diff --git a/src/app/_page/MainForm/SpecInput/Combobox/ComboboxInput.tsx b/src/app/_page/MainForm/SpecInput/Combobox/ComboboxInput.tsx
@@ -1,7 +1,6 @@
-import { cva, VariantProps } from "class-variance-authority";
 import { ElementRef, forwardRef } from "react";
 import Input, { InputProps } from "^/components/ui/Input";
-import cn from "^/lib/cn";
+import { cva, VariantProps } from "^/lib/cva";
 
 const comboboxInputVariants = cva(null, {
     variants: {
@@ -20,7 +19,7 @@ const ComboboxInput = forwardRef<ElementRef<typeof Input>, ComboboxInputProps>(
         <Input
             type="text"
             ring={false}
-            className={cn(comboboxInputVariants({ isOpen, className }))}
+            className={comboboxInputVariants({ isOpen, className })}
             ref={ref}
             {...props}
         />