Increasing React components development productivity

Every react project is unique and may follow some conventions on how every component should be structured. It always depends on the size of the project, team preferences, etc. Here is an example of a typical react component in my projects:

|__Button
| |__Button.module.scss
| |__Button.stories.mdx
| |__Button.spec.ts
| |__Button.tsx
| |__index.ts
| |__README.md

While I personally find this structure convenient and self-contained, it is a bit painful to create all of the files from scratch for every new component. So I usually end up with copy and pasting the whole folder, renaming filenames and contents, fixing imports, etc.

It's definitely a bit faster but still takes some time. That's why I decided to create and use a tool that would make this process easier and faster. If you're interested in its development process here's an overview article.

To see it in action let's create a custom react-component template. Do this from the project root:

mkdir .bystro
mkdir .bystro/react-component
cd .bystro/react-component

Then describe its structure by simply creating desired files:

|__<<Name>>
| |__<<Name>>.module.scss
| |__<<Name>>.stories.mdx
| |__<<Name>>.spec.ts
| |__<<Name>>.tsx
| |__index.ts
| |__README.md

<<Name>> is a variable that would be replaced with real component name you'll enter later. It could be used in file contents as well:

import React from "react";
import styles from "./<<Name>>.module.scss";

type <<Name>>Props = {
  className?: string;
  onClick?: (e: React.MouseEvent) => void;
  children: React.ReactNode;
};

const <<Name>> = (props: <<Name>>Props) => {
  return null;
};

<<Name>>.defaultProps = {};

export default <<Name>>;

There could be as many variables you like but to make them processable you need to create a .templaterc file inside of template folder. In our case it is touch .bystro/react-component/.templaterc:

{
  "variablePrefix": "<<",
  "variableSuffix": ">>",
  "variables": [
    { "name": "Name", "description": "React component name"}
  ]
}

And that should be it, our template is ready.
Let's create a new component from it. From inside the project root run:

npx bystro react-component ./src/components

After that you'll be prompted to fill all of the variables:

? Enter Name (React component name): 

For example, enter Title and there you have it! Navigate to
./src/components to see your newly created component:

|__Title
| |__Title.module.scss
| |__Title.stories.mdx
| |__Title.spec.ts
| |__Title.tsx
| |__index.ts
| |__README.md

Thanks for reading.
Would <3 to receive some feedback.