MetaMask / MetaMask/metamask-design-system
React Native Component Template
- Dominant language
- TypeScript
- Stars
- 37
- Forks
- 14
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 60
Description
### **Description**
We need to create a reusable folder called `component-template` that developers can clone and use as a starting point for creating new components in TypeScript. This will streamline development and ensure consistency across the codebase.
The folder should include the following files:
- `index.ts`
- `ComponentTemplate.tsx`
- `ComponentTemplate.css`
- `ComponentTemplate.types.ts`
- `ComponentTemplate.stories.tsx`
- `README.mdx`
**Note**: The decision on test file inclusion is pending as the team is discussing options (e.g., no snapshot testing). Follow up with Desi regarding testing strategies.
**Bonus**: Implement a CLI tool that can automate the cloning of this folder, prompting the user for the new component name and replacing `ComponentTemplate` with the provided name throughout the files.
### **Technical Details**
- Set up a `component-template` folder with the specified files.
- Ensure each file follows the standard component structure and is easy to update with a new component name.
- The CLI tool should:
- Clone the folder.
- Replace the placeholder name (`ComponentTemplate`) with a user-provided name in all files.
- Be simple to run and easy to use for developers.
- No test files will be included for now, pending further discussions on testing strategy.
### **Acceptance Criteria**
- A fully working `component-template` folder is created and can be used to create new components quickly.
- CLI tool successfully clones the folder and updates the component name based on user input.
- Decision on tests documented after discussions with the team.
### **References**
- Ongoing discussion with Desi about tests and snapshots.
- Link to any previous conversations on CLI tooling.
---
### **React Component Template: Create a component template folder for a React component. Build a CLI command to quickly create a new component**
#### **Description**
Create a CLI tool that helps developers generate a new React component folder with a standard structure. The CLI should ask a series of questions (e.g., component name, type of component, use of hooks, CSS/SCSS options) and generate all necessary files (e.g., component, test, styles).
#### **Technical Details**
- Implement the CLI in Node.js or another preferred language.
- Ensure it generates a folder structure like:
- `ComponentName.jsx`
- `ComponentName.test.js`
- `ComponentName.module.css`
- `index.js`
- Questions asked during component creation could include:
- Component name
- Function or class-based component
- CSS or SCSS
- Include hooks (optional)
- Add validation to ensure files are created properly.
#### **Acceptance Criteria**
- Running the CLI tool successfully generates the desired component structure.
- A developer can use this to scaffold components in different projects with ease.
- Test cases provided for different component types and file structures.
#### **References**
- CLI tools examples: Yeoman, Plop.
- Existing component generators in React libraries.
Contributor guide
Assessment
This issue has not been assessed yet.