Merge pull request #57 from DouglasNeuroInformatics/dev

update

Author: joshunrau

.gitignore

@@ -132,5 +132,8 @@ dist
 # Storybook
 storybook-static
 
-#VScode
-.vscode
+# VScode
+.vscode
+
+# Local Scripts
+local/

package.json

@@ -68,7 +68,7 @@
     "zod": "^3.23.6"
   },
   "dependencies": {
-    "@douglasneuroinformatics/libjs": "^2.7.0",
+    "@douglasneuroinformatics/libjs": "^2.8.0",
     "@douglasneuroinformatics/libui-form-types": "^0.11.0",
     "@radix-ui/react-accordion": "^1.2.3",
     "@radix-ui/react-alert-dialog": "^1.1.6",

pnpm-lock.yaml

@@ -14,7 +14,7 @@ export const BUTTON_ICON_SIZE = {
 };
 
 export const buttonVariants = cva(
-  'flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+  'flex items-center justify-center whitespace-nowrap cursor-pointer rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
   {
     defaultVariants: {
       size: 'md',

src/components/Button/Button.tsx

@@ -16,7 +16,7 @@ export const DialogContent = forwardRef<
       <DialogOverlay />
       <Content
         className={cn(
-          'bg-background 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
+          'bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
           className
         )}
         ref={ref}

src/components/Dialog/DialogContent.tsx

@@ -11,7 +11,7 @@ export const DialogOverlay = forwardRef<
   return (
     <Overlay
       className={cn(
-        'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80 duration-200',
         className
       )}
       ref={ref}

src/components/Dialog/DialogOverlay.tsx

@@ -0,0 +1,14 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { ErrorFallback } from './ErrorFallback';
+
+const TEST_ID = 'error-fallback';
+
+describe('ErrorFallback', () => {
+  it('should render', () => {
+    const error = new Error('Something went wrong');
+    render(<ErrorFallback error={error} />);
+    expect(screen.getByTestId(TEST_ID)).toBeInTheDocument();
+  });
+});

src/components/ErrorFallback/ErrorFallback.spec.tsx

@@ -12,10 +12,13 @@ export const ErrorFallback = ({ error }: ErrorFallbackProps) => {
   }, [error]);
 
   return (
-    <div className="flex min-h-screen flex-col items-center justify-center gap-1 p-3 text-center">
-      <h1 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">Unexpected Error</h1>
+    <div
+      className="flex min-h-screen flex-col items-center justify-center gap-1 p-3 text-center"
+      data-testid="error-fallback"
+    >
+      <h1 className="text-muted-foreground text-sm font-semibold tracking-wide uppercase">Unexpected Error</h1>
       <h3 className="text-3xl font-extrabold tracking-tight sm:text-4xl md:text-5xl">Something Went Wrong</h3>
-      <p className="mt-2 max-w-prose text-sm text-muted-foreground sm:text-base">
+      <p className="text-muted-foreground mt-2 max-w-prose text-sm sm:text-base">
         We apologize for the inconvenience. Please contact us for further assistance.
       </p>
       <div className="mt-6">

src/components/ErrorFallback/ErrorFallback.tsx

@@ -2,13 +2,15 @@ import * as React from 'react';
 
 import { CircleAlertIcon } from 'lucide-react';
 
-export const ErrorMessage: React.FC<{ error?: null | string[] }> = ({ error }) => {
+import { cn } from '@/utils';
+
+export const ErrorMessage: React.FC<{ className?: string; error?: null | string[] }> = ({ className, error }) => {
   return error ? (
     <div className="space-y-1.5">
       {error.map((message) => (
-        <div className="flex w-full items-center text-sm font-medium text-destructive" key={message}>
+        <div className={cn('text-destructive flex w-full items-center text-sm font-medium', className)} key={message}>
           <CircleAlertIcon className="mr-1" style={{ strokeWidth: '2px' }} />
-          <span>{message}</span>
+          <span data-testid="error-message-text">{message}</span>
         </div>
       )) ?? null}
     </div>

src/components/Form/ErrorMessage.tsx

@@ -530,3 +530,27 @@ export const WithSuspend: StoryObj<typeof Form<z.ZodType<FormTypes.Data>, { dela
     })
   }
 };
+
+export const WithError: StoryObj<typeof Form> = {
+  args: {
+    content: {
+      name: {
+        kind: 'string',
+        label: 'Name',
+        variant: 'input'
+      }
+    },
+    beforeSubmit: (data) => {
+      if (data.name === 'Winston') {
+        return { success: true };
+      }
+      return { success: false, errorMessage: "Name must be 'Winston'" };
+    },
+    onSubmit: () => {
+      alert('Success!');
+    },
+    validationSchema: $SimpleExampleFormData.extend({
+      name: z.string().min(3)
+    })
+  }
+};