mirror of
https://github.com/unraid/api.git
synced 2026-01-04 23:50:37 -06:00
<!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Streamlined Tailwind CSS integration using Vite plugin, eliminating the need for separate Tailwind config files. * Updated theme and color variables for improved consistency and maintainability. * **Style** * Standardized spacing, sizing, and font classes across all components using Tailwind’s default scale. * Reduced excessive gaps, padding, and font sizes for a more compact and cohesive UI. * Updated gradient, border, and shadow classes to match Tailwind v4 conventions. * Replaced custom pixel-based classes with Tailwind’s bracketed arbitrary value syntax where needed. * Replaced focus outline styles from `outline-none` to `outline-hidden` for consistent focus handling. * Updated flex shrink/grow utility classes to use newer shorthand forms. * Converted several component templates to use self-closing tags for cleaner markup. * Adjusted icon sizes and spacing for improved visual balance. * **Chores** * Removed legacy Tailwind/PostCSS configuration files and related scripts. * Updated and cleaned up package dependencies for Tailwind v4 and related plugins. * Removed unused or redundant build scripts and configuration exports. * Updated documentation to reflect new Tailwind v4 usage. * Removed Prettier Tailwind plugin from formatting configurations. * Removed Nuxt Tailwind module in favor of direct Vite plugin integration. * Cleaned up ESLint config by removing Prettier integration. * **Bug Fixes** * Corrected invalid or outdated Tailwind class names and syntax. * Fixed issues with max-width and other utility classes for improved layout consistency. * **Tests** * Updated test assertions to match new class names and styling conventions. * **Documentation** * Revised README and internal notes to clarify Tailwind v4 adoption and configuration changes. * Added new development notes emphasizing Tailwind v4 usage and documentation references. * **UI Components** * Enhanced BrandButton stories with detailed variant, size, and padding showcases for better visual testing. * Improved theme store to apply dark mode class on both `<html>` and `<body>` elements for compatibility. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
4.7 KiB
4.7 KiB
CLAUDE.md
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
Project Overview
This is the Unraid API monorepo containing multiple packages that provide API functionality for Unraid servers. It uses pnpm workspaces with the following structure:
/api- Core NestJS API server with GraphQL/web- Nuxt.js frontend application/unraid-ui- Vue 3 component library/plugin- Unraid plugin package (.plg)/packages- Shared packages and API plugins
Essential Commands
Development
pnpm install # Install all dependencies
pnpm dev # Run all dev servers concurrently
pnpm build # Build all packages
pnpm build:watch # Watch mode with local plugin build
Testing & Code Quality
pnpm test # Run all tests
pnpm lint # Run linting
pnpm lint:fix # Fix linting issues
pnpm type-check # TypeScript type checking
API Development
cd api && pnpm dev # Run API server (http://localhost:3001)
cd api && pnpm test:watch # Run tests in watch mode
cd api && pnpm codegen # Generate GraphQL types
Deployment
pnpm unraid:deploy <SERVER_IP> # Deploy all to Unraid server
Architecture Notes
API Structure (NestJS)
- Modules:
auth,config,plugins,emhttp,monitoring - GraphQL API with Apollo Server at
/graphql - Redux store for state management in
src/store/ - Plugin system for extending functionality
- Entry points:
src/index.ts(server),src/cli.ts(CLI)
Key Patterns
- TypeScript imports use
.jsextensions (ESM compatibility) - NestJS dependency injection with decorators
- GraphQL schema-first approach with code generation
- API plugins follow specific structure (see
api/docs/developer/api-plugins.md)
Authentication
- API key authentication via headers
- Cookie-based session management
- Keys stored in
/boot/config/plugins/unraid-api/
Development Workflow
- Work Intent required before starting development
- Fork from
mainbranch - Reference Work Intent in PR
- No direct pushes to main
Debug Mode
LOG_LEVEL=debug unraid-api start --debug
Enables GraphQL playground at http://tower.local/graphql
Coding Guidelines
General Rules
- Never add comments unless they are needed for clarity of function
- Never add comments for obvious things, and avoid commenting when starting and ending code blocks
- Be CONCISE, keep replies shorter than a paragraph if at all possible
API Development Rules (api/**/*)
- Use pnpm ONLY for package management
- Always run scripts from api/package.json unless requested
- Prefer adding new files to the NestJS repo located at
api/src/unraid-api/instead of the legacy code - Test suite is VITEST, do not use jest
- Run tests with:
pnpm --filter ./api test - Prefer to not mock simple dependencies
Web Development Rules (web/**/*)
- Always run
pnpm codegenfor GraphQL code generation in the web directory - GraphQL queries must be placed in
.query.tsfiles - GraphQL mutations must be placed in
.mutation.tsfiles - All GraphQL under
web/must follow this naming convention
Testing Guidelines
Vue Component Testing
- This is a Nuxt.js app but we are testing with vitest outside of the Nuxt environment
- Nuxt is currently set to auto import so some vue files may need compute or ref imported
- Use pnpm when running terminal commands and stay within the web directory
- Tests are located under
web/__test__, run withpnpm test - Use
mountfrom Vue Test Utils for component testing - Stub complex child components that aren't the focus of the test
- Mock external dependencies and services
- Test component behavior and output, not implementation details
- Use
createTestingPinia()for mocking stores in components - Find elements with semantic queries like
find('button')rather than data-test IDs - Use
await nextTick()for DOM updates - Always await async operations before making assertions
Store Testing with Pinia
- Use
createPinia()andsetActivePiniawhen testing Store files - Only use
createTestingPiniaif you specifically need its testing features - Let stores initialize with their natural default state
- Don't mock the store being tested
- Ensure Vue reactivity imports are added to store files (computed, ref, watchEffect)
- Place all mock declarations at the top level
- Use factory functions for module mocks to avoid hoisting issues
- Clear mocks between tests to ensure isolation
Development Memories
- We are using tailwind v4 we do not need a tailwind config anymore
- always search the internet for tailwind v4 documentation when making tailwind related style changes