Addon-docs: Angular DocsPage props table

.eslintignore

@@ -16,6 +16,7 @@ examples/ember-cli/.storybook/preview-head.html
 examples/official-storybook/tests/addon-jest.test.js
 examples/cra-ts-kitchen-sink/*.json
 examples/cra-ts-kitchen-sink/public/*.json
+examples/cra-ts-kitchen-sink/public/*.html
 
 !.remarkrc.js
 !.babelrc.js

addons/docs/angular/index.js

@@ -1 +1 @@
-module.exports = require('../dist/frameworks/common/index');
+module.exports = require('../dist/frameworks/angular/index');

addons/docs/src/frameworks/angular/compodoc.ts

@@ -0,0 +1,149 @@
+/* eslint-disable no-underscore-dangle */
+/* global window */
+
+import { PropDef } from '@storybook/components';
+import { Argument, CompodocJson, Component, Method, Property } from './types';
+
+type Sections = Record<string, PropDef[]>;
+
+export const isMethod = (methodOrProp: Method | Property): methodOrProp is Method => {
+  return (methodOrProp as Method).args !== undefined;
+};
+
+export const setCompodocJson = (compodocJson: CompodocJson) => {
+  // @ts-ignore
+  window.__STORYBOOK_COMPODOC_JSON__ = compodocJson;
+};
+
+// @ts-ignore
+export const getCompdocJson = (): CompodocJson => window.__STORYBOOK_COMPODOC_JSON__;
+
+export const checkValidComponent = (component: Component) => {
+  if (!component.name) {
+    throw new Error(`Invalid component ${JSON.stringify(component)}`);
+  }
+};
+
+export const checkValidCompodocJson = (compodocJson: CompodocJson) => {
+  if (!compodocJson || !compodocJson.components) {
+    throw new Error('Invalid compodoc JSON');
+  }
+};
+
+function isEmpty(obj: any) {
+  return Object.entries(obj).length === 0 && obj.constructor === Object;
+}
+
+const hasDecorator = (item: Property, decoratorName: string) =>
+  item.decorators && item.decorators.find((x: any) => x.name === decoratorName);
+
+const mapPropertyToSection = (key: string, item: Property) => {
+  if (hasDecorator(item, 'ViewChild')) {
+    return 'view child';
+  }
+  if (hasDecorator(item, 'ViewChildren')) {
+    return 'view children';
+  }
+  if (hasDecorator(item, 'ContentChild')) {
+    return 'content child';
+  }
+  if (hasDecorator(item, 'ContentChildren')) {
+    return 'content children';
+  }
+  return 'properties';
+};
+
+const mapItemToSection = (key: string, item: Method | Property): string => {
+  switch (key) {
+    case 'methodsClass':
+      return 'methods';
+    case 'inputsClass':
+      return 'inputs';
+    case 'outputsClass':
+      return 'outputs';
+    case 'propertiesClass':
+      if (isMethod(item)) {
+        throw new Error("Cannot be of type Method if key === 'propertiesClass'");
+      }
+      return mapPropertyToSection(key, item);
+    default:
+      throw new Error(`Unknown key: ${key}`);
+  }
+};
+
+const getComponentData = (component: Component) => {
+  if (!component) {
+    return null;
+  }
+  checkValidComponent(component);
+  const compodocJson = getCompdocJson();
+  checkValidCompodocJson(compodocJson);
+  const { name } = component;
+  return compodocJson.components.find((c: Component) => c.name === name);
+};
+
+const displaySignature = (item: Method): string => {
+  const args = item.args.map(
+    (arg: Argument) => `${arg.name}${arg.optional ? '?' : ''}: ${arg.type}`
+  );
+  return `(${args.join(', ')}) => ${item.returnType}`;
+};
+
+export const extractProps = (component: Component) => {
+  const componentData = getComponentData(component);
+  if (!componentData) {
+    return null;
+  }
+
+  const sectionToItems: Sections = {};
+  const compodocClasses = ['propertiesClass', 'methodsClass', 'inputsClass', 'outputsClass'];
+  type COMPODOC_CLASS = 'propertiesClass' | 'methodsClass' | 'inputsClass' | 'outputsClass';
+
+  compodocClasses.forEach((key: COMPODOC_CLASS) => {
+    const data = componentData[key] || [];
+    data.forEach((item: Method | Property) => {
+      const sectionItem: PropDef = {
+        name: item.name,
+        type: { name: isMethod(item) ? displaySignature(item) : item.type },
+        required: isMethod(item) ? false : !item.optional,
+        description: isMethod(item) ? item.description : '',
+        defaultValue: isMethod(item) ? '' : item.defaultValue,
+      };
+
+      const section = mapItemToSection(key, item);
+      if (!sectionToItems[section]) {
+        sectionToItems[section] = [];
+      }
+      sectionToItems[section].push(sectionItem);
+    });
+  });
+
+  // sort the sections
+  const SECTIONS = [
+    'inputs',
+    'outputs',
+    'properties',
+    'methods',
+    'view child',
+    'view children',
+    'content child',
+    'content children',
+  ];
+  const sections: Sections = {};
+  SECTIONS.forEach(section => {
+    const items = sectionToItems[section];
+    if (items) {
+      sections[section] = items;
+    }
+  });
+
+  return isEmpty(sections) ? null : { sections };
+};
+
+export const extractComponentDescription = (component: Component) => {
+  const componentData = getComponentData(component);
+  if (!componentData) {
+    return null;
+  }
+  return componentData.rawdescription;
+};

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

@@ -0,0 +1,10 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { addParameters } from '@storybook/client-api';
+import { extractProps, extractComponentDescription } from './compodoc';
+
+addParameters({
+  docs: {
+    extractProps,
+    extractComponentDescription,
+  },
+});

addons/docs/src/frameworks/angular/index.ts

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

addons/docs/src/frameworks/angular/types.ts

@@ -0,0 +1,38 @@
+export interface Method {
+  name: string;
+  args: Argument[];
+  returnType: string;
+  decorators: Decorator[];
+  description: string;
+}
+
+export interface Property {
+  name: string;
+  decorators: Decorator[];
+  type: string;
+  optional: boolean;
+  defaultValue?: string;
+}
+
+export interface Component {
+  name: string;
+  propertiesClass: Property[];
+  inputsClass: Property[];
+  outputsClass: Property[];
+  methodsClass: Method[];
+  rawdescription: string;
+}
+
+export interface Argument {
+  name: string;
+  type: string;
+  optional?: boolean;
+}
+
+export interface Decorator {
+  name: string;
+}
+
+export interface CompodocJson {
+  components: Component[];
+}

examples/angular-cli/.gitignore

@@ -38,3 +38,4 @@ testem.log
 .DS_Store
 Thumbs.db
 addon-jest.testresults.json
+documentation.json

examples/angular-cli/.storybook/config.ts

@@ -1,7 +1,14 @@
 import { configure, addParameters, addDecorator } from '@storybook/angular';
 import { withA11y } from '@storybook/addon-a11y';
+import { setCompodocJson } from '@storybook/addon-docs/angular';
 import addCssWarning from '../src/cssWarning';
 
+// @ts-ignore
+// eslint-disable-next-line import/extensions, import/no-unresolved
+import docJson from '../documentation.json';
+
+setCompodocJson(docJson);
+
 addDecorator(withA11y);
 addCssWarning();
 

examples/angular-cli/angularshots.test.js

@@ -2,6 +2,7 @@ import path from 'path';
 import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots';
 
 jest.mock('./addon-jest.testresults.json', () => ({}), { virtual: true });
+jest.mock('./documentation.json', () => ({}), { virtual: true });
 jest.mock('./environments/environment', () => ({}), { virtual: true });
 
 initStoryshots({

examples/angular-cli/package.json

@@ -7,11 +7,12 @@
     "build": "ng build",
     "prebuild-storybook": "npm run storybook:prebuild",
     "build-storybook": "build-storybook -s src/assets",
+    "docs:json": "compodoc -p ./tsconfig.json -e json -d .",
     "e2e": "ng e2e",
     "ng": "ng",
     "start": "ng serve",
     "storybook": "npm run storybook:prebuild && start-storybook -p 9008 -s src/assets",
-    "storybook:prebuild": "npm run test:generate-output",
+    "storybook:prebuild": "npm run test:generate-output && npm run docs:json",
     "test": "jest",
     "test:coverage": "jest --coverage",
     "test:generate-output": "jest --json --config=jest.addon-config.js --outputFile=addon-jest.testresults.json || true",
@@ -35,6 +36,7 @@
     "@angular-devkit/build-angular": "~0.803.6",
     "@angular/cli": "^8.3.6",
     "@angular/compiler-cli": "^8.2.8",
+    "@compodoc/compodoc": "^1.1.11",
     "@storybook/addon-a11y": "5.3.0-alpha.35",
     "@storybook/addon-actions": "5.3.0-alpha.35",
     "@storybook/addon-backgrounds": "5.3.0-alpha.35",

examples/angular-cli/src/app/app.component.ts

@@ -6,5 +6,8 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.scss'],
 })
 export class AppComponent {
+  /**
+   * The name of your app
+   */
   title = 'app';
 }

examples/angular-cli/src/stories/app.component.stories.ts

@@ -2,6 +2,7 @@ import { AppComponent } from '../app/app.component';
 
 export default {
   title: 'App Component',
+  component: AppComponent,
 };
 
 export const componentWithSeparateTemplate = () => ({
@@ -11,4 +12,5 @@ export const componentWithSeparateTemplate = () => ({
 
 componentWithSeparateTemplate.story = {
   name: 'Component with separate template',
+  parameters: { docs: { iframeHeight: 400 } },
 };

examples/angular-cli/src/stories/doc-button/__snapshots__/doc-button.stories.storyshot

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots DocButton Basic 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <my-button>
+    <button
+      class="btn-secondary btn-medium"
+      ng-reflect-ng-class="btn-secondary,btn-medium"
+    >
+      Test labels
+    </button>
+  </my-button>
+</storybook-dynamic-app-root>
+`;

examples/angular-cli/src/stories/doc-button/doc-button.component.html

@@ -0,0 +1 @@
+<button [ngClass]="classes" #buttonRef>{{ label }}</button>