-
Notifications
You must be signed in to change notification settings - Fork 93
Expand file tree
/
Copy pathproject-conventions.mdc
More file actions
132 lines (96 loc) Β· 3.72 KB
/
project-conventions.mdc
File metadata and controls
132 lines (96 loc) Β· 3.72 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
---
description: General project conventions for the React Native TypeScript boilerplate. Apply to all files.
globs: ["**/*.ts", "**/*.tsx"]
alwaysApply: true
---
# Project Conventions
## File & Directory Naming
- React component files: `PascalCase.tsx` (e.g. `HomeScreen.tsx`, `RNButton.tsx`)
- Style files: co-located with the component as `PascalCase.style.ts`
- Non-component TypeScript files: `camelCase.ts` (e.g. `useAIChat.ts`, `index.ts`)
- Directories: `kebab-case` (e.g. `ai-chat/`, `empty-state/`, `card-item/`)
- Shared component directories: named after the component in kebab-case under `src/shared/components/`
## Path Aliases β Always Use Over Relative Paths
Never write `../../..` imports when an alias covers it. All aliases:
```
@shared-components β src/shared/components
@shared-constants β src/shared/constants
@services/* β src/services/*
@screens/* β src/screens/*
@hooks β src/hooks/index
@models β src/services/models
@theme/* β src/shared/theme/*
@fonts β src/shared/theme/fonts
@font-size β src/shared/theme/font-size
@colors β src/shared/theme/colors
@utils β src/utils
@assets β src/assets
@event-emitter β src/services/event-emitter
```
After adding a new alias to `babel.config.js` + `tsconfig.json`, run:
```bash
npm run start:fresh
```
## Import Order (enforced by Prettier)
1. External packages (`react`, `react-native`, third-party libs)
2. Path alias imports (`@services/...`, `@shared-components/...`)
3. Relative imports (only when no alias covers it)
## Colors β Never Hardcode
```typescript
// WRONG
backgroundColor: "#4A6CF7"
// CORRECT
const { colors } = useTheme();
backgroundColor: colors.primary
```
All palette keys: `primary`, `secondary`, `background`, `card`, `text`, `placeholder`, `borderColor`, `danger`, `white`, `black`, `shadow`, `separator`, `highlight`, `calpyse`, `transparent`, and dark-mode variants.
## Styles Pattern
Every component that needs styles must follow this exact pattern:
```typescript
import { useMemo } from "react";
import { useTheme } from "@react-navigation/native";
import createStyles from "./MyComponent.style";
const MyComponent = () => {
const theme = useTheme();
const styles = useMemo(() => createStyles(theme), [theme]);
// ...
};
```
And the style file:
```typescript
import { StyleSheet } from "react-native";
import type { ExtendedTheme } from "@react-navigation/native";
const createStyles = (theme: ExtendedTheme) => {
const { colors } = theme;
return StyleSheet.create({
// all styles using colors.*
});
};
export default createStyles;
```
## Safe Area
Always import `SafeAreaView` from `react-native-safe-area-context`, never from `react-native`:
```typescript
// CORRECT
import { SafeAreaView } from "react-native-safe-area-context";
// WRONG
import { SafeAreaView } from "react-native";
```
## Touchable Elements
Always use `RNBounceable` instead of `TouchableOpacity` or `Pressable`:
```typescript
import RNBounceable from "@freakycoder/react-native-bounceable";
<RNBounceable onPress={handlePress}>
{/* content */}
</RNBounceable>
```
## Text Elements
Never use bare `<Text>` from react-native. Always use `TextWrapper`:
```typescript
import Text from "@shared-components/text-wrapper/TextWrapper";
<Text h4 bold color={colors.text}>Title</Text>
<Text fontFamily={fonts.montserrat.light} color={colors.placeholder}>Subtitle</Text>
```
Props: `h1`β`h6` (size), `bold`, `italic`, `fontFamily`, `color`, `style`.
## TypeScript Strict Mode
The project uses `strict: true` with `noUnusedLocals` and `noUnusedParameters`. Every declared variable and parameter must be used, or TypeScript will error.