refactor: move components src to corresponding packages folders

[jonnybel]

Summary

Start moving some of the components from src/components/** to packages/components/**/src.

I'm keeping each component "move" on different commits, so it's easier to review and find errors.

Work in progress.

Components moved in this PR:

• avatar
• buttons (all buttons)
• card
• collapsible & collapsible motion
  ...
• table (was already moved before this PR)

It will take a while to move all the components and fix the import paths and dependencies, so I'm opening this PR to be open to suggestions and remarks. Also for the VRTs to run and ensure everything is going well.

[vercel]

This pull request is being automatically deployed with ZEIT Now (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/commercetools/ui-kit/e4s98mpx3
✅ Preview: https://ui-kit-git-ja-move-components.commercetools.now.sh

[emmenko]

I'm wondering if we can maybe flatten the list of packages? For instance, not having packages/buttons/* but instead packages/icon-button, and so on.

What do you think?

[jonnybel]

I see. Should we also do it for all the Fields and Inputs components?

[emmenko]

If we decide to, we should do it for all packages yes.

See for yourself maybe if the codebase is still readable with the packages flatten.

[jonnybel]

The list of folders gets really long and quite disorganised, especially because of the inputs and fields are many and won't be listed sequentially.

Personally, I think I prefer keeping the groups we have now, the same way as they are grouped together in Storybook. They're easier to find on the component tree and also easier to grasp how many of each "type" do exist (useful for when all the components of a certain "type" need to be refactored).

Unless we flatten components like:

fields/number-field
fields/password-field
fields/radio-field
...

into

fields-number-field
fields-password-field
fields-radio-field
...

This would at least keep sorted together... But honestly I still prefer keeping them grouped in folders.

[emmenko]

Yeah ok let's go with that for now. Thanks for looking into it

[jonnybel]

Wondering if these (in .spec.js and .story.js) should be added to devDependencies.

[emmenko]

It's not necessary, the ui-kit packages are available anyway, the other deps can be added to the root package.json as dev deps

[emmenko]

@jonnybel this has been open for a while. I can pick it up and get it ready to merge. We also don't need to migrate all components at once, we can do it step by step.

[emmenko]

I rebased with master and fixed the readmes and packages setup. I think this should be good to go now.

[emmenko]

This is good from my side. I suggest to merge this and continue the migration in separate steps.

[jonnybel]

Yes, migrating all the components takes quite a while and I agree we could merge this for now and continue on another PR.

Thanks a lot for the additional fixes! 🙏