feat: shadnui (#65)

.github/workflows/prisma_migrate.yaml

@@ -14,16 +14,12 @@ jobs:
   build:
     runs-on: ubuntu-latest
 
-    strategy:
-      matrix:
-        node-version: [18.x]
-
     steps:
       - uses: actions/checkout@v4
-      - name: Use Node.js ${{ matrix.node-version }}
+      - name: Use Node.js 20.x
         uses: actions/setup-node@v4
         with:
-          node-version: ${{ matrix.node-version }}
+          node-version: 20.x
 
       - name: Set DATABASE_URL .env-variables
         run: |

.github/workflows/pull_request.yaml

@@ -21,14 +21,33 @@ jobs:
         with:
           node-version: 20.x
 
+      - uses: pnpm/action-setup@v3
+        name: Install pnpm
+        with:
+          version: 9
+          run_install: false
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v4
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
       - name: Install dependencies
-        run: yarn
+        run: pnpm i
 
       - name: Lint
-        run: yarn lint
+        run: pnpm run lint
 
       - name: Typecheck
-        run: yarn typecheck
+        run: pnpm run typecheck
 
       - name: Build
-        run: yarn build
+        run: pnpm run build

web/.gitignore

@@ -10,4 +10,6 @@ node_modules
 /api/index.js
 /api/index.js.map
 
-*.log
+*.log
+
+.DS_Store

web/.prettierrc.json

@@ -8,5 +8,6 @@
   "singleQuote": true,
   "tabWidth": 2,
   "trailingComma": "all",
-  "endOfLine": "auto"
+  "endOfLine": "auto",
+  "plugins": ["prettier-plugin-tailwindcss"]
 }

web/README.md

@@ -1,6 +1,6 @@
 # Stats
 
-**Tech-stack:** [Remix](https://remix.run/), [Prisma](https://www.prisma.io/), [MUI Joy UI](https://mui.com/joy-ui/getting-started/overview/), [Nivo](https://nivo.rocks/)
+**Tech-stack:** [Remix](https://remix.run/), [Prisma](https://www.prisma.io/), [Tailwind](https://tailwindcss.com/), [Radix](https://www.radix-ui.com/), [Nivo](https://nivo.rocks/)
 
 ## Development
 

web/app/components/ErrorBoundary.tsx

@@ -1,21 +1,30 @@
-import styled from '@emotion/styled';
 import { isRouteErrorResponse, useRouteError } from '@remix-run/react';
-
-const Container = styled('div')`
-  background-color: #ff0000;
-  padding: 1rem;
-`;
+import { Typography } from './typography';
+import { Card } from './ui/card';
 
 export const ErrorBoundary = () => {
   const error = useRouteError();
 
-  return isRouteErrorResponse(error) ? (
-    <Container>
-      <h1>{`${error.status} - ${error.data}`}</h1>
-    </Container>
-  ) : (
-    <Container>
-      <p>[ErrorBoundary]: There was an error: {(error as Error).message}</p>
-    </Container>
+  return (
+    <Card className='bg-red-500'>
+      <Typography variant='h3'>Something went wrong</Typography>
+      {isRouteErrorResponse(error) ? (
+        <Typography>{`${error.status} - ${error.data}`}</Typography>
+      ) : error instanceof Error ? (
+        <>
+          <Typography>{`${error.name}: ${error.message}`}</Typography>
+          {process.env.NODE_ENV !== 'production' && (
+            <Card>
+              <Typography variant='small'>Stack:</Typography>
+              <Typography variant='small' className='mt-2 whitespace-break-spaces font-mono'>
+                {error.stack}
+              </Typography>
+            </Card>
+          )}
+        </>
+      ) : (
+        <Typography>Unknown error</Typography>
+      )}
+    </Card>
   );
 };

web/app/components/LinkTabs.tsx

@@ -1,7 +1,6 @@
-import type { TabsProps } from '@mui/joy';
-import { Tab, TabList, Tabs } from '@mui/joy';
 import { Link, useLocation } from '@remix-run/react';
 import { useState } from 'react';
+import { Tabs, TabsList, TabsProps, TabsTrigger } from './ui/tabs';
 
 export type LinkTabsProps = Omit<TabsProps, 'defaultValue'> & {
   tabs: {
@@ -16,18 +15,15 @@ export const LinkTabs = ({ tabs, baseLocation, ...props }: LinkTabsProps) => {
   const [defaultLocation] = useState(location.pathname);
   return (
     <Tabs defaultValue={defaultLocation} {...props}>
-      <TabList>
+      <TabsList className='grid w-full auto-cols-fr grid-flow-col'>
         {tabs.map((tab) => (
-          <Tab
-            component={Link}
-            key={tab.label}
-            to={`${baseLocation}${tab.url ? `/${tab.url}` : ''}`}
-            unstable_viewTransition
-            value={`${baseLocation}${tab.url ? `/${tab.url}` : ''}`}>
-            {tab.label}
-          </Tab>
+          <TabsTrigger asChild key={tab.label} value={`${baseLocation}${tab.url ? `/${tab.url}` : ''}`}>
+            <Link to={`${baseLocation}${tab.url ? `/${tab.url}` : ''}`} unstable_viewTransition>
+              {tab.label}
+            </Link>
+          </TabsTrigger>
         ))}
-      </TabList>
+      </TabsList>
     </Tabs>
   );
 };