mirror of https://github.com/buster-so/buster.git
69 lines
2.1 KiB
Plaintext
69 lines
2.1 KiB
Plaintext
|
---
|
||
|
|
description: Rules for the components directory
|
||
|
|
globs: src/components/**/*
|
||
|
|
---
|
||
|
|
|
||
|
|
# Component Directory Structure and Organization
|
||
|
|
|
||
|
|
## Directory Organization
|
||
|
|
- Each directory within `src/components` should represent a specific category of components
|
||
|
|
- Directory names should clearly indicate the type of components contained within
|
||
|
|
- Examples:
|
||
|
|
- `buttons/` - Button components
|
||
|
|
- `inputs/` - Input field components
|
||
|
|
- `card/` - Card and container components
|
||
|
|
- `icons/` - Icon components
|
||
|
|
- `layout/` - Layout-related components
|
||
|
|
- `text/` - Text and typography components
|
||
|
|
|
||
|
|
## Component Dependencies and Imports
|
||
|
|
- When a component needs to use another component, prefer relative imports
|
||
|
|
- Example:
|
||
|
|
```typescript
|
||
|
|
// Good
|
||
|
|
import { IconButton } from '../buttons/IconButton';
|
||
|
|
|
||
|
|
// Avoid
|
||
|
|
import { IconButton } from '@/components/buttons/IconButton';
|
||
|
|
```
|
||
|
|
- Exception: Only use absolute imports (@/) when the relative path would be overly complex (>3 levels deep)
|
||
|
|
|
||
|
|
## Styling Guidelines
|
||
|
|
1. Primary Styling Method:
|
||
|
|
- Use Tailwind CSS for general styling and layout
|
||
|
|
- Class names should follow Tailwind's utility-first approach
|
||
|
|
|
||
|
|
2. Color Management:
|
||
|
|
- Always use `createStyles` from antd-style for color-related styling
|
||
|
|
- Access theme colors through the token system
|
||
|
|
- Example:
|
||
|
|
```typescript
|
||
|
|
const useStyles = createStyles(({ token, css }) => {
|
||
|
|
return {
|
||
|
|
container: css`
|
||
|
|
border: 0.5px solid ${token.colorBorderSecondary};
|
||
|
|
background: ${token.colorBgContainer};
|
||
|
|
`
|
||
|
|
};
|
||
|
|
});
|
||
|
|
```
|
||
|
|
|
||
|
|
3. Border Rules:
|
||
|
|
- When using borders with createStyles, always use 0.5px as the border width
|
||
|
|
- Access border colors through the token system
|
||
|
|
|
||
|
|
## Component Implementation
|
||
|
|
- Use functional components exclusively
|
||
|
|
- Implement proper TypeScript types for props and state
|
||
|
|
- Use React.memo() for performance optimization when appropriate
|
||
|
|
- Import text elements from dedicated components:
|
||
|
|
```typescript
|
||
|
|
import { Text } from '@/components/text';
|
||
|
|
import { Title } from '@/components/text';
|
||
|
|
```
|
||
|
|
|
||
|
|
## File Naming
|
||
|
|
- Use PascalCase for component files
|
||
|
|
- File name should match the component name
|
||
|
|
|