Angular: Add docs preset to framework

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

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,11 @@
     "@angular/platform-browser-dynamic": "^11.2.14",
     "@nrwl/workspace": "^11.6.3",
     "@types/autoprefixer": "^9.7.2",
-    "@types/jest": "^26.0.16",
+    "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

@@ -12,12 +12,12 @@ 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';
+import buildStandalone, { StandaloneOptions } from '../../../standalone';
 import { runCompodoc } from '../utils/run-compodoc';
 import { buildStandaloneErrorHandler } from '../utils/build-standalone-errors-handler';
 

app/angular/src/client/docs/angular-properties.test.ts

@@ -6,6 +6,7 @@ import { sync as spawnSync } from 'cross-spawn';
 
 import { findComponentByName, extractArgTypesFromData } from './compodoc';
 
+// @ts-ignore
 const { SNAPSHOT_OS } = global;
 
 // File hierarchy: __testfixtures__ / some-test-case / input.*

app/angular/src/client/docs/config.ts

@@ -1,4 +1,4 @@
-import { SourceType } from '../../shared';
+import { SourceType, enhanceArgTypes } from '@storybook/docs-tools';
 import { extractArgTypes, extractComponentDescription } from './compodoc';
 import { sourceDecorator } from './sourceDecorator';
 import { prepareForInline } from './prepareForInline';
@@ -18,3 +18,5 @@ export const parameters = {
 };
 
 export const decorators = [sourceDecorator];
+
+export const argTypesEnhancers = [enhanceArgTypes];

app/angular/src/client/docs/prepareForInline.ts

@@ -2,9 +2,9 @@ import React from 'react';
 import pLimit from 'p-limit';
 import { nanoid } from 'nanoid';
 
-import { AngularFramework, StoryContext } from '@storybook/angular';
-import { rendererFactory } from '@storybook/angular/renderer';
 import { PartialStoryFn } from '@storybook/csf';
+import { AngularFramework, StoryContext } from '..';
+import { rendererFactory } from '../../renderer';
 
 const limit = pLimit(1);
 

app/angular/src/client/docs/sourceDecorator.ts

@@ -1,8 +1,8 @@
 import { addons, useEffect } from '@storybook/addons';
 import type { PartialStoryFn } from '@storybook/csf';
-import type { StoryContext, AngularFramework } from '@storybook/angular';
-import { computesTemplateSourceFromComponent } from '@storybook/angular/renderer';
-import { SNIPPET_RENDERED, SourceType } from '../../shared';
+import { SNIPPET_RENDERED, SourceType } from '@storybook/docs-tools';
+import { StoryContext, AngularFramework } from '..';
+import { computesTemplateSourceFromComponent } from '../../renderer';
 
 export const skipSourceRender = (context: StoryContext) => {
   const sourceParams = context?.parameters.docs?.source;

app/angular/src/server/framework-preset-angular-docs.ts

@@ -0,0 +1,7 @@
+import path from 'path';
+import { StorybookConfig } from '@storybook/core-common';
+
+export const config: StorybookConfig['config'] = (entry = [], options) => {
+  console.log({ options });
+  return [...entry, path.join(__dirname, '../../../dist/ts3.9/client/docs/config')];
+};

app/angular/src/server/preset.ts

@@ -9,4 +9,5 @@ export const addons: StorybookConfig['addons'] = [
   require.resolve('./framework-preset-angular'),
   require.resolve('./framework-preset-angular-cli'),
   require.resolve('./framework-preset-angular-ivy'),
+  require.resolve('./framework-preset-angular-docs'),
 ];

yarn.lock

@@ -8100,6 +8100,7 @@ __metadata:
     "@storybook/react-docgen-typescript-plugin": 1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0
     "@storybook/semver": ^7.3.2
     "@storybook/store": 6.5.0-alpha.47
+    "@types/estree": ^0.0.51
     "@types/node": ^14.14.20 || ^16.0.0
     "@types/util-deprecate": ^1.0.0
     "@types/webpack-env": ^1.16.0