Feature/multiple hierarchies

addons/options/README.md

@@ -90,13 +90,19 @@ setOptions({
    * @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,
-
   /**
    * id to select an addon panel
    * @type {String}

addons/options/src/preview/index.js

@@ -13,6 +13,14 @@ function regExpStringify(exp) {
   return null;
 }
 
+function hasOwnProp(object, propName) {
+  return Object.prototype.hasOwnProperty.call(object, propName);
+}
+
+function withRegexProp(object, propName) {
+  return hasOwnProp(object, propName) ? { [propName]: regExpStringify(object[propName]) } : {};
+}
+
 // setOptions function will send Storybook UI options when the channel is
 // ready. If called before, options will be cached until it can be sent.
 export function setOptions(newOptions) {
@@ -23,16 +31,13 @@ export function setOptions(newOptions) {
     );
   }
 
-  let options = newOptions;
-
   // since 'undefined' and 'null' are the valid values we don't want to
-  // override the hierarchySeparator if the prop is missing
-  if (Object.prototype.hasOwnProperty.call(newOptions, 'hierarchySeparator')) {
-    options = {
-      ...newOptions,
-      hierarchySeparator: regExpStringify(newOptions.hierarchySeparator),
-    };
-  }
+  // override the hierarchySeparator or hierarchyRootSeparator if the prop is missing
+  const options = {
+    ...newOptions,
+    ...withRegexProp(newOptions, 'hierarchySeparator'),
+    ...withRegexProp(newOptions, 'hierarchyRootSeparator'),
+  };
 
   channel.emit(EVENT_ID, { options });
 }

examples/cra-kitchen-sink/.storybook/config.js

@@ -13,7 +13,8 @@ setOptions({
   showSearchBox: false,
   addonPanelInRight: true,
   sortStoriesByKind: false,
-  hierarchySeparator: /\/|\./,
+  hierarchySeparator: /\./,
+  hierarchyRootSeparator: /\|/,
 });
 
 // deprecated usage of infoAddon

examples/official-storybook/config.js

@@ -1,7 +1,13 @@
 /* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
 import { configure } from '@storybook/react';
+import { setOptions } from '@storybook/addon-options';
 import 'react-chromatic/storybook-addon';
 
+setOptions({
+  hierarchySeparator: /\/|\./,
+  hierarchyRootSeparator: /\|/,
+});
+
 function loadStories() {
   let req;
   req = require.context('../../lib/ui/src', true, /\.stories\.js$/);

examples/official-storybook/stories/__snapshots__/addon-a11y.stories.storyshot

@@ -1,24 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addon a11y Default 1`] = `<button />`;
+exports[`Storyshots Addons|a11y Default 1`] = `<button />`;
 
-exports[`Storyshots Addon a11y Disabled 1`] = `
+exports[`Storyshots Addons|a11y Disabled 1`] = `
 <button
   disabled=""
 >
   Testing the a11y addon
 </button>
 `;
 
-exports[`Storyshots Addon a11y Invalid contrast 1`] = `
+exports[`Storyshots Addons|a11y Invalid contrast 1`] = `
 <button
   style="color:black;background-color:black"
 >
   Testing the a11y addon
 </button>
 `;
 
-exports[`Storyshots Addon a11y Label 1`] = `
+exports[`Storyshots Addons|a11y Label 1`] = `
 <button>
   Testing the a11y addon
 </button>

examples/official-storybook/stories/__snapshots__/addon-actions.stories.storyshot

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addon Actions All types 1`] = `
+exports[`Storyshots Addons|Actions All types 1`] = `
 <div>
   <button
     class="css-1yjiefr"
@@ -100,39 +100,39 @@ exports[`Storyshots Addon Actions All types 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon Actions Circular Payload 1`] = `
+exports[`Storyshots Addons|Actions Circular Payload 1`] = `
 <button
   class="css-1yjiefr"
 >
   Circular Payload
 </button>
 `;
 
-exports[`Storyshots Addon Actions Decorated Action 1`] = `
+exports[`Storyshots Addons|Actions Decorated Action 1`] = `
 <button
   class="css-1yjiefr"
 >
   First Argument
 </button>
 `;
 
-exports[`Storyshots Addon Actions Function Name 1`] = `
+exports[`Storyshots Addons|Actions Function Name 1`] = `
 <button
   class="css-1yjiefr"
 >
   Action.name: fnName
 </button>
 `;
 
-exports[`Storyshots Addon Actions Hello World 1`] = `
+exports[`Storyshots Addons|Actions Hello World 1`] = `
 <button
   class="css-1yjiefr"
 >
   Hello World
 </button>
 `;
 
-exports[`Storyshots Addon Actions Reserved keyword as name 1`] = `
+exports[`Storyshots Addons|Actions Reserved keyword as name 1`] = `
 <button
   class="css-1yjiefr"
 >

examples/official-storybook/stories/__snapshots__/addon-backgrounds.stories.storyshot

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addon Backgrounds story 1 1`] = `
+exports[`Storyshots Addons|Backgrounds story 1 1`] = `
 <div
   style="overflow:scroll;position:fixed;top:0;bottom:0;right:0;left:0;transition:background 0.25s ease-in-out;background-position:center;background-size:cover;background:transparent"
 >
@@ -10,7 +10,7 @@ exports[`Storyshots Addon Backgrounds story 1 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon Backgrounds story 2 1`] = `
+exports[`Storyshots Addons|Backgrounds story 2 1`] = `
 <div
   style="overflow:scroll;position:fixed;top:0;bottom:0;right:0;left:0;transition:background 0.25s ease-in-out;background-position:center;background-size:cover;background:transparent"
 >

examples/official-storybook/stories/__snapshots__/addon-events.stories.storyshot

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addon Events Logger 1`] = `
+exports[`Storyshots Addons|Events Logger 1`] = `
 <div
   style="padding:20px;font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Roboto\\",
       \\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif;color:rgb(51, 51, 51)"