feat: Replace material UI with tailwind (and shadcn) (#199)

hms-dbmi · Jul 25, 2024 · 6210b83 · 6210b83
1 parent 55845ff
commit 6210b83
Show file tree

Hide file tree

Showing 36 changed files with 2,204 additions and 1,340 deletions.
diff --git a/components.json b/components.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}
diff --git a/index.html b/index.html
@@ -10,15 +10,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="description" content="A minimal, purely client-side program for viewing Zarr-based images." />
     <title>vizarr</title>
+  <style>
+    /* #deckgl-overlay { border: 1px solid red; } */
+  </style>
   </head>
-  <body>
+  <body class="bg-black overflow-hidden 100-vh 100-wh">
     <div id="root"></div>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <script type="module" src="/main.ts"></script>
-    <style>
-      html {
-        background-color: black;
-      }
-    </style>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -12,11 +12,19 @@
   },
   "dependencies": {
     "@hms-dbmi/viv": "^0.16.0",
-    "@material-ui/core": "^4.11.0",
-    "@material-ui/icons": "^4.9.1",
-    "@material-ui/styles": "^4.11.5",
+    "@hms-dbmi/vizarr": "link:",
+    "@radix-ui/react-accordion": "^1.2.0",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-select": "^2.1.1",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slider": "^1.2.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@tailwindcss/vite": "4.0.0-alpha.17",
     "@vivjs/types": "^0.16.1",
-    "@zarrita/storage": "^0.0.2",
+    "@zarrita/storage": "0.1.0-next.5",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
     "deck.gl": "^8.9.34",
     "jotai": "^1.0.0",
     "just-debounce-it": "^3.1.1",
@@ -25,6 +33,9 @@
     "quick-lru": "^7.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "tailwind-merge": "^2.4.0",
+    "tailwindcss": "4.0.0-alpha.17",
+    "tailwindcss-animate": "^1.0.7",
     "zarrita": "^0.4.0-next.14"
   },
   "devDependencies": {