Merge pull request #23360 from storybookjs/chore_docs_addon_design_ch…

…anges

Docs: Addon designs updates for 7.0
(cherry picked from commit 40cb40e)

docs/sharing/design-integrations.md

@@ -75,19 +75,14 @@ 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 -->
 
 <CodeSnippets
   paths={[
     'common/storybook-main-figma-addon-register.js.mdx',
+    'common/storybook-main-figma-addon-register.ts.mdx',
   ]}
 />
 

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
 ```

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
 ```

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
 ```

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
   ],
 };
 ```

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;
+```