feat: add folder wrapper and fix templates + remove unecessary files

src/actions/create.js

@@ -74,8 +74,9 @@ export async function createAction(resourceName, options) {
       type: options.type,
       resourcePath: options.path,
       withTestingLibrary: options.testingLibrary,
-      storyPostfix: 'stories',
       version: options.vueVersion,
+      folderWrapper: options.folderWrapper,
+      storyPostfix: 'stories',
       testPath,
       storyPath,
       testPostfix,
@@ -84,8 +85,6 @@ export async function createAction(resourceName, options) {
     }
   }
 
-  console.log({ answers })
-
   if (!options.framework && preset) {
     answers = getPresetFileContent(preset + '.json')
 

src/actions/guided.js

@@ -13,6 +13,7 @@ import {
 
 import { namePrompt } from '../prompts/name.js'
 import { presetNamePrompt } from '../prompts/preset-name.js'
+import { createResourcePrompt } from '../prompts/create-resource.js'
 
 export async function guidedAction(resourceName) {
   /**

src/constants/templates.js

@@ -176,10 +176,10 @@ export const frameworkTemplates = {
 export const unitTestTemplates = {
   react: {
     js: {
-      jest: 'templates/unit-test/react/js/Jest.ts',
-      jestTestingLibrary: 'templates/unit-test/react/js/JestTestingLibrary.ts',
-      vitest: 'templates/unit-test/react/js/Vitest.ts',
-      vitestTestingLibrary: 'templates/unit-test/react/js/VitestTestingLibrary.ts'
+      jest: 'templates/unit-test/react/js/Jest.js',
+      jestTestingLibrary: 'templates/unit-test/react/js/JestTestingLibrary.js',
+      vitest: 'templates/unit-test/react/js/Vitest.js',
+      vitestTestingLibrary: 'templates/unit-test/react/js/VitestTestingLibrary.js'
     },
     ts: {
       jest: 'templates/unit-test/react/ts/Jest.ts',

src/generators/components.js

@@ -1,14 +1,15 @@
-import path from 'node:path'
+import path, { join } from 'node:path'
 
 import { CssFrameworkEnum, FrameworkEnum } from '../enums/frameworks.js'
 
 import { localDirname } from '../main.js'
 import { frameworkTemplates } from '../constants/templates.js'
 
 import { compose } from '../utils/compose.js'
-import { convertCase } from '../utils/string.js'
+import { convertCase, splitPathString } from '../utils/string.js'
 import { getFileExtension } from '../utils/file-extension.js'
 import { createFileWithContent, readFileContent } from '../utils/file.js'
+import { checkDirectoriesTree, createDir } from '../utils/directory.js'
 
 /**
  * @typedef {import("../types.js").Answers} Answers
@@ -24,6 +25,7 @@ export function generateComponent(answers) {
   const { success, path } = compose(
     defineComponentTemplate(answers),
     getTemplateContent,
+    makeFolderWrapperOrBypass,
     makePathWithExtension,
     replaceAllComponentTextOccurrences,
     generateComponentFile
@@ -124,11 +126,40 @@ export function getTemplateContent(data) {
  *    extension: string,
  *    fileName: string,
  *    pathWithFileName: string,
+ *    folderWrapperPath: string,
  *  }}
  */
-export function makePathWithExtension(data) {
+export function makeFolderWrapperOrBypass(data) {
   data.name = convertCase('PascalCase', data.name)
 
+  const folderWrapperPath = join(data.resourcePath, data.name)
+  const folderWrapperExists = checkDirectoriesTree(splitPathString(folderWrapperPath))
+
+  if (!folderWrapperExists) {
+    const created = createDir(folderWrapperPath)
+
+    if (!created) console.error('Error: cannot create folder wrapper.')
+  }
+
+  return { ...data, folderWrapperPath }
+}
+
+/**
+ *
+ * @param {Answers & {
+ *    templatePath: string,
+ *    fileContent: string
+ *    folderWrapperPath: string,
+ *  }} data Data to compose component
+ * @returns {Answers & {
+ *    templatePath: string,
+ *    fileContent: string,
+ *    extension: string,
+ *    fileName: string,
+ *    pathWithFileName: string,
+ *  }}
+ */
+export function makePathWithExtension(data) {
   const language = data.typescript ? 'ts' : 'js'
 
   const extension = getFileExtension({
@@ -137,7 +168,9 @@ export function makePathWithExtension(data) {
     framework: data.framework
   })
 
-  const fileName = `${data.name}.${extension}`
+  const fileName = data.folderWrapper
+    ? `${data.name}/${data.name}.${extension}`
+    : `${data.name}.${extension}`
   const pathWithFileName = `${data.path}/${fileName}`
 
   return { ...data, extension, fileName, pathWithFileName }

src/generators/css-styles.js

@@ -77,6 +77,8 @@ export function getTemplateContent(data) {
  * @returns {() => data}
  */
 export function replaceAllFunctionTextOccurrences(data) {
+  data.name = convertCase('PascalCase', data.name)
+
   data.fileContent = data.fileContent.replace('component', convertCase('kebab-case', data.name))
 
   return data
@@ -101,7 +103,10 @@ export function generateStyleFile(data) {
     cssFramework: data.cssFramework
   })
 
-  const fileName = `${convertCase('PascalCase', data.name)}.${extension}`
+  const fileName =
+    data.folderWrapper && ['component', 'page'].includes(data.type)
+      ? `${data.name}/${data.name}.${extension}`
+      : `${data.name}.${extension}`
   const pathWithFileName = `${data.path}/${fileName}`
 
   const success = createFileWithContent(pathWithFileName, data.fileContent)

src/generators/functions.js

@@ -83,7 +83,9 @@ export function getTemplateContent(data) {
  * @returns {() => data}
  */
 export function replaceAllFunctionTextOccurrences(data) {
-  data.fileContent = data.fileContent.replace('FunctionName', convertCase('camelCase', data.name))
+  data.name = convertCase('camelCase', data.name)
+
+  data.fileContent = data.fileContent.replace('FunctionName', data.name)
 
   return data
 }
@@ -106,7 +108,13 @@ export function generateFunctionFile(data) {
     framework: 'vanilla'
   })
 
-  const fileName = `${convertCase('kebab-case', data.name)}.${extension}`
+  const fileName =
+    data.folderWrapper && ['component', 'page'].includes(data.type)
+      ? `${convertCase('kebab-case', data.name)}/${convertCase(
+          'kebab-case',
+          data.name
+        )}.${extension}`
+      : `${convertCase('kebab-case', data.name)}.${extension}`
   const pathWithFileName = `${data.path}/${fileName}`
 
   const success = createFileWithContent(pathWithFileName, data.fileContent)

src/generators/storybook-story.js

@@ -120,7 +120,10 @@ export function makePathWithExtension(data) {
     postfix: data.storyPostfix
   })
 
-  const fileName = `${data.name}.${extension}`
+  const fileName =
+    data.folderWrapper && ['component', 'page'].includes(data.type)
+      ? `${data.name}/${data.name}.${extension}`
+      : `${data.name}.${extension}`
   const pathWithFileName = `${data.path}/${fileName}`
   const resourcePathWithFileName = `${data.resourcePath}/${data.name}.${extension}`
 

src/generators/tests.js

@@ -160,7 +160,10 @@ export function makePathWithExtension(data) {
     postfix: data.testPostfix
   })
 
-  const fileName = `${data.name}.${extension}`
+  const fileName =
+    data.folderWrapper && ['component', 'page'].includes(data.type)
+      ? `${data.name}/${data.name}.${extension}`
+      : `${data.name}.${extension}`
   const pathWithFileName = `${data.path}/${fileName}`
   const resourcePathWithFileName = `${data.resourcePath}/${data.name}.${extension}`
 

src/main.js

@@ -6,6 +6,7 @@ import { guidedAction } from './actions/guided.js'
 import { createAction } from './actions/create.js'
 
 import { getLocalLibDirname } from './utils/directory.js'
+import { TestFrameworkEnum } from './enums/frameworks.js'
 
 /*
  * Global Variables
@@ -50,11 +51,15 @@ program
   .option('--vue-version [vueVersion]', 'Vue version: "2" | "3" (default: 3))', '3')
   .option('--framework <frameworkName>', 'Framework name for default preset: vue or react')
   .option(
-    '--cssFramework [cssFramework]',
+    '--css-framework [cssFramework]',
     'Style approach: "css_modules" | "tailwind_inline" | "tailwind_file" | "css_vanilla" | "scss" (default: no_style)',
     'no_style'
   )
-  .option('--test-framework [testFrameworkName]', 'Test framework: jest or vitest (default: jest)')
+  .option(
+    '--test-framework [testFrameworkName]',
+    'Test framework: jest or vitest (default: vitest)',
+    TestFrameworkEnum.vitest
+  )
   .option(
     '--path <resourcePath>',
     'Path to resource, use dot (".") to current dir where command is executed'
@@ -67,19 +72,20 @@ program
     '--story-path [storyPath]',
     'Path to story, use dot (".") to current dir where command is executed, if ommited, and --spec is present, will use the same path to resource'
   )
-  .option('--typescript', 'With TypeScript (default: false)')
-  .option('--testing-library', 'With Testing Library (default: false)')
-  .option('--test', 'Add test file (default: false)')
-  .option('--spec', 'Add spec file (default: false)')
-  .option('--story', 'Add story file (default: false)')
+  .option('--typescript', 'With TypeScript (default: false)', false)
+  .option('--testing-library', 'With Testing Library (default: false)', false)
+  .option('--test', 'Add test file (default: false)', false)
+  .option('--spec', 'Add spec file (default: false)', false)
+  .option('--story', 'Add story file (default: false)', false)
   .option(
     '--folder-wrapper',
-    'Creates a folder with the name of the resource, with the files inside it'
+    'Creates a folder with the name of the resource, with the files inside it',
+    false
   )
   .action(createAction)
-  .usage('create <resourceName> -p <presetName>')
+  .usage('create <resourceName> --preset <presetName>')
   .usage(
-    'create <resourceName> --framework <framework> (--test | --spec) --typescript --folder-wrapper --story --test-framework (vitest | jest)'
+    'create <resourceName> --type (component | page | function) --framework <framework> (--test | --spec) --typescript --folder-wrapper --story --test-framework (vitest | jest)'
   )
   .description(
     'Creates the resources with a local preset in non-verbose mode (preview and ask to confirm are not shown, resources will be created immediately), if the preset folder is empty, it will call the guided flow (the same as the `gen` command executes)'

src/prompts/create-resource.js

@@ -105,6 +105,13 @@ export async function createResourcePrompt(resourceName) {
    */
   let version = null
 
+  /**
+   * Creates the resource in a folder with the same name as the resource
+   *
+   * @type {boolean}
+   */
+  let folderWrapper = false
+
   /**
    * With typescript
    *
@@ -129,6 +136,10 @@ export async function createResourcePrompt(resourceName) {
     })
   }
 
+  folderWrapper = await confirm({
+    message: 'Put the files in a folder with the same name as the resource?'
+  })
+
   if (framework === FrameworkEnum.vue) {
     version = await select({
       message: 'What is your Vue version?',
@@ -275,7 +286,8 @@ export async function createResourcePrompt(resourceName) {
     typescript,
     withStory,
     withTest,
-    withTestingLibrary
+    withTestingLibrary,
+    folderWrapper
   }
 
   return answers

src/types.js

@@ -31,6 +31,7 @@ import { StoryPostfixEnum, TestPostfixEnum, StylePostfixEnum } from 'enums/postf
  *   withTest: boolean;
  *   withStory: boolean;
  *   withTestingLibrary: boolean
+ *   folderWrapper: boolean
  *   testPostfix: TestPostfix;
  *   storyPostfix: StoryPostfix;
  *   testFramework: TestFramework