optional dependencies

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`

storybook-addon-export-to-codesandbox/src/getDepdencies.ts

@@ -3,25 +3,30 @@ 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) => {
     if (!match[1].startsWith('react/')) {
       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.

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,22 +23,45 @@ 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',
       '@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' });
+    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',
+    });
+  });
 });

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) {