@open-kingdom/shared-frontend-feature-user-management 0.0.2-9

package/src/lib/components/users/UserList.component.tsx

@@ -0,0 +1,153 @@
+import { useState, useMemo, useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import type { ColDef, ICellRendererParams } from 'ag-grid-community';
+import {
+  useUsersControllerFindAllQuery,
+  useUsersControllerDeleteMutation,
+} from '@open-kingdom/shared-frontend-data-access-api-client';
+import { showSuccessNotification } from '@open-kingdom/shared-frontend-data-access-notifications';
+import {
+  DataGrid,
+  type DataGridTheme,
+} from '@open-kingdom/shared-frontend-ui-datagrid';
+import { useTheme } from '@open-kingdom/shared-frontend-ui-theme';
+import { ConfirmDialog } from '../shared/ConfirmDialog.component';
+import { RoleBadge } from '../shared/RoleBadge.component';
+import { InviteUserModal } from '../invitations';
+import { buttonPrimaryStyles } from '../../styles';
+import type { User } from '../../types';
+
+interface UserListProps {
+  currentUserId?: number;
+}
+
+export function UserList({ currentUserId }: UserListProps) {
+  const dispatch = useDispatch();
+  const { theme, mode } = useTheme();
+  const { data, isLoading, error, refetch } = useUsersControllerFindAllQuery();
+  const [deleteUser, { isLoading: isDeleting }] =
+    useUsersControllerDeleteMutation();
+
+  const [showInviteModal, setShowInviteModal] = useState(false);
+  const [userToDelete, setUserToDelete] = useState<User | null>(null);
+
+  const users = (data as User[] | undefined) ?? [];
+
+  const handleDeleteConfirm = useCallback(async () => {
+    if (!userToDelete) return;
+    try {
+      await deleteUser({ id: userToDelete.id }).unwrap();
+      dispatch(showSuccessNotification('User deleted successfully'));
+    } catch {
+      // Error notification handled by RTK error middleware
+    } finally {
+      setUserToDelete(null);
+    }
+  }, [userToDelete, deleteUser, dispatch]);
+
+  const columnDefs = useMemo<ColDef<User>[]>(
+    () => [
+      { field: 'email', headerName: 'Email', flex: 2 },
+      {
+        headerName: 'Name',
+        flex: 2,
+        valueGetter: (params) => {
+          const { firstName, lastName } = params.data ?? {};
+          return [firstName, lastName].filter(Boolean).join(' ') || '—';
+        },
+      },
+      {
+        field: 'role',
+        headerName: 'Role',
+        flex: 1,
+        cellRenderer: (params: ICellRendererParams<User>) =>
+          params.data ? <RoleBadge role={params.data.role} /> : null,
+      },
+      {
+        headerName: 'Actions',
+        flex: 1,
+        sortable: false,
+        filter: false,
+        cellRenderer: (params: ICellRendererParams<User>) => {
+          if (!params.data) return null;
+          const isSelf = params.data.id === currentUserId;
+          return (
+            <button
+              onClick={() => params.data && setUserToDelete(params.data)}
+              disabled={isSelf}
+              title={isSelf ? 'Cannot delete your own account' : 'Delete user'}
+              className="rounded px-2 py-1 text-xs font-medium text-error-600 transition-colors hover:bg-error-50 disabled:cursor-not-allowed disabled:opacity-40 dark:text-error-400 dark:hover:bg-error-900/20"
+            >
+              Delete
+            </button>
+          );
+        },
+      },
+    ],
+    [currentUserId]
+  );
+
+  if (error) {
+    return (
+      <div
+        data-testid="users-error"
+        className="rounded-lg bg-error-50 p-6 text-center dark:bg-error-900/20"
+        role="alert"
+      >
+        <p className="text-error-700 dark:text-error-300">
+          Failed to load users.
+        </p>
+        <button
+          data-testid="users-retry-btn"
+          onClick={refetch}
+          className="mt-2 text-sm font-medium text-primary-600 hover:underline dark:text-primary-400"
+        >
+          Try again
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className="mb-4 flex items-center justify-between">
+        <h2
+          data-testid="users-heading"
+          className="text-xl font-semibold text-neutral-900 dark:text-neutral-100"
+        >
+          Users
+        </h2>
+        <button
+          data-testid="invite-user-btn"
+          onClick={() => setShowInviteModal(true)}
+          className={buttonPrimaryStyles}
+        >
+          Invite User
+        </button>
+      </div>
+
+      <DataGrid
+        rowData={users}
+        columnDefs={columnDefs}
+        mode={mode}
+        theme={theme as DataGridTheme}
+        loading={isLoading}
+      />
+
+      <InviteUserModal
+        isOpen={showInviteModal}
+        onClose={() => setShowInviteModal(false)}
+      />
+
+      <ConfirmDialog
+        isOpen={!!userToDelete}
+        title="Delete User"
+        message={`Are you sure you want to delete ${userToDelete?.email}? This action cannot be undone.`}
+        confirmLabel={isDeleting ? 'Deleting...' : 'Delete'}
+        onConfirm={handleDeleteConfirm}
+        onCancel={() => setUserToDelete(null)}
+        isLoading={isDeleting}
+      />
+    </div>
+  );
+}

package/src/lib/styles.ts

@@ -0,0 +1,19 @@
+export const inputStyles =
+  'w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-md bg-white dark:bg-neutral-700 text-neutral-900 dark:text-neutral-100';
+
+export const labelStyles =
+  'block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1';
+
+export const cardStyles =
+  'max-w-md mx-auto mt-8 p-6 bg-white dark:bg-neutral-800 rounded-lg shadow-lg';
+
+export const bodyTextStyles = 'text-neutral-600 dark:text-neutral-400';
+
+const buttonBaseStyles =
+  'rounded-md px-4 py-2 text-sm font-medium transition-colors';
+
+export const buttonPrimaryStyles = `${buttonBaseStyles} bg-primary-500 text-white hover:bg-primary-600 disabled:opacity-50`;
+
+export const buttonSecondaryStyles = `${buttonBaseStyles} border border-neutral-300 text-neutral-700 hover:bg-neutral-50 dark:border-neutral-600 dark:text-neutral-300 dark:hover:bg-neutral-700`;
+
+export const buttonDangerStyles = `${buttonBaseStyles} bg-error-500 text-white hover:bg-error-600 disabled:opacity-50`;

package/src/lib/types.ts

@@ -0,0 +1,9 @@
+export type Role = 'guest' | 'user' | 'admin';
+
+export interface User {
+  id: number;
+  email: string;
+  firstName: string | null;
+  lastName: string | null;
+  role: Role;
+}

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../../tsconfig.base.json"
+}

package/tsconfig.lib.json

@@ -0,0 +1,47 @@
+{
+  "extends": "../../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts",
+      "vite/client"
+    ],
+    "rootDir": "src",
+    "jsx": "react-jsx",
+    "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo",
+    "lib": ["dom", "dom.iterable", "es2022"]
+  },
+  "exclude": [
+    "out-tsc",
+    "dist",
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx",
+    "jest.config.ts",
+    "jest.config.cts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"],
+  "references": [
+    {
+      "path": "../ui-theme/tsconfig.lib.json"
+    },
+    {
+      "path": "../ui-datagrid/tsconfig.lib.json"
+    },
+    {
+      "path": "../data-access-notifications/tsconfig.lib.json"
+    },
+    {
+      "path": "../data-access-api-client/tsconfig.lib.json"
+    }
+  ]
+}

package/tsconfig.spec.json

@@ -0,0 +1,27 @@
+{
+  "extends": "../../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/jest",
+    "lib": ["es2022", "dom"],
+    "jsx": "react-jsx",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "jest.config.ts",
+    "jest.config.cts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}

package/vite.config.mts

@@ -0,0 +1,58 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import * as path from 'path';
+
+export default defineConfig(() => ({
+  root: import.meta.dirname,
+  cacheDir:
+    '../../../../node_modules/.vite/libs/shared/frontend/feature-user-management',
+  plugins: [
+    react(),
+    dts({
+      entryRoot: 'src',
+      tsconfigPath: path.join(import.meta.dirname, 'tsconfig.lib.json'),
+    }),
+  ],
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [],
+  // },
+  // Configuration for building your library.
+  // See: https://vite.dev/guide/build.html#library-mode
+  build: {
+    outDir: './dist',
+    emptyOutDir: true,
+    reportCompressedSize: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: 'src/index.ts',
+      name: '@open-kingdom/feature-user-management',
+      fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forget to update your package.json as well.
+      formats: ['es' as const],
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: [
+        'react',
+        'react-dom',
+        'react/jsx-runtime',
+        'react-redux',
+        '@reduxjs/toolkit',
+        'react-hook-form',
+        /^@hookform\/resolvers\/.*/,
+        'zod',
+        'ag-grid-community',
+        /^ag-grid-community\/.*/,
+        '@react-hookz/web',
+        /^@open-kingdom\/.*/,
+      ],
+    },
+  },
+}));