feat: create dialog form example (#43)

README.md

···
 - [Next.js](https://nextjs.org/)
 - [Tailwind CSS](https://tailwindcss.com/)
 - [shadcn/ui](https://ui.shadcn.com/)
+- [tinybird](http://tinybird.co/)
+- [planetscale](http://planetscale.com/)
+- [drizzle](https://orm.drizzle.team/)
+- [clerk](https://clerk.com/)
 
 ## Getting Started
 
···
 
 5. Open [http://localhost:3000](http://localhost:3000) with your browser to see
    the result.
+
+For [clerk](https://clerk.com), you will need to create a webhook endpoint. To
+access the link via ngrok (free), after login, append `/api/webhook/clerk` to
+the link you get after entering:
+
+```
+$ ngrok http 3000
+```
 
 ## Roadmap
 

apps/web/package.json

···
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-hover-card": "^1.0.6",
+    "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-select": "^1.2.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.4",

apps/web/src/app/app/(dashboard)/[workspaceId]/loading.tsx

···
 import { Container } from "@/components/dashboard/container";
 import { Header } from "@/components/dashboard/header";
+import { Skeleton } from "@/components/ui/skeleton";
 
 export default function Loading() {
   return (
     <div className="grid gap-6 md:grid-cols-2 md:gap-8">
-      <Header.Skeleton />
+      <div className="col-span-full flex w-full justify-between">
+        <Header.Skeleton>
+          <Skeleton className="h-9 w-20" />
+        </Header.Skeleton>
+      </div>
       <Container.Skeleton />
       <Container.Skeleton />
       <Container.Skeleton />

apps/web/src/app/app/(dashboard)/[workspaceId]/page.tsx

···
 
 import { Container } from "@/components/dashboard/container";
 import { Header } from "@/components/dashboard/header";
+import { DialogForm } from "@/components/forms/dialog-form";
+import { Button } from "@/components/ui/button";
 import { wait } from "@/lib/utils";
 
 export default async function DashboardPage() {
   await wait(1000);
   return (
     <div className="grid gap-6 md:grid-cols-2 md:gap-8">
-      <Header title="Dashboard" description="Overview of all your websites" />
+      <div className="col-span-full flex w-full justify-between">
+        <Header title="Dashboard" description="Overview of all your websites">
+          {/* <Button>Create</Button> */}
+          <DialogForm />
+        </Header>
+      </div>
       <Container title="Hello"></Container>
       <Container title="World"></Container>
     </div>

apps/web/src/app/app/(dashboard)/layout.tsx

···
         </Shell>
         <main className="z-10 flex w-full flex-1 flex-col items-start justify-center">
           <Shell className="relative flex-1">
+            {/* The `top-4` is represented in Shell with a `py-4` class */}
             <nav className="absolute right-4 top-4 block md:hidden">
               <AppMenu />
             </nav>

apps/web/src/components/dashboard/header.tsx

···
   description?: string | null;
 }
 
-function Header({ title, description, className }: HeaderProps) {
+/**
+ * use `children` to include a Button e.g.
+ */
+function Header({ title, description, className, children }: HeaderProps) {
   return (
-    <div className={cn("col-span-full grid gap-1", className)}>
-      <h1 className="font-cal text-3xl">{title}</h1>
-      {description ? (
-        <p className="text-muted-foreground">{description}</p>
-      ) : null}
+    <div
+      className={cn(
+        "col-span-full mr-12 flex w-full justify-between md:mr-0",
+        className,
+      )}
+    >
+      <div className="grid w-full gap-1">
+        <h1 className="font-cal text-3xl">{title}</h1>
+        {description ? (
+          <p className="text-muted-foreground">{description}</p>
+        ) : null}
+      </div>
+      {children}
     </div>
   );
 }
 
-function HeaderSkeleton() {
+function HeaderSkeleton({ children }: { children?: React.ReactNode }) {
   return (
-    <div className="col-span-full grid gap-3">
-      <Skeleton className="h-8 w-[200px]" />
-      <Skeleton className="h-4 w-[300px]" />
+    <div className="col-span-full mr-12 flex w-full justify-between md:mr-0">
+      <div className="grid w-full gap-3">
+        <Skeleton className="h-8 w-full max-w-[200px]" />
+        <Skeleton className="h-4 w-full max-w-[300px]" />
+      </div>
+      {children}
     </div>
   );
 }

apps/web/src/components/dashboard/shell.tsx

···
   return (
     <div
       className={cn(
-        "border-border w-full rounded-lg border p-3 backdrop-blur-[2px] md:p-6",
+        "border-border w-full rounded-lg border px-3 py-4 backdrop-blur-[2px] md:p-6",
         className,
       )}
     >

apps/web/src/components/forms/dialog-form.tsx

···
+"use client";
+
+import * as React from "react";
+import { Loader2 } from "lucide-react";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { wait } from "@/lib/utils";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import { Label } from "../ui/label";
+
+// EXAMPLE
+export function DialogForm() {
+  const [saving, setSaving] = React.useState(false);
+  const [open, setOpen] = React.useState(false);
+
+  // either like that or with a user action
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setSaving(true);
+    const data = Object.fromEntries(new FormData(e.currentTarget));
+
+    console.log(data); // { url: "" }
+    await wait(1500);
+    // save data
+
+    setOpen(false);
+    setSaving(false);
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => setOpen(value)}>
+      <DialogTrigger asChild>
+        <Button>Create</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Create Monitor</DialogTitle>
+          <DialogDescription>
+            Type an URL that you want to ping periodically.
+          </DialogDescription>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} id="monitor">
+          <div className="grid w-full items-center gap-1.5">
+            <Label htmlFor="url">Link</Label>
+            <Input
+              id="url"
+              name="url"
+              type="url"
+              placeholder="https://"
+              required
+            />
+          </div>
+        </form>
+        <DialogFooter>
+          <Button type="submit" form="monitor" disabled={saving}>
+            {!saving ? "Confirm" : <Loader2 className="h-4 w-4 animate-spin" />}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/web/src/components/layout/app-menu.tsx

···
 import {
   Sheet,
   SheetContent,
-  SheetDescription,
   SheetHeader,
   SheetTitle,
   SheetTrigger,
 } from "../ui/sheet";
-//  your navigation
 import { AppSidebar } from "./app-sidebar";
 
 export function AppMenu() {
···
       <SheetContent>
         <SheetHeader>
           <SheetTitle className="text-left">Navigation</SheetTitle>
-          <SheetDescription>
-            <AppSidebar /> {/* is here */}
-          </SheetDescription>
+          <AppSidebar />
         </SheetHeader>
       </SheetContent>
     </Sheet>

apps/web/src/components/layout/app-sidebar.tsx

···
 import { cn } from "@/lib/utils";
 import { Icons } from "../icons";
 
-type PageConfig = {
-  title: string;
-  href: string;
-  icon: string;
-  disabled: boolean;
-};
-
 export function AppSidebar() {
   const pathname = usePathname();
   const params = useParams();

apps/web/src/components/ui/label.tsx

···
+// THIS IS **NOT** a shadcn ui component. TBD if we want to keep `import/consistent-type-specifier-style`
+// https://ui.shadcn.com/docs/components/label
+
+"use client";
+
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import type { VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+);
+
+export interface LabelProps
+  extends React.LabelHTMLAttributes<HTMLLabelElement>,
+    VariantProps<typeof labelVariants> {}
+
+const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
+  ({ className, ...props }, ref) => (
+    <label ref={ref} className={cn(labelVariants(), className)} {...props} />
+  ),
+);
+
+Label.displayName = "Label";
+
+export { Label };

pnpm-lock.yaml

···
       '@radix-ui/react-hover-card':
         specifier: ^1.0.6
         version: 1.0.6(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-label':
+        specifier: ^2.0.2
+        version: 2.0.2(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-select':
         specifier: ^1.2.2
         version: 1.2.2(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
···
       '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@types/react': 18.2.12
       react: 18.2.0
+    dev: false
+
+  /@radix-ui/react-label@2.0.2(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-N5ehvlM7qoTLx7nWPodsPYPgMzA5WM8zZChQg8nyFJKnDO5WHdba1vv5/H6IO5LtJMfD2Q3wh1qHFGNtK0w3bQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.5
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@types/react': 18.2.12
+      '@types/react-dom': 18.2.5
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
     dev: false
 
   /@radix-ui/react-menu@2.0.5(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):