Storybook version bump and clean up (#6792)

Co-authored-by: Chloe Rice <chloerice@users.noreply.github.com>
Shopify · Jul 28, 2022 · 51be08e · 51be08e
1 parent 1e4998d
commit 51be08e
Show file tree

Hide file tree

Showing 8 changed files with 741 additions and 1,280 deletions.
diff --git a/.changeset/green-trees-beam.md b/.changeset/green-trees-beam.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Bumped storybook versions and cleaned up main.js
diff --git a/polaris-for-figma/package.json b/polaris-for-figma/package.json
@@ -15,14 +15,14 @@
     "@shopify/polaris": "^9.21.1",
     "antd": "^4.20.4",
     "lodash": "^4.17.15",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "sass": "^1.32.8"
   },
   "devDependencies": {
     "@figma/plugin-typings": "^1.19.1",
-    "@types/react": "^16.0.0",
-    "@types/react-dom": "^16.0.0",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.2",
     "@types/node": "^17.0.23",
     "babel-loader": "^8.2.3",
     "css-loader": "^3.4.2",

diff --git a/polaris-react/.storybook/main.js b/polaris-react/.storybook/main.js
@@ -2,24 +2,13 @@ const path = require('path');
 const spawn = require('child_process').spawn;
 const CreateFileWebpack = require('create-file-webpack');
 const postcssPlugins = require('../config/postcss-plugins');
-// Enabling docs means the preview panel takes an extra 2ish seconds to load
-// This usually isn't a big deal, except when we're running all of our stories
-// through our a11y tests, and a 2s delay over several hundred stories adds up.
-// This is an escape hatch to disable docs only wheile we're running a11y tests
-const enableDocs = !parseInt(process.env.STORYBOOK_DISABLE_DOCS || '0', 10);
 
 module.exports = {
   core: {
     builder: 'webpack5',
   },
-  // Added to work around https://github.com/storybookjs/storybook/issues/15336
-  // The line below can be removed in @storybook/react v6.5.0
-  typescript: {reactDocgen: false},
   stories: ['../playground/stories.tsx', '../src/components/**/*/README.md'],
-  addons: [
-    {name: '@storybook/addon-essentials', options: {docs: enableDocs}},
-    '@storybook/addon-a11y',
-  ],
+  addons: ['@storybook/addon-a11y', '@storybook/addon-toolbars'],
   webpackFinal: (config) => {
     const isProduction = config.mode === 'production';
 
@@ -74,15 +63,6 @@ module.exports = {
       },
     ];
 
-    config.plugins.push(
-      new CreateFileWebpack({
-        path: './build-internal/storybook/static/services/',
-        fileName: 'ping.html',
-        content:
-          '<!DOCTYPE html><html lang="en"><head></head><body>OK</body></html>',
-      }),
-    );
-
     config.module.rules = [
       // Strip out existing rules that apply to md files
       ...config.module.rules.filter(

diff --git a/polaris-react/package.json b/polaris-react/package.json
@@ -83,15 +83,14 @@
     "@shopify/postcss-plugin": "^5.0.1",
     "@shopify/react-testing": "^3.2.4",
     "@shopify/storybook-a11y-test": "0.4.3",
-    "@storybook/addon-a11y": "^6.4.19",
-    "@storybook/addon-console": "^1.2.3",
-    "@storybook/addon-essentials": "^6.4.19",
-    "@storybook/builder-webpack5": "^6.4.19",
-    "@storybook/manager-webpack5": "^6.4.19",
-    "@storybook/react": "^6.4.19",
+    "@storybook/addon-a11y": "^6.5.9",
+    "@storybook/addon-toolbars": "^6.5.9",
+    "@storybook/builder-webpack5": "^6.5.9",
+    "@storybook/manager-webpack5": "^6.5.9",
+    "@storybook/react": "^6.5.9",
     "@types/node": "^16.11.11",
-    "@types/react": "^17.0.19",
-    "@types/react-dom": "^17.0.9",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.2",
     "ajv-cli": "^5.0.0",
     "babel-core": "7.0.0-bridge.0",
     "babel-loader": "^8.1.0",

diff --git a/polaris-react/src/components/Navigation/components/Item/tests/Item.test.tsx b/polaris-react/src/components/Navigation/components/Item/tests/Item.test.tsx
@@ -708,7 +708,7 @@ describe('<Nav.Item />', () => {
         <Item label="some label" disabled={false} />,
       );
 
-      const event: KeyboardEventInit & {keyCode: Key} = {
+      const event = {
         keyCode: Key.Tab,
       };
 
@@ -728,7 +728,7 @@ describe('<Nav.Item />', () => {
         <Item label="some label" disabled={false} url="https://shopify.com" />,
       );
 
-      const event: KeyboardEventInit & {keyCode: Key} = {
+      const event = {
         keyCode: Key.Tab,
       };
 

diff --git a/polaris-react/src/components/OptionList/components/Checkbox/tests/Checkbox.test.tsx b/polaris-react/src/components/OptionList/components/Checkbox/tests/Checkbox.test.tsx
@@ -36,7 +36,7 @@ describe('<Checkbox />', () => {
     it('on keyUp adds a keyFocused class to the input', () => {
       const checkbox = mountWithApp(<Checkbox onChange={noop} />);
 
-      const event: KeyboardEventInit & {keyCode: Key} = {
+      const event = {
         keyCode: Key.Space,
       };
       checkbox.find('input')!.trigger('onKeyUp', event);
@@ -48,7 +48,7 @@ describe('<Checkbox />', () => {
     it('removes the keyFocused class on blur', () => {
       const checkbox = mountWithApp(<Checkbox onChange={noop} />);
 
-      const event: KeyboardEventInit & {keyCode: Key} = {
+      const event = {
         keyCode: Key.Space,
       };
 

diff --git a/polaris.shopify.com/package.json b/polaris.shopify.com/package.json
@@ -29,8 +29,8 @@
     "glob": "^7.1.6",
     "next": "12.1.0",
     "prismjs": "^1.27.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-markdown": "^8.0.2",
     "sass": "^1.49.9",
     "use-dark-mode": "^2.3.1",
@@ -41,7 +41,7 @@
     "@types/marked": "^4.0.3",
     "@types/node": "17.0.21",
     "@types/prismjs": "^1.26.0",
-    "@types/react": "17.0.39",
+    "@types/react": "*",
     "eslint": "8.10.0",
     "eslint-config-next": "12.1.0",
     "frontmatter": "^0.0.3",