Create component structure, implement functionality, apply design tokens, and add accessibility.

Development Phase

Overview

The development phase is where our planning transforms into actual code. Following a structured approach helps ensure components are consistent, maintainable, and aligned with our quality standards. Each step in this phase builds upon the previous one, creating a systematic workflow that promotes high-quality outcomes.

The Development Phase

Step 4: Create Component Structure

Every component in our system follows a consistent file structure that promotes maintainability, clear separation of concerns, and testability. This structure allows developers to quickly understand where to find specific functionality and how to extend components.

The standard file structure for components follows this pattern:

ui/[category]/[ComponentName]/
├── [ComponentName].tsx     # Main component implementation
├── types.ts                # TypeScript interfaces and types
├── index.ts                # Public exports
├── [ComponentName].test.tsx # Unit tests
├── hooks.ts                # Custom hooks (if needed)
├── utils.ts                # Helper functions (if needed)
└── styles.ts               # Component-specific styles (if needed)

This structure scales well from simple components to complex ones, allowing you to add files only when necessary while maintaining a consistent organization.

AI Collaboration: Structure Creation

AI can be particularly helpful in scaffolding component structure, generating boilerplate code, and ensuring files follow team conventions. The prompt below helps AI create a consistent component structure.

# Create Component Structure
 
Please create the file structure for a new React Native component with the following details:
 
## Component Information
- Name: [ComponentName]
- Category: [foundation/patterns/business]
- Purpose: [Brief description of component purpose]
 
## File Structure
Please create the following files with appropriate boilerplate code:
 
1. ui/[category]/[ComponentName]/[ComponentName].tsx
2. ui/[category]/[ComponentName]/types.ts
3. ui/[category]/[ComponentName]/index.ts
4. ui/[category]/[ComponentName]/[ComponentName].test.tsx
 
## Requirements
- Use TypeScript for all files
- Follow our project's naming conventions (PascalCase for components)
- Include JSDoc comments for all props and functions
- Implement proper type exports in types.ts
- Create barrel exports in index.ts
- Set up basic Jest tests in the test file

Step 5: Implement Component

Component implementation is where planning becomes reality. Following consistent patterns makes components predictable for other developers to use and extend. Implementation should focus on accessibility, performance, and maintainability from the start rather than as an afterthought.

Component Implementation Principles

When implementing components, follow these key principles:

(Do ✅) Core Implementation Practices

Design Token Usage: Always use design tokens from our central theme for colors, spacing, typography, etc.
Prop Defaults: Provide sensible defaults for optional props
Component Composition: Build components that compose well with others
Accessibility First: Implement accessibility features from the beginning
Performance Awareness: Be mindful of re-renders and optimization opportunities
Test Coverage: Write tests for all key functionality and edge cases

(Don't ❌) Implementation Anti-patterns

Hardcoded Values: Avoid hardcoded colors, sizes, or spacing values
Overly Complex Components: Keep components focused on a single responsibility
Direct DOM Manipulation: Use React's declarative approach instead
Poor Type Safety: Ensure props have proper TypeScript types
Missing Accessibility: Don't skip accessibility attributes

Implementation Flow

Set up component props and default values
Implement core rendering logic
Apply styling using design tokens
Add accessibility features
Implement interactions and state management
Optimize for performance
Add comprehensive tests

Step 6: Apply Design Tokens

Design tokens are the visual building blocks of our UI system. Using tokens consistently creates a cohesive user experience and makes it easier to update the design system globally.

Design tokens are centralized design variables that represent the visual properties of our UI. They ensure consistency across the application and enable global style updates with minimal code changes.

Key Token Categories

Colors: Brand colors, UI states, text colors, backgrounds
Typography: Font families, sizes, weights, line heights
Spacing: Margins, padding, gaps
Sizing: Component dimensions, icon sizes
Borders: Border widths, radii
Shadows: Elevation levels, drop shadows
Animation: Durations, easing functions

Token Structure

Our tokens are organized hierarchically, from primitive values to semantic tokens:

Base Tokens: Raw values (hex colors, pixel values)
Semantic Tokens: Purpose-based tokens (primary, danger, success)
Component Tokens: Component-specific tokens

Token Import Path

// Import all token categories
import { theme } from '@/core/shared/styles/theme';
 
// Or import specific token categories
import { colors } from '@/core/shared/styles/colors';
import { spacing } from '@/core/shared/styles/spacing';
import { typography } from '@/core/shared/styles/typography';

AI Collaboration: Design Token Implementation

# Design Token Implementation
 
Please help me implement design token-based styling for a [ComponentName] component:
 
## Component Information
- Component: [ComponentName]
- Category: [foundation/pattern/business]
- Visual States: [list states: default, hover, active, disabled, etc.]
 
## Design Token Requirements
- Use our theme tokens from @/core/shared/styles/theme
- Create a separate styles.ts file with a getStyles function
- Support the following variants: [list variants]
- Support the following sizes: [list sizes]
- Handle states properly (disabled, focused, etc.)
 
## Implementation Needs
- Generate the styles.ts file with proper TypeScript types
- Show how to apply these styles in the component
- Demonstrate dynamic style selection based on props
- Add responsive considerations if applicable

Step 7: Implement Accessibility

Accessibility is a core requirement for all our components, not an optional feature. Implementing accessibility features from the start ensures our components are usable by everyone, including people with disabilities.

All components must meet these accessibility requirements:

Screen Reader Support
- Appropriate accessibility roles
- Meaningful accessibility labels
- Proper state announcements
Keyboard Navigation
- Focusable interactive elements
- Visible focus indicators
- Logical tab order
Touch Targets
- Minimum size of 44×44 points for touch targets
- Adequate spacing between interactive elements
Visual Design
- Color contrast ratio of at least 4.5:1 for text
- Not relying on color alone to convey information
- Support for text scaling and zooming
Motion and Animation
- Respecting reduced motion preferences
- No flashing content that could trigger seizures

AI Collaboration: Accessibility Implementation

# Accessibility Implementation
 
Please help me implement accessibility features for a [ComponentName] component:
 
## Component Information
- Component: [ComponentName]
- Category: [foundation/pattern/business]
- Purpose: [brief description of component purpose]
- Interactive Elements: [describe interactive parts]
 
## Accessibility Requirements
- Screen reader support needs
- Keyboard navigation requirements
- Touch target considerations
- State communication needs (loading, error, disabled, etc.)
 
## Implementation Needs
- Add appropriate accessibilityRole
- Implement accessibilityLabel and accessibilityHint
- Configure accessibilityState for different component states
- Add proper focus management if applicable
- Ensure appropriate touch target sizes
 
Please provide a complete implementation showing all necessary accessibility attributes and any special handling required.

Development Phase Summary

The development phase transforms your planning into working code. By following this structured approach, you ensure:

Consistent component structure across the codebase
Proper implementation with design tokens and accessibility
Components that are maintainable and extensible
Code that follows established patterns and best practices

Next Steps

Once you've completed the development phase:

Test Your Implementation: Write comprehensive tests for your component
Review Your Code: Use the self-review checklist before requesting team review
Document Your Component: Create clear documentation for other developers
Move to Testing Phase: Proceed to the Testing Strategies phase

Component Patterns - Common patterns and best practices
Foundation Components Guide - Building atomic UI components
Testing Patterns for UI Components - Comprehensive testing strategies
AI Collaboration Guide for UI Development - Working effectively with AI

Development Phase

On this page