prefix for transient props that shouldn't pass to DOM:\n\n```typescript\nexport const Button = styled.button\u003c{ $isActive?: boolean }\u003e`\n background-color: ${({ $isActive }) =\u003e ($isActive ? '#007bff' : '#6c757d')};\n`;\n```\n\n### Avoid !important\n\n**Never use `!important` in styled-components**. Styled-components handles CSS specificity through component hierarchy. If you need to override styles, use more specific selectors or adjust the component structure:\n\n```typescript\n// ✅ GOOD: Rely on CSS specificity\nexport const IconButton = styled(IconButton)\u003c{ isOpen: boolean }\u003e`\n ${({ isOpen }) =\u003e\n isOpen \u0026\u0026\n css`\n background-color: ${({ theme }) =\u003e\n theme.semantic.color.background.primary200};\n `}\n`;\n\n// ❌ BAD: Using !important\nexport const IconButton = styled(IconButton)`\n background-color: ${({ theme }) =\u003e\n theme.semantic.color.background.primary200} !important;\n`;\n```\n\n### Verify Type System Compatibility\n\nWhen using layout components or other typed components, verify your prop values match the type system:\n\n```typescript\n// Check the component's type definitions\n// FlexGroup accepts: align?: 'center' | 'stretch' | 'baseline' | 'start' | 'end'\n// Use valid values from the type system\n```\n\n## State Management (Redux)\n\n### When to Use What\n\n- **Global State (Redux)**:\n\n - Data shared across multiple components\n - Data persisting across routes\n - Server state (API data)\n - User preferences/settings\n\n- **Local State (useState)**:\n\n - UI state (modals, dropdowns, tabs)\n - Form inputs before submission\n - Component-specific temporary data\n\n- **Derived State (Selectors)**:\n - Computed values from Redux state\n - Filtered/sorted lists\n - Aggregated data\n\n### Redux Toolkit Patterns\n\n#### Slice Structure\n\n- Use `createSlice` from Redux Toolkit\n- Define proper TypeScript types for state\n- Use `PayloadAction\u003cT\u003e` for action typing\n- Handle async with `extraReducers` and thunks\n\n#### Thunks\n\n- Use `createAsyncThunk` for async operations\n- Handle pending, fulfilled, and rejected states\n- Use `rejectWithValue` for error handling\n\n#### Selectors\n\n- Create basic selectors for direct state access\n- Use `createSelector` from `reselect` for memoized/computed values\n- Keep selectors in separate `selectors.ts` file\n\n## React Best Practices\n\n### Performance\n\n- Use `useCallback` for functions passed as props\n- Use `useMemo` for expensive computations\n- Use `React.memo` for expensive components\n- Avoid inline arrow functions in JSX props\n\n### Effect Cleanup\n\nAlways clean up subscriptions, timers, and event listeners in `useEffect` return function.\n\n### Keys in Lists\n\n- Use unique, stable IDs (not array indices)\n- Only use indices if list never reorders and items have no IDs\n\n### Conditional Rendering\n\n- Use early returns for loading/error states\n- Avoid deeply nested ternaries - extract to functions\n\n## Custom Hooks\n\n### Extract Reusable Logic\n\nCreate custom hooks for reusable stateful logic. Store component-specific hooks in the component's `/hooks` directory.\n\n## Form Handling\n\nUse Formik with Yup for validation. Keep form logic in custom hooks when complex.\n\n## UI Components\n\n**⚠️ IMPORTANT**:\n\n- We are **deprecating Elastic UI** components\n- Migrating to **Redis UI** (`@redis-ui/*`)\n- **Use internal wrappers** from `uiSrc/components/ui`\n- **DO NOT import directly** from `@redis-ui/*`\n\n### Component Usage\n\n```typescript\n// ✅ GOOD: Import from internal wrappers\nimport { Button, Input, FlexGroup } from 'uiSrc/components/ui';\n\n// ❌ BAD: Don't import directly from @redis-ui\nimport { Button } from '@redis-ui/components';\n\n// ❌ DEPRECATED: Don't use Elastic UI for new code\nimport { EuiButton } from '@elastic/eui';\n```\n\n### Migration Guidelines\n\n- ✅ Use internal wrappers from `uiSrc/components/ui` for all new features\n- ✅ Create internal wrappers for Redis UI components as needed\n- ✅ Replace Elastic UI when touching existing code\n- ❌ Do not import directly from `@redis-ui/*`\n- ❌ Do not add new Elastic UI imports\n\n## Icons\n\n**⚠️ IMPORTANT**: Always use icons from Redis UI library instead of custom SVGs.\n\n### Icon Usage\n\n- **Use Redis UI icons** from `@redis-ui/icons` via `iconRegistry.tsx`\n- Icons are automatically exported via `export * from '@redis-ui/icons'` in `iconRegistry.tsx`\n- Use `RiIcon` component with icon type: `\u003cRiIcon type=\"FolderOpenIcon\" /\u003e`\n- **DO NOT create custom SVG icons** - check if the icon exists in Redis UI library first\n\n### Custom Icons (Exception)\n\nOnly create custom SVG icons if:\n\n- The icon doesn't exist in Redis UI library\n- It's a project-specific icon that won't be added to the library\n\n## Testing Components\n\n### Always Use Shared `renderComponent` Helper\n\n**CRITICAL**: Create a `renderComponent` helper function for each component test file:\n\n```typescript\ndescribe('MyComponent', () =\u003e {\n const defaultProps: MyComponentProps = {\n id: faker.string.uuid(),\n name: faker.person.fullName(),\n onComplete: jest.fn(),\n }\n\n const renderComponent = (propsOverride?: Partial\u003cMyComponentProps\u003e) =\u003e {\n const props = { ...defaultProps, ...propsOverride }\n\n return render(\n \u003cProvider store={store}\u003e\n \u003cMyComponent {...props} /\u003e\n \u003c/Provider\u003e\n )\n }\n\n it('should render', () =\u003e {\n renderComponent()\n // assertions\n })\n})\n```\n\nBenefits:\n\n- Centralized setup and providers\n- Default props in one place\n- Easy prop overrides per test\n- No duplicate render logic\n\n### Testing Redux\n\nCreate a test store with `configureStore` for components connected to Redux.\n\n## Key Principles\n\n1. **Separation of Concerns**: Keep styles, types, constants, logic separate\n2. **Colocate Related Code**: Keep sub-components and hooks close to usage\n3. **Consistent Naming**: Follow conventions across all components\n4. **Type Safety**: Always define proper types, never `any`\n5. **Testability**: Structure for easy testing with `renderComponent` helper\n6. **Styled Components**: Prefer styled-components over SCSS modules\n7. **Layout Components**: Use FlexGroup instead of div for flex containers, pass layout props as component props\n8. **Type Safety**: Verify prop values match component type definitions (e.g., FlexGroup's align/justify values)\n","repo_fullName":"redis/RedisInsight","repo_stars":8492,"repo_language":"TypeScript","repo_license":"NOASSERTION","repo_pushedAt":"2026-06-01T15:49:59Z","owner_login":"redis","owner_type":"Organization","owner_name":"Redis","owner_avatarUrl":"https://avatars.githubusercontent.com/u/1529926?v=4"}};