Build: convert addon-docs to use ts-up

.circleci/config.yml

@@ -378,7 +378,7 @@ jobs:
             yarn coverage
   chromatic-internal-storybooks:
     executor:
-      class: medium
+      class: medium+
       name: sb_node_16_browsers
     steps:
       # switched this to the CircleCI helper to get the full git history for TurboSnap

code/addons/docs/package.json

@@ -24,9 +24,44 @@
     "url": "https://opencollective.com/storybook"
   },
   "license": "MIT",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./preview": {
+      "require": "./dist/preview.js",
+      "import": "./dist/preview.mjs",
+      "types": "./dist/preview.d.ts"
+    },
+    "./preset": {
+      "require": "./dist/preset.js",
+      "import": "./dist/preset.mjs",
+      "types": "./dist/preset.d.ts"
+    },
+    "./dist/preview": {
+      "require": "./dist/preview.js",
+      "import": "./dist/preview.mjs",
+      "types": "./dist/preview.d.ts"
+    },
+    "./dist/preset": {
+      "require": "./dist/preset.js",
+      "import": "./dist/preset.mjs",
+      "types": "./dist/preset.d.ts"
+    },
+    "./svelte/HOC.svelte": "./svelte/HOC.svelte",
+    "./ember": "./ember/index.js",
+    "./ember/index.js": "./ember/index.js",
+    "./angular": "./angular/index.js",
+    "./angular/index.js": "./angular/index.js",
+    "./web-components/index.js": "./web-components/index.js",
+    "./jest-transform-mdx.js": "./jest-transform-mdx.js",
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
     "angular/**/*",
@@ -46,29 +81,21 @@
   ],
   "scripts": {
     "check": "../../../scripts/node_modules/.bin/tsc --noEmit",
-    "prep": "node ../../../scripts/prepare.js"
+    "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
     "@babel/plugin-transform-react-jsx": "^7.12.12",
     "@jest/transform": "^26.6.2",
     "@mdx-js/react": "^2.1.5",
-    "@storybook/addons": "7.0.0-alpha.48",
-    "@storybook/api": "7.0.0-alpha.48",
     "@storybook/blocks": "7.0.0-alpha.48",
     "@storybook/components": "7.0.0-alpha.48",
-    "@storybook/core-common": "7.0.0-alpha.48",
-    "@storybook/core-events": "7.0.0-alpha.48",
     "@storybook/csf-plugin": "7.0.0-alpha.48",
     "@storybook/csf-tools": "7.0.0-alpha.48",
-    "@storybook/docs-tools": "7.0.0-alpha.48",
     "@storybook/mdx2-csf": "next",
     "@storybook/node-logger": "7.0.0-alpha.48",
     "@storybook/postinstall": "7.0.0-alpha.48",
     "@storybook/preview-web": "7.0.0-alpha.48",
-    "@storybook/store": "7.0.0-alpha.48",
-    "@storybook/theming": "7.0.0-alpha.48",
     "@storybook/types": "7.0.0-alpha.48",
-    "dequal": "^2.0.2",
     "fs-extra": "^9.0.1",
     "global": "^4.4.0",
     "remark-external-links": "^8.0.0",
@@ -94,6 +121,13 @@
   "publishConfig": {
     "access": "public"
   },
+  "bundler": {
+    "entries": [
+      "./src/index.ts",
+      "./src/preset.ts",
+      "./src/preview.ts"
+    ]
+  },
   "gitHead": "b58a29b785462f8a8b711b6bb2d7223fd6dc17fd",
   "storybook": {
     "displayName": "Docs",

code/addons/docs/preset.js

@@ -1 +1 @@
-module.exports = require('./dist/cjs/preset');
+module.exports = require('./dist/preset');

code/addons/docs/preview.js

@@ -1 +1 @@
-export * from './dist/esm/preview';
+export * from './dist/preview';

code/addons/docs/src/DocsRenderer.tsx

@@ -33,6 +33,7 @@ export class DocsRenderer<TFramework extends Framework> {
         ...defaultComponents,
         ...docsParameter?.components,
       };
+
       ReactDOM.render(
         <MDXProvider components={components}>
           <Docs key={Math.random()} context={context} docsParameter={docsParameter} />

code/addons/docs/src/index.ts

@@ -1,2 +1,2 @@
-export * from './blocks';
+export * from '@storybook/blocks';
 export { DocsRenderer } from './DocsRenderer';

code/addons/docs/src/preset.ts

@@ -46,7 +46,7 @@ function createBabelOptions({ babelOptions, mdxBabelOptions, configureJSX }: Bab
   };
 }
 
-export async function webpack(
+async function webpack(
   webpackConfig: any = {},
   options: Options &
     BabelParams & {
@@ -160,7 +160,7 @@ export async function webpack(
   return result;
 }
 
-export const storyIndexers = (indexers: CoreCommon_StoryIndexer[] | null) => {
+const storyIndexers = (indexers: CoreCommon_StoryIndexer[] | null) => {
   const mdxIndexer = async (fileName: string, opts: CoreCommon_IndexerOptions) => {
     let code = (await fs.readFile(fileName, 'utf-8')).toString();
     const { compile } = await import('@storybook/mdx2-csf');
@@ -176,11 +176,21 @@ export const storyIndexers = (indexers: CoreCommon_StoryIndexer[] | null) => {
   ];
 };
 
-export const docs = (docsOptions: DocsOptions) => {
+const docs = (docsOptions: DocsOptions) => {
   return {
     ...docsOptions,
     enabled: true,
     defaultName: 'Docs',
     docsPage: true,
   };
 };
+
+/*
+ * This is a workaround for https://github.com/Swatinem/rollup-plugin-dts/issues/162
+ * something down the dependency chain is using typescript namespaces, which are not supported by rollup-plugin-dts
+ */
+const webpackX = webpack as any;
+const storyIndexersX = storyIndexers as any;
+const docsX = docs as any;
+
+export { webpackX as webpack, storyIndexersX as storyIndexers, docsX as docs };

code/addons/essentials/package.json

@@ -135,44 +135,6 @@
   "peerDependencies": {
     "@babel/core": "^7.9.6"
   },
-  "peerDependenciesMeta": {
-    "@storybook/angular": {
-      "optional": true
-    },
-    "@storybook/html": {
-      "optional": true
-    },
-    "@storybook/vue": {
-      "optional": true
-    },
-    "@storybook/vue3": {
-      "optional": true
-    },
-    "@storybook/web-components": {
-      "optional": true
-    },
-    "lit": {
-      "optional": true
-    },
-    "lit-html": {
-      "optional": true
-    },
-    "react": {
-      "optional": true
-    },
-    "react-dom": {
-      "optional": true
-    },
-    "svelte": {
-      "optional": true
-    },
-    "sveltedoc-parser": {
-      "optional": true
-    },
-    "vue": {
-      "optional": true
-    }
-  },
   "publishConfig": {
     "access": "public"
   },

code/addons/essentials/src/docs/preset.ts

@@ -1 +1,2 @@
-export * from '@storybook/addon-docs/preset';
+/* eslint-disable import/export */
+export * from '@storybook/addon-docs/dist/preset';

code/addons/essentials/src/docs/preview.ts

@@ -1 +1 @@
-export * from '@storybook/addon-docs/preview';
+export * from '@storybook/addon-docs/dist/preview';

code/addons/essentials/src/typings.d.ts

@@ -1,5 +1 @@
 declare module 'fs';
-
-// TODO: Remove this once addon-docs is generated with tsup
-declare module '@storybook/addon-docs/preview';
-declare module '@storybook/addon-docs/preset';

code/ui/blocks/package.json

@@ -38,6 +38,7 @@
     "*.d.ts"
   ],
   "scripts": {
+    "check": "../../../scripts/node_modules/.bin/tsc --noEmit",
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
@@ -70,7 +71,8 @@
     "@types/color-convert": "^2.0.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"

code/ui/blocks/src/blocks/enhanceSource.ts

@@ -1,5 +1,4 @@
-import type { Parameters } from '@storybook/types';
-import type { Story } from '@storybook/store';
+import type { Parameters, Store_Story } from '@storybook/types';
 import { combineParameters } from '@storybook/store';
 
 // ============================================================
@@ -77,7 +76,7 @@ const extract = (targetId: string, { source, locationsMap }: StorySource) => {
   return extractSource(location, lines);
 };
 
-export const enhanceSource = (story: Story<any>): Parameters => {
+export const enhanceSource = (story: Store_Story<any>): Parameters => {
   const { id, parameters } = story;
   const { storySource, docs = {} } = parameters;
   const { transformSource } = docs;

code/ui/blocks/src/blocks/external/ExternalPreview.ts

@@ -36,7 +36,7 @@ export class ExternalPreview<TFramework extends Framework = Framework> extends P
 
   private moduleExportsByImportPath: Record<Path, Store_ModuleExports> = {};
 
-  constructor(public projectAnnotations: ProjectAnnotations) {
+  constructor(public projectAnnotations: ProjectAnnotations<TFramework>) {
     super(new Channel());
 
     this.initialize({

code/ui/blocks/src/components/Toolbar.tsx

@@ -1,6 +1,7 @@
 import type { FC, MouseEvent } from 'react';
 import React, { Fragment } from 'react';
 import { styled } from '@storybook/theming';
+// eslint-disable-next-line import/no-extraneous-dependencies
 import {
   FlexBar,
   Icons,

code/ui/blocks/src/controls/Range.tsx

@@ -2,7 +2,7 @@ import type { FC, ChangeEvent } from 'react';
 import React, { useMemo } from 'react';
 
 import { styled } from '@storybook/theming';
-import { lighten, darken, rgba } from 'polished';
+import { lighten, darken, rgba } from 'polished'; // eslint-disable-line import/no-extraneous-dependencies
 import { getControlId } from './helpers';
 
 import type { ControlProps, NumberValue, RangeConfig } from './types';

code/ui/blocks/src/controls/react-editable-json-tree/JsonNodes.tsx

@@ -1086,7 +1086,6 @@ export class JsonObject extends Component<JsonObjectProps, JsonObjectState> {
   onChildUpdate(childKey: string, childData: any) {
     const { data, keyPath } = this.state;
     // Update data
-    // @ts-expect-error (Converted from ts-ignore)
     data[childKey] = childData;
     // Put new data
     this.setState({
@@ -1117,7 +1116,6 @@ export class JsonObject extends Component<JsonObjectProps, JsonObjectState> {
     beforeAddAction(key, keyPath, deep, newValue)
       .then(() => {
         // Update data
-        // @ts-expect-error (Converted from ts-ignore)
         data[key] = newValue;
         this.setState({
           data,
@@ -1143,7 +1141,6 @@ export class JsonObject extends Component<JsonObjectProps, JsonObjectState> {
     return () => {
       const { beforeRemoveAction, logger } = this.props;
       const { data, keyPath, nextDeep: deep } = this.state;
-      // @ts-expect-error (Converted from ts-ignore)
       const oldValue = data[key];
       // Before Remove Action
       beforeRemoveAction(key, keyPath, deep, oldValue)
@@ -1156,7 +1153,6 @@ export class JsonObject extends Component<JsonObjectProps, JsonObjectState> {
             type: deltaTypes.REMOVE_DELTA_TYPE,
           };
 
-          // @ts-expect-error (Converted from ts-ignore)
           delete data[key];
           this.setState({ data });
 
@@ -1182,14 +1178,12 @@ export class JsonObject extends Component<JsonObjectProps, JsonObjectState> {
       const { data, keyPath, nextDeep: deep } = this.state;
 
       // Old value
-      // @ts-expect-error (Converted from ts-ignore)
       const oldValue = data[key];
 
       // Before update action
       beforeUpdateAction(key, keyPath, deep, oldValue, value)
         .then(() => {
           // Update value
-          // @ts-expect-error (Converted from ts-ignore)
           data[key] = value;
           // Set state
           this.setState({