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.