Addon-docs: Prop table support for Angular directives (#8922)

Addon-docs: Prop table support for Angular directives

addons/docs/docs/multiframework.md

@@ -49,7 +49,7 @@ addParameters({
 });
 ```
 
-The `extractProps`function receives a component as an argument, and returns an object of type [`PropsTableProps`](https://github.com/storybookjs/storybook/blob/next/lib/components/src/blocks/PropsTable/PropsTable.tsx#L147), which can either be a array of `PropDef` rows (React), or a mapping of section name to an array of `PropDef` rows (e.g. `Props`/`Events`/`Slots` in Vue).
+The `extractProps`function receives a component as an argument, and returns an object of type [`PropsTableProps`](https://github.com/storybookjs/storybook/blob/next/lib/components/src/blocks/PropsTable/PropsTable.tsx#L147), which can either be an array of `PropDef` rows (React), or a mapping of section name to an array of `PropDef` rows (e.g. `Props`/`Events`/`Slots` in Vue).
 
 ```ts
 export interface PropDef {

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

@@ -2,7 +2,7 @@
 /* global window */
 
 import { PropDef } from '@storybook/components';
-import { Argument, CompodocJson, Component, Method, Property } from './types';
+import { Argument, CompodocJson, Component, Method, Property, Directive } from './types';
 
 type Sections = Record<string, PropDef[]>;
 
@@ -18,7 +18,7 @@ export const setCompodocJson = (compodocJson: CompodocJson) => {
 // @ts-ignore
 export const getCompdocJson = (): CompodocJson => window.__STORYBOOK_COMPODOC_JSON__;
 
-export const checkValidComponent = (component: Component) => {
+export const checkValidComponentOrDirective = (component: Component | Directive) => {
   if (!component.name) {
     throw new Error(`Invalid component ${JSON.stringify(component)}`);
   }
@@ -71,15 +71,18 @@ const mapItemToSection = (key: string, item: Method | Property): string => {
   }
 };
 
-const getComponentData = (component: Component) => {
+const getComponentData = (component: Component | Directive) => {
   if (!component) {
     return null;
   }
-  checkValidComponent(component);
+  checkValidComponentOrDirective(component);
   const compodocJson = getCompdocJson();
   checkValidCompodocJson(compodocJson);
   const { name } = component;
-  return compodocJson.components.find((c: Component) => c.name === name);
+  return (
+    compodocJson.components.find((c: Component) => c.name === name) ||
+    compodocJson.directives.find((c: Directive) => c.name === name)
+  );
 };
 
 const displaySignature = (item: Method): string => {
@@ -89,7 +92,7 @@ const displaySignature = (item: Method): string => {
   return `(${args.join(', ')}) => ${item.returnType}`;
 };
 
-export const extractProps = (component: Component) => {
+export const extractProps = (component: Component | Directive) => {
   const componentData = getComponentData(component);
   if (!componentData) {
     return null;
@@ -140,7 +143,7 @@ export const extractProps = (component: Component) => {
   return isEmpty(sections) ? null : { sections };
 };
 
-export const extractComponentDescription = (component: Component) => {
+export const extractComponentDescription = (component: Component | Directive) => {
   const componentData = getComponentData(component);
   if (!componentData) {
     return null;

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

@@ -15,7 +15,7 @@ export interface Property {
   description?: string;
 }
 
-export interface Component {
+export interface Directive {
   name: string;
   propertiesClass: Property[];
   inputsClass: Property[];
@@ -24,6 +24,8 @@ export interface Component {
   rawdescription: string;
 }
 
+export type Component = Directive;
+
 export interface Argument {
   name: string;
   type: string;
@@ -35,5 +37,6 @@ export interface Decorator {
 }
 
 export interface CompodocJson {
+  directives: Directive[];
   components: Component[];
 }

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

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots DocDirective Basic 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <ng-component>
+    <div
+      docdirective=""
+      ng-reflect-has-gray-background="true"
+      style="background-color: lightgray;"
+    >
+      <h1>
+        DocDirective
+      </h1>
+    </div>
+  </ng-component>
+</storybook-dynamic-app-root>
+`;

examples/angular-cli/src/stories/doc-directive/doc-directive.directive.ts

@@ -0,0 +1,25 @@
+/* eslint-disable no-useless-constructor */
+import { Directive, ElementRef, AfterViewInit, Input } from '@angular/core';
+
+/**
+ * This is an Angular Directive
+ * example that has a Prop Table.
+ */
+@Directive({
+  selector: '[docDirective]',
+})
+export class DocDirective implements AfterViewInit {
+  constructor(private ref: ElementRef) {}
+
+  /**
+   * Will apply gray background color
+   * if set to true.
+   */
+  @Input() hasGrayBackground = false;
+
+  ngAfterViewInit(): void {
+    if (this.hasGrayBackground) {
+      this.ref.nativeElement.style = 'background-color: lightgray';
+    }
+  }
+}

examples/angular-cli/src/stories/doc-directive/doc-directive.stories.ts

@@ -0,0 +1,16 @@
+import { DocDirective } from './doc-directive.directive';
+
+export default {
+  title: 'DocDirective',
+  component: DocDirective,
+  parameters: { docs: { iframeHeight: 120 } },
+};
+
+const modules = {
+  declarations: [DocDirective],
+};
+
+export const Basic = () => ({
+  moduleMetadata: modules,
+  template: '<div docDirective [hasGrayBackground]="true"><h1>DocDirective</h1></div>',
+});