add some example ui components using shadcn/ui

.github/workflows/deploy-nestjs.yml

@@ -0,0 +1,38 @@
+name: 🌥️ CI
+
+on:
+  workflow_dispatch:
+
+jobs:
+  deploy-nestjs:
+    name: 🐯 Deploy NestJS App
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: 🛎️ Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/[email protected]
+        with:
+          version: 8
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: pnpm
+
+      - name: 📥 Install Dependencies
+        run: pnpm install
+
+      - name: 🏗️ Build
+        run: pnpm build
+
+      - name: 🎈 Setup Fly
+        uses: superfly/flyctl-actions/[email protected]
+
+      - name: 🚀 Deploy
+        run: flyctl deploy --config ./apps/nestjs/fly.toml --dockerfile ./apps/nestjs/Dockerfile --remote-only --build-arg COMMIT_SHA=${{ github.sha }}
+        env:
+          FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}

.github/workflows/deploy-remix.yml

@@ -0,0 +1,38 @@
+name: 🌥️ CI
+
+on:
+  workflow_dispatch:
+
+jobs:
+  deploy-remix:
+    name: 💿 Deploy Remix App
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: 🛎️ Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/[email protected]
+        with:
+          version: 8
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: pnpm
+
+      - name: 📥 Install Dependencies
+        run: pnpm install
+
+      - name: 🏗️ Build
+        run: pnpm build
+
+      - name: 🎈 Setup Fly
+        uses: superfly/flyctl-actions/[email protected]
+
+      - name: 🚀 Deploy
+        run: flyctl deploy --config ./apps/remix/fly.toml --dockerfile ./apps/remix/Dockerfile --remote-only --build-arg COMMIT_SHA=${{ github.sha }}
+        env:
+          FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}

README.md

@@ -1,4 +1,4 @@
-# Pnpm Monorepo
+# Pnpm + Turbo Monorepo
 
 ## TODO
 
@@ -20,20 +20,21 @@
 - [x] set unified path aliases for all apps and shared libs (done for `apps/`, because `libs/` probably don't need them anyway)
 - [x] add unused imports plugin to eslint
 - [x] research if it's worth using `turbo` - probably yes, to make it easier to run tasks that depend on each other
-- [ ] use turbo repo and ensure the following works
-  - [x] lint, test, build, develop
-  - [ ] gh actions
-  - [ ] deployment
+- [x] use turbo repo and ensure the following works: lint, test, build, develop, gh actions
+- [ ] use turbo prune options to build docker images
+- [x] add some examples for ui lib (use tailwindcss + shadcn/ui)
 - [ ] create diagram
 - [ ] setup renovate
 
-## Deployments
+## Links
 
-| App              | URL                                                       |
-| ---------------- | --------------------------------------------------------- |
-| NestJS           | https://pnpm-monorepo-nestjs.fly.dev/                     |
-| Remix            | https://pnpm-monorepo-remix.fly.dev/                      |
-| Docs (Storybook) | https://6562c63f0bbf6184dd3b3f1e-aulbjawzef.chromatic.com |
+| App              | URL                                                             |
+| ---------------- | --------------------------------------------------------------- |
+| NestJS           | https://pnpm-monorepo-nestjs.fly.dev/                           |
+| Remix            | https://pnpm-monorepo-remix.fly.dev/                            |
+| Docs (Storybook) | https://6562c63f0bbf6184dd3b3f1e-aulbjawzef.chromatic.com       |
+| MongoDB Project  | https://cloud.mongodb.com/v2/65616305afb5120f9b3a3536#/overview |
+| Fly.io Dashboard | https://fly.io/apps/                                            |
 
 ## Getting started
 
@@ -50,6 +51,8 @@ pnpm install
 
 ### Database
 
+If you want to use NestJS app, run MongoDB first.
+
 ```sh
 docker compose up mongo
 ```
@@ -62,19 +65,30 @@ pnpm develop:nestjs
 
 ### Run Remix app
 
+Runs Remix app and all its build dependencies, e.g. `ui` lib. Whenever you make changes to `ui` lib, it will be automatically rebuilt and Remix app will be reloaded.
+
 ```sh
 pnpm develop:remix
 ```
 
+### Run Docs (Storybook)
+
+```sh
+pnpm develop:docs
+```
+
 ## References
 
 - https://pnpm.io/next/filtering
 - https://github.com/remix-run/indie-stack/tree/main - remix app example
 - https://github.com/sveltejs/kit/tree/master - svelte kit - pnpm monorepo
 - https://github.com/nestjs/nest/tree/master/sample - nestjs samples
+- https://docs.nestjs.com/cli/overview
 - https://fly.io/docs/reference/configuration/#the-processes-section - fly.io config
 - https://github.com/vercel/turbo/tree/main/examples - turbo repo examples
 - https://github.com/storybookjs/storybook
 - https://storybook.js.org/tutorials/design-systems-for-developers/react/en/architecture/
 - https://turbo.build/repo/docs/getting-started/existing-monorepo
 - https://github.com/vercel/style-guide/tree/canary
+- https://ui.shadcn.com/docs
+- https://tailwindcss.com/docs/installation

apps/docs/stories/button.stories.tsx

@@ -15,26 +15,40 @@ export default meta
 
 type Story = StoryObj<typeof Button>
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/react/api/csf
- * to learn how to use render functions.
- */
 export const Primary: Story = {
-  render: props => (
-    <Button
-      {...props}
-      onClick={(): void => {
-        // eslint-disable-next-line no-alert -- alert for demo
-        alert('Hello from Turborepo!')
-      }}
-    >
-      Hello
-    </Button>
-  ),
-  name: 'Button',
+  render: props => <Button {...props}>Primary Button</Button>,
   args: {
-    children: 'Hello',
     type: 'button',
   },
 }
+
+export const Secondary: Story = {
+  render: props => <Button {...props}>Secondary Button</Button>,
+  args: {
+    type: 'button',
+    variant: 'secondary',
+  },
+}
+
+export const Destructive: Story = {
+  render: props => <Button {...props}>Destructive Button</Button>,
+  args: {
+    type: 'button',
+    variant: 'destructive',
+  },
+}
+export const Outline: Story = {
+  render: props => <Button {...props}>Outline Button</Button>,
+  args: {
+    type: 'button',
+    variant: 'outline',
+  },
+}
+
+export const Ghost: Story = {
+  render: props => <Button {...props}>Ghost Button</Button>,
+  args: {
+    type: 'button',
+    variant: 'ghost',
+  },
+}

apps/docs/stories/card.stories.tsx

@@ -1,20 +1,28 @@
 import { Card } from '@repo/ui'
 import type { Meta, StoryObj } from '@storybook/react'
 
-const meta: Meta<typeof Card> = {
-  component: Card,
+const meta: Meta<typeof Card.Root> = {
+  component: Card.Root,
 }
 
 export default meta
 
 type Story = StoryObj<typeof Card>
 
 export const Primary: Story = {
-  render: props => <Card {...props}>Hello</Card>,
-  name: 'Card',
-  args: {
-    children: 'Some card content!',
-    title: 'Card Title',
-    href: '#some-link',
-  },
+  name: 'card',
+  render: () => (
+    <Card.Root>
+      <Card.Header>
+        <Card.Title>Card Title</Card.Title>
+        <Card.Description>Card Description</Card.Description>
+      </Card.Header>
+      <Card.Content>
+        <p>Card Content</p>
+      </Card.Content>
+      <Card.Footer>
+        <p>Card Footer</p>
+      </Card.Footer>
+    </Card.Root>
+  ),
 }

apps/remix/app/root.tsx

@@ -12,6 +12,8 @@ import uiStyles from '@repo/ui/styles.css'
 
 import tailwindStyles from '~/styles/tailwind.css'
 
+console.log(uiStyles)
+
 export const links: LinksFunction = () => [
   { rel: 'stylesheet', href: tailwindStyles },
   { rel: 'stylesheet', href: uiStyles },
@@ -27,7 +29,7 @@ export default function App() {
         <Meta />
         <Links />
       </head>
-      <body className="text-primary bg-primary">
+      <body className="text-foreground bg-background">
         <Outlet />
         <ScrollRestoration />
         <Scripts />

apps/remix/app/routes/_index.tsx

@@ -1,6 +1,6 @@
 import { json, type MetaFunction } from '@remix-run/node'
 import { useLoaderData } from '@remix-run/react'
-import { Button, Card } from '@repo/ui'
+import { Table, Button, Card, H1, H2, Paragraph } from '@repo/ui'
 
 import { catsApi } from '~/api/cats.api'
 
@@ -25,17 +25,56 @@ export default function Index() {
   const { cats } = useLoaderData<typeof loader>()
 
   return (
-    <div className="m-4">
-      <h1 className="text-primary text-4xl font-medium">PNPM MONOREPO</h1>
-      <hr />
-      <h2>Cats fetched from NestJS</h2>
-      <pre>{JSON.stringify(cats, null, 2)}</pre>
+    <div className="mx-auto mt-12 max-w-prose">
+      <H1>PNPM + TURBO MONOREPO</H1>
+      <Paragraph>
+        This is a Remix app that uses UI components from `@repo/ui` and fetches
+        some data from NestJS API.
+      </Paragraph>
 
-      <Card href="#components" title="Card component">
-        Imported from internal @repo/ui package
-      </Card>
+      <Card.Root className="my-8">
+        <Card.Header>
+          <Card.Title>Card Title</Card.Title>
+          <Card.Description>Card Description</Card.Description>
+        </Card.Header>
+        <Card.Content>
+          This is an example Card component bootstrapped using `shadcn/ui`
+          package.
+        </Card.Content>
+        <Card.Footer />
+      </Card.Root>
 
-      <Button>Button: Imported from internal @repo/ui package</Button>
+      <div className="my-8 flex gap-2">
+        <Button>Button: Primary</Button>
+        <Button variant="secondary">Button: Secondary</Button>
+        <Button variant="outline">Button: Outline</Button>
+        <Button variant="destructive">Button: Destructive</Button>
+      </div>
+
+      <H2>Cats fetched from NestJS</H2>
+      <Paragraph>
+        Below should be a list of cats fetched from NestJS API. If nothing is
+        showing app, check if NestJS app is running.
+      </Paragraph>
+
+      <Table.Root className="my-4">
+        <Table.Header>
+          <Table.Row>
+            <Table.Head>Name</Table.Head>
+            <Table.Head>Breed</Table.Head>
+            <Table.Head>Age</Table.Head>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          {cats.map(cat => (
+            <Table.Row key={cat._id}>
+              <Table.Cell>{cat.name}</Table.Cell>
+              <Table.Cell>{cat.breed}</Table.Cell>
+              <Table.Cell>{cat.age}</Table.Cell>
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table.Root>
     </div>
   )
 }

apps/remix/app/styles/tailwind.css

@@ -1,46 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-/* Based on Kent's repo: https://github.com/kentcdodds/kentcdodds.com/tree/main */
-@layer utilities {
-  .bg-primary {
-    @apply bg-white dark:bg-gray-900;
-  }
-
-  .bg-secondary {
-    @apply bg-gray-100 dark:bg-gray-800;
-  }
-
-  .bg-alt {
-    @apply bg-gray-200 dark:bg-gray-700;
-  }
-
-  .bg-inverse {
-    @apply bg-black dark:bg-white;
-  }
-
-  .border-primary {
-    @apply border-gray-900 dark:border-white;
-  }
-
-  .border-secondary {
-    @apply border-gray-200 dark:border-gray-600;
-  }
-
-  .text-primary {
-    @apply text-black dark:text-white;
-  }
-
-  .text-secondary {
-    @apply text-gray-500 dark:text-slate-500;
-  }
-
-  .text-inverse {
-    @apply text-white dark:text-black;
-  }
-
-  .text-prose {
-    @apply prose dark:prose-invert;
-  }
-}