React Component Development Standards

code-standards.md

React Component Development Standards

Consider adopting Airbnb's React/JSX Style Guide to check for a lot of the following:

Type Safety & Props

1. Props Management

   • Use lowercase props if component will be a shortcode
   • Implement proper prop validation with PropTypes or TypeScript
   • Avoid any types - use specific types for all props
   • Define explicit interface/type for component props
   • Make all optional props explicitly marked as optional

2. Type Specificity

   • Use precise types for children (e.g., React.ReactElement<SpecificProps>[])
   • Implement Generic types where appropriate
   • Use discriminated unions for variant props to enable exhaustive type checking
   • Add JSDoc comments for complex props

Error Handling

1. Robust Error Management
   • Implement specific error classes instead of generic Error
   • Add error boundaries where appropriate:
     1. Complex interactive components (e.g., a posts grid)
     2. Components with external dependencies (e.g., maps, charts)
     3. Components handling complex data transformations
   • Include meaningful error messages
   • Integrate error tracking (e.g., noticeNewRelicError)
   • Handle edge cases with graceful degradation

Testing

1. Unit Tests
   • Test happy path with all props
   • Test all conditional renders
   • Test prop validation errors
   • Test error states and edge cases
   • Test accessibility
   • Test component integration (e.g. how the component works with expected wrapper components, or within the ContentParser, etc.)

Documentation

1. Storybook
   • Document all props and their types
   • Include basic usage example
   • Show all component variants
   • Add interactive examples
   • Include accessibility guidelines

Additional Best Practices

1. Performance

   • Implement proper memoization (useMemo, useCallback)
   • Optimize re-renders
   • Lazy load when appropriate

2. Accessibility

   • Include ARIA labels
   • Ensure keyboard navigation
   • Meet WCAG standards
   • Test with screen readers

3. Maintainability

   • Follow consistent naming conventions
   • Keep components focused and single-responsibility
   • Document complex logic
   • Implement @changeset and include changeset for component updates

Eslint

Install:

• https://www.npmjs.com/package/eslint-config-airbnb
• https://www.npmjs.com/package/eslint-config-airbnb-typescript

Add add to .eslintrc:

{
  "extends": [
    "airbnb",
    "airbnb-typescript",
    "plugin:jsx-a11y/recommended"
  ],
  "plugins": [
    "react-hooks",
    "jsx-a11y",
    "@typescript-eslint"
  ],
  "rules": {
    "react/require-default-props": "error",
    "react/prop-types": "error",
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
    "@typescript-eslint/explicit-function-return-type": "error",
    "@typescript-eslint/no-explicit-any": "error"
  }
}