refactor(web): sort tailwind css classname (#989)

labring · Mar 31, 2023 · 228ac20 · 228ac20
1 parent 8444d80
commit 228ac20
Show file tree

Hide file tree

Showing 73 changed files with 326 additions and 218 deletions.
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -57,9 +57,11 @@
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "husky": "^8.0.3",
+    "install": "^0.13.0",
     "lint-staged": "^13.2.0",
     "postcss": "^8.4.21",
-    "prettier": "^2.8.6",
+    "prettier": "^2.8.7",
+    "prettier-plugin-tailwindcss": "^0.2.6",
     "tailwindcss": "^3.2.7",
     "typescript": "4.9.5",
     "vite": "^4.2.1"

diff --git a/web/prettier.config.cjs b/web/prettier.config.cjs
@@ -3,4 +3,5 @@ module.exports = {
   tabWidth: 2,
   trailingComma: "all",
   semi: true,
+  plugins: [require("prettier-plugin-tailwindcss")],
 };
diff --git a/web/src/components/ChargeButton/index.tsx b/web/src/components/ChargeButton/index.tsx
@@ -75,10 +75,10 @@ export default function ChargeButton(props: { amount?: number; children: React.R
           <ModalBody px="10" pb="10">
             <div className="flex flex-col items-center text-xl">
               <h2 className="text-second">{t("Balance")}</h2>
-              <h3 className="text-3xl font-semibold mb-4">
+              <h3 className="mb-4 text-3xl font-semibold">
                 {formatPrice(accountQuery.data?.balance)}
               </h3>
-              <p className="text-second mb-2">{t("Recharge amount")}</p>
+              <p className="mb-2 text-second">{t("Recharge amount")}</p>
               <InputGroup>
                 <InputLeftAddon children="¥" />
                 <Input
@@ -107,17 +107,17 @@ export default function ChargeButton(props: { amount?: number; children: React.R
             </div>
 
             {createChargeOrder.data?.data?.result?.code_url && (
-              <div className="flex flex-col items-center text-xl mt-4">
+              <div className="mt-4 flex flex-col items-center text-xl ">
                 <h2 className="mb-2">{t("Scan with WeChat")}</h2>
                 <QRCodeSVG
                   value={createChargeOrder.data?.data?.result?.code_url}
                   width={180}
                   height={180}
                 />
-                <p className="text-base mt-4 text-second ">
+                <p className="mt-4 text-base text-second ">
                   {t("Order Number")}：{createChargeOrder.data?.data?.order?.id}
                 </p>
-                <p className="text-base mt-1 text-second ">
+                <p className="mt-1 text-base text-second ">
                   {t("payment status")}: {phaseStatus}
                 </p>
               </div>

diff --git a/web/src/components/Content/index.tsx b/web/src/components/Content/index.tsx
@@ -1,5 +1,5 @@
 import React from "react";
 
 export default function Content(props: { children: React.ReactNode }) {
-  return <div className="flex-1 flex flex-col overflow-hidden space-y-2">{props.children}</div>;
+  return <div className="flex flex-1 flex-col space-y-2 overflow-hidden">{props.children}</div>;
 }
diff --git a/web/src/components/DotBadge/index.tsx b/web/src/components/DotBadge/index.tsx
@@ -31,7 +31,7 @@ export default function DotBadge({
   }
   return (
     <Box>
-      <span className={"inline-block w-[6px] h-[6px] rounded-full mr-1 " + bgColor}></span>
+      <span className={"mr-1 inline-block h-[6px] w-[6px] rounded-full " + bgColor}></span>
       <span className={color}>{text}</span>
     </Box>
   );

diff --git a/web/src/components/EditableTable/index.tsx b/web/src/components/EditableTable/index.tsx
@@ -80,7 +80,7 @@ const EditableTable = function (props: {
   return (
     <>
       <div
-        className={clsx("rounded-t-md relative border border-b-0", {
+        className={clsx("relative rounded-t-md border border-b-0", {
           "border-frostyNightfall-200": !darkMode,
         })}
       >

diff --git a/web/src/components/Editor/JSONViewer.tsx b/web/src/components/Editor/JSONViewer.tsx
@@ -243,12 +243,19 @@ export default function JSONViewer(props: JSONViewerProps) {
   };
 
   return (
-    <SyntaxHighlighter
-      language={language}
-      style={colorMode === "dark" ? JSONViewerDarkStyle : JSONViewerStyle}
-      customStyle={colorMode === "dark" ? darkTheme : lightTheme}
+    <div
+      style={{
+        maxHeight: 100,
+        overflow: "hidden",
+      }}
     >
-      {code}
-    </SyntaxHighlighter>
+      <SyntaxHighlighter
+        language={language}
+        style={colorMode === "dark" ? JSONViewerDarkStyle : JSONViewerStyle}
+        customStyle={colorMode === "dark" ? darkTheme : lightTheme}
+      >
+        {code}
+      </SyntaxHighlighter>
+    </div>
   );
 }
diff --git a/web/src/components/FileTypeIcon/index.tsx b/web/src/components/FileTypeIcon/index.tsx
@@ -38,7 +38,7 @@ export default function FileTypeIcon(props: { type: string; className?: string }
   switch (type) {
     case FileType.app:
       return (
-        <Icon viewBox="0 0 22 22" fontSize={24} className={clsx("align-middle ", className)}>
+        <Icon viewBox="0 0 22 22" fontSize={20} className={clsx("align-middle ", className)}>
           <mask
             id="mask0_2744_5395"
             style={{ maskType: "alpha" }}

diff --git a/web/src/components/Grid/index.tsx b/web/src/components/Grid/index.tsx
@@ -40,8 +40,8 @@ function Col(props: {
   return (
     <div
       className={clsx(
-        "flex flex-col h-full overflow-x-hidden",
-        style?.width ? "flex-none" : "flex-grow flex-1 overflow-hidden",
+        "flex h-full flex-col overflow-x-hidden",
+        style?.width ? "flex-none" : "flex-1 flex-grow overflow-hidden",
         className,
       )}
       style={style}

diff --git a/web/src/components/IconText/index.tsx b/web/src/components/IconText/index.tsx
@@ -13,7 +13,7 @@ export default function IconText(props: {
   return (
     <div
       onClick={props.onClick}
-      className={clsx("text-grayIron-600 flex flex-col items-center", {
+      className={clsx("flex flex-col items-center text-grayIron-600", {
         "hover:text-black": !darkMode,
         "hover:text-white": darkMode,
       })}

diff --git a/web/src/components/IconWrap/index.tsx b/web/src/components/IconWrap/index.tsx
@@ -18,7 +18,7 @@ export default function IconWrap(props: {
     <Tooltip label={tooltip} placement={placement}>
       <Center
         onClick={props.onClick}
-        className={clsx("rounded-full inline-block cursor-pointer ", className, {
+        className={clsx("inline-block cursor-pointer rounded-full ", className, {
           "hover:bg-lafWhite-600": !darkMode && !showBg,
           "bg-lafWhite-600": !darkMode && showBg,
           "hover:bg-lafDark-300": darkMode && !showBg,

diff --git a/web/src/components/InputTag/index.tsx b/web/src/components/InputTag/index.tsx
@@ -24,7 +24,7 @@ export default function InputTag(props: { value: string[]; onChange: (value: str
   return (
     <div
       className={clsx(
-        "flex items-center p-2 rounded-md ",
+        "flex items-center rounded-md p-2 ",
         darkMode ? "bg-gray-800" : "bg-gray-100",
       )}
     >

diff --git a/web/src/components/Panel/index.tsx b/web/src/components/Panel/index.tsx
@@ -17,7 +17,7 @@ const Panel = (props: {
       style={style}
       bg={bg}
       onClick={onClick}
-      className={clsx("rounded px-4 flex flex-col w-full", className)}
+      className={clsx("flex w-full flex-col rounded px-4", className)}
     >
       {props.children}
     </Box>

diff --git a/web/src/components/Resize/index.tsx b/web/src/components/Resize/index.tsx
@@ -41,16 +41,16 @@ export default function Resize(props: {
       {display === "none" ? null : (
         <div
           className={
-            type === "x" ? "h-full w-2 cursor-col-resize group" : "h-2 w-full cursor-row-resize"
+            type === "x" ? "group h-full w-2 cursor-col-resize" : "h-2 w-full cursor-row-resize"
           }
           {...separatorProps}
         >
-          <Center className="w-full h-full relative">
+          <Center className="relative h-full w-full">
             {type === "x" && width <= 20 ? (
               <div
                 className={clsx(
                   reverse ? "rounded-l-lg" : "rounded-r-lg",
-                  "w-2 h-[30px] bg-grayIron-300 group-hover:bg-grayIron-400 transition-colors leading-loose text-lafWhite-600",
+                  "h-[30px] w-2 bg-grayIron-300 leading-loose text-lafWhite-600 transition-colors group-hover:bg-grayIron-400",
                 )}
               >
                 {reverse ? <ChevronLeftIcon fontSize={10} /> : <ChevronRightIcon fontSize={10} />}
@@ -61,15 +61,15 @@ export default function Resize(props: {
                   className={clsx(
                     type === "x" && isDragging ? "h-full " : "h-0",
                     type === "y" && isDragging ? "w-full " : "w-0",
-                    isDragging ? " border-primary-400 border" : "",
-                    "transition-all absolute z-10 overflow-hidden",
+                    isDragging ? " border border-primary-400" : "",
+                    "absolute z-10 overflow-hidden transition-all",
                   )}
                 ></div>
                 <Box
                   borderColor={borderColor}
                   className={clsx(
                     type === "x" ? "h-[18px]" : "w-[18px]",
-                    "border rounded absolute",
+                    "absolute rounded border",
                   )}
                 ></Box>
               </>

diff --git a/web/src/layouts/Auth/index.tsx b/web/src/layouts/Auth/index.tsx
@@ -6,8 +6,8 @@ export default function LoginReg() {
   return (
     <div className={styles.container}>
       <div className="absolute top-[120px] left-[120px]">
-        <div className="text-primary-600 text-[36px]">Welcome to laf !</div>
-        <div className="text-grayModern-500 text-[20px]">life is short, you need laf.</div>
+        <div className="text-[36px] text-primary-600">Welcome to laf !</div>
+        <div className="text-[20px] text-grayModern-500">life is short, you need laf.</div>
       </div>
       <Outlet />
     </div>

diff --git a/web/src/layouts/Basic.tsx b/web/src/layouts/Basic.tsx
@@ -24,7 +24,7 @@ export default function BasicLayout() {
           <Outlet />
         )}
       </div>
-      <div className="text-center fixed -z-10 bottom-0 py-4 w-full">
+      <div className="fixed bottom-0 -z-10 w-full py-4 text-center">
         Made with <AiFillHeart className="inline text-red-500" />️ by laf team
       </div>
     </div>

diff --git a/web/src/layouts/Function.tsx b/web/src/layouts/Function.tsx
@@ -67,7 +67,7 @@ export default function FunctionLayout() {
             currentApp?.phase !== APP_PHASE_STATUS.Deleted ? (
               <div
                 className={clsx(
-                  "absolute top-0 bottom-0 left-0 right-0 z-[999] flex flex-col justify-center items-center  opacity-70 ",
+                  "absolute top-0 bottom-0 left-0 right-0 z-[999] flex flex-col items-center justify-center  opacity-70 ",
                   darkMode ? "bg-lafDark-100" : "bg-lafWhite-600",
                 )}
               >