React Component Template

[garrettbear]

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.

[garrettbear]

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.

BONUS: 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. BONUS: 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. This ticket sets the stage for simplifying component creation while ensuring flexibility as testing strategies evolve.