@greenhousegroup/shared-ui NPM

JARVIS UI

This package contains ready to use React components in the style of JARVIS UI. The project is built based on storybookJS. You can find the online version of the storybook on: https://storybook.jarvis.greenhousegroup.com/

Requirements

To use these components you need to have a font-awesome pro license configured for your solution.

Installation

You can install this packages in your react environment using one of the following commands.

NPM

npm install @greenhousegroup/shared-ui

Yarn

yarn install @greenhousegroup/shared-ui

Using components

Any component seen in the storybook can be imported from the main package. See the following example.

import React from 'react';
import { BasicPage } from '@greenhousegroup/shared-ui';

export default function OverviewPage(): React.ReactElement {
  return (
    <BasicPage title="Example page" crumbs={['Example page']}>
      Content
    </BasicPage>
  );
}

For JARVIS UI Developers

Besides using it in you own project you can also have the need to add new components, or new features to existing

Install

yarn install

Usage

yarn storybook

This will run the storybook application allowing you to view and interact with the individual components.

yarn test

This will run the Jest test framework in watch mode.

yarn test:ui

This will run the UI tests in the Jest test framework. First storybook will start in a new window and the tests will run after that. Be aware that you'll have to close storybook manually afterwards.

yarn lint
yarn lint-style

These will run linting on the code and styling.

Writing tests

Regular tests should be placed in the same folder as the component, name like component.test.tsx. UI tests, any test that uses the browser with tools like selenium of puppeteer should by placed in a UI test file, named like component.test.ui.tsx.

Versioning

We use semantic versioning for this package, with the schema MAJOR.MINOR.PATCH. For more information check out: https://semver.org/

Publishing

Update the CHANGELOG.md with your latest changes
Increase the version (corresponding to the one in the changelog) in package.json
Merge to master branch

The last step of the pipeline, is publishing. Storybook will always be deployed. When you want/need to publish the shared-ui to NPM, you'll manually have to click the play button on the publish-shared-ui-to-npm step.

Using local version in your project

Sometimes you want to debug something locally, without releasing a new version of Jarvis UI every time. There are two ways to do this.

Linking

You can link to the local version using yarn link, follow these steps to get it up and running. 1. Open a command prompt and browse to the root of Jarvis UI. 2. Run yarn link, you should now see a message that a link has been created for "@greenhousegroup/shared-ui". 3. Browse to the root of your project, where you already use the Jarvis UI NPM package. 4. Run yarn link "@greenhousegroup/shared-ui", you should now see a message that the link is being used.

This creates a symbolic link to the build of your local package. Now you can change code in Jarvis UI, run the command yarn build on the Jarvis UI project and you should see the changes in your application.

Be aware

You have to build Jarvis UI after every change!
After you are done with local development, remove the link by running yarn unlink "@greenhousegroup/shared-ui" followed by a yarn install.

Webpack alias

Webpack alias allows you to point a module resolve to a certain directory. This is the most flexible and efficient way to work on shared UI from your project, but it requires some configuration and can most easily break in the future. But it does not require building, changes reflect instantly in your project.

You should add an module alias to your webpack config, and make sure that your webpack handles typescript. Also make sure any (s)css files are processed without using local modules.

Assuming you have your project in the same folder as Jarvis-UI, you could use the following example which is from webpack.config.dev.js in the Briefing-UI project.

Add this function to the file

function useLocalJarvisUi(config) {
  config.resolve.alias = {
    "@greenhousegroup/shared-ui": path.resolve(__dirname, "../../../../shared-ui/src/"),
  }
  config.module.rules.push({
      test: /\.scss$|\.css$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        'sass-loader',
      ],
      exclude: [
        path.resolve(__dirname, '../../')
      ]
  })
}

Now before exporting your config just call useLocalJarvisUI(config) to use the local version, disable the line to use the installed version.

Be aware

Your webpack will be a little slower, since it has to build two projects
Changes in setup / files / packages in Jarvis UI could break this solution.

Resolutions

"webpack-dev-server/*/http-proxy": "^1.18.1"

2020-08-31

┌───────────────┬──────────────────────────────────────────────────────────────┐
│ high          │ Denial of Service                                            │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ http-proxy                                                   │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=1.18.1                                                     │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ webpack-dev-server                                           │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ webpack-dev-server > http-proxy-middleware > http-proxy      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://www.npmjs.com/advisories/1486                        │
└───────────────┴──────────────────────────────────────────────────────────────┘

"minimist": "^1.2.3"

2020-08-31 Multiple, one example:

┌───────────────┬──────────────────────────────────────────────────────────────┐
│ low           │ Prototype Pollution                                          │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ minimist                                                     │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=0.2.1 <1.0.0 || >=1.2.3                                    │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ node-sass                                                    │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ node-sass > node-gyp > mkdirp > minimist                     │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://www.npmjs.com/advisories/1179                        │
└───────────────┴──────────────────────────────────────────────────────────────┘

"lodash": "^4.17.19"

2020-08-31 Multiple, one example:

┌───────────────┬──────────────────────────────────────────────────────────────┐
│ low           │ Prototype Pollution                                          │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ lodash                                                       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=4.17.19                                                    │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ react-dates                                                  │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ react-dates > lodash                                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://www.npmjs.com/advisories/1523                        │
└───────────────┴──────────────────────────────────────────────────────────────┘

Known issues

Type intersection not working

Intersected types are not correctly displayed when used in the properties. The documentation goes missing from the storybook, which makes using the component a lot less practical. For example templates/BasePage/BasePage.tsx has a definition for BasePagePassThroughProps, which was meant to be used and extended in other templates. But when doing so, none of the property documentation will show up. This issue comes from react-docgen and is still open on their end: https://github.com/reactjs/react-docgen/pull/352 Or from react-docgen-typescript-loader where it is also still open: https://github.com/styleguidist/react-docgen-typescript/issues/158

Upgrading rc-slider 9.2.4 ❯ 9.3.1

Upgrading this package breaks the whole slider. It does not seem to be a JSX element anymore. This is a known issue, but not fixed yet: https://github.com/react-component/slider/issues/656