Merge pull request #1 from rafauke/fix/change-default-templates

Fix/change default templates

Author: ahoendgen

src/atomicComponent.ts

@@ -49,11 +49,12 @@ const atomicComponent = (
 
 	let styledComponentsType = "styled-components";
 	let baseComponent = "div";
+	let testId = "data-testid";
 	let withClassNameClassName = `className={${
 		IS_FUNCTIONAL ? "" : "this."
 	}props.className} `;
 	let withClassNameProps = "interface Props extends PropsWithClassName";
-	let withClassNameImport = `import {PropsWithClassName} from "${fullConfig.withClassnameInterfaceImportPath}";\n`;
+	let withClassNameImport = `import {PropsWithClassName} from '${fullConfig.withClassnameInterfaceImportPath}'`;
 
 	if (fullConfig.useMacro) {
 		styledComponentsType = "styled-components/macro";
@@ -62,14 +63,15 @@ const atomicComponent = (
 	if (IS_NATIVE) {
 		styledComponentsType = "styled-components/native";
 		baseComponent = "Text";
+		testId = "testID";
 		withClassNameClassName = `style={${
 			IS_FUNCTIONAL ? "" : "this."
 		}props.style} `;
 		withClassNameProps = "interface Props extends PropsWithNativeStyle";
-		withClassNameImport = `import {PropsWithNativeStyle} from "${fullConfig.withStyleInterfaceImportPath}";\n`;
+		withClassNameImport = `import {PropsWithNativeStyle} from '${fullConfig.withStyleInterfaceImportPath}'`;
 	}
 
-	let styleImport = `\nimport {Root} from './{{pascalCase name}}.styles';`;
+	let styleImport = `import {Root} from './{{pascalCase name}}.styles'`;
 	let templateBaseComponent = "Root";
 
 	if (!WITH_STYLED_COMPONENTS) {
@@ -81,12 +83,16 @@ const atomicComponent = (
 	}
 
 	data = {
-		templateBaseComponent,
-		withClassNameProps,
-		withClassNameClassName,
+		styledComponents: fullConfig.styledComponents,
 		baseComponent,
 		styledComponentsType,
+		templateBaseComponent,
+		withClassNameClassName,
+		withClassNameProps,
+		testId,
 	};
+
+	plop.setPartial("testId", testId);
 	plop.setPartial("styleImport", styleImport);
 	plop.setPartial("withClassNameImport", withClassNameImport);
 	plop.setPartial("withClassNameClassName", withClassNameClassName);

src/templates/component_class_based.hbs

@@ -1,11 +1,13 @@
-import {Component} from 'react';{{> styleImport }}
-{{> withClassNameImport }}
+{{> withClassNameImport }};
+import { Component } from 'react';
 
-interface State {
-}
+{{#if styledComponents}}
+{{> styleImport }};
 
-{{ withClassNameProps }} {
-}
+{{/if}}
+interface State {}
+
+{{ withClassNameProps }} {}
 
 export class {{pascalCase name }} extends Component<Props, State> {
   constructor(props: Props) {
@@ -16,7 +18,7 @@ export class {{pascalCase name }} extends Component<Props, State> {
 
   render() {
     return (
-      <{{ templateBaseComponent }} {{> withClassNameClassName }}data-testid={"{{kebabCase name }}-root"}>
+      <{{ templateBaseComponent }} {{> withClassNameClassName }} {{> testId }}={"{{kebabCase name }}-root"}>
         {{ name }}
       </{{ templateBaseComponent }}>
     );

src/templates/component_functional.hbs

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

src/templates/index.hbs

@@ -1,3 +1,3 @@
-import {{{pascalCase name }}} from './{{pascalCase name }}';
+import { {{pascalCase name}} } from './{{pascalCase name}}';
 
 export default {{pascalCase name }};

src/templates/story.hbs

@@ -1,9 +1,9 @@
-{{ componentImport }}
+import { {{ pascalCase name }} } from './{{ pascalCase name }}';
 
 const StorybookSettings = {
   title: 'Design System/{{ type }}s/{{ name }}'
 };
 
 export default StorybookSettings;
 
-export const Basic{{pascalCase name }} = () => <{{pascalCase name }} />;
+export const Basic{{ pascalCase name }} = () => <{{ pascalCase name }} />;

src/templates/styles.hbs

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