Merge pull request #514 from Maniktherana/add-ts-and-responsive

feat: modernize codebase
vitessio · Feb 20, 2024 · f6905a7 · f6905a7
2 parents c0eb7db + 0ddeee2
commit f6905a7
Show file tree

Hide file tree

Showing 72 changed files with 1,922 additions and 674 deletions.
diff --git a/website/.eslintrc.cjs b/website/.eslintrc.cjs
@@ -1,15 +1,15 @@
 module.exports = {
   env: { browser: true, es2020: true },
   extends: [
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:react/jsx-runtime',
-    'plugin:react-hooks/recommended',
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended",
   ],
-  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
-  settings: { react: { version: '18.2' } },
-  plugins: ['react-refresh'],
+  parserOptions: { ecmaVersion: "latest", sourceType: "module" },
+  settings: { react: { version: "18.2" } },
+  plugins: ["react-refresh"],
   rules: {
-    'react-refresh/only-export-components': 'warn',
+    "react-refresh/only-export-components": "warn",
   },
-}
+};
diff --git a/website/components.json b/website/components.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "assets/styles/tailwind.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/library/utils"
+  }
+}
diff --git a/website/index.html b/website/index.html
@@ -44,7 +44,7 @@
       type="image/png"
     />
 
-    <link rel="stylesheet" href="./src/assets/styles/index.css">
+    <link rel="stylesheet" href="./src/assets/styles/index.css" />
   </head>
   <body>
     <div id="root"></div>

diff --git a/website/package.json b/website/package.json
@@ -7,14 +7,20 @@
     "dev": "vite --mode dev --host",
     "start": "serve -s dist",
     "build": "vite --mode prod build",
-    "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint src --ext js,ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
   "dependencies": {
     "@nivo/core": "^0.83.0",
     "@nivo/line": "^0.83.0",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-slot": "^1.0.2",
     "bytes": "^3.1.2",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
     "dotenv": "^16.1.4",
+    "lucide-react": "^0.331.0",
     "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -24,12 +30,14 @@
     "react-spinners": "^0.13.8",
     "serve": "^14.2.0",
     "swiper": "^9.4.1",
-    "tailwind-merge": "^1.14.0",
+    "tailwind-merge": "^2.2.1",
+    "tailwindcss-animate": "^1.0.7",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
-    "@types/react": "^18.0.37",
-    "@types/react-dom": "^18.0.11",
+    "@types/node": "^20.11.19",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
     "@vitejs/plugin-react": "^4.0.0",
     "autoprefixer": "^10.4.15",
     "eslint": "^8.38.0",
@@ -38,6 +46,7 @@
     "eslint-plugin-react-refresh": "^0.3.4",
     "postcss": "^8.4.29",
     "tailwindcss": "^3.3.3",
+    "typescript": "^5.3.3",
     "vite": "^4.4.6",
     "vite-plugin-env-compatible": "^1.1.1"
   }

diff --git a/website/src/App.tsx b/website/src/App.tsx
@@ -0,0 +1,35 @@
+/*
+Copyright 2024 The Vitess Authors.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import React from "react";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import PublicRoute from "./pages/PublicRoute";
+import { GlobalProvider } from "./contexts/GlobalContext";
+
+function App() {
+  return (
+    <>
+      <GlobalProvider>
+        <BrowserRouter>
+          <Routes>
+            <Route path="/*" element={<PublicRoute />} />
+          </Routes>
+        </BrowserRouter>
+      </GlobalProvider>
+    </>
+  );
+}
+
+export default App;
diff --git a/website/src/assets/styles/tailwind.css b/website/src/assets/styles/tailwind.css
@@ -5,7 +5,7 @@ Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
 
-    http://www.apache.org/licenses/LICENSE-2.0
+http://www.apache.org/licenses/LICENSE-2.0
 
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
@@ -18,6 +18,79 @@ limitations under the License.
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 10%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+
+    --primary: 29 98% 46%;
+    --primary-foreground: 0 0% 98%;
+
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+
+    --front: 0 0% 10%;
+    --back: 0 0% 100%;
+
+    --radius: 0.5rem;
+    --theme: 48 100% 50%;
+  }
+
+  .dark {
+    --background: 0 0% 0%;
+    --foreground: 0 0% 100%;
+
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+
+    --primary: 29 98% 46%;
+    --primary-foreground: 0 0% 9%;
+
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+
+    --front: 0 0% 100%;
+    --back: 0 0% 10%;
+
+    --theme: 48 100% 50%;
+  }
+}
+
 @layer base {
   /* setting default background, text color and font */
   html {
@@ -28,30 +101,6 @@ limitations under the License.
   body {
     @apply m-0 p-0;
   }
-
-  :root {
-    @apply duration-700;
-  }
-
-  /* Declaring Themes */
-  :root {
-    --color-primary: 231 112 2;
-    --color-secondary: ;
-    --color-accent: 255 205 2;
-    --color-foreground: 26 26 26;
-    --color-background: 255 255 255;
-    --color-front: 26 26 26;
-    --color-back: 255 255 255;
-  }
-  :root[data-theme="dark"] {
-    --color-primary: 231 112 2;
-    --color-secondary: ;
-    --color-accent: 255 205 2;
-    --color-foreground: 255 255 255;
-    --color-background: 0 0 0;
-    --color-front: 255 255 255;
-    --color-back: 26 26 26;
-  }
 }
 
 @layer utilities {

diff --git a/website/src/common/DisplayList.jsx → website/src/common/DisplayList.tsx b/website/src/common/DisplayList.jsx → website/src/common/DisplayList.tsx
@@ -23,7 +23,10 @@ export default function DisplayList(props) {
       <thead>
         <tr>
           {Object.keys(data[0]).map((item, key) => (
-            <th className="border-b font-semibold py-2 border-front" key={key}>
+            <th
+              className="border-b min-w-[150px] text-left font-semibold py-2 border-front"
+              key={key}
+            >
               {item}
             </th>
           ))}
@@ -32,12 +35,9 @@ export default function DisplayList(props) {
       <tbody>
         {data.map((val, key) => {
           return (
-            <tr
-              key={key}
-              className="hover:bg-foreground hover:bg-opacity-10 cursor-default"
-            >
+            <tr key={key} className="hover:bg-accent cursor-default">
               {Object.keys(val).map((item, key) => (
-                <td className="border-b py-3 text-center" key={key}>
+                <td className="border-b py-3 text-left" key={key}>
                   {val[item]}
                 </td>
               ))}

diff --git a/website/src/common/Dropdown.jsx → website/src/common/Dropdown.tsx b/website/src/common/Dropdown.jsx → website/src/common/Dropdown.tsx
diff --git a/website/src/common/Footer.jsx → website/src/common/Footer.tsx b/website/src/common/Footer.jsx → website/src/common/Footer.tsx
@@ -60,7 +60,7 @@ const Footer = () => {
   ];
 
   return (
-    <footer className="p-page relative mt-10 py-20 text-back">
+    <footer className="p-page relative mt-10 py-20 text-black">
       <div className="absolute bottom-6 left-6 right-6 top-6 -z-1 rounded-lg bg-primary" />
       <div className="flex flex-col gap-5 md:flex-row justify-center md:justify-between text-sm font-light tracking-tight">
         <div
@@ -109,7 +109,7 @@ const Footer = () => {
           ))}
         </div>
       </div>
-      <div className="my-2 w-full border border-back"></div>
+      <div className="my-2 w-full border border-black"></div>
       <div className="mt-4 text-center md:text-left text-xs">
         @vitessio/arewefastyet
       </div>

diff --git a/website/src/common/Macrobench.jsx → website/src/common/Macrobench.tsx b/website/src/common/Macrobench.jsx → website/src/common/Macrobench.tsx
@@ -135,18 +135,23 @@ export default function Macrobench({ data, gitRef, commits }) {
 
           <Row
             title="Total CPU / query"
-            left={secondToMicrosecond(data.diff.Left.Metrics.TotalComponentsCPUTime)}
-            right={secondToMicrosecond(data.diff.Right.Metrics.TotalComponentsCPUTime)}
-            diffMetric={fixed(
-                data.diff.DiffMetrics.TotalComponentsCPUTime,
-                2
+            left={secondToMicrosecond(
+              data.diff.Left.Metrics.TotalComponentsCPUTime
+            )}
+            right={secondToMicrosecond(
+              data.diff.Right.Metrics.TotalComponentsCPUTime
             )}
+            diffMetric={fixed(data.diff.DiffMetrics.TotalComponentsCPUTime, 2)}
           />
 
           <Row
             title="CPU / query (vtgate)"
-            left={secondToMicrosecond(data.diff.Left.Metrics.ComponentsCPUTime.vtgate)}
-            right={secondToMicrosecond(data.diff.Right.Metrics.ComponentsCPUTime.vtgate)}
+            left={secondToMicrosecond(
+              data.diff.Left.Metrics.ComponentsCPUTime.vtgate
+            )}
+            right={secondToMicrosecond(
+              data.diff.Right.Metrics.ComponentsCPUTime.vtgate
+            )}
             diffMetric={fixed(
               data.diff.DiffMetrics.ComponentsCPUTime.vtgate,
               2
@@ -155,8 +160,12 @@ export default function Macrobench({ data, gitRef, commits }) {
 
           <Row
             title="CPU / query (vttablet)"
-            left={secondToMicrosecond(data.diff.Left.Metrics.ComponentsCPUTime.vttablet)}
-            right={secondToMicrosecond(data.diff.Right.Metrics.ComponentsCPUTime.vttablet)}
+            left={secondToMicrosecond(
+              data.diff.Left.Metrics.ComponentsCPUTime.vttablet
+            )}
+            right={secondToMicrosecond(
+              data.diff.Right.Metrics.ComponentsCPUTime.vttablet
+            )}
             diffMetric={fixed(
               data.diff.DiffMetrics.ComponentsCPUTime.vttablet,
               2
@@ -212,7 +221,7 @@ export default function Macrobench({ data, gitRef, commits }) {
 
 function Row({ title, left, right, diffMetric }) {
   return (
-    <tr className="border-t border-front border-opacity-70 duration-150 hover:bg-foreground hover:bg-opacity-20">
+    <tr className="border-t border-front border-opacity-70 duration-150 hover:bg-accent">
       <td className="flex pt-4 pb-2 px-4 justify-end border-r border-r-primary font-semibold text-end">
         <span>{title}</span>
       </td>

diff --git a/website/src/common/Modal.jsx → website/src/common/Modal.tsx b/website/src/common/Modal.jsx → website/src/common/Modal.tsx