Feat: Add automation script to generate component

[ArthurTriis1]

What's the purpose of this pull request?

We noticed that every time we wanted to create a new component, we created many new files. So, we thought it might be a good idea to generate these default templates automatically. It will help our development experience and we can waste less time making the "boilerplates files" and jump into the component itself, decreasing the chances of forgetting to update/create a file.

We are using Plop framework to generate those files.

How it works?

• run yarn generate

# What is your component name? 

ComponentName

#  What is your component atomic group?  (Use arrow keys)

> atoms 
> molecules 
> organisms

• it will create all the base files with the component given name;

• It will create a folder for the component under its atomic group;

• Files generated automatically:

✔  ++ faststore/packages/ui/src/atoms/ComponentName/ComponentName.tsx
✔  ++ faststore/packages/ui/src/atoms/ComponentName/index.tsx
✔  ++ faststore/themes/theme-b2c-tailwind/src/atoms/component-name.css
✔  ++ faststore/packages/ui/src/atoms/ComponentName/ComponentName.test.tsx
✔  ++ faststore/packages/ui/src/atoms/ComponentName/stories/ComponentName.stories.tsx
✔  ++ faststore/packages/ui/src/atoms/ComponentName/stories/ComponentName.mdx
✔  _+ faststore/packages/ui/src/index.ts

And that is it! You will be ready to work on your component. 🎉

• For the component name, please follow CamelCase pattern, and do not use -, i.e, Component-Name
• Please try to not rename // Atoms, // Molecules, // Organisms on packages/ui/scr/index.ts file, because we are using it as pattern to update it.

We are using templates files just with the base structure according to what we find helpful to have. You can take a look into it on generators/templates folder.

Are you missing any files? Or is there anything else we can generate automatically? Any suggestions? Please, feel free to leave a comment below 🙃

References

• Plop js: "micro-generator framework"

[netlify]

✔️ Deploy Preview for faststoreui ready!

🔨 Explore the source changes: c9d1aac

🔍 Inspect the deploy log: https://app.netlify.com/sites/faststoreui/deploys/61a8dc928b80ea00077bfb29

😎 Browse the preview: https://deploy-preview-1039--faststoreui.netlify.app

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit c9d1aac:

Sandbox	Source
Store UI Typescript	Configuration

[hellofanny]

Is there any readme file that we can add this information? 👀

[tlgimenes]

Is there any readme file that we can add this information? 👀

Maybe add it on contributing.md?

[tlgimenes]

AMAZING WORK! 🎉🎉🎉

[igorbrasileiro]

😲 Good addition @ArthurTriis1 !! Can you add a brief instruction inside the docs/component-architecture.md ?

[lucasfp13]

Great job, guys! 🎉

[lariciamota]

Nice!! 🚀

[hellofanny]

😲 Good addition @ArthurTriis1 !! Can you add a brief instruction inside the docs/component-architecture.md ?

@ArthurTriis1 Actually, I think we can move the instruction from CONTRIBUTING.MD to *docs/component-architecture.md. It makes more sense. 🤔

[saranicoly]

Great job guys! It will be very useful.

[eduardoformiga]

Really good job here, @ArthurTriis1 ✨

Do we still need to work? hahaha