Replace dasiyui with shadcn/ui

.dockerignore

@@ -1,4 +1,3 @@
-/postgres-data
 /node_modules
 /public/build
 .git

.eslintrc.cjs

@@ -79,5 +79,14 @@ module.exports = {
         node: true,
       },
     },
+
+    // Shadcn-ui
+    {
+      files: ["**/components/ui/*.tsx"],
+      rules: {
+        "react/prop-types": "off",
+        "jsx-a11y/heading-has-content": "off",
+      },
+    },
   ],
 };

.gitignore

@@ -18,5 +18,3 @@ node_modules
 /public_key.pem
 
 Caddyfile
-
-postgres-data

.prettierignore

@@ -6,7 +6,6 @@ node_modules
 
 /cypress/screenshots
 /cypress/videos
-/postgres-data
 
 /app/styles/tailwind.css
 /coverage

README.md

@@ -63,9 +63,9 @@ You need to have a PostgreSQL database running. The easiest way is to use Docker
 npm run docker:dev
 ```
 
-(Stores data in `./postgres-data`)
+(Stores data in a Docker volume)
 (You can get a psql shell with `npm run psql:dev`)
-(On CTRL-C the database is stopped. To remove container use `docker system prune`)
+(On CTRL-C the database is stopped. To remove container and volume use `npm run docker:devrm`)
 
 The database can be initialized with
 

app/admin/UserTableRow.tsx

@@ -1,5 +1,8 @@
 import type { User } from "~/models/user.server";
 import type { ExpertiseLevel } from "@prisma/client";
+import { TableCell, TableRow } from "~/components/ui/table";
+import { Checkbox } from "~/components/ui/checkbox";
+import { Label } from "~/components/ui/label";
 
 interface IProps {
   user: User;
@@ -16,13 +19,11 @@ export const UserTableRow = ({
 }: IProps) => {
   const usersExpertiseLevels = user.expertiseLevels;
   return (
-    <tr>
-      <td>{user.email}</td>
-      <td>
-        <input
-          type="checkbox"
+    <TableRow>
+      <TableCell>{user.email}</TableCell>
+      <TableCell>
+        <Checkbox
           checked={user.isAdmin}
-          className="checkbox"
           disabled={submitting}
           onChange={() => {
             if (window.confirm("Are you sure?") === false) {
@@ -33,38 +34,37 @@ export const UserTableRow = ({
             onUpdate(data);
           }}
         />
-      </td>
-      <td>
-        <ul className="flex">
+      </TableCell>
+      <TableCell>
+        <ul className="flex space-x-4">
           {expertiseLevels.map((expertiseLevel) => {
             return (
               <li key={expertiseLevel}>
-                <div className="form-control">
-                  <label className="label cursor-pointer">
-                    <span className="label-text">{expertiseLevel}</span>
-                    <input
-                      type="checkbox"
-                      checked={usersExpertiseLevels.includes(expertiseLevel)}
-                      className="checkbox ml-2"
-                      disabled={submitting}
-                      onChange={() => {
-                        const data = new FormData();
-                        data.set(
-                          expertiseLevel,
-                          usersExpertiseLevels.includes(expertiseLevel)
-                            ? "false"
-                            : "true"
-                        );
-                        onUpdate(data);
-                      }}
-                    />
-                  </label>
+                <div className="flex items-center space-x-1">
+                  <Checkbox
+                    checked={usersExpertiseLevels.includes(expertiseLevel)}
+                    disabled={submitting}
+                    id={`${user.id}-${expertiseLevel}`}
+                    onCheckedChange={() => {
+                      const data = new FormData();
+                      data.set(
+                        expertiseLevel,
+                        usersExpertiseLevels.includes(expertiseLevel)
+                          ? "false"
+                          : "true"
+                      );
+                      onUpdate(data);
+                    }}
+                  />
+                  <Label htmlFor={`${user.id}-${expertiseLevel}`}>
+                    {expertiseLevel}
+                  </Label>
                 </div>
               </li>
             );
           })}
         </ul>
-      </td>
-    </tr>
+      </TableCell>
+    </TableRow>
   );
 };

app/browse/OutputReport.tsx

@@ -76,6 +76,7 @@ export const OutputReport = ({
                   <Link
                     title="Recluster"
                     to={`/jobs/${jobid}/analysis/contactmap/${module.id}`}
+                    className="dark:invert"
                   >
                     &#128202;
                   </Link>
@@ -87,6 +88,7 @@ export const OutputReport = ({
                       target="_blank"
                       rel="noreferrer"
                       href={`/jobs/${jobid}/files/${module.report.path}`}
+                      className="dark:invert"
                     >
                       &#128202;
                     </a>

app/builder/DownloadButton.tsx

@@ -1,11 +1,12 @@
 import { useWorkflow } from "@i-vresse/wb-core/dist/store";
+import { Button } from "~/components/ui/button";
 
 export const WorkflowDownloadButton = (): JSX.Element => {
   const { save } = useWorkflow();
 
   return (
-    <button className="btn-light btn" onClick={save}>
+    <Button variant="secondary" onClick={save}>
       Download archive
-    </button>
+    </Button>
   );
 };

app/builder/Form.client.tsx

@@ -35,7 +35,7 @@ const App = () => {
   }, [archive, activetCatalog]); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
-    <div>
+    <div className="workflow-builder-app">
       <div className="page grid h-full w-full gap-2 p-4">
         <div>
           <CatalogPanel></CatalogPanel>
@@ -51,7 +51,7 @@ const App = () => {
       </div>
       <div className="page sticky inset-x-0 bottom-0 grid h-14">
         <div></div>
-        <div role="group" className="btn-group">
+        <div role="group" className="flex flex-row">
           <WorkflowSubmitButton submitAllowed={submitAllowed} />
           <WorkflowDownloadButton />
         </div>