Remove SUPPORTED_RENDERER + SUPPORTED_RENDERERS

storybookjs · Jun 14, 2024 · 54f9db2 · 54f9db2
1 parent d1c2a50
commit 54f9db2
Show file tree

Hide file tree

Showing 15 changed files with 30 additions and 60 deletions.
diff --git a/docs/api/portable-stories/portable-stories-jest.mdx b/docs/api/portable-stories/portable-stories-jest.mdx
@@ -5,17 +5,15 @@ draft: true
 
 {/* This page is unpublished for now */}
 
-export const SUPPORTED_RENDERERS = ['react', 'vue'];
-
-<If notRenderer={SUPPORTED_RENDERERS}>
+<If notRenderer={['react', 'vue']}>
   <Callout variant="info">
     Portable stories in Jest are currently only supported in [React](?renderer=react) and [Vue](?renderer=vue) projects.
   </Callout>
 
   {/* End non-supported renderers */}
 </If>
 
-<If renderer={SUPPORTED_RENDERERS}>
+<If renderer={['react', 'vue']}>
   Portable stories are Storybook [stories](../writing-stories/index.md) which can be used in external environments, such as [Jest](https://jestjs.io).
 
   Normally, Storybook composes a story and its [annotations](#annotations) automatically, as part of the [story pipeline](#story-pipeline). When using stories in Jest tests, you must handle the story pipeline yourself, which is what the [`composeStories`](#composestories) and [`composeStory`](#composestory) functions enable.

diff --git a/docs/api/portable-stories/portable-stories-playwright.mdx b/docs/api/portable-stories/portable-stories-playwright.mdx
@@ -5,19 +5,17 @@ sidebar:
   title: Playwright
 ---
 
-export const SUPPORTED_RENDERERS = ['react', 'vue'];
-
 (⚠️ **Experimental**)
 
-<If notRenderer={SUPPORTED_RENDERERS}>
+<If notRenderer={['react', 'vue']}>
   <Callout variant="info">
     Portable stories are currently only supported in [React](?renderer=react) and [Vue](?renderer=vue) projects.
   </Callout>
 
   {/* End non-supported renderers */}
 </If>
 
-<If renderer={SUPPORTED_RENDERERS}>
+<If renderer={['react', 'vue']}>
   <Callout variant="info">
     The portable stories API for Playwright CT is experimental. Playwright CT itself is also experimental. Breaking changes might occur in either library in upcoming releases.
   </Callout>

diff --git a/docs/api/portable-stories/portable-stories-vitest.mdx b/docs/api/portable-stories/portable-stories-vitest.mdx
@@ -5,17 +5,15 @@ draft: true
 
 {/* This page is unpublished for now */}
 
-export const SUPPORTED_RENDERERS = ['react', 'vue', 'svelte'];
-
-<If notRenderer={SUPPORTED_RENDERERS}>
+<If notRenderer={['react', 'vue', 'svelte']}>
   <Callout variant="info">
     Portable stories in Vitest are currently only supported in [React](?renderer=react), [Vue](?renderer=vue) and [Svelte](?renderer=svelte) projects.
   </Callout>
 
   {/* End non-supported renderers */}
 </If>
 
-<If renderer={SUPPORTED_RENDERERS}>
+<If renderer={['react', 'vue', 'svelte']}>
   Portable stories are Storybook [stories](../writing-stories/index.md) which can be used in external environments, such as [Vitest](https://vitest.dev).
 
   Normally, Storybook composes a story and its [annotations](#annotations) automatically, as part of the [story pipeline](#story-pipeline). When using stories in Vitest tests, you must handle the story pipeline yourself, which is what the [`composeStories`](#composestories) and [`composeStory`](#composestory) functions enable.

diff --git a/docs/get-started/frameworks/angular.mdx b/docs/get-started/frameworks/angular.mdx
@@ -2,23 +2,21 @@
 title: Storybook for Angular
 ---
 
-export const SUPPORTED_RENDERER = 'angular';
-
 Storybook for Angular is a [framework](../contribute/framework.md) that makes it easy to develop and test UI components in isolation for [Angular](https://angular.io/) applications. It includes:
 
 * 🧱 Uses Angular builders
 * 🎛️ Compodoc integration
 * 💫 and more!
 
-<If notRenderer={SUPPORTED_RENDERER}>
+<If notRenderer={'angular'}>
   <Callout variant="info">
     Storybook for Angular is only supported in [Angular](?renderer=angular) projects.
   </Callout>
 
   {/* End non-supported renderers */}
 </If>
 
-<If renderer={SUPPORTED_RENDERER}>
+<If renderer={'angular'}>
   ## Requirements
 
   * Angular ≥ 15.0 \< 19.0

diff --git a/docs/get-started/frameworks/nextjs.mdx b/docs/get-started/frameworks/nextjs.mdx
@@ -2,8 +2,6 @@
 title: Storybook for Next.js
 ---
 
-export const SUPPORTED_RENDERER = 'react';
-
 Storybook for Next.js is a [framework](../contribute/framework.md) that makes it easy to develop and test UI components in isolation for [Next.js](https://nextjs.org/) applications. It includes:
 
 * 🔀 Routing
@@ -13,15 +11,15 @@ Storybook for Next.js is a [framework](../contribute/framework.md) that makes it
 * 🎛 Webpack & Babel config
 * 💫 and more!
 
-<If notRenderer={SUPPORTED_RENDERER}>
+<If notRenderer={'react'}>
   <Callout variant="info">
     Storybook for Next.js is only supported in [React](?renderer=react) projects.
   </Callout>
 
   {/* End non-supported renderers */}
 </If>
 
-<If renderer={SUPPORTED_RENDERER}>
+<If renderer={'react'}>
   ## Requirements
 
   * Next.js ≥ 13.5

diff --git a/docs/get-started/frameworks/react-vite.mdx b/docs/get-started/frameworks/react-vite.mdx
@@ -2,23 +2,21 @@
 title: Storybook for React & Vite
 ---
 
-export const SUPPORTED_RENDERER = 'react';
-
 Storybook for React & Vite is a [framework](../contribute/framework.md) that makes it easy to develop and test UI components in isolation for [React](https://react.dev/) applications built with [Vite](https://vitejs.dev/). It includes:
 
 * 🏎️ Pre-bundled for performance
 * 🪄 Zero config
 * 💫 and more!
 
-<If notRenderer={SUPPORTED_RENDERER}>
+<If notRenderer={'react'}>
   <Callout variant="info">
     Storybook for React & Vite is only supported in [React](?renderer=react) projects.
   </Callout>
 
   {/* End non-supported renderers */}
 </If>
 
-<If renderer={SUPPORTED_RENDERER}>
+<If renderer={'react'}>
   ## Requirements
 
   * React ≥ 16.8

diff --git a/docs/get-started/frameworks/react-webpack5.mdx b/docs/get-started/frameworks/react-webpack5.mdx
@@ -2,19 +2,17 @@
 title: Storybook for React & Webpack
 ---
 
-export const SUPPORTED_RENDERER = 'react';
-
 Storybook for React & Webpack is a [framework](../contribute/framework.md) that makes it easy to develop and test UI components in isolation for [React](https://react.dev/) applications built with [Webpack](https://webpack.js.org/).
 
-<If notRenderer={SUPPORTED_RENDERER}>
+<If notRenderer={'react'}>
   <Callout variant="info">
     Storybook for React & Webpack is only supported in [React](?renderer=react) projects.
   </Callout>
 
   {/* End non-supported renderers */}
 </If>
 
-<If renderer={SUPPORTED_RENDERER}>
+<If renderer={'react'}>
   ## Requirements
 
   * React ≥ 16.8

diff --git a/docs/get-started/frameworks/svelte-vite.mdx b/docs/get-started/frameworks/svelte-vite.mdx
@@ -2,19 +2,17 @@
 title: Storybook for Svelte & Vite
 ---
 
-export const SUPPORTED_RENDERER = 'svelte';
-
 Storybook for Svelte & Vite is a [framework](../contribute/framework.md) that makes it easy to develop and test UI components in isolation for applications using [Svelte](https://svelte.dev/) built with [Vite](https://vitejs.dev/).
 
-<If notRenderer={SUPPORTED_RENDERER}>
+<If notRenderer={'svelte'}>
   <Callout variant="info">
     Storybook for Svelte & Vite is only supported in [Svelte](?renderer=svelte) projects.
   </Callout>
 
   {/* End non-supported renderers */}
 </If>
 
-<If renderer={SUPPORTED_RENDERER}>
+<If renderer={'svelte'}>
   ## Requirements
 
   * Svelte ≥ 4.0

diff --git a/docs/get-started/frameworks/svelte-webpack5.mdx b/docs/get-started/frameworks/svelte-webpack5.mdx
@@ -2,19 +2,17 @@
 title: Storybook for Svelte & Webpack
 ---
 
-export const SUPPORTED_RENDERER = 'svelte';
-
 Storybook for Svelte & Webpack is a [framework](../contribute/framework.md) that makes it easy to develop and test UI components in isolation for applications using [Svelte](https://svelte.dev/) built with [Webpack](https://webpack.js.org/).
 
-<If notRenderer={SUPPORTED_RENDERER}>
+<If notRenderer={'svelte'}>
   <Callout variant="info">
     Storybook for Svelte & Webpack is only supported in [Svelte](?renderer=svelte) projects.
   </Callout>
 
   {/* End non-supported renderers */}
 </If>
 
-<If renderer={SUPPORTED_RENDERER}>
+<If renderer={'svelte'}>
   ## Requirements
 
   * Svelte ≥ 4.0

diff --git a/docs/get-started/frameworks/sveltekit.mdx b/docs/get-started/frameworks/sveltekit.mdx
@@ -2,24 +2,22 @@
 title: Storybook for SvelteKit
 ---
 
-export const SUPPORTED_RENDERER = 'svelte';
-
 Storybook for SvelteKit is a [framework](../contribute/framework.md) that makes it easy to develop and test UI components in isolation for [SvelteKit](https://kit.svelte.dev/) applications. It includes:
 
 * 🪄 Zero config
 * 🧩 Easily mock many Kit modules
 * 🔗 Automatic link handling
 * 💫 and more!
 
-<If notRenderer={SUPPORTED_RENDERER}>
+<If notRenderer={'svelte'}>
   <Callout variant="info">
     Storybook for SvelteKit is only supported in [Svelte](?renderer=svelte) projects.
   </Callout>
 
   {/* End non-supported renderers */}
 </If>
 
-<If renderer={SUPPORTED_RENDERER}>
+<If renderer={'svelte'}>
   ## Requirements
 
   * SvelteKit ≥ 1.0

diff --git a/docs/get-started/frameworks/vue3-vite.mdx b/docs/get-started/frameworks/vue3-vite.mdx
@@ -2,24 +2,22 @@
 title: Storybook for Vue & Vite
 ---
 
-export const SUPPORTED_RENDERER = 'vue';
-
 Storybook for Vue & Vite is a [framework](../contribute/framework.md) that makes it easy to develop and test UI components in isolation for [Vue](https://vuejs.org/) applications built with [Vite](https://vitejs.dev/). It includes:
 
 * 🏎️ Pre-bundled for performance
 * 🪄 Zero config
 * 🧠 Comprehensive docgen
 * 💫 and more!
 
-<If notRenderer={SUPPORTED_RENDERER}>
+<If notRenderer={'vue'}>
   <Callout variant="info">
     Storybook for Vue & Vite is only supported in [Vue](?renderer=vue) projects.
   </Callout>
 
   {/* End non-supported renderers */}
 </If>
 
-<If renderer={SUPPORTED_RENDERER}>
+<If renderer={'vue'}>
   ## Requirements
 
   * Vue ≥ 3

diff --git a/docs/get-started/frameworks/vue3-webpack5.mdx b/docs/get-started/frameworks/vue3-webpack5.mdx
@@ -2,19 +2,17 @@
 title: Storybook for Vue & Webpack
 ---
 
-export const SUPPORTED_RENDERER = 'vue';
-
 Storybook for Vue & Webpack is a [framework](../contribute/framework.md) that makes it easy to develop and test UI components in isolation for [Vue](https://vuejs.org/) applications built with [Webpack](https://webpack.js.org/).
 
-<If notRenderer={SUPPORTED_RENDERER}>
+<If notRenderer={'vue'}>
   <Callout variant="info">
     Storybook for Vue & Webpack is only supported in [Vue](?renderer=vue) projects.
   </Callout>
 
   {/* End non-supported renderers */}
 </If>
 
-<If renderer={SUPPORTED_RENDERER}>
+<If renderer={'vue'}>
   ## Requirements
 
   * Vue ≥ 3.0

diff --git a/docs/get-started/frameworks/web-components-vite.mdx b/docs/get-started/frameworks/web-components-vite.mdx
@@ -2,19 +2,17 @@
 title: Storybook for Web components & Vite
 ---
 
-export const SUPPORTED_RENDERER = 'web-components';
-
 Storybook for Web components & Vite is a [framework](../contribute/framework.md) that makes it easy to develop and test UI components in isolation for applications using [Web components](https://www.webcomponents.org/introduction) built with [Vite](https://vitejs.dev/).
 
-<If notRenderer={SUPPORTED_RENDERER}>
+<If notRenderer={'web-components'}>
   <Callout variant="info">
     Storybook for Web components & Vite is only supported in [Web components](?renderer=web-components) projects.
   </Callout>
 
   {/* End non-supported renderers */}
 </If>
 
-<If renderer={SUPPORTED_RENDERER}>
+<If renderer={'web-components'}>
   ## Requirements
 
   * Vite ≥ 4.0

diff --git a/docs/get-started/frameworks/web-components-webpack5.mdx b/docs/get-started/frameworks/web-components-webpack5.mdx
@@ -2,19 +2,17 @@
 title: Storybook for Web components & Webpack
 ---
 
-export const SUPPORTED_RENDERER = 'web-components';
-
 Storybook for Web components & Webpack is a [framework](../contribute/framework.md) that makes it easy to develop and test UI components in isolation for applications using [Web components](https://www.webcomponents.org/introduction) built with [Webpack](https://webpack.js.org/).
 
-<If notRenderer={SUPPORTED_RENDERER}>
+<If notRenderer={'web-components'}>
   <Callout variant="info">
     Storybook for Web components & Webpack is only supported in [Web components](?renderer=web-components) projects.
   </Callout>
 
   {/* End non-supported renderers */}
 </If>
 
-<If renderer={SUPPORTED_RENDERER}>
+<If renderer={'web-components'}>
   ## Requirements
 
   * Webpack ≥ 5.0

diff --git a/docs/writing-stories/mocking-data-and-modules/mocking-providers.mdx b/docs/writing-stories/mocking-data-and-modules/mocking-providers.mdx
@@ -5,17 +5,15 @@ sidebar:
   title: Providers
 ---
 
-export const SUPPORTED_RENDERERS = ['preact', 'react', 'solid'];
-
-<If notRenderer={SUPPORTED_RENDERERS}>
+<If notRenderer={['preact', 'react', 'solid']}>
   <Callout variant="info">
     The [context provider pattern](https://react.dev/learn/passing-data-deeply-with-context) and how to mock it only applies to renderers that use JSX, like [React](?renderer=react) or [Solid](?renderer=solid).
   </Callout>
 
   {/* End non-supported renderers */}
 </If>
 
-<If renderer={SUPPORTED_RENDERERS}>
+<If renderer={['preact', 'react', 'solid']}>
   Components can receive data or configuration from context providers. For example, a styled component might access its theme from a ThemeProvider or Redux uses React context to provide components access to app data. To mock a provider, you can wrap your component in a [decorator](./decorators.md) that includes the necessary context.
 
   {/* prettier-ignore-start */}