124 lines
2.5 KiB
Markdown
124 lines
2.5 KiB
Markdown
# Development Standards & Guidelines
|
|
|
|
## Naming Conventions
|
|
|
|
- **Files**: PascalCase for components, camelCase for utilities
|
|
- **Components**: PascalCase (e.g., `UserProfile.tsx`)
|
|
- **Variables**: camelCase (e.g., `userName`)
|
|
- **Constants**: UPPER_SNAKE_CASE (e.g., `API_BASE_URL`)
|
|
- **Types/Interfaces**: PascalCase with descriptive names
|
|
|
|
## Component Architecture
|
|
|
|
**Base Component Structure:**
|
|
|
|
```typescript
|
|
// src/components/common/Button/Button.tsx
|
|
import React from "react";
|
|
import {
|
|
TouchableOpacity,
|
|
Text,
|
|
StyleSheet,
|
|
ViewStyle,
|
|
TextStyle,
|
|
} from "react-native";
|
|
|
|
interface ButtonProps {
|
|
title: string;
|
|
onPress: () => void;
|
|
variant?: "primary" | "secondary" | "outline";
|
|
disabled?: boolean;
|
|
style?: ViewStyle;
|
|
textStyle?: TextStyle;
|
|
}
|
|
|
|
export const Button: React.FC<ButtonProps> = ({
|
|
title,
|
|
onPress,
|
|
variant = "primary",
|
|
disabled = false,
|
|
style,
|
|
textStyle,
|
|
}) => {
|
|
return (
|
|
<TouchableOpacity
|
|
style={[
|
|
styles.button,
|
|
styles[variant],
|
|
disabled && styles.disabled,
|
|
style,
|
|
]}
|
|
onPress={onPress}
|
|
disabled={disabled}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Text style={[styles.text, styles[`${variant}Text`], textStyle]}>
|
|
{title}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
button: {
|
|
paddingHorizontal: 20,
|
|
paddingVertical: 12,
|
|
borderRadius: 8,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
},
|
|
primary: {
|
|
backgroundColor: "#007AFF",
|
|
},
|
|
secondary: {
|
|
backgroundColor: "#6C757D",
|
|
},
|
|
outline: {
|
|
backgroundColor: "transparent",
|
|
borderWidth: 1,
|
|
borderColor: "#007AFF",
|
|
},
|
|
disabled: {
|
|
opacity: 0.5,
|
|
},
|
|
text: {
|
|
fontSize: 16,
|
|
fontWeight: "600",
|
|
},
|
|
primaryText: {
|
|
color: "#FFFFFF",
|
|
},
|
|
secondaryText: {
|
|
color: "#FFFFFF",
|
|
},
|
|
outlineText: {
|
|
color: "#007AFF",
|
|
},
|
|
});
|
|
```
|
|
|
|
## Code Style Guidelines
|
|
|
|
### TypeScript Best Practices
|
|
|
|
1. **Always use strict mode**
|
|
2. **Define interfaces for all props**
|
|
3. **Use proper type annotations**
|
|
4. **Avoid `any` type**
|
|
5. **Use union types for variants**
|
|
|
|
### React Native Specific
|
|
|
|
1. **Use StyleSheet.create() for styles**
|
|
2. **Avoid inline styles when possible**
|
|
3. **Use proper component lifecycle methods**
|
|
4. **Implement proper error boundaries**
|
|
5. **Use React.memo for performance optimization**
|
|
|
|
### File Organization
|
|
|
|
1. **One component per file**
|
|
2. **Index files for clean imports**
|
|
3. **Separate styles in same file**
|
|
4. **Group related components in folders**
|