More tailwind

oBusk · May 1, 2023 · 1950cee · 1950cee
1 parent 6e5b249
commit 1950cee
Show file tree

Hide file tree

Showing 10 changed files with 46 additions and 44 deletions.
diff --git a/src/app/[...parts]/_error/ErrorBox.tsx b/src/app/[...parts]/_error/ErrorBox.tsx
@@ -1,20 +1,20 @@
-import { Code, forwardRef, VStack } from "@chakra-ui/react";
+import { ElementRef, forwardRef } from "react";
 import BorderBox, { BorderBoxProps } from "^/components/ui/BorderBox";
+import cn from "^/lib/cn";
 
 export interface ErrorBoxProps extends BorderBoxProps {}
 
-const ErrorBox = forwardRef<ErrorBoxProps, typeof BorderBox>((props, ref) => {
-    return (
-        <BorderBox
-            as={VStack}
-            backgroundColor="red.200"
-            _dark={{
-                backgroundColor: "red.700",
-            }}
-            {...props}
-            ref={ref}
-        />
-    );
-});
+const ErrorBox = forwardRef<ElementRef<typeof BorderBox>, ErrorBoxProps>(
+    (props, ref) => {
+        return (
+            <BorderBox
+                className={cn("bg-red-200 dark:bg-red-700")}
+                {...props}
+                ref={ref}
+            />
+        );
+    },
+);
+ErrorBox.displayName = "ErrorBox";
 
 export default ErrorBox;
diff --git a/src/app/[...parts]/_page/DiffIntro/DiffIntro.tsx b/src/app/[...parts]/_page/DiffIntro/DiffIntro.tsx
@@ -10,6 +10,7 @@ import {
     Text,
 } from "@chakra-ui/react";
 import { ReactNode } from "react";
+import cn from "^/lib/cn";
 import { NpmDiffOptions } from "^/lib/npmDiff";
 import SimplePackageSpec from "^/lib/SimplePackageSpec";
 import contentVisibility from "^/lib/utils/contentVisibility";
@@ -25,7 +26,7 @@ export interface DiffIntroProps extends FlexProps {
 }
 
 const DiffIntro = forwardRef<DiffIntroProps, "h2">(
-    ({ a, b, services, options, ...props }, ref) => {
+    ({ a, b, services, options, className, ...props }, ref) => {
         if (a.name == null) {
             a.name = "ERROR";
         }
@@ -39,8 +40,8 @@ const DiffIntro = forwardRef<DiffIntroProps, "h2">(
                 alignItems="center"
                 css={{
                     label: "DiffIntro",
-                    ...contentVisibility("700px"),
                 }}
+                className={cn(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,20 +1,24 @@
 import { Code, Heading, Text } from "@chakra-ui/react";
-import { forwardRef } from "@chakra-ui/system";
-import BorderBox from "^/components/ui/BorderBox";
+import { ElementRef, forwardRef } from "react";
+import BorderBox, { BorderBoxProps } from "^/components/ui/BorderBox";
+import cn from "^/lib/cn";
 import { NpmDiffOptions } from "^/lib/npmDiff";
 
-interface OptionsProps {
+interface OptionsProps extends BorderBoxProps {
     options: NpmDiffOptions;
 }
 
-const Options = forwardRef<OptionsProps, typeof BorderBox>(
-    ({ options: { diffFiles = [], ...options } = {} }, ref) => {
+const Options = forwardRef<ElementRef<typeof BorderBox>, OptionsProps>(
+    (
+        { options: { diffFiles = [], ...options } = {}, className, ...props },
+        ref,
+    ) => {
         const specifiedOptions = Object.entries(options).filter(
             ([, value]) => value != null,
         );
 
         return (
-            <BorderBox margin="10px 0" ref={ref}>
+            <BorderBox className={cn("my-2", className)} {...props} ref={ref}>
                 <Heading size="xs" marginBottom="1em">
                     Options
                 </Heading>
@@ -33,5 +37,6 @@ const Options = forwardRef<OptionsProps, typeof BorderBox>(
         );
     },
 );
+Options.displayName = "Options";
 
 export default Options;
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,8 +1,8 @@
 import { Box, Skeleton } from "@chakra-ui/react";
 import CollapsableBorderBox from "^/components/CollapsableBorderBox";
+import cn from "^/lib/cn";
 import contentVisibility from "^/lib/utils/contentVisibility";
 import { DiffFileHeaderSkeleton } from "./DiffFileHeader";
-import { Decoration } from "./react-diff-view";
 
 const FakeCodeRow = ({
     length,
@@ -23,12 +23,7 @@ const FakeCodeRow = ({
 export default function DiffFileSkeleton() {
     return (
         <CollapsableBorderBox
-            css={{
-                label: "DiffFile",
-                margin: "1em 0",
-                fontsize: "16px",
-                ...contentVisibility("700px"),
-            }}
+            className={cn("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
@@ -5,6 +5,7 @@ import "react-diff-view/style/index.css";
 import CollapsableBorderBox, {
     CollapsableBorderBoxProps,
 } from "^/components/CollapsableBorderBox";
+import cn from "^/lib/cn";
 import SimplePackageSpec from "^/lib/SimplePackageSpec";
 import contentVisibility from "^/lib/utils/contentVisibility";
 import countChanges from "^/lib/utils/countChanges";
@@ -25,7 +26,7 @@ export interface DiffFileProps extends CollapsableBorderBoxProps {
 }
 
 const DiffFile = forwardRef<DiffFileProps, typeof CollapsableBorderBox>(
-    ({ a, b, file, viewType, index, ...props }, ref) => {
+    ({ a, b, file, viewType, index, className, ...props }, ref) => {
         const { type, hunks, oldPath, newPath } = file;
 
         const countedChanges = useMemo(() => countChanges(hunks), [hunks]);
@@ -59,8 +60,8 @@ const DiffFile = forwardRef<DiffFileProps, typeof CollapsableBorderBox>(
                 css={{
                     label: "DiffFile",
                     margin: "1em 0",
-                    ...contentVisibility("700px"),
                 }}
+                className={cn(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,6 +1,7 @@
 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";
 
@@ -18,8 +19,8 @@ const DiffHunk: FunctionComponent<DiffHunkProps> = ({ hunk }) => (
             _dark={{ background: "gray.700", color: "gray.100" }}
             css={{
                 label: "DiffHunk",
-                ...contentVisibility("800px"),
             }}
+            className={cn(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,6 +1,7 @@
 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";
@@ -24,7 +25,7 @@ const DiffFiles: FunctionComponent<DiffFilesProps> = ({ a, b, files }) => {
                     b={b}
                     file={file}
                     viewType={viewType}
-                    width="100%"
+                    className={cn("w-full")}
                 />
             ))}
         </Box>

diff --git a/src/app/_page/OptionsForm.tsx b/src/app/_page/OptionsForm.tsx
@@ -1,14 +1,16 @@
 import {
-    FlexProps,
     FormControl,
     FormHelperText,
     FormLabel,
     Input,
 } from "@chakra-ui/react";
 import { FunctionComponent } from "react";
-import ButtonExpandBox from "^/components/ui/ButtonExpandBox";
+import ButtonExpandBox, {
+    ButtonExpandBoxProps,
+} from "^/components/ui/ButtonExpandBox";
 
-export interface OptionsFormProps extends FlexProps {
+export interface OptionsFormProps
+    extends Omit<ButtonExpandBoxProps, "buttonContent" | "buttonLabel"> {
     files: string;
     filesChange: (value: string) => void;
 }

diff --git a/src/components/CollapsableBorderBox/CollapsableBorderBox.tsx b/src/components/CollapsableBorderBox/CollapsableBorderBox.tsx
@@ -1,6 +1,7 @@
 import { Box, forwardRef, useBoolean } from "@chakra-ui/react";
 import { ReactNode } from "react";
 import BorderBox, { BorderBoxProps } from "^/components/ui/BorderBox";
+import cn from "^/lib/cn";
 import CollapsableBorderBoxHeader from "./CollapsableBorderBoxHeader";
 
 export interface CollapsableBorderBoxProps extends BorderBoxProps {
@@ -10,11 +11,11 @@ export interface CollapsableBorderBoxProps extends BorderBoxProps {
 
 /** A borderbox with a header that has `>` button to collapse the box, hiding `children`. */
 const CollapsableBorderBox = forwardRef<CollapsableBorderBoxProps, "div">(
-    ({ header, title, children, ...props }, ref) => {
+    ({ header, title, children, className, ...props }, ref) => {
         const [isExpanded, setIsExpanded] = useBoolean(true);
 
         return (
-            <BorderBox padding={0} {...props} ref={ref}>
+            <BorderBox className={cn("p-0", className)} {...props} ref={ref}>
                 <CollapsableBorderBoxHeader
                     isExpanded={isExpanded}
                     toggleIsExpanded={setIsExpanded.toggle}

diff --git a/src/lib/utils/contentVisibility.ts b/src/lib/utils/contentVisibility.ts
@@ -18,10 +18,5 @@
  * ```
  */
 export default function contentVisibility(this: void, height = "", width = "") {
-    return {
-        contain: "content",
-        contentVisibility: "auto",
-        containIntrinsicHeight: `auto ${height}`,
-        containIntrinsicWidth: `auto ${width}`,
-    } as const;
+    return `contain-content [content-visibility:auto] [contain-intrinsic-width:auto_${width}] [contain-intrinsic-height:auto_${height}]`;
 }