feat: port codesandbox addon

.storybook/docs-root.css

@@ -174,7 +174,7 @@
   }
 }
 
-/* Make storybook-addon-export-to-codesandbox button match Figma design */
+/* Make storybook codesandbox export button match Figma design */
 .docs-story .with-code-sandbox-button {
   right: 105px !important;
 }

.storybook/main.js

@@ -60,13 +60,11 @@ module.exports = /** @type {Omit<StorybookConfig,'typescript'|'babel'>} */ ({
 
     // external custom addons
 
-    /**  @see https://github.com/microsoft/fluentui-storybook-addons */
-    'storybook-addon-export-to-codesandbox',
-
     // internal monorepo custom addons
 
     /**  @see ../packages/react-components/react-storybook-addon */
     loadWorkspaceAddon('@fluentui/react-storybook-addon', { tsConfigPath }),
+    loadWorkspaceAddon('@fluentui/react-storybook-addon-codesandbox', { tsConfigPath }),
   ],
   webpackFinal: config => {
     registerTsPaths({ config, configFile: tsConfigPath });

.storybook/preview.js

@@ -37,7 +37,8 @@ export const parameters = {
       excludeDecorators: true,
       type: 'source',
     },
-    // This config reuses sources generated for CodeSandbox export feature (storybook-addon-export-to-codesandbox).
+    // This config reuses sources generated for CodeSandbox export feature
+    // (@fluentui/babel-preset-storybook-full-source).
     transformSource: (snippet, story) => story.parameters.fullSource,
   },
   exportToCodeSandbox: {

package.json

@@ -319,7 +319,6 @@
     "schema-utils": "3.1.1",
     "semver": "^6.2.0",
     "source-map-loader": "4.0.0",
-    "storybook-addon-export-to-codesandbox": "0.8.4",
     "storybook-addon-performance": "0.16.1",
     "storybook-addon-swc": "1.1.9",
     "storywright": "0.0.26-beta.1",

packages/react-components/react-storybook-addon-codesandbox/package.json

@@ -4,14 +4,15 @@
   "description": "Storybook addon that enables codesandbox exports for stories",
   "private": true,
   "main": "lib-commonjs/index.js",
+  "module": "lib/index.js",
   "typings": "./dist/index.d.ts",
   "repository": {
     "type": "git",
     "url": "https://github.com/microsoft/fluentui"
   },
   "license": "MIT",
   "scripts": {
-    "build": "just-scripts build --module cjs",
+    "build": "just-scripts build",
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
     "just": "just-scripts",
@@ -26,13 +27,22 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "tslib": "^2.1.0"
+    "tslib": "^2.1.0",
+    "codesandbox-import-utils": "2.2.3",
+    "@types/dedent": "0.7.0",
+    "dedent": "0.7.0"
+  },
+  "peerDependencies": {
+    "@storybook/addons": "^6.5.15"
   },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "require": "./lib-commonjs/index.js"
     },
+    "./preset": {
+      "require": "./preset.js"
+    },
     "./package.json": "./package.json"
   }
 }

packages/react-components/react-storybook-addon-codesandbox/preset.js

@@ -0,0 +1,5 @@
+function config(entry = []) {
+  return [...entry, require.resolve('./lib/preset/preview')];
+}
+
+module.exports = { config };

packages/react-components/react-storybook-addon-codesandbox/src/getDepdencies.ts

@@ -0,0 +1,61 @@
+export type PackageDependencies = { [dependencyName: string]: string };
+
+function matchAll(str: string, re: RegExp) {
+  const regexp = new RegExp(re, 'g');
+  let match: RegExpExecArray | null = null;
+  const matches: RegExpExecArray[] = [];
+
+  while ((match = regexp.exec(str))) {
+    matches.push(match);
+  }
+
+  return matches;
+}
+
+/**
+ *
+ * @param fileContent - code
+ * @param requiredDependencies - dependencies that will always be incldued 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
+ */
+export const getDependencies = (
+  fileContent: string,
+  requiredDependencies: PackageDependencies,
+  optionalDependencies: PackageDependencies,
+) => {
+  const matches = matchAll(fileContent, /from ['"](.*?)['"];/g);
+
+  const dependenciesInCode = Array.from(matches).reduce((dependencies, match) => {
+    if (!match[1].startsWith('react/')) {
+      const dependency = parsePackageName(match[1]).name;
+
+      if (!dependencies.hasOwnProperty(dependency)) {
+        dependencies[dependency] = optionalDependencies[dependency] ?? 'latest';
+      }
+    }
+
+    return dependencies;
+  }, {} as PackageDependencies);
+
+  return { ...dependenciesInCode, ...requiredDependencies };
+};
+
+// Parsed a scoped package name into name, version, and path.
+const RE_SCOPED = /^(@[^\/]+\/[^@\/]+)(?:@([^\/]+))?(\/.*)?$/;
+// Parsed a non-scoped package name into name, version, path
+const RE_NON_SCOPED = /^([^@\/]+)(?:@([^\/]+))?(\/.*)?$/;
+
+function parsePackageName(input: string) {
+  const m = RE_SCOPED.exec(input) || RE_NON_SCOPED.exec(input);
+
+  if (!m) {
+    throw new Error(`[parse-package-name] invalid package name: ${input}`);
+  }
+
+  return {
+    name: m[1] || '',
+    version: m[2] || 'latest',
+    path: m[3] || '',
+  };
+}

packages/react-components/react-storybook-addon-codesandbox/src/getDependencies.test.ts

@@ -0,0 +1,75 @@
+import { getDependencies } from './getDepdencies';
+
+describe('getDependencies', () => {
+  it('should find all dependencies in a file', () => {
+    const code = `
+      import { stuff } from 'dependency';
+      import * as allStuff from 'dependency1';
+      import { moreStuff } from '@dependency/dependency';
+      import {
+        someOtherStuff,
+      } from "@multiline/importDouble";
+      import {
+        someOtherStuff,
+      } from '@multiline/import';
+    `;
+    const deps = getDependencies(code, {}, {});
+
+    expect(deps).toEqual({
+      '@dependency/dependency': 'latest',
+      '@multiline/importDouble': 'latest',
+      '@multiline/import': 'latest',
+      dependency: 'latest',
+      dependency1: 'latest',
+    });
+  });
+
+  it('should ignore separate entrypoints', () => {
+    const code = `
+      import { stuff } from 'dependency/unstable';
+      import { moreStuff } from 'dependency/unstable/component';
+      import { moreStuff2 } from '@dependency/unstable';
+      import { moreStuff3 } from '@dependency/unstable/component';
+    `;
+    const deps = getDependencies(code, {}, {});
+
+    expect(deps).toEqual({
+      dependency: 'latest',
+      '@dependency/unstable': 'latest',
+    });
+  });
+
+  it('versions in optionalDependencies should win ', () => {
+    const code = `
+      import { stuff } from 'dependency';
+    `;
+    const deps = getDependencies(code, {}, { dependency: '1.0.0' });
+
+    expect(deps).toEqual({
+      dependency: '1.0.0',
+    });
+  });
+
+  it('versions in requiredDependencies should win ', () => {
+    const code = `
+      import { stuff } from 'dependency';
+    `;
+    const deps = getDependencies(code, { dependency: '1.0.0' }, {});
+
+    expect(deps).toEqual({
+      dependency: '1.0.0',
+    });
+  });
+
+  it('versions in requiredDependencies should win ', () => {
+    const code = `
+      import { stuff } from 'dependency';
+    `;
+    const deps = getDependencies(code, { required: '1.0.0' }, {});
+
+    expect(deps).toEqual({
+      dependency: 'latest',
+      required: '1.0.0',
+    });
+  });
+});

packages/react-components/react-storybook-addon-codesandbox/src/preset/preview.ts

@@ -0,0 +1,3 @@
+import { withCodeSandboxButton } from '../withCodeSandboxButton';
+
+export const decorators = [withCodeSandboxButton];

packages/react-components/react-storybook-addon-codesandbox/src/withCodeSandboxButton.ts

@@ -0,0 +1,102 @@
+import { StoryContext, useEffect } from '@storybook/addons';
+import { getParameters } from 'codesandbox-import-utils/lib/api/define';
+import * as dedent from 'dedent';
+import { getDependencies } from './getDepdencies';
+import type { PackageDependencies } from './getDepdencies';
+
+export const withCodeSandboxButton = (storyFn: (context: StoryContext) => JSX.Element, context: StoryContext) => {
+  useEffect(() => {
+    if (context.viewMode === 'docs') {
+      displayToolState(`#anchor--${context.id} .docs-story`, context);
+    }
+  }, [context]);
+
+  return storyFn(context);
+};
+
+const displayToolState = (selector: string, context: StoryContext) => {
+  const exportLink = document.createElement('a');
+  exportLink.className = 'with-code-sandbox-button';
+  exportLink.style.setProperty('position', 'absolute');
+  exportLink.style.setProperty('bottom', '0');
+  exportLink.style.setProperty('right', '90px');
+  exportLink.style.setProperty('border', '1px solid rgba(0,0,0,.1)');
+  exportLink.style.setProperty('border-bottom', 'none');
+  exportLink.style.setProperty('border-radius', '4px 4px 0 0');
+  exportLink.style.setProperty('padding', '4px 10px');
+  exportLink.style.setProperty('background', 'white');
+  exportLink.style.setProperty(
+    'font-family',
+    '"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif',
+  );
+  exportLink.style.setProperty('font-weight', '700');
+  exportLink.style.setProperty('font-size', '12px');
+  exportLink.style.setProperty('text-decoration', 'none');
+  exportLink.style.setProperty('line-height', '16px');
+  exportLink.setAttribute('target', '_blank');
+
+  // set to error state by default, overwritten later
+  exportLink.style.setProperty('color', 'darkred');
+  exportLink.innerText = `CodeSandbox Error: See console`;
+
+  const rootElement = document.querySelector(selector);
+  rootElement?.appendChild(exportLink);
+
+  const storyFile = context.parameters?.fullSource;
+
+  if (!storyFile) {
+    console.error(
+      `Export to CodeSandbox: Couldn’t find source for story ${context.story}. Did you install the babel plugin?`,
+    );
+    return false;
+  }
+
+  const requiredDependencies: PackageDependencies = context.parameters?.exportToCodeSandbox?.requiredDependencies ?? {};
+  const optionalDependencies: PackageDependencies = context.parameters?.exportToCodeSandbox?.optionalDependencies ?? {};
+
+  const dependencies = getDependencies(storyFile, requiredDependencies, optionalDependencies);
+
+  const indexTsx = context.parameters?.exportToCodeSandbox?.indexTsx;
+  if (indexTsx === null) {
+    console.error(
+      dedent`Export to CodeSandbox: Please set parameters.exportToCodeSandbox.indexTsx
+             to the desired content of index.tsx file.`,
+    );
+    return false;
+  }
+  console.log(context);
+
+  const defaultFileToPreview = encodeURIComponent('/example.tsx');
+  const codeSandboxParameters = getParameters({
+    files: {
+      'example.tsx': {
+        isBinary: false,
+        content: storyFile,
+      },
+      'index.html': {
+        isBinary: false,
+        content: '<div id="root"></div>',
+      },
+      'index.tsx': {
+        isBinary: false,
+        // use originalStoryFn because users can override the `storyName` property.
+        // We need the name of the exported function, not the actual story
+        // https://github.com/microsoft/fluentui-storybook-addons/issues/12
+        // originalStoryFn.name someties looks like this: ProgressBarDefault_stories_Default
+        // just get the "Default"
+        content: indexTsx.replace('STORY_NAME', context.originalStoryFn.name.split('_stories_').slice(-1).pop()),
+      },
+      'package.json': {
+        isBinary: false,
+        content: JSON.stringify({ dependencies }),
+      },
+    },
+  });
+
+  exportLink.setAttribute(
+    'href',
+    `https://codesandbox.io/api/v1/sandboxes/define?parameters=${codeSandboxParameters}&query=file%3D${defaultFileToPreview}`,
+  );
+  exportLink.style.setProperty('color', '#333333');
+  exportLink.innerText = `Open in CodeSandbox`;
+};

packages/react-components/react-storybook-addon-codesandbox/tsconfig.lib.json

@@ -2,12 +2,12 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "noEmit": false,
-    "lib": ["ES2019"],
+    "lib": ["ES2019", "DOM"],
     "declaration": true,
     "declarationDir": "../../../dist/out-tsc/types",
     "outDir": "../../../dist/out-tsc",
     "inlineSources": true,
-    "types": ["static-assets", "environment", "node"],
+    "types": ["static-assets", "environment"],
     "module": "CommonJS"
   },
   "exclude": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx"],

scripts/storybook/src/utils.js

@@ -156,7 +156,7 @@ function _createCodesandboxRule(allPackageInfo = getAllPackageInfo()) {
   };
 
   /**
-   * @returns {import('storybook-addon-export-to-codesandbox').BabelPluginOptions}
+   * @returns {import('@fluentui/babel-preset-storybook-full-source').BabelPluginOptions}
    */
   function getCodesandboxBabelOptions() {
     const importMappings = Object.values(allPackageInfo).reduce((acc, cur) => {
@@ -169,7 +169,7 @@ function _createCodesandboxRule(allPackageInfo = getAllPackageInfo()) {
       }
 
       return acc;
-    }, /** @type import('storybook-addon-export-to-codesandbox').BabelPluginOptions*/ ({}));
+    }, /** @type import('@fluentui/babel-preset-storybook-full-source').BabelPluginOptions*/ ({}));
 
     return {
       ...importMappings,

yarn.lock

@@ -9267,7 +9267,7 @@ codesandbox-import-util-types@^2.2.3:
   resolved "https://registry.yarnpkg.com/codesandbox-import-util-types/-/codesandbox-import-util-types-2.2.3.tgz#b354b2f732ad130e119ebd9ead3bda3be5981a54"
   integrity sha512-Qj00p60oNExthP2oR3vvXmUGjukij+rxJGuiaKM6tyUmSyimdZsqHI/TUvFFClAffk9s7hxGnQgWQ8KCce27qQ==
 
-codesandbox-import-utils@2.2.3, codesandbox-import-utils@^2.2.3:
+codesandbox-import-utils@2.2.3:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/codesandbox-import-utils/-/codesandbox-import-utils-2.2.3.tgz#f7b4801245b381cb8c90fe245e336624e19b6c84"
   integrity sha512-ymtmcgZKU27U+nM2qUb21aO8Ut/u2S9s6KorOgG81weP+NA0UZkaHKlaRqbLJ9h4i/4FLvwmEXYAnTjNmp6ogg==
@@ -23528,14 +23528,6 @@ store2@^2.12.0:
   resolved "https://registry.yarnpkg.com/store2/-/store2-2.12.0.tgz#e1f1b7e1a59b6083b2596a8d067f6ee88fd4d3cf"
   integrity sha512-7t+/wpKLanLzSnQPX8WAcuLCCeuSHoWdQuh9SB3xD0kNOM38DNf+0Oa+wmvxmYueRzkmh6IcdKFtvTa+ecgPDw==
 
-storybook-addon-export-to-codesandbox@0.8.4:
-  version "0.8.4"
-  resolved "https://registry.yarnpkg.com/storybook-addon-export-to-codesandbox/-/storybook-addon-export-to-codesandbox-0.8.4.tgz#7bbbcd88e2776d261f0f6c6322847371a3015139"
-  integrity sha512-l2kRp3ro0j0SAMN/vZWPFXcpJx+FsFtGw87ixG7uf2d0Vig/IrWYZo9oROF10FOhOgCYmrV1XxCU3jujCg9jvw==
-  dependencies:
-    codesandbox-import-utils "^2.2.3"
-    pkg-up "^3.1.0"
-
 storybook-addon-performance@0.16.1:
   version "0.16.1"
   resolved "https://registry.yarnpkg.com/storybook-addon-performance/-/storybook-addon-performance-0.16.1.tgz#f7dfee036c8c19a5d405fdb509e419b34432ee50"