Plop config for React app

index.ts.hbs

export { default } from "./{{pascalCase name}}";

plop.js

module.exports = function (plop) {
  // component generator
  plop.setGenerator("component", {
    description: "React component generator",
    prompts: [
      {
        type: "input",
        name: "name",
        message: "component name please",
      },
    ],
    actions: [
      {
        type: "addMany",
        destination: "src/components/{{pascalCase name}}",
        templateFiles: "templates/components/*.hbs",
        base: "templates/components",
      },
    ],
  });
};

{{pascalCase name}}.style.ts.hbs

import styled from "styled-components";

export const StyledContainer = styled.div`
    
`;

{{pascalCase name}}.test.ts.hbs

import React from 'react';
import { render } from '@testing-library/react';
import {{pascalCase name}} from './{{pascalCase name}}';

test('renders', () => {
  render(<{{pascalCase name}} />);
});

{{pascalCase name}}.tsx.hbs

import { FC } from "react";
import { StyledContainer } from "./{{pascalCase name}}.style";

const {{pascalCase name}}: FC = () => {
  return (
    <StyledContainer>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi non sed
      quisquam facilis, dignissimos inventore necessitatibus. Magni, distinctio.
      Illum voluptas doloribus id beatae atque quaerat culpa enim deleniti, unde
      deserunt!
    </StyledContainer>
  );
};

export default {{pascalCase name}};