Add a storybook for the ui package

.eslintrc.js

@@ -50,6 +50,7 @@ module.exports = {
           '**/example/**',
           '*.js',
           '**/*.test.js',
+          '**/*.stories.js',
           '**/scripts/*.js',
           '**/stories/**/*.js',
           '**/__tests__/**/*.js',

.storybook/addons.js

@@ -0,0 +1,3 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+
+import '@storybook/addon-actions/register';

.storybook/config.js

@@ -0,0 +1,14 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+import React from 'react';
+import { configure } from '@storybook/react';
+
+function loadStories() {
+  let req;
+  req = require.context('../lib/ui/src', true, /\.stories\.js$/);
+  req.keys().forEach(filename => req(filename));
+
+  req = require.context('../lib/components/src', true, /\.stories\.js$/);
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

lib/components/package.json

@@ -21,5 +21,9 @@
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"
+  },
+  "devDependencies": {
+    "@storybook/react": "^3.2.16",
+    "@storybook/addon-actions": "^3.2.16"
   }
 }

lib/components/src/navigation/menu_link.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import MenuLink from './menu_link';
+
+storiesOf('components/MenuLink', module)
+  .add('default', () => <MenuLink href="http://google.com">Link</MenuLink>)
+  .add('active', () => (
+    <MenuLink active href="http://google.com">
+      Link
+    </MenuLink>
+  ));

lib/components/src/navigation/routed_link.stories.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import RoutedLink from './routed_link';
+
+const onClick = action('onClick');
+storiesOf('components/RoutedLink', module)
+  .add('w/ onClick', () => <RoutedLink onClick={onClick}>Link</RoutedLink>)
+  .add('w/ href', () => <RoutedLink href="http://google.com">Link</RoutedLink>);

lib/ui/package.json

@@ -41,5 +41,9 @@
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"
+  },
+  "devDependencies": {
+    "@storybook/react": "^3.2.16",
+    "@storybook/addon-actions": "^3.2.16"
   }
 }

lib/ui/src/libs/withLifecycleDecorator.js

@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+// A small utility to add before/afterEach to stories.
+class WithLifecyle extends Component {
+  componentWillMount() {
+    this.props.beforeEach();
+  }
+  componentWillUnmount() {
+    this.props.afterEach();
+  }
+  render() {
+    return this.props.storyFn();
+  }
+}
+
+WithLifecyle.propTypes = {
+  storyFn: PropTypes.func.isRequired,
+  beforeEach: PropTypes.func,
+  afterEach: PropTypes.func,
+};
+WithLifecyle.defaultProps = {
+  beforeEach: () => {},
+  afterEach: () => {},
+};
+
+export default ({ beforeEach, afterEach }) => storyFn => (
+  <WithLifecyle beforeEach={beforeEach} afterEach={afterEach} storyFn={storyFn} />
+);

lib/ui/src/modules/ui/components/addon_panel/index.stories.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import AddonPanel from './index';
+
+const panels = {
+  test1: {
+    title: 'Test 1',
+    render() {
+      return <div id="test1">TEST 1</div>;
+    },
+  },
+  test2: {
+    title: 'Test 2',
+    render() {
+      return <div id="test2">TEST 2</div>;
+    },
+  },
+};
+
+const onPanelSelect = action('onPanelSelect');
+storiesOf('ui/AddonPanel', module)
+  .addDecorator(s => <div style={{ height: '100px', display: 'flex' }}>{s()}</div>)
+  .add('default', () => (
+    <AddonPanel panels={panels} onPanelSelect={onPanelSelect} selectedPanel="test2" />
+  ))
+  .add('no panels', () => <AddonPanel panels={{}} onPanelSelect={onPanelSelect} />);

lib/ui/src/modules/ui/components/layout/index.stories.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import Layout from './index';
+
+const panelStyle = {
+  position: 'absolute',
+  height: '100%',
+  width: '100%',
+  color: 'white',
+};
+
+const mockStoriesPanel = () => <div style={{ ...panelStyle, background: '#4abdac' }}>Stories</div>;
+const mockAddonPanel = () => <div style={{ ...panelStyle, background: '#fc4a1a' }}>Addon</div>;
+const mockPreviewPanel = () => <div style={{ ...panelStyle, background: '#f7b733' }}>Preview</div>;
+
+storiesOf('ui/Layout', module)
+  .add('default', () => (
+    <Layout
+      showStoriesPanel
+      showAddonPanel
+      goFullScreen={false}
+      addonPanelInRight={false}
+      storiesPanel={mockStoriesPanel}
+      addonPanel={mockAddonPanel}
+      preview={mockPreviewPanel}
+    />
+  ))
+  .add('full screen', () => (
+    <Layout
+      showStoriesPanel={false}
+      showAddonPanel={false}
+      goFullScreen
+      addonPanelInRight={false}
+      storiesPanel={mockStoriesPanel}
+      addonPanel={mockAddonPanel}
+      preview={mockPreviewPanel}
+    />
+  ))
+  .add('no stories panel', () => (
+    <Layout
+      showStoriesPanel={false}
+      showAddonPanel
+      goFullScreen={false}
+      addonPanelInRight={false}
+      storiesPanel={mockStoriesPanel}
+      addonPanel={mockAddonPanel}
+      preview={mockPreviewPanel}
+    />
+  ))
+  .add('no addon panel', () => (
+    <Layout
+      showStoriesPanel
+      showAddonPanel={false}
+      goFullScreen={false}
+      addonPanelInRight={false}
+      storiesPanel={mockStoriesPanel}
+      addonPanel={mockAddonPanel}
+      preview={mockPreviewPanel}
+    />
+  ))
+  .add('addon panel in right', () => (
+    <Layout
+      showStoriesPanel
+      showAddonPanel
+      goFullScreen={false}
+      addonPanelInRight
+      storiesPanel={mockStoriesPanel}
+      addonPanel={mockAddonPanel}
+      preview={mockPreviewPanel}
+    />
+  ));

lib/ui/src/modules/ui/components/menu_item.stories.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import MenuItem from './menu_item';
+
+storiesOf('ui/MenuItem', module).add('default', () => (
+  <MenuItem title="title" onClick={action('onClick')}>
+    Content
+  </MenuItem>
+));

lib/ui/src/modules/ui/components/search_box.stories.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import SearchBox from './search_box';
+
+const stories = [
+  {
+    kind: 'a',
+    stories: ['b', 'c'],
+  },
+];
+const onSelectStory = action('onSelectStory');
+const onClose = action('onClose');
+storiesOf('ui/SearchBox', module)
+  .add('default', () => <SearchBox showSearchBox onSelectStory={onSelectStory} onClose={onClose} />)
+  .add('with stories', () => (
+    <SearchBox showSearchBox onSelectStory={onSelectStory} onClose={onClose} stories={stories} />
+  ));

lib/ui/src/modules/ui/components/stories_panel/header.stories.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import Header from './header';
+
+const openShortcutsHelp = action('openShortcutsHelp');
+storiesOf('ui/stories/Header', module).add('simple', () => (
+  <Header name="name" url="http://google.com" openShortcutsHelp={openShortcutsHelp} />
+));

lib/ui/src/modules/ui/components/stories_panel/index.stories.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import StoriesPanel from './index';
+import { createHierarchy } from '../../libs/hierarchy';
+import withLifecyle from '../../../../libs/withLifecycleDecorator';
+import { setContext } from '../../../../compose';
+
+const decorator = withLifecyle({
+  beforeEach() {
+    setContext({
+      clientStore: {
+        getAll() {
+          return { shortcutOptions: {} };
+        },
+        subscribe() {},
+      },
+    });
+  },
+  afterEach() {
+    setContext(null);
+  },
+});
+
+const storiesHierarchy = createHierarchy([{ kind: 'kk', namespaces: ['kk'], stories: ['bb'] }]);
+const openShortcutsHelp = action('openShortcutsHelp');
+const onStoryFilter = action('onStoryFilter');
+storiesOf('ui/stories/StoriesPanel', module)
+  .addDecorator(decorator)
+  .add('default', () => (
+    <StoriesPanel
+      filter="xxxxx"
+      openShortcutsHelp={openShortcutsHelp}
+      onStoryFilter={onStoryFilter}
+    />
+  ))
+  .add('with storiesHierarchy prop', () => (
+    <StoriesPanel
+      storiesHierarchy={storiesHierarchy}
+      selectedKind="kk"
+      selectedStory="bb"
+      selectedHierarchy={['kk']}
+      openShortcutsHelp={openShortcutsHelp}
+      onStoryFilter={onStoryFilter}
+    />
+  ))
+  .add('storiesHierarchy exists but is empty', () => (
+    <StoriesPanel
+      storiesHierarchy={createHierarchy([])}
+      openShortcutsHelp={openShortcutsHelp}
+      onStoryFilter={onStoryFilter}
+    />
+  ));

lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.stories.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import Stories from './index';
+import { setContext } from '../../../../../compose';
+import { createHierarchy, prepareStoriesForHierarchy } from '../../../libs/hierarchy';
+import { storyFilter } from '../../../libs/filters';
+import withLifecyle from '../../../../../libs/withLifecycleDecorator';
+
+const data = createHierarchy([
+  { kind: 'a', name: 'a', namespaces: ['a'], stories: ['a1', 'a2'] },
+  { kind: 'b', name: 'b', namespaces: ['b'], stories: ['b1', 'b2'] },
+]);
+
+const initialData = [
+  {
+    kind: 'some.name.item1',
+    stories: ['a1', 'a2'],
+  },
+  {
+    kind: 'another.space.20',
+    stories: ['b1', 'b2'],
+  },
+];
+const dataWithoutSeparator = createHierarchy(prepareStoriesForHierarchy(initialData));
+const dataWithSeparator = createHierarchy(prepareStoriesForHierarchy(initialData, '\\.'));
+
+const filter = 'th';
+const selectedKind = 'another.space.20';
+
+const filteredData = storyFilter(
+  prepareStoriesForHierarchy(initialData, '\\.'),
+  filter,
+  selectedKind
+);
+
+const filteredDataHierarchy = createHierarchy(filteredData);
+
+const decorator = withLifecyle({
+  beforeEach() {
+    setContext({
+      clientStore: {
+        getAll() {
+          return { shortcutOptions: {} };
+        },
+        subscribe() {},
+      },
+    });
+  },
+  afterEach() {
+    setContext(null);
+  },
+});
+
+storiesOf('ui/stories/Stories', module)
+  .addDecorator(decorator)
+  .add('empty', () => (
+    <Stories
+      storiesHierarchy={createHierarchy([])}
+      selectedKind=""
+      selectedStory=""
+      selectedHierarchy={[]}
+    />
+  ))
+  .add('simple', () => (
+    <Stories
+      storiesHierarchy={data}
+      selectedKind="b"
+      selectedStory="b2"
+      selectedHierarchy={['b']}
+    />
+  ))
+  .add('with hierarchy - hierarchySeparator is defined', () => (
+    <Stories
+      storiesHierarchy={dataWithSeparator}
+      selectedKind="another.space.20"
+      selectedStory="b2"
+      selectedHierarchy={['another', 'space', '20']}
+    />
+  ))
+  .add('without hierarchy - hierarchySeparator is defined', () => (
+    <Stories
+      storiesHierarchy={dataWithoutSeparator}
+      selectedKind="another.space.20"
+      selectedStory="b2"
+      selectedHierarchy={['another.space.20']}
+    />
+  ))
+  .add('with highlighting when storiesFilter is provided', () => (
+    <Stories
+      storiesHierarchy={filteredDataHierarchy}
+      selectedKind={selectedKind}
+      selectedStory="b2"
+      selectedHierarchy={['another', 'space', '20']}
+      storyFilter={filter}
+    />
+  ));