@mallardbay/cursor-rules 1.0.14 → 1.0.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,53 @@
1
+ ---
2
+ description: Defines structure, naming, reuse, and dependency guidelines to ensure clean, maintainable, and consistent TypeScript code across the project—favoring pragmatism, proven libraries, and shared conventions.
3
+ alwaysApply: false
4
+ ---
5
+
6
+ # Code Quality Standards
7
+
8
+ ## Code Structure
9
+
10
+ - Maximum file length: 200 lines
11
+ - Maximum function length: 50 lines
12
+ - Naming conventions:
13
+ - Components: PascalCase
14
+ - Functions: camelCase
15
+ - Constants: UPPER_SNAKE_CASE
16
+ - Types: PascalCase
17
+ - Types should be defined at the bottom of files
18
+ - PropTypes should be defined before component definitions
19
+ - Prefer using alias for importing components. Only use relative for tests or when there's a direct sibling
20
+
21
+ ## Code Reuse
22
+
23
+ - Use shared libraries to avoid duplication
24
+ - Primary libraries to use:
25
+ - [@mallardbay/lib-react-components](mdc:package.json)
26
+ - [@mallardbay/lib-shared-helpers](mdc:package.json)
27
+
28
+ ## Third party libraries
29
+
30
+ - Favor battle-tested libraries over custom solutions. If a well-maintained, widely-used library solves the problem cleanly, use it. Reinventing functionality that’s already solid, reliable, and well-documented usually leads to more bugs, more maintenance, and wasted time.
31
+ - Prioritize stability and ecosystem fit. Pick libraries that are actively maintained, have strong adoption, and fit well within our existing tech stack. Avoid fringe or unmaintained packages unless there’s a strong reason.
32
+ - Suggest existing libraries during code review. If you spot hand-rolled code that could be replaced with a proven library, flag it. Examples:
33
+ - Use zod or yup instead of custom input validation
34
+ - Use date-fns instead of writing date math from scratch
35
+ - Use radash for utility-heavy logic if readability or testability improves
36
+ - Use react-hook-form for complex form state handling
37
+ - Be pragmatic. Sometimes a simple custom solution is faster and easier than pulling in a heavy dependency—but always weigh short-term gains against long-term cost.
38
+ - Make reuse easy. If we do build something custom, design it to be clean, reusable, and well-documented. That way, we’re not creating another wheel, but investing in something worth maintaining.
39
+
40
+ ## String Constants
41
+
42
+ - Use constants instead of string literals for:
43
+ - Copy text (UI content). Most projects have a `copy-constants` file
44
+ - Test IDs. Most projects have `TEST_IDS` defined
45
+ - Error messages
46
+ - URLs
47
+ - Source constants from:
48
+ - @mallardbay/lib-shared-helpers
49
+ - Local constants files
50
+
51
+ ## Cursor Rules
52
+
53
+ - Suggest cursor rules as needed
@@ -0,0 +1,46 @@
1
+ ---
2
+ description: Outlines expectations for pull request size, test coverage, documentation, and review process—promoting focused, well-tested, and maintainable contributions that align with team standards and improve review efficiency.
3
+ alwaysApply: false
4
+ ---
5
+
6
+ # Code Review Standards
7
+
8
+ ## Pull Request Guidelines
9
+
10
+ ### Size Requirements
11
+
12
+ - Maximum PR size: 400 lines
13
+ - Split large changes into smaller, focused PRs
14
+ - Keep changes atomic and focused
15
+ - Consider impact on review process
16
+
17
+ ## Testing Requirements
18
+
19
+ Ensure comprehensive test coverage:
20
+
21
+ ### Test Coverage
22
+
23
+ - All new code must include tests
24
+ - Follow testing standards in [testing.mdc](mdc:.cursor/rules/testing.mdc)
25
+ - Include unit tests for new functionality
26
+ - Avoid making a ton of changes to existing tests while refactoring
27
+
28
+ ### Code Documentation
29
+
30
+ - Document complex logic with comments
31
+ - Explain non-obvious implementation details
32
+ - Document features added and important caveats in README
33
+
34
+ ### Review Process
35
+
36
+ - Review for code quality
37
+ - Check for test coverage
38
+ - Verify documentation
39
+ - Ensure adherence to project standards
40
+
41
+ ## Best Practices
42
+
43
+ - Keep PRs focused and manageable
44
+ - Include clear PR descriptions
45
+ - Reference related issues/tickets
46
+ - Respond to review comments promptly
@@ -0,0 +1,48 @@
1
+ ---
2
+ description: Defines consistent patterns for API and form error handling—focusing on clear user feedback, robust validation, and reliable logging to improve user experience, developer debugging, and overall app resilience.
3
+ alwaysApply: false
4
+ ---
5
+
6
+ # Error Handling Standards
7
+
8
+ ## API Error Handling
9
+
10
+ Implement comprehensive API error handling
11
+
12
+ ### Error Types
13
+
14
+ - Handle network errors
15
+ - Handle server errors
16
+ - Handle validation errors
17
+ - Handle Apollo-specific errors
18
+
19
+ ### Error Presentation
20
+
21
+ - Show error toasts for user feedback
22
+ - Use original error messages when appropriate
23
+ - Provide clear, actionable error messages
24
+ - Log errors for debugging
25
+
26
+ ## Form Validation
27
+
28
+ Implement robust form validation
29
+
30
+ - Validate all user inputs
31
+ - Show validation errors clearly
32
+ - Handle form submission errors
33
+ - Use [@hookform/resolvers](mdc:package.json) for validation
34
+
35
+ ### Error Display
36
+
37
+ - Show validation errors inline
38
+ - Provide clear error messages
39
+ - Highlight invalid fields
40
+ - Prevent form submission with invalid data
41
+
42
+ ## Best Practices
43
+
44
+ - Use try-catch blocks appropriately
45
+ - Implement proper error boundaries
46
+ - Log errors for debugging
47
+ - Provide user-friendly error messages
48
+ - Handle edge cases gracefully
@@ -0,0 +1,163 @@
1
+ ---
2
+ description: Core development principles and best practices that always apply—optimized for AI agents to produce clean, maintainable, reviewable code with low cognitive complexity, clear semantics, and incremental changes.
3
+ alwaysApply: true
4
+ ---
5
+
6
+ # General Best Practices
7
+
8
+ These principles apply to all code changes and should guide every implementation decision.
9
+
10
+ ## Core Principles
11
+
12
+ ### DRY (Don't Repeat Yourself)
13
+ - Extract common logic into reusable functions, utilities, or shared modules
14
+ - Leverage existing patterns and utilities before creating new ones
15
+ - When duplicating code, ask: "Can this be abstracted?"
16
+ - Prefer composition and shared utilities over copy-paste solutions
17
+
18
+ ### Leverage Existing Patterns
19
+ - **Always** search the codebase for similar implementations before creating new code
20
+ - Follow established patterns, conventions, and architectural decisions
21
+ - Use existing utilities, helpers, and shared libraries
22
+ - Match the style and structure of related files
23
+ - When patterns exist, use them consistently—don't invent new approaches without justification
24
+
25
+ ### Incremental Changes
26
+ - **Minimize large changes in a single PR or commit**
27
+ - Break large features into smaller, testable increments
28
+ - Make changes that are easy to review and understand
29
+ - Prefer multiple small PRs over one massive change
30
+ - Each change should be independently testable and reviewable
31
+ - If a change touches many files, consider splitting it into logical phases
32
+
33
+ ### Semantic Clarity
34
+ - Use **semantic, self-documenting names** for functions, variables, and types
35
+ - Function names should clearly describe what they do (e.g., `calculateTotalPrice` not `calc`)
36
+ - Variable names should express intent (e.g., `userAccountBalance` not `bal`)
37
+ - Terminology should be consistent across the codebase
38
+ - Avoid abbreviations unless they're widely understood in the domain
39
+ - Names should make code readable without comments
40
+
41
+ ### Cognitive Complexity
42
+ - **Keep cognitive complexity low**—code should be easy to understand at a glance
43
+ - Prefer early returns and guard clauses over deep nesting
44
+ - Break complex logic into smaller, well-named functions
45
+ - Maximum nesting depth: 3 levels
46
+ - Use intermediate variables to clarify intent
47
+ - Extract complex conditionals into named boolean functions
48
+ - Avoid deeply nested ternaries—use if/else or extract to function
49
+
50
+ ### Separation of Concerns
51
+ - **Files**: Each file should have a single, clear responsibility
52
+ - **Functions**: Each function should do one thing well
53
+ - Separate business logic from presentation, data access, and side effects
54
+ - Keep UI components focused on rendering and user interaction
55
+ - Extract business logic into pure functions or services
56
+ - Avoid god objects or functions that do too much
57
+
58
+ ## Code Quality Standards
59
+
60
+ ### Avoid "AI Slop"
61
+ - **Write code that's easy for humans to review**
62
+ - Avoid generating large amounts of code without understanding context
63
+ - Don't create unnecessary abstractions or over-engineered solutions
64
+ - Remove unused code, imports, and dead branches
65
+ - Clean up commented-out code and debugging statements
66
+ - If an approach doesn't work, **clean up failed attempts** before trying another
67
+ - Keep only relevant, working code—remove experimental code that didn't pan out
68
+
69
+ ### Testing and Linting
70
+ - **Lint and test files related to your changes** before completing work
71
+ - Run linters on modified files and fix issues
72
+ - Run tests for affected modules, not the entire test suite unnecessarily
73
+ - For large changes: **use test sharding**—split tests across multiple runs
74
+ - **Do not run all tests in parallel** when dealing with many changes
75
+ - Tests should be **clear, fast, and minimize setup duplication**
76
+ - Use shared test utilities and fixtures to reduce boilerplate
77
+ - Each test should be independent and runnable in isolation
78
+
79
+ ### Code Organization
80
+ - Group related functionality together
81
+ - Keep related code close (cohesion)
82
+ - Minimize dependencies between modules (loose coupling)
83
+ - Use appropriate data structures for the problem
84
+ - Prefer composition over inheritance
85
+ - Make functions pure when possible (no side effects)
86
+ - Handle edge cases explicitly—don't rely on implicit behavior
87
+
88
+ ### Type Safety and Clarity
89
+ - Use TypeScript types effectively—avoid `any` unless necessary
90
+ - Make types explicit and meaningful
91
+ - Use const assertions and readonly where appropriate
92
+ - Prefer `const` over `let`, avoid `var`
93
+ - Use type guards and discriminated unions for type narrowing
94
+
95
+ ### Performance Considerations
96
+ - Consider performance implications, but **avoid premature optimization**
97
+ - Profile before optimizing—optimize bottlenecks, not everything
98
+ - Use appropriate algorithms and data structures
99
+ - Avoid unnecessary re-renders, re-computations, or API calls
100
+ - Cache expensive computations when appropriate
101
+
102
+ ## AI Agent Workflow
103
+
104
+ ### Before Making Changes
105
+ 1. **Create a plan** before making changes directly—outline the approach, identify affected files, and break down the work into steps
106
+ 2. **Read existing code** to understand patterns and context
107
+ 3. **Search the codebase** for similar implementations
108
+ 4. **Check git history** to understand why code exists as it does
109
+ 5. **Identify related files** that might be affected
110
+ 6. **Ask clarifying questions** if requirements are unclear
111
+
112
+ ### During Implementation
113
+ 1. Make **small, incremental changes**
114
+ 2. **Test as you go**—verify each change works before moving on
115
+ 3. **Lint frequently**—don't accumulate lint errors
116
+ 4. **Follow existing patterns**—don't reinvent the wheel
117
+ 5. **Use semantic names**—code should be self-documenting
118
+ 6. **Keep functions focused**—one responsibility per function
119
+ 7. **Extract common logic**—don't duplicate code
120
+
121
+ ### After Making Changes
122
+ 1. **Clean up failed attempts**—remove experimental code
123
+ 2. **Remove unused code**—imports, variables, functions
124
+ 3. **Run linters** on modified files
125
+ 4. **Run relevant tests**—not the entire suite unless necessary
126
+ 5. **Verify the change works** end-to-end
127
+ 6. **Check for side effects**—ensure changes don't break unrelated code
128
+
129
+ ### When Changes Are Large
130
+ 1. **Consider splitting** into multiple smaller PRs
131
+ 2. **Use test sharding**—run tests in batches, not all at once
132
+ 3. **Review incrementally**—make sure each part works before moving on
133
+ 4. **Document the approach**—explain why changes are structured this way
134
+ 5. **Check impact** on related systems and files
135
+
136
+ ## Anti-Patterns to Avoid
137
+
138
+ - ❌ Copy-pasting code instead of extracting to a function
139
+ - ❌ Creating new patterns when existing ones work
140
+ - ❌ Making massive changes in one go
141
+ - ❌ Using vague names like `data`, `temp`, `value`, `thing`
142
+ - ❌ Deeply nested conditionals and loops
143
+ - ❌ Functions that do multiple unrelated things
144
+ - ❌ Leaving commented-out code or debugging statements
145
+ - ❌ Skipping tests or linting "to save time"
146
+ - ❌ Running entire test suite for small changes
147
+ - ❌ Leaving experimental code after failed attempts
148
+ - ❌ Premature optimization without profiling
149
+ - ❌ Using `any` types to avoid type errors
150
+ - ❌ Magic numbers or strings without constants
151
+
152
+ ## Remember
153
+
154
+ **Code is read far more often than it's written.** Write code that:
155
+ - Is easy to understand
156
+ - Is easy to review
157
+ - Is easy to test
158
+ - Is easy to modify
159
+ - Follows established patterns
160
+ - Has clear semantics
161
+ - Minimizes cognitive load
162
+
163
+ When in doubt, prefer clarity and simplicity over cleverness.
@@ -0,0 +1,23 @@
1
+ ---
2
+ description: Describes Mallard Bay’s mission to simplify and scale outfitter operations through purpose-built software—emphasizing real-world impact, outfitter collaboration, and a long-term vision to digitize and unify the outdoor experience industry.
3
+ globs:
4
+ alwaysApply: true
5
+ ---
6
+
7
+ # Mallard Bay: Outfitter Management System Overview
8
+
9
+ Mallard Bay is a specialized platform designed to streamline operations for outfitters—businesses that offer guided outdoor experiences such as hunting, fishing, and eco-tourism. At its core, Mallard Bay operates as an outfitter management system, purpose-built to reduce administrative burden, improve customer experience, and unlock new revenue channels for guides and lodge operators.
10
+
11
+ # Built for Outfitters, with Outfitters in Mind
12
+
13
+ At Mallard Bay, we’re not just building software — we’re solving real problems for real people in the outfitting industry. Every feature we ship is grounded in one simple principle: if it doesn’t make an outfitter’s life easier or their business better, it doesn’t belong in our product.
14
+
15
+ We work closely with outfitters of all sizes to understand their workflows, pain points, and growth challenges. From there, we prioritize meaningful features that drive efficiency, boost bookings, and enhance the guest experience.
16
+
17
+ Whether it’s reducing no-shows with smart reminders, saving time through automated group booking tools, or enabling instant rebooking with dynamic availability, we’re laser-focused on delivering value — not fluff.
18
+
19
+ We’re building tools that fit into the way outfitters actually work — not the way a generic booking platform thinks they should.
20
+
21
+ # Vision
22
+
23
+ Mallard Bay aims to be the digital backbone for the outfitting industry—a single source of truth for trip logistics, customer interaction, and business growth. The long-term goal is to transform an analog, fragmented market into a digital-first, scalable ecosystem.
@@ -0,0 +1,45 @@
1
+ ---
2
+ description: Defines best practices for optimizing React components, rendering efficiency, and dependency management—focusing on minimizing re-renders, reducing bundle size, and enabling smooth user experiences through memoization, lazy loading, and performance-aware development.
3
+ alwaysApply: false
4
+ ---
5
+
6
+ # Performance Standards
7
+
8
+ ## React Optimization
9
+
10
+ Optimize React components for better performance:
11
+
12
+ ### Component Optimization
13
+
14
+ - Use `React.memo` for pure components
15
+ - Implement `useCallback` for function props
16
+ - Use `useMemo` for expensive computations
17
+ - Avoid inline function definitions in render
18
+
19
+ ## Rendering Optimization
20
+
21
+ Prevent unnecessary re-renders:
22
+
23
+ - Avoid inline styles in components
24
+ - Prevent inline object creation in render
25
+ - Use proper key props in lists
26
+ - Memoize complex objects and callbacks
27
+
28
+ ### Dependencies
29
+
30
+ - Prefer existing dependencies over new ones
31
+ - Review [package.json](mdc:package.json) before adding new packages
32
+ - Consider bundle size impact of new dependencies
33
+ - Use tree-shaking friendly imports
34
+
35
+ ## Best Practices
36
+
37
+ - Implement proper code splitting
38
+ - Use lazy loading for routes and large components
39
+ - Optimize images and assets
40
+ - Monitor performance metrics
41
+ - Use React DevTools for performance profiling
42
+
43
+ ## File Patterns
44
+
45
+ These rules apply to all TypeScript and TSX files in the project.
@@ -0,0 +1,71 @@
1
+ ---
2
+ description: Outlines practical, value-driven testing guidelines focused on reliability, developer confidence, and speed. Emphasizes high-impact coverage (not overkill), structured test organization, clear scenarios, and reusable mock/test utilities—enabling fast iteration without sacrificing quality.
3
+ globs:
4
+ alwaysApply: true
5
+ ---
6
+
7
+ # Testing Standards
8
+
9
+ ## Test Coverage and Structure
10
+
11
+ We aim for high-impact test coverage, focused on adding value and improving developer confidence and experience. The priority is to cover critical logic, edge cases, and integration points where bugs would hurt the most. Tests should act as a safety net and enable fast, fearless iteration—not as a box-ticking exercise.
12
+
13
+ We do not chase 100% coverage for its own sake. If a test doesn’t meaningfully reduce risk or help developers move faster, it’s not worth writing. The goal is smart coverage, not maximum coverage—optimize for reliability, clarity, and development speed without overengineering.
14
+
15
+ Avoid e2e tests for UI. Favor unit tests.
16
+
17
+ ### Coverage Requirements
18
+
19
+ - Minimum test coverage: 80%
20
+ - Place tests in `_tests_` directory closest to the file being tested
21
+ - Use `.spec.ts` or `.spec.tsx` file extensions
22
+ - Do NOT Use `.test.ts` or `.test.tsx` file extensions
23
+
24
+ ### Test Organization
25
+
26
+ - Maximum nesting level: 2
27
+ - Use `test` or `it` for test cases
28
+ - Keep tests focused and atomic
29
+ - Follow AAA pattern (Arrange, Act, Assert)
30
+
31
+ ### Required Scenarios
32
+
33
+ - Happy path testing
34
+ - Error case handling
35
+ - Edge case coverage within reason. Optimize for branching logic, and avoid creating nearly identical tests
36
+ - Aim for simplicity
37
+ - All tests must pass before completion
38
+
39
+ ### Test Quality
40
+
41
+ - Write clear, descriptive test names
42
+ - Test one concept per test case
43
+ - Avoid test interdependence
44
+ - Use meaningful assertions
45
+ - Avoid tests that will make the overall run slower
46
+
47
+ ### Component Testing
48
+
49
+ - Use `renderWithProviders` for component tests
50
+ - Use `renderHookWithProviders` for hook tests
51
+ - Avoid mocking dependent components
52
+ - Test component behavior, not implementation
53
+
54
+ ### Mocking Guidelines
55
+
56
+ - Use mock helpers instead of inline mocks
57
+ - Follow existing patterns for:
58
+ - Entity mocks
59
+ - Apollo mocks
60
+ - Provider mocks
61
+ - Keep mocks simple and maintainable
62
+
63
+ ### Test Utilities
64
+
65
+ - Leverage testing utilities from [@testing-library/react](mdc:package.json)
66
+ - Use [@testing-library/jest-dom](mdc:package.json) for DOM assertions
67
+ - Follow established patterns in existing tests
68
+
69
+ ## File Patterns
70
+
71
+ These rules apply to all test files with `.spec.ts` or `.spec.tsx` extensions.
@@ -0,0 +1,27 @@
1
+ ---
2
+ alwaysApply: true
3
+ ---
4
+
5
+ # TypeScript Development Standards
6
+
7
+ ## Type Safety
8
+
9
+ Enforce comprehensive type safety across the codebase:
10
+
11
+ ### Strict Type Checking
12
+
13
+ Be as strictly as possible where it delivers clear value—specifically in preventing bugs and improving the developer experience. The goal is to enforce strong types and catch issues early, without introducing excessive friction or overhead. If a strict setting improves safety, maintainability, or clarity, we’ll use it. If it creates noise or slows down iteration without real benefit, we’ll dial it back. This is about pragmatic strictness, not dogmatism.
14
+
15
+ ### File Organization
16
+
17
+ - Place types at the bottom of files
18
+ - Define PropTypes before component definitions
19
+
20
+ ## Best Practices
21
+
22
+ - Use TypeScript for all new code
23
+ - Leverage TypeScript's type system for better code quality
24
+ - Follow React best practices with TypeScript
25
+ - Use proper type definitions for props and state
26
+ - Utilize TypeScript's utility types when appropriate
27
+ - Suggest existing libaries as needed
@@ -0,0 +1,91 @@
1
+ ---
2
+ description: Defines best practices for building consistent, maintainable, and responsive UI in Mallard Bay projects
3
+ globs:
4
+ alwaysApply: true
5
+ ---
6
+
7
+ # UI Development Standards
8
+
9
+ ## Theme Usage
10
+
11
+ Use theme values consistently across all components:
12
+
13
+ ### Colors
14
+
15
+ - Use theme colors instead of hardcoded values
16
+ - Example: `theme.colors.primary` instead of `'#000000'`
17
+
18
+ ### Spacing
19
+
20
+ - Use theme spacing values for margins and padding
21
+ - Example: `theme.space[4]` instead of `'16px'`
22
+
23
+ ### Typography
24
+
25
+ - Use theme typography settings for text styles
26
+ - Example: `theme.fontSizes.md` instead of `'16px'`
27
+
28
+ ### Borders and border radius
29
+
30
+ - Use theme border styles and radius values
31
+ - Examples: `theme.borders.sm` instead of `'1px solid'`, `theme.radii.md` instead of using px values
32
+
33
+ ## Component Structure
34
+
35
+ Maintain clean and consistent component structure:
36
+
37
+ ### Nesting
38
+
39
+ - Limit component nesting to maximum depth of 3
40
+ - Keep component hierarchy readable and maintainable
41
+
42
+ ### Inline Styles
43
+
44
+ - Limit inline styles to maximum of 2 per component
45
+ - Prefer theme-based styling
46
+
47
+ ### Component Library
48
+
49
+ - Use existing components in @mallardbay/lib-react-components, @mallardbay/lib-react-components is based off Crakra UI v2
50
+ - If no component available in @mallardbay/lib-react-components, create one using Crakra UI and place it under src/components/shared/todo-lib-react-components/ to me moved later
51
+
52
+ ## Responsive Design
53
+
54
+ Ensure responsive and accessible design:
55
+
56
+ ### Breakpoints
57
+
58
+ - Use theme breakpoints for responsive design
59
+ - Implement mobile-first approach
60
+
61
+ ### Spacing
62
+
63
+ - Use responsive spacing values
64
+ - Adapt layouts for different screen sizes
65
+
66
+ ### Animations
67
+
68
+ - Use theme transition values for animations
69
+ - Keep animations smooth and performant
70
+
71
+ ### Rendering
72
+
73
+ - Optimize component rendering
74
+ - Avoid unnecessary re-renders
75
+ - Use React.memo and useMemo when appropriate
76
+ - Avoid defining functions inside components to prevent recreation on each render
77
+ - Move function definitions outside components or use useCallback for event handlers
78
+ - Use useCallback for functions passed as props to child components
79
+ - Use useMemo for expensive computations and complex data transformations
80
+ - Memoize filtered, sorted, or mapped arrays to avoid recalculation on every render
81
+ - Use useMemo for object/array creation that would otherwise be recreated on each render
82
+
83
+ ## File Patterns
84
+
85
+ These rules apply to all TypeScript and TSX files in the project.
86
+
87
+ ## Components
88
+
89
+ - Keep components small and focused on a single responsibility
90
+ - Use functional components with hooks instead of class components
91
+ - Prefer `export default function ImpersonationBox() {` over `function ImpersonationBox(): React.ReactElement | null {` when defining components
@@ -17,8 +17,6 @@ alwaysApply: false
17
17
  - Types should be defined at the bottom of files
18
18
  - PropTypes should be defined before component definitions
19
19
  - Prefer using alias for importing components. Only use relative for tests or when there's a direct sibling
20
- - Exported functions should be at the top of the file, with helpers organized by knowledge domain under.
21
- - React component prop types should be above the component definition.
22
20
 
23
21
  ## Code Reuse
24
22