Merge pull request #26 from george-cz/fix_codesandbox_story_undefined

fix: Remove Storybook parameters from CodeSandbox examples

storybook-addon-export-to-codesandbox/src/plugins/__fixtures__/babel-plugin-remove-storybook-parameters/doesnt-remove-inner-assignments-from-exported/code.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+export const TestComponent = () => {
+  const foo = { bar: 'baz' };
+  foo.baz = 'bar';
+  return 'Hello world';
+};
+
+TestComponent.parameters = {
+  foo: 'bar',
+};

storybook-addon-export-to-codesandbox/src/plugins/__fixtures__/babel-plugin-remove-storybook-parameters/doesnt-remove-inner-assignments-from-exported/output.js

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export const TestComponent = () => {
+  const foo = {
+    bar: 'baz',
+  };
+  foo.baz = 'bar';
+  return 'Hello world';
+};

storybook-addon-export-to-codesandbox/src/plugins/__fixtures__/babel-plugin-remove-storybook-parameters/doesnt-remove-params-from-not-exported/code.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+const TestComponent = () => 'Hello world';
+
+TestComponent.parameters = {
+  foo: 'bar',
+};

storybook-addon-export-to-codesandbox/src/plugins/__fixtures__/babel-plugin-remove-storybook-parameters/doesnt-remove-params-from-not-exported/output.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+const TestComponent = () => 'Hello world';
+
+TestComponent.parameters = {
+  foo: 'bar',
+};

storybook-addon-export-to-codesandbox/src/plugins/__fixtures__/babel-plugin-remove-storybook-parameters/removes-assigns-from-exported/code.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+export const TestComponent = () => 'Hello world';
+
+TestComponent.parameters = {
+  foo: 'bar',
+};
+
+TestComponent.somethingElse = {
+  foo: 'bar',
+  test: {
+    someKey: 'foo',
+  },
+};
+
+TestComponent['parameters'] = 1;
+
+TestComponent['parameters'] = { foo: 'bar' };

storybook-addon-export-to-codesandbox/src/plugins/__fixtures__/babel-plugin-remove-storybook-parameters/removes-assigns-from-exported/output.js

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export const TestComponent = () => 'Hello world';

storybook-addon-export-to-codesandbox/src/plugins/fullsource.test.ts

@@ -1,18 +1,4 @@
-import pluginTester from 'babel-plugin-tester';
-import * as path from 'path';
 import plugin, { PLUGIN_NAME } from './fullsource';
+import pluginTester from './pluginTester';
 
-const fixturesDir = path.join(__dirname, `__fixtures__/${PLUGIN_NAME}`);
-
-const defaultDependencyReplace = { replace: '@fluentui/react-components' };
-
-pluginTester({
-  pluginOptions: {
-    '@fluentui/react-button': defaultDependencyReplace,
-    '@fluentui/react-menu': defaultDependencyReplace,
-    '@fluentui/react-link': defaultDependencyReplace,
-  },
-  pluginName: PLUGIN_NAME,
-  plugin,
-  fixtures: fixturesDir,
-});
+pluginTester(plugin, PLUGIN_NAME);

storybook-addon-export-to-codesandbox/src/plugins/fullsource.ts

@@ -1,5 +1,6 @@
 import * as Babel from '@babel/core';
 import modifyImportsPlugin from './modifyImports';
+import removeStorybookParameters from './removeStorybookParameters';
 
 export const PLUGIN_NAME = 'storybook-stories-fullsource';
 
@@ -44,7 +45,7 @@ export default function (babel: typeof Babel, options: BabelPluginOptions): Babe
           const transformedCode = babel.transformSync(path.node.init.value, {
             ...state.file.opts,
             comments: false,
-            plugins: [[modifyImportsPlugin, options]],
+            plugins: [[modifyImportsPlugin, options], removeStorybookParameters],
           }).code;
 
           path.get('init').replaceWith(t.stringLiteral(transformedCode));

storybook-addon-export-to-codesandbox/src/plugins/modifyImports.test.ts

@@ -1,17 +1,6 @@
-import pluginTester from 'babel-plugin-tester';
-import * as path from 'path';
 import plugin, { PLUGIN_NAME } from './modifyImports';
+import pluginTester from './pluginTester';
 
-const defaultDependencyReplace = { replace: '@fluentui/react-components' };
-const fixturesDir = path.join(__dirname, `__fixtures__/${PLUGIN_NAME}`);
-pluginTester({
-  pluginOptions: {
-    '@fluentui/react-button': defaultDependencyReplace,
-    '@fluentui/react-menu': defaultDependencyReplace,
-    '@fluentui/react-link': defaultDependencyReplace,
-    '@fluentui/react-unstable-component': { replace: '@fluentui/react-components/unstable' },
-  },
-  pluginName: PLUGIN_NAME,
-  plugin,
-  fixtures: fixturesDir,
+pluginTester(plugin, PLUGIN_NAME, {
+  '@fluentui/react-unstable-component': { replace: '@fluentui/react-components/unstable' },
 });

storybook-addon-export-to-codesandbox/src/plugins/pluginTester.ts

@@ -0,0 +1,20 @@
+import { PluginOptions } from '@babel/core';
+import pluginTester from 'babel-plugin-tester';
+import * as path from 'path';
+
+export default function (plugin: any, pluginName: string, pluginOptions: PluginOptions = {}) {
+  const fixturesDir = path.join(__dirname, `__fixtures__/${pluginName}`);
+  const defaultDependencyReplace = { replace: '@fluentui/react-components' };
+
+  pluginTester({
+    fixtures: fixturesDir,
+    pluginOptions: {
+      '@fluentui/react-button': defaultDependencyReplace,
+      '@fluentui/react-menu': defaultDependencyReplace,
+      '@fluentui/react-link': defaultDependencyReplace,
+      ...pluginOptions,
+    },
+    pluginName,
+    plugin,
+  });
+}

storybook-addon-export-to-codesandbox/src/plugins/removeStorybookParameters.test.ts

@@ -0,0 +1,4 @@
+import plugin, { PLUGIN_NAME } from './removeStorybookParameters';
+import pluginTester from './pluginTester';
+
+pluginTester(plugin, PLUGIN_NAME);

storybook-addon-export-to-codesandbox/src/plugins/removeStorybookParameters.ts

@@ -0,0 +1,53 @@
+import * as Babel from '@babel/core';
+
+export const PLUGIN_NAME = 'babel-plugin-remove-storybook-parameters';
+
+/**
+ * This plugin finds Storybook specific assignments and removes them.
+ *
+ * Main reason for this change is that sometimes "story" is not a hardcoded string
+ * but it is imported from a markdown file, which results in story being undefined
+ * and CodeSandbox example not working.
+ *
+ * Another benefit of removing the Storybook specific assignments is that the
+ * resulting example is free of unnecessary clutter.
+ */
+export default function removeStorybookParameters(babel: typeof Babel): Babel.PluginObj {
+  return {
+    name: PLUGIN_NAME,
+
+    pre() {
+      this.foundExports = 0;
+    },
+
+    visitor: {
+      ExportNamedDeclaration(path) {
+        (this.foundExports as number)++;
+        path.traverse({
+          Identifier(idPath) {
+            const binding = idPath.scope.getBinding(idPath.node.name);
+            binding?.referencePaths?.forEach(path => {
+              if (path.parentPath?.isMemberExpression()) {
+                path.parentPath.parentPath?.remove();
+              }
+            });
+            idPath.stop();
+          },
+        });
+      },
+    },
+
+    post(file) {
+      if (this.foundExports > 1) {
+        console.warn(
+          '\n\x1b[33m%s\x1b[0m',
+          `WARNING: This file has multiple exports, please fix (${this.foundExports}):`,
+        );
+        console.warn(file.opts.filename);
+        console.log(
+          'Having multiple exports in a story causes issues for the CodeSandbox examples. This rule will be enforced in the future.\n',
+        );
+      }
+    },
+  };
+}