feat(antd-imports): establish centralized import rules for Ant Design components
- Introduced a new rules file for Ant Design component imports, enforcing the use of centralized imports from `@antd-imports` to enhance tree-shaking, maintainability, and performance. - Updated various components to replace direct imports from 'antd' and '@ant-design/icons' with the centralized import path. - Refactored existing components to utilize memoization and callbacks for improved performance and readability. - Enhanced the billing and configuration components with updated styles and improved user experience.
This commit is contained in:
chamikaJ
237
.cursor/rules/antd-components.mdc
Normal file
237
.cursor/rules/antd-components.mdc
Normal file
@@ -0,0 +1,237 @@
|
||||
---
|
||||
alwaysApply: true
|
||||
---
|
||||
# Ant Design Import Rules for Worklenz
|
||||
|
||||
## 🚨 CRITICAL: Always Use Centralized Imports
|
||||
|
||||
**NEVER import Ant Design components directly from 'antd' or '@ant-design/icons'**
|
||||
|
||||
### ✅ Correct Import Pattern
|
||||
```typescript
|
||||
import { Button, Input, Select, EditOutlined, PlusOutlined } from '@antd-imports';
|
||||
// or
|
||||
import { Button, Input, Select, EditOutlined, PlusOutlined } from '@/shared/antd-imports';
|
||||
```
|
||||
|
||||
### ❌ Forbidden Import Patterns
|
||||
```typescript
|
||||
// NEVER do this:
|
||||
import { Button, Input, Select } from 'antd';
|
||||
import { EditOutlined, PlusOutlined } from '@ant-design/icons';
|
||||
```
|
||||
|
||||
## Why This Rule Exists
|
||||
|
||||
### Benefits of Centralized Imports:
|
||||
- **Better Tree-Shaking**: Optimized bundle size through centralized management
|
||||
- **Consistent React Context**: Proper context sharing across components
|
||||
- **Type Safety**: Centralized TypeScript definitions
|
||||
- **Maintainability**: Single source of truth for all Ant Design imports
|
||||
- **Performance**: Reduced bundle size and improved loading times
|
||||
|
||||
## What's Available in `@antd-imports`
|
||||
|
||||
### Core Components
|
||||
- **Layout**: Layout, Row, Col, Flex, Divider, Space
|
||||
- **Navigation**: Menu, Tabs, Breadcrumb, Pagination
|
||||
- **Data Entry**: Input, Select, DatePicker, TimePicker, Form, Checkbox, InputNumber
|
||||
- **Data Display**: Table, List, Card, Tag, Avatar, Badge, Progress, Statistic
|
||||
- **Feedback**: Modal, Drawer, Alert, Message, Notification, Spin, Skeleton, Result
|
||||
- **Other**: Button, Typography, Tooltip, Popconfirm, Dropdown, ConfigProvider
|
||||
|
||||
### Icons
|
||||
Common icons including: EditOutlined, DeleteOutlined, PlusOutlined, MoreOutlined, CheckOutlined, CloseOutlined, CalendarOutlined, UserOutlined, TeamOutlined, and many more.
|
||||
|
||||
### Utilities
|
||||
- **appMessage**: Centralized message utility
|
||||
- **appNotification**: Centralized notification utility
|
||||
- **antdConfig**: Default Ant Design configuration
|
||||
- **taskManagementAntdConfig**: Task-specific configuration
|
||||
|
||||
## Implementation Guidelines
|
||||
|
||||
### When Creating New Components:
|
||||
1. **Always** import from `@antd-imports` or `@/shared/antd-imports`
|
||||
2. Use `appMessage` and `appNotification` for user feedback
|
||||
3. Apply `antdConfig` for consistent styling
|
||||
4. Use `taskManagementAntdConfig` for task-related components
|
||||
|
||||
### When Refactoring Existing Code:
|
||||
1. Replace direct 'antd' imports with `@antd-imports`
|
||||
2. Replace direct '@ant-design/icons' imports with `@antd-imports`
|
||||
3. Update any custom message/notification calls to use the utilities
|
||||
|
||||
### File Location
|
||||
The centralized import file is located at: `worklenz-frontend/src/shared/antd-imports.ts`
|
||||
|
||||
## Examples
|
||||
|
||||
### Component Creation
|
||||
```typescript
|
||||
import React from 'react';
|
||||
import { Button, Input, Modal, EditOutlined, appMessage } from '@antd-imports';
|
||||
|
||||
const MyComponent = () => {
|
||||
const handleClick = () => {
|
||||
appMessage.success('Operation completed!');
|
||||
};
|
||||
|
||||
return (
|
||||
<Button icon={<EditOutlined />} onClick={handleClick}>
|
||||
Edit Item
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Form Implementation
|
||||
```typescript
|
||||
import { Form, Input, Select, Button, DatePicker } from '@antd-imports';
|
||||
|
||||
const MyForm = () => {
|
||||
return (
|
||||
<Form layout="vertical">
|
||||
<Form.Item label="Name" name="name">
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item label="Type" name="type">
|
||||
<Select options={options} />
|
||||
</Form.Item>
|
||||
<Form.Item label="Date" name="date">
|
||||
<DatePicker />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
## Enforcement
|
||||
|
||||
This rule is **MANDATORY** and applies to:
|
||||
- All new component development
|
||||
- All code refactoring
|
||||
- All bug fixes
|
||||
- All feature implementations
|
||||
|
||||
**Violations will result in code review rejection.**
|
||||
|
||||
### File Path:
|
||||
The centralized file is located at: `worklenz-frontend/src/shared/antd-imports.ts`
|
||||
# Ant Design Import Rules for Worklenz
|
||||
|
||||
## 🚨 CRITICAL: Always Use Centralized Imports
|
||||
|
||||
**NEVER import Ant Design components directly from 'antd' or '@ant-design/icons'**
|
||||
|
||||
### ✅ Correct Import Pattern
|
||||
```typescript
|
||||
import { Button, Input, Select, EditOutlined, PlusOutlined } from '@antd-imports';
|
||||
// or
|
||||
import { Button, Input, Select, EditOutlined, PlusOutlined } from '@/shared/antd-imports';
|
||||
```
|
||||
|
||||
### ❌ Forbidden Import Patterns
|
||||
```typescript
|
||||
// NEVER do this:
|
||||
import { Button, Input, Select } from 'antd';
|
||||
import { EditOutlined, PlusOutlined } from '@ant-design/icons';
|
||||
```
|
||||
|
||||
## Why This Rule Exists
|
||||
|
||||
### Benefits of Centralized Imports:
|
||||
- **Better Tree-Shaking**: Optimized bundle size through centralized management
|
||||
- **Consistent React Context**: Proper context sharing across components
|
||||
- **Type Safety**: Centralized TypeScript definitions
|
||||
- **Maintainability**: Single source of truth for all Ant Design imports
|
||||
- **Performance**: Reduced bundle size and improved loading times
|
||||
|
||||
## What's Available in `@antd-imports`
|
||||
|
||||
### Core Components
|
||||
- **Layout**: Layout, Row, Col, Flex, Divider, Space
|
||||
- **Navigation**: Menu, Tabs, Breadcrumb, Pagination
|
||||
- **Data Entry**: Input, Select, DatePicker, TimePicker, Form, Checkbox, InputNumber
|
||||
- **Data Display**: Table, List, Card, Tag, Avatar, Badge, Progress, Statistic
|
||||
- **Feedback**: Modal, Drawer, Alert, Message, Notification, Spin, Skeleton, Result
|
||||
- **Other**: Button, Typography, Tooltip, Popconfirm, Dropdown, ConfigProvider
|
||||
|
||||
### Icons
|
||||
Common icons including: EditOutlined, DeleteOutlined, PlusOutlined, MoreOutlined, CheckOutlined, CloseOutlined, CalendarOutlined, UserOutlined, TeamOutlined, and many more.
|
||||
|
||||
### Utilities
|
||||
- **appMessage**: Centralized message utility
|
||||
- **appNotification**: Centralized notification utility
|
||||
- **antdConfig**: Default Ant Design configuration
|
||||
- **taskManagementAntdConfig**: Task-specific configuration
|
||||
|
||||
## Implementation Guidelines
|
||||
|
||||
### When Creating New Components:
|
||||
1. **Always** import from `@antd-imports` or `@/shared/antd-imports`
|
||||
2. Use `appMessage` and `appNotification` for user feedback
|
||||
3. Apply `antdConfig` for consistent styling
|
||||
4. Use `taskManagementAntdConfig` for task-related components
|
||||
|
||||
### When Refactoring Existing Code:
|
||||
1. Replace direct 'antd' imports with `@antd-imports`
|
||||
2. Replace direct '@ant-design/icons' imports with `@antd-imports`
|
||||
3. Update any custom message/notification calls to use the utilities
|
||||
|
||||
### File Location
|
||||
The centralized import file is located at: `worklenz-frontend/src/shared/antd-imports.ts`
|
||||
|
||||
## Examples
|
||||
|
||||
### Component Creation
|
||||
```typescript
|
||||
import React from 'react';
|
||||
import { Button, Input, Modal, EditOutlined, appMessage } from '@antd-imports';
|
||||
|
||||
const MyComponent = () => {
|
||||
const handleClick = () => {
|
||||
appMessage.success('Operation completed!');
|
||||
};
|
||||
|
||||
return (
|
||||
<Button icon={<EditOutlined />} onClick={handleClick}>
|
||||
Edit Item
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Form Implementation
|
||||
```typescript
|
||||
import { Form, Input, Select, Button, DatePicker } from '@antd-imports';
|
||||
|
||||
const MyForm = () => {
|
||||
return (
|
||||
<Form layout="vertical">
|
||||
<Form.Item label="Name" name="name">
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item label="Type" name="type">
|
||||
<Select options={options} />
|
||||
</Form.Item>
|
||||
<Form.Item label="Date" name="date">
|
||||
<DatePicker />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
## Enforcement
|
||||
|
||||
This rule is **MANDATORY** and applies to:
|
||||
- All new component development
|
||||
- All code refactoring
|
||||
- All bug fixes
|
||||
- All feature implementations
|
||||
|
||||
**Violations will result in code review rejection.**
|
||||
|
||||
### File Path:
|
||||
The centralized file is located at: `worklenz-frontend/src/shared/antd-imports.ts`
|
||||
Reference in New Issue
Block a user