Allow to have templates for index, stories and test files?

[nealoke]

Is it possible to also write templates for index.js, template.stories.js and template.spec.js? When I try it with my current templates it does not output it correctly or am I doing it wrong?

I can't find that much docs on how to do this, nor how to use the COMPONENT_NAME in an import COMPONENT_NAME from './COMPONENT_NAME.js

[CVarisco]

Hi @nealoke !

Thanks a lot for your feedback 🙂
Could you explain much better what is the problem and what are you doing? 🌴

[nealoke]

Waaw that was fast 😄

Basically I'm trying to create my own templates for all possible files (eg styles, stories, tests, index and componentName.js)

I'm using the following config.json which is working just fine for the styles.scss, index.js and componentName.js. However it is not using or copying the componentName.spec.js and componentName.stories.js for some reason.

My config.json file

{
  "type": "custom",
  "templatesPath": "ccarc/templates",
  "path": "components/"
}

Template folder (ccarc/templates)

• index.js
• template.js
• COMPONENT_NAME.styles.scss
• COMPONENT_NAME.spec.js
• COMPONENT_NAME.stories.js

Expected output

• index.js
• componentName.styles.scss
• componentName.js
• componentName.spec.js
• componentName.stories.js

Actual output

• index.js
• styles.scss
• componentName.js

[CVarisco]

So, the problem is the naming of the file after the choice of component name?

[nealoke]

@CVarisco see updated explanation, it was a mess before sorry!

[CVarisco]

@nealoke Thanks a lot for your information!

There is a bug on the copy of the templates files to the destination folder.
I will investigate in these days to fix as soon as possible the bug.
(If you want to contribute, you are welcome 🌮 )

But for clarification, the path value on config file should be components without / because the destination folder when the script start is ${path}/ files.js:84

[nealoke]

@CVarisco Thank you so very much for this tool and for looking into it :)

I will have a look but I really am not familiar with contributing to projects 😢 . I've stripped the / from the path now.

Also be aware that the componentName.styles.scss is also renamed to simply styles.scss.

[nealoke]

@CVarisco I've figured out where it is going wrong, you mind pushing this to NPM?

The issue lies in the generateFileName function.

Current

function generateFileName(newFilePath, newFileName, fileName) {
  // Suppose that the index file don't be renamed
  if (fileName.indexOf('index') !== -1) {
    return fileName
  }

  if (fs.existsSync(newFilePath)) {
    return fileName
  }

  return newFileName
}

So this does not replace the COMPONENT_NAME in the fileName. A simple if statement solves the issue :)

Fixed

function generateFileName(newFilePath, newFileName, fileName) {
  // Suppose that the index file don't be renamed
  if (fileName.indexOf('index') !== -1) {
    return fileName
  }

  if (fs.existsSync(newFilePath)) {
    return fileName
  }

  if (fileName.includes('COMPONENT_NAME')) {
    return fileName.replace(/COMPONENT_NAME/g, newFileName)
  }

  return newFileName
}

[nealoke]

See #27 👍

My first contrib to anything opensourced 🔥 🚀 😄

[CVarisco]

Woooooo 🔝 🎉

I'm very happy for you 🙂 !
I hope that my project will be the first of a lot of others 🥇

I published a new version (v0.8.5) on NPM with your fix!
Thanks again and have a nice day 👓