VGS-ELEMENTE

Reusable UI Components Library

Install dependencies

npm i

Storybook for local development

npm run storybook

npm link usage

To link the local @vgs/elemente into other project for local development do:

• in the this vgs/elemente root folder do:

  npm run link-elemente -- path/to/project

  Example: npm run link-elemente -- ../dashboard

  this must overwrite your vgs/elemente npm package from your app's node_modules folder with this vgs/elemente project.

  if this command didn't overwrite vgs/elemente npm package, then just delete it temporary from node_modules.

• in this vgs/elemente project's terminal you can run npm run build

• in the app project run npm start to start local development.

• with this setup, every new changes with file save in this vgs/elemente project, hot-reload in your app project must be triggered.

• to unlink the vgs/elemente package do:

  npm run unlink-elemente

Notes/Issues

Importing some react functional components while using npm link may lead to Invalid hook call error. In that case try linking this vgs/elemente project to the same React instance as your app using. From vgs/elemente terminal do:

npm link path/to/app/node_modules/react

Rebuild everything if needed and try again.

Publishing new version of npm package

• After you've done with all the changes create a commit.
• Then do: npm version patch. It will create separate commit with updated version in package.json.
• Push all commits.
• Create new Pull Request to develop. Check it and merge.

Build component library

npm run build

Notes

• Hooks-related error resolutions: https://github.com/facebook/react/issues/13991#issuecomment-496383268
• Suggested alternative to npm link: yalc - Work with yarn/npm packages locally like a boss.