Skip to content

Commit 1641306

Browse files
author
Amrit Borah
committed
chore: bump version
2 parents 58d46c1 + e4b25a6 commit 1641306

22 files changed

Lines changed: 360 additions & 27 deletions

CLAUDE.md

Lines changed: 278 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,278 @@
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

package-lock.json

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@devtron-labs/devtron-fe-common-lib",
3-
"version": "1.22.8-alpha-10",
3+
"version": "1.23.3-alpha-1",
44
"description": "Supporting common component library",
55
"type": "module",
66
"main": "dist/index.js",
Lines changed: 4 additions & 0 deletions
Loading
Lines changed: 3 additions & 0 deletions
Loading

src/Assets/IconV2/ic-bell.svg

Lines changed: 2 additions & 2 deletions
Loading
Lines changed: 10 additions & 0 deletions
Loading
Lines changed: 3 additions & 0 deletions
Loading
Lines changed: 9 additions & 0 deletions
Loading
Lines changed: 3 additions & 19 deletions
Loading

0 commit comments

Comments
 (0)