fix: add PropsWithChildren to functional template feat: BREAKING: non styled-component styles are scss modules now

Author: ahoendgen

changelog.md

@@ -1,8 +1,10 @@
 # changelog
 
-## work in progress
+## 0.0.4
 
 - feat: make variable path name parts formatting configurable
+- fix: add `PropsWithChildren` to functional template
+- feat: BREAKING: non styled-component styles are scss modules now
 
 ## 0.0.3
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a9g/plop-generator-react-atomic-component",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "plop generator react atomic component",
   "main": "dist/index.js",
   "types": "dist/types/index.d.ts",
@@ -32,7 +32,7 @@
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^5.6.0",
     "@typescript-eslint/parser": "^5.6.0",
-    "eslint": "^8.4.1",
+    "eslint": "^8.8.0",
     "eslint-config-prettier": "^8.3.0",
     "husky": "^7.0.4",
     "lint-staged": "^12.1.2",
@@ -45,7 +45,7 @@
     "*.{ts,tsx,css,md,json,js}": "prettier --write"
   },
   "dependencies": {
-    "node-plop": "^0.30.0"
+    "node-plop": "^0.31.0"
   },
   "volta": {
     "node": "16.13.1",

plopfile.js

@@ -8,7 +8,7 @@ const defaultConfig = {
 	withStyleInterfaceImportPath: "/framework/ui",
 	tests: true,
 	stories: true,
-	styledComponents: true,
+	styledComponents: false,
 	useNative: false,
 	useMacro: false,
 	typeFormatter: "pascaleCase",

src/atomicComponent.ts

@@ -51,9 +51,20 @@ const atomicComponent = (
 	let styledComponentsType = "styled-components";
 	let baseComponent = "div";
 	let testId = "data-testid";
-	let withClassNameClassName = `className={${
-		IS_FUNCTIONAL ? "" : "this."
-	}props.className} `;
+
+	let classNames = [];
+	classNames.push(`${IS_FUNCTIONAL ? "" : "this."}props.className`);
+
+	if (!WITH_STYLED_COMPONENTS) {
+		classNames.push("styles.root");
+	}
+
+	let withClassNameClassName = `className={[${classNames}].join()} `;
+
+	if (WITH_STYLED_COMPONENTS) {
+		withClassNameClassName = `className={${classNames}} `;
+	}
+
 	let withClassNameProps = "interface Props extends PropsWithClassName";
 	let withClassNameImport = `import {PropsWithClassName} from '${fullConfig.withClassnameInterfaceImportPath}'`;
 
@@ -105,9 +116,11 @@ const atomicComponent = (
 	let templateBaseComponent = "Root";
 
 	if (!WITH_STYLED_COMPONENTS) {
-		styleImport = "";
+		styleImport = `import * as styles from './${formattedFileName}.module.scss'`;
+
 		templateBaseComponent = "div";
 		if (IS_NATIVE) {
+			styleImport = "";
 			templateBaseComponent = "Text";
 		}
 	}
@@ -219,6 +232,9 @@ const atomicComponent = (
 		});
 	}
 	let stylesTemplateFile = CURRENT_DIR + "/templates/styles.hbs";
+	if (WITH_STYLED_COMPONENTS) {
+		stylesTemplateFile = CURRENT_DIR + "/templates/stylesStyledComponents.hbs";
+	}
 
 	if (fullConfig.templateStyles !== undefined) {
 		if (fs.existsSync(fullConfig.templateStyles)) {
@@ -230,7 +246,9 @@ const atomicComponent = (
 		type: "add",
 		path:
 			fullConfig.basePath +
-			`/${formattedType}/${formattedDirName}/${formattedFileName}.styles.ts`,
+			`/${formattedType}/${formattedDirName}/${formattedFileName}.${
+				WITH_STYLED_COMPONENTS ? "styles.ts" : "module.scss"
+			}`,
 		templateFile: stylesTemplateFile,
 		data,
 	});

src/templates/component_class_based.hbs

@@ -1,10 +1,8 @@
 {{> withClassNameImport }};
 import { Component } from 'react';
 
-{{#if styledComponents}}
 {{> styleImport }};
 
-{{/if}}
 interface State {}
 
 {{ withClassNameProps }} {}

src/templates/component_functional.hbs

@@ -1,13 +1,11 @@
 {{> withClassNameImport }};
 import React, { PropsWithChildren } from 'react';
 
-{{#if styledComponents}}
 {{> styleImport }};
 
-{{/if}}
 {{ withClassNameProps }} {}
 
-const {{ pascalCase name }}: React.FC<Props> = (props: PropsWithChildren<Props>): React.ReactElement => {
+const {{ pascalCase name }}: React.FC<PropsWithChildren<Props>> = (props: PropsWithChildren<Props>): React.ReactElement => {
   return (
     <{{ templateBaseComponent }} {{> withClassNameClassName }} {{> testId }}={"{{kebabCase name }}-root"}>
       {{ name }}

src/templates/styles.hbs

@@ -1,3 +1,3 @@
-import styled from '{{ styledComponentsType }}';
+.root {
 
-export const Root = styled.{{ baseComponent }}``;
+}

src/templates/stylesStyledComponents.hbs

@@ -0,0 +1,3 @@
+import styled from '{{ styledComponentsType }}';
+
+export const Root = styled.{{ baseComponent }}``;