Upgrade to Helix v0.19, React 16, and Storybook

.storybook/config.js

@@ -1,64 +1,9 @@
 import { configure, addDecorator, setAddon } from '@storybook/react';
-import { setOptions } from '@storybook/addon-options';
 import { withKnobs } from '@storybook/addon-knobs';
-
-// Initialize HelixUI and load CSS
 import HelixUI from 'helix-ui';
-import 'helix-ui/dist/styles/helix-ui.min.css';
-HelixUI.initialize();
+import 'helix-ui/dist/css/helix-ui.min.css';
 
 addDecorator(withKnobs);
-setOptions({
-    // name to display in the top left corner
-    name: 'helix-react',
-
-    // URL for name in top left corner to link to
-    url: 'https://github.com/HelixDesignSystem/helix-react',
-
-    // show story component as full screen
-    goFullScreen: false,
-
-    // display floating search box to search through stories
-    showSearchBox: false,
-
-    // display panel that shows a list of stories
-    showStoriesPanel: true,
-
-    // display panel that shows addon configurations
-    showAddonPanel: true,
-
-    // show addon panel as a vertical panel on the right
-    addonPanelInRight: false,
-
-    // sorts stories
-    sortStoriesByKind: false,
-
-    /**
-     * regex for finding the hierarchy separator
-     * @example:
-     *   null - turn off hierarchy
-     *   /\// - split by `/`
-     *   /\./ - split by `.`
-     *   /\/|\./ - split by `/` or `.`
-     * @type {Regex}
-     */
-    //hierarchySeparator: null,
-
-    /**
-     * regex for finding the hierarchy root separator
-     * @example:
-     *   null - turn off mulitple hierarchy roots
-     *   /\|/ - split by `|`
-     * @type {Regex}
-     */
-    hierarchyRootSeparator: null,
-
-    /**
-     * sidebar tree animations
-     * @type {Boolean}
-     */
-    sidebarAnimations: true,
-});
 
 // Requires require.context from Webpack
 // See https://webpack.js.org/guides/dependency-management/#require-context
@@ -68,4 +13,6 @@ function loadStories () {
     req.keys().forEach((filename) => req(filename));
 }
 
-configure(loadStories, module);
+HelixUI.initialize().then(() => {
+    configure(loadStories, module);
+});

.storybook/helixTheme.js

@@ -0,0 +1,7 @@
+import { create } from '@storybook/theming/create';
+
+export default create({
+    base: 'light',
+    brandTitle: 'Helix React',
+    brandUrl: 'https://github.com/HelixDesignSystem/helix-react',
+});

.storybook/addons.js → .storybook/manager.js

@@ -1,4 +1,10 @@
+import { addons } from '@storybook/addons';
+import helixTheme from './helixTheme';
 import '@storybook/addon-knobs/register';
 import '@storybook/addon-actions/register';
 import '@storybook/addon-viewport/register';
 import '@storybook/addon-options/register';
+
+addons.setConfig({
+    theme: helixTheme,
+});

.storybook/preview-head.html

@@ -0,0 +1,5 @@
+<script src="https://unpkg.com/[email protected]/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
+
+<style>
+ #root { margin: 20px; }  /* Move all elements away from edges of canvas */
+</style>

package.json

@@ -6,16 +6,21 @@
   "scripts": {
     "install:clean": "rm -rf node_modules && yarn install",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "start-storybook -p 9001 -c .storybook",
-    "docs": "build-storybook -c .storybook -o public"
+    "start": "yarn storybook",
+    "docs": "build-storybook -c .storybook -o public",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/HelixDesignSystem/helix-react.git"
   },
   "author": "Ryan A. Johnson <[email protected]>",
   "contributors": [
-    "Cathy Siller"
+    "Mike Mangialardi",
+    "James Thompson",
+    "Cathy Siller",
+    "Nicko Winner-Arroyo"
   ],
   "license": "Apache-2.0",
   "bugs": {
@@ -27,17 +32,21 @@
     "scope": "@helix-design-system"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "3",
-    "@storybook/addon-knobs": "3",
-    "@storybook/addon-options": "3",
-    "@storybook/addon-viewport": "3",
-    "@storybook/addons": "3",
-    "@storybook/react": "3",
-    "babel-core": "6",
-    "babel-runtime": "6",
-    "helix-ui": "^0.12.0",
-    "prop-types": "15",
-    "react": "15",
-    "react-dom": "15"
-  }
+    "@babel/core": "^7.9.0",
+    "@babel/preset-env": "^7.9.0",
+    "@babel/runtime-corejs2": "^7.9.0",
+    "@storybook/addon-actions": "^5.3.17",
+    "@storybook/addon-knobs": "5.3.17",
+    "@storybook/addon-links": "^5.3.17",
+    "@storybook/addon-options": "5.3.17",
+    "@storybook/addon-viewport": "5.3.17",
+    "@storybook/addons": "^5.3.17",
+    "@storybook/react": "^5.3.17",
+    "babel-loader": "^8.1.0",
+    "helix-ui": "^0.19.0",
+    "prop-types": "^15.7.2",
+    "react": "^16.6.3",
+    "react-dom": "^16.6.3"
+  },
+  "dependencies": {}
 }

src/Icon/index.js

@@ -2,18 +2,18 @@ import React from 'react';
 import HelixUI from 'helix-ui';
 import PropTypes from 'prop-types';
 
-export const Icons = Object.keys(HelixUI.ICONS);
+export const Icons = Object.keys(HelixUI.Utils.ICONS);
 
 class Icon extends React.Component {
     render () {
-        const { 
-            type, 
-            ...props 
+        const {
+            type,
+            ...props
         } = this.props;
 
         return (
-            <hx-icon 
-                type={type} 
+            <hx-icon
+                type={type}
                 {...props}
             ></hx-icon>
         );