storybookjs · IanVS · Sep 30, 2022 · Oct 7, 2022 · Oct 7, 2022 · Nov 17, 2022
diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json
@@ -72,7 +72,6 @@
     "@storybook/theming": "7.0.0-alpha.54",
     "@storybook/types": "7.0.0-alpha.54",
     "axe-core": "^4.2.0",
-    "global": "^4.4.0",
     "lodash": "^4.17.21",
     "react-sizeme": "^3.0.1"
   },

diff --git a/code/addons/a11y/src/a11yRunner.ts b/code/addons/a11y/src/a11yRunner.ts
@@ -1,9 +1,8 @@
-import global from 'global';
 import { addons } from '@storybook/preview-api';
 import { EVENTS } from './constants';
 import type { A11yParameters } from './params';
 
-const { document, window: globalWindow } = global;
+const { document } = globalThis;
 
 if (module && module.hot && module.hot.decline) {
   module.hot.decline();
@@ -37,12 +36,13 @@ const run = async (storyId: string) => {
       const axe = (await import('axe-core')).default;
 
       const { element = '#storybook-root', config, options = {} } = input;
-      const htmlElement = document.querySelector(element);
+      const htmlElement = document.querySelector(element as string);
       axe.reset();
       if (config) {
         axe.configure(config);
       }
 
+      // @ts-expect-error Should we check if htmlElement is truthy?
       const result = await axe.run(htmlElement, options);
       // It's possible that we requested a new run on a different story.
       // Unfortunately, axe doesn't support a cancel method to abort current run.
@@ -64,10 +64,9 @@ const run = async (storyId: string) => {
 
 /** Returns story parameters or default ones. */
 const getParams = async (storyId: string): Promise<A11yParameters> => {
-  const { parameters } =
-    (await globalWindow.__STORYBOOK_STORY_STORE__.loadStory({ storyId })) || {};
+  const { parameters } = (await globalThis.__STORYBOOK_STORY_STORE__?.loadStory({ storyId })) || {};
   return (
-    parameters.a11y || {
+    parameters?.a11y || {
       config: {},
       options: {},
     }

diff --git a/code/addons/a11y/src/typings.d.ts b/code/addons/a11y/src/typings.d.ts
diff --git a/code/addons/a11y/template/stories/parameters.stories.ts b/code/addons/a11y/template/stories/parameters.stories.ts
@@ -1,5 +1,3 @@
-import globalThis from 'global';
-
 export default {
   component: globalThis.Components.Html,
   args: {

diff --git a/code/addons/a11y/template/stories/tests.stories.ts b/code/addons/a11y/template/stories/tests.stories.ts
@@ -1,5 +1,3 @@
-import globalThis from 'global';
-
 export default {
   component: globalThis.Components.Html,
   args: {

diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json
@@ -84,7 +84,6 @@
     "@storybook/theming": "7.0.0-alpha.54",
     "@storybook/types": "7.0.0-alpha.54",
     "dequal": "^2.0.2",
-    "global": "^4.4.0",
     "lodash": "^4.17.21",
     "polished": "^4.2.2",
     "prop-types": "^15.7.2",

diff --git a/code/addons/actions/src/decorator.ts b/code/addons/actions/src/decorator.ts
@@ -1,10 +1,9 @@
-import global from 'global';
 import { useEffect, makeDecorator } from '@storybook/preview-api';
 import { actions } from './runtime/actions';
 
 import { PARAM_KEY } from './constants';
 
-const { document, Element } = global;
+const { document, Element } = globalThis;
 
 const delegateEventSplitter = /^(\S+)\s*(.*)$/;
 

diff --git a/code/addons/actions/src/typings.d.ts b/code/addons/actions/src/typings.d.ts
@@ -1,3 +1,2 @@
 // TODO: following packages need definition files or a TS migration
-declare module 'global';
 declare module 'uuid-browser/v4';
diff --git a/code/addons/actions/template/stories/argtype.stories.ts b/code/addons/actions/template/stories/argtype.stories.ts
@@ -1,5 +1,3 @@
-import globalThis from 'global';
-
 export default {
   component: globalThis.Components.Button,
   args: {

diff --git a/code/addons/actions/template/stories/basics.stories.ts b/code/addons/actions/template/stories/basics.stories.ts
@@ -1,5 +1,3 @@
-import globalThis from 'global';
-
 import { action } from '@storybook/addon-actions';
 
 export default {

diff --git a/code/addons/actions/template/stories/configs.stories.ts b/code/addons/actions/template/stories/configs.stories.ts
@@ -1,5 +1,3 @@
-import globalThis from 'global';
-
 import { actions, configureActions } from '@storybook/addon-actions';
 
 const configs = actions('actionA', 'actionB', 'actionC');

diff --git a/code/addons/actions/template/stories/parameters.stories.ts b/code/addons/actions/template/stories/parameters.stories.ts
@@ -1,4 +1,3 @@
-import globalThis from 'global';
 import { withActions } from '@storybook/addon-actions/decorator';
 
 export default {

diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json
@@ -82,7 +82,6 @@
     "@storybook/preview-api": "7.0.0-alpha.54",
     "@storybook/theming": "7.0.0-alpha.54",
     "@storybook/types": "7.0.0-alpha.54",
-    "global": "^4.4.0",
     "memoizerific": "^1.11.3",
     "ts-dedent": "^2.0.0"
   },

diff --git a/code/addons/backgrounds/src/helpers/index.ts b/code/addons/backgrounds/src/helpers/index.ts
@@ -1,14 +1,13 @@
-import global from 'global';
 import { dedent } from 'ts-dedent';
 
 import { logger } from '@storybook/client-logger';
 
 import type { Background } from '../types';
 
-const { document, window } = global;
+const { document } = globalThis;
 
 export const isReduceMotionEnabled = () => {
-  const prefersReduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
+  const prefersReduceMotion = globalThis.matchMedia('(prefers-reduced-motion: reduce)');
   return prefersReduceMotion.matches;
 };
 

diff --git a/code/addons/backgrounds/src/typings.d.ts b/code/addons/backgrounds/src/typings.d.ts
diff --git a/code/addons/backgrounds/template/stories/grid.stories.ts b/code/addons/backgrounds/template/stories/grid.stories.ts
@@ -1,5 +1,3 @@
-import globalThis from 'global';
-
 export default {
   component: globalThis.Components.Button,
   args: {

diff --git a/code/addons/backgrounds/template/stories/parameters.stories.ts b/code/addons/backgrounds/template/stories/parameters.stories.ts
@@ -1,5 +1,3 @@
-import globalThis from 'global';
-
 const COLORS = [
   { name: 'red', value: '#FB001D' },
   { name: 'orange', value: '#FB8118' },

diff --git a/code/addons/controls/template/stories/basics.stories.ts b/code/addons/controls/template/stories/basics.stories.ts
@@ -1,4 +1,3 @@
-import globalThis from 'global';
 import type { PartialStoryFn, StoryContext } from '@storybook/types';
 
 export default {

diff --git a/code/addons/controls/template/stories/conditional.stories.ts b/code/addons/controls/template/stories/conditional.stories.ts
@@ -1,4 +1,3 @@
-import globalThis from 'global';
 import type { PartialStoryFn, StoryContext } from '@storybook/types';
 
 export default {

diff --git a/code/addons/controls/template/stories/disable.stories.ts b/code/addons/controls/template/stories/disable.stories.ts
@@ -1,4 +1,3 @@
-import globalThis from 'global';
 import type { PartialStoryFn, StoryContext } from '@storybook/types';
 
 export default {

diff --git a/code/addons/controls/template/stories/filters.stories.ts b/code/addons/controls/template/stories/filters.stories.ts
@@ -1,4 +1,3 @@
-import globalThis from 'global';
 import type { PartialStoryFn, StoryContext } from '@storybook/types';
 
 export default {

diff --git a/code/addons/controls/template/stories/issues.stories.ts b/code/addons/controls/template/stories/issues.stories.ts
@@ -1,4 +1,3 @@
-import globalThis from 'global';
 import type { PartialStoryFn, StoryContext } from '@storybook/types';
 
 export default {

diff --git a/code/addons/controls/template/stories/matchers.stories.ts b/code/addons/controls/template/stories/matchers.stories.ts
@@ -1,4 +1,3 @@
-import globalThis from 'global';
 import type { PartialStoryFn, StoryContext } from '@storybook/types';
 
 export default {

diff --git a/code/addons/controls/template/stories/sorting.stories.ts b/code/addons/controls/template/stories/sorting.stories.ts
@@ -1,4 +1,3 @@
-import globalThis from 'global';
 import type { PartialStoryFn, StoryContext } from '@storybook/types';
 
 export default {

diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json
@@ -98,7 +98,6 @@
     "@storybook/theming": "7.0.0-alpha.54",
     "@storybook/types": "7.0.0-alpha.54",
     "fs-extra": "^9.0.1",
-    "global": "^4.4.0",
     "remark-external-links": "^8.0.0",
     "remark-slug": "^6.0.0",
     "ts-dedent": "^2.0.0"

diff --git a/code/addons/docs/src/typings.d.ts b/code/addons/docs/src/typings.d.ts
@@ -1,4 +1,3 @@
-declare module 'global';
 declare module '@egoist/vue-to-react';
 declare module 'remark-slug';
 declare module 'remark-external-links';

diff --git a/code/addons/docs/template/stories/docs2/button.stories.ts b/code/addons/docs/template/stories/docs2/button.stories.ts
@@ -1,5 +1,3 @@
-import globalThis from 'global';
-
 export default {
   component: globalThis.Components.Button,
   args: { onClick: () => console.log('clicked!') },

diff --git a/code/addons/docs/template/stories/docspage/autoplay.stories.ts b/code/addons/docs/template/stories/docspage/autoplay.stories.ts
@@ -1,4 +1,3 @@
-import globalThis from 'global';
 import { expect } from '@storybook/jest';
 import { within } from '@storybook/testing-library';
 

diff --git a/code/addons/docs/template/stories/docspage/basic.stories.ts b/code/addons/docs/template/stories/docspage/basic.stories.ts
@@ -1,5 +1,3 @@
-import globalThis from 'global';
-
 export default {
   component: globalThis.Components.Button,
   tags: ['docsPage'],

diff --git a/code/addons/docs/template/stories/docspage/description.stories.ts b/code/addons/docs/template/stories/docspage/description.stories.ts
@@ -1,5 +1,3 @@
-import globalThis from 'global';
-
 export default {
   component: globalThis.Components.Button,
   // FIXME: remove array subcomponents in 7.0?

diff --git a/code/addons/docs/template/stories/docspage/extract-description.stories.ts b/code/addons/docs/template/stories/docspage/extract-description.stories.ts
@@ -1,5 +1,3 @@
-import globalThis from 'global';
-
 export default {
   component: globalThis.Components.Button,
   tags: ['docsPage'],

diff --git a/code/addons/docs/template/stories/docspage/iframe.stories.ts b/code/addons/docs/template/stories/docspage/iframe.stories.ts
@@ -1,5 +1,3 @@
-import globalThis from 'global';
-
 export default {
   component: globalThis.Components.Button,
   tags: ['docsPage'],

diff --git a/code/addons/docs/template/stories/docspage/overflow.stories.ts b/code/addons/docs/template/stories/docspage/overflow.stories.ts
@@ -1,5 +1,3 @@
-import globalThis from 'global';
-
 export default {
   component: globalThis.Components.Pre,
   tags: ['docsPage'],

diff --git a/code/addons/docs/template/stories/docspage/override.stories.ts b/code/addons/docs/template/stories/docspage/override.stories.ts
@@ -1,5 +1,3 @@
-import globalThis from 'global';
-
 // FIXME: do this using basic React functions for multi-framework
 //        once sandbox linking is working
 //

diff --git a/code/addons/docs/template/stories/docspage/source.stories.ts b/code/addons/docs/template/stories/docspage/source.stories.ts
@@ -1,5 +1,3 @@
-import globalThis from 'global';
-
 export default {
   component: globalThis.Components.Button,
   tags: ['docsPage'],

diff --git a/code/addons/docs/template/stories/stories-mdx/basic.stories.mdx b/code/addons/docs/template/stories/stories-mdx/basic.stories.mdx
@@ -1,5 +1,4 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-import globalThis from 'global';
 
 <Meta component={globalThis.Components.Button} />
 

diff --git a/code/addons/docs/template/stories/stories-mdx/csf-in-mdx.stories.mdx b/code/addons/docs/template/stories/stories-mdx/csf-in-mdx.stories.mdx
@@ -1,5 +1,4 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-import globalThis from 'global';
 import * as Csf from './csf-in-mdx.stories.js';
 
 <Meta component={globalThis.Components.Button} />

diff --git a/code/addons/docs/template/stories/stories-mdx/iframe.stories.mdx b/code/addons/docs/template/stories/stories-mdx/iframe.stories.mdx
@@ -1,5 +1,4 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-import globalThis from 'global';
 
 <Meta component={globalThis.Components.Button} />
 

diff --git a/code/addons/docs/template/stories/stories-mdx/play-functions.stories.mdx b/code/addons/docs/template/stories/stories-mdx/play-functions.stories.mdx
@@ -1,5 +1,4 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-import globalThis from 'global';
 
 <Meta component={globalThis.Components.Button} play={() => console.log('component play')} />
 

diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json
@@ -61,8 +61,7 @@
   },
   "dependencies": {
     "@storybook/core-events": "7.0.0-alpha.54",
-    "@storybook/preview-api": "7.0.0-alpha.54",
-    "global": "^4.4.0"
+    "@storybook/preview-api": "7.0.0-alpha.54"
   },
   "devDependencies": {
     "@types/webpack-env": "^1.16.0",

diff --git a/code/addons/highlight/src/preview.ts b/code/addons/highlight/src/preview.ts
@@ -1,10 +1,9 @@
 /* eslint-env browser */
-import global from 'global';
 import { addons } from '@storybook/preview-api';
 import { STORY_CHANGED } from '@storybook/core-events';
 import { HIGHLIGHT, RESET_HIGHLIGHT, HIGHLIGHT_STYLE_ID } from './constants';
 
-const { document } = global;
+const { document } = globalThis;
 
 type OutlineStyle = 'dotted' | 'dashed' | 'solid' | 'double';
 

diff --git a/code/addons/highlight/src/typings.d.ts b/code/addons/highlight/src/typings.d.ts
diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json
@@ -81,7 +81,6 @@
     "@storybook/preview-api": "7.0.0-alpha.54",
     "@storybook/theming": "7.0.0-alpha.54",
     "@storybook/types": "7.0.0-alpha.54",
-    "global": "^4.4.0",
     "jest-mock": "^27.0.6",
     "polished": "^4.2.2",
     "ts-dedent": "^2.2.0"

diff --git a/code/addons/interactions/src/Panel.tsx b/code/addons/interactions/src/Panel.tsx
@@ -1,4 +1,3 @@
-import global from 'global';
 import * as React from 'react';
 import { useChannel, useParameter } from '@storybook/manager-api';
 import {
@@ -102,10 +101,10 @@ export const Panel: React.FC<{ active: boolean }> = (props) => {
   const endRef = React.useRef();
   React.useEffect(() => {
     let observer: IntersectionObserver;
-    if (global.window.IntersectionObserver) {
-      observer = new global.window.IntersectionObserver(
+    if (globalThis.IntersectionObserver) {
+      observer = new globalThis.IntersectionObserver(
         ([end]: any) => setScrollTarget(end.isIntersecting ? undefined : end.target),
-        { root: global.window.document.querySelector('#panel-tab-content') }
+        { root: globalThis.document.querySelector('#panel-tab-content') }
       );
       if (endRef.current) observer.observe(endRef.current);
     }

diff --git a/code/addons/interactions/src/components/TabStatus.tsx b/code/addons/interactions/src/components/TabStatus.tsx
@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom';
 import { StatusIcon } from './StatusIcon';
 
 export const TabStatus = ({ children }: { children: React.ReactChild }) => {
-  const container = global.document.getElementById('tabbutton-interactions');
+  const container = globalThis.document.getElementById('tabbutton-interactions');
   return container && ReactDOM.createPortal(children, container);
 };
 

diff --git a/code/addons/interactions/src/typings.d.ts b/code/addons/interactions/src/typings.d.ts
diff --git a/code/addons/interactions/template/stories/basics.stories.ts b/code/addons/interactions/template/stories/basics.stories.ts
@@ -1,4 +1,3 @@
-import globalThis from 'global';
 import {
   within,
   waitFor,

diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json
@@ -75,7 +75,6 @@
     "@storybook/manager-api": "7.0.0-alpha.54",
     "@storybook/preview-api": "7.0.0-alpha.54",
     "@storybook/theming": "7.0.0-alpha.54",
-    "global": "^4.4.0",
     "react-sizeme": "^3.0.1",
     "upath": "^1.2.0"
   },

diff --git a/code/addons/jest/src/typings.d.ts b/code/addons/jest/src/typings.d.ts
diff --git a/code/addons/links/package.json b/code/addons/links/package.json
@@ -83,7 +83,6 @@
     "@storybook/preview-api": "7.0.0-alpha.54",
     "@storybook/router": "7.0.0-alpha.54",
     "@storybook/types": "7.0.0-alpha.54",
-    "global": "^4.4.0",
     "prop-types": "^15.7.2",
     "ts-dedent": "^2.0.0"
   },

diff --git a/code/addons/links/src/typings.d.ts b/code/addons/links/src/typings.d.ts
diff --git a/code/addons/links/src/utils.ts b/code/addons/links/src/utils.ts
@@ -1,11 +1,10 @@
-import global from 'global';
 import { addons, makeDecorator } from '@storybook/preview-api';
 import { STORY_CHANGED, SELECT_STORY } from '@storybook/core-events';
 import type { StoryId, StoryName, ComponentTitle } from '@storybook/types';
 import { toId } from '@storybook/csf';
 import { PARAM_KEY } from './constants';
 
-const { document, HTMLElement } = global;
+const { document, HTMLElement } = globalThis;
 
 interface ParamsId {
   storyId: StoryId;

diff --git a/code/addons/links/template/stories/decorator.stories.ts b/code/addons/links/template/stories/decorator.stories.ts
@@ -1,4 +1,3 @@
-import globalThis from 'global';
 import { withLinks } from '@storybook/addon-links';
 
 export default {

diff --git a/code/addons/links/template/stories/linkto.stories.ts b/code/addons/links/template/stories/linkto.stories.ts
@@ -1,4 +1,3 @@
-import globalThis from 'global';
 import { linkTo } from '@storybook/addon-links';
 
 export default {

diff --git a/code/addons/links/template/stories/scroll.stories.ts b/code/addons/links/template/stories/scroll.stories.ts
@@ -1,4 +1,3 @@
-import globalThis from 'global';
 import { withLinks } from '@storybook/addon-links';
 
 export default {

diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json
@@ -79,8 +79,7 @@
     "@storybook/core-events": "7.0.0-alpha.54",
     "@storybook/manager-api": "7.0.0-alpha.54",
     "@storybook/preview-api": "7.0.0-alpha.54",
-    "@storybook/types": "7.0.0-alpha.54",
-    "global": "^4.4.0"
+    "@storybook/types": "7.0.0-alpha.54"
   },
   "devDependencies": {
     "typescript": "^4.9.3"