+ # Configure your project
-
-
-
-
Add styling and CSS
-Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.
- +
+
-
+
- Add styling and CSS
+Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.
+ Read more on how to set up styling › + >Learn more
-
-
-
- Provide context and mocking
-Often when a story doesn't render, it's because your component is - expecting a specific environment or context (like a theme provider) to be available. - Learn more about solving these issues by providing context and mocking to Storybook.
- +Provide context and mocking
+Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.
+ Read more on how to set up context › + >Learn more
-
+
-
Load assets and resources
-To link static files (like fonts) to your projects and stories, use the `staticDirs` configuration option to specify folders to load when starting Storybook.
- Read more on how to load assets › +
+
+
Load assets and resources
+To link static files (like fonts) to your projects and stories, use the + `staticDirs` configuration option to specify folders to load when + starting Storybook.
+ Learn more
+
+ # Do more with Storybook
-# Do more with Storybook
-
-Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs.
-
-
+ Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs. +
-+ Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs. +
-
-
-
Autodocs
-Auto-generate living, interactive reference documentation from your components and stories.
- Learn more › +
+
-# Explore and Connect
+
+
-
+
+ Autodocs
+Auto-generate living, + interactive reference documentation from your components and stories.
+ Learn more
+
+ Publish to Chromatic
+Publish your Storybook to review and collaborate with your entire team.
+ Learn more
+
+ Figma Plugin
+Embed your stories into Figma to cross-reference the design and live + implementation in one place.
+ Learn more
+
+ Testing
+Use stories to test a component in all its variations, no matter how + complex.
+ Learn more
+
+
Accessibility
+Automatically test your components for a11y issues as you develop.
+ Learn more
-
- Testing
-Use stories to test a component in all its variations, no matter how complex.
- Learn more › -
-
- Publish to Chromatic
-Publish your Storybook to review and collaborate with your entire team.
- Learn more › -
-
- Figma Plugin
-Embed your stories into Figma to cross-reference the design and live implementation in one place.
- Learn more › -
-
-
+Accessibility
-Automatically test your components for a11y issues as you develop.
- Learn more › -
+
+ >Discover all addons
+
+
+
+
+
+
+
+ Get support and chat with frontend developers.
-
+ Join Discord server
+ + Join Discord server
+
diff --git a/code/frameworks/nextjs/template/cli/ts-3-8/Configure.mdx b/code/frameworks/nextjs/template/cli/ts-3-8/Configure.mdx
index 2bae870cabea..17a554270caa 100644
--- a/code/frameworks/nextjs/template/cli/ts-3-8/Configure.mdx
+++ b/code/frameworks/nextjs/template/cli/ts-3-8/Configure.mdx
@@ -1,284 +1,433 @@
-import { Meta } from '@storybook/blocks';
-import Image from 'next/image';
+import { Meta } from "@storybook/blocks";
+import { Icons } from "@storybook/components";
+import Image from "next/image";
-import Accessibility from "./assets/accessibility.svg";
-import Checkmark from "./assets/checkmark.svg";
-import Document from "./assets/document.svg";
-import Typography from "./assets/typography.svg";
import Github from "./assets/github.svg";
import Discord from "./assets/discord.svg";
import Youtube from "./assets/youtube.svg";
-import Chromatic from "./assets/chromatic.svg";
-import Figma from "./assets/figma.svg";
import Tutorials from "./assets/tutorials.svg";
-import Styling from "./assets/styling.jpg";
-import Context from "./assets/context.jpg";
-import Assets from "./assets/assets.jpg";
+import Styling from "./assets/styling.png";
+import Context from "./assets/context.png";
+import Assets from "./assets/assets.png";
+import Docs from "./assets/docs.png";
+import Share from "./assets/share.png";
+import FigmaPlugin from "./assets/figma-plugin.png";
+import Testing from "./assets/testing.png";
+import Accessibility from "./assets/accessibility.png";
+import Theming from "./assets/theming.png";
+import AddonLibrary from "./assets/addon-library.png";
-
+export const RightArrow = () =>
+ Watch tutorials, feature previews and interviews.
-
+
-
+ Watch on YouTube
+
+
+ # Configure your project
-
-
-
-
Add styling and CSS
-Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.
- +
+
-
+
- Add styling and CSS
+Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.
+ Read more on how to set up styling › + >Learn more
-
-
-
- Provide context and mocking
-Often when a story doesn't render, it's because your component is - expecting a specific environment or context (like a theme provider) to be available. - Learn more about solving these issues by providing context and mocking to Storybook.
- +Provide context and mocking
+Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.
+ Read more on how to set up context › + >Learn more
-
+
-
Load assets and resources
-To link static files (like fonts) to your projects and stories, use the `staticDirs` configuration option to specify folders to load when starting Storybook.
- Read more on how to load assets › +
+
+
Load assets and resources
+To link static files (like fonts) to your projects and stories, use the + `staticDirs` configuration option to specify folders to load when + starting Storybook.
+ Learn more
+
+ # Do more with Storybook
-# Do more with Storybook
-
-Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs.
-
-
+ Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs. +
-+ Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs. +
-
-
-
Autodocs
-Auto-generate living, interactive reference documentation from your components and stories.
- Learn more › +
+
-# Explore and Connect
+
+
-
+
+ Autodocs
+Auto-generate living, + interactive reference documentation from your components and stories.
+ Learn more
+
+ Publish to Chromatic
+Publish your Storybook to review and collaborate with your entire team.
+ Learn more
+
+ Figma Plugin
+Embed your stories into Figma to cross-reference the design and live + implementation in one place.
+ Learn more
+
+ Testing
+Use stories to test a component in all its variations, no matter how + complex.
+ Learn more
+
+
Accessibility
+Automatically test your components for a11y issues as you develop.
+ Learn more
-
- Testing
-Use stories to test a component in all its variations, no matter how complex.
- Learn more › -
-
- Publish to Chromatic
-Publish your Storybook to review and collaborate with your entire team.
- Learn more › -
-
- Figma Plugin
-Embed your stories into Figma to cross-reference the design and live implementation in one place.
- Learn more › -
-
-
+Accessibility
-Automatically test your components for a11y issues as you develop.
- Learn more › -
+
+ >Discover all addons
+
+
+
+
+
+
+
+ Get support and chat with frontend developers.
-
+ Join Discord server
+ + Join Discord server
+
diff --git a/code/frameworks/nextjs/template/cli/ts-4-9/Configure.mdx b/code/frameworks/nextjs/template/cli/ts-4-9/Configure.mdx
index 2bae870cabea..17a554270caa 100644
--- a/code/frameworks/nextjs/template/cli/ts-4-9/Configure.mdx
+++ b/code/frameworks/nextjs/template/cli/ts-4-9/Configure.mdx
@@ -1,284 +1,433 @@
-import { Meta } from '@storybook/blocks';
-import Image from 'next/image';
+import { Meta } from "@storybook/blocks";
+import { Icons } from "@storybook/components";
+import Image from "next/image";
-import Accessibility from "./assets/accessibility.svg";
-import Checkmark from "./assets/checkmark.svg";
-import Document from "./assets/document.svg";
-import Typography from "./assets/typography.svg";
import Github from "./assets/github.svg";
import Discord from "./assets/discord.svg";
import Youtube from "./assets/youtube.svg";
-import Chromatic from "./assets/chromatic.svg";
-import Figma from "./assets/figma.svg";
import Tutorials from "./assets/tutorials.svg";
-import Styling from "./assets/styling.jpg";
-import Context from "./assets/context.jpg";
-import Assets from "./assets/assets.jpg";
+import Styling from "./assets/styling.png";
+import Context from "./assets/context.png";
+import Assets from "./assets/assets.png";
+import Docs from "./assets/docs.png";
+import Share from "./assets/share.png";
+import FigmaPlugin from "./assets/figma-plugin.png";
+import Testing from "./assets/testing.png";
+import Accessibility from "./assets/accessibility.png";
+import Theming from "./assets/theming.png";
+import AddonLibrary from "./assets/addon-library.png";
-
+export const RightArrow = () =>
+ Watch tutorials, feature previews and interviews.
-
+
-
+ Watch on YouTube
+
+
+ # Configure your project
-
-
-
-
Add styling and CSS
-Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.
- +
+
-
+
- Add styling and CSS
+Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.
+ Read more on how to set up styling › + >Learn more
-
-
-
- Provide context and mocking
-Often when a story doesn't render, it's because your component is - expecting a specific environment or context (like a theme provider) to be available. - Learn more about solving these issues by providing context and mocking to Storybook.
- +Provide context and mocking
+Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.
+ Read more on how to set up context › + >Learn more
-
+
-
Load assets and resources
-To link static files (like fonts) to your projects and stories, use the `staticDirs` configuration option to specify folders to load when starting Storybook.
- Read more on how to load assets › +
+
+
Load assets and resources
+To link static files (like fonts) to your projects and stories, use the + `staticDirs` configuration option to specify folders to load when + starting Storybook.
+ Learn more
+
+ # Do more with Storybook
-# Do more with Storybook
-
-Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs.
-
-
+ Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs. +
-+ Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs. +
-
-
-
Autodocs
-Auto-generate living, interactive reference documentation from your components and stories.
- Learn more › +
+
-# Explore and Connect
+
+
-
+
+ Autodocs
+Auto-generate living, + interactive reference documentation from your components and stories.
+ Learn more
+
+ Publish to Chromatic
+Publish your Storybook to review and collaborate with your entire team.
+ Learn more
+
+ Figma Plugin
+Embed your stories into Figma to cross-reference the design and live + implementation in one place.
+ Learn more
+
+ Testing
+Use stories to test a component in all its variations, no matter how + complex.
+ Learn more
+
+
Accessibility
+Automatically test your components for a11y issues as you develop.
+ Learn more
-
- Testing
-Use stories to test a component in all its variations, no matter how complex.
- Learn more › -
-
- Publish to Chromatic
-Publish your Storybook to review and collaborate with your entire team.
- Learn more › -
-
- Figma Plugin
-Embed your stories into Figma to cross-reference the design and live implementation in one place.
- Learn more › -
-
-
+Accessibility
-Automatically test your components for a11y issues as you develop.
- Learn more › -
+
+ >Discover all addons
+
+
+
+
+
+
+
+ Get support and chat with frontend developers.
-
+ Join Discord server
+ + Join Discord server
+
diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json
index 7334cfc7a3b3..b8507adfc397 100644
--- a/code/frameworks/preact-vite/package.json
+++ b/code/frameworks/preact-vite/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/preact-vite",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -47,8 +47,8 @@
},
"dependencies": {
"@preact/preset-vite": "^2.0.0",
- "@storybook/builder-vite": "7.1.0-beta.2",
- "@storybook/preact": "7.1.0-beta.2"
+ "@storybook/builder-vite": "7.1.0-beta.3",
+ "@storybook/preact": "7.1.0-beta.3"
},
"devDependencies": {
"@types/node": "^16.0.0",
diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json
index 330023a80242..d9b297f936c0 100644
--- a/code/frameworks/preact-webpack5/package.json
+++ b/code/frameworks/preact-webpack5/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/preact-webpack5",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Storybook for Preact: Develop Preact Component in isolation.",
"keywords": [
"storybook"
@@ -47,10 +47,10 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
- "@storybook/builder-webpack5": "7.1.0-beta.2",
- "@storybook/core-common": "7.1.0-beta.2",
- "@storybook/preact": "7.1.0-beta.2",
- "@storybook/preset-preact-webpack": "7.1.0-beta.2",
+ "@storybook/builder-webpack5": "7.1.0-beta.3",
+ "@storybook/core-common": "7.1.0-beta.3",
+ "@storybook/preact": "7.1.0-beta.3",
+ "@storybook/preset-preact-webpack": "7.1.0-beta.3",
"@types/node": "^16.0.0"
},
"devDependencies": {
diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json
index 6b198c02ccd4..9a926158ed32 100644
--- a/code/frameworks/react-vite/package.json
+++ b/code/frameworks/react-vite/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/react-vite",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -49,8 +49,8 @@
"dependencies": {
"@joshwooding/vite-plugin-react-docgen-typescript": "0.2.1",
"@rollup/pluginutils": "^5.0.2",
- "@storybook/builder-vite": "7.1.0-beta.2",
- "@storybook/react": "7.1.0-beta.2",
+ "@storybook/builder-vite": "7.1.0-beta.3",
+ "@storybook/react": "7.1.0-beta.3",
"@vitejs/plugin-react": "^3.0.1",
"ast-types": "^0.14.2",
"magic-string": "^0.30.0",
diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json
index cb20beed47eb..6e4be993284c 100644
--- a/code/frameworks/react-webpack5/package.json
+++ b/code/frameworks/react-webpack5/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/react-webpack5",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -47,19 +47,19 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
- "@storybook/builder-webpack5": "7.1.0-beta.2",
- "@storybook/preset-react-webpack": "7.1.0-beta.2",
- "@storybook/react": "7.1.0-beta.2",
+ "@storybook/builder-webpack5": "7.1.0-beta.3",
+ "@storybook/preset-react-webpack": "7.1.0-beta.3",
+ "@storybook/react": "7.1.0-beta.3",
"@types/node": "^16.0.0"
},
"devDependencies": {
- "jest-specific-snapshot": "^8.0.0",
- "typescript": "~4.9.3"
+ "jest-specific-snapshot": "^8.0.0"
},
"peerDependencies": {
"@babel/core": "^7.22.0",
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
- "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+ "typescript": "*"
},
"peerDependenciesMeta": {
"@babel/core": {
diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json
index a968c700e17c..79062d5b6cac 100644
--- a/code/frameworks/server-webpack5/package.json
+++ b/code/frameworks/server-webpack5/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/server-webpack5",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -47,10 +47,10 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
- "@storybook/builder-webpack5": "7.1.0-beta.2",
- "@storybook/core-common": "7.1.0-beta.2",
- "@storybook/preset-server-webpack": "7.1.0-beta.2",
- "@storybook/server": "7.1.0-beta.2",
+ "@storybook/builder-webpack5": "7.1.0-beta.3",
+ "@storybook/core-common": "7.1.0-beta.3",
+ "@storybook/preset-server-webpack": "7.1.0-beta.3",
+ "@storybook/server": "7.1.0-beta.3",
"@types/node": "^16.0.0"
},
"devDependencies": {
diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json
index 7c7b4fe8749d..c3a2857b3840 100644
--- a/code/frameworks/svelte-vite/package.json
+++ b/code/frameworks/svelte-vite/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/svelte-vite",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -47,9 +47,9 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
- "@storybook/builder-vite": "7.1.0-beta.2",
- "@storybook/node-logger": "7.1.0-beta.2",
- "@storybook/svelte": "7.1.0-beta.2",
+ "@storybook/builder-vite": "7.1.0-beta.3",
+ "@storybook/node-logger": "7.1.0-beta.3",
+ "@storybook/svelte": "7.1.0-beta.3",
"@sveltejs/vite-plugin-svelte": "^2.4.1",
"magic-string": "^0.30.0",
"sveltedoc-parser": "^4.2.1",
diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json
index fb420a49889b..734a9fd3ec11 100644
--- a/code/frameworks/svelte-webpack5/package.json
+++ b/code/frameworks/svelte-webpack5/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/svelte-webpack5",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -47,21 +47,21 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
- "@storybook/builder-webpack5": "7.1.0-beta.2",
- "@storybook/core-common": "7.1.0-beta.2",
- "@storybook/preset-svelte-webpack": "7.1.0-beta.2",
- "@storybook/svelte": "7.1.0-beta.2"
+ "@storybook/builder-webpack5": "7.1.0-beta.3",
+ "@storybook/core-common": "7.1.0-beta.3",
+ "@storybook/preset-svelte-webpack": "7.1.0-beta.3",
+ "@storybook/svelte": "7.1.0-beta.3"
},
"devDependencies": {
- "svelte": "^3.48.0",
- "svelte-loader": "^3.1.2",
+ "svelte": "^4.0.0",
+ "svelte-loader": "^3.1.9",
"typescript": "~4.9.3"
},
"peerDependencies": {
"@babel/core": "*",
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
- "svelte": "^3.48.0",
+ "svelte": "^3.48.0 || ^4.0.0",
"svelte-loader": "*"
},
"engines": {
diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json
index b060298ce4fa..8f4068f8d30e 100644
--- a/code/frameworks/sveltekit/package.json
+++ b/code/frameworks/sveltekit/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/sveltekit",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Storybook for SvelteKit",
"keywords": [
"storybook",
@@ -50,9 +50,9 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
- "@storybook/builder-vite": "7.1.0-beta.2",
- "@storybook/svelte": "7.1.0-beta.2",
- "@storybook/svelte-vite": "7.1.0-beta.2"
+ "@storybook/builder-vite": "7.1.0-beta.3",
+ "@storybook/svelte": "7.1.0-beta.3",
+ "@storybook/svelte-vite": "7.1.0-beta.3"
},
"devDependencies": {
"@types/node": "^16.0.0",
diff --git a/code/frameworks/vue-vite/package.json b/code/frameworks/vue-vite/package.json
index b548cead0c10..5b9e1b84ca11 100644
--- a/code/frameworks/vue-vite/package.json
+++ b/code/frameworks/vue-vite/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/vue-vite",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Storybook for Vue2 and Vite: Develop Vue2 Components in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -47,10 +47,10 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
- "@storybook/builder-vite": "7.1.0-beta.2",
- "@storybook/core-common": "7.1.0-beta.2",
- "@storybook/core-server": "7.1.0-beta.2",
- "@storybook/vue": "7.1.0-beta.2",
+ "@storybook/builder-vite": "7.1.0-beta.3",
+ "@storybook/core-common": "7.1.0-beta.3",
+ "@storybook/core-server": "7.1.0-beta.3",
+ "@storybook/vue": "7.1.0-beta.3",
"magic-string": "^0.30.0",
"vue-docgen-api": "^4.40.0"
},
diff --git a/code/frameworks/vue-webpack5/package.json b/code/frameworks/vue-webpack5/package.json
index 5026d2657879..5b0b4e4ee797 100644
--- a/code/frameworks/vue-webpack5/package.json
+++ b/code/frameworks/vue-webpack5/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/vue-webpack5",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -47,10 +47,10 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
- "@storybook/builder-webpack5": "7.1.0-beta.2",
- "@storybook/core-common": "7.1.0-beta.2",
- "@storybook/preset-vue-webpack": "7.1.0-beta.2",
- "@storybook/vue": "7.1.0-beta.2",
+ "@storybook/builder-webpack5": "7.1.0-beta.3",
+ "@storybook/core-common": "7.1.0-beta.3",
+ "@storybook/preset-vue-webpack": "7.1.0-beta.3",
+ "@storybook/vue": "7.1.0-beta.3",
"@types/node": "^16.0.0"
},
"devDependencies": {
diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json
index 33c41c02e0f0..2c79e9d44f61 100644
--- a/code/frameworks/vue3-vite/package.json
+++ b/code/frameworks/vue3-vite/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/vue3-vite",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -47,9 +47,9 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
- "@storybook/builder-vite": "7.1.0-beta.2",
- "@storybook/core-server": "7.1.0-beta.2",
- "@storybook/vue3": "7.1.0-beta.2",
+ "@storybook/builder-vite": "7.1.0-beta.3",
+ "@storybook/core-server": "7.1.0-beta.3",
+ "@storybook/vue3": "7.1.0-beta.3",
"@vitejs/plugin-vue": "^4.0.0",
"magic-string": "^0.30.0",
"vue-docgen-api": "^4.40.0"
diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json
index 09b1dc7b537c..c0bee1dbd301 100644
--- a/code/frameworks/vue3-webpack5/package.json
+++ b/code/frameworks/vue3-webpack5/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/vue3-webpack5",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -47,10 +47,10 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
- "@storybook/builder-webpack5": "7.1.0-beta.2",
- "@storybook/core-common": "7.1.0-beta.2",
- "@storybook/preset-vue3-webpack": "7.1.0-beta.2",
- "@storybook/vue3": "7.1.0-beta.2",
+ "@storybook/builder-webpack5": "7.1.0-beta.3",
+ "@storybook/core-common": "7.1.0-beta.3",
+ "@storybook/preset-vue3-webpack": "7.1.0-beta.3",
+ "@storybook/vue3": "7.1.0-beta.3",
"@types/node": "^16.0.0"
},
"devDependencies": {
diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json
index 0ccae02d6b14..421ba7cc7e32 100644
--- a/code/frameworks/web-components-vite/package.json
+++ b/code/frameworks/web-components-vite/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/web-components-vite",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -47,10 +47,10 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
- "@storybook/builder-vite": "7.1.0-beta.2",
- "@storybook/core-server": "7.1.0-beta.2",
- "@storybook/node-logger": "7.1.0-beta.2",
- "@storybook/web-components": "7.1.0-beta.2",
+ "@storybook/builder-vite": "7.1.0-beta.3",
+ "@storybook/core-server": "7.1.0-beta.3",
+ "@storybook/node-logger": "7.1.0-beta.3",
+ "@storybook/web-components": "7.1.0-beta.3",
"magic-string": "^0.30.0"
},
"devDependencies": {
diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json
index 3e43faa139ab..7fe884377a4b 100644
--- a/code/frameworks/web-components-webpack5/package.json
+++ b/code/frameworks/web-components-webpack5/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/web-components-webpack5",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
"keywords": [
"lit",
@@ -51,10 +51,10 @@
},
"dependencies": {
"@babel/preset-env": "^7.22.0",
- "@storybook/builder-webpack5": "7.1.0-beta.2",
- "@storybook/core-common": "7.1.0-beta.2",
- "@storybook/preset-web-components-webpack": "7.1.0-beta.2",
- "@storybook/web-components": "7.1.0-beta.2",
+ "@storybook/builder-webpack5": "7.1.0-beta.3",
+ "@storybook/core-common": "7.1.0-beta.3",
+ "@storybook/preset-web-components-webpack": "7.1.0-beta.3",
+ "@storybook/web-components": "7.1.0-beta.3",
"@types/node": "^16.0.0"
},
"devDependencies": {
diff --git a/code/lib/channels/package.json b/code/lib/channels/package.json
index 7c560426f631..6f4990b1d1f3 100644
--- a/code/lib/channels/package.json
+++ b/code/lib/channels/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/channels",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "",
"keywords": [
"storybook"
@@ -68,9 +68,9 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
- "@storybook/channels": "7.1.0-beta.2",
- "@storybook/client-logger": "7.1.0-beta.2",
- "@storybook/core-events": "7.1.0-beta.2",
+ "@storybook/channels": "7.1.0-beta.3",
+ "@storybook/client-logger": "7.1.0-beta.3",
+ "@storybook/core-events": "7.1.0-beta.3",
"@storybook/global": "^5.0.0",
"qs": "^6.10.0",
"telejson": "^7.0.3",
diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json
index 45025b32d156..a07c768fbd4e 100644
--- a/code/lib/cli-sb/package.json
+++ b/code/lib/cli-sb/package.json
@@ -1,6 +1,6 @@
{
"name": "sb",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Storybook CLI",
"keywords": [
"storybook"
@@ -21,7 +21,7 @@
"license": "MIT",
"bin": "./index.js",
"dependencies": {
- "@storybook/cli": "7.1.0-beta.2"
+ "@storybook/cli": "7.1.0-beta.3"
},
"publishConfig": {
"access": "public"
diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json
index 034170b190ae..98b3f2dc4360 100644
--- a/code/lib/cli-storybook/package.json
+++ b/code/lib/cli-storybook/package.json
@@ -1,6 +1,6 @@
{
"name": "storybook",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Storybook CLI",
"keywords": [
"storybook"
@@ -24,7 +24,7 @@
"storybook": "./index.js"
},
"dependencies": {
- "@storybook/cli": "7.1.0-beta.2"
+ "@storybook/cli": "7.1.0-beta.3"
},
"publishConfig": {
"access": "public"
diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json
index 91c7e8e593f9..716e57ab0deb 100644
--- a/code/lib/cli/package.json
+++ b/code/lib/cli/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/cli",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Storybook's CLI - easiest method of adding storybook to your projects",
"keywords": [
"cli",
@@ -57,13 +57,13 @@
"@babel/core": "^7.22.0",
"@babel/preset-env": "^7.22.0",
"@ndelangen/get-tarball": "^3.0.7",
- "@storybook/codemod": "7.1.0-beta.2",
- "@storybook/core-common": "7.1.0-beta.2",
- "@storybook/core-server": "7.1.0-beta.2",
- "@storybook/csf-tools": "7.1.0-beta.2",
- "@storybook/node-logger": "7.1.0-beta.2",
- "@storybook/telemetry": "7.1.0-beta.2",
- "@storybook/types": "7.1.0-beta.2",
+ "@storybook/codemod": "7.1.0-beta.3",
+ "@storybook/core-common": "7.1.0-beta.3",
+ "@storybook/core-server": "7.1.0-beta.3",
+ "@storybook/csf-tools": "7.1.0-beta.3",
+ "@storybook/node-logger": "7.1.0-beta.3",
+ "@storybook/telemetry": "7.1.0-beta.3",
+ "@storybook/types": "7.1.0-beta.3",
"@types/semver": "^7.3.4",
"@yarnpkg/fslib": "2.10.3",
"@yarnpkg/libzip": "2.3.0",
@@ -95,7 +95,7 @@
"util-deprecate": "^1.0.2"
},
"devDependencies": {
- "@storybook/client-api": "7.1.0-beta.2",
+ "@storybook/client-api": "7.1.0-beta.3",
"@types/cross-spawn": "^6.0.2",
"@types/prompts": "^2.0.9",
"@types/puppeteer-core": "^2.1.0",
diff --git a/code/lib/cli/rendererAssets/common/Configure.mdx b/code/lib/cli/rendererAssets/common/Configure.mdx
index 42180d9d5def..7302a63c5aa6 100644
--- a/code/lib/cli/rendererAssets/common/Configure.mdx
+++ b/code/lib/cli/rendererAssets/common/Configure.mdx
@@ -1,286 +1,351 @@
import { Meta } from "@storybook/blocks";
+import { Icons } from "@storybook/components";
-import Accessibility from "./assets/accessibility.svg";
-import Checkmark from "./assets/checkmark.svg";
-import Document from "./assets/document.svg";
-import Typography from "./assets/typography.svg";
import Github from "./assets/github.svg";
import Discord from "./assets/discord.svg";
import Youtube from "./assets/youtube.svg";
-import Chromatic from "./assets/chromatic.svg";
-import Figma from "./assets/figma.svg";
import Tutorials from "./assets/tutorials.svg";
-import Styling from "./assets/styling.jpg";
-import Context from "./assets/context.jpg";
-import Assets from "./assets/assets.jpg";
+import Styling from "./assets/styling.png";
+import Context from "./assets/context.png";
+import Assets from "./assets/assets.png";
+import Docs from "./assets/docs.png";
+import Share from "./assets/share.png";
+import FigmaPlugin from "./assets/figma-plugin.png";
+import Testing from "./assets/testing.png";
+import Accessibility from "./assets/accessibility.png";
+import Theming from "./assets/theming.png";
+import AddonLibrary from "./assets/addon-library.png";
-
+export const RightArrow = () =>
+ Watch tutorials, feature previews and interviews.
-
+
-
+ Watch on YouTube
+
+
+ # Configure your project
-
-
- 
-
-
+ Add styling and CSS
-Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.
+ Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community. +
+
-
+
+
- Add styling and CSS
+Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.
- Read more on how to set up styling - › - + >Learn more
- 
-
-
- Provide context and mocking
-Often when a story doesn't render, it's because your component is - expecting a specific environment or context (like a theme provider) to be available. - Learn more about solving these issues by providing context and mocking to Storybook.
+
+
+
- Provide context and mocking
+Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.
Read more on how to set up context › + >Learn more
- 
-
+
-
Load assets and resources
-To link static files (like fonts) to your projects and stories, use the `staticDirs` configuration option to specify folders to load when starting Storybook.
- Read more on how to load assets › +
+
+
+
Load assets and resources
+To link static files (like fonts) to your projects and stories, use the + `staticDirs` configuration option to specify folders to load when + starting Storybook.
+ Learn more
+
+ # Do more with Storybook
-# Do more with Storybook
-
-Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs.
-
-
+ Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs. +
-+ Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs. +
-
-
- 
-
Autodocs
-Auto-generate living, interactive reference documentation from your components and stories.
- Learn more › +
+
+
-
+
+ 
+
+ Autodocs
+Auto-generate living, + interactive reference documentation from your components and stories.
+ Learn more
+ 
+
+ Publish to Chromatic
+Publish your Storybook to review and collaborate with your entire team.
+ Learn more
+ 
+
+ Figma Plugin
+Embed your stories into Figma to cross-reference the design and live + implementation in one place.
+ Learn more
+ 
+
+ Testing
+Use stories to test a component in all its variations, no matter how + complex.
+ Learn more
+ 
+
+
Accessibility
+Automatically test your components for a11y issues as you develop.
+ Learn more
+
-
+
+
- 
-
+ Publish to Chromatic
-Publish your Storybook to review and collaborate with your entire team.
+ >Discover all addons
+ 
+
+
+
-
- 
-
- -Accessibility
= {}) =>
Object.entries(data).reduce((acc, [k, v]) => acc.replace(new RegExp(`%${k}%`, 'g'), v), string);
@@ -188,7 +192,6 @@ export const features = async (
storyStoreV7: true,
argTypeTargetsV7: true,
legacyDecoratorFileOrder: false,
- whatsNewNotifications: false,
});
export const storyIndexers = async (indexers?: StoryIndexer[]) => {
@@ -246,10 +249,18 @@ const WHATS_NEW_CACHE = 'whats-new-cache';
const WHATS_NEW_URL = 'https://storybook.js.org/whats-new/v1';
// Grabbed from the implementation: https://github.com/storybookjs/dx-functions/blob/main/netlify/functions/whats-new.ts
-type WhatsNewResponse = { title: string; url: string; publishedAt: string; excerpt: string };
+type WhatsNewResponse = {
+ title: string;
+ url: string;
+ blogUrl?: string;
+ publishedAt: string;
+ excerpt: string;
+};
// eslint-disable-next-line @typescript-eslint/naming-convention
-export const experimental_serverChannel = (channel: Channel, options: Options) => {
+export const experimental_serverChannel = async (channel: Channel, options: Options) => {
+ const coreOptions = await options.presets.apply('core');
+
channel.on(SET_WHATS_NEW_CACHE, async (data: WhatsNewCache) => {
const cache: WhatsNewCache = await options.cache.get(WHATS_NEW_CACHE).catch((e) => {
logger.verbose(e);
@@ -266,12 +277,19 @@ export const experimental_serverChannel = (channel: Channel, options: Options) =
throw response;
})) as WhatsNewResponse;
+ const main = await readConfig(findConfigFile('main', options.configDir));
+ const disableWhatsNewNotifications = main.getFieldValue([
+ 'core',
+ 'disableWhatsNewNotifications',
+ ]);
+
const cache: WhatsNewCache = (await options.cache.get(WHATS_NEW_CACHE)) ?? {};
const data = {
...post,
status: 'SUCCESS',
postIsRead: post.url === cache.lastReadPost,
showNotification: post.url !== cache.lastDismissedPost && post.url !== cache.lastReadPost,
+ disableWhatsNewNotifications,
} satisfies WhatsNewData;
channel.emit(RESULT_WHATS_NEW_DATA, { data });
} catch (e) {
@@ -282,5 +300,29 @@ export const experimental_serverChannel = (channel: Channel, options: Options) =
}
});
+ channel.on(
+ TOGGLE_WHATS_NEW_NOTIFICATIONS,
+ async ({ disableWhatsNewNotifications }: { disableWhatsNewNotifications: boolean }) => {
+ const isTelemetryEnabled = coreOptions.disableTelemetry !== true;
+ try {
+ const main = await readConfig(findConfigFile('main', options.configDir));
+ main.setFieldValue(['core', 'disableWhatsNewNotifications'], disableWhatsNewNotifications);
+ await writeConfig(main);
+
+ if (isTelemetryEnabled) {
+ await telemetry('core-config', { disableWhatsNewNotifications });
+ }
+ } catch (error) {
+ if (isTelemetryEnabled) {
+ await sendTelemetryError(error, 'core-config', {
+ cliOptions: options,
+ presetOptions: { ...options, corePresets: [], overridePresets: [] },
+ skipPrompt: true,
+ });
+ }
+ }
+ }
+ );
+
return channel;
};
diff --git a/code/lib/core-server/src/withTelemetry.ts b/code/lib/core-server/src/withTelemetry.ts
index 2eda1325587a..ef231fe83c24 100644
--- a/code/lib/core-server/src/withTelemetry.ts
+++ b/code/lib/core-server/src/withTelemetry.ts
@@ -9,6 +9,7 @@ type TelemetryOptions = {
cliOptions: CLIOptions;
presetOptions?: Parameters[0];
printError?: (err: any) => void;
+ skipPrompt?: boolean;
};
const promptCrashReports = async () => {
@@ -30,7 +31,11 @@ const promptCrashReports = async () => {
type ErrorLevel = 'none' | 'error' | 'full';
-async function getErrorLevel({ cliOptions, presetOptions }: TelemetryOptions): Promise {
+async function getErrorLevel({
+ cliOptions,
+ presetOptions,
+ skipPrompt,
+}: TelemetryOptions): Promise {
if (cliOptions.disableTelemetry) return 'none';
// If we are running init or similar, we just have to go with true here
@@ -54,6 +59,10 @@ async function getErrorLevel({ cliOptions, presetOptions }: TelemetryOptions): P
(await cache.get('enableCrashReports')) ?? (await cache.get('enableCrashreports'));
if (valueFromCache !== undefined) return valueFromCache ? 'full' : 'error';
+ if (skipPrompt) {
+ return 'error';
+ }
+
const valueFromPrompt = await promptCrashReports();
if (valueFromPrompt !== undefined) return valueFromPrompt ? 'full' : 'error';
diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json
index 0b271cf8e615..6beb0c395c81 100644
--- a/code/lib/core-webpack/package.json
+++ b/code/lib/core-webpack/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/core-webpack",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Storybook framework-agnostic API",
"keywords": [
"storybook"
@@ -43,9 +43,9 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
- "@storybook/core-common": "7.1.0-beta.2",
- "@storybook/node-logger": "7.1.0-beta.2",
- "@storybook/types": "7.1.0-beta.2",
+ "@storybook/core-common": "7.1.0-beta.3",
+ "@storybook/node-logger": "7.1.0-beta.3",
+ "@storybook/types": "7.1.0-beta.3",
"@types/node": "^16.0.0",
"ts-dedent": "^2.0.0"
},
diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json
index 047319326bb3..e0826b74ea89 100644
--- a/code/lib/csf-plugin/package.json
+++ b/code/lib/csf-plugin/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/csf-plugin",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Enrich CSF files via static analysis",
"keywords": [
"storybook"
@@ -43,7 +43,7 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
- "@storybook/csf-tools": "7.1.0-beta.2",
+ "@storybook/csf-tools": "7.1.0-beta.3",
"unplugin": "^1.3.1"
},
"devDependencies": {
diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json
index 51dba6f87f57..6f5fa87d4261 100644
--- a/code/lib/csf-tools/package.json
+++ b/code/lib/csf-tools/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/csf-tools",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Parse and manipulate CSF and Storybook config files",
"keywords": [
"storybook"
@@ -46,7 +46,7 @@
"@babel/traverse": "^7.22.0",
"@babel/types": "^7.22.0",
"@storybook/csf": "^0.1.0",
- "@storybook/types": "7.1.0-beta.2",
+ "@storybook/types": "7.1.0-beta.3",
"fs-extra": "^11.1.0",
"recast": "^0.23.1",
"ts-dedent": "^2.0.0"
diff --git a/code/lib/docs-tools/package.json b/code/lib/docs-tools/package.json
index 80b57409239d..3adee4c39427 100644
--- a/code/lib/docs-tools/package.json
+++ b/code/lib/docs-tools/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/docs-tools",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Shared utility functions for frameworks to implement docs",
"keywords": [
"storybook"
@@ -43,9 +43,9 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
- "@storybook/core-common": "7.1.0-beta.2",
- "@storybook/preview-api": "7.1.0-beta.2",
- "@storybook/types": "7.1.0-beta.2",
+ "@storybook/core-common": "7.1.0-beta.3",
+ "@storybook/preview-api": "7.1.0-beta.3",
+ "@storybook/types": "7.1.0-beta.3",
"@types/doctrine": "^0.0.3",
"doctrine": "^3.0.0",
"lodash": "^4.17.21"
diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json
index 84050b61cdc7..527af259dc9f 100644
--- a/code/lib/instrumenter/package.json
+++ b/code/lib/instrumenter/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/instrumenter",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "",
"keywords": [
"storybook"
@@ -43,11 +43,11 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
- "@storybook/channels": "7.1.0-beta.2",
- "@storybook/client-logger": "7.1.0-beta.2",
- "@storybook/core-events": "7.1.0-beta.2",
+ "@storybook/channels": "7.1.0-beta.3",
+ "@storybook/client-logger": "7.1.0-beta.3",
+ "@storybook/core-events": "7.1.0-beta.3",
"@storybook/global": "^5.0.0",
- "@storybook/preview-api": "7.1.0-beta.2"
+ "@storybook/preview-api": "7.1.0-beta.3"
},
"devDependencies": {
"typescript": "~4.9.3"
diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json
index c9c3f0d47ef8..198615137893 100644
--- a/code/lib/manager-api/package.json
+++ b/code/lib/manager-api/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/manager-api",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Core Storybook Manager API & Context",
"keywords": [
"storybook"
@@ -42,14 +42,14 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
- "@storybook/channels": "7.1.0-beta.2",
- "@storybook/client-logger": "7.1.0-beta.2",
- "@storybook/core-events": "7.1.0-beta.2",
+ "@storybook/channels": "7.1.0-beta.3",
+ "@storybook/client-logger": "7.1.0-beta.3",
+ "@storybook/core-events": "7.1.0-beta.3",
"@storybook/csf": "^0.1.0",
"@storybook/global": "^5.0.0",
- "@storybook/router": "7.1.0-beta.2",
- "@storybook/theming": "7.1.0-beta.2",
- "@storybook/types": "7.1.0-beta.2",
+ "@storybook/router": "7.1.0-beta.3",
+ "@storybook/theming": "7.1.0-beta.3",
+ "@storybook/types": "7.1.0-beta.3",
"dequal": "^2.0.2",
"lodash": "^4.17.21",
"memoizerific": "^1.11.3",
diff --git a/code/lib/manager-api/src/modules/whatsnew.ts b/code/lib/manager-api/src/modules/whatsnew.ts
index b970d0e96bac..21d0596683f6 100644
--- a/code/lib/manager-api/src/modules/whatsnew.ts
+++ b/code/lib/manager-api/src/modules/whatsnew.ts
@@ -4,6 +4,7 @@ import {
REQUEST_WHATS_NEW_DATA,
RESULT_WHATS_NEW_DATA,
SET_WHATS_NEW_CACHE,
+ TOGGLE_WHATS_NEW_NOTIFICATIONS,
} from '@storybook/core-events';
import type { ModuleFn } from '../index';
@@ -14,6 +15,7 @@ export type SubState = {
export type SubAPI = {
isWhatsNewUnread(): boolean;
whatsNewHasBeenRead(): void;
+ toggleWhatsNewNotifications(): void;
};
const WHATS_NEW_NOTIFICATION_ID = 'whats-new';
@@ -39,6 +41,17 @@ export const init: ModuleFn = ({ fullAPI, store }) => {
fullAPI.clearNotification(WHATS_NEW_NOTIFICATION_ID);
}
},
+ toggleWhatsNewNotifications() {
+ if (state.whatsNewData?.status === 'SUCCESS') {
+ setWhatsNewState({
+ ...state.whatsNewData,
+ disableWhatsNewNotifications: !state.whatsNewData.disableWhatsNewNotifications,
+ });
+ fullAPI.emit(TOGGLE_WHATS_NEW_NOTIFICATIONS, {
+ disableWhatsNewNotifications: state.whatsNewData.disableWhatsNewNotifications,
+ });
+ }
+ },
};
function getLatestWhatsNewPost(): Promise {
@@ -63,9 +76,9 @@ export const init: ModuleFn = ({ fullAPI, store }) => {
const isNewStoryBookUser = fullAPI.getUrlState().path.includes('onboarding');
if (
- global.FEATURES.whatsNewNotifications &&
!isNewStoryBookUser &&
whatsNewData.status === 'SUCCESS' &&
+ !whatsNewData.disableWhatsNewNotifications &&
whatsNewData.showNotification
) {
fullAPI.addNotification({
diff --git a/code/lib/manager-api/src/version.ts b/code/lib/manager-api/src/version.ts
index 3147cfe7ad60..a91960161ecd 100644
--- a/code/lib/manager-api/src/version.ts
+++ b/code/lib/manager-api/src/version.ts
@@ -1 +1 @@
-export const version = '7.1.0-beta.2';
+export const version = '7.1.0-beta.3';
diff --git a/code/lib/node-logger/package.json b/code/lib/node-logger/package.json
index 98f73631461f..f37772c7065b 100644
--- a/code/lib/node-logger/package.json
+++ b/code/lib/node-logger/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/node-logger",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "",
"keywords": [
"storybook"
diff --git a/code/lib/postinstall/package.json b/code/lib/postinstall/package.json
index f52b88a97a87..6d30d511a6b5 100644
--- a/code/lib/postinstall/package.json
+++ b/code/lib/postinstall/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/postinstall",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Storybook addons postinstall utilities",
"keywords": [
"api",
diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json
index 2d6277039da1..50bd8372df01 100644
--- a/code/lib/preview-api/package.json
+++ b/code/lib/preview-api/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/preview-api",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "",
"keywords": [
"storybook"
@@ -67,13 +67,13 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
- "@storybook/channel-postmessage": "7.1.0-beta.2",
- "@storybook/channels": "7.1.0-beta.2",
- "@storybook/client-logger": "7.1.0-beta.2",
- "@storybook/core-events": "7.1.0-beta.2",
+ "@storybook/channel-postmessage": "7.1.0-beta.3",
+ "@storybook/channels": "7.1.0-beta.3",
+ "@storybook/client-logger": "7.1.0-beta.3",
+ "@storybook/core-events": "7.1.0-beta.3",
"@storybook/csf": "^0.1.0",
"@storybook/global": "^5.0.0",
- "@storybook/types": "7.1.0-beta.2",
+ "@storybook/types": "7.1.0-beta.3",
"@types/qs": "^6.9.5",
"dequal": "^2.0.2",
"lodash": "^4.17.21",
@@ -85,7 +85,7 @@
},
"devDependencies": {
"@jest/globals": "^29.5.0",
- "@storybook/core-common": "7.1.0-beta.2",
+ "@storybook/core-common": "7.1.0-beta.3",
"ansi-to-html": "^0.6.11",
"react": "^16.14.0",
"slash": "^5.0.0"
diff --git a/code/lib/preview/package.json b/code/lib/preview/package.json
index 9618f6dc54c1..5b56c2cb34a3 100644
--- a/code/lib/preview/package.json
+++ b/code/lib/preview/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/preview",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "",
"keywords": [
"storybook"
@@ -55,10 +55,10 @@
"prep": "../../../scripts/prepare/esm-bundle.ts"
},
"devDependencies": {
- "@storybook/channels": "7.1.0-beta.2",
- "@storybook/client-logger": "7.1.0-beta.2",
- "@storybook/core-events": "7.1.0-beta.2",
- "@storybook/preview-api": "7.1.0-beta.2",
+ "@storybook/channels": "7.1.0-beta.3",
+ "@storybook/client-logger": "7.1.0-beta.3",
+ "@storybook/core-events": "7.1.0-beta.3",
+ "@storybook/preview-api": "7.1.0-beta.3",
"typescript": "~4.9.3"
},
"publishConfig": {
diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json
index b58a4f2c9f9b..4b308883748f 100644
--- a/code/lib/react-dom-shim/package.json
+++ b/code/lib/react-dom-shim/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/react-dom-shim",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "",
"keywords": [
"storybook"
@@ -53,7 +53,7 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"devDependencies": {
- "@storybook/types": "7.1.0-beta.2",
+ "@storybook/types": "7.1.0-beta.3",
"typescript": "~4.9.3"
},
"peerDependencies": {
diff --git a/code/lib/router/package.json b/code/lib/router/package.json
index e964534b0c57..515e75709758 100644
--- a/code/lib/router/package.json
+++ b/code/lib/router/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/router",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Core Storybook Router",
"keywords": [
"storybook"
@@ -48,7 +48,7 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
- "@storybook/client-logger": "7.1.0-beta.2",
+ "@storybook/client-logger": "7.1.0-beta.3",
"memoizerific": "^1.11.3",
"qs": "^6.10.0"
},
diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json
index c112ca59b865..1119488a1aa6 100644
--- a/code/lib/source-loader/package.json
+++ b/code/lib/source-loader/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/source-loader",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Source loader",
"keywords": [
"lib",
@@ -45,7 +45,7 @@
},
"dependencies": {
"@storybook/csf": "^0.1.0",
- "@storybook/types": "7.1.0-beta.2",
+ "@storybook/types": "7.1.0-beta.3",
"estraverse": "^5.2.0",
"lodash": "^4.17.21",
"prettier": "^2.8.0"
diff --git a/code/lib/telemetry/package.json b/code/lib/telemetry/package.json
index ae1d2199771f..9aff281775e2 100644
--- a/code/lib/telemetry/package.json
+++ b/code/lib/telemetry/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/telemetry",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Telemetry logging for crash reports and usage statistics",
"keywords": [
"storybook"
@@ -43,8 +43,8 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
- "@storybook/client-logger": "7.1.0-beta.2",
- "@storybook/core-common": "7.1.0-beta.2",
+ "@storybook/client-logger": "7.1.0-beta.3",
+ "@storybook/core-common": "7.1.0-beta.3",
"chalk": "^4.1.0",
"detect-package-manager": "^2.0.1",
"fetch-retry": "^5.0.2",
diff --git a/code/lib/telemetry/src/types.ts b/code/lib/telemetry/src/types.ts
index e65da2747a34..25100149fd44 100644
--- a/code/lib/telemetry/src/types.ts
+++ b/code/lib/telemetry/src/types.ts
@@ -12,7 +12,8 @@ export type EventType =
| 'canceled'
| 'error'
| 'error-metadata'
- | 'version-update';
+ | 'version-update'
+ | 'core-config';
export interface Dependency {
version: string | undefined;
diff --git a/code/lib/theming/package.json b/code/lib/theming/package.json
index 2f81bcd94891..7f0369208e9d 100644
--- a/code/lib/theming/package.json
+++ b/code/lib/theming/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/theming",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Core Storybook Components",
"keywords": [
"storybook"
@@ -49,7 +49,7 @@
},
"dependencies": {
"@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
- "@storybook/client-logger": "7.1.0-beta.2",
+ "@storybook/client-logger": "7.1.0-beta.3",
"@storybook/global": "^5.0.0",
"memoizerific": "^1.11.3"
},
diff --git a/code/lib/types/package.json b/code/lib/types/package.json
index 399d1343812e..39e7533ad2fa 100644
--- a/code/lib/types/package.json
+++ b/code/lib/types/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/types",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Core Storybook TS Types",
"keywords": [
"storybook"
@@ -43,7 +43,7 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
- "@storybook/channels": "7.1.0-beta.2",
+ "@storybook/channels": "7.1.0-beta.3",
"@types/babel__core": "^7.0.0",
"@types/express": "^4.7.0",
"file-system-cache": "2.3.0"
diff --git a/code/lib/types/src/modules/core-common.ts b/code/lib/types/src/modules/core-common.ts
index ff5141f5238a..24f4d8c8f9ce 100644
--- a/code/lib/types/src/modules/core-common.ts
+++ b/code/lib/types/src/modules/core-common.ts
@@ -38,6 +38,11 @@ export interface CoreConfig {
* @see https://storybook.js.org/telemetry
*/
disableTelemetry?: boolean;
+
+ /**
+ * Disables notifications for Storybook updates.
+ */
+ disableWhatsNewNotifications?: boolean;
/**
* Enable crash reports to be sent to Storybook telemetry
* @see https://storybook.js.org/telemetry
@@ -305,11 +310,6 @@ export interface StorybookConfig {
* Apply decorators from preview.js before decorators from addons or frameworks
*/
legacyDecoratorFileOrder?: boolean;
-
- /**
- * Show a notification anytime a What's new? post is published in the Storybook blog.
- */
- whatsNewNotifications?: boolean;
};
/**
diff --git a/code/package.json b/code/package.json
index e3f8825097f1..7426d42a9192 100644
--- a/code/package.json
+++ b/code/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/root",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"private": true,
"description": "Storybook root",
"homepage": "https://storybook.js.org/",
diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json
index 78745c434110..2964e1bdf96a 100644
--- a/code/presets/create-react-app/package.json
+++ b/code/presets/create-react-app/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/preset-create-react-app",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Storybook for Create React App preset",
"keywords": [
"storybook"
@@ -50,14 +50,14 @@
"dependencies": {
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.1",
"@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.0c3f3b7.0",
- "@storybook/types": "7.1.0-beta.2",
+ "@storybook/types": "7.1.0-beta.3",
"@types/babel__core": "^7.1.7",
"babel-plugin-react-docgen": "^4.1.0",
"pnp-webpack-plugin": "^1.7.0",
"semver": "^7.3.5"
},
"devDependencies": {
- "@storybook/node-logger": "7.1.0-beta.2",
+ "@storybook/node-logger": "7.1.0-beta.3",
"@types/node": "^16.0.0",
"typescript": "~4.9.3"
},
diff --git a/code/presets/html-webpack/package.json b/code/presets/html-webpack/package.json
index 5752aafbf440..29099e2d97fc 100644
--- a/code/presets/html-webpack/package.json
+++ b/code/presets/html-webpack/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/preset-html-webpack",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -48,7 +48,7 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
- "@storybook/core-webpack": "7.1.0-beta.2",
+ "@storybook/core-webpack": "7.1.0-beta.3",
"@types/node": "^16.0.0",
"html-loader": "^3.1.0",
"webpack": "5"
diff --git a/code/presets/preact-webpack/package.json b/code/presets/preact-webpack/package.json
index edaa4eef3b77..2146f0d1304a 100644
--- a/code/presets/preact-webpack/package.json
+++ b/code/presets/preact-webpack/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/preset-preact-webpack",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Storybook for Preact: Develop Preact Component in isolation.",
"keywords": [
"storybook"
@@ -50,7 +50,7 @@
"dependencies": {
"@babel/plugin-transform-react-jsx": "^7.21.0",
"@babel/preset-typescript": "^7.21.0",
- "@storybook/core-webpack": "7.1.0-beta.2",
+ "@storybook/core-webpack": "7.1.0-beta.3",
"@types/node": "^16.0.0"
},
"devDependencies": {
diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json
index 0b4435533af2..950ec9125510 100644
--- a/code/presets/react-webpack/package.json
+++ b/code/presets/react-webpack/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/preset-react-webpack",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading",
"keywords": [
"storybook"
@@ -66,10 +66,10 @@
"@babel/preset-flow": "^7.21.0",
"@babel/preset-react": "^7.22.0",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
- "@storybook/core-webpack": "7.1.0-beta.2",
- "@storybook/docs-tools": "7.1.0-beta.2",
- "@storybook/node-logger": "7.1.0-beta.2",
- "@storybook/react": "7.1.0-beta.2",
+ "@storybook/core-webpack": "7.1.0-beta.3",
+ "@storybook/docs-tools": "7.1.0-beta.3",
+ "@storybook/node-logger": "7.1.0-beta.3",
+ "@storybook/react": "7.1.0-beta.3",
"@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.0c3f3b7.0",
"@types/node": "^16.0.0",
"@types/semver": "^7.3.4",
diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json
index 9488297affde..22eaef06476a 100644
--- a/code/presets/server-webpack/package.json
+++ b/code/presets/server-webpack/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/preset-server-webpack",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -53,10 +53,10 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
- "@storybook/core-server": "7.1.0-beta.2",
- "@storybook/core-webpack": "7.1.0-beta.2",
+ "@storybook/core-server": "7.1.0-beta.3",
+ "@storybook/core-webpack": "7.1.0-beta.3",
"@storybook/global": "^5.0.0",
- "@storybook/server": "7.1.0-beta.2",
+ "@storybook/server": "7.1.0-beta.3",
"@types/node": "^16.0.0",
"safe-identifier": "^0.4.1",
"ts-dedent": "^2.0.0",
diff --git a/code/presets/svelte-webpack/package.json b/code/presets/svelte-webpack/package.json
index 7b292d136cd9..02eea6c5e5b1 100644
--- a/code/presets/svelte-webpack/package.json
+++ b/code/presets/svelte-webpack/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/preset-svelte-webpack",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -63,19 +63,19 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
- "@storybook/core-webpack": "7.1.0-beta.2",
- "@storybook/node-logger": "7.1.0-beta.2",
+ "@storybook/core-webpack": "7.1.0-beta.3",
+ "@storybook/node-logger": "7.1.0-beta.3",
"sveltedoc-parser": "^4.2.1",
"ts-dedent": "^2.0.0"
},
"devDependencies": {
- "svelte": "^3.31.2",
- "svelte-loader": "^3.1.2",
+ "svelte": "^4.0.0",
+ "svelte-loader": "^3.1.9",
"typescript": "~4.9.3"
},
"peerDependencies": {
"@babel/core": "*",
- "svelte": "^3.1.0",
+ "svelte": "^3.1.0 || ^4.0.0",
"svelte-loader": "*"
},
"engines": {
diff --git a/code/presets/vue-webpack/package.json b/code/presets/vue-webpack/package.json
index 4f33456662d7..41ea69914f10 100644
--- a/code/presets/vue-webpack/package.json
+++ b/code/presets/vue-webpack/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/preset-vue-webpack",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -58,8 +58,8 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
- "@storybook/core-webpack": "7.1.0-beta.2",
- "@storybook/docs-tools": "7.1.0-beta.2",
+ "@storybook/core-webpack": "7.1.0-beta.3",
+ "@storybook/docs-tools": "7.1.0-beta.3",
"@types/node": "^16.0.0",
"ts-loader": "^9.2.8",
"vue-docgen-api": "^4.44.23",
diff --git a/code/presets/vue3-webpack/package.json b/code/presets/vue3-webpack/package.json
index a94712230c61..25ed231f4676 100644
--- a/code/presets/vue3-webpack/package.json
+++ b/code/presets/vue3-webpack/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/preset-vue3-webpack",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -58,8 +58,8 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
- "@storybook/core-webpack": "7.1.0-beta.2",
- "@storybook/docs-tools": "7.1.0-beta.2",
+ "@storybook/core-webpack": "7.1.0-beta.3",
+ "@storybook/docs-tools": "7.1.0-beta.3",
"@types/node": "^16.0.0",
"ts-loader": "^9.2.8",
"vue-docgen-api": "^4.46.0",
diff --git a/code/presets/web-components-webpack/package.json b/code/presets/web-components-webpack/package.json
index 817080461a95..83a9bfe6b1fe 100644
--- a/code/presets/web-components-webpack/package.json
+++ b/code/presets/web-components-webpack/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/preset-web-components-webpack",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
"keywords": [
"lit",
@@ -54,7 +54,7 @@
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-syntax-import-meta": "^7.10.4",
"@babel/preset-env": "^7.22.0",
- "@storybook/core-webpack": "7.1.0-beta.2",
+ "@storybook/core-webpack": "7.1.0-beta.3",
"@types/node": "^16.0.0",
"babel-loader": "^7.0.0 || ^8.0.0 || ^9.0.0",
"babel-plugin-bundled-import-meta": "^0.3.1"
diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json
index 58d08c2f28bb..5c59abedc3bf 100644
--- a/code/renderers/html/package.json
+++ b/code/renderers/html/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/html",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Storybook HTML renderer",
"keywords": [
"storybook"
@@ -48,11 +48,11 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
- "@storybook/core-client": "7.1.0-beta.2",
- "@storybook/docs-tools": "7.1.0-beta.2",
+ "@storybook/core-client": "7.1.0-beta.3",
+ "@storybook/docs-tools": "7.1.0-beta.3",
"@storybook/global": "^5.0.0",
- "@storybook/preview-api": "7.1.0-beta.2",
- "@storybook/types": "7.1.0-beta.2",
+ "@storybook/preview-api": "7.1.0-beta.3",
+ "@storybook/types": "7.1.0-beta.3",
"ts-dedent": "^2.0.0"
},
"devDependencies": {
diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json
index 71d6f2aaac2e..f8b24bb91006 100644
--- a/code/renderers/preact/package.json
+++ b/code/renderers/preact/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/preact",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Storybook Preact renderer",
"keywords": [
"storybook"
@@ -48,10 +48,10 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
- "@storybook/core-client": "7.1.0-beta.2",
+ "@storybook/core-client": "7.1.0-beta.3",
"@storybook/global": "^5.0.0",
- "@storybook/preview-api": "7.1.0-beta.2",
- "@storybook/types": "7.1.0-beta.2",
+ "@storybook/preview-api": "7.1.0-beta.3",
+ "@storybook/types": "7.1.0-beta.3",
"ts-dedent": "^2.0.0"
},
"devDependencies": {
diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json
index 34bf396dce3a..e68ec630ccfe 100644
--- a/code/renderers/react/package.json
+++ b/code/renderers/react/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/react",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Storybook React renderer",
"keywords": [
"storybook"
@@ -52,13 +52,13 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
- "@storybook/client-logger": "7.1.0-beta.2",
- "@storybook/core-client": "7.1.0-beta.2",
- "@storybook/docs-tools": "7.1.0-beta.2",
+ "@storybook/client-logger": "7.1.0-beta.3",
+ "@storybook/core-client": "7.1.0-beta.3",
+ "@storybook/docs-tools": "7.1.0-beta.3",
"@storybook/global": "^5.0.0",
- "@storybook/preview-api": "7.1.0-beta.2",
- "@storybook/react-dom-shim": "7.1.0-beta.2",
- "@storybook/types": "7.1.0-beta.2",
+ "@storybook/preview-api": "7.1.0-beta.3",
+ "@storybook/react-dom-shim": "7.1.0-beta.3",
+ "@storybook/types": "7.1.0-beta.3",
"@types/escodegen": "^0.0.6",
"@types/estree": "^0.0.51",
"@types/node": "^16.0.0",
@@ -79,12 +79,12 @@
"@types/util-deprecate": "^1.0.0",
"expect-type": "^0.15.0",
"jest-specific-snapshot": "^8.0.0",
- "require-from-string": "^2.0.2",
- "typescript": "~4.9.3"
+ "require-from-string": "^2.0.2"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
- "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+ "typescript": "*"
},
"peerDependenciesMeta": {
"typescript": {
diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json
index 68c51f5dcaa7..98d193497675 100644
--- a/code/renderers/server/package.json
+++ b/code/renderers/server/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/server",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Storybook Server renderer",
"keywords": [
"storybook"
@@ -53,12 +53,12 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
- "@storybook/core-client": "7.1.0-beta.2",
+ "@storybook/core-client": "7.1.0-beta.3",
"@storybook/csf": "^0.1.0",
- "@storybook/csf-tools": "7.1.0-beta.2",
+ "@storybook/csf-tools": "7.1.0-beta.3",
"@storybook/global": "^5.0.0",
- "@storybook/preview-api": "7.1.0-beta.2",
- "@storybook/types": "7.1.0-beta.2",
+ "@storybook/preview-api": "7.1.0-beta.3",
+ "@storybook/types": "7.1.0-beta.3",
"@types/fs-extra": "^11.0.1",
"fs-extra": "^11.1.0",
"ts-dedent": "^2.0.0",
diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json
index c224a590faba..44902421e2b2 100644
--- a/code/renderers/svelte/package.json
+++ b/code/renderers/svelte/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/svelte",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Storybook Svelte renderer",
"keywords": [
"storybook"
@@ -52,13 +52,13 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
- "@storybook/client-logger": "7.1.0-beta.2",
- "@storybook/core-client": "7.1.0-beta.2",
- "@storybook/core-events": "7.1.0-beta.2",
- "@storybook/docs-tools": "7.1.0-beta.2",
+ "@storybook/client-logger": "7.1.0-beta.3",
+ "@storybook/core-client": "7.1.0-beta.3",
+ "@storybook/core-events": "7.1.0-beta.3",
+ "@storybook/docs-tools": "7.1.0-beta.3",
"@storybook/global": "^5.0.0",
- "@storybook/preview-api": "7.1.0-beta.2",
- "@storybook/types": "7.1.0-beta.2",
+ "@storybook/preview-api": "7.1.0-beta.3",
+ "@storybook/types": "7.1.0-beta.3",
"sveltedoc-parser": "^4.2.1",
"type-fest": "^3.11.0"
},
diff --git a/code/renderers/vue/package.json b/code/renderers/vue/package.json
index 8c99058b9596..a20f19162f02 100644
--- a/code/renderers/vue/package.json
+++ b/code/renderers/vue/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/vue",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Storybook Vue renderer",
"keywords": [
"storybook"
@@ -48,12 +48,12 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
- "@storybook/client-logger": "7.1.0-beta.2",
- "@storybook/core-client": "7.1.0-beta.2",
- "@storybook/docs-tools": "7.1.0-beta.2",
+ "@storybook/client-logger": "7.1.0-beta.3",
+ "@storybook/core-client": "7.1.0-beta.3",
+ "@storybook/docs-tools": "7.1.0-beta.3",
"@storybook/global": "^5.0.0",
- "@storybook/preview-api": "7.1.0-beta.2",
- "@storybook/types": "7.1.0-beta.2",
+ "@storybook/preview-api": "7.1.0-beta.3",
+ "@storybook/types": "7.1.0-beta.3",
"ts-dedent": "^2.0.0",
"type-fest": "^3.11.0"
},
diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json
index 0a233b0463b7..b04f77944eff 100644
--- a/code/renderers/vue3/package.json
+++ b/code/renderers/vue3/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/vue3",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Storybook Vue 3 renderer",
"keywords": [
"storybook"
@@ -48,11 +48,11 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
- "@storybook/core-client": "7.1.0-beta.2",
- "@storybook/docs-tools": "7.1.0-beta.2",
+ "@storybook/core-client": "7.1.0-beta.3",
+ "@storybook/docs-tools": "7.1.0-beta.3",
"@storybook/global": "^5.0.0",
- "@storybook/preview-api": "7.1.0-beta.2",
- "@storybook/types": "7.1.0-beta.2",
+ "@storybook/preview-api": "7.1.0-beta.3",
+ "@storybook/types": "7.1.0-beta.3",
"lodash": "^4.17.21",
"ts-dedent": "^2.0.0",
"type-fest": "^3.11.0",
diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json
index 1dde0309b740..ac97e29f435e 100644
--- a/code/renderers/web-components/package.json
+++ b/code/renderers/web-components/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/web-components",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Storybook web-components renderer",
"keywords": [
"lit",
@@ -51,13 +51,13 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
- "@storybook/client-logger": "7.1.0-beta.2",
- "@storybook/core-client": "7.1.0-beta.2",
- "@storybook/docs-tools": "7.1.0-beta.2",
+ "@storybook/client-logger": "7.1.0-beta.3",
+ "@storybook/core-client": "7.1.0-beta.3",
+ "@storybook/docs-tools": "7.1.0-beta.3",
"@storybook/global": "^5.0.0",
- "@storybook/manager-api": "7.1.0-beta.2",
- "@storybook/preview-api": "7.1.0-beta.2",
- "@storybook/types": "7.1.0-beta.2",
+ "@storybook/manager-api": "7.1.0-beta.3",
+ "@storybook/preview-api": "7.1.0-beta.3",
+ "@storybook/types": "7.1.0-beta.3",
"tiny-invariant": "^1.3.1",
"ts-dedent": "^2.0.0"
},
diff --git a/code/ui/.storybook/main.ts b/code/ui/.storybook/main.ts
index 23a70dc16661..541b0f2c69e1 100644
--- a/code/ui/.storybook/main.ts
+++ b/code/ui/.storybook/main.ts
@@ -50,6 +50,7 @@ const config: StorybookConfig = {
'@storybook/addon-essentials',
'@storybook/addon-interactions',
'@storybook/addon-storysource',
+ '@storybook/addon-designs',
],
framework: {
name: '@storybook/react-vite',
diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json
index 70b667de3e2c..9f264bba42f4 100644
--- a/code/ui/blocks/package.json
+++ b/code/ui/blocks/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/blocks",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Storybook Doc Blocks",
"keywords": [
"storybook"
@@ -43,17 +43,17 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
- "@storybook/channels": "7.1.0-beta.2",
- "@storybook/client-logger": "7.1.0-beta.2",
- "@storybook/components": "7.1.0-beta.2",
- "@storybook/core-events": "7.1.0-beta.2",
+ "@storybook/channels": "7.1.0-beta.3",
+ "@storybook/client-logger": "7.1.0-beta.3",
+ "@storybook/components": "7.1.0-beta.3",
+ "@storybook/core-events": "7.1.0-beta.3",
"@storybook/csf": "^0.1.0",
- "@storybook/docs-tools": "7.1.0-beta.2",
+ "@storybook/docs-tools": "7.1.0-beta.3",
"@storybook/global": "^5.0.0",
- "@storybook/manager-api": "7.1.0-beta.2",
- "@storybook/preview-api": "7.1.0-beta.2",
- "@storybook/theming": "7.1.0-beta.2",
- "@storybook/types": "7.1.0-beta.2",
+ "@storybook/manager-api": "7.1.0-beta.3",
+ "@storybook/preview-api": "7.1.0-beta.3",
+ "@storybook/theming": "7.1.0-beta.3",
+ "@storybook/types": "7.1.0-beta.3",
"@types/lodash": "^4.14.167",
"color-convert": "^2.0.1",
"dequal": "^2.0.2",
@@ -68,7 +68,7 @@
"util-deprecate": "^1.0.2"
},
"devDependencies": {
- "@storybook/addon-actions": "7.1.0-beta.2",
+ "@storybook/addon-actions": "7.1.0-beta.3",
"@types/color-convert": "^2.0.0"
},
"peerDependencies": {
diff --git a/code/ui/components/package.json b/code/ui/components/package.json
index 325c27e2a5b3..dfffc9695682 100644
--- a/code/ui/components/package.json
+++ b/code/ui/components/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/components",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Core Storybook Components",
"keywords": [
"storybook"
@@ -48,11 +48,11 @@
"prep": "../../../scripts/prepare/bundle.ts"
},
"dependencies": {
- "@storybook/client-logger": "7.1.0-beta.2",
+ "@storybook/client-logger": "7.1.0-beta.3",
"@storybook/csf": "^0.1.0",
"@storybook/global": "^5.0.0",
- "@storybook/theming": "7.1.0-beta.2",
- "@storybook/types": "7.1.0-beta.2",
+ "@storybook/theming": "7.1.0-beta.3",
+ "@storybook/types": "7.1.0-beta.3",
"memoizerific": "^1.11.3",
"use-resize-observer": "^9.1.0",
"util-deprecate": "^1.0.2"
diff --git a/code/ui/components/src/Zoom/ZoomElement.tsx b/code/ui/components/src/Zoom/ZoomElement.tsx
index e880637a30b7..8293d9a7f031 100644
--- a/code/ui/components/src/Zoom/ZoomElement.tsx
+++ b/code/ui/components/src/Zoom/ZoomElement.tsx
@@ -2,23 +2,13 @@ import type { ReactElement } from 'react';
import React, { useEffect, useRef, useState, useCallback } from 'react';
import useResizeObserver from 'use-resize-observer';
import { styled } from '@storybook/theming';
-import { browserSupportsCssZoom } from './browserSupportsCssZoom';
-
-const hasBrowserSupportForCssZoom = browserSupportsCssZoom();
const ZoomElementWrapper = styled.div<{ scale: number; elementHeight: number }>(
- ({ scale = 1, elementHeight }) =>
- hasBrowserSupportForCssZoom
- ? {
- '> *': {
- zoom: 1 / scale,
- },
- }
- : {
- height: elementHeight || 'auto',
- transformOrigin: 'top left',
- transform: `scale(${1 / scale})`,
- }
+ ({ scale = 1, elementHeight }) => ({
+ height: elementHeight || 'auto',
+ transformOrigin: 'top left',
+ transform: `scale(${1 / scale})`,
+ })
);
type ZoomProps = {
@@ -52,10 +42,7 @@ export function ZoomElement({ scale, children }: ZoomProps) {
return (
-
Figma Plugin
-Embed your stories into Figma to cross-reference the design and live implementation in one place.
- Learn more › +
+ 
+
-
+ Get support and chat with frontend developers.
+
+ Join Discord server
-
-
-
-# Explore and Connect
-
-Connect with our community on Discord or start contributing directly on Github. You might also be interesting in watching some videos on Youtube explaining how to take full advantage of Storybook.
-
-Accessibility
-Automatically test your components for a11y issues as you develop.
- Learn more › +
+ 
+
-
+ Watch tutorials, feature previews and interviews.
+
+ Watch on YouTube
- 
-
-Theming
-Theme Storybook's UI to personalize it to your project.
+
+ 
+
- Follow guided walkthroughs on for key workflows.
+ Learn more › + href="https://storybook.js.org/tutorials/" + target="_blank" + >Discover tutorials- -
-
diff --git a/code/lib/cli/rendererAssets/common/assets/accessibility.png b/code/lib/cli/rendererAssets/common/assets/accessibility.png
new file mode 100644
index 000000000000..6ffe6feabdc1
Binary files /dev/null and b/code/lib/cli/rendererAssets/common/assets/accessibility.png differ
diff --git a/code/lib/cli/rendererAssets/common/assets/accessibility.svg b/code/lib/cli/rendererAssets/common/assets/accessibility.svg
index 00efad3d0b7e..a3288830e348 100644
--- a/code/lib/cli/rendererAssets/common/assets/accessibility.svg
+++ b/code/lib/cli/rendererAssets/common/assets/accessibility.svg
@@ -2,4 +2,4 @@
+ {
setIframeInnerZoom(scale: number) {
try {
- if (browserSupportsCssZoom()) {
- Object.assign(this.iframe.contentDocument.body.style, {
- zoom: 1 / scale,
- minHeight: `calc(100vh / ${1 / scale})`,
- });
- } else {
- Object.assign(this.iframe.contentDocument.body.style, {
- width: `${scale * 100}%`,
- height: `${scale * 100}%`,
- transform: `scale(${1 / scale})`,
- transformOrigin: 'top left',
- });
- }
+ Object.assign(this.iframe.contentDocument.body.style, {
+ width: `${scale * 100}%`,
+ height: `${scale * 100}%`,
+ transform: `scale(${1 / scale})`,
+ transformOrigin: 'top left',
+ });
} catch (e) {
this.setIframeZoom(scale);
}
diff --git a/code/ui/components/src/Zoom/browserSupportsCssZoom.ts b/code/ui/components/src/Zoom/browserSupportsCssZoom.ts
deleted file mode 100644
index 43ff5b9004cf..000000000000
--- a/code/ui/components/src/Zoom/browserSupportsCssZoom.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export function browserSupportsCssZoom(): boolean {
- try {
- // First checks if Safari is being used, because Safari supports zoom, but it's buggy: https://developer.mozilla.org/en-US/docs/Web/CSS/zoom#browser_compatibility
- if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
- return false;
- }
-
- // Next check if the browser supports zoom styling
- return global.CSS?.supports('zoom: 1');
- } catch (error) {
- return false;
- }
-}
diff --git a/code/ui/components/src/clipboard/ClipboardCode.tsx b/code/ui/components/src/clipboard/ClipboardCode.tsx
new file mode 100644
index 000000000000..577a6674f5d4
--- /dev/null
+++ b/code/ui/components/src/clipboard/ClipboardCode.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { color, styled, typography } from '@storybook/theming';
+
+const Code = styled.pre`
+ line-height: 18px;
+ padding: 11px 1rem;
+ white-space: pre-wrap;
+ background: rgba(0, 0, 0, 0.05);
+ color: ${color.darkest};
+ border-radius: 3px;
+ margin: 1rem 0;
+ width: 100%;
+ display: block;
+ overflow: hidden;
+ font-family: ${typography.fonts.mono};
+ font-size: ${typography.size.s2 - 1}px;
+`;
+
+interface ClipboardCodeProps {
+ code: string;
+}
+
+export const ClipboardCode = ({ code, ...props }: ClipboardCodeProps) => (
+ ;
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ current: {
+ version: '7.0.1',
+ },
+ },
+ parameters: {
+ design: {
+ type: 'figma',
+ url: 'https://www.figma.com/file/ur4kydUbRqdDyfoZWzdiIw/Storybook-app?type=design&node-id=9564-120444&mode=design&t=0TPINZFpwgFQFQeX-4',
+ },
+ },
+};
diff --git a/code/ui/manager/src/settings/about.tsx b/code/ui/manager/src/settings/about.tsx
index fccd4ee15111..7fb70f5eae59 100644
--- a/code/ui/manager/src/settings/about.tsx
+++ b/code/ui/manager/src/settings/about.tsx
@@ -1,114 +1,160 @@
+/* eslint-disable no-nested-ternary */
import type { FC } from 'react';
-import React from 'react';
-import semver from 'semver';
+import React, { useState } from 'react';
import { styled } from '@storybook/theming';
import type { State } from '@storybook/manager-api';
-import { StorybookIcon, SyntaxHighlighter, DocumentWrapper } from '@storybook/components';
-
-import SettingsFooter from './SettingsFooter';
+import { Button as BaseButton, Icons, Link, StorybookIcon } from '@storybook/components';
const Header = styled.header(({ theme }) => ({
- marginBottom: 20,
- fontSize: theme.typography.size.m3,
+ marginBottom: 32,
+ fontSize: theme.typography.size.l2,
color: theme.base === 'light' ? theme.color.darkest : theme.color.lightest,
fontWeight: theme.typography.weight.bold,
alignItems: 'center',
display: 'flex',
'> svg': {
- height: 32,
+ height: 48,
width: 'auto',
marginRight: 8,
},
}));
-const UpdateMessage = styled.div<{ status: 'positive' | 'negative' | string }>(
- ({ status, theme }) => {
- if (status === 'positive') {
- return { background: theme.background.positive, color: theme.color.positiveText };
- }
- if (status === 'negative') {
- return { background: theme.background.negative, color: theme.color.negativeText };
- }
- return {
- background: theme.base === 'light' ? '#EAF3FC' : theme.color.darkest,
- color: theme.base === 'light' ? theme.color.darkest : theme.defaultText,
- };
- },
+const Container = styled.div({
+ display: `flex`,
+ alignItems: 'center',
+ justifyContent: 'center',
+ height: 'calc(100% - 40px)',
+ flexDirection: 'column',
+});
- ({ theme }) => ({
- fontWeight: theme.typography.weight.bold,
+const UpgradeBlock = styled.div(({ theme }) => {
+ return {
+ border: '1px solid',
+ borderRadius: 5,
+ padding: 20,
+ margin: 20,
+ marginTop: 0,
+ maxWidth: 400,
+ borderColor: theme.appBorderColor,
fontSize: theme.typography.size.s2,
- padding: '10px 20px',
- marginBottom: 24,
- borderRadius: theme.appBorderRadius,
- border: `1px solid ${theme.appBorderColor}`,
- textAlign: 'center',
- })
-);
+ };
+});
-const Upgrade = styled.div(({ theme }) => ({
- marginTop: 20,
- borderTop: `1px solid ${theme.appBorderColor}`,
+const Code = styled.pre(({ theme }) => ({
+ background: theme.base === 'light' ? 'rgba(0, 0, 0, 0.05)' : theme.appBorderColor,
+ fontSize: theme.typography.size.s2 - 1,
+ margin: '4px 0 16px',
}));
-const Container = styled.div({
- padding: `3rem 20px`,
- maxWidth: 600,
- margin: '0 auto',
-});
+const Footer = styled.div(({ theme }) => ({
+ marginBottom: 24,
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ color: theme.base === 'light' ? theme.color.dark : theme.color.lightest,
+ fontWeight: theme.typography.weight.regular,
+ fontSize: theme.typography.size.s2,
+}));
-const AboutScreen: FC<{
- latest: State['versions']['latest'];
- current: State['versions']['current'];
-}> = ({ latest = null, current }) => {
- const canUpdate = latest && semver.gt(latest.version, current.version);
+const SquareButton = styled(BaseButton)(({ theme }) => ({
+ '&&': {
+ borderRadius: 4,
+ fontSize: '13px',
+ lineHeight: '14px',
+ color: theme.base === 'light' ? theme.color.darker : theme.color.lightest,
+ padding: '9px 12px',
+ svg: {
+ marginRight: 6,
+ },
+ },
+}));
+
+const TabButton = styled(BaseButton)<{ active: boolean }>(({ theme, active }) => ({
+ '&&': {
+ padding: 2,
+ paddingRight: 8,
+ margin: 0,
+ color: active
+ ? theme.color.secondary
+ : theme.base === 'light'
+ ? theme.color.dark
+ : theme.color.lightest,
+ },
+}));
- let updateMessage;
- if (latest) {
- if (canUpdate) {
- updateMessage = (
-
- Storybook {latest.version} is available. Upgrade from {current.version} now.
-
- );
- } else {
- updateMessage = (
- Looking good! You're up to date.
- );
- }
- } else {
- updateMessage = (
-
- Oops! The latest version of Storybook couldn't be fetched.
-
- );
- }
+const StyledLink = styled(Link as any)(({ theme }) => ({
+ '&&': {
+ fontWeight: theme.typography.weight.bold,
+ color: theme.base === 'light' ? theme.color.dark : theme.color.light,
+ },
+ '&:hover': {
+ color: theme.base === 'light' ? theme.color.darkest : theme.color.lightest,
+ },
+}));
+const AboutScreen: FC<{
+ current: State['versions']['current'];
+ onNavigateToWhatsNew?: () => void;
+}> = ({ current, onNavigateToWhatsNew }) => {
+ const [activeTab, setActiveTab] = useState<'npm' | 'pnpm'>('npm');
return (
+
-
+
+ You are on Storybook {current.version}
+
- {canUpdate && (
-
-
-
- npx storybook@latest upgrade
-
-
-
- )}
+
+
);
};
diff --git a/code/ui/manager/src/settings/about_page.tsx b/code/ui/manager/src/settings/about_page.tsx
index 34640957ad18..e20d89d5362a 100644
--- a/code/ui/manager/src/settings/about_page.tsx
+++ b/code/ui/manager/src/settings/about_page.tsx
@@ -1,7 +1,7 @@
import type { FC } from 'react';
-import React, { Component } from 'react';
+import React, { Component, useCallback } from 'react';
-import { type API, useStorybookApi } from '@storybook/manager-api';
+import { type API, useStorybookApi, useStorybookState } from '@storybook/manager-api';
import { AboutScreen } from './about';
@@ -20,10 +20,19 @@ class NotificationClearer extends Component<{ api: API; notificationId: string }
const AboutPage: FC = () => {
const api = useStorybookApi();
+ const state = useStorybookState();
+ const onNavigateToWhatsNew = useCallback(() => {
+ api.changeSettingsTab('whats-new');
+ }, [api]);
return (
-
);
};
diff --git a/code/ui/manager/src/settings/whats_new.tsx b/code/ui/manager/src/settings/whats_new.tsx
index a033f3b7ffe9..3d0569129917 100644
--- a/code/ui/manager/src/settings/whats_new.tsx
+++ b/code/ui/manager/src/settings/whats_new.tsx
@@ -1,8 +1,9 @@
-import type { FC, ComponentProps } from 'react';
-import React, { useEffect, useState, Fragment } from 'react';
-import { styled } from '@storybook/theming';
-import { Icons, Loader } from '@storybook/components';
-import { useStorybookApi } from '@storybook/manager-api';
+import type { ComponentProps, FC } from 'react';
+import React, { Fragment, useEffect, useState } from 'react';
+import { styled, useTheme } from '@storybook/theming';
+import { Button, IconButton, Icons, Loader } from '@storybook/components';
+import { useStorybookApi, useStorybookState } from '@storybook/manager-api';
+import { global } from '@storybook/global';
const Centered = styled.div({
top: '50%',
@@ -26,6 +27,74 @@ const Message = styled.div(({ theme }) => ({
lineHeight: `16px`,
}));
+const Container = styled.div(({ theme }) => ({
+ position: 'absolute',
+ width: '100%',
+ bottom: '40px',
+ background: theme.background.bar,
+ fontSize: `13px`,
+ borderTop: '1px solid',
+ borderColor: theme.appBorderColor,
+ padding: '8px 12px',
+ display: 'flex',
+ justifyContent: 'space-between',
+}));
+
+const ToggleNotificationButton = styled(IconButton)(({ theme }) => ({
+ fontWeight: theme.typography.weight.regular,
+ color: theme.color.mediumdark,
+ margin: 0,
+}));
+
+const CopyButton = styled(Button)(() => ({
+ margin: 0,
+ padding: 0,
+ borderRadius: 0,
+}));
+
+export const WhatsNewFooter = ({
+ isNotificationsEnabled,
+ onToggleNotifications,
+ onCopyLink,
+}: {
+ isNotificationsEnabled: boolean;
+ onToggleNotifications?: () => void;
+ onCopyLink?: () => void;
+}) => {
+ const theme = useTheme();
+ const [copyText, setCopyText] = useState('Copy Link');
+ const copyLink = () => {
+ onCopyLink();
+ setCopyText('Copied!');
+ setTimeout(() => setCopyText('Copy Link'), 4000);
+ };
+
+ return (
+
+
+ {isNotificationsEnabled ? (
+ <>
+
+
+ );
+};
+
const Iframe = styled.iframe<{ isLoaded: boolean }>(
{
position: 'absolute',
@@ -37,7 +106,7 @@ const Iframe = styled.iframe<{ isLoaded: boolean }>(
margin: 0,
padding: 0,
width: '100%',
- height: '100%',
+ height: 'calc(100% - 80px)',
},
({ isLoaded }) => ({ visibility: isLoaded ? 'visible' : 'hidden' })
);
@@ -72,25 +141,43 @@ export interface WhatsNewProps {
isLoaded: boolean;
onLoad: () => void;
url?: string;
+ isNotificationsEnabled: boolean;
+ onCopyLink?: () => void;
+ onToggleNotifications?: () => void;
}
-const PureWhatsNewScreen: FC = ({ didHitMaxWaitTime, isLoaded, onLoad, url }) => (
+const PureWhatsNewScreen: FC = ({
+ didHitMaxWaitTime,
+ isLoaded,
+ onLoad,
+ url,
+ onCopyLink,
+ onToggleNotifications,
+ isNotificationsEnabled,
+}) => (
{!isLoaded && !didHitMaxWaitTime &&
);
const MAX_WAIT_TIME = 10000; // 10 seconds
-const WhatsNewScreen: FC> = ({
- url,
-}) => {
+const WhatsNewScreen: FC = () => {
const api = useStorybookApi();
+ const state = useStorybookState();
+ const { whatsNewData } = state;
const [isLoaded, setLoaded] = useState(false);
const [didHitMaxWaitTime, setDidHitMaxWaitTime] = useState(false);
@@ -99,6 +186,10 @@ const WhatsNewScreen: FC clearTimeout(timer);
}, [isLoaded]);
+ if (whatsNewData?.status !== 'SUCCESS') return null;
+
+ const isNotificationsEnabled = !whatsNewData.disableWhatsNewNotifications;
+
return (
{
+ navigator.clipboard?.writeText(whatsNewData.blogUrl ?? whatsNewData.url);
+ }}
+ onToggleNotifications={() => {
+ if (isNotificationsEnabled) {
+ if (global.confirm('All update notifications will no longer be shown. Are you sure?')) {
+ api.toggleWhatsNewNotifications();
+ }
+ } else {
+ api.toggleWhatsNewNotifications();
+ }
+ }}
/>
);
};
diff --git a/code/ui/manager/src/settings/whats_new_footer.stories.tsx b/code/ui/manager/src/settings/whats_new_footer.stories.tsx
new file mode 100644
index 000000000000..8815eb0ec1c2
--- /dev/null
+++ b/code/ui/manager/src/settings/whats_new_footer.stories.tsx
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { WhatsNewFooter } from './whats_new';
+
+const meta = {
+ component: WhatsNewFooter,
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ isNotificationsEnabled: false,
+ },
+ parameters: {
+ design: {
+ type: 'figma',
+ url: 'https://www.figma.com/file/ur4kydUbRqdDyfoZWzdiIw/Storybook-app?type=design&node-id=9562-117308&mode=design&t=dJUhQrYPI3PCqPg2-4',
+ },
+ },
+};
diff --git a/code/ui/manager/src/settings/whats_new_page.tsx b/code/ui/manager/src/settings/whats_new_page.tsx
index 53f436481043..9aa4f776db89 100644
--- a/code/ui/manager/src/settings/whats_new_page.tsx
+++ b/code/ui/manager/src/settings/whats_new_page.tsx
@@ -1,17 +1,10 @@
-import { useStorybookState } from '@storybook/manager-api';
import type { FC } from 'react';
import React from 'react';
import { WhatsNewScreen } from './whats_new';
const WhatsNewPage: FC = () => {
- const state = useStorybookState();
-
- return (
-
{children}
diff --git a/code/ui/components/src/Zoom/ZoomIFrame.tsx b/code/ui/components/src/Zoom/ZoomIFrame.tsx
index 255a39c414b5..3101364bd861 100644
--- a/code/ui/components/src/Zoom/ZoomIFrame.tsx
+++ b/code/ui/components/src/Zoom/ZoomIFrame.tsx
@@ -1,6 +1,5 @@
import type { RefObject, ReactElement } from 'react';
import { Component } from 'react';
-import { browserSupportsCssZoom } from './browserSupportsCssZoom';
export type IZoomIFrameProps = {
scale: number;
@@ -36,19 +35,12 @@ export class ZoomIFrame extends Component
+ {code}
+
+);
diff --git a/code/ui/components/src/index.ts b/code/ui/components/src/index.ts
index c654094f1b61..292a9c7067dd 100644
--- a/code/ui/components/src/index.ts
+++ b/code/ui/components/src/index.ts
@@ -26,7 +26,6 @@ export { Span } from './typography/elements/Span';
export { Table } from './typography/elements/Table';
export { TT } from './typography/elements/TT';
export { UL } from './typography/elements/UL';
-
export { Badge } from './Badge/Badge';
// Typography
@@ -85,6 +84,8 @@ export * from './typography/ResetWrapper';
export { withReset, codeCommon } from './typography/lib/common';
+export { ClipboardCode } from './clipboard/ClipboardCode';
+
// eslint-disable-next-line prefer-destructuring
export const components = typography.components;
diff --git a/code/ui/manager/package.json b/code/ui/manager/package.json
index b23ddccb7d87..113af1c66eed 100644
--- a/code/ui/manager/package.json
+++ b/code/ui/manager/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/manager",
- "version": "7.1.0-beta.2",
+ "version": "7.1.0-beta.3",
"description": "Core Storybook UI",
"keywords": [
"storybook"
@@ -51,18 +51,19 @@
},
"devDependencies": {
"@fal-works/esbuild-plugin-global-externals": "^2.1.2",
- "@storybook/addons": "7.1.0-beta.2",
- "@storybook/api": "7.1.0-beta.2",
- "@storybook/channel-postmessage": "7.1.0-beta.2",
- "@storybook/channels": "7.1.0-beta.2",
- "@storybook/client-logger": "7.1.0-beta.2",
- "@storybook/components": "7.1.0-beta.2",
- "@storybook/core-events": "7.1.0-beta.2",
+ "@storybook/addon-designs": "^7.0.0",
+ "@storybook/addons": "7.1.0-beta.3",
+ "@storybook/api": "7.1.0-beta.3",
+ "@storybook/channel-postmessage": "7.1.0-beta.3",
+ "@storybook/channels": "7.1.0-beta.3",
+ "@storybook/client-logger": "7.1.0-beta.3",
+ "@storybook/components": "7.1.0-beta.3",
+ "@storybook/core-events": "7.1.0-beta.3",
"@storybook/global": "^5.0.0",
- "@storybook/manager-api": "7.1.0-beta.2",
- "@storybook/router": "7.1.0-beta.2",
- "@storybook/theming": "7.1.0-beta.2",
- "@storybook/types": "7.1.0-beta.2",
+ "@storybook/manager-api": "7.1.0-beta.3",
+ "@storybook/router": "7.1.0-beta.3",
+ "@storybook/theming": "7.1.0-beta.3",
+ "@storybook/types": "7.1.0-beta.3",
"@testing-library/react": "^11.2.2",
"@types/semver": "^7.3.4",
"copy-to-clipboard": "^3.3.1",
diff --git a/code/ui/manager/src/components/sidebar/Menu.stories.tsx b/code/ui/manager/src/components/sidebar/Menu.stories.tsx
index acf071da57ce..f9e743a6d84d 100644
--- a/code/ui/manager/src/components/sidebar/Menu.stories.tsx
+++ b/code/ui/manager/src/components/sidebar/Menu.stories.tsx
@@ -1,11 +1,11 @@
+import type { ComponentProps } from 'react';
import React from 'react';
import { expect } from '@storybook/jest';
import type { Meta, StoryObj } from '@storybook/react';
-import type { ComponentProps } from 'react';
import { TooltipLinkList } from '@storybook/components';
import { styled } from '@storybook/theming';
-import { within, userEvent, screen } from '@storybook/testing-library';
+import { screen, userEvent, within } from '@storybook/testing-library';
import type { State } from '@storybook/manager-api';
import { SidebarMenu, ToolbarMenu } from './Menu';
import { useMenu } from '../../containers/menu';
@@ -46,9 +46,8 @@ const DoubleThemeRenderingHack = styled.div({
export const Expanded: Story = {
render: () => {
- window.FEATURES.whatsNewNotifications = true;
const menu = useMenu(
- { whatsNewData: { status: 'SUCCESS' } } as State,
+ { whatsNewData: { status: 'SUCCESS', disableWhatsNewNotifications: false } } as State,
{
// @ts-expect-error (Converted from ts-ignore)
getShortcutKeys: () => ({}),
diff --git a/code/ui/manager/src/containers/menu.tsx b/code/ui/manager/src/containers/menu.tsx
index 6d5272ad8fd6..a387cb24d5f3 100644
--- a/code/ui/manager/src/containers/menu.tsx
+++ b/code/ui/manager/src/containers/menu.tsx
@@ -5,7 +5,6 @@ import { Badge, Icons } from '@storybook/components';
import type { API, State } from '@storybook/manager-api';
import { shortcutToHumanString } from '@storybook/manager-api';
import { styled, useTheme } from '@storybook/theming';
-import { global } from '@storybook/global';
const focusableUIElements = {
storySearchField: 'storybook-explorer-searchfield',
@@ -69,7 +68,8 @@ export const useMenu = (
[api]
);
- const whatsNewNotificationsEnabled = global.FEATURES.whatsNewNotifications;
+ const whatsNewNotificationsEnabled =
+ state.whatsNewData?.status === 'SUCCESS' && !state.disableWhatsNewNotifications;
const isWhatsNewUnread = api.isWhatsNewUnread();
const whatsNew = useMemo(
() => ({
diff --git a/code/ui/manager/src/containers/sidebar.tsx b/code/ui/manager/src/containers/sidebar.tsx
index 6a9b606e2db4..86b9cb71ac6b 100755
--- a/code/ui/manager/src/containers/sidebar.tsx
+++ b/code/ui/manager/src/containers/sidebar.tsx
@@ -3,7 +3,6 @@ import React from 'react';
import type { Combo, StoriesHash } from '@storybook/manager-api';
import { Consumer } from '@storybook/manager-api';
-import { global } from '@storybook/global';
import { Sidebar as SidebarComponent } from '../components/sidebar/Sidebar';
import { useMenu } from './menu';
@@ -33,6 +32,9 @@ const Sidebar = React.memo(function Sideber() {
enableShortcuts
);
+ const whatsNewNotificationsEnabled =
+ state.whatsNewData?.status === 'SUCCESS' && !state.disableWhatsNewNotifications;
+
return {
title: name,
url,
@@ -44,7 +46,7 @@ const Sidebar = React.memo(function Sideber() {
refId,
viewMode,
menu,
- menuHighlighted: global.FEATURES.whatsNewNotifications && api.isWhatsNewUnread(),
+ menuHighlighted: whatsNewNotificationsEnabled && api.isWhatsNewUnread(),
enableShortcuts,
};
};
diff --git a/code/ui/manager/src/globals/exports.ts b/code/ui/manager/src/globals/exports.ts
index 0e8fa703c97a..43b7c50f5191 100644
--- a/code/ui/manager/src/globals/exports.ts
+++ b/code/ui/manager/src/globals/exports.ts
@@ -54,6 +54,7 @@ export default {
'Bar',
'Blockquote',
'Button',
+ 'ClipboardCode',
'Code',
'DL',
'Div',
@@ -162,6 +163,7 @@ export default {
'STORY_SPECIFIED',
'STORY_THREW_EXCEPTION',
'STORY_UNCHANGED',
+ 'TOGGLE_WHATS_NEW_NOTIFICATIONS',
'UPDATE_GLOBALS',
'UPDATE_QUERY_PARAMS',
'UPDATE_STORY_ARGS',
diff --git a/code/ui/manager/src/settings/about.stories.jsx b/code/ui/manager/src/settings/about.stories.jsx
deleted file mode 100644
index 7bb06a45ad0b..000000000000
--- a/code/ui/manager/src/settings/about.stories.jsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react';
-import { actions as createActions } from '@storybook/addon-actions';
-
-import { AboutScreen } from './about';
-
-const info = {
- plain: `- upgrade webpack & babel to latest\n- new addParameters and third argument to .add to pass data to addons\n- added the ability to theme storybook\n- improved ui for mobile devices\n- improved performance of addon-knobs`,
-};
-
-export default {
- component: AboutScreen,
- title: 'Settings/AboutScreen',
- decorators: [
- (storyFn) => (
-
- {storyFn()}
-
- ),
- ],
-};
-
-const actions = createActions('onClose');
-
-export const UpToDate = () => (
-
+
+ ),
+ ],
+} satisfies MetaRun the following script to check for updates and upgrade to the latest version.
+
+ setActiveTab('npm')}>
+ npm
+
+ setActiveTab('pnpm')}>
+ pnpm
+
+
- {updateMessage}
+
+ {activeTab === 'npm'
+ ? 'npx storybook@latest upgrade'
+ : 'pnpm dlx storybook@latest upgrade'}
+
+ {onNavigateToWhatsNew && (
+ // eslint-disable-next-line jsx-a11y/anchor-is-valid
+ See what's new in Storybook
+ )}
+ - Upgrade all Storybook packages to latest: -
-
+
+ {copyText}
+
+
+ Share this with your team.
+