migrate to nextui alert component

shawnmclean · Dec 25, 2024 · ca69f83 · ca69f83
1 parent f9862e3
commit ca69f83
Show file tree

Hide file tree

Showing 8 changed files with 221 additions and 77 deletions.
diff --git a/apps/sovoli.com/next.config.js b/apps/sovoli.com/next.config.js
@@ -6,6 +6,9 @@ createJiti(fileURLToPath(import.meta.url))("./src/env");
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  experimental: {
+    authInterrupts: true,
+  },
   reactStrictMode: true,
   images: {
     loader: "custom",

diff --git a/apps/sovoli.com/src/app/(dashboard)/new/actions/newNoteAction.ts b/apps/sovoli.com/src/app/(dashboard)/new/actions/newNoteAction.ts
@@ -0,0 +1,37 @@
+"use server";
+
+import { unauthorized } from "next/navigation";
+import { withZod } from "@rvf/zod";
+import { auth } from "@sovoli/auth";
+
+import { formNewNoteSchema } from "./schemas";
+
+export type State = {
+  status: "error";
+  message: string;
+  errors?: Record<string, string>;
+} | null;
+
+const validator = withZod(formNewNoteSchema);
+
+export async function newNoteAction(
+  _prevState: State,
+  formData: FormData,
+): Promise<State> {
+  const session = await auth();
+  if (!session) {
+    unauthorized();
+  }
+
+  const result = await validator.validate(formData);
+
+  if (result.error) {
+    return {
+      status: "error",
+      message: "Failed to create note",
+      errors: result.error.fieldErrors,
+    };
+  }
+
+  throw new Error("Not implemented");
+}
diff --git a/apps/sovoli.com/src/app/(dashboard)/new/actions/schemas.ts b/apps/sovoli.com/src/app/(dashboard)/new/actions/schemas.ts
@@ -0,0 +1,11 @@
+import { z } from "zod";
+
+/**
+ * For usage with the form action and form
+ */
+export const formNewNoteSchema = z.object({
+  title: z.string(),
+  description: z.string(),
+  content: z.string(),
+});
+export type FormNewNoteSchema = z.infer<typeof formNewNoteSchema>;
diff --git a/apps/sovoli.com/src/app/(dashboard)/new/components/NoteForm.tsx b/apps/sovoli.com/src/app/(dashboard)/new/components/NoteForm.tsx
@@ -1,11 +1,27 @@
+"use client";
+
+import { useActionState } from "react";
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@sovoli/ui/components/alert";
+import { Button } from "@sovoli/ui/components/button";
 import { Form } from "@sovoli/ui/components/form";
 import { Input } from "@sovoli/ui/components/input";
 
+import type { State } from "../actions/newNoteAction";
 import { Tiptap } from "~/components/TipTap/Tiptap";
+import { newNoteAction } from "../actions/newNoteAction";
 
 export const NoteForm = () => {
+  const [state, formAction, pending] = useActionState<State, FormData>(
+    newNoteAction,
+    null,
+  );
+
   return (
-    <Form className="w-full">
+    <Form className="w-full" action={formAction}>
       <Input
         placeholder="Title"
         name="title"
@@ -24,6 +40,31 @@ export const NoteForm = () => {
         variant="bordered"
       />
       <Tiptap />
+      <div className="flex w-full justify-between gap-2">
+        <div className="w-full">
+          {state?.status === "error" && (
+            <Alert
+              title={state.message}
+              color="danger"
+              description={
+                <ul>
+                  {Object.entries(state.errors ?? {}).map(([key, value]) => (
+                    <li key={key}>
+                      <strong>{key}</strong>: {value}
+                    </li>
+                  ))}
+                </ul>
+              }
+            />
+          )}
+        </div>
+        <div className="flex gap-2">
+          <Button isLoading={pending}>Save Draft</Button>
+          <Button color="primary" type="submit" isLoading={pending}>
+            Create
+          </Button>
+        </div>
+      </div>
     </Form>
   );
 };
diff --git a/apps/sovoli.com/src/app/(dashboard)/new/import/components/ShelfImportForm.tsx b/apps/sovoli.com/src/app/(dashboard)/new/import/components/ShelfImportForm.tsx
@@ -2,11 +2,7 @@
 
 import type { KnowledgeType } from "@sovoli/db/schema";
 import { useActionState, useState } from "react";
-import {
-  Alert,
-  AlertDescription,
-  AlertTitle,
-} from "@sovoli/ui/components/alert";
+import { Alert } from "@sovoli/ui/components/alert";
 import { Button } from "@sovoli/ui/components/button";
 import {
   Card,
@@ -107,19 +103,19 @@ export const ShelfImportForm = ({ userCollections }: ShelfImportFormProps) => {
         </form>
       </Card>
       {state && (
-        <Alert variant="danger">
-          <AlertTitle>{state.status}</AlertTitle>
-          <AlertDescription>
-            <p>{state.message}</p>
+        <Alert
+          title={state.message}
+          color="danger"
+          description={
             <ul>
               {Object.entries(state.errors ?? {}).map(([key, value]) => (
                 <li key={key}>
                   <strong>{key}</strong>: {value}
                 </li>
               ))}
             </ul>
-          </AlertDescription>
-        </Alert>
+          }
+        />
       )}
     </section>
   );
@@ -167,12 +163,7 @@ const SelectFileStep = ({ onValidFileSelected }: SelectFileStepProps) => {
       ) : (
         <>
           <CSVFileInput name="csvFile" onFileDropped={handleFileDropped} />{" "}
-          {error && (
-            <Alert variant="danger">
-              <AlertTitle>Error</AlertTitle>
-              <AlertDescription>{error}</AlertDescription>
-            </Alert>
-          )}
+          {error && <Alert color="danger" title="Error" description={error} />}
         </>
       )}
     </section>

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@nextui-org/avatar": "2.2.4",
+    "@nextui-org/alert": "2.2.8",
     "@nextui-org/badge": "2.2.3",
     "@nextui-org/breadcrumbs": "2.2.4",
     "@nextui-org/button": "2.2.7",

diff --git a/packages/ui/src/components/alert/index.tsx b/packages/ui/src/components/alert/index.tsx
@@ -1,59 +1 @@
-import * as React from "react";
-import { tv } from "tailwind-variants";
-
-// Tailwind Variants for Alert Container
-const alertContainer = tv({
-  base: "relative w-full rounded-lg border p-4 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
-  variants: {
-    variant: {
-      default: "bg-background text-foreground",
-      danger:
-        "border-danger/50 text-danger dark:border-danger [&>svg]:text-danger",
-    },
-  },
-  defaultVariants: {
-    variant: "default",
-  },
-});
-
-const alertTitleStyles = tv({
-  base: "mb-1 font-medium leading-none tracking-tight",
-});
-
-const alertDescriptionStyles = tv({
-  base: "text-sm [&_p]:leading-relaxed",
-});
-
-// Alert Component
-const Alert = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & { variant?: "default" | "danger" }
->(({ className, variant = "default", ...props }, ref) => (
-  <div
-    ref={ref}
-    role="alert"
-    className={alertContainer({ variant, className })}
-    {...props}
-  />
-));
-Alert.displayName = "Alert";
-
-// AlertTitle Component
-const AlertTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h5 ref={ref} className={alertTitleStyles({ className })} {...props} />
-));
-AlertTitle.displayName = "AlertTitle";
-
-// AlertDescription Component
-const AlertDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={alertDescriptionStyles({ className })} {...props} />
-));
-AlertDescription.displayName = "AlertDescription";
-
-export { Alert, AlertTitle, AlertDescription };
+export * from "@nextui-org/alert";