@sat/common-ui

This package contains components, theme code, etc. that will be reused throughout our Next.js apps.

• Note: Only tested with Next.js, React apps may not work out-of-the-box

Our department is building out web apps using Next.js zones. This allows apps to be built separately and they can be linked together with rewrite rules. Each app will have their own process, Dockerfile, repository, etc.

However, to keep from duplicating code in each of these repos, we'll use an npm package for code that is likely to be used in many of our web apps (e.g. Theme code, custom components, util functions)

How To Use Locally

If you want to link your Next.js app to this library locally (for development reasons) you need to npm link @sat/common-ui to your app. To do this, do the following:

$ git clone [email protected]:SAT/common-ui.git
$ cd common-ui
$ npm i
$ npm run build # build the bundle manually
$ # npm run dev # if you want bundle on file-changes
$ npm link # set up a link for @sat/common-ui

Then we need to npm link @sat/common-ui in the app:

~/nextjs-app/ $ npm link @sat/common-ui

If you run npm install in the host app directory or reboot your computer, the link will be lost. Until then, the link will live-update any changes automatically.

How To Publish Updates

...describe how to make changes for the npm package...

Example Usage

The only usage of common-ui at the moment is in liaison-ui-- one of many Next apps that will be connected to the clearance-ui for 2.0.

• liaison-ui diff: https://github.ncsu.edu/SAT/liaison-ui/commit/e380ad1f50bbdb8b7562e072659c68bcb2b2ddbf

Technologies

• Next.js - Used for the UI
• styled-components - Used for styling custom components
• evergreen-ui - Used as a foundation for our UI components
• Rollupjs - Used in-place of Webpack. Webpack was hard to debug. Rollup simply takes the code in src/ and outputs it into dist/ in a way that's portable
  • Rollup uses plugins and presets to add functionality
    • rollup-plugin-peer-deps-external - Separates evergreen-ui, next, etc. from our library's bundle (a.k.a. making them externals)
    • @rollup/plugin-babel - Uses babel as a plugin, this handles React presets. See babel plugins below...
    • rollup-plugin-strip-prop-types - Removes prop-types from the bundle, VSCode can't read them after the build
    • @rollup/plugin-node-resolve - Helps load modules from node_modules
    • @rollup/plugin-terser - Minifies the bundle
• babeljs - Compiles our code for compatibility with older browsers
  • Babel uses plugins and presets to add functionality
    • @babel/preset-env - Transpiles JS code, entirely preconfigured
    • @babel/preset-react - Transpiles React code, mostly preconfigured
    • @babel/plugin-external-helpers - Removes duplicate helper functions from the bundle
    • @babel/plugin-transform-runtime - Removes duplicate polyfills from the bundle
    • babel-plugin-styled-components - Correctly compile styled-components
• typescript - Is being used to generate .d.ts files for type definitions only
  • There is a Rollup plugin that can do this too