From daa02b801f105e021cce529a101bed1d97f843f2 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Sun, 31 Jul 2022 22:26:49 +1000
Subject: [PATCH 1/7] Copy example stories over from renderer + addons

---
 .../actions/src/stories/basics.stories.tsx    | 19 ++++
 .../react/src/stories/decorators.stories.tsx  | 27 ++++++
 scripts/example.ts                            | 97 +++++++++++++++++--
 scripts/package.json                          |  1 +
 scripts/yarn.lock                             |  3 +-
 5 files changed, 140 insertions(+), 7 deletions(-)
 create mode 100644 code/addons/actions/src/stories/basics.stories.tsx
 create mode 100644 code/renderers/react/src/stories/decorators.stories.tsx

diff --git a/code/addons/actions/src/stories/basics.stories.tsx b/code/addons/actions/src/stories/basics.stories.tsx
new file mode 100644
index 000000000000..d1d54288fa5e
--- /dev/null
+++ b/code/addons/actions/src/stories/basics.stories.tsx
@@ -0,0 +1,19 @@
+// TODO -- for now react, going to generalise
+import React, { FC } from 'react';
+
+import { action } from '@storybook/addon-actions';
+
+// TODO -- this needs to be a generic component
+const Button: FC<{ onClick: () => void }> = ({ onClick, children }) => (
+  <button type="button" onClick={onClick}>
+    {children}
+  </button>
+);
+
+export default {
+  component: Button,
+};
+
+export const BasicExample = {
+  args: { onClick: action('hello-world') },
+};
diff --git a/code/renderers/react/src/stories/decorators.stories.tsx b/code/renderers/react/src/stories/decorators.stories.tsx
new file mode 100644
index 000000000000..39b1f83118b2
--- /dev/null
+++ b/code/renderers/react/src/stories/decorators.stories.tsx
@@ -0,0 +1,27 @@
+import React, { FC } from 'react';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+
+const Component: FC = () => <p>Story</p>;
+
+export default {
+  component: Component,
+  decorators: [
+    (Story) => (
+      <>
+        <p>Component Decorator</p>
+        <Story />
+      </>
+    ),
+  ],
+} as ComponentMeta<typeof Component>;
+
+export const All: ComponentStory<typeof Component> = {
+  decorators: [
+    (Story) => (
+      <>
+        <p>Local Decorator</p>
+        <Story />
+      </>
+    ),
+  ],
+};
diff --git a/scripts/example.ts b/scripts/example.ts
index 6b16c3731a39..77893f909b46 100644
--- a/scripts/example.ts
+++ b/scripts/example.ts
@@ -1,6 +1,18 @@
+/* eslint-disable no-restricted-syntax, no-await-in-loop */
 import path from 'path';
-import { remove, pathExists, readJSON, writeJSON } from 'fs-extra';
+import {
+  remove,
+  pathExists,
+  readJSON,
+  writeJSON,
+  ensureSymlink,
+  readFile,
+  writeFile,
+  mkdir,
+} from 'fs-extra';
 import prompts from 'prompts';
+import globby from 'globby';
+import { transform } from 'esbuild';
 
 import { getOptionsOrPrompt } from './utils/options';
 import { executeCLIStep } from './utils/cli-step';
@@ -12,9 +24,26 @@ import { babelParse } from '../code/lib/csf-tools/src/babelParse';
 
 const frameworks = ['react', 'angular'];
 const addons = ['a11y', 'storysource'];
+const defaultAddons = [
+  'actions',
+  'backgrounds',
+  'controls',
+  'docs',
+  'highlight',
+  'links',
+  'interactions',
+  'measure',
+  'outline',
+  'toolbars',
+  'viewport',
+];
 const examplesDir = path.resolve(__dirname, '../examples');
 const codeDir = path.resolve(__dirname, '../code');
 
+// TODO -- how to encode this information
+const renderersMap = { react: 'react', angular: 'angular' };
+const isTSMap = { react: false, angular: true };
+
 async function getOptions() {
   return getOptionsOrPrompt('yarn example', {
     framework: {
@@ -120,11 +149,55 @@ const addPackageScripts = async ({
   await writeJSON(packageJsonPath, packageJson, { spaces: 2 });
 };
 
+// Copied from `esbuild-register` -- is there a simple way to do this?
+type LOADERS = 'js' | 'jsx' | 'ts' | 'tsx';
+const FILE_LOADERS = {
+  '.js': 'js',
+  '.jsx': 'jsx',
+  '.ts': 'ts',
+  '.tsx': 'tsx',
+  '.mjs': 'js',
+} as const;
+
+type EXTENSIONS = keyof typeof FILE_LOADERS;
+const getLoader = (filename: string): LOADERS => FILE_LOADERS[path.extname(filename) as EXTENSIONS];
+
+async function copyStories(from: string, to: string, { isTS }: { isTS: boolean }) {
+  if (!(await pathExists(from))) return;
+
+  if (isTS) {
+    await ensureSymlink(from, to);
+    return;
+  }
+
+  await mkdir(to);
+  const files = await globby(`${from}/**/*.*`);
+  await Promise.all(
+    files.map(async (fromPath) => {
+      const inputCode = await readFile(fromPath, 'utf8');
+      const { code } = await transform(inputCode, {
+        sourcefile: fromPath,
+        loader: getLoader(fromPath),
+        target: `node${process.version.slice(1)}`,
+        format: 'esm',
+        tsconfigRaw: `{
+          "compilerOptions": {
+            "strict": false,
+            "skipLibCheck": true,
+          },
+        }`,
+      });
+      const toPath = path.resolve(to, path.relative(from, fromPath).replace(/tsx?$/, 'js'));
+      await writeFile(toPath, code);
+    })
+  );
+}
+
 async function main() {
   const optionValues = await getOptions();
 
   const { framework, forceDelete, forceReuse, link, dryRun } = optionValues;
-  const cwd = path.join(examplesDir, framework as string);
+  const cwd = path.join(examplesDir, framework);
 
   const exists = await pathExists(cwd);
   let shouldDelete = exists && !forceReuse;
@@ -150,19 +223,31 @@ async function main() {
       dryRun,
     });
 
+    // TODO -- this seems like it might be framework specific. Should we search for a folder?
+    // or set it in the config somewhere?
+    const storiesDir = path.resolve(cwd, './stories');
+
+    // TODO -- can we get the options type to return something more specific
+    const renderer = renderersMap[framework as 'react' | 'angular'];
+    const isTS = isTSMap[framework as 'react' | 'angular'];
+    // Copy over renderer stories
+    const rendererStoriesDir = path.resolve(codeDir, `./renderers/${renderer}/src/stories`);
+    await copyStories(rendererStoriesDir, path.join(storiesDir, renderer), { isTS });
+
     // TODO -- sb add <addon> doesn't actually work properly:
     //   - installs in `deps` not `devDeps`
     //   - does a `workspace:^` install (what does that mean?)
     //   - doesn't add to `main.js`
 
-    // eslint-disable-next-line no-restricted-syntax
-    for (const addon of optionValues.addon as string[]) {
+    for (const addon of optionValues.addon) {
       const addonName = `@storybook/addon-${addon}`;
-      // eslint-disable-next-line no-await-in-loop
       await executeCLIStep(steps.add, { argument: addonName, cwd, dryRun });
     }
 
-    // TODO copy stories
+    for (const addon of [...defaultAddons, ...optionValues.addon]) {
+      const addonStoriesDir = path.resolve(codeDir, `addons/${addon}/src/stories`);
+      await copyStories(addonStoriesDir, path.join(storiesDir, `addon-${addon}`), { isTS });
+    }
 
     if (link) {
       await executeCLIStep(steps.link, {
diff --git a/scripts/package.json b/scripts/package.json
index 2edc8c1563ed..31e0e910eab1 100644
--- a/scripts/package.json
+++ b/scripts/package.json
@@ -129,6 +129,7 @@
     "fs-extra": "^9.0.1",
     "github-release-from-changelog": "^2.1.1",
     "glob": "^7.1.6",
+    "globby": "^11.0.2",
     "http-server": "^0.12.3",
     "husky": "^4.3.7",
     "jest": "^26.6.3",
diff --git a/scripts/yarn.lock b/scripts/yarn.lock
index c7d72426e272..f8ab0d448c2b 100644
--- a/scripts/yarn.lock
+++ b/scripts/yarn.lock
@@ -3316,6 +3316,7 @@ __metadata:
     fs-extra: ^9.0.1
     github-release-from-changelog: ^2.1.1
     glob: ^7.1.6
+    globby: ^11.0.2
     http-server: ^0.12.3
     husky: ^4.3.7
     jest: ^26.6.3
@@ -10198,7 +10199,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"globby@npm:^11.0.1, globby@npm:^11.0.3, globby@npm:^11.0.4, globby@npm:^11.1.0":
+"globby@npm:^11.0.1, globby@npm:^11.0.2, globby@npm:^11.0.3, globby@npm:^11.0.4, globby@npm:^11.1.0":
   version: 11.1.0
   resolution: "globby@npm:11.1.0"
   dependencies:

From 346a8ce31f70113293c5d66ca979cfe0ae3d37fa Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Mon, 1 Aug 2022 16:56:35 +1000
Subject: [PATCH 2/7] Simplify things by linking to the dist folder rather than
 compiling

---
 code/addons/actions/package.json  |  1 +
 code/renderers/react/package.json |  4 +-
 scripts/example.ts                | 61 +++++++++----------------------
 3 files changed, 22 insertions(+), 44 deletions(-)

diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json
index 0f31f088d387..4b564afe5f24 100644
--- a/code/addons/actions/package.json
+++ b/code/addons/actions/package.json
@@ -26,6 +26,7 @@
   "types": "dist/types/index.d.ts",
   "files": [
     "dist/**/*",
+    "!dist/stories/**/*",
     "README.md",
     "*.js",
     "*.d.ts"
diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json
index 2a8eb0191a5c..05fbbe74963e 100644
--- a/code/renderers/react/package.json
+++ b/code/renderers/react/package.json
@@ -41,6 +41,7 @@
   "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
+    "!dist/stories/**/*",
     "types/**/*",
     "README.md",
     "*.js",
@@ -97,7 +98,8 @@
   "bundler": {
     "entries": [
       "./src/index.ts",
-      "./src/config.ts"
+      "./src/config.ts",
+      "./src/stories/decorators.stories.tsx"
     ],
     "platform": "browser"
   },
diff --git a/scripts/example.ts b/scripts/example.ts
index 77893f909b46..be86288a4382 100644
--- a/scripts/example.ts
+++ b/scripts/example.ts
@@ -149,46 +149,12 @@ const addPackageScripts = async ({
   await writeJSON(packageJsonPath, packageJson, { spaces: 2 });
 };
 
-// Copied from `esbuild-register` -- is there a simple way to do this?
-type LOADERS = 'js' | 'jsx' | 'ts' | 'tsx';
-const FILE_LOADERS = {
-  '.js': 'js',
-  '.jsx': 'jsx',
-  '.ts': 'ts',
-  '.tsx': 'tsx',
-  '.mjs': 'js',
-} as const;
-
-type EXTENSIONS = keyof typeof FILE_LOADERS;
-const getLoader = (filename: string): LOADERS => FILE_LOADERS[path.extname(filename) as EXTENSIONS];
-
-async function copyStories(from: string, to: string, { isTS }: { isTS: boolean }) {
-  if (!(await pathExists(from))) return;
-
-  if (isTS) {
-    await ensureSymlink(from, to);
-    return;
-  }
-
-  await mkdir(to);
-  const files = await globby(`${from}/**/*.*`);
+async function copyStories(possibleFrom: string[], to: string) {
   await Promise.all(
-    files.map(async (fromPath) => {
-      const inputCode = await readFile(fromPath, 'utf8');
-      const { code } = await transform(inputCode, {
-        sourcefile: fromPath,
-        loader: getLoader(fromPath),
-        target: `node${process.version.slice(1)}`,
-        format: 'esm',
-        tsconfigRaw: `{
-          "compilerOptions": {
-            "strict": false,
-            "skipLibCheck": true,
-          },
-        }`,
-      });
-      const toPath = path.resolve(to, path.relative(from, fromPath).replace(/tsx?$/, 'js'));
-      await writeFile(toPath, code);
+    possibleFrom.map(async (from) => {
+      if (!(await pathExists(from))) return;
+
+      await ensureSymlink(from, to);
     })
   );
 }
@@ -230,9 +196,14 @@ async function main() {
     // TODO -- can we get the options type to return something more specific
     const renderer = renderersMap[framework as 'react' | 'angular'];
     const isTS = isTSMap[framework as 'react' | 'angular'];
+    const possiblePackageStoriesDir = isTS ? ['src/stories'] : ['dist/stories', 'dist/esm/stories'];
+
     // Copy over renderer stories
-    const rendererStoriesDir = path.resolve(codeDir, `./renderers/${renderer}/src/stories`);
-    await copyStories(rendererStoriesDir, path.join(storiesDir, renderer), { isTS });
+    const rendererDir = path.join(codeDir, 'renderers', renderer);
+    await copyStories(
+      possiblePackageStoriesDir.map((dir) => path.join(rendererDir, dir)),
+      path.join(storiesDir, renderer)
+    );
 
     // TODO -- sb add <addon> doesn't actually work properly:
     //   - installs in `deps` not `devDeps`
@@ -245,8 +216,12 @@ async function main() {
     }
 
     for (const addon of [...defaultAddons, ...optionValues.addon]) {
-      const addonStoriesDir = path.resolve(codeDir, `addons/${addon}/src/stories`);
-      await copyStories(addonStoriesDir, path.join(storiesDir, `addon-${addon}`), { isTS });
+      const addonStoriesDir = path.join(codeDir, 'addons', addon);
+
+      await copyStories(
+        possiblePackageStoriesDir.map((dir) => path.join(addonStoriesDir, dir)),
+        path.join(storiesDir, `addon-${addon}`)
+      );
     }
 
     if (link) {

From b4a37bf89807b17ce5196363063214b7c252a756 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Tue, 2 Aug 2022 08:35:07 +1000
Subject: [PATCH 3/7] Add stories via adding to main.js

---
 code/addons/actions/package.json              |  1 -
 .../stories/basics.stories.tsx                |  0
 code/renderers/react/package.json             |  4 +-
 .../stories/decorators.stories.tsx            |  0
 scripts/example.ts                            | 46 +++++++++----------
 5 files changed, 23 insertions(+), 28 deletions(-)
 rename code/addons/actions/{src => template}/stories/basics.stories.tsx (100%)
 rename code/renderers/react/{src => template}/stories/decorators.stories.tsx (100%)

diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json
index 4b564afe5f24..0f31f088d387 100644
--- a/code/addons/actions/package.json
+++ b/code/addons/actions/package.json
@@ -26,7 +26,6 @@
   "types": "dist/types/index.d.ts",
   "files": [
     "dist/**/*",
-    "!dist/stories/**/*",
     "README.md",
     "*.js",
     "*.d.ts"
diff --git a/code/addons/actions/src/stories/basics.stories.tsx b/code/addons/actions/template/stories/basics.stories.tsx
similarity index 100%
rename from code/addons/actions/src/stories/basics.stories.tsx
rename to code/addons/actions/template/stories/basics.stories.tsx
diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json
index 05fbbe74963e..2a8eb0191a5c 100644
--- a/code/renderers/react/package.json
+++ b/code/renderers/react/package.json
@@ -41,7 +41,6 @@
   "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
-    "!dist/stories/**/*",
     "types/**/*",
     "README.md",
     "*.js",
@@ -98,8 +97,7 @@
   "bundler": {
     "entries": [
       "./src/index.ts",
-      "./src/config.ts",
-      "./src/stories/decorators.stories.tsx"
+      "./src/config.ts"
     ],
     "platform": "browser"
   },
diff --git a/code/renderers/react/src/stories/decorators.stories.tsx b/code/renderers/react/template/stories/decorators.stories.tsx
similarity index 100%
rename from code/renderers/react/src/stories/decorators.stories.tsx
rename to code/renderers/react/template/stories/decorators.stories.tsx
diff --git a/scripts/example.ts b/scripts/example.ts
index be86288a4382..0493103754ae 100644
--- a/scripts/example.ts
+++ b/scripts/example.ts
@@ -149,14 +149,24 @@ const addPackageScripts = async ({
   await writeJSON(packageJsonPath, packageJson, { spaces: 2 });
 };
 
-async function copyStories(possibleFrom: string[], to: string) {
-  await Promise.all(
-    possibleFrom.map(async (from) => {
-      if (!(await pathExists(from))) return;
+async function readMainConfig({ cwd }: { cwd: string }) {
+  const configDir = path.join(cwd, '.storybook');
+  const mainConfigPath = getInterpretedFile(path.resolve(configDir, 'main'));
+  return readConfig(mainConfigPath);
+}
+
+async function addStories(paths: string[], { cwd }: { cwd: string }) {
+  const mainConfig = await readMainConfig({ cwd });
+
+  const stories = mainConfig.getFieldValue(['stories']) as string[];
+  const extraStories = paths.map((p) => path.resolve(p, './template/stories/*.stories.*'));
+  mainConfig.setFieldValue(['stories'], [...stories, ...extraStories]);
+
+  const code = '(c) => ({ ...c, rules: { ...c.rules, } })';
+  // @ts-ignore (not sure why TS complains here, it does exist)
+  mainConfig.setFieldNode(['webpackFinal'], babelParse(code).program.body[0].expression);
 
-      await ensureSymlink(from, to);
-    })
-  );
+  await writeConfig(mainConfig);
 }
 
 async function main() {
@@ -189,21 +199,12 @@ async function main() {
       dryRun,
     });
 
-    // TODO -- this seems like it might be framework specific. Should we search for a folder?
-    // or set it in the config somewhere?
-    const storiesDir = path.resolve(cwd, './stories');
-
     // TODO -- can we get the options type to return something more specific
     const renderer = renderersMap[framework as 'react' | 'angular'];
     const isTS = isTSMap[framework as 'react' | 'angular'];
-    const possiblePackageStoriesDir = isTS ? ['src/stories'] : ['dist/stories', 'dist/esm/stories'];
 
-    // Copy over renderer stories
-    const rendererDir = path.join(codeDir, 'renderers', renderer);
-    await copyStories(
-      possiblePackageStoriesDir.map((dir) => path.join(rendererDir, dir)),
-      path.join(storiesDir, renderer)
-    );
+    const storiesToAdd = [] as string[];
+    storiesToAdd.push(path.join(codeDir, 'renderers', renderer));
 
     // TODO -- sb add <addon> doesn't actually work properly:
     //   - installs in `deps` not `devDeps`
@@ -216,14 +217,11 @@ async function main() {
     }
 
     for (const addon of [...defaultAddons, ...optionValues.addon]) {
-      const addonStoriesDir = path.join(codeDir, 'addons', addon);
-
-      await copyStories(
-        possiblePackageStoriesDir.map((dir) => path.join(addonStoriesDir, dir)),
-        path.join(storiesDir, `addon-${addon}`)
-      );
+      storiesToAdd.push(path.join(codeDir, 'addons', addon));
     }
 
+    await addStories(storiesToAdd, { cwd });
+
     if (link) {
       await executeCLIStep(steps.link, {
         argument: cwd,

From d4e108f495981f9da3652954743a5c97e2a2f7a5 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Mon, 1 Aug 2022 22:57:00 +1000
Subject: [PATCH 4/7] Add stories via story entries

---
 code/package.json  |  1 +
 code/yarn.lock     | 17 +++++++++++++++++
 scripts/example.ts | 45 +++++++++++++++++++++++++++++++++++++--------
 3 files changed, 55 insertions(+), 8 deletions(-)

diff --git a/code/package.json b/code/package.json
index 77f8d397acf0..a4d29b408b16 100644
--- a/code/package.json
+++ b/code/package.json
@@ -278,6 +278,7 @@
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",
     "esbuild": "^0.14.48",
+    "esbuild-loader": "^2.19.0",
     "esbuild-plugin-alias": "^0.2.1",
     "eslint": "^7.17.0",
     "eslint-plugin-cypress": "^2.11.2",
diff --git a/code/yarn.lock b/code/yarn.lock
index 940aa44590bf..05cd20b0c5fb 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -9006,6 +9006,7 @@ __metadata:
     enzyme: ^3.11.0
     enzyme-adapter-react-16: ^1.15.5
     esbuild: ^0.14.48
+    esbuild-loader: ^2.19.0
     esbuild-plugin-alias: ^0.2.1
     eslint: ^7.17.0
     eslint-plugin-cypress: ^2.11.2
@@ -20455,6 +20456,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esbuild-loader@npm:^2.19.0":
+  version: 2.19.0
+  resolution: "esbuild-loader@npm:2.19.0"
+  dependencies:
+    esbuild: ^0.14.39
+    joycon: ^3.0.1
+    json5: ^2.2.0
+    loader-utils: ^2.0.0
+    tapable: ^2.2.0
+    webpack-sources: ^2.2.0
+  peerDependencies:
+    webpack: ^4.40.0 || ^5.0.0
+  checksum: 309b4bd169ffd1d743ad7099182323a179dec789cd5eb4f5f0258c1c13034a154917679e2402bfcedd90c9b03d06d773e97fe4aa1056274dc43d30633c5707e1
+  languageName: node
+  linkType: hard
+
 "esbuild-netbsd-64@npm:0.14.49":
   version: 0.14.49
   resolution: "esbuild-netbsd-64@npm:0.14.49"
diff --git a/scripts/example.ts b/scripts/example.ts
index 0493103754ae..4c7adb744f70 100644
--- a/scripts/example.ts
+++ b/scripts/example.ts
@@ -155,16 +155,47 @@ async function readMainConfig({ cwd }: { cwd: string }) {
   return readConfig(mainConfigPath);
 }
 
+// NOTE: the test here will apply whether the path is symlink-preserved or otherwise
+const webpackFinalCode = `
+  (config) => ({
+    ...config,
+    module: {
+      ...config.modules,
+      rules: [
+        {
+          test: [/\\/node_modules\\/@storybook\\/[^/]*\\/template\\/stories\\//],
+          loader: '../../code/node_modules/esbuild-loader',
+          options: {
+            loader: 'tsx',
+            target: 'es2015',
+          },
+        },
+        ...config.module.rules,
+      ],
+    },
+  })`;
+
+// paths are of the form 'node_modules/@storybook/react'
 async function addStories(paths: string[], { cwd }: { cwd: string }) {
   const mainConfig = await readMainConfig({ cwd });
 
   const stories = mainConfig.getFieldValue(['stories']) as string[];
-  const extraStories = paths.map((p) => path.resolve(p, './template/stories/*.stories.*'));
+  const extraStoryDirsAndExistence = await Promise.all(
+    paths
+      .map((p) => path.join(p, 'template', 'stories'))
+      .map(async (p) => [p, await pathExists(path.resolve(codeDir, p))] as const)
+  );
+
+  const extraStories = extraStoryDirsAndExistence
+    .filter(([, exists]) => exists)
+    .map(([p]) => path.join('..', p, '*.stories.@(js|jsx|ts|tsx)'));
   mainConfig.setFieldValue(['stories'], [...stories, ...extraStories]);
 
-  const code = '(c) => ({ ...c, rules: { ...c.rules, } })';
-  // @ts-ignore (not sure why TS complains here, it does exist)
-  mainConfig.setFieldNode(['webpackFinal'], babelParse(code).program.body[0].expression);
+  mainConfig.setFieldNode(
+    ['webpackFinal'],
+    // @ts-ignore (not sure why TS complains here, it does exist)
+    babelParse(webpackFinalCode).program.body[0].expression
+  );
 
   await writeConfig(mainConfig);
 }
@@ -201,10 +232,9 @@ async function main() {
 
     // TODO -- can we get the options type to return something more specific
     const renderer = renderersMap[framework as 'react' | 'angular'];
-    const isTS = isTSMap[framework as 'react' | 'angular'];
 
     const storiesToAdd = [] as string[];
-    storiesToAdd.push(path.join(codeDir, 'renderers', renderer));
+    storiesToAdd.push(path.join('node_modules', '@storybook', renderer));
 
     // TODO -- sb add <addon> doesn't actually work properly:
     //   - installs in `deps` not `devDeps`
@@ -217,9 +247,8 @@ async function main() {
     }
 
     for (const addon of [...defaultAddons, ...optionValues.addon]) {
-      storiesToAdd.push(path.join(codeDir, 'addons', addon));
+      storiesToAdd.push(path.join('node_modules', '@storybook', `addon-${addon}`));
     }
-
     await addStories(storiesToAdd, { cwd });
 
     if (link) {

From 94aace55dcdeace24c007135840ac7a285f60471 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Tue, 2 Aug 2022 08:38:41 +1000
Subject: [PATCH 5/7] Cleanup

---
 scripts/example.ts   | 14 +-------------
 scripts/package.json |  1 -
 scripts/yarn.lock    |  3 +--
 3 files changed, 2 insertions(+), 16 deletions(-)

diff --git a/scripts/example.ts b/scripts/example.ts
index 4c7adb744f70..789b836d55bb 100644
--- a/scripts/example.ts
+++ b/scripts/example.ts
@@ -1,23 +1,11 @@
 /* eslint-disable no-restricted-syntax, no-await-in-loop */
 import path from 'path';
-import {
-  remove,
-  pathExists,
-  readJSON,
-  writeJSON,
-  ensureSymlink,
-  readFile,
-  writeFile,
-  mkdir,
-} from 'fs-extra';
+import { remove, pathExists, readJSON, writeJSON } from 'fs-extra';
 import prompts from 'prompts';
-import globby from 'globby';
-import { transform } from 'esbuild';
 
 import { getOptionsOrPrompt } from './utils/options';
 import { executeCLIStep } from './utils/cli-step';
 import { exec } from '../code/lib/cli/src/repro-generators/scripts';
-import type { Parameters } from '../code/lib/cli/src/repro-generators/configs';
 import { getInterpretedFile } from '../code/lib/core-common';
 import { readConfig, writeConfig } from '../code/lib/csf-tools';
 import { babelParse } from '../code/lib/csf-tools/src/babelParse';
diff --git a/scripts/package.json b/scripts/package.json
index 31e0e910eab1..2edc8c1563ed 100644
--- a/scripts/package.json
+++ b/scripts/package.json
@@ -129,7 +129,6 @@
     "fs-extra": "^9.0.1",
     "github-release-from-changelog": "^2.1.1",
     "glob": "^7.1.6",
-    "globby": "^11.0.2",
     "http-server": "^0.12.3",
     "husky": "^4.3.7",
     "jest": "^26.6.3",
diff --git a/scripts/yarn.lock b/scripts/yarn.lock
index f8ab0d448c2b..c7d72426e272 100644
--- a/scripts/yarn.lock
+++ b/scripts/yarn.lock
@@ -3316,7 +3316,6 @@ __metadata:
     fs-extra: ^9.0.1
     github-release-from-changelog: ^2.1.1
     glob: ^7.1.6
-    globby: ^11.0.2
     http-server: ^0.12.3
     husky: ^4.3.7
     jest: ^26.6.3
@@ -10199,7 +10198,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"globby@npm:^11.0.1, globby@npm:^11.0.2, globby@npm:^11.0.3, globby@npm:^11.0.4, globby@npm:^11.1.0":
+"globby@npm:^11.0.1, globby@npm:^11.0.3, globby@npm:^11.0.4, globby@npm:^11.1.0":
   version: 11.1.0
   resolution: "globby@npm:11.1.0"
   dependencies:

From 40e2ecac803e03f897ba2af53fbde0586798d216 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Tue, 2 Aug 2022 08:48:07 +1000
Subject: [PATCH 6/7] Use an absolute path for the loader

---
 scripts/example.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/scripts/example.ts b/scripts/example.ts
index 789b836d55bb..7f672d00b4f2 100644
--- a/scripts/example.ts
+++ b/scripts/example.ts
@@ -143,7 +143,8 @@ async function readMainConfig({ cwd }: { cwd: string }) {
   return readConfig(mainConfigPath);
 }
 
-// NOTE: the test here will apply whether the path is symlink-preserved or otherwise
+// NOTE: the test regexp here will apply whether the path is symlink-preserved or otherwise
+const loaderPath = require.resolve('../code/node_modules/esbuild-loader');
 const webpackFinalCode = `
   (config) => ({
     ...config,
@@ -152,7 +153,7 @@ const webpackFinalCode = `
       rules: [
         {
           test: [/\\/node_modules\\/@storybook\\/[^/]*\\/template\\/stories\\//],
-          loader: '../../code/node_modules/esbuild-loader',
+          loader: '${loaderPath}',
           options: {
             loader: 'tsx',
             target: 'es2015',

From 9c80244f2d5dbd666d5954ed80b9127b6453c55a Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Tue, 2 Aug 2022 08:51:23 +1000
Subject: [PATCH 7/7] Cleanup

---
 scripts/example.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/scripts/example.ts b/scripts/example.ts
index 7f672d00b4f2..01013044d31b 100644
--- a/scripts/example.ts
+++ b/scripts/example.ts
@@ -30,7 +30,6 @@ const codeDir = path.resolve(__dirname, '../code');
 
 // TODO -- how to encode this information
 const renderersMap = { react: 'react', angular: 'angular' };
-const isTSMap = { react: false, angular: true };
 
 async function getOptions() {
   return getOptionsOrPrompt('yarn example', {