diff --git a/.claude/rules/code-review.md b/.claude/rules/code-review.md index f23940775..11b110799 100644 --- a/.claude/rules/code-review.md +++ b/.claude/rules/code-review.md @@ -1,8 +1,16 @@ +--- +# Loaded on demand by /quality:agent-review (which reads this file directly). +# The self-referencing glob keeps it out of normal session context — it only +# auto-loads when this file itself is being edited. +paths: + - '.claude/rules/code-review.md' +--- + # MPDX React — Code Review Rules Project-specific rules layered on top of `CLAUDE.md` for `/quality:agent-review`. -**Stack:** Next.js 15 (Pages Router) · React 18 · TypeScript · Material UI v5 · Apollo Client (dual GraphQL) · Formik + Yup · Jest + React Testing Library · react-i18next · NextAuth (Okta / API OAuth). +**Stack:** Next.js 15 (Pages Router) · React 18 · TypeScript · Material UI v7 · Apollo Client (dual GraphQL) · Formik + Yup · Jest + React Testing Library · react-i18next · NextAuth (Okta / API OAuth). **Key architectural facts the agents should know:** @@ -298,7 +306,7 @@ Project-specific testing conventions added to the Testing agent's universal chec Project-specific UX/UI conventions layered on top of the UX agent's universal checks. -- **Material UI v5 conventions** — use the `sx` prop for styling; avoid `makeStyles` (legacy v4) and avoid inline `style={...}` (breaks theme-aware styling and responsive breakpoints). Styled components (`styled(...)`) are acceptable for reused patterns +- **Material UI v7 conventions** — use the `sx` prop for styling; avoid `makeStyles` (legacy v4) and avoid inline `style={...}` (breaks theme-aware styling and responsive breakpoints). Styled components (`styled(...)`) are acceptable for reused patterns - **Theme tokens, not hardcoded values** — use `theme.palette.*`, `theme.spacing(n)`, `theme.breakpoints.*`. Flag raw hex colors, pixel values, and magic numbers - **Responsive design** — MUI breakpoints (`xs`, `sm`, `md`, `lg`, `xl`) via `sx={{ [theme.breakpoints.down('md')]: {...} }}` or the shorthand `sx={{ display: { xs: 'block', md: 'flex' } }}`. New components must render correctly at mobile breakpoints - **Loading states** — every Apollo query must render a loading state (MUI `Skeleton` or `CircularProgress`), not render nothing or flash stale content diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md deleted file mode 100644 index 19c2bc5e4..000000000 --- a/.github/copilot-instructions.md +++ /dev/null @@ -1,35 +0,0 @@ -# GitHub Copilot Instructions - -## Project Overview - -MPDX is a Next.js 15 React application built with TypeScript using pages router. - -## Technology Stack - -- **Frontend**: Next.js v15, React, Material UI v5, TypeScript -- **Data Loading**: Apollo Client GraphQL -- **Forms**: Formik and yup for validation -- **Testing**: Jest, React Testing Library v13 -- **Internationalization**: react-i18next -- **Code Quality**: ESLint, Prettier - -## File Naming Conventions - -- React components: PascalCase (e.g., `ComponentName.tsx`) -- Pages: kebab-case with `.page.tsx` extension (e.g., `account-lists.page.tsx`) -- Test files: Same name as the file being tested with `.test.tsx` extension -- GraphQL files: PascalCase with `.graphql` extension not starting with `Get` or `Load` - -## Commands - -- **Always use `yarn` for package management and running scripts** -- `yarn test` - Run tests -- `yarn test [file]` - Run tests for a single file -- `yarn lint` - Run ESLint linter -- `yarn lint:ts` - Run TypeScript typechecking -- `yarn prettier:write` - Run Prettier formatter - -## Guidelines - -- Always use named exports instead of default exports. -- Always write the least amount of code possible. Avoid using unnecessary styles, variables, and test providers. diff --git a/CLAUDE.md b/CLAUDE.md index ec1acf9f4..ff5637701 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -2,52 +2,9 @@ This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. -## Development Commands - -Essential commands for development: - -```bash -# Package management - ALWAYS use yarn -yarn # Install dependencies -yarn start # Start dev server with GraphQL codegen watching -yarn build # Production build -yarn serve # Serve production build locally - -# Code Quality -yarn lint # ESLint with auto-fix -yarn lint:ci # ESLint without fix (CI) -yarn lint:ts # TypeScript type checking -yarn prettier:write # Format code with Prettier - -# Testing -yarn test # Run all tests silently -yarn test:log # Run tests with output -yarn test:watch # Run tests in watch mode -yarn localtest # Run tests in band with verbose output -yarn test:coverage # Run tests with coverage report - -# GraphQL -yarn gql # Generate TypeScript from GraphQL files -yarn gql:w # Generate with watch mode (auto-runs with yarn start) - -# Translations -yarn extract # Extract i18n strings -yarn crowdin:download # Download translations from CrowdIn -yarn crowdin:upload # Upload translations to CrowdIn -``` - ## Architecture Overview -MPDX is a Next.js 15 React application using the Pages Router with TypeScript and Material UI v5. - -### Key Technologies - -- **Frontend**: Next.js v15, React v18, Material UI v5, TypeScript -- **Data**: Apollo Client GraphQL with dual GraphQL servers -- **Forms**: Formik with Yup validation -- **Testing**: Jest with React Testing Library -- **i18n**: react-i18next -- **Authentication**: NextAuth.js with Okta/API OAuth providers +MPDX is a Next.js 15 React application using the Pages Router with TypeScript and Material UI v7. ### Dual GraphQL Architecture @@ -58,24 +15,6 @@ The application uses two GraphQL servers: Apollo Link automatically routes queries based on which fields are requested. Check `src/graphql/rootFields.generated.ts` to see which fields are available from the GraphQL API server. -### Directory Structure - -``` -pages/ # Next.js pages (file-based routing) -├── api/ # API routes and REST proxy GraphQL schemas -├── accountLists/ # Account list pages -├── auth/ # Authentication endpoints -└── [other routes] # Other application pages - -src/ -├── components/ # React components organized by feature -├── hooks/ # Custom React hooks -├── lib/ # Apollo client, utility functions, helpers -└── graphql/ # Generated GraphQL types and schema - -public/locales/ # Translation files -``` - ### Component Organization - Components are organized by feature/page in `src/components/`