Project Init

libs/ui/src/index.ts

@@ -0,0 +1,3 @@
+export * from './lib/feedback/ConfirmModal';
+export * from './lib/feedback/ApiErrorAlert';
+export * from './lib/feedback/notify';

libs/ui/src/lib/feedback/ApiErrorAlert.tsx

@@ -0,0 +1,24 @@
+import { Alert } from '@mantine/core';
+import { IconAlertCircle } from '@tabler/icons-react';
+
+interface ApiErrorAlertProps {
+  error: unknown;
+  title?: string;
+}
+
+export function ApiErrorAlert({ error, title = 'An error occurred' }: ApiErrorAlertProps) {
+  const message =
+    error instanceof Error
+      ? error.message
+      : typeof error === 'object' && error !== null && 'data' in error
+      ? String(
+          (error as { data: { message?: string } }).data?.message ?? 'Unknown error',
+        )
+      : 'Something went wrong. Please try again.';
+
+  return (
+    <Alert icon={<IconAlertCircle size={16} />} title={title} color="red" variant="light">
+      {message}
+    </Alert>
+  );
+}

libs/ui/src/lib/feedback/ConfirmModal.tsx

@@ -0,0 +1,39 @@
+import { Modal, Button, Group, Text } from '@mantine/core';
+
+interface ConfirmModalProps {
+  opened: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  title?: string;
+  message?: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  loading?: boolean;
+}
+
+export function ConfirmModal({
+  opened,
+  onClose,
+  onConfirm,
+  title = 'Confirm action',
+  message = 'Are you sure you want to proceed?',
+  confirmLabel = 'Confirm',
+  cancelLabel = 'Cancel',
+  loading = false,
+}: ConfirmModalProps) {
+  return (
+    <Modal opened={opened} onClose={onClose} title={title} size="sm" centered>
+      <Text size="sm" mb="xl">
+        {message}
+      </Text>
+      <Group justify="flex-end">
+        <Button variant="subtle" onClick={onClose} disabled={loading}>
+          {cancelLabel}
+        </Button>
+        <Button color="red" onClick={onConfirm} loading={loading}>
+          {confirmLabel}
+        </Button>
+      </Group>
+    </Modal>
+  );
+}

libs/ui/src/lib/feedback/notify.ts

@@ -0,0 +1,12 @@
+import { notifications } from '@mantine/notifications';
+
+export const notify = {
+  success: (message: string, title = 'Success') =>
+    notifications.show({ title, message, color: 'green' }),
+  error: (message: string, title = 'Error') =>
+    notifications.show({ title, message, color: 'red' }),
+  info: (message: string, title = 'Info') =>
+    notifications.show({ title, message, color: 'blue' }),
+  warning: (message: string, title = 'Warning') =>
+    notifications.show({ title, message, color: 'yellow' }),
+};