generated from MetaMask/metamask-module-template
-
-
Notifications
You must be signed in to change notification settings - Fork 4
Open
Labels
Description
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 inpackages/design-system-react-native/scripts/create-component/
- Script should generate the following template files:
ComponentName.tsx
- Main component file using React Native patternsComponentName.types.ts
- TypeScript interfaces and propsComponentName.stories.tsx
- Storybook stories using@storybook/react-native
ComponentName.test.tsx
- Jest tests with React Native Testing LibraryComponentName.constants.ts
- Constants and enumsREADME.md
- Component documentationindex.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
fromreact-native
in stories and components as needed - Use
twClassName
prop pattern instead ofclassName
- 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/