Universal Component Library

Live docs using components:

• Storybook Live UI Documentation
• React code sandbox
• Angular code sandbox
• Vue code sandbox

npm Commands

• Build all components: npm run build
• Create HTML reports with each components bundle size: npm run analysis
  • results will be in the analysis folder
• Build components for local env and start storybook @ http://localhost:9000: npm run storybook
  • NOTE: Hot rebuilding occurs when any change is made within the lib directory
• Build storybook docs directory (for updating Github pages): npm run build-storybook
• Upload built components to S3 (personal bucket required): node uploadWidgets.js
  • NOTE: ACCESS_KEY, SECRET_KEY, S3_ENDPOINT, and BUCKET env variables need to be set prior to upload

Create Personal S3 bucket

• follow the steps in this medium article

Dev Notes:

• React and React-Dom dependencies are required in the head script of the page using the widgets, see example use file
• the rollup config looks for the widget.jsx file under each component directory to use as the starting point for that widget
• the Storybook stories utilize the rollup built JS file for each widget with pure HTML (no React in the stories)
• the .storybook/preview-body.html and .storybook/preview-head.html files inject the react and react-dom packages into storybook's rendering of components as well as a default div to use for remounting
• when running locally the bundled files are not GZIP compressed since storybook pulls the files from the local file store which does not have the capability to set the content-encoding header that tells the browser that the JS file is GZIP encoded
• the script element creation in each story needs to be anonymous function so that it is rerun every time a different story is selected in the UI to ensure that the new content is placed in the default widget div
• the JSX notes print out shows left double quotes “ instead of the " value due to being in a code block

Credits

• Much of the uploadWidgets.js script came from this stackoverflow answer with some changes and additions to work with this pattern
• App bar starting component snippet from material ui's app bar docs
• Card starting component snippet from material ui's card docs
• Table starting component snippet from material ui's table docs