Merge pull request #577 from dgarwin/531

feature(storybook): update Storybook to v6

Author: fox1t

.storybook/addons.js

@@ -0,0 +1,46 @@
+var path = require('path');
+module.exports = {
+  "stories": [
+    "../stories/**/*.stories.mdx",
+    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials"
+  ],
+  "typescript": {
+    check: true,
+    checkOptions: {
+      tsconfig: path.resolve(__dirname, '../stories/tsconfig.json'),//We want to change this when https://github.com/storybookjs/storybook/issues/11804 is merged.
+      compilerOptions : {
+        
+      }
+    },
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
+    },
+  },
+  "webpackFinal": async (config, { configType }) => {
+    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
+    // You can change the configuration based on that.
+    // 'PRODUCTION' is used when building the static version of storybook.
+
+    // Make whatever fine-grained changes you need
+    config.module.rules.push({
+      test: /\.s[ac]ss$/i,
+      use: [
+        // Creates `style` nodes from JS strings
+        'style-loader',
+        // Translates CSS into CommonJS
+        'css-loader',
+        // Compiles Sass to CSS
+        'sass-loader',
+      ],
+    });
+
+    // Return the altered config
+    return config;
+  },
+}

.storybook/config.js

@@ -0,0 +1,9 @@
+import { addons } from '@storybook/addons';
+import theme from './theme';
+
+addons.setConfig({
+  theme: theme,
+  showPanel: false,
+  isFullscreen: false,
+  isToolshown: true,
+});

.storybook/main.js

@@ -0,0 +1,14 @@
+import theme from './theme';
+import { addDecorator } from '@storybook/react';
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  docs: {
+    theme: theme
+  },
+  options: {
+    storySort: {
+      order: ['Welcome'], 
+    },
+  }
+}

.storybook/manager.js

@@ -0,0 +1,10 @@
+import { create } from '@storybook/theming'
+export default create({
+  base: 'light',
+  brandTitle: `HospitalRun Components`,
+  brandUrl: 'https://github.com/HospitalRun/components',
+  brandImage:
+    'https://raw.githubusercontent.com/HospitalRun/design/master/logo/horizontal/logo-on-transparent.png',
+  fontBase: '"Open Sans", sans-serif',
+  fontCode: 'monospace',
+})

.storybook/preview.js

@@ -28,11 +28,11 @@
     "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\" \"test/**/*.{js,jsx,ts,tsx}\" \"stories/**/*.{js,jsx,ts,tsx}\"",
     "lint:fix": "eslint \"src/**/*.{js,jsx,ts,tsx}\" \"test/**/*.{js,jsx,ts,tsx}\" \"stories/**/*.{js,jsx,ts,tsx}\" --fix",
     "coveralls": "cross-env CI=true tsdx test --coverage --coverageReporters=text-lcov > lcov.info",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook -c .storybook",
     "semantic-release": "semantic-release",
     "lint-staged": "lint-staged",
-    "commitlint": "commitlint"
+    "commitlint": "commitlint",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook -c .storybook"
   },
   "peerDependencies": {
     "bootstrap": "~4.5.0",
@@ -72,12 +72,10 @@
     "@semantic-release/github": "~7.0.3",
     "@semantic-release/npm": "~7.0.3",
     "@semantic-release/release-notes-generator": "~9.0.0",
-    "@storybook/addon-actions": "~6.0.2",
-    "@storybook/addon-info": "~5.3.0",
-    "@storybook/addon-links": "~6.0.2",
-    "@storybook/addons": "~6.0.2",
-    "@storybook/react": "~5.3.0",
-    "@storybook/theming": "~6.0.2",
+    "@storybook/addon-actions": "~6.0.21",
+    "@storybook/addon-essentials": "~6.0.21",
+    "@storybook/addon-links": "~6.0.21",
+    "@storybook/react": "~6.0.21",
     "@types/chart.js": "~2.9.7",
     "@types/enzyme": "~3.10.3",
     "@types/jest": "~26.0.0",
@@ -87,7 +85,6 @@
     "@types/react-dom": "~16.9.1",
     "@types/react-table": "~7.0.4",
     "@types/sinon": "~9.0.0",
-    "@types/storybook__addon-info": "~5.2.0",
     "@types/tinymce": "~4.5.23",
     "@typescript-eslint/eslint-plugin": "~4.0.0",
     "@typescript-eslint/parser": "~3.10.0",
@@ -122,6 +119,7 @@
     "react-docgen": "~5.3.0",
     "react-docgen-typescript-loader": "~3.7.0",
     "react-dom": "~16.13.0",
+    "react-is": "~16.13.1",
     "rollup-plugin-postcss": "~3.1.1",
     "sass-loader": "~10.0.0",
     "semantic-release": "~17.1.0",

.storybook/theme.js

@@ -0,0 +1,16 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Welcome" />
+
+# HospitalRun Components
+
+<div align="center">
+
+[![NPM Version](https://badgen.net/npm/v/@hospitalrun/components)](https://www.npmjs.com/package/@hospitalrun/components) [![GitHub CI](https://github.com/HospitalRun/components/workflows/GitHub%20CI/badge.svg)](https://github.com/HospitalRun/components/actions) [![Coverage Status](https://coveralls.io/repos/github/HospitalRun/components/badge.svg?branch=master)](https://coveralls.io/github/HospitalRun/components?branch=master) [![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/HospitalRun/components.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/HospitalRun/components/context:javascript)
+[![Bundlephobia](https://badgen.net/bundlephobia/min/@hospitalrun/components)](https://bundlephobia.com/result?p=@hospitalrun/components)
+
+</div>
+
+This Storybook show reusable React components made for the HospitalRun frontend. It's a place for designers and developers alike to collaborate quickly. This library makes up the text inputs, labels, etc of HospitalRun Frontend.
+
+## [For more information and instructions on how to use these React components see the Readme](https://github.com/HospitalRun/components)