From c3fa6225efb7ecc6eedf7023280b1e6b25805970 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Mon, 30 May 2022 18:07:55 +0200
Subject: [PATCH] optional dependencies

---
 .../README.md                                 |  5 +++-
 .../src/getDepdencies.ts                      | 13 ++++++---
 .../src/getDependencies.test.ts               | 29 +++++++++++++++++--
 .../src/withCodeSandboxButton.ts              | 10 ++-----
 4 files changed, 42 insertions(+), 15 deletions(-)

diff --git a/storybook-addon-export-to-codesandbox/README.md b/storybook-addon-export-to-codesandbox/README.md
index 5122119..6e5320c 100644
--- a/storybook-addon-export-to-codesandbox/README.md
+++ b/storybook-addon-export-to-codesandbox/README.md
@@ -29,7 +29,10 @@ export const parameters = {
       react: 'latest',
       'react-dom': 'latest', // for React
       'react-scripts': 'latest', // necessary when using typescript in CodeSandbox
-      '@fluentui/react-components': '^9.0.0-beta', // necessary for FluentProvider
+    },
+    // Dependencies that should be included in the story if it exists in the code
+    optionalDependencies: {
+      '@fluentui/react-icons': '^9.0.0-beta',
     },
     // Content of index.tsx in CodeSandbox
     indexTsx: dedent`
diff --git a/storybook-addon-export-to-codesandbox/src/getDepdencies.ts b/storybook-addon-export-to-codesandbox/src/getDepdencies.ts
index 6ae999b..1f279a2 100644
--- a/storybook-addon-export-to-codesandbox/src/getDepdencies.ts
+++ b/storybook-addon-export-to-codesandbox/src/getDepdencies.ts
@@ -3,10 +3,15 @@ export type PackageDependencies = { [dependencyName: string]: string };
 /**
  *
  * @param fileContent - code
- * @param requiredDependencies - whose versions will override those found in the 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) => {
+export const getDependencies = (
+  fileContent: string,
+  requiredDependencies: PackageDependencies,
+  optionalDependencies: PackageDependencies,
+) => {
   const matches = fileContent.matchAll(/import .* from ['"](.*?)['"];/g);
 
   const dependenciesInCode = Array.from(matches).reduce((dependencies, match) => {
@@ -14,14 +19,14 @@ export const getDependencies = (fileContent: string, requiredDependencies: Packa
       const dependency = parsePackageName(match[1]).name;
 
       if (!dependencies.hasOwnProperty(dependency)) {
-        dependencies[dependency] = requiredDependencies[dependency] ?? 'latest';
+        dependencies[dependency] = optionalDependencies[dependency] ?? 'latest';
       }
     }
 
     return dependencies;
   }, {} as PackageDependencies);
 
-  return dependenciesInCode;
+  return { ...dependenciesInCode, ...requiredDependencies };
 };
 
 // Parsed a scoped package name into name, version, and path.
diff --git a/storybook-addon-export-to-codesandbox/src/getDependencies.test.ts b/storybook-addon-export-to-codesandbox/src/getDependencies.test.ts
index 1f1c264..331dd3b 100644
--- a/storybook-addon-export-to-codesandbox/src/getDependencies.test.ts
+++ b/storybook-addon-export-to-codesandbox/src/getDependencies.test.ts
@@ -7,7 +7,7 @@ describe('getDependencies', () => {
       import * as allStuff from 'dependency1';
       import { moreStuff } from '@dependency/dependency';
     `;
-    const deps = getDependencies(code, {});
+    const deps = getDependencies(code, {}, {});
 
     expect(deps).toEqual({
       '@dependency/dependency': 'latest',
@@ -23,7 +23,7 @@ describe('getDependencies', () => {
       import { moreStuff2 } from '@dependency/unstable';
       import { moreStuff3 } from '@dependency/unstable/component';
     `;
-    const deps = getDependencies(code, {});
+    const deps = getDependencies(code, {}, {});
 
     expect(deps).toEqual({
       dependency: 'latest',
@@ -31,14 +31,37 @@ describe('getDependencies', () => {
     });
   });
 
+  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' });
+    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',
+    });
+  });
 });
diff --git a/storybook-addon-export-to-codesandbox/src/withCodeSandboxButton.ts b/storybook-addon-export-to-codesandbox/src/withCodeSandboxButton.ts
index af42a25..170361e 100644
--- a/storybook-addon-export-to-codesandbox/src/withCodeSandboxButton.ts
+++ b/storybook-addon-export-to-codesandbox/src/withCodeSandboxButton.ts
@@ -51,14 +51,10 @@ const displayToolState = (selector: string, context: StoryContext) => {
     return false;
   }
 
-  const requiredDependencies: PackageDependencies = context.parameters?.exportToCodeSandbox?.requiredDependencies;
+  const requiredDependencies: PackageDependencies = context.parameters?.exportToCodeSandbox?.requiredDependencies ?? {};
+  const optionalDependencies: PackageDependencies = context.parameters?.exportToCodeSandbox?.optionalDependencies ?? {};
 
-  if (requiredDependencies == null) {
-    console.error(`Export to CodeSandbox: Please set parameters.exportToCodeSandbox.requiredDependencies.`);
-    return false;
-  }
-
-  const dependencies = getDependencies(storyFile, requiredDependencies);
+  const dependencies = getDependencies(storyFile, requiredDependencies, optionalDependencies);
 
   const indexTsx = context.parameters?.exportToCodeSandbox?.indexTsx;
   if (indexTsx == null) {