From 2968bb25d18bd2d4705963d836922c67aaecd959 Mon Sep 17 00:00:00 2001 From: Leesa Ward Date: Sun, 19 Mar 2023 18:05:13 +1100 Subject: [PATCH] feat: styled-components support --- .../component/componentStyledTemplate.js | 5 ++ src/utils/generateComponentUtils.js | 47 +++++++++++++------ src/utils/grcConfigUtils.js | 11 ++++- 3 files changed, 47 insertions(+), 16 deletions(-) create mode 100644 src/templates/component/componentStyledTemplate.js diff --git a/src/templates/component/componentStyledTemplate.js b/src/templates/component/componentStyledTemplate.js new file mode 100644 index 0000000..f333983 --- /dev/null +++ b/src/templates/component/componentStyledTemplate.js @@ -0,0 +1,5 @@ +export default `import styled from 'styled-components'; + +export const TemplateNameWrapper = styled.div\` +\`; +`; diff --git a/src/utils/generateComponentUtils.js b/src/utils/generateComponentUtils.js index 936c395..80692d4 100644 --- a/src/utils/generateComponentUtils.js +++ b/src/utils/generateComponentUtils.js @@ -11,6 +11,7 @@ import { aiComponentGenerator } from '../services/openAiService.js'; import componentJsTemplate from '../templates/component/componentJsTemplate.js'; import componentTsTemplate from '../templates/component/componentTsTemplate.js'; import componentCssTemplate from '../templates/component/componentCssTemplate.js'; +import componentStyledTemplate from '../templates/component/componentStyledTemplate.js'; import componentLazyTemplate from '../templates/component/componentLazyTemplate.js'; import componentTsLazyTemplate from '../templates/component/componentTsLazyTemplate.js'; import componentStoryTemplate from '../templates/component/componentStoryTemplate.js'; @@ -81,7 +82,7 @@ Please make sure you're pointing to the right custom template path in your gener } function componentTemplateGenerator({ cmd, componentName, cliConfigFile }) { - const { cssPreprocessor, testLibrary, usesCssModule, usesTypeScript } = cliConfigFile; + const { usesStyledComponents, cssPreprocessor, testLibrary, usesCssModule, usesTypeScript } = cliConfigFile; const { customTemplates } = cliConfigFile.component[cmd.type]; let template = null; let filename = null; @@ -113,16 +114,27 @@ function componentTemplateGenerator({ cmd, componentName, cliConfigFile }) { // --- If it has a corresponding stylesheet if (cmd.withStyle) { - const module = usesCssModule ? '.module' : ''; - const cssPath = `${componentName}${module}.${cssPreprocessor}`; + if (cliConfigFile.usesStyledComponents) { + const cssPath = `${componentName}.styled`; + template = template.replace( + `import styles from './TemplateName.module.css'`, + `import { TemplateNameWrapper } from './${cssPath}'` + ); + template = template.replace(` className={styles.TemplateName}`, ''); + template = template.replace(` `, ''); + } else { + const module = usesCssModule ? '.module' : ''; + const cssPath = `${componentName}${module}.${cssPreprocessor}`; - // --- If the css module is true make sure to update the template accordingly + // --- If the css module is true make sure to update the template accordingly - if (module.length) { - template = template.replace(`'./TemplateName.module.css'`, `'./${cssPath}'`); - } else { - template = template.replace(`{styles.TemplateName}`, `"${componentName}"`); - template = template.replace(`styles from './TemplateName.module.css'`, `'./${cssPath}'`); + if (module.length) { + template = template.replace(`'./TemplateName.module.css'`, `'./${cssPath}'`); + } else { + template = template.replace(`{styles.TemplateName}`, `"${componentName}"`); + template = template.replace(`styles from './TemplateName.module.css'`, `'./${cssPath}'`); + } } } else { // --- If no stylesheet, remove className attribute and style import from jsTemplate @@ -157,14 +169,19 @@ function componentStyleTemplateGenerator({ cliConfigFile, cmd, componentName }) template = customTemplate; filename = customTemplateFilename; } else { - const { cssPreprocessor, usesCssModule } = cliConfigFile; - const module = usesCssModule ? '.module' : ''; - const cssFilename = `${componentName}${module}.${cssPreprocessor}`; + const { usesTypeScript, usesStyledComponents, cssPreprocessor, usesCssModule } = cliConfigFile; + if (usesStyledComponents) { + filename = usesTypeScript ? `${componentName}.styled.ts` : `${componentName}.styled.js`; + template = componentStyledTemplate; + } else { + const module = usesCssModule ? '.module' : ''; + const cssFilename = `${componentName}${module}.${cssPreprocessor}`; - // --- Else use GRC built-in style template + // --- Else use GRC built-in style template - template = componentCssTemplate; - filename = cssFilename; + template = componentCssTemplate; + filename = cssFilename; + } } return { diff --git a/src/utils/grcConfigUtils.js b/src/utils/grcConfigUtils.js index 585101b..6637f99 100644 --- a/src/utils/grcConfigUtils.js +++ b/src/utils/grcConfigUtils.js @@ -20,12 +20,19 @@ const projectLevelQuestions = [ }, { type: 'confirm', + name: 'usesStyledComponents', + message: 'Does this project use styled-components?', + }, + { + type: 'confirm', + when: (answers) => !answers['usesStyledComponents'], name: 'usesCssModule', message: 'Does this project use CSS modules?', }, { type: 'list', name: 'cssPreprocessor', + when: (answers) => !answers['usesStyledComponents'], message: 'Does this project use a CSS Preprocessor?', choices: ['css', 'scss', 'less', 'styl'], }, @@ -184,7 +191,9 @@ export async function getCLIConfigFile() { */ const missingConfigQuestions = grcConfigQuestions.filter( - (question) => !deepKeys(currentConfigFile).includes(question.name) + (question) => + !deepKeys(currentConfigFile).includes(question.name) && + (question.when ? question.when(currentConfigFile) : true) ); if (missingConfigQuestions.length) {