From 1f1361732e874cebd494f98bfebf4636be99ee2e Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Fri, 7 Jul 2023 20:27:15 +0100
Subject: [PATCH] Merge pull request #23360 from
 storybookjs/chore_docs_addon_design_changes

Docs: Addon designs updates for 7.0
(cherry picked from commit 40cb40e52b563d5ce17cf99ae359bf3f7301025d)
---
 docs/sharing/design-integrations.md             |  7 +------
 .../storybook-figma-addon-install.npm.js.mdx    |  2 +-
 .../storybook-figma-addon-install.pnpm.js.mdx   |  2 +-
 .../storybook-figma-addon-install.yarn.js.mdx   |  2 +-
 .../storybook-main-figma-addon-register.js.mdx  |  4 ++--
 .../storybook-main-figma-addon-register.ts.mdx  | 17 +++++++++++++++++
 6 files changed, 23 insertions(+), 11 deletions(-)
 create mode 100644 docs/snippets/common/storybook-main-figma-addon-register.ts.mdx

diff --git a/docs/sharing/design-integrations.md b/docs/sharing/design-integrations.md
index 1ce35fa81d05..cf2e5ac4934c 100644
--- a/docs/sharing/design-integrations.md
+++ b/docs/sharing/design-integrations.md
@@ -75,12 +75,6 @@ Run the following command to install the addon.
 
 <!-- prettier-ignore-end -->
 
-<div class="aside">
-
-ℹ️ This addon is still being converted to fully support Storybook 7.0. If you're adding this addon to a Storybook 7.0 instance or migrating from a previous version, you must install the `beta` version.
-
-</div>
-
 Update your Storybook configuration (in `.storybook/main.js|ts`) to include the addon.
 
 <!-- prettier-ignore-start -->
@@ -88,6 +82,7 @@ Update your Storybook configuration (in `.storybook/main.js|ts`) to include the
 <CodeSnippets
   paths={[
     'common/storybook-main-figma-addon-register.js.mdx',
+    'common/storybook-main-figma-addon-register.ts.mdx',
   ]}
 />
 
diff --git a/docs/snippets/common/storybook-figma-addon-install.npm.js.mdx b/docs/snippets/common/storybook-figma-addon-install.npm.js.mdx
index b09592930ccc..8b4450fcfbeb 100644
--- a/docs/snippets/common/storybook-figma-addon-install.npm.js.mdx
+++ b/docs/snippets/common/storybook-figma-addon-install.npm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
-npm install --save-dev storybook-addon-designs@beta
+npm install --save-dev @storybook/addon-designs
 ```
diff --git a/docs/snippets/common/storybook-figma-addon-install.pnpm.js.mdx b/docs/snippets/common/storybook-figma-addon-install.pnpm.js.mdx
index deac368cc436..84611d606fb0 100644
--- a/docs/snippets/common/storybook-figma-addon-install.pnpm.js.mdx
+++ b/docs/snippets/common/storybook-figma-addon-install.pnpm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
-pnpm add --save-dev storybook-addon-designs@beta
+pnpm add --save-dev @storybook/addon-designs
 ```
diff --git a/docs/snippets/common/storybook-figma-addon-install.yarn.js.mdx b/docs/snippets/common/storybook-figma-addon-install.yarn.js.mdx
index 98c343b260ca..188862d539f0 100644
--- a/docs/snippets/common/storybook-figma-addon-install.yarn.js.mdx
+++ b/docs/snippets/common/storybook-figma-addon-install.yarn.js.mdx
@@ -1,3 +1,3 @@
 ```shell
-yarn add --dev storybook-addon-designs@beta
+yarn add --dev @storybook/addon-designs
 ```
diff --git a/docs/snippets/common/storybook-main-figma-addon-register.js.mdx b/docs/snippets/common/storybook-main-figma-addon-register.js.mdx
index 751be2a42985..9245d4875bac 100644
--- a/docs/snippets/common/storybook-main-figma-addon-register.js.mdx
+++ b/docs/snippets/common/storybook-main-figma-addon-register.js.mdx
@@ -1,11 +1,11 @@
 ```js
-// .storybook/main.js|ts
+// .storybook/main.js
 
 export default {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     // Other Storybook addons
-    'storybook-addon-designs', // 👈 Addon is registered here
+    '@storybook/addon-designs', // 👈 Addon is registered here
   ],
 };
 ```
diff --git a/docs/snippets/common/storybook-main-figma-addon-register.ts.mdx b/docs/snippets/common/storybook-main-figma-addon-register.ts.mdx
new file mode 100644
index 000000000000..be1188d84598
--- /dev/null
+++ b/docs/snippets/common/storybook-main-figma-addon-register.ts.mdx
@@ -0,0 +1,17 @@
+```ts
+// .storybook/main.ts
+
+// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+import type { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    // Other Storybook addons
+    '@storybook/addon-designs', // 👈 Addon is registered here
+  ],
+};
+
+export default config;
+```