Merge pull request #22146 from storybookjs/main-prerelease

Patch changes for 7.0.6
storybookjs · Apr 18, 2023 · 14cfde1 · 14cfde1
2 parents bb06cbf + 0661bf8
commit 14cfde1
Show file tree

Hide file tree

Showing 22 changed files with 66 additions and 63 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -43,7 +43,7 @@ executors:
         default: 'small'
     working_directory: /tmp/storybook
     docker:
-      - image: mcr.microsoft.com/playwright:v1.31.1-focal
+      - image: mcr.microsoft.com/playwright:v1.32.3-focal
         environment:
           NODE_OPTIONS: --max_old_space_size=6144
     resource_class: <<parameters.class>>

diff --git a/README.md b/README.md
@@ -64,7 +64,6 @@ Storybook is a frontend workshop for building UI components and pages in isolati
 - 🚀 [Getting Started](#getting-started)
 - 📒 [Projects](#projects)
   - 🛠 [Supported Frameworks & Examples](#supported-frameworks)
-  - 🚇[ Sub Projects](#sub-projects)
   - 🔗[Addons](#addons)
 - 🏅 [Badges & Presentation materials](#badges--presentation-materials)
 - 👥 [Community](#community)
@@ -86,6 +85,8 @@ Documentation can be found on [Storybook's docs site](https://storybook.js.org/d
 
 View [Component Encyclopedia](https://storybook.js.org/showcase) to see how leading teams use Storybook.
 
+Use [storybook.new](https://storybook.new) to quickly create an example project in Stackblitz.
+
 Storybook comes with a lot of [addons](https://storybook.js.org/docs/react/configure/storybook-addons) for component design, documentation, testing, interactivity, and so on. Storybook's API makes it possible to configure and extend in various ways. It has even been extended to support React Native, Android, iOS, and Flutter development for mobile.
 
 ### Community
@@ -96,26 +97,21 @@ For additional help, join us in the [Storybook Discord](https://discord.gg/story
 
 ### Supported Frameworks
 
-| Renderer                                                       | Demo                                                                                                                                                                                             |                                                                                                                                                       |
-| -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
-| ?                                                              | TODO, the link below will break                                                                                                                                                                  | [![React](https://img.shields.io/npm/dm/@storybook/react?style=flat-square&color=eee)](code/renderers/react)                                          |
-| [React](code/renderers/react)                                  | [![Storybook demo](https://img.shields.io/npm/v/@storybook/react/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/official-storybook/?path=/story/*)                  | [![React](https://img.shields.io/npm/dm/@storybook/react?style=flat-square&color=eee)](code/renderers/react)                                          |
-| [Vue](code/renderers/vue)                                      | [![Storybook demo](https://img.shields.io/npm/v/@storybook/vue/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/vue-kitchen-sink/)                                    | [![Vue](https://img.shields.io/npm/dm/@storybook/vue?style=flat-square&color=eee)](code/renderers/vue)                                                |
-| [Angular](code/frameworks/angular/)                            | [![Storybook demo](https://img.shields.io/npm/v/@storybook/angular/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/angular-cli/)                                     | [![Angular](https://img.shields.io/npm/dm/@storybook/angular?style=flat-square&color=eee)](code/frameworks/angular/)                                  |
-| [Web components](code/renderers/web-components)                | [![Storybook demo](https://img.shields.io/npm/v/@storybook/web-components/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/web-components-kitchen-sink/)              | [![Svelte](https://img.shields.io/npm/dm/@storybook/web-components?style=flat-square&color=eee)](code/renderers/web-components)                       |
-| [React Native](https://github.com/storybookjs/react-native)    | -                                                                                                                                                                                                | [![React Native](https://img.shields.io/npm/dm/@storybook/react-native?style=flat-square&color=eee)](https://github.com/storybookjs/react-native)     |
-| [HTML](code/renderers/html)                                    | [![Storybook demo](https://img.shields.io/npm/v/@storybook/html/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/html-kitchen-sink/)                                  | [![HTML](https://img.shields.io/npm/dm/@storybook/html?style=flat-square&color=eee)](code/renderers/html)                                             |
-| [Ember](code/frameworks/ember/)                                | [![Storybook demo](https://img.shields.io/npm/v/@storybook/ember/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/ember-cli/)                                         | [![Ember](https://img.shields.io/npm/dm/@storybook/ember?style=flat-square&color=eee)](code/frameworks/ember/)                                        |
-| [Svelte](code/renderers/svelte)                                | [![Storybook demo](https://img.shields.io/npm/v/@storybook/svelte/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/svelte-kitchen-sink/)                              | [![Svelte](https://img.shields.io/npm/dm/@storybook/svelte?style=flat-square&color=eee)](code/renderers/svelte)                                       |
-| [Preact](code/renderers/preact)                                | [![Storybook demo](https://img.shields.io/npm/v/@storybook/preact/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/preact-kitchen-sink/)                              | [![Preact](https://img.shields.io/npm/dm/@storybook/preact?style=flat-square&color=eee)](code/renderers/preact)                                       |
-| [Marionette.js](https://github.com/storybookjs/marionette)     | -                                                                                                                                                                                                | [![Marionette.js](https://img.shields.io/npm/dm/@storybook/marionette?style=flat-square&color=eee)](https://github.com/storybookjs/marionette)        |
-| [Qwik](https://github.com/literalpie/storybook-framework-qwik) | -                                                                                                                                                                                                | [![Qwik](https://img.shields.io/npm/dm/storybook-framework-qwik?style=flat-square&color=eee)](https://github.com/literalpie/storybook-framework-qwik) |
-| [Android, iOS, Flutter](https://github.com/storybookjs/native) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/native/latest?style=flat-square&color=blue&label)](https://storybookjs.github.io/native/@storybook/native-flutter-example/index.html) | [![Native](https://img.shields.io/npm/dm/@storybook/native?style=flat-square&color=eee)](https://github.com/storybookjs/native)                       |
-
-### Sub Projects
-
-- [CLI](code/lib/cli) - Streamlined installation for a variety of app types
-- [examples](code/examples) - Code examples to illustrate different Storybook use cases
+| Renderer                                                       | Demo                                                                                                                                                                         |                                                                                                                                                       |
+| -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [React](code/renderers/react)                                  | [![Storybook demo](https://img.shields.io/npm/v/@storybook/react/latest?style=flat-square&color=blue&label)](https://next--630511d655df72125520f051.chromatic.com/)          | [![React](https://img.shields.io/npm/dm/@storybook/react?style=flat-square&color=eee)](code/renderers/react)                                          |
+| [Angular](code/frameworks/angular/)                            | [![Storybook demo](https://img.shields.io/npm/v/@storybook/angular/latest?style=flat-square&color=blue&label)](https://next--6322ce6af69825592bbb28fc.chromatic.com/)        | [![Angular](https://img.shields.io/npm/dm/@storybook/angular?style=flat-square&color=eee)](code/frameworks/angular/)                                  |
+| [Vue](code/renderers/vue)                                      | [![Storybook demo](https://img.shields.io/npm/v/@storybook/vue/latest?style=flat-square&color=blue&label)](https://next--630513346a8e284ae244d415.chromatic.com/)            | [![Vue](https://img.shields.io/npm/dm/@storybook/vue?style=flat-square&color=eee)](code/renderers/vue)                                                |
+| [Web components](code/renderers/web-components)                | [![Storybook demo](https://img.shields.io/npm/v/@storybook/web-components/latest?style=flat-square&color=blue&label)](https://next--638db5bf49adfdfe8cf545e0.chromatic.com/) | [![Svelte](https://img.shields.io/npm/dm/@storybook/web-components?style=flat-square&color=eee)](code/renderers/web-components)                       |
+| [React Native](https://github.com/storybookjs/react-native)    | [![](https://img.shields.io/npm/v/@storybook/react-native/latest?style=flat-square&color=blue&label)](/)                                                                     | [![React Native](https://img.shields.io/npm/dm/@storybook/react-native?style=flat-square&color=eee)](https://github.com/storybookjs/react-native)     |
+| [HTML](code/renderers/html)                                    | [![Storybook demo](https://img.shields.io/npm/v/@storybook/html/latest?style=flat-square&color=blue&label)](https://next--63dd39a158cf6fc05199b4bb.chromatic.com/)           | [![HTML](https://img.shields.io/npm/dm/@storybook/html?style=flat-square&color=eee)](code/renderers/html)                                             |
+| [Ember](code/frameworks/ember/)                                | [![](https://img.shields.io/npm/v/@storybook/ember/latest?style=flat-square&color=blue&label)](/)                                                                            | [![Ember](https://img.shields.io/npm/dm/@storybook/ember?style=flat-square&color=eee)](code/frameworks/ember/)                                        |
+| [Svelte](code/renderers/svelte)                                | [![Storybook demo](https://img.shields.io/npm/v/@storybook/svelte/latest?style=flat-square&color=blue&label)](https://next--630873996e4e3557791c069c.chromatic.com/)         | [![Svelte](https://img.shields.io/npm/dm/@storybook/svelte?style=flat-square&color=eee)](code/renderers/svelte)                                       |
+| [Preact](code/renderers/preact)                                | [![Storybook demo](https://img.shields.io/npm/v/@storybook/preact/latest?style=flat-square&color=blue&label)](https://next--63b588a512565bfaace15e7c.chromatic.com/)         | [![Preact](https://img.shields.io/npm/dm/@storybook/preact?style=flat-square&color=eee)](code/renderers/preact)                                       |
+| [Marionette.js](https://github.com/storybookjs/marionette)     | [![](https://img.shields.io/npm/v/@storybook/marionette/latest?style=flat-square&color=blue&label)](/)                                                                       | [![Marionette.js](https://img.shields.io/npm/dm/@storybook/marionette?style=flat-square&color=eee)](https://github.com/storybookjs/marionette)        |
+| [Qwik](https://github.com/literalpie/storybook-framework-qwik) | [![](https://img.shields.io/npm/v/storybook-framework-qwik/latest?style=flat-square&color=blue&label)](/)                                                                    | [![Qwik](https://img.shields.io/npm/dm/storybook-framework-qwik?style=flat-square&color=eee)](https://github.com/literalpie/storybook-framework-qwik) |
+| [SolidJS](https://github.com/storybookjs/solidjs)              | [![](https://img.shields.io/npm/v/storybook-solidjs/latest?style=flat-square&color=blue&label)](/)                                                                           | [![SolidJS](https://img.shields.io/npm/dm/storybook-solidjs?style=flat-square&color=eee)](https://github.com/storybookjs/solidjs)                     |
+| [Android, iOS, Flutter](https://github.com/storybookjs/native) | [![](https://img.shields.io/npm/v/@storybook/native/latest?style=flat-square&color=blue&label)](/)                                                                           | [![Native](https://img.shields.io/npm/dm/@storybook/native?style=flat-square&color=eee)](https://github.com/storybookjs/native)                       |
 
 ### Addons
 

diff --git a/code/frameworks/angular/src/client/index.ts b/code/frameworks/angular/src/client/index.ts
@@ -12,4 +12,4 @@ export type { StoryFnAngularReturnType as IStory } from './types';
 export { moduleMetadata, componentWrapperDecorator, applicationConfig } from './decorators';
 
 // optimization: stop HMR propagation in webpack
-module?.hot?.decline();
+if (typeof module !== 'undefined') module?.hot?.decline();
diff --git a/code/frameworks/ember/src/index.ts b/code/frameworks/ember/src/index.ts
@@ -3,4 +3,4 @@
 export { storiesOf, configure, forceReRender, raw } from './client/preview';
 
 // optimization: stop HMR propagation in webpack
-module?.hot?.decline();
+if (typeof module !== 'undefined') module?.hot?.decline();
diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts
@@ -132,7 +132,9 @@ const getFrameworkDetails = (
 const stripVersions = (addons: string[]) => addons.map((addon) => getPackageDetails(addon)[0]);
 
 const hasInteractiveStories = (rendererId: SupportedRenderers) =>
-  ['react', 'angular', 'preact', 'svelte', 'vue', 'vue3', 'html', 'solid'].includes(rendererId);
+  ['react', 'angular', 'preact', 'svelte', 'vue', 'vue3', 'html', 'solid', 'qwik'].includes(
+    rendererId
+  );
 
 const hasFrameworkTemplates = (framework?: SupportedFrameworks) =>
   ['angular', 'nextjs'].includes(framework);

diff --git a/code/package.json b/code/package.json
@@ -78,13 +78,13 @@
     "defaults"
   ],
   "resolutions": {
-    "@playwright/test": "1.31.1",
+    "@playwright/test": "1.32.3",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "@typescript-eslint/experimental-utils": "^5.45.0",
     "@typescript-eslint/parser": "^5.45.0",
     "esbuild": "^0.17.0",
     "eslint": "^8.28.0",
-    "playwright": "1.31.1",
+    "playwright": "1.32.3",
     "serialize-javascript": "^3.1.0"
   },
   "dependencies": {
@@ -99,7 +99,7 @@
     "@nrwl/cli": "^15.4.5",
     "@nrwl/nx-cloud": "^15.0.2",
     "@nrwl/workspace": "^15.4.5",
-    "@playwright/test": "1.31.1",
+    "@playwright/test": "1.32.3",
     "@storybook/addon-a11y": "workspace:*",
     "@storybook/addon-actions": "workspace:*",
     "@storybook/addon-backgrounds": "workspace:*",
@@ -245,7 +245,7 @@
     "lodash": "^4.17.21",
     "node-gyp": "^8.4.0",
     "nx": "^15.4.5",
-    "playwright": "1.31.1",
+    "playwright": "1.32.3",
     "prettier": "2.8.0",
     "process": "^0.11.10",
     "raf": "^3.4.1",

diff --git a/code/renderers/html/src/index.ts b/code/renderers/html/src/index.ts
@@ -6,4 +6,4 @@ export * from './public-api';
 export * from './public-types';
 
 // optimization: stop HMR propagation in webpack
-module?.hot?.decline();
+if (typeof module !== 'undefined') module?.hot?.decline();
diff --git a/code/renderers/preact/src/index.ts b/code/renderers/preact/src/index.ts
@@ -6,4 +6,4 @@ export * from './public-api';
 export * from './public-types';
 
 // optimization: stop HMR propagation in webpack
-module?.hot?.decline();
+if (typeof module !== 'undefined') module?.hot?.decline();
diff --git a/code/renderers/react/src/index.ts b/code/renderers/react/src/index.ts
@@ -8,4 +8,4 @@ export * from './public-types';
 export * from './testing-api';
 
 // optimization: stop HMR propagation in webpack
-module?.hot?.decline();
+if (typeof module !== 'undefined') module?.hot?.decline();
diff --git a/code/renderers/server/src/index.ts b/code/renderers/server/src/index.ts
@@ -6,4 +6,4 @@ export * from './public-api';
 export * from './public-types';
 
 // optimization: stop HMR propagation in webpack
-module?.hot?.decline();
+if (typeof module !== 'undefined') module?.hot?.decline();
diff --git a/code/renderers/svelte/src/index.ts b/code/renderers/svelte/src/index.ts
@@ -6,4 +6,4 @@ export * from './public-api';
 export * from './public-types';
 
 // optimization: stop HMR propagation in webpack
-module?.hot?.decline();
+if (typeof module !== 'undefined') module?.hot?.decline();
diff --git a/code/renderers/vue/src/index.ts b/code/renderers/vue/src/index.ts
@@ -6,4 +6,4 @@ export * from './public-api';
 export * from './public-types';
 
 // optimization: stop HMR propagation in webpack
-module?.hot?.decline();
+if (typeof module !== 'undefined') module?.hot?.decline();
diff --git a/code/renderers/vue3/src/index.ts b/code/renderers/vue3/src/index.ts
@@ -6,4 +6,4 @@ export * from './public-api';
 export * from './public-types';
 
 // optimization: stop HMR propagation in webpack
-module?.hot?.decline();
+if (typeof module !== 'undefined') module?.hot?.decline();
diff --git a/code/renderers/web-components/src/index.ts b/code/renderers/web-components/src/index.ts
@@ -11,7 +11,7 @@ export * from './public-api';
 export * from './framework-api';
 
 // TODO: disable HMR and do full page loads because of customElements.define
-if (module && module.hot && module.hot.decline) {
+if (typeof module !== 'undefined' && module?.hot?.decline) {
   module.hot.decline();
 
   // forcing full reloads for customElements as elements can only be defined once per page