---
description: Code Style Guidelines
globs: *.tsx, *.ts, *.js
alwaysApply: false
---

# Code Style Guidelines

## Kebab Case for File Names
- For consistency across the project, new files and all files should be named in kebab case (i.e.: "map-component.tsx").

## Import Order
- Organize imports in groups leaving a line between each group.
- Top import should be external or third parties libraries (i.e.: "react", "react-leaflet", "@chakra-ui/react", etc.)
- Second group with slightly less importance than external libraries are the aliased imports (i.e.: "@/types/map.types", "@/hooks/useMapEvents").
- Third group are local relative paths (i.e.: "../components/..").
- Fourth group are media imports.
- Fifth group are css styles imports.

## Example:
```tsx
import React, { useState } from 'react';
import { Button } from '@chakra-ui/react';

import { UserType } from '@/types/user.types';
import { useAuth } from '@/hooks/useAuth';

import { UserProfile } from '../components/user-profile';

import userAvatar from '../assets/avatar.png';

import './styles.css';
```