Skip to content

Commit 117773b

Browse files
honghoangstshonghoangsts
authored
Merge pull request #117 from saigontechnology/develop
merge develop to main
2 parents 4fe61bd + f7f3532 commit 117773b

File tree

205 files changed

+32002
-14420
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

205 files changed

+32002
-14420
lines changed

‎.cursor/rules/accessibility.mdc‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
---
2+
alwaysApply: true
3+
---
4+
# Accessibility Guidelines
5+
6+
## Core Accessibility Requirements
7+
All components must be accessible and follow React Native accessibility best practices.
8+
9+
## Required Accessibility Props
10+
- `testID` - For automated testing and element identification
11+
- `accessible` - Mark components as accessible elements
12+
- `accessibilityLabel` - Descriptive text for screen readers
13+
- `accessibilityHint` - Additional context when needed
14+
- `accessibilityRole` - Semantic role (button, text, image, etc.)
15+
- `accessibilityState` - Dynamic states (disabled, selected, checked)
16+
17+
## Component-Specific Guidelines
18+
19+
### Interactive Components (Button, TouchableOpacity)
20+
```typescript
21+
<Button
22+
testID="submit-button"
23+
accessibilityRole="button"
24+
accessibilityLabel="Submit form"
25+
accessibilityHint="Submits the current form data"
26+
accessibilityState={{disabled: isDisabled}}
27+
>
28+
Submit
29+
</Button>
30+
```
31+
32+
### Form Elements (TextInput, Checkbox, RadioButton)
33+
```typescript
34+
<TextInput
35+
testID="email-input"
36+
accessibilityRole="textbox"
37+
accessibilityLabel="Email address"
38+
accessibilityHint="Enter your email address"
39+
placeholder="email@example.com"
40+
/>
41+
42+
<Checkbox
43+
testID="agree-checkbox"
44+
accessibilityRole="checkbox"
45+
accessibilityLabel="Agree to terms"
46+
accessibilityState={{checked: isChecked}}
47+
/>
48+
```
49+
50+
### Informational Components (Text, Icon)
51+
```typescript
52+
<Icon
53+
name="warning"
54+
accessibilityRole="image"
55+
accessibilityLabel="Warning icon"
56+
/>
57+
58+
<Text
59+
accessibilityRole="text"
60+
testID="error-message"
61+
>
62+
Error: Invalid input
63+
</Text>
64+
```
65+
66+
## Color and Contrast
67+
- Ensure sufficient color contrast (WCAG 2.1 AA standards)
68+
- Don't rely solely on color to convey information
69+
- Support high contrast mode preferences
70+
- Test in both light and dark themes
71+
72+
## Focus Management
73+
- Ensure proper focus order for keyboard navigation
74+
- Provide visible focus indicators
75+
- Handle focus trapping in modals/overlays
76+
- Support focus management in complex components
77+
78+
## Screen Reader Support
79+
- Provide meaningful content descriptions
80+
- Use semantic HTML equivalents where possible
81+
- Group related elements with proper labeling
82+
- Handle dynamic content announcements
83+
84+
## Testing Accessibility
85+
- Test with screen readers (TalkBack on Android, VoiceOver on iOS)
86+
- Verify keyboard navigation works properly
87+
- Check color contrast ratios
88+
- Test with high contrast and large text settings
89+
- Use accessibility inspector tools
90+
91+
## Common Patterns
92+
```typescript
93+
// Grouping related elements
94+
<View
95+
accessibilityRole="group"
96+
accessibilityLabel="User profile section"
97+
>
98+
<Text accessibilityRole="header">Profile</Text>
99+
<Text>User details...</Text>
100+
</View>
101+
102+
// Custom accessibility announcements
103+
const announceChange = (message: string) => {
104+
AccessibilityInfo.announceForAccessibility(message)
105+
}
106+
107+
// Conditional accessibility
108+
<Button
109+
accessibilityLabel={isLoading ? "Loading..." : "Submit"}
110+
accessibilityState={{busy: isLoading}}
111+
>
112+
{isLoading ? "Loading..." : "Submit"}
113+
</Button>
114+
```
115+
116+
## Documentation Requirements
117+
- Document accessibility features in component README files
118+
- Include accessibility examples in component demos
119+
- Test and document keyboard shortcuts where applicable

‎.cursor/rules/component-development.mdc‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
---
2+
alwaysApply: true
3+
---
4+
# Component Development Standards
5+
6+
## Component Structure Guidelines
7+
8+
### File Organization
9+
10+
- Each component should have its own directory under `src/components/`
11+
- Use PascalCase for component names and file names
12+
- Include these files in each component directory:
13+
- Main component file (e.g., `Button.tsx`)
14+
- Variant components (e.g., `ButtonPrimary.tsx`, `ButtonOutline.tsx`)
15+
- `index.ts` for barrel exports
16+
- `README.md` for component documentation
17+
- Type definitions file if complex (e.g., `types.ts`)
18+
19+
### Component Implementation
20+
21+
- Use functional components with TypeScript
22+
- Export component props interface with descriptive naming (e.g., `ButtonProps`)
23+
- Use styled-components for styling with theme integration
24+
- Import theme types: `import type {ITheme} from '../../theme'`
25+
- Use theme-aware styling: `${({theme}) => theme.colors.primary}`
26+
27+
### Prop Design
28+
29+
- Use clear, descriptive prop names
30+
- Provide sensible defaults
31+
- Support common React Native props (style, testID, etc.)
32+
- Use discriminated unions for variant props when appropriate
33+
- Document complex props with JSDoc comments
34+
35+
### Export Pattern
36+
37+
```typescript
38+
// In component directory index.ts
39+
export * from './ComponentName'
40+
export * from './ComponentVariant'
41+
42+
// In main components/index.ts
43+
export * from './ComponentName'
44+
```
45+
46+
### Styling Best Practices
47+
48+
- Use theme values consistently
49+
- Support responsive design through theme breakpoints
50+
- Implement proper focus states and accessibility
51+
- Use semantic color names from theme
52+
- Support both light and dark themes
53+
54+
### Example Component Structure
55+
56+
```typescript
57+
interface ButtonProps {
58+
variant?: 'primary' | 'secondary' | 'outline'
59+
size?: 'sm' | 'md' | 'lg'
60+
disabled?: boolean
61+
children: React.ReactNode
62+
onPress?: () => void
63+
// ... other props
64+
}
65+
66+
export const Button: React.FC<ButtonProps> = ({variant = 'primary', size = 'md', ...props}) => {
67+
// Implementation
68+
}
69+
```

‎.cursor/rules/development-workflow.mdc‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
---
2+
alwaysApply: true
3+
---
4+
# Development Workflow
5+
6+
## Development Scripts
7+
Available scripts from [package.json](mdc:package.json):
8+
9+
### Code Quality
10+
- `yarn lint` - Run all linting checks (ESLint, Prettier, TypeScript)
11+
- `yarn lint:fix` - Auto-fix linting issues
12+
- `yarn typecheck` - TypeScript type checking only
13+
- `yarn format` - Format code with Prettier
14+
15+
### Testing
16+
- `yarn test` - Run Jest tests
17+
- `yarn update-test` - Update Jest snapshots
18+
- Coverage reports generated in `coverage/` directory
19+
20+
### Building
21+
- `yarn prepack` - Build library for distribution using react-native-builder-bob
22+
- Outputs: `lib/commonjs/`, `lib/module/`, `lib/typescript/`
23+
- Build config in `react-native-builder-bob` section of package.json
24+
25+
### Example App
26+
- `yarn example` - Navigate to example directory
27+
- `yarn bootstrap` - Set up development environment
28+
- Example app uses Expo for testing components
29+
30+
## Git Workflow
31+
- Uses Husky for git hooks
32+
- Lint-staged for pre-commit formatting
33+
- Conventional commits with commitlint
34+
- Release process with release-it
35+
36+
## Development Environment Setup
37+
1. `yarn install` - Install dependencies
38+
2. `yarn bootstrap` - Set up example app
39+
3. `yarn example ios` or `yarn example android` - Run example app
40+
41+
## Code Quality Standards
42+
- ESLint with React Native configuration
43+
- Prettier for code formatting
44+
- Strict TypeScript configuration
45+
- 100% import/export consistency
46+
47+
## Build Targets
48+
- CommonJS (`lib/commonjs/`) - for Node.js environments
49+
- ES Modules (`lib/module/`) - for modern bundlers
50+
- TypeScript definitions (`lib/typescript/`) - for type checking
51+
52+
## Release Process
53+
- Uses release-it with conventional changelog
54+
- Automatic version bumping based on commit messages
55+
- GitHub releases with generated changelogs
56+
- NPM publishing with proper registry configuration
57+
58+
## File Watching and Development
59+
- Use `yarn example start` for live development
60+
- Metro bundler for React Native hot reloading
61+
- TypeScript compilation in watch mode during development

0 commit comments

Comments
 (0)