From 26a1360ed01f15159075579f10daa1ff831cf474 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Tue, 9 Aug 2022 14:24:41 +0200
Subject: [PATCH 1/4] add `create` export for lib/theming, proper

This is actually kind of a good idea, because of the size of lib/theming/index
---
 code/examples/cra-kitchen-sink/.storybook/manager.js      | 2 +-
 code/lib/api/src/modules/layout.ts                        | 2 +-
 code/lib/theming/create.d.ts                              | 1 +
 code/lib/theming/create.js                                | 2 +-
 code/lib/theming/package.json                             | 8 +++++++-
 code/lib/theming/src/create.ts                            | 4 +++-
 code/lib/theming/src/themes/dark.ts                       | 2 +-
 code/lib/theming/src/themes/light.ts                      | 2 +-
 .../common/storybook-theme-example-variables.ts.mdx       | 2 +-
 docs/snippets/common/your-theme.js.mdx                    | 2 +-
 10 files changed, 18 insertions(+), 9 deletions(-)
 create mode 100644 code/lib/theming/create.d.ts

diff --git a/code/examples/cra-kitchen-sink/.storybook/manager.js b/code/examples/cra-kitchen-sink/.storybook/manager.js
index a53f23565dd2..8b2c926cf5fe 100644
--- a/code/examples/cra-kitchen-sink/.storybook/manager.js
+++ b/code/examples/cra-kitchen-sink/.storybook/manager.js
@@ -1,4 +1,4 @@
-import { create } from '@storybook/theming';
+import { create } from '@storybook/theming/create';
 import { addons } from '@storybook/addons';
 
 addons.setConfig({
diff --git a/code/lib/api/src/modules/layout.ts b/code/lib/api/src/modules/layout.ts
index 0cd7c12f608e..36991ef2e617 100644
--- a/code/lib/api/src/modules/layout.ts
+++ b/code/lib/api/src/modules/layout.ts
@@ -1,7 +1,7 @@
 import global from 'global';
 import pick from 'lodash/pick';
 import { dequal as deepEqual } from 'dequal';
-import { create } from '@storybook/theming';
+import { create } from '@storybook/theming/create';
 import { SET_CONFIG } from '@storybook/core-events';
 import type { ThemeVars } from '@storybook/theming';
 import { once } from '@storybook/client-logger';
diff --git a/code/lib/theming/create.d.ts b/code/lib/theming/create.d.ts
new file mode 100644
index 000000000000..f48ee303c354
--- /dev/null
+++ b/code/lib/theming/create.d.ts
@@ -0,0 +1 @@
+export * from './dist/create';
diff --git a/code/lib/theming/create.js b/code/lib/theming/create.js
index 98bc230bc269..f6b372867967 100644
--- a/code/lib/theming/create.js
+++ b/code/lib/theming/create.js
@@ -1 +1 @@
-export * from './dist/index.mjs';
+export * from './dist/create.mjs';
diff --git a/code/lib/theming/package.json b/code/lib/theming/package.json
index 3869a28d88fd..6d1448f1dcd3 100644
--- a/code/lib/theming/package.json
+++ b/code/lib/theming/package.json
@@ -26,6 +26,11 @@
       "import": "./dist/index.mjs",
       "types": "./dist/index.d.ts"
     },
+    "./create": {
+      "require": "./dist/create.js",
+      "import": "./dist/create.mjs",
+      "types": "./dist/create.d.ts"
+    },
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",
@@ -68,7 +73,8 @@
   },
   "bundler": {
     "entries": [
-      "./src/index.ts"
+      "./src/index.ts",
+      "./src/create.ts"
     ]
   },
   "gitHead": "bd59f1eef0f644175abdb0d9873ed0553f431f53"
diff --git a/code/lib/theming/src/create.ts b/code/lib/theming/src/create.ts
index 48ca51df8f68..ae2603cf3015 100644
--- a/code/lib/theming/src/create.ts
+++ b/code/lib/theming/src/create.ts
@@ -2,7 +2,7 @@
 import lightThemeVars from './themes/light';
 import darkThemeVars from './themes/dark';
 
-import { ThemeVars } from './types';
+import type { ThemeVars, StorybookTheme } from './types';
 import { getPreferredColorScheme } from './utils';
 
 export const themes: { light: ThemeVars; dark: ThemeVars; normal: ThemeVars } = {
@@ -33,3 +33,5 @@ export const create = (
     ...{ barSelectedColor: vars.barSelectedColor || inherit.colorSecondary },
   };
 };
+
+export { StorybookTheme };
diff --git a/code/lib/theming/src/themes/dark.ts b/code/lib/theming/src/themes/dark.ts
index 795307eadc49..a80d0378dc29 100644
--- a/code/lib/theming/src/themes/dark.ts
+++ b/code/lib/theming/src/themes/dark.ts
@@ -1,5 +1,5 @@
 import { color, typography } from '../base';
-import { ThemeVars } from '../types';
+import type { ThemeVars } from '../types';
 
 const theme: ThemeVars = {
   base: 'dark',
diff --git a/code/lib/theming/src/themes/light.ts b/code/lib/theming/src/themes/light.ts
index 49312e5e62bc..1a647a2e6a60 100644
--- a/code/lib/theming/src/themes/light.ts
+++ b/code/lib/theming/src/themes/light.ts
@@ -1,5 +1,5 @@
 import { color, typography, background } from '../base';
-import { ThemeVars } from '../types';
+import type { ThemeVars } from '../types';
 
 const theme: ThemeVars = {
   base: 'light',
diff --git a/docs/snippets/common/storybook-theme-example-variables.ts.mdx b/docs/snippets/common/storybook-theme-example-variables.ts.mdx
index a4d2f4dcc3ae..f3c4ad855389 100644
--- a/docs/snippets/common/storybook-theme-example-variables.ts.mdx
+++ b/docs/snippets/common/storybook-theme-example-variables.ts.mdx
@@ -1,7 +1,7 @@
 ```ts
 // .storybook/YourTheme.js
 
-import { create } from '@storybook/theming';
+import { create } from '@storybook/theming/create';
 
 export default create({
   base: 'light',
diff --git a/docs/snippets/common/your-theme.js.mdx b/docs/snippets/common/your-theme.js.mdx
index 49996ef0c419..6a9b843f40ae 100644
--- a/docs/snippets/common/your-theme.js.mdx
+++ b/docs/snippets/common/your-theme.js.mdx
@@ -1,7 +1,7 @@
 ```js
 // .storybook/YourTheme.js
 
-import { create } from '@storybook/theming';
+import { create } from '@storybook/theming/create';
 
 export default create({
   base: 'light',

From 852d1263d32077f832d3989e40c45ab59881cdf7 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Wed, 10 Aug 2022 11:20:47 +0200
Subject: [PATCH 2/4] fixes

---
 code/lib/theming/package.json                 |  5 ++-
 .../theming/scripts/fix-theme-type-export.ts  | 28 ++++++++++++++++
 code/lib/theming/src/convert.ts               |  2 +-
 code/lib/theming/src/create.ts                |  4 +--
 code/lib/theming/src/ensure.ts                |  2 +-
 code/lib/theming/src/utils.ts                 |  3 +-
 code/yarn.lock                                |  2 ++
 scripts/prepare/bundle.ts                     | 32 +++++++++----------
 8 files changed, 54 insertions(+), 24 deletions(-)
 create mode 100644 code/lib/theming/scripts/fix-theme-type-export.ts

diff --git a/code/lib/theming/package.json b/code/lib/theming/package.json
index 6d1448f1dcd3..c21e9d3e7e02 100644
--- a/code/lib/theming/package.json
+++ b/code/lib/theming/package.json
@@ -56,8 +56,10 @@
     "@emotion/is-prop-valid": "^1.1.2",
     "@emotion/react": "^11.8.1",
     "@emotion/styled": "^11.8.1",
+    "@types/fs-extra": "^9.0.6",
     "@types/node": "^14.14.20 || ^16.0.0",
     "deep-object-diff": "^1.1.0",
+    "fs-extra": "^9.0.1",
     "global": "^4.4.0",
     "polished": "^4.2.2",
     "ts-dedent": "^2.0.0",
@@ -75,7 +77,8 @@
     "entries": [
       "./src/index.ts",
       "./src/create.ts"
-    ]
+    ],
+    "post": "./scripts/fix-theme-type-export.ts"
   },
   "gitHead": "bd59f1eef0f644175abdb0d9873ed0553f431f53"
 }
diff --git a/code/lib/theming/scripts/fix-theme-type-export.ts b/code/lib/theming/scripts/fix-theme-type-export.ts
new file mode 100644
index 000000000000..9e5ff7cb5973
--- /dev/null
+++ b/code/lib/theming/scripts/fix-theme-type-export.ts
@@ -0,0 +1,28 @@
+/* eslint-disable no-console */
+import { readFile, writeFile } from 'fs-extra';
+import { dedent } from 'ts-dedent';
+import { join } from 'path';
+
+const run = async () => {
+  const target = join(process.cwd(), 'dist', 'index.d.ts');
+  const contents = await readFile(target, 'utf8');
+
+  const footer = contents.includes('// devmode')
+    ? `export { StorybookTheme as Theme } from '../src/index';`
+    : dedent`
+        interface Theme extends StorybookTheme {}
+        export type { Theme };
+      `;
+
+  const newContents = dedent`
+    ${contents}
+    ${footer}
+  `;
+
+  await writeFile(target, newContents);
+};
+
+run().catch((e) => {
+  console.error(e);
+  process.exitCode = 1;
+});
diff --git a/code/lib/theming/src/convert.ts b/code/lib/theming/src/convert.ts
index b4d5a33d23b1..fa7946cf8b81 100644
--- a/code/lib/theming/src/convert.ts
+++ b/code/lib/theming/src/convert.ts
@@ -1,6 +1,6 @@
 import { opacify } from 'polished';
 import { background, typography, color } from './base';
-import { StorybookTheme, Color, ThemeVars } from './types';
+import type { Color, ThemeVars, StorybookTheme } from './types';
 import { easing, animation } from './animation';
 import { create as createSyntax, chromeLight, chromeDark } from './modules/syntax';
 import { getPreferredColorScheme } from './utils';
diff --git a/code/lib/theming/src/create.ts b/code/lib/theming/src/create.ts
index ae2603cf3015..e17ed5e102ea 100644
--- a/code/lib/theming/src/create.ts
+++ b/code/lib/theming/src/create.ts
@@ -2,7 +2,7 @@
 import lightThemeVars from './themes/light';
 import darkThemeVars from './themes/dark';
 
-import type { ThemeVars, StorybookTheme } from './types';
+import type { ThemeVars } from './types';
 import { getPreferredColorScheme } from './utils';
 
 export const themes: { light: ThemeVars; dark: ThemeVars; normal: ThemeVars } = {
@@ -33,5 +33,3 @@ export const create = (
     ...{ barSelectedColor: vars.barSelectedColor || inherit.colorSecondary },
   };
 };
-
-export { StorybookTheme };
diff --git a/code/lib/theming/src/ensure.ts b/code/lib/theming/src/ensure.ts
index 9c827608e922..27e93518954f 100644
--- a/code/lib/theming/src/ensure.ts
+++ b/code/lib/theming/src/ensure.ts
@@ -4,7 +4,7 @@ import { deletedDiff } from 'deep-object-diff';
 import { dedent } from 'ts-dedent';
 
 import light from './themes/light';
-import { StorybookTheme, ThemeVars } from './types';
+import type { ThemeVars, StorybookTheme } from './types';
 import { convert } from './convert';
 
 export const ensure = (input: ThemeVars): StorybookTheme => {
diff --git a/code/lib/theming/src/utils.ts b/code/lib/theming/src/utils.ts
index b962dc1268a7..2c94ea94e8ce 100644
--- a/code/lib/theming/src/utils.ts
+++ b/code/lib/theming/src/utils.ts
@@ -12,8 +12,7 @@ export const mkColor = (color: string) => ({ color });
 const isColorString = (color: string) => {
   if (typeof color !== 'string') {
     logger.warn(
-      `Color passed to theme object should be a string. Instead ` +
-        `${color}(${typeof color}) was passed.`
+      `Color passed to theme object should be a string. Instead ${color}(${typeof color}) was passed.`
     );
     return false;
   }
diff --git a/code/yarn.lock b/code/yarn.lock
index 2272bd8a4116..e4e9a9a26eee 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -9349,9 +9349,11 @@ __metadata:
     "@emotion/react": ^11.8.1
     "@emotion/styled": ^11.8.1
     "@storybook/client-logger": 7.0.0-alpha.18
+    "@types/fs-extra": ^9.0.6
     "@types/node": ^14.14.20 || ^16.0.0
     core-js: ^3.8.2
     deep-object-diff: ^1.1.0
+    fs-extra: ^9.0.1
     global: ^4.4.0
     memoizerific: ^1.11.3
     polished: ^4.2.2
diff --git a/scripts/prepare/bundle.ts b/scripts/prepare/bundle.ts
index b47eb320e62a..340793bb21df 100755
--- a/scripts/prepare/bundle.ts
+++ b/scripts/prepare/bundle.ts
@@ -4,7 +4,8 @@ import fs from 'fs-extra';
 import path, { join } from 'path';
 import { build } from 'tsup';
 import aliasPlugin from 'esbuild-plugin-alias';
-import shelljs from 'shelljs';
+import dedent from 'ts-dedent';
+import { exec } from '../utils/exec';
 
 const hasFlag = (flags: string[], name: string) => !!flags.find((s) => s.startsWith(`--${name}`));
 
@@ -13,13 +14,13 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => {
     name,
     dependencies,
     peerDependencies,
-    bundler: { entries, platform, pre },
+    bundler: { entries, platform, pre, post },
   } = await fs.readJson(join(cwd, 'package.json'));
 
-  const isThemingPackage = name === '@storybook/theming';
+  const tsnodePath = join(__dirname, '..', 'node_modules', '.bin', 'ts-node');
 
   if (pre) {
-    shelljs.exec(`esrun ${pre}`, { cwd: join(__dirname, '..') });
+    await exec(`${tsnodePath} ${pre}`, { cwd });
   }
 
   const reset = hasFlag(flags, 'reset');
@@ -37,12 +38,14 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => {
         const { name: entryName } = path.parse(file);
 
         const pathName = join(process.cwd(), 'dist', `${entryName}.d.ts`);
-        // throw new Error('test');
         await fs.ensureFile(pathName);
-        const footer = isThemingPackage
-          ? `export { StorybookTheme as Theme } from '../src/${entryName}';\n`
-          : '';
-        await fs.writeFile(pathName, `export * from '../src/${entryName}';\n${footer}`);
+        await fs.writeFile(
+          pathName,
+          dedent`
+          // devmode
+          export * from '../src/${entryName}'
+        `
+        );
       })
     );
   }
@@ -60,7 +63,6 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => {
       target: 'chrome100',
       clean: !watch,
       platform: platform || 'browser',
-      // shims: true,
       esbuildPlugins: [
         aliasPlugin({
           process: path.resolve(
@@ -76,9 +78,6 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => {
           ? {
               entry: entries,
               resolve: true,
-              footer: isThemingPackage
-                ? `interface Theme extends StorybookTheme {};\nexport type { Theme };`
-                : '',
             }
           : false,
       esbuildOptions: (c) => {
@@ -115,9 +114,6 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => {
 
       esbuildOptions: (c) => {
         /* eslint-disable no-param-reassign */
-        // c.define = optimized
-        //   ? { 'process.env.NODE_ENV': "'production'", 'process.env': '{}' }
-        //   : { 'process.env.NODE_ENV': "'development'", 'process.env': '{}' };
         c.platform = 'node';
         c.legalComments = 'none';
         c.minifyWhitespace = optimized;
@@ -127,6 +123,10 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => {
       },
     }),
   ]);
+
+  if (post) {
+    await exec(`${tsnodePath} ${post}`, { cwd }, { debug: true });
+  }
 };
 
 const flags = process.argv.slice(2);

From c1ae30b92ee1b47d94e978e623d47dcb35364cc5 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Wed, 10 Aug 2022 11:32:25 +0200
Subject: [PATCH 3/4] fixes

---
 code/lib/ui/package.json           | 2 +-
 code/lib/ui/src/globals/exports.ts | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/code/lib/ui/package.json b/code/lib/ui/package.json
index 978fac6ae987..53d393a206d0 100644
--- a/code/lib/ui/package.json
+++ b/code/lib/ui/package.json
@@ -97,7 +97,7 @@
     "access": "public"
   },
   "bundler": {
-    "pre": "./../scripts/generate-exports-file.ts",
+    "pre": "./scripts/generate-exports-file.ts",
     "entries": [
       "./src/index.tsx",
       "./src/globals.ts",
diff --git a/code/lib/ui/src/globals/exports.ts b/code/lib/ui/src/globals/exports.ts
index b7fcfc8d3d30..94f836defb8e 100644
--- a/code/lib/ui/src/globals/exports.ts
+++ b/code/lib/ui/src/globals/exports.ts
@@ -213,13 +213,13 @@ export default {
   '@storybook/addons': [
     'AddonStore',
     'Channel',
-    'HooksContext',
     'addons',
-    'applyHooks',
-    'isSupportedType',
     'makeDecorator',
-    'mockChannel',
+    'isSupportedType',
     'types',
+    'mockChannel',
+    'HooksContext',
+    'applyHooks',
     'useArgs',
     'useCallback',
     'useChannel',

From 39ec6f94c42981e45eff7ab436af1d4bc79e2180 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Wed, 10 Aug 2022 11:53:37 +0200
Subject: [PATCH 4/4] change to use cjs

---
 code/lib/theming/create.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/lib/theming/create.js b/code/lib/theming/create.js
index f6b372867967..59ea6440e27a 100644
--- a/code/lib/theming/create.js
+++ b/code/lib/theming/create.js
@@ -1 +1 @@
-export * from './dist/create.mjs';
+module.exports = require('./dist/create');