Merge pull request #11279 from hashicorp/f-ui/storybook-upgrade

UI: Storybook upgrade
hashicorp · Oct 7, 2021 · c50b751 · c50b751
2 parents 0881b94 + b9937df
commit c50b751
Show file tree

Hide file tree

Showing 40 changed files with 3,265 additions and 1,649 deletions.
diff --git a/ui/.storybook/addons.js b/ui/.storybook/addons.js
diff --git a/ui/.storybook/config.js b/ui/.storybook/config.js
diff --git a/ui/.storybook/main.js b/ui/.storybook/main.js
@@ -0,0 +1,14 @@
+/* eslint-env node */
+module.exports = {
+  addons: [
+    '@storybook/addon-docs',
+    '@storybook/addon-storysource',
+    '@storybook/addon-knobs',
+    '@storybook/addon-viewport',
+  ],
+  stories: [
+    '../stories/theme/*.stories.js',
+    '../stories/components/*.stories.js',
+    '../stories/charts/*.stories.js',
+  ],
+};
diff --git a/ui/.storybook/preview.js b/ui/.storybook/preview.js
@@ -0,0 +1,41 @@
+import { addDecorator, addParameters } from '@storybook/ember';
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+import theme from './theme.js';
+
+addParameters({
+  viewport: { viewports: INITIAL_VIEWPORTS },
+  options: {
+    showPanel: true,
+    theme,
+  },
+});
+
+addDecorator(storyFn => {
+  let { template, context } = storyFn();
+
+  let wrapperElementStyle = {
+    margin: '20px',
+  };
+
+  let applicationWrapperElement = document.createElement('div');
+  Object.assign(applicationWrapperElement.style, wrapperElementStyle);
+
+  let storybookElement = document.createElement('div');
+  storybookElement.setAttribute('id', 'storybook');
+
+  let wormhole = document.createElement('div');
+  wormhole.setAttribute('id', 'ember-basic-dropdown-wormhole');
+
+  storybookElement.appendChild(wormhole);
+
+  applicationWrapperElement.appendChild(storybookElement);
+  storybookElement.appendTo = function appendTo(el) {
+    el.appendChild(applicationWrapperElement);
+  };
+
+  return {
+    template,
+    context,
+    element: storybookElement,
+  };
+});
diff --git a/ui/package.json b/ui/package.json
@@ -39,7 +39,7 @@
     "@glimmer/component": "^1.0.1",
     "@glimmer/tracking": "^1.0.0",
     "@hashicorp/structure-icons": "^1.3.0",
-    "@storybook/ember-cli-storybook": "^0.2.0",
+    "@storybook/ember-cli-storybook": "https://github.com/DingoEatingFuzz/ember-cli-storybook#c207500",
     "anser": "^1.4.8",
     "babel-eslint": "^10.1.0",
     "base64-js": "^1.3.1",
@@ -131,11 +131,11 @@
   },
   "optionalDependencies": {
     "@babel/plugin-transform-member-expression-literals": "^7.2.0",
-    "@storybook/addon-knobs": "^5.2.5",
-    "@storybook/addon-storysource": "^5.2.5",
-    "@storybook/addon-viewport": "^5.2.5",
-    "@storybook/addons": "^5.2.5",
-    "@storybook/ember": "^5.2.5",
+    "@storybook/addon-knobs": "^6.3.1",
+    "@storybook/addon-storysource": "^6.3.10",
+    "@storybook/addon-viewport": "^6.3.10",
+    "@storybook/addons": "^6.3.10",
+    "@storybook/ember": "^6.3.10",
     "babel-loader": "^8.0.6",
     "ember-cli-get-component-path-option": "^1.0.0",
     "ember-cli-string-utils": "^1.1.0"

diff --git a/ui/stories/charts/distribution-bar.stories.js b/ui/stories/charts/distribution-bar.stories.js
@@ -6,7 +6,7 @@ import { on } from '@ember/object/evented';
 import DelayedTruth from '../utils/delayed-truth';
 
 export default {
-  title: 'Charts|Distribution Bar',
+  title: 'Charts/Distribution Bar',
 };
 
 export let Standard = () => {

diff --git a/ui/stories/charts/gauge-chart.stories.js b/ui/stories/charts/gauge-chart.stories.js
@@ -3,7 +3,7 @@ import DelayedArray from '../utils/delayed-array';
 import DelayedTruth from '../utils/delayed-truth';
 
 export default {
-  title: 'Charts|Gauge Chart',
+  title: 'Charts/Gauge Chart',
 };
 
 let totalVariations = [

diff --git a/ui/stories/charts/line-chart.stories.js b/ui/stories/charts/line-chart.stories.js
@@ -7,7 +7,7 @@ import moment from 'moment';
 import DelayedArray from '../utils/delayed-array';
 
 export default {
-  title: 'Charts|Line Chart',
+  title: 'Charts/Line Chart',
 };
 
 let data1 = [

diff --git a/ui/stories/charts/primitives.stories.js b/ui/stories/charts/primitives.stories.js
@@ -1,7 +1,7 @@
 import hbs from 'htmlbars-inline-precompile';
 
 export default {
-  title: 'Charts|Primitives',
+  title: 'Charts/Primitives',
 };
 
 export let Tooltip = () => ({

diff --git a/ui/stories/charts/progress-bar.stories.js b/ui/stories/charts/progress-bar.stories.js
@@ -4,7 +4,7 @@ import EmberObject, { computed } from '@ember/object';
 import { on } from '@ember/object/evented';
 
 export default {
-  title: 'Charts|Progress Bar',
+  title: 'Charts/Progress Bar',
 };
 
 export let Standard = () => {

diff --git a/ui/stories/charts/stats-time-series.stories.js b/ui/stories/charts/stats-time-series.stories.js
@@ -7,7 +7,7 @@ import moment from 'moment';
 import DelayedArray from '../utils/delayed-array';
 
 export default {
-  title: 'Charts|Stats Time Series',
+  title: 'Charts/Stats Time Series',
 };
 
 let ts = offset =>

diff --git a/ui/stories/components/accordion.stories.js b/ui/stories/components/accordion.stories.js
@@ -2,7 +2,7 @@ import hbs from 'htmlbars-inline-precompile';
 import productMetadata from '../../app/utils/styleguide/product-metadata';
 
 export default {
-  title: 'Components|Accordion',
+  title: 'Components/Accordion',
 };
 
 export let Standard = () => {

diff --git a/ui/stories/components/alerts.stories.js b/ui/stories/components/alerts.stories.js
@@ -1,7 +1,7 @@
 import hbs from 'htmlbars-inline-precompile';
 
 export default {
-  title: 'Components|Alerts',
+  title: 'Components/Alerts',
 };
 
 export let Standard = () => {

diff --git a/ui/stories/components/boxed-section.stories.js b/ui/stories/components/boxed-section.stories.js
@@ -2,7 +2,7 @@ import hbs from 'htmlbars-inline-precompile';
 import { withKnobs, optionsKnob } from '@storybook/addon-knobs';
 
 export default {
-  title: 'Components|Boxed Section',
+  title: 'Components/Boxed Section',
   decorators: [withKnobs],
 };
 

diff --git a/ui/stories/components/breadcrumbs.stories.js b/ui/stories/components/breadcrumbs.stories.js
@@ -1,7 +1,7 @@
 import hbs from 'htmlbars-inline-precompile';
 
 export default {
-  title: 'Components|Breadcrumbs',
+  title: 'Components/Breadcrumbs',
 };
 
 export let Standard = () => {

diff --git a/ui/stories/components/buttons.stories.js b/ui/stories/components/buttons.stories.js
@@ -1,7 +1,7 @@
 import hbs from 'htmlbars-inline-precompile';
 
 export default {
-  title: 'Components|Buttons',
+  title: 'Components/Buttons',
 };
 
 export let Standard = () => {

diff --git a/ui/stories/components/copy-button.stories.js b/ui/stories/components/copy-button.stories.js
@@ -2,7 +2,7 @@ import hbs from 'htmlbars-inline-precompile';
 import { withKnobs, text } from '@storybook/addon-knobs';
 
 export default {
-  title: 'Components|Copy Button',
+  title: 'Components/Copy Button',
   decorators: [withKnobs],
 };
 

diff --git a/ui/stories/components/diff-viewer.stories.js b/ui/stories/components/diff-viewer.stories.js
@@ -1,7 +1,7 @@
 import hbs from 'htmlbars-inline-precompile';
 
 export default {
-  title: 'Components|Diff Viewer',
+  title: 'Components/Diff Viewer',
 };
 
 export let DiffViewerWithInsertions = () => {

diff --git a/ui/stories/components/dropdown.stories.js b/ui/stories/components/dropdown.stories.js
@@ -1,7 +1,7 @@
 import hbs from 'htmlbars-inline-precompile';
 
 export default {
-  title: 'Components|Dropdown',
+  title: 'Components/Dropdown',
 };
 
 let options = [

diff --git a/ui/stories/components/filter-facets.stories.js b/ui/stories/components/filter-facets.stories.js
@@ -1,7 +1,7 @@
 import hbs from 'htmlbars-inline-precompile';
 
 export default {
-  title: 'Components|Filter Facets',
+  title: 'Components/Filter Facets',
 };
 
 let options1 = [

diff --git a/ui/stories/components/gutter-menu.stories.js b/ui/stories/components/gutter-menu.stories.js
@@ -1,7 +1,7 @@
 import hbs from 'htmlbars-inline-precompile';
 
 export default {
-  title: 'Components|Gutter Menu',
+  title: 'Components/Gutter Menu',
 };
 
 export let Standard = () => {

diff --git a/ui/stories/components/header.stories.js b/ui/stories/components/header.stories.js
@@ -1,7 +1,7 @@
 import hbs from 'htmlbars-inline-precompile';
 
 export default {
-  title: 'Components|Header',
+  title: 'Components/Header',
 };
 
 export let Header = () => {

diff --git a/ui/stories/components/inline-definitions.stories.js b/ui/stories/components/inline-definitions.stories.js
@@ -1,7 +1,7 @@
 import hbs from 'htmlbars-inline-precompile';
 
 export default {
-  title: 'Components|Inline Definitions',
+  title: 'Components/Inline Definitions',
 };
 
 export let Standard = () => {

diff --git a/ui/stories/components/json-viewer.stories.js b/ui/stories/components/json-viewer.stories.js
@@ -3,7 +3,7 @@ import hbs from 'htmlbars-inline-precompile';
 import DelayedTruth from '../utils/delayed-truth';
 
 export default {
-  title: 'Components|JSON Viewer',
+  title: 'Components/JSON Viewer',
 };
 
 export let Standard = () => {

diff --git a/ui/stories/components/log-stream.stories.js b/ui/stories/components/log-stream.stories.js
@@ -1,7 +1,7 @@
 import hbs from 'htmlbars-inline-precompile';
 
 export default {
-  title: 'Components|Log Stream',
+  title: 'Components/Log Stream',
 };
 
 export let LogStream = () => {

diff --git a/ui/stories/components/metrics.stories.js b/ui/stories/components/metrics.stories.js
@@ -1,7 +1,7 @@
 import hbs from 'htmlbars-inline-precompile';
 
 export default {
-  title: 'Components|Metrics',
+  title: 'Components/Metrics',
 };
 
 export let Standard = () => {

diff --git a/ui/stories/components/page-tabs.stories.js b/ui/stories/components/page-tabs.stories.js
@@ -1,7 +1,7 @@
 import hbs from 'htmlbars-inline-precompile';
 
 export default {
-  title: 'Components|Page Tabs',
+  title: 'Components/Page Tabs',
 };
 
 export let Standard = () => {

diff --git a/ui/stories/components/page-title.stories.js b/ui/stories/components/page-title.stories.js
@@ -1,7 +1,7 @@
 import hbs from 'htmlbars-inline-precompile';
 
 export default {
-  title: 'Components|Page Title',
+  title: 'Components/Page Title',
 };
 
 export let Standard = () => {

diff --git a/ui/stories/components/proxy-tag.stories.js b/ui/stories/components/proxy-tag.stories.js
@@ -1,7 +1,7 @@
 import hbs from 'htmlbars-inline-precompile';
 
 export default {
-  title: 'Components|Proxy Tag',
+  title: 'Components/Proxy Tag',
 };
 
 export let ProxyTag = () => {

diff --git a/ui/stories/components/search-box.stories.js b/ui/stories/components/search-box.stories.js
@@ -1,7 +1,7 @@
 import hbs from 'htmlbars-inline-precompile';
 
 export default {
-  title: 'Components|Search Box',
+  title: 'Components/Search Box',
 };
 
 export let Standard = () => {

diff --git a/ui/stories/components/stepper-input.stories.js b/ui/stories/components/stepper-input.stories.js
@@ -2,7 +2,7 @@ import hbs from 'htmlbars-inline-precompile';
 import { withKnobs, optionsKnob } from '@storybook/addon-knobs';
 
 export default {
-  title: 'Components|Stepper Input',
+  title: 'Components/Stepper Input',
   decorators: [withKnobs],
 };
 

diff --git a/ui/stories/components/table-configuration.stories.js b/ui/stories/components/table-configuration.stories.js
@@ -1,7 +1,7 @@
 import hbs from 'htmlbars-inline-precompile';
 
 export default {
-  title: 'Components|Table, Configuration',
+  title: 'Components/Table, Configuration',
 };
 
 export let TableConfiguration = () => {