@dataquiver/react-ui v1.0.13

Dq Components

This folder contains the src and deployment code for our component library.

Table of Contents

1. Table of Contents
2. DQ Components Apis
3. Development

DQ Components APIs

1. App Bar
2. Avatar
3. Divider
4. Drawer Components
5. Form
6. Fullscreen
7. Hooks
8. Masonry
9. Snackbar
10. Socket
11. Tabs

Development

This should be a living library. Anything you create that can be genericized should become a component here.

1. Create the component in the dqComponents/src folder.
2. Use the component somewhere in the web app that this parent repository creates
   1. This was hard to get working. We use a babel.config.js file instead of configuring babel in the package.json. Babel attempts to build any folder with a package.json in it seperately. This is a work around.
   2. If you run into issues using your component make sure any shared dependencies are added to the config/webpack.config.js resolve.alias object.
      1. react, react-router, react-router-dom, and material-ui-styles are already in there since they caused problems.
3. Create a readme following the format of the other READMEs in your new components directory
4. Export the component in dqComponents/index.js
5. Add any dependencies for your component in dqComponents/package.json
6. run npm run build in the dqComponents directory
   1. you now have your component built in the dist folder!

Now you may test your component in another webserver (locally). This process can be a bit tough, depending on what your dependencies look like. Info here: https://github.com/facebook/react/issues/14257 1. Run npm link inside of dqComponents/ 1. In another terminal, go to your desired webserver's directory 1. run npm link @dataquiver/react-ui 1. This will make the npm repository available for use as normal. 1. Import and use your component somewhere 1. IF you get weird errors you likely have conflicting versions of shared dependencies being used. This is only a problem with npm link not actual installs. 1. You can try adding to the resolve.aliases object in your webserver's webpack.config.js to force only one version to be used. 1. You will likely get weird CSS bugs when the library is installed via npm link, these will go away once you publish the new version of dataquiver-react-ui and install it in your webserver with npm install @dataquiver/react-ui 1. Once you have worked out any kinks you are ready to deploy the new version of @dataquiver/react-ui! 1. Update the root package.json with your new version. adding a component is a feature fixing a bug in a component is a fix if you break any component's api that is a break increment like so current+break.current+feature.current+fix * EX: current=2.1.3, a bug fix = 2.1.4, a feature = 2.2.0, a break = 3.0.0 1. Create a merge request on the git repo with your additions 1. Merge when you get approval 1. checkout master, pull master, cd into /src/dqComponents 1. run npm publish

Known issues and workarounds

1. If you cannot use your new dqComponent in the example UI this project provides
   1. Add any dependencies that both the UI and the DQ Component share in the config/webpack.config.js resolve.alias object.
2. If you cannot use the component locally on another UI server with npm link @dataquiver/react-ui
   1. Beware that whenever you run npm install ... on the other UI it breaks the link. Re run npm link @dataquiver/react-ui.
   2. Add any dependencies that both the UI and the DQ Component share in the config/webpack.config.js resolve.alias object.
   3. Even with this, sometimes your CSS will be broken when using npm link. It will not be a problem when you actually use the library (npm link only creates a sym link, it does none of the package management you get with normal npm)