add create export for lib/theming, proper

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

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';

code/lib/theming/create.d.ts

@@ -0,0 +1 @@
+export * from './dist/create';

code/lib/theming/create.js

@@ -1 +1 @@
-export * from './dist/index.mjs';
+module.exports = require('./dist/create');

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",
@@ -51,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",
@@ -68,8 +75,10 @@
   },
   "bundler": {
     "entries": [
-      "./src/index.ts"
-    ]
+      "./src/index.ts",
+      "./src/create.ts"
+    ],
+    "post": "./scripts/fix-theme-type-export.ts"
   },
   "gitHead": "bd59f1eef0f644175abdb0d9873ed0553f431f53"
 }

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;
+});

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';

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 } from './types';
 import { getPreferredColorScheme } from './utils';
 
 export const themes: { light: ThemeVars; dark: ThemeVars; normal: ThemeVars } = {

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

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',

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',

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;
   }

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",

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',

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

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',

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',

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