Skip to content

Create component generation script for React Native package #762

@georgewrmarshall

Description

@georgewrmarshall

Description

Create a component generation script for the design-system-react-native package similar to the existing create-component script in the React package. This will allow developers to quickly scaffold new React Native components with all the necessary boilerplate files and proper template structure.

Technical Details

  • Create a create-component script in packages/design-system-react-native/scripts/create-component/
  • Script should generate the following template files:
    • ComponentName.tsx - Main component file using React Native patterns
    • ComponentName.types.ts - TypeScript interfaces and props
    • ComponentName.stories.tsx - Storybook stories using @storybook/react-native
    • ComponentName.test.tsx - Jest tests with React Native Testing Library
    • ComponentName.constants.ts - Constants and enums
    • README.md - Component documentation
    • index.ts - Export barrel file
  • Update src/components/index.ts to export the new component
  • Include proper CLI argument parsing for component name and description
  • Add comprehensive test coverage for the script

Key React Native differences to implement:

  • Use @storybook/react-native instead of @storybook/react
  • Import View from react-native in stories and components as needed
  • Use twClassName prop pattern instead of className
  • Follow React Native component patterns and accessibility props
  • Use React Native Testing Library for tests

Acceptance Criteria

  • Script creates all necessary template files with correct React Native patterns
  • Generated components follow existing design system conventions
  • Component is automatically exported in main index file
  • CLI accepts --name and --description parameters
  • All placeholders are properly replaced in template files
  • Comprehensive test coverage matches existing React script
  • Generated components can be imported and used immediately
  • Stories render correctly in Storybook React Native
  • Generated tests pass without modification

References

  • Existing React create-component script: packages/design-system-react/scripts/create-component/
  • React Native component examples: packages/design-system-react-native/src/components/AvatarAccount/
  • React Native package structure: packages/design-system-react-native/

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions