chore: rename package from react-storybook-addon-codesandbox to react-storybook-addon-export-to-sandbox

.github/CODEOWNERS

@@ -236,7 +236,7 @@ packages/react-components/react-datepicker-compat @microsoft/cxe-red @sopranopil
 packages/react-components/react-migration-v8-v9 @microsoft/cxe-red @geoffcoxmsft
 packages/react-components/react-breadcrumb-preview @microsoft/cxe-prg
 packages/react-components/react-drawer @microsoft/cxe-prg @marcosmoura
-packages/react-components/react-storybook-addon-codesandbox @microsoft/fluentui-react-build
+packages/react-components/react-storybook-addon-export-to-sandbox @microsoft/fluentui-react-build
 packages/react-components/babel-preset-storybook-full-source @microsoft/fluentui-react-build
 packages/react-components/react-jsx-runtime @microsoft/teams-prg
 packages/react-components/react-toast @microsoft/teams-prg

.storybook/main.js

@@ -64,7 +64,7 @@ module.exports = /** @type {Omit<StorybookConfig,'typescript'|'babel'>} */ ({
 
     /**  @see ../packages/react-components/react-storybook-addon */
     loadWorkspaceAddon('@fluentui/react-storybook-addon', { tsConfigPath }),
-    loadWorkspaceAddon('@fluentui/react-storybook-addon-codesandbox', { tsConfigPath }),
+    loadWorkspaceAddon('@fluentui/react-storybook-addon-export-to-sandbox', { tsConfigPath }),
   ],
   webpackFinal: config => {
     registerTsPaths({ config, configFile: tsConfigPath });

.storybook/preview.js

@@ -1,9 +1,9 @@
 import 'cypress-storybook/react';
 import './docs-root.css';
-import '../packages/react-components/react-storybook-addon-codesandbox/src/styles.css';
+import '../packages/react-components/react-storybook-addon-export-to-sandbox/src/styles.css';
 import { withLinks } from '@storybook/addon-links';
 
-/** @typedef {import('../packages/react-components/react-storybook-addon-codesandbox/src/public-types').ParametersExtension & import('@storybook/addons').Parameters} Parameters */
+/** @typedef {import('../packages/react-components/react-storybook-addon-export-to-sandbox/src/public-types').ParametersExtension & import('@storybook/addons').Parameters} Parameters */
 
 // This patches globals set up by cypress-storybook to work around its usage of the deprecated
 // forceReRender API that no longer works with storyStoreV7

apps/public-docsite-v9/package.json

@@ -33,7 +33,7 @@
     "@fluentui/react-icons-northstar": "*",
     "@fluentui/react-components": "*",
     "@fluentui/react-storybook-addon": "*",
-    "@fluentui/react-storybook-addon-codesandbox": "*",
+    "@fluentui/react-storybook-addon-export-to-sandbox": "*",
     "@fluentui/theme-designer": "*",
     "@fluentui/react-search-preview": "*",
     "@fluentui/react-motion-preview": "*",

apps/recipes-react-components/package.json

@@ -21,7 +21,7 @@
     "@fluentui/react-theme": "*",
     "@fluentui/react-provider": "*",
     "@fluentui/react-storybook-addon": "*",
-    "@fluentui/react-storybook-addon-codesandbox": "*",
+    "@fluentui/react-storybook-addon-export-to-sandbox": "*",
     "@griffel/react": "^1.5.14",
     "react": "17.0.2",
     "react-dom": "17.0.2",

apps/vr-tests-react-components/package.json

@@ -57,7 +57,7 @@
     "@fluentui/react-spinner": "*",
     "@fluentui/react-spinbutton": "*",
     "@fluentui/react-storybook-addon": "*",
-    "@fluentui/react-storybook-addon-codesandbox": "*",
+    "@fluentui/react-storybook-addon-export-to-sandbox": "*",
     "@fluentui/react-switch": "*",
     "@fluentui/react-table": "*",
     "@fluentui/react-tabs": "*",

packages/react-components/react-storybook-addon-export-to-sandbox/README.md

@@ -0,0 +1,7 @@
+# react-components-react-storybook-addon-export-to-sandbox
+
+**React Storybook Addon Export To Sandbox for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
+
+Storybook addon that enables codesandbox or stackblitz exports for stories within Storybook Docs mode.
+
+TODO: Add more details!

packages/react-components/react-storybook-addon-codesandbox/etc/react-storybook-addon-codesandbox.api.md → packages/react-components/react-storybook-addon-export-to-sandbox/etc/react-storybook-addon-export-to-sandbox.api.md

@@ -1,9 +1,7 @@
-## API Report File for "@fluentui/react-storybook-addon-codesandbox"
+## API Report File for "@fluentui/react-storybook-addon-export-to-sandbox"
 
 > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
 
 ```ts
-
 // (No @packageDocumentation comment for this package)
-
 ```

packages/react-components/react-storybook-addon-codesandbox/jest.config.js → packages/react-components/react-storybook-addon-export-to-sandbox/jest.config.js

@@ -4,7 +4,7 @@
  * @type {import('@jest/types').Config.InitialOptions}
  */
 module.exports = {
-  displayName: 'react-storybook-addon-codesandbox',
+  displayName: 'react-storybook-addon-export-to-sandbox',
   preset: '../../../jest.preset.js',
   transform: {
     '^.+\\.tsx?$': [

packages/react-components/react-storybook-addon-codesandbox/package.json → packages/react-components/react-storybook-addon-export-to-sandbox/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "@fluentui/react-storybook-addon-codesandbox",
+  "name": "@fluentui/react-storybook-addon-export-to-sandbox",
   "version": "0.1.0",
-  "description": "Storybook addon that enables codesandbox exports for stories",
+  "description": "Storybook addon that enables cloud/web sandbox exports for stories doc mode code examples",
   "private": true,
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",

packages/react-components/react-storybook-addon-codesandbox/project.json → packages/react-components/react-storybook-addon-export-to-sandbox/project.json

@@ -1,8 +1,8 @@
 {
-  "name": "@fluentui/react-storybook-addon-codesandbox",
+  "name": "@fluentui/react-storybook-addon-export-to-sandbox",
   "$schema": "../../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
   "implicitDependencies": [],
-  "sourceRoot": "packages/react-components/react-storybook-addon-codesandbox/src",
+  "sourceRoot": "packages/react-components/react-storybook-addon-export-to-sandbox/src",
   "tags": ["vNext", "platform:web"]
 }

packages/react-components/react-storybook-addon-export-to-sandbox/src/decorators/with-export-to-sandbox-button.ts

@@ -0,0 +1,14 @@
+import { useEffect } from '@storybook/addons';
+import { addDemoActionButton } from '../sandbox-factory';
+
+import { StoryContext } from '../types';
+
+export const withExportToSandboxButton = (storyFn: (context: StoryContext) => JSX.Element, context: StoryContext) => {
+  useEffect(() => {
+    if (context.viewMode === 'docs') {
+      addDemoActionButton(context);
+    }
+  }, [context]);
+
+  return storyFn(context);
+};

packages/react-components/react-storybook-addon-codesandbox/src/getDependencies.ts → packages/react-components/react-storybook-addon-export-to-sandbox/src/getDependencies.ts

@@ -15,7 +15,7 @@ function matchAll(str: string, re: RegExp) {
 /**
  *
  * @param fileContent - code
- * @param requiredDependencies - dependencies that will always be incldued in package.json
+ * @param requiredDependencies - dependencies that will always be included in package.json
  * @param optionalDependencies - whose versions will override those found in the code
  * @returns - Map of dependencies and their versions to include in package.json
  */

packages/react-components/react-storybook-addon-export-to-sandbox/src/preset/preview.ts

@@ -0,0 +1,3 @@
+import { withExportToSandboxButton } from '../decorators/with-export-to-sandbox-button';
+
+export const decorators = [withExportToSandboxButton];

packages/react-components/theme-designer/package.json

@@ -36,7 +36,7 @@
     "@fluentui/react-components": "^9.36.0",
     "@fluentui/react-context-selector": "^9.1.41",
     "@fluentui/react-icons": "^2.0.217",
-    "@fluentui/react-storybook-addon-codesandbox": "^0.1.0",
+    "@fluentui/react-storybook-addon-export-to-sandbox": "^0.1.0",
     "@fluentui/react-theme": "^9.1.14",
     "@fluentui/react-utilities": "^9.15.1",
     "@griffel/react": "^1.5.14",

scripts/storybook/src/utils.js

@@ -158,7 +158,7 @@ function _createCodesandboxRule(allPackageInfo = getAllPackageInfo()) {
     const excludePackages = [
       '@fluentui/babel-preset-storybook-full-source',
       '@fluentui/react-storybook-addon',
-      '@fluentui/react-storybook-addon-codesandbox',
+      '@fluentui/react-storybook-addon-export-to-sandbox',
       '@fluentui/react-conformance-griffel',
     ];
 

tsconfig.base.all.json

@@ -112,6 +112,7 @@
       "@fluentui/react-focus-management": ["packages/react-focus-management/src/index.ts"],
       "@fluentui/react-image": ["packages/react-components/react-image/src/index.ts"],
       "@fluentui/react-infobutton": ["packages/react-components/react-infobutton/src/index.ts"],
+      "@fluentui/react-infolabel": ["packages/react-components/react-infolabel/src/index.ts"],
       "@fluentui/react-input": ["packages/react-components/react-input/src/index.ts"],
       "@fluentui/react-jsx-runtime": ["packages/react-components/react-jsx-runtime/src/index.ts"],
       "@fluentui/react-jsx-runtime/jsx-dev-runtime": [
@@ -144,8 +145,8 @@
       "@fluentui/react-spinbutton": ["packages/react-components/react-spinbutton/src/index.ts"],
       "@fluentui/react-spinner": ["packages/react-components/react-spinner/src/index.ts"],
       "@fluentui/react-storybook-addon": ["packages/react-components/react-storybook-addon/src/index.ts"],
-      "@fluentui/react-storybook-addon-codesandbox": [
-        "packages/react-components/react-storybook-addon-codesandbox/src/index.ts"
+      "@fluentui/react-storybook-addon-export-to-sandbox": [
+        "packages/react-components/react-storybook-addon-export-to-sandbox/src/index.ts"
       ],
       "@fluentui/react-swatch-picker-preview": ["packages/react-components/react-swatch-picker-preview/src/index.ts"],
       "@fluentui/react-switch": ["packages/react-components/react-switch/src/index.ts"],
@@ -168,8 +169,7 @@
       "@fluentui/react-virtualizer": ["packages/react-components/react-virtualizer/src/index.ts"],
       "@fluentui/theme-designer": ["packages/react-components/theme-designer/src/index.ts"],
       "@fluentui/tokens": ["packages/tokens/src/index.ts"],
-      "@fluentui/workspace-plugin": ["tools/workspace-plugin/src/index.ts"],
-      "@fluentui/react-infolabel": ["packages/react-components/react-infolabel/src/index.ts"]
+      "@fluentui/workspace-plugin": ["tools/workspace-plugin/src/index.ts"]
     }
   }
 }

tsconfig.base.json

@@ -80,8 +80,8 @@
       "@fluentui/react-spinbutton": ["packages/react-components/react-spinbutton/src/index.ts"],
       "@fluentui/react-spinner": ["packages/react-components/react-spinner/src/index.ts"],
       "@fluentui/react-storybook-addon": ["packages/react-components/react-storybook-addon/src/index.ts"],
-      "@fluentui/react-storybook-addon-codesandbox": [
-        "packages/react-components/react-storybook-addon-codesandbox/src/index.ts"
+      "@fluentui/react-storybook-addon-export-to-sandbox": [
+        "packages/react-components/react-storybook-addon-export-to-sandbox/src/index.ts"
       ],
       "@fluentui/react-swatch-picker-preview": ["packages/react-components/react-swatch-picker-preview/src/index.ts"],
       "@fluentui/react-switch": ["packages/react-components/react-switch/src/index.ts"],