Merge branch 'next' into shilman/improve-a11y-install

storybookjs · Oct 9, 2024 · d071ee9 · d071ee9
2 parents dcca2f0 + be183d9
commit d071ee9
Show file tree

Hide file tree

Showing 32 changed files with 30 additions and 119 deletions.
diff --git a/code/addons/docs/angular/index.js b/code/addons/docs/angular/index.js
@@ -1,7 +1,6 @@
 /* eslint-disable no-underscore-dangle */
-import { global } from '@storybook/global';
 
 export const setCompodocJson = (compodocJson) => {
   // @ts-expect-error (Converted from ts-ignore)
-  global.__STORYBOOK_COMPODOC_JSON__ = compodocJson;
+  globalThis.__STORYBOOK_COMPODOC_JSON__ = compodocJson;
 };
diff --git a/code/addons/docs/ember/index.js b/code/addons/docs/ember/index.js
@@ -1,6 +1,5 @@
 /* eslint-disable no-underscore-dangle */
-import { global } from '@storybook/global';
 
 export const setJSONDoc = (jsondoc) => {
-  global.__EMBER_GENERATED_DOC_JSON__ = jsondoc;
+  globalThis.__EMBER_GENERATED_DOC_JSON__ = jsondoc;
 };
diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json
@@ -100,20 +100,19 @@
     "@mdx-js/react": "^3.0.0",
     "@storybook/blocks": "workspace:*",
     "@storybook/csf-plugin": "workspace:*",
-    "@storybook/global": "^5.0.0",
     "@storybook/react-dom-shim": "workspace:*",
-    "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "rehype-external-links": "^3.0.0",
-    "rehype-slug": "^6.0.0",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
     "@mdx-js/mdx": "^3.0.0",
     "@rollup/pluginutils": "^5.0.2",
+    "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "rehype-external-links": "^3.0.0",
+    "rehype-slug": "^6.0.0",
     "typescript": "^5.3.2",
     "vite": "^4.0.4"
   },

diff --git a/code/addons/docs/src/preview.ts b/code/addons/docs/src/preview.ts
@@ -1,8 +1,6 @@
 import type { PreparedStory } from 'storybook/internal/types';
 
-import { global } from '@storybook/global';
-
-const excludeTags = Object.entries(global.TAGS_OPTIONS ?? {}).reduce(
+const excludeTags = Object.entries(globalThis.TAGS_OPTIONS ?? {}).reduce(
   (acc, entry) => {
     const [tag, option] = entry;
     if ((option as any).excludeFromDocsStories) {

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 { global as globalThis } from '@storybook/global';
-
 export default {
   component: globalThis.Components.Button,
   tags: ['autodocs'],

diff --git a/code/addons/docs/template/stories/docs2/multiple-csf-files-a.stories.ts b/code/addons/docs/template/stories/docs2/multiple-csf-files-a.stories.ts
@@ -1,5 +1,3 @@
-import { global as globalThis } from '@storybook/global';
-
 export default {
   title: 'Multiple CSF Files Same Title',
   component: globalThis.Components.Html,

diff --git a/code/addons/docs/template/stories/docs2/multiple-csf-files-b.stories.ts b/code/addons/docs/template/stories/docs2/multiple-csf-files-b.stories.ts
@@ -1,5 +1,3 @@
-import { global as globalThis } from '@storybook/global';
-
 export default {
   title: 'Multiple CSF Files Same Title',
   component: globalThis.Components.Html,

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 { global as globalThis } from '@storybook/global';
 import { expect, within } from '@storybook/test';
 
 export default {

diff --git a/code/addons/docs/template/stories/docspage/basic.stories.ts b/code/addons/docs/template/stories/docspage/basic.stories.ts
@@ -1,4 +1,3 @@
-import { global as globalThis } from '@storybook/global';
 import { fn } from '@storybook/test';
 
 export default {

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 { global as globalThis } from '@storybook/global';
-
 export default {
   component: globalThis.Components.Button,
   subcomponents: {

diff --git a/code/addons/docs/template/stories/docspage/error.stories.ts b/code/addons/docs/template/stories/docspage/error.stories.ts
@@ -1,5 +1,3 @@
-import { global as globalThis } from '@storybook/global';
-
 export default {
   component: globalThis.Components.Button,
   tags: ['autodocs', '!test', '!vitest'],

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 { global as globalThis } from '@storybook/global';
-
 export default {
   component: globalThis.Components.Button,
   tags: ['autodocs'],

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 { global as globalThis } from '@storybook/global';
-
 export default {
   component: globalThis.Components.Button,
   tags: ['autodocs'],

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 { global as globalThis } from '@storybook/global';
-
 export default {
   component: globalThis.Components.Pre,
   tags: ['autodocs'],

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 { global as globalThis } from '@storybook/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,7 +1,5 @@
 import type { StoryContext } from 'storybook/internal/types';
 
-import { global as globalThis } from '@storybook/global';
-
 import { dedent } from 'ts-dedent';
 
 export default {

diff --git a/code/addons/docs/template/stories/toc/basic.stories.ts b/code/addons/docs/template/stories/toc/basic.stories.ts
@@ -1,6 +1,3 @@
-import { global as globalThis } from '@storybook/global';
-import { fn } from '@storybook/test';
-
 export default {
   component: globalThis.Components.Button,
   tags: ['autodocs'],

diff --git a/code/addons/docs/template/stories/toc/custom-selector.stories.ts b/code/addons/docs/template/stories/toc/custom-selector.stories.ts
@@ -1,5 +1,3 @@
-import { global as globalThis } from '@storybook/global';
-
 export default {
   component: globalThis.Components.Button,
   tags: ['autodocs'],

diff --git a/code/addons/docs/template/stories/toc/custom-title.stories.ts b/code/addons/docs/template/stories/toc/custom-title.stories.ts
@@ -1,5 +1,3 @@
-import { global as globalThis } from '@storybook/global';
-
 export default {
   component: globalThis.Components.Button,
   tags: ['autodocs'],

diff --git a/code/addons/docs/template/stories/toc/ignore-selector.stories.ts b/code/addons/docs/template/stories/toc/ignore-selector.stories.ts
@@ -1,5 +1,3 @@
-import { global as globalThis } from '@storybook/global';
-
 export default {
   component: globalThis.Components.Button,
   tags: ['autodocs'],

diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json
@@ -44,39 +44,24 @@
   },
   "dependencies": {
     "@storybook/csf-plugin": "workspace:*",
-    "@types/find-cache-dir": "^3.2.1",
     "browser-assert": "^1.2.1",
-    "es-module-lexer": "^1.5.0",
-    "find-cache-dir": "^3.0.0",
-    "magic-string": "^0.30.0",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
+    "@types/find-cache-dir": "^3.2.1",
     "@types/node": "^22.0.0",
+    "es-module-lexer": "^1.5.0",
+    "find-cache-dir": "^3.0.0",
     "glob": "^10.0.0",
+    "magic-string": "^0.30.0",
     "polka": "^1.0.0-next.28",
     "sirv": "^2.0.4",
     "slash": "^5.0.0",
-    "typescript": "^5.3.2",
     "vite": "^4.0.4"
   },
   "peerDependencies": {
-    "@preact/preset-vite": "*",
     "storybook": "workspace:^",
-    "typescript": ">= 4.3.x",
-    "vite": "^4.0.0 || ^5.0.0",
-    "vite-plugin-glimmerx": "*"
-  },
-  "peerDependenciesMeta": {
-    "@preact/preset-vite": {
-      "optional": true
-    },
-    "typescript": {
-      "optional": true
-    },
-    "vite-plugin-glimmerx": {
-      "optional": true
-    }
+    "vite": "^4.0.0 || ^5.0.0"
   },
   "publishConfig": {
     "access": "public"

diff --git a/code/builders/builder-vite/src/vite-config.ts b/code/builders/builder-vite/src/vite-config.ts
@@ -119,11 +119,5 @@ export async function pluginConfig(options: Options) {
     pluginWebpackStats({ workingDir: process.cwd() }),
   ] as PluginOption[];
 
-  // TODO: framework doesn't exist, should move into framework when/if built
-  if (frameworkName === '@storybook/glimmerx-vite') {
-    const plugin = require('vite-plugin-glimmerx/index.cjs');
-    plugins.push(plugin.default());
-  }
-
   return plugins;
 }
diff --git a/code/lib/blocks/package.json b/code/lib/blocks/package.json
@@ -44,24 +44,21 @@
   },
   "dependencies": {
     "@storybook/csf": "^0.1.11",
-    "@storybook/global": "^5.0.0",
     "@storybook/icons": "^1.2.10",
-    "color-convert": "^2.0.1",
-    "dequal": "^2.0.2",
-    "markdown-to-jsx": "^7.4.5",
-    "memoizerific": "^1.11.3",
-    "polished": "^4.2.2",
-    "react-colorful": "^5.1.2",
-    "telejson": "^7.2.0",
-    "ts-dedent": "^2.0.0",
-    "util-deprecate": "^1.0.2"
+    "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
     "@storybook/addon-actions": "workspace:*",
     "@storybook/react": "workspace:*",
     "@storybook/test": "workspace:*",
     "@types/color-convert": "^2.0.0",
+    "color-convert": "^2.0.1",
     "es-toolkit": "^1.21.0",
+    "markdown-to-jsx": "^7.4.5",
+    "memoizerific": "^1.11.3",
+    "polished": "^4.2.2",
+    "react-colorful": "^5.1.2",
+    "telejson": "^7.2.0",
     "tocbot": "^4.20.1"
   },
   "peerDependencies": {

diff --git a/code/lib/blocks/src/blocks/DocsContainer.tsx b/code/lib/blocks/src/blocks/DocsContainer.tsx
@@ -5,16 +5,14 @@ import type { ThemeVars } from 'storybook/internal/theming';
 import { ThemeProvider, ensure as ensureTheme } from 'storybook/internal/theming';
 import type { Renderer } from 'storybook/internal/types';
 
-import { global } from '@storybook/global';
-
 import { DocsPageWrapper } from '../components';
 import { TableOfContents } from '../components/TableOfContents';
 import type { DocsContextProps } from './DocsContext';
 import { DocsContext } from './DocsContext';
 import { SourceContainer } from './SourceContainer';
 import { scrollToElement } from './utils';
 
-const { document, window: globalWindow } = global;
+const { document, window: globalWindow } = globalThis;
 
 export interface DocsContainerProps<TFramework extends Renderer = Renderer> {
   context: DocsContextProps<TFramework>;

diff --git a/code/lib/blocks/src/blocks/DocsContext.ts b/code/lib/blocks/src/blocks/DocsContext.ts
@@ -4,20 +4,18 @@ import { createContext } from 'react';
 
 import type { DocsContextProps, Renderer } from 'storybook/internal/types';
 
-import { global } from '@storybook/global';
-
 export type { DocsContextProps };
 
 // We add DocsContext to window. The reason is that in case DocsContext.ts is
 // imported multiple times (maybe once directly, and another time from a minified bundle)
 // we will have multiple DocsContext definitions - leading to lost context in
 // the React component tree.
 // This was specifically a problem with the Vite builder.
-if (global && global.__DOCS_CONTEXT__ === undefined) {
-  global.__DOCS_CONTEXT__ = createContext(null);
-  global.__DOCS_CONTEXT__.displayName = 'DocsContext';
+if (globalThis && globalThis.__DOCS_CONTEXT__ === undefined) {
+  globalThis.__DOCS_CONTEXT__ = createContext(null);
+  globalThis.__DOCS_CONTEXT__.displayName = 'DocsContext';
 }
 
-export const DocsContext: Context<DocsContextProps<Renderer>> = global
-  ? global.__DOCS_CONTEXT__
+export const DocsContext: Context<DocsContextProps<Renderer>> = globalThis
+  ? globalThis.__DOCS_CONTEXT__
   : createContext(null);
diff --git a/code/lib/blocks/src/blocks/mdx.tsx b/code/lib/blocks/src/blocks/mdx.tsx
@@ -6,14 +6,13 @@ import { Code, components, nameSpaceClassNames } from 'storybook/internal/compon
 import { NAVIGATE_URL } from 'storybook/internal/core-events';
 import { styled } from 'storybook/internal/theming';
 
-import { global } from '@storybook/global';
 import { LinkIcon } from '@storybook/icons';
 
 import { Source } from '../components';
 import type { DocsContextProps } from './DocsContext';
 import { DocsContext } from './DocsContext';
 
-const { document } = global;
+const { document } = globalThis;
 
 // Hacky utility for asserting identifiers in MDX Story elements
 export const assertIsFn = (val: any) => {

diff --git a/code/lib/blocks/src/components/IFrame.tsx b/code/lib/blocks/src/components/IFrame.tsx
@@ -1,8 +1,6 @@
 import React, { Component } from 'react';
 
-import { global } from '@storybook/global';
-
-const { window: globalWindow } = global;
+const { window: globalWindow } = globalThis;
 
 interface IFrameProps {
   id: string;

diff --git a/code/lib/blocks/src/components/Preview.stories.tsx b/code/lib/blocks/src/components/Preview.stories.tsx
@@ -5,8 +5,6 @@ import { Button, Spaced } from 'storybook/internal/components';
 import { styled } from 'storybook/internal/theming';
 import type { DocsContextProps, ModuleExport } from 'storybook/internal/types';
 
-import { global } from '@storybook/global';
-
 import * as ButtonStories from '../examples/Button.stories';
 import { Preview, PreviewSkeleton } from './Preview';
 import * as sourceStories from './Source.stories';
@@ -251,7 +249,7 @@ export const WithAdditionalActions = (
       {
         title: 'Open on GitHub',
         onClick: () => {
-          global.location.href =
+          globalThis.location.href =
             'https://github.com/storybookjs/storybook/blob/next/code/lib/blocks/src/components/Preview.stories.tsx#L165-L186';
         },
       },

diff --git a/code/lib/blocks/src/components/Preview.tsx b/code/lib/blocks/src/components/Preview.tsx
@@ -5,8 +5,6 @@ import { ActionBar, Zoom } from 'storybook/internal/components';
 import type { ActionItem } from 'storybook/internal/components';
 import { styled } from 'storybook/internal/theming';
 
-import { global } from '@storybook/global';
-
 import { darken } from 'polished';
 
 import type { SourceProps } from '.';
@@ -204,7 +202,7 @@ export const Preview: FC<PreviewProps> = ({
   );
   const actionItems = [...defaultActionItems, ...additionalActionItems];
 
-  const { window: globalWindow } = global;
+  const { window: globalWindow } = globalThis;
 
   const copyToClipboard = useCallback(async (text: string) => {
     const { createCopyToClipboardFunction } = await import('storybook/internal/components');

diff --git a/code/lib/blocks/src/components/Story.tsx b/code/lib/blocks/src/components/Story.tsx
@@ -6,12 +6,10 @@ import { ErrorFormatter, Loader, getStoryHref } from 'storybook/internal/compone
 import { styled } from 'storybook/internal/theming';
 import type { DocsContextProps, PreparedStory } from 'storybook/internal/types';
 
-import { global } from '@storybook/global';
-
 import { IFrame } from './IFrame';
 import { ZoomContext } from './ZoomContext';
 
-const { PREVIEW_URL } = global;
+const { PREVIEW_URL } = globalThis;
 const BASE_URL = PREVIEW_URL || 'iframe.html';
 
 interface CommonProps {

diff --git a/code/lib/blocks/src/controls/Object.tsx b/code/lib/blocks/src/controls/Object.tsx
@@ -4,7 +4,6 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Button, Form, IconButton } from 'storybook/internal/components';
 import { type Theme, styled, useTheme } from 'storybook/internal/theming';
 
-import { global } from '@storybook/global';
 import { AddIcon, EyeCloseIcon, EyeIcon, SubtractIcon } from '@storybook/icons';
 
 import { cloneDeep } from 'es-toolkit/compat';
@@ -13,7 +12,7 @@ import { getControlId, getControlSetterButtonId } from './helpers';
 import { JsonTree } from './react-editable-json-tree';
 import type { ControlProps, ObjectConfig, ObjectValue } from './types';
 
-const { window: globalWindow } = global;
+const { window: globalWindow } = globalThis;
 
 type JsonTreeProps = ComponentProps<typeof JsonTree>;