@eyecuelab/react-common

@eyecuelab/react-common

This is a library of React components and utilities, shared across EyeCue Lab projects.
Check out the documentation!

Usage

npm install --save @eyecuelab/react-common

Contributing

So, we are just starting off here, but these are some initial thoughts on coding standards. These will likely evolve as we continue to build out the library and learn things and discover patterns and all that good stuff.

General thoughts

• Components should be written as functional components using hooks for state management, lifecycle hooks, etc. (checkout the docs for a refresher)
• Styling should be done entirely with Styled Components (docs).
• Including prop types is a must. It makes understanding and documenting components so much easier. (docs)

Documentation

Each component should have a dedicted storybook story showing off it's capabilities. These should be written in the component story format (docs).

Testing

• Jest (docs)
• React Testing Library (docs)
• React Hooks Testing Library (docs)

Publishing

This project uses Semantic Versioning (website). And don't you forget it.

To publish a new version, make sure to update CHANGELOG.md and then run:

npm run release

This will allow to select an update type (major, minor, patch, etc.) and will update the version in package.json. You do not need to update package.json by hand.

Linking to local projects

Firstly, add the following aliases to the webpack config of the parent project:

alias: {
  react: path.resolve(__dirname, 'node_modules', 'react'),
  'react-dom': path.resolve(__dirname, 'node_modules', 'react-dom'),
  'styled-components': path.resolve(__dirname, 'node_modules', 'styled-components'),
},

The exact place this needs to go might differ by project, but for craco-powered projects this should go in the webpack section of the craco.config.js file. Basically when developing locally these libraries will exist in both react-common's node_modules and the parent project's node_modules. By providing these aliases to the parent project, it will always use its own local version of these modules, avoiding conflicts.

Next, run npm run link-dist or npm link ./dist in the root directory of react-common.

Finally run npm link @eyecue/react-common in the root directory of the parent project.

That's it! The parent project will now look at your local version of react-common. You can run npm run dev in the react-common directory to watch for changes and automatically rebuild (and those changes will show up in the parent project!). Be sure to keep in mind that any time you re-run npm install for the parent project, the link will be broken in favor of installing the deployed version of react-common, so you will need to re-run npm link @eyecue/react-common.