mirror of https://github.com/buster-so/buster.git
77 lines
2.6 KiB
Plaintext
77 lines
2.6 KiB
Plaintext
---
|
|
description: Rules for the components ui directory
|
|
globs: src/components/ui/**/*
|
|
alwaysApply: false
|
|
---
|
|
|
|
# Component Directory Structure and Organization
|
|
|
|
## Component Purpose
|
|
- This directory contains basic, reusable UI components that serve as building blocks
|
|
- These basic components are designed to be combined and composed into larger feature components
|
|
- Feature components (which combine these basic components) should be placed in their respective feature directories
|
|
- The goal is to maintain a library of simple, pure components that can be easily reused across features
|
|
|
|
## 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/ui/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/ui';
|
|
import { Title } from '@/components/ui';
|
|
```
|
|
|
|
##
|
|
I have a helper called `cn`. This is how I do a tailwind merge and classnames concatination. This is found in import { cn } from '@/lib/classMerge';
|
|
|
|
|
|
## File Naming
|
|
- Use PascalCase for component files
|
|
- File name should match the component name
|
|
|