Merge agentic-upgrade into main

* Upgrade Tailwind CSS to v4 and migrate config, add @tailwindcss/vite plugin

* Upgrade dependencies: Radix UI, testing libs, GraphQL, utilities, TypeScript, Vite, Tailwind v4

* Downgrade Vite and TypeScript for Node 21 compatibility; revert plugin versions

* Upgrade to Vite 7 and Node 22 compatibility; restore Vite plugin versions

* Add .nvmrc for Node 22.12.0

* Add node version check script, update scripts to enforce Node >=22.12.0, add engines field

* Remove node version check script and restore original scripts

* Add setup instructions to README, add setup script, and enforce agent restrictions in AGENTS.md

* Add zsh usage and nvm check instructions to AGENTS.md

* Emphasize critical rule: must ask for permission before any commit

* Add branch management rule: avoid changes on main without permission, recommend new branch

* Fix Users test: restore vi.mock for useRolesGraphql, remove noisy console logs, adjust MockedProvider import, add table UI component, update imports and documentation

* fix linter errors

* fix tests after upgrade

* fix build

* update agent instructions

* try fix docker ci

* update github CI actions

* fix agentic issues and apollo client

* use fix eslint for current config

* fix ai style hallucinations

* tailwind migrate 3 to 4

* use tailwind v4 vite plugin

* manual tailwind styles migration to v4

* upgrade manually graphql apollo client version 3 to 4

* update readme

* minor fix

Author: xcodeassociated

.eslintrc.cjs

@@ -6,17 +6,16 @@ module.exports = {
     'plugin:@typescript-eslint/recommended',
     'plugin:react-hooks/recommended',
     'prettier',
-    // This disables the formatting rules in ESLint that Prettier is going to be responsible for handling.
-    // Make sure it's always the last config, so it gets the chance to override other configs.
-    'eslint-config-prettier'
+    'eslint-config-prettier',
   ],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',
   plugins: ['react-refresh'],
   rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
-    ],
+    'react-refresh/only-export-components': 'off',
+    'react-hooks/set-state-in-effect': 'off',
+    'react-hooks/incompatible-library': 'off',
+    'react-hooks/exhaustive-deps': 'off',
+    'no-unused-disable': 'off',
   },
 }

.github/workflows/ci.yml

@@ -0,0 +1,24 @@
+name: CI Build and Test
+
+on:
+  push:
+    branches: ['**']
+  pull_request:
+    branches: ['**']
+
+jobs:
+  test-and-build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: oven-sh/setup-bun@v2
+      - name: Install dependencies
+        run: bun install --frozen-lockfile
+      - name: Codegen
+        run: bun run generate:graphql
+      - name: Run the tests
+        run: bun run test
+      - name: Build
+        run: bun run build
+        env:
+          CI: false

.github/workflows/build-and-test.yml .github/workflows/main-branch-docker.yml.github/workflows/build-and-test.yml renamed to .github/workflows/main-branch-docker.yml

@@ -1,36 +1,12 @@
-name: NodeJS with Webpack
+name: Docker Build and Publish
 
 on:
   push:
-    branches: ['**']
-  pull_request:
-    branches: ['**']
+    branches: [main]
 
 jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-
-      - uses: oven-sh/setup-bun@v2
-
-      - name: Install dependencies
-        run: bun install --frozen-lockfile
-
-      - name: Codegen
-        run: bun run generate:graphql
-
-      - name: Run the tests
-        run: bun run test
-
-      - name: Build
-        run: bun run build
-        env:
-          CI: false
-
   docker:
     runs-on: ubuntu-latest
-    needs: build
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -53,10 +29,22 @@ jobs:
           file_name: .env.production
           fail_on_empty: true
           sort_keys: false
+      - name: Set up Bun
+        uses: oven-sh/setup-bun@v2
+      - name: Install dependencies
+        run: bun install --frozen-lockfile
+      - name: Codegen
+        run: bun run generate:graphql
+      - name: Run the tests
+        run: bun run test
+      - name: Build
+        run: bun run build
+        env:
+          CI: false
       - name: Build and push
         uses: docker/build-push-action@v6
         with:
           context: .
           push: true
-          platforms: linux/amd64, linux/arm64
+          platforms: linux/amd64,linux/arm64
           tags: xcodeassociated/react-typescript-vite-template:latest

.gitignore

@@ -27,7 +27,7 @@ coverage
 # AI
 CLAUDE.md
 
-src/graphql/*.ts
-src/graphql/*.js
+src/graphql/generated/*.ts
+src/graphql/generated/*.js
 
 .env.*

.nvmrc

@@ -0,0 +1 @@
+22.12.0

AGENTS.md

@@ -26,16 +26,24 @@
 ## Project Overview
 
 - **Tech Stack**: React 18, TypeScript, Vite, Tailwind CSS, Redux Toolkit (with persistence), Apollo Client, Keycloak, i18next.
-- **Package Manager**: `npm` / `bun`. All scripts are defined in `package.json` and are **compatible with `bun run <script>`**.
+- **Package Manager**: `bun`. All scripts are defined in `package.json` and are **compatible with `bun run <script>`**.
 - **Path Alias**: `@/*` resolves to `src/*` (defined in `vite.config.ts` & `tsconfig.json`).
-- **Code Generation**: GraphQL types & hooks are generated via `npm run generate:graphql`.
+- **Code Generation**: GraphQL types & hooks are generated via `bun run generate:graphql`.
 - **Testing**: Vitest + React Testing Library + MSW for API mocking.
 - **Formatting**: Prettier with `prettier-plugin-tailwindcss` (installed but configuration falls back to defaults).
 
 ---
 
 ## Common Development Commands
 
+**CRITICAL:** Before running any tests or building the project, **always regenerate the GraphQL files** to ensure they are up‑to‑date. Run:
+
+```bash
+bun run generate:graphql
+```
+
+This command re‑generates the GraphQL types and hooks (e.g., `src/graphql/generated.ts`). It must be executed any time the GraphQL schema changes and must be run before `bun run test` or `bun run build`. Ensure this step is included in any CI pipeline or local workflow.
+
 | Command                    | Description                                                         |
 | -------------------------- | ------------------------------------------------------------------- |
 | `bun run dev`              | Starts Vite dev server (default port 3000).                         |
@@ -61,7 +69,7 @@ Agents often need to run or debug a specific test file. Use any of the following
   bun run test -- src/pages/dashboard/Dashboard.test.ts --run
 ```
 
-**Tip:** The double‑dash `--` separates the npm script arguments from the script itself.
+**Tip:** The double‑dash `--` separates the bun script arguments from the script itself.
 
 ---
 
@@ -76,7 +84,7 @@ All agents should respect the linting rules defined in `.eslintrc.cjs`. The foll
 - **Single‑quotes** for strings, **double‑quotes** only when the string contains a single‑quote.
 - **Semi‑colons** are required (`semi: true`).
 - **Tailwind ordering**: thanks to `prettier-plugin-tailwindcss`, class names are automatically sorted alphabetically.
-- Run `npm run lint` (which runs ESLint with Prettier integration) before committing.
+- Run `bun run lint` (which runs ESLint with Prettier integration) before committing.
 
 ### Imports & Path Aliases
 
@@ -184,8 +192,8 @@ export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
 
 - The **ESLint** config extends `eslint:recommended`, `@typescript-eslint/recommended`, and `plugin:react-hooks/recommended`.
 - **Prettier** is enforced via `eslint-config-prettier` – any formatting deviation is reported as an ESLint error.
-- **`npm run lint`** fails on **any warning** (`--max-warnings 0`).
-- CI (GitHub Actions) runs `npm ci && npm run lint && npm run test && npm run coverage`.
+- **`bun run lint`** fails on **any warning** (`--max-warnings 0`).
+- CI (GitHub Actions) runs `bun install && bun run lint && bun run test && bun run coverage`.
 - No `--fix` flag is used in CI – agents must commit correctly formatted code.
 
 ---
@@ -209,4 +217,18 @@ The repository does **not** contain a `.cursor/` directory or a `.github/copilot
 
 ---
 
+**Agent Restrictions**: Agents must not modify any files outside the project directory.
+
+**CRITICAL:** Agents must **never** modify any auto‑generated files (e.g., GraphQL generated files such as `src/graphql/generated.ts`).
+
+**CRITICAL:** Agents must **never** commit any changes without **explicit user permission**. ALWAYS ask for review and obtain approval **before** running any `git add` / `git commit` commands.
+
+**Shell Environment**: Agents should execute commands using **zsh** (as the user’s default shell) to ensure compatibility with tools installed in that environment.
+
+**Node Version Management**: Agents must always verify that **nvm** (Node Version Manager) is installed before invoking any `node` commands. If `nvm` is not available, they should inform the user and suggest installing it. Agents should never run Node directly without first ensuring the appropriate version is selected via `nvm`.
+
+**Package Manager Preference**: All dependency management should be performed using **bun**. **Important:** Always use `bun` for all commands in this project; any other package manager must not be used. Agents must use `bun install` (or `bun add`/`bun remove` as appropriate) instead of any other package manager. Before running any bun command, agents must check that **bun** is installed; if it is missing, they should inform the user and suggest installing bun (e.g., via `curl -fsSL https://bun.sh/install | bash`).
+
+**Branch Management**: Agents must avoid making code changes directly on the **main** (or **master**) branch. Any modification to code should be performed on a separate feature branch. Agents should always ask for explicit user permission before creating a new branch, and must recommend creating one when working on the main branch.
+
 _End of file – agents should keep this document up to date as the project evolves._

Dockerfile

@@ -1,12 +1,12 @@
 # Use an official Node.js runtime as the base image
-FROM oven/bun:1.1-slim as build-stage
+FROM oven/bun:1.3.9-slim as build-stage
 LABEL authors="xcodeassociated"
 
 # Set working directory
 WORKDIR /app
 
 # Copy package.json and package-lock.json to the working directory
-COPY package*.json ./
+COPY package.json bun.lockb ./
 
 # Install dependencies
 RUN bun install --frozen-lockfile

README.md

@@ -7,6 +7,16 @@ Currently, two official plugins are available:
 - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
 - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
 
+## Setup
+
+This project requires **Node ≥ 22.12.0**. If you use `nvm`, run:
+
+```bash
+nvm install 22.12.0
+nvm use 22.12.0
+```
+
+
 ## Expanding the ESLint configuration
 
 If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

bun.lockb

@@ -2,13 +2,13 @@ import type { CodegenConfig } from '@graphql-codegen/cli'
 
 const config: CodegenConfig = {
   schema: './src/graphql/schema.graphql',
-  documents: './src/**/*.graphql',
+  documents: ['./src/**/*.{ts,tsx,graphql}'],
+  ignoreNoDocuments: true,
   generates: {
-    './src/graphql/generated.ts': {
-      plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo'],
-      config: {
-        withHooks: true,
-        withResultType: true,
+    './src/graphql/generated/': {
+      preset: 'client',
+      presetConfig: {
+        fragmentMasking: { unmaskFunctionName: 'getFragmentData' },
       },
     },
   },