feat: implementing styles handler

src/flows/guided-flow-generator.js

@@ -5,6 +5,7 @@ import { generateComponent } from '../generators/components.js'
 import { generateTests } from '../generators/tests.js'
 import { generateFunction } from '../generators/functions.js'
 import { generateStory } from '../generators/storybook-story.js'
+import { generateStyle } from '../generators/css-styles.js'
 
 const currentRootPath = '.'
 
@@ -34,6 +35,10 @@ export async function guidedFlowGenerator(data) {
         }
       }
 
+      if (data.cssFramework) {
+        await handleStyles(data, path)
+      }
+
       await handleTests(data, path)
       await handleStories(data, path)
     },
@@ -105,3 +110,22 @@ async function handleStories(data, path) {
     data.storyPostfix
   )
 }
+
+/**
+ * Handle styles flow
+ *
+ * @param {import("../types.js").Answers} data Information the user provided in the guided prompt
+ * @param {string} path Path from main resource if should use same path
+ *
+ */
+async function handleStyles(data, path) {
+  if (data.storyPath === data.resourcePath) {
+    return generateStyle({ ...data, path })
+  }
+
+  return await checkProvidedPathRecursive(
+    data.storyPath,
+    (newPath) => generateStyle({ ...data, path: newPath, resourcePath: path }),
+    'style'
+  )
+}

src/generators/css-styles.js

@@ -0,0 +1,111 @@
+import path from 'node:path'
+
+import { localDirname } from '../main.js'
+
+import { functionTemplates, stylesTemplates } from '../constants/templates.js'
+
+import { compose } from '../utils/compose.js'
+import { convertCase } from '../utils/string.js'
+import { makeFileExtension } from '../utils/file.js'
+import { createFileWithContent, readFileContent } from '../utils/file.js'
+
+/**
+ * @typedef {import("../types.js").Answers} Answers
+ */
+
+/**
+ * CSS Style generator
+ *
+ * @param {Answers & { path: string }} answers Answers prompted to the user
+ */
+export function generateStyle(answers) {
+  const { success, error, path } = compose(
+    defineStyleTemplate(answers),
+    getTemplateContent,
+    replaceAllFunctionTextOccurrences,
+    generateStyleFile
+  )
+
+  if (success) {
+    console.info('Style created successfully: ' + path)
+  } else {
+    console.error('Error on create style, try again')
+  }
+}
+
+/**
+ * Get CSS Style template details
+ *
+ * @param {Answers & { path: string }} data - Data to compose component
+ * @returns {() => Answers & { templatePath: string }}
+ */
+export function defineStyleTemplate(data) {
+  return () => {
+    /**
+     * Template path from path's dictionary
+     */
+    let templatePath = stylesTemplates[data.cssFramework]
+
+    return { ...data, templatePath }
+  }
+}
+
+/**
+ * Get template content from file
+ *
+ * @param {Answers & { templatePath: string }} data - Data to compose component
+ * @returns {() => Answers & {
+ *    templatePath: string,
+ *    fileContent: string
+ *  }}
+ */
+export function getTemplateContent(data) {
+  const fullPath = path.join(localDirname, data.templatePath)
+
+  const fileContent = readFileContent(fullPath)
+
+  return { ...data, fileContent }
+}
+
+/**
+ * Replace all occurrences on file content
+ *
+ * @param {Answers & {
+ *    templatePath: string,
+ *    fileContent: string
+ *  }} data - Data to compose component
+ * @returns {() => data}
+ */
+export function replaceAllFunctionTextOccurrences(data) {
+  data.fileContent = data.fileContent.replace('component', convertCase('kebab-case', data.name))
+
+  return data
+}
+
+/**
+ * Get template content from file
+ *
+ * @param {Answers & {
+ *    templatePath: string,
+ *    fileContent: string
+ *  }} data - Data to compose component
+ * @returns {() => string}
+ */
+export function generateStyleFile(data) {
+  const extension = makeFileExtension({
+    typescript: data.typescript,
+    cssFramework: data.cssFramework,
+    postfix: data.cssFramework === 'css_modules' ? 'modules' : ''
+  })
+
+  const fileName = `${convertCase('PascalCase', data.name)}.${extension}`
+  const pathWithFileName = `${data.path}/${fileName}`
+
+  const success = createFileWithContent(pathWithFileName, data.fileContent)
+
+  return {
+    success,
+    error: !success,
+    path: pathWithFileName
+  }
+}

src/generators/css-styles.test.js

@@ -0,0 +1,22 @@
+import { describe, it, todo } from 'node:test'
+import assert from 'node:assert/strict'
+import { FrameworkEnum } from '../enums/frameworks.js'
+
+/**
+ * @type {import("./components.js").Answers}
+ */
+const answers = {
+  framework: FrameworkEnum.vue,
+  name: 'Test',
+  resourcePath: '/folder',
+  testPostfix: 'spec',
+  type: 'page',
+  typescript: true,
+  version: null,
+  withStory: false,
+  withTest: false
+}
+
+describe.todo('CSS Style Generator', () => {
+  todo("should create a css style file based on answers (user's prompted)", () => {})
+})