MetaMask / MetaMask/metamask-design-system

React Native Component Template

Open
#18 0 comments 0 reactions 1 assignee Assigned to @brianacnguyen View on GitHub
team-design-system
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.