feat: new project dialog (#18)

mfaux · Oct 12, 2024 · dc66d22 · dc66d22
1 parent 85f2a5e
commit dc66d22
Show file tree

Hide file tree

Showing 7 changed files with 452 additions and 29 deletions.
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
@@ -8,9 +8,7 @@ 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",

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -12,6 +12,8 @@
     "./dialog": "./src/dialog.tsx",
     "./input": "./src/input.tsx",
     "./label": "./src/label.tsx",
+    "./menubar": "./src/menubar.tsx",
+    "./new-project-dialog": "./src/new-project-dialog.tsx",
     "./new-task-dialog": "./src/new-task-dialog.tsx",
     "./select": "./src/select.tsx",
     "./toolbar": "./src/toolbar.tsx",
@@ -44,6 +46,7 @@
   "dependencies": {
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-menubar": "^1.1.2",
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-slot": "^1.1.0",
     "@repo/core": "workspace:*",

diff --git a/packages/ui/src/menubar.tsx b/packages/ui/src/menubar.tsx
@@ -0,0 +1,233 @@
+"use client"
+
+import * as React from "react"
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@repo/ui/lib/utils"
+
+// Explicitly annotate the types
+const MenubarMenu: typeof MenubarPrimitive.Menu = MenubarPrimitive.Menu;
+const MenubarGroup: typeof MenubarPrimitive.Group = MenubarPrimitive.Group;
+const MenubarPortal: typeof MenubarPrimitive.Portal = MenubarPrimitive.Portal;
+const MenubarSub: typeof MenubarPrimitive.Sub = MenubarPrimitive.Sub;
+const MenubarRadioGroup: typeof MenubarPrimitive.RadioGroup = MenubarPrimitive.RadioGroup;
+
+const Menubar = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
+      className
+    )}
+    {...props}
+  />
+))
+Menubar.displayName = MenubarPrimitive.Root.displayName
+
+const MenubarTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName
+
+const MenubarSubTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <MenubarPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </MenubarPrimitive.SubTrigger>
+))
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
+
+const MenubarSubContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName
+
+const MenubarContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
+>(
+  (
+    { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
+    ref
+  ) => (
+    <MenubarPrimitive.Portal>
+      <MenubarPrimitive.Content
+        ref={ref}
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          className
+        )}
+        {...props}
+      />
+    </MenubarPrimitive.Portal>
+  )
+)
+MenubarContent.displayName = MenubarPrimitive.Content.displayName
+
+const MenubarItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarItem.displayName = MenubarPrimitive.Item.displayName
+
+const MenubarCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <MenubarPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.CheckboxItem>
+))
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName
+
+const MenubarRadioItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <MenubarPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.RadioItem>
+))
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName
+
+const MenubarLabel = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName
+
+const MenubarSeparator = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName
+
+const MenubarShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+MenubarShortcut.displayname = "MenubarShortcut"
+
+export {
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarPortal,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarGroup,
+  MenubarSub,
+  MenubarShortcut,
+}
diff --git a/packages/ui/src/new-project-dialog.tsx b/packages/ui/src/new-project-dialog.tsx
@@ -0,0 +1,47 @@
+'use client'
+
+import { ArrowUp, FolderKanban } from 'lucide-react';
+import { Button } from "@repo/ui/button";
+import { Input } from "@repo/ui/input";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@repo/ui/dialog"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@repo/ui/select"
+
+type NewProjectDialogProps = {
+  onOpenChange: () => void;
+}
+const NewProjectDialog = ({onOpenChange}:NewProjectDialogProps) => {
+  return (
+    <Dialog open onOpenChange={onOpenChange} >
+      <DialogContent className="sm:max-w-[725px]">
+        <DialogHeader>
+          <DialogTitle className='flex flex-row items-center gap-1'>
+            <FolderKanban  />
+            New Project
+          </DialogTitle>
+        </DialogHeader>
+        <div className="pt-1 flex items-center space-x-2 gap-1">
+          <Input autoFocus className="flex-grow"  />
+          <Select>
+            <SelectTrigger className="w-[180px]">
+              <SelectValue placeholder="(No parent)" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">No parent</SelectItem>
+              <SelectItem value="documents">Documents</SelectItem>
+              <SelectItem value="images">Images</SelectItem>
+            </SelectContent>
+          </Select>
+          <Button type="submit"><ArrowUp /></Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export { NewProjectDialog };
diff --git a/packages/ui/src/new-task-dialog.tsx b/packages/ui/src/new-task-dialog.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { Paperclip, Plus, ArrowUp } from 'lucide-react';
+import { ArrowUp, ClipboardCheck } from 'lucide-react';
 import { Button } from "@repo/ui/button";
 import { Input } from "@repo/ui/input";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@repo/ui/dialog"
@@ -13,33 +13,28 @@ import {
 } from "@repo/ui/select"
 
 
-const NewTaskDialog = () => {
+type NewTaskDialogProps = {
+  onOpenChange: () => void;
+}
+
+const NewTaskDialog = ({onOpenChange}:NewTaskDialogProps) => {  
   return (
-    <Dialog>
-      <DialogTrigger asChild>
-        <button
-          className="p-2 bg-white rounded-full shadow-sm hover:bg-gray-50 transition-colors"
-        >
-          <Plus className="h-4 w-4 text-gray-600" />
-        </button>
-      </DialogTrigger>
+    <Dialog open onOpenChange={onOpenChange}>      
       <DialogContent className="sm:max-w-[725px]">
         <DialogHeader>
-          <DialogTitle>New Task</DialogTitle>
+          <DialogTitle className='flex flex-row items-center gap-1'>
+            <ClipboardCheck />
+            New Task
+          </DialogTitle>
         </DialogHeader>
         <div className="pt-1 flex items-center space-x-2 gap-1">
-          <button
-            className="p-2 bg-white rounded-md shadow-sm hover:bg-gray-50 transition-colors"
-          >
-            <Paperclip className="h-4 w-5" />
-          </button>
-          <Input autoFocus className="flex-grow" placeholder='Create a task' />
+          <Input autoFocus className="flex-grow" />
           <Select>
             <SelectTrigger className="w-[180px]">
-              <SelectValue placeholder="All Projects" />
+              <SelectValue placeholder="(No project)" />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="all">All Projects</SelectItem>
+              <SelectItem value="all">(No project)</SelectItem>
               <SelectItem value="documents">Documents</SelectItem>
               <SelectItem value="images">Images</SelectItem>
             </SelectContent>