Addon-docs: Refactor docs support into individual framework packages

addons/docs/angular/index.d.ts

@@ -1 +1 @@
-export * from '../dist/ts3.9/frameworks/angular/index.d';
+export declare const setCompodocJson: (compodocJson: any) => void;

addons/docs/angular/index.js

@@ -1 +1,7 @@
-module.exports = require('../dist/esm/frameworks/angular/index');
+/* eslint-disable no-underscore-dangle */
+/* global window */
+
+export const setCompodocJson = (compodocJson) => {
+  // @ts-ignore
+  window.__STORYBOOK_COMPODOC_JSON__ = compodocJson;
+};

addons/docs/ember/index.js

@@ -1 +1,6 @@
-module.exports = require('../dist/esm/frameworks/ember');
+/* eslint-disable no-underscore-dangle */
+/* global window */
+
+export const setJSONDoc = (jsondoc) => {
+  window.__EMBER_GENERATED_DOC_JSON__ = jsondoc;
+};

addons/docs/package.json

@@ -55,157 +55,62 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@babel/core": "^7.12.10",
-    "@babel/generator": "^7.12.11",
-    "@babel/parser": "^7.12.11",
     "@babel/plugin-transform-react-jsx": "^7.12.12",
     "@babel/preset-env": "^7.12.11",
     "@jest/transform": "^26.6.2",
     "@mdx-js/react": "^1.6.22",
     "@storybook/addons": "6.5.0-alpha.47",
     "@storybook/api": "6.5.0-alpha.47",
-    "@storybook/builder-webpack4": "6.5.0-alpha.47",
-    "@storybook/client-logger": "6.5.0-alpha.47",
     "@storybook/components": "6.5.0-alpha.47",
-    "@storybook/core": "6.5.0-alpha.47",
+    "@storybook/core-common": "6.5.0-alpha.47",
     "@storybook/core-events": "6.5.0-alpha.47",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/csf-tools": "6.5.0-alpha.47",
+    "@storybook/docs-tools": "6.5.0-alpha.47",
     "@storybook/mdx1-csf": "canary",
     "@storybook/node-logger": "6.5.0-alpha.47",
     "@storybook/postinstall": "6.5.0-alpha.47",
     "@storybook/preview-web": "6.5.0-alpha.47",
     "@storybook/source-loader": "6.5.0-alpha.47",
     "@storybook/store": "6.5.0-alpha.47",
     "@storybook/theming": "6.5.0-alpha.47",
-    "acorn": "^7.4.1",
-    "acorn-jsx": "^5.3.1",
-    "acorn-walk": "^7.2.0",
     "core-js": "^3.8.2",
-    "doctrine": "^3.0.0",
-    "escodegen": "^2.0.0",
     "fast-deep-equal": "^3.1.3",
     "global": "^4.4.0",
-    "html-tags": "^3.1.0",
-    "loader-utils": "^2.0.0",
     "lodash": "^4.17.21",
-    "nanoid": "^3.1.23",
-    "p-limit": "^3.1.0",
-    "prettier": ">=2.2.1 <=2.3.0",
-    "prop-types": "^15.7.2",
-    "react-element-to-jsx-string": "^14.3.4",
-    "regenerator-runtime": "^0.13.7",
     "remark-external-links": "^8.0.0",
     "remark-slug": "^6.0.0",
     "ts-dedent": "^2.0.0",
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "@angular/core": "^11.2.14",
     "@babel/core": "^7.12.10",
-    "@emotion/core": "^10.3.1",
-    "@emotion/styled": "^10.0.27",
-    "@storybook/angular": "6.5.0-alpha.47",
-    "@storybook/html": "6.5.0-alpha.47",
     "@storybook/mdx2-csf": "canary",
-    "@storybook/react": "6.5.0-alpha.47",
-    "@storybook/vue": "6.5.0-alpha.47",
-    "@storybook/web-components": "6.5.0-alpha.47",
-    "@types/cross-spawn": "^6.0.2",
-    "@types/doctrine": "^0.0.3",
-    "@types/estree": "^0.0.44",
-    "@types/loader-utils": "^2.0.0",
-    "@types/prop-types": "^15.7.3",
-    "@types/tmp": "^0.2.0",
     "@types/util-deprecate": "^1.0.0",
     "babel-loader": "^8.0.0",
-    "babel-plugin-react-docgen": "^4.2.1",
-    "cross-spawn": "^7.0.3",
-    "jest": "^26.6.3",
-    "jest-specific-snapshot": "^4.0.0",
-    "lit-element": "^3.0.2",
-    "lit-html": "^2.0.2",
-    "require-from-string": "^2.0.2",
-    "rxjs": "^6.6.3",
-    "styled-components": "^5.2.1",
-    "sveltedoc-parser": "4.1.0",
-    "tmp": "^0.2.1",
-    "vue": "^2.6.10",
-    "webpack": "4",
-    "zone.js": "^0.11.3"
+    "webpack": "4"
   },
   "peerDependencies": {
-    "@storybook/angular": "6.5.0-alpha.47",
-    "@storybook/html": "6.5.0-alpha.47",
     "@storybook/mdx2-csf": "*",
-    "@storybook/react": "6.5.0-alpha.47",
-    "@storybook/vue": "6.5.0-alpha.47",
-    "@storybook/vue3": "6.5.0-alpha.47",
-    "@storybook/web-components": "6.5.0-alpha.47",
-    "lit": "^2.0.0",
-    "lit-html": "^1.4.1 || ^2.0.0",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0",
-    "svelte": "^3.31.2",
-    "sveltedoc-parser": "^4.1.0",
-    "vue": "^2.6.10 || ^3.0.0",
     "webpack": "*"
   },
   "peerDependenciesMeta": {
-    "@storybook/angular": {
-      "optional": true
-    },
     "@storybook/builder-webpack4": {
       "optional": true
     },
     "@storybook/builder-webpack5": {
       "optional": true
     },
-    "@storybook/html": {
-      "optional": true
-    },
-    "@storybook/manager-webpack4": {
-      "optional": true
-    },
-    "@storybook/manager-webpack5": {
-      "optional": true
-    },
     "@storybook/mdx2-csf": {
       "optional": true
     },
-    "@storybook/react": {
-      "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
-    },
     "webpack": {
       "optional": true
     }

addons/docs/preset.js

@@ -1,16 +1,16 @@
-const getFrameworkPresets = (framework) => {
-  try {
-    return [require.resolve(`./dist/cjs/frameworks/${framework}/preset`)];
-  } catch (err) {
-    // there is no custom config for the user's framework, do nothing
-    return [];
-  }
-};
+const { findDistEsm } = require('@storybook/core-common');
+const { webpack } = require('./dist/cjs/frameworks/common/preset');
+
+function managerEntries(entry = [], options) {
+  return [...entry, findDistEsm(__dirname, 'register')];
+}
+
+function config(entry = [], options = {}) {
+  return [findDistEsm(__dirname, 'frameworks/common/config'), ...entry];
+}
 
-module.exports = (storybookOptions, presetOptions) => {
-  return [
-    { name: require.resolve('./common-preset'), options: presetOptions },
-    { name: require.resolve('./dist/cjs/frameworks/common/preset'), options: presetOptions },
-    ...getFrameworkPresets(storybookOptions.framework),
-  ];
+module.exports = {
+  webpack,
+  managerEntries,
+  config,
 };

addons/docs/src/blocks/ArgsTable.tsx

@@ -7,6 +7,7 @@ import {
   SortType,
   TabbedArgsTable,
 } from '@storybook/components';
+import { ArgTypesExtractor } from '@storybook/docs-tools';
 import { addons } from '@storybook/addons';
 import { filterArgTypes, PropDescriptor } from '@storybook/store';
 import Events from '@storybook/core-events';
@@ -15,7 +16,6 @@ import { StrictArgTypes, Args } from '@storybook/csf';
 import { DocsContext, DocsContextProps } from './DocsContext';
 import { Component, CURRENT_SELECTION, PRIMARY_STORY } from './types';
 import { getComponentName } from './utils';
-import { ArgTypesExtractor } from '../lib/docgen/types';
 import { lookupStoryId } from './Story';
 import { useStory } from './useStory';
 

addons/docs/src/blocks/Description.tsx

@@ -1,8 +1,9 @@
 import React, { FunctionComponent, useContext } from 'react';
 import { Description, DescriptionProps as PureDescriptionProps } from '@storybook/components';
+import { str } from '@storybook/docs-tools';
+
 import { DocsContext, DocsContextProps } from './DocsContext';
 import { Component, CURRENT_SELECTION } from './types';
-import { str } from '../lib/docgen';
 
 export enum DescriptionType {
   INFO = 'info',

addons/docs/src/frameworks/common/config.ts

@@ -1,5 +1,3 @@
-import { enhanceArgTypes } from './enhanceArgTypes';
-
 export const parameters = {
   docs: {
     inlineStories: false,
@@ -8,5 +6,3 @@ export const parameters = {
     iframeHeight: 100,
   },
 };
-
-export const argTypesEnhancers = [enhanceArgTypes];

app/angular/package.json

@@ -47,10 +47,12 @@
   "dependencies": {
     "@storybook/addons": "6.5.0-alpha.47",
     "@storybook/api": "6.5.0-alpha.47",
+    "@storybook/client-logger": "6.5.0-alpha.47",
     "@storybook/core": "6.5.0-alpha.47",
     "@storybook/core-common": "6.5.0-alpha.47",
     "@storybook/core-events": "6.5.0-alpha.47",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
+    "@storybook/docs-tools": "6.5.0-alpha.47",
     "@storybook/node-logger": "6.5.0-alpha.47",
     "@storybook/semver": "^7.3.2",
     "@storybook/store": "6.5.0-alpha.47",
@@ -63,15 +65,17 @@
     "find-up": "^5.0.0",
     "fork-ts-checker-webpack-plugin": "^4.1.6",
     "global": "^4.4.0",
+    "nanoid": "^3.1.23",
+    "p-limit": "^3.1.0",
     "postcss": "^7.0.36",
     "postcss-loader": "^4.2.0",
+    "prettier": ">=2.2.1 <=2.3.0",
     "raw-loader": "^4.0.2",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "read-pkg-up": "^7.0.1",
     "regenerator-runtime": "^0.13.7",
     "sass-loader": "^10.1.0",
-    "strip-json-comments": "3.1.1",
     "telejson": "^5.3.3",
     "ts-dedent": "^2.0.0",
     "ts-loader": "^8.0.14",
@@ -93,10 +97,12 @@
     "@angular/platform-browser-dynamic": "^11.2.14",
     "@nrwl/workspace": "^11.6.3",
     "@types/autoprefixer": "^9.7.2",
-    "@types/jest": "^26.0.16",
+    "@types/tmp": "^0.2.3",
+    "cross-spawn": "^7.0.3",
     "jest": "^26.6.3",
     "jest-preset-angular": "^8.3.2",
-    "ts-jest": "^26.4.4"
+    "jest-specific-snapshot": "^4.0.0",
+    "tmp": "^0.2.1"
   },
   "peerDependencies": {
     "@angular-devkit/architect": ">=0.8.9",

app/angular/src/builders/build-storybook/index.ts

@@ -10,14 +10,14 @@ import { from, Observable, of, throwError } from 'rxjs';
 import type { CLIOptions } from '@storybook/core-common';
 import { catchError, map, mapTo, switchMap } from 'rxjs/operators';
 import { sync as findUpSync } from 'find-up';
-
-// eslint-disable-next-line import/no-extraneous-dependencies
-import buildStandalone, { StandaloneOptions } from '@storybook/angular/standalone';
 import {
   BrowserBuilderOptions,
   ExtraEntryPoint,
   StylePreprocessorOptions,
 } from '@angular-devkit/build-angular';
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import buildStandalone, { StandaloneOptions } from '@storybook/angular/standalone';
 import { runCompodoc } from '../utils/run-compodoc';
 import { buildStandaloneErrorHandler } from '../utils/build-standalone-errors-handler';