INSTUI-2878 Upgrade storybook to 6.1.18

.gitignore

@@ -2,6 +2,7 @@ node_modules/
 npm-debug.log
 yarn-error.log
 lerna-debug.log
+./build-storybook.log
 coverage/
 package-lock.json
 .yarnclean
@@ -15,3 +16,4 @@ __build__
 .env
 .env.test
 .tmp/
+

packages/__examples__/.storybook/main.js

@@ -0,0 +1,27 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+module.exports = {
+  stories: ['../stories.js']
+}

packages/__examples__/.storybook/manager.js

@@ -0,0 +1,12 @@
+import addons from '@storybook/addons'
+import { create } from '@storybook/theming'
+
+addons.setConfig({
+  theme: create({
+    base: 'light',
+    brandTitle: 'InstUI storybook',
+    name: 'instructure-ui',
+    brandUrl: 'https://instructure.design',
+    brandImage: 'https://www.instructure.com/themes/custom/themekit/logo.svg'
+  })
+})

packages/__examples__/.storybook/preview.js

@@ -0,0 +1,35 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+// eslint-disable-next-line import/no-unresolved
+import '@instructure/ui-polyfill-loader!'
+
+import { addParameters } from '@storybook/react'
+
+addParameters({
+  options: {
+    showPanel: false,
+    isFullscreen: false
+  }
+})

packages/__examples__/.storybook/webpack.config.js

@@ -3,6 +3,20 @@ const merge = require('webpack-merge')
 
 module.exports = ({ config, mode }) => {
   const baseConfig = require('@instructure/ui-webpack-config')
+
+  // Storybook does not like thread-loader, see
+  // https://github.com/storybookjs/storybook/issues/12864
+  const rules = baseConfig.module.rules
+  for (const rule of rules) {
+    if (rule.use) {
+      for (let i = 0; i < rule.use.length; i++) {
+        if (rule.use[i].loader === 'thread-loader') {
+          rule.use.splice(i, 1)
+        }
+      }
+    }
+  }
+
   config = merge(config, baseConfig)
 
   // need to override this instead of merge for these...

packages/__examples__/package.json

@@ -33,11 +33,12 @@
     "@instructure/ui-tooltip": "^7.4.0",
     "@instructure/ui-view": "^7.4.0",
     "@instructure/ui-webpack-config": "^7.4.0",
-    "@storybook/react": "^5.2.1",
-    "@storybook/theming": "^5.2.1",
+    "@storybook/react": "^6.1.18",
+    "@storybook/theming": "^6.1.18",
+    "@storybook/addons": "^6.1.18",
     "react": "^16.8",
     "react-dom": "^16.8",
-    "story2sketch": "^1.7.0",
+    "story2sketch": "^1.7.1",
     "chromatic": "^5",
     "webpack-merge": "^4.2.1"
   }

packages/__examples__/stories.js

@@ -0,0 +1,72 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { storiesOf } from '@storybook/react'
+
+import { renderExample } from './renderExample.js'
+import { renderPage } from './renderPage.js'
+import React from 'react'
+
+const examplesContext = require.context(
+  '../',
+  true,
+  /^.*\/src\/.*\.examples\.js$/,
+  'sync'
+)
+
+let numStories = 0
+// eslint-disable-next-line no-console
+console.log(
+  `Creating stories for ${examplesContext.keys().length} components...`
+)
+
+examplesContext.keys().map((requirePath) => {
+  const ctx = examplesContext(requirePath)
+
+  if (ctx.sections && ctx.sections.length > 0) {
+    const stories = storiesOf(ctx.componentName, module)
+    ctx.sections.forEach(({ pages, sectionName }) => {
+      pages.forEach((page, i) => {
+        // eslint-disable-next-line no-param-reassign
+        page.renderExample = renderExample
+        numStories++
+        stories.add(
+          `${sectionName}${pages.length > 1 ? ` (page ${i + 1})` : ''}`,
+          renderPage.bind(null, page),
+          {
+            chromatic: {
+              ...page.parameters,
+              viewports: [1200],
+              pauseAnimationAtEnd: true,
+              delay: 500
+            }
+          }
+        )
+      })
+    })
+  }
+})
+
+// eslint-disable-next-line no-console
+console.log(`Created ${numStories} stories!`)