|
| 1 | +# CLAUDE.md |
| 2 | + |
| 3 | +This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. |
| 4 | + |
| 5 | +## Project Overview |
| 6 | + |
| 7 | +`@devtron-labs/devtron-fe-common-lib` is a React TypeScript component library for the Devtron platform, built with Vite. It provides shared UI components, utilities, and page-level modules consumed by Devtron applications. |
| 8 | + |
| 9 | +## Commands |
| 10 | + |
| 11 | +### Development |
| 12 | +```bash |
| 13 | +npm run dev # Start development server with Vite |
| 14 | +npm run build # Build library with sourcemaps |
| 15 | +npm run build-watch # Build in watch mode for development |
| 16 | +``` |
| 17 | + |
| 18 | +### Linting & Type Checking |
| 19 | +```bash |
| 20 | +npm run lint # Run TypeScript type check and ESLint |
| 21 | +npm run lint-fix # Auto-fix ESLint issues |
| 22 | +npx tsc --noEmit # Run TypeScript type check only |
| 23 | +``` |
| 24 | + |
| 25 | +### Asset Generation |
| 26 | +```bash |
| 27 | +npm run generate-icon # Generate Icon.tsx from SVG files in IconV2/ |
| 28 | +npm run generate-illustration # Generate Illustration.tsx from SVG files in Illustration/ |
| 29 | +``` |
| 30 | + |
| 31 | +Note: These scripts run automatically in pre-commit hooks when icon/illustration files are modified. |
| 32 | + |
| 33 | +## Architecture |
| 34 | + |
| 35 | +### Module Organization |
| 36 | + |
| 37 | +The codebase is divided into four main directories under `src/`: |
| 38 | + |
| 39 | +1. **`Common/`** - Core UI components and utilities |
| 40 | + - Reusable components: Checkbox, EmptyState, Progressing, SearchBar, Tooltip, etc. |
| 41 | + - Form components: RadioGroup, DebouncedSearch, CustomTagSelector |
| 42 | + - Layout components: BreadCrumb, Drawer, Modals |
| 43 | + - RJSF (React JSON Schema Form) customizations |
| 44 | + - Shared services, hooks, types, and constants |
| 45 | + |
| 46 | +2. **`Shared/`** - Shared infrastructure |
| 47 | + - **Components/**: 100+ specialized components (CodeEditor, MaterialHistory, FileUpload, etc.) |
| 48 | + - **Providers/**: Context providers (ThemeProvider, UserEmailProvider, MainContextProvider, ImageSelectionUtility) |
| 49 | + - **Services/**: API services, ToastManager, and utilities |
| 50 | + - **Hooks/**: Custom React hooks |
| 51 | + - **Analytics/**: Analytics integration |
| 52 | + - Shared helpers, validations, constants, and types |
| 53 | + |
| 54 | +3. **`Pages/`** - Legacy page-level components |
| 55 | + - Applications (CI/CD pipeline types and components) |
| 56 | + - BulkEdit |
| 57 | + - GlobalConfigurations |
| 58 | + - ResourceBrowser |
| 59 | + |
| 60 | +4. **`Pages-Devtron-2.0/`** - Redesigned pages organized by business domain |
| 61 | + - ApplicationManagement |
| 62 | + - Automation&Enablement |
| 63 | + - CostVisibility |
| 64 | + - DataProtectionManagement |
| 65 | + - GlobalConfiguration |
| 66 | + - GlobalOverview |
| 67 | + - InfrastructureManagement |
| 68 | + - Navigation |
| 69 | + - SecurityCenter |
| 70 | + - Shared |
| 71 | + - SoftwareReleaseManagement |
| 72 | + |
| 73 | +5. **`Assets/`** - Static assets |
| 74 | + - `Icon/`: SVG icons (legacy) |
| 75 | + - `IconV2/`: Modern SVG icons (auto-generated into Icon component) |
| 76 | + - `Illustration/`: SVG illustrations (auto-generated into Illustration component) |
| 77 | + - `Img/`: PNG/JPG images |
| 78 | + - `Sounds/`: Audio files |
| 79 | + |
| 80 | +### Path Aliases |
| 81 | + |
| 82 | +TypeScript path aliases are configured in [tsconfig.json](tsconfig.json): |
| 83 | + |
| 84 | +```typescript |
| 85 | +@Icons/* → src/Assets/Icon/* |
| 86 | +@IconsV2/* → src/Assets/IconV2/* |
| 87 | +@Illustrations/* → src/Assets/Illustration/* |
| 88 | +@Sounds/* → src/Assets/Sounds/* |
| 89 | +@Images/* → src/Assets/Img/* |
| 90 | +@Common/* → src/Common/* |
| 91 | +@Shared/* → src/Shared/* |
| 92 | +@Pages/* → src/Pages/* |
| 93 | +@PagesDevtron2.0/* → src/Pages-Devtron-2.0/* |
| 94 | +``` |
| 95 | +
|
| 96 | +Always use these aliases instead of relative paths when importing across directories. |
| 97 | +
|
| 98 | +### Build Configuration |
| 99 | +
|
| 100 | +The library uses Vite with manual chunk splitting for optimal bundle size ([vite.config.ts](vite.config.ts)): |
| 101 | +
|
| 102 | +- `@react-dates` - Date picker components |
| 103 | +- `@framer-motion` - Animation library |
| 104 | +- `@moment` - Date manipulation |
| 105 | +- `@react-select` - Select components |
| 106 | +- `@react-virtualized-sticky-tree` - Tree component |
| 107 | +- `@code-editor` - CodeMirror and related code editor components |
| 108 | +- `@common-rjsf` - React JSON Schema Form components |
| 109 | +- `@vendor` - All other node_modules |
| 110 | +- `@src-assets-icons` - Icon assets |
| 111 | +- `@src-assets-images` - Image assets |
| 112 | +
|
| 113 | +When adding new large dependencies, consider adding them to the manual chunks configuration to optimize bundle loading. |
| 114 | +
|
| 115 | +## Code Standards |
| 116 | +
|
| 117 | +### Import Restrictions (Enforced by ESLint) |
| 118 | +
|
| 119 | +The following imports are **prohibited**: |
| 120 | +
|
| 121 | +1. **Toast notifications**: Never import from `react-toastify` directly |
| 122 | + ```typescript |
| 123 | + // ❌ DON'T |
| 124 | + import { toast } from 'react-toastify' |
| 125 | +
|
| 126 | + // ✅ DO |
| 127 | + import { ToastManager } from '@Shared/Services' |
| 128 | + ToastManager.showToast(...) |
| 129 | + ``` |
| 130 | +
|
| 131 | +2. **Icons**: Never use `IconBase` directly |
| 132 | + ```typescript |
| 133 | + // ❌ DON'T |
| 134 | + import { IconBase } from '...' |
| 135 | +
|
| 136 | + // ✅ DO |
| 137 | + import { Icon } from '@Shared/Components' |
| 138 | + <Icon name="..." /> |
| 139 | + ``` |
| 140 | +
|
| 141 | +3. **Illustrations**: Never use `IllustrationBase` directly |
| 142 | + ```typescript |
| 143 | + // ❌ DON'T |
| 144 | + import { IllustrationBase } from '...' |
| 145 | +
|
| 146 | + // ✅ DO |
| 147 | + import { Illustration } from '@Shared/Components' |
| 148 | + <Illustration name="..." /> |
| 149 | + ``` |
| 150 | +
|
| 151 | +### Import Order |
| 152 | +
|
| 153 | +ESLint enforces a specific import order (configured in [.eslintrc.cjs](.eslintrc.cjs:116-134)): |
| 154 | +
|
| 155 | +1. React and external packages (`react`, `@?\\w`) |
| 156 | +2. Devtron packages (`@devtron-labs`) |
| 157 | +3. Internal path aliases (`@Common/*`, `@Shared/*`, etc.) |
| 158 | +4. Side effect imports |
| 159 | +5. Relative imports (`../`, `./`) |
| 160 | +6. Style imports (`.css`, `.scss`) |
| 161 | +
|
| 162 | +The `simple-import-sort` plugin will auto-fix import order on save. |
| 163 | +
|
| 164 | +### Component Patterns |
| 165 | +
|
| 166 | +- **Function components**: Use arrow functions for all components (enforced by ESLint) |
| 167 | + ```typescript |
| 168 | + // ✅ DO |
| 169 | + export const MyComponent = () => { ... } |
| 170 | +
|
| 171 | + // ❌ DON'T |
| 172 | + export function MyComponent() { ... } |
| 173 | + ``` |
| 174 | +
|
| 175 | +- **TypeScript**: Strict mode is disabled, but type safety is encouraged |
| 176 | +- **React Query**: Use `@tanstack/react-query` (<5) for data fetching |
| 177 | + - Supports custom meta fields: `showToastError?: boolean` (defaults to `true`) |
| 178 | +
|
| 179 | +### Pre-commit Hooks |
| 180 | +
|
| 181 | +The pre-commit hook ([.husky/pre-commit](.husky/pre-commit)) enforces: |
| 182 | +
|
| 183 | +1. **Icon generation**: If IconV2/ files change, auto-generates `src/Shared/Components/Icon/Icon.tsx` |
| 184 | +2. **Illustration generation**: If Illustration/ files change, auto-generates `src/Shared/Components/Illustration/Illustration.tsx` |
| 185 | +3. **TypeScript check**: `tsc --noEmit` must pass |
| 186 | +4. **Lint-staged**: ESLint check on staged files |
| 187 | +
|
| 188 | +When adding/modifying SVG assets in IconV2/ or Illustration/, the pre-commit hook will automatically regenerate the component files and add them to the commit. |
| 189 | +
|
| 190 | +## Common Tasks |
| 191 | +
|
| 192 | +### Adding a New Icon |
| 193 | +
|
| 194 | +1. Add SVG file to `src/Assets/IconV2/` |
| 195 | +2. Stage changes: `git add src/Assets/IconV2/ic-your-icon.svg` |
| 196 | +3. The pre-commit hook will auto-generate `Icon.tsx` |
| 197 | +4. Use in code: |
| 198 | + ```typescript |
| 199 | + import { Icon } from '@Shared/Components' |
| 200 | + <Icon name="ic-your-icon" /> |
| 201 | + ``` |
| 202 | +
|
| 203 | +### Adding a New Illustration |
| 204 | +
|
| 205 | +1. Add SVG file to `src/Assets/Illustration/` |
| 206 | +2. Stage changes: `git add src/Assets/Illustration/your-illustration.svg` |
| 207 | +3. The pre-commit hook will auto-generate `Illustration.tsx` |
| 208 | +4. Use in code: |
| 209 | + ```typescript |
| 210 | + import { Illustration } from '@Shared/Components' |
| 211 | + <Illustration name="your-illustration" /> |
| 212 | + ``` |
| 213 | +
|
| 214 | +### Working with React Query |
| 215 | +
|
| 216 | +Custom meta fields are available for queries and mutations: |
| 217 | +
|
| 218 | +```typescript |
| 219 | +import { useQuery, useMutation } from '@tanstack/react-query' |
| 220 | +
|
| 221 | +// Suppress error toasts for a specific query |
| 222 | +useQuery({ |
| 223 | + queryKey: ['data'], |
| 224 | + queryFn: fetchData, |
| 225 | + meta: { showToastError: false } // Won't show toast on error |
| 226 | +}) |
| 227 | +
|
| 228 | +// Error toasts are shown by default |
| 229 | +useMutation({ |
| 230 | + mutationFn: updateData, |
| 231 | + // meta: { showToastError: true } is default |
| 232 | +}) |
| 233 | +``` |
| 234 | +
|
| 235 | +### Extending Environment Configuration |
| 236 | +
|
| 237 | +Environment configuration types are defined in [src/index.ts](src/index.ts:21-193) as `customEnv` interface. When adding new environment variables: |
| 238 | +
|
| 239 | +1. Add type to `customEnv` interface |
| 240 | +2. Document with JSDoc comments (especially for feature flags) |
| 241 | +3. Include `@default` value if applicable |
| 242 | +4. Access via `window._env_` in components |
| 243 | +
|
| 244 | +## Testing & CI |
| 245 | +
|
| 246 | +The repository has GitHub Actions workflows: |
| 247 | +
|
| 248 | +- `.github/workflows/ci.yml` - CI checks |
| 249 | +- `.github/workflows/release-package.yml` - Package publishing |
| 250 | +
|
| 251 | +Currently, tests are stubbed (`npm test` exits 0), but the infrastructure supports `@testing-library/react` and `@testing-library/jest-dom`. |
| 252 | +
|
| 253 | +## Key Dependencies |
| 254 | +
|
| 255 | +**UI & Components:** |
| 256 | +- React 17.0.2 |
| 257 | +- @xyflow/react (flow diagrams) |
| 258 | +- chart.js (charts) |
| 259 | +- react-dates (date pickers) |
| 260 | +- react-select 5.8.0 |
| 261 | +- framer-motion (animations) |
| 262 | +
|
| 263 | +**Code Editing:** |
| 264 | +- @uiw/react-codemirror + CodeMirror 6 extensions |
| 265 | +- codemirror-json-schema (JSON/YAML schema validation) |
| 266 | +
|
| 267 | +**Forms:** |
| 268 | +- @rjsf/core 5.13.3 (React JSON Schema Forms) |
| 269 | +
|
| 270 | +**Data Management:** |
| 271 | +- @tanstack/react-query (<5) |
| 272 | +- rxjs 7.8.1 |
| 273 | +
|
| 274 | +**Utilities:** |
| 275 | +- dayjs (date formatting) |
| 276 | +- marked (Markdown rendering) |
| 277 | +- dompurify (HTML sanitization) |
| 278 | +- yaml 2.4.1 |
0 commit comments