feat: new task dialog (#17)

CONTRIBUTING.md

@@ -50,18 +50,12 @@ The `pnpm dev:` scripts are used to start the development process for a workspac
 
 #### Examples
 
-1. To run the Swolo website:
+To run the Swolo website:
 
 ```bash
 pnpm dev:web
 ```
 
-2. To run the documentation:
-
-```bash
-pnpm dev:docs
-```
-
 ### Managing dependencies
 
 When adding dependencies, follow Turbo's [Best practices for dependency installation](https://turbo.build/repo/docs/crafting-your-repository/managing-dependencies#best-practices-for-dependency-installation):

apps/web/app/globals.css

@@ -2,42 +2,103 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@media (prefers-color-scheme: dark) {
+@layer base {
   :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 72.22% 50.59%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5% 64.9%;
+    --radius: 0.5rem;
+
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
   }
-}
 
-/* html,
-body {
-  max-width: 100vw;
-  overflow-x: hidden;
-}
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 85.7% 97.3%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
 
-body {
-  color: var(--foreground);
-  background: var(--background);
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
 }
 
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
+@layer base {
+  * {
+    @apply border-border;
+  }
+  html {
+    @apply scroll-smooth;
+  }
+  body {
+    @apply bg-background text-foreground;
+    /* font-feature-settings: "rlig" 1, "calt" 1; */
+    font-synthesis-weight: none;
+    text-rendering: optimizeLegibility;
+  }
 }
 
-a {
-  color: inherit;
-  text-decoration: none;
+@layer utilities {
+  .step {
+    counter-increment: step;
+  }
+
+  .step:before {
+    @apply absolute w-9 h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 border-background;
+    @apply ml-[-50px] mt-[-4px];
+    content: counter(step);
+  }
+
+  .chunk-container {
+    @apply shadow-none;
+  }
+
+  .chunk-container::after {
+    content: "";
+    @apply absolute -inset-4 shadow-xl rounded-xl border;
+  }
 }
 
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
+@media (max-width: 640px) {
+  .container {
+    @apply px-4;
   }
-} */
+}

apps/web/app/layout.tsx

@@ -8,7 +8,9 @@ import { Shell } from "@repo/ui/shell/shell";
 import { ActionBar } from "@repo/ui/shell/action-bar";
 // import { HeaderBar } from "@repo/ui/shell/header-bar";
 import { Main } from "@repo/ui/shell/main";
+import {NewTaskDialog} from "@repo/ui/new-task-dialog";
 import { Toolbar } from "@repo/ui/toolbar";
+import { useState } from "react";
 
 const geistSans = localFont({
   src: "./_fonts/GeistVF.woff",
@@ -25,12 +27,13 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   const router = useRouter();
+
   return (
     <html lang="en">
       <body className={`${geistSans.variable} ${geistMono.variable}`}>
         <Shell>
           {/* <HeaderBar>Header</HeaderBar> */}
-          <Toolbar/>
+          <Toolbar />
           <ActionBar onNavigate={(path) => router.push(path)}></ActionBar>
           <Main>{children}</Main>
         </Shell>

apps/web/package.json

@@ -29,6 +29,7 @@
     "eslint-config-next": "14.2.6",
     "postcss": "^8.4.47",
     "tailwindcss": "^3.4.1",
+    "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.6.2",
     "typescript-plugin-css-modules": "^5.1.0"
   }

packages/tailwind-config/package.json

@@ -8,6 +8,7 @@
   "devDependencies": {
     "@repo/typescript-config": "workspace:*",
     "@types/node": "^22.7.5",
-    "tailwindcss": "^3.4.1"
+    "tailwindcss": "^3.4.1",
+    "tailwindcss-animate": "^1.0.7"
   }
 }

packages/tailwind-config/tailwind.config.ts

@@ -1,27 +1,80 @@
 import type { Config } from "tailwindcss";
 
 const config: Omit<Config, "content"> = {
+  darkMode: ["class"],
+  content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
   theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
     extend: {
       colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
         primary: {
-          DEFAULT: "#c094f6",
-          dark: "#522281",
-          50: "#faf6fe",
-          100: "#f2e9fe",
-          200: "#e7d7fd",
-          300: "#d5b8fa",
-          400: "#c094f6",
-          500: "#a15eee",
-          600: "#8a3de0",
-          700: "#752cc4",
-          800: "#6429a0",
-          900: "#522281",
-          950: "#360c5f",
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
+          foreground: "hsl(var(--destructive-foreground) / <alpha-value>)",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
         },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        xl: "calc(var(--radius) + 4px)",
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+        "caret-blink": {
+          "0%,70%,100%": { opacity: "1" },
+          "20%,50%": { opacity: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+        "caret-blink": "caret-blink 1.25s ease-out infinite",
       },
     },
   },
+  plugins: [require("tailwindcss-animate")],
 };
 
 export default config;

packages/ui/package.json

@@ -9,7 +9,11 @@
     "./shell/header-bar": "./src/shell/header-bar.tsx",
     "./shell/main": "./src/shell/main.tsx",
     "./button": "./src/button.tsx",
+    "./dialog": "./src/dialog.tsx",
     "./input": "./src/input.tsx",
+    "./label": "./src/label.tsx",
+    "./new-task-dialog": "./src/new-task-dialog.tsx",
+    "./select": "./src/select.tsx",
     "./toolbar": "./src/toolbar.tsx",
     "./lib/utils": "./src/lib/utils.ts"
   },
@@ -33,16 +37,20 @@
     "eslint": "^8.57.0",
     "postcss": "^8.4.47",
     "tailwindcss": "^3.4.1",
+    "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.6.2",
     "typescript-plugin-css-modules": "^5.1.0"
   },
   "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.2",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-slot": "^1.1.0",
     "@repo/core": "workspace:*",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lucide-react": "^0.451.0",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "tailwind-merge": "^2.5.3"
   }
 }