feat: styled-components support

[doubleedesign]

Adds an option to use styled-components instead of CSS modules.

During setup:

• Ask user "Does this project use styled-components?"
• If the answer is yes, skip "Does this project use CSS modules?" and "Does this project use a CSS Preprocessor?"

During component creation:

• Use the existing withStyle setting to determine whether to generate a styled component in this instance
• If withStyle is true:
  • the div in the template is replaced by a ComponentNameWrapper, and
  • a corresponding ComponentName.styled.{js,ts} file is created, defining ComponentNameWrapper as a div.

Could close #48.

[arminbro]

Hi @doubleedesign,

Thanks for taking the time and contributing to GRC. Your PR looks excellent!

You could have used custom-component-templates to have styled components in your project.

In your GRC config file, you could do something like this:

{
  "usesTypeScript": true,
  "usesCssModule": false,
  "cssPreprocessor": "css",
  "testLibrary": "Testing Library",
  "component": {
    "default": {
      "customTemplates": {
        "component": ".grc/templates/styled-component/TemplateName.tsx",
        "style": ".grc/templates/styled-component/TemplateName.styled.ts"
      },
      "path": "src/components",
      "withStyle": true,
      "withTest": true,
      "withStory": false,
      "withLazy": false
    }
  },
  "usesStyledComponents": false
}

Then, in your project, you could have created the costume styled template:

// .grc/templates/styled-component/TemplateName.styled.ts

import styled from 'styled-components';

export const TemplateNameWrapper = styled.div`
`;

And this is what your custom component template would look like:

// .grc/templates/styled-component/TemplateName.tsx

import React, { FC } from "react";
import { TemplateNameWrapper } from "./TemplateName.styled";

interface TemplateNameProps {}

const TemplateName: FC<TemplateNameProps> = () => (
  <TemplateNameWrapper data-testid="TemplateName">
    TemplateName Component
  </TemplateNameWrapper>
);

export default TemplateName;

But your PR is still helpful and keeps the GRC config file clean. So I'm going to approve and merge your PR.

Thanks Again.

[github-actions]

🎉 This PR is included in version 8.3.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[doubleedesign]

Thanks for the quick response, feedback and merge @arminbro!

I started using the custom templates like you've described, but then thought "Gee wouldn't it be good if it could do this out of the box?" and saw that issue had been raised...an afternoon well-spent making it happen! 🥳