mirror of https://github.com/buster-so/buster.git
60 lines
2.4 KiB
Plaintext
60 lines
2.4 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/ui` 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
|
|
- `typography/` - Text and typography components
|
|
|
|
## Storybook
|
|
- Each component in this directory should have an assosciated storybook
|
|
- Each storybook story should try to include the args (props) that are assosciated with each component
|
|
- Storybook storys should be title UI/{directory}/{component_name}
|
|
|
|
## Component Dependencies and Imports
|
|
- When a component needs to use another component, prefer relative imports
|
|
- Example:
|
|
```typescript
|
|
// Good
|
|
import { Button } from '../buttons/ui/buttons/Button';
|
|
```
|
|
- Exception: Only use absolute imports (@/) when the relative path would be overly complex (>4 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 `tailwind.css` colors for color-related styling. Only use the colors defined in [tailwind.css](mdc:src/styles/tailwind.css). Do not use the other generic tailwind colors.
|
|
|
|
## Component Implementation
|
|
- Use functional components exclusively
|
|
- Implement proper TypeScript types for props and state
|
|
- Use React.memo() for performance optimization when appropriate
|
|
|
|
##
|
|
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
|
|
|