From 4db97d91e068e95646493d790e496f11280ba85f Mon Sep 17 00:00:00 2001 From: Febbraro Date: Thu, 21 Nov 2019 13:47:49 -0500 Subject: [PATCH 1/7] typo fix --- addons/docs/docs/multiframework.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addons/docs/docs/multiframework.md b/addons/docs/docs/multiframework.md index 26d2f7da670..5c3f5d32844 100644 --- a/addons/docs/docs/multiframework.md +++ b/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 { From f8ffa5dfb2b9e76ec27e484beaad8cd205d5126c Mon Sep 17 00:00:00 2001 From: Febbraro Date: Thu, 21 Nov 2019 13:50:11 -0500 Subject: [PATCH 2/7] add directive option --- addons/docs/src/frameworks/angular/compodoc.ts | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/addons/docs/src/frameworks/angular/compodoc.ts b/addons/docs/src/frameworks/angular/compodoc.ts index 319e50c781e..7e2d97e5d06 100644 --- a/addons/docs/src/frameworks/angular/compodoc.ts +++ b/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; @@ -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 checkValidComponent = (component: Component | Directive) => { if (!component.name) { throw new Error(`Invalid component ${JSON.stringify(component)}`); } @@ -71,7 +71,7 @@ const mapItemToSection = (key: string, item: Method | Property): string => { } }; -const getComponentData = (component: Component) => { +const getComponentData = (component: Component | Directive) => { if (!component) { return null; } @@ -79,7 +79,10 @@ const getComponentData = (component: 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; From 448e6abb926d9aaafa33e68f45b025d989530e59 Mon Sep 17 00:00:00 2001 From: Febbraro Date: Thu, 21 Nov 2019 13:50:56 -0500 Subject: [PATCH 3/7] add directive types --- addons/docs/src/frameworks/angular/types.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/addons/docs/src/frameworks/angular/types.ts b/addons/docs/src/frameworks/angular/types.ts index eea87f4e8fb..778e9bc1fb6 100644 --- a/addons/docs/src/frameworks/angular/types.ts +++ b/addons/docs/src/frameworks/angular/types.ts @@ -24,6 +24,15 @@ export interface Component { rawdescription: string; } +export interface Directive { + name: string; + propertiesClass: Property[]; + inputsClass: Property[]; + outputsClass: Property[]; + methodsClass: Method[]; + rawdescription: string; +} + export interface Argument { name: string; type: string; @@ -35,5 +44,6 @@ export interface Decorator { } export interface CompodocJson { + directives: Directive[]; components: Component[]; } From 69280115b42ccc8911ea7d455036a90afba7a1a5 Mon Sep 17 00:00:00 2001 From: Febbraro Date: Thu, 21 Nov 2019 14:00:52 -0500 Subject: [PATCH 4/7] adding directive example --- .../doc-directive/doc-directive.directive.ts | 25 +++++++++++++++++++ .../doc-directive/doc-directive.stories.ts | 16 ++++++++++++ 2 files changed, 41 insertions(+) create mode 100644 examples/angular-cli/src/stories/doc-directive/doc-directive.directive.ts create mode 100644 examples/angular-cli/src/stories/doc-directive/doc-directive.stories.ts diff --git a/examples/angular-cli/src/stories/doc-directive/doc-directive.directive.ts b/examples/angular-cli/src/stories/doc-directive/doc-directive.directive.ts new file mode 100644 index 00000000000..bcb039c9d9f --- /dev/null +++ b/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'; + } + } +} diff --git a/examples/angular-cli/src/stories/doc-directive/doc-directive.stories.ts b/examples/angular-cli/src/stories/doc-directive/doc-directive.stories.ts new file mode 100644 index 00000000000..519302892b6 --- /dev/null +++ b/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: '

DocDirective

', +}); From 88f635d51eb901449d383a92a8827899c865fcba Mon Sep 17 00:00:00 2001 From: Febbraro Date: Thu, 21 Nov 2019 14:33:13 -0500 Subject: [PATCH 5/7] add doc directive storyshot --- .../doc-directive.stories.storyshot | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 examples/angular-cli/src/stories/doc-directive/__snapshots__/doc-directive.stories.storyshot diff --git a/examples/angular-cli/src/stories/doc-directive/__snapshots__/doc-directive.stories.storyshot b/examples/angular-cli/src/stories/doc-directive/__snapshots__/doc-directive.stories.storyshot new file mode 100644 index 00000000000..de28ae96a79 --- /dev/null +++ b/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`] = ` + + +
+

+ DocDirective +

+
+ + +`; From 73a02c522d22386954e4f79cd292159e8f5db2fb Mon Sep 17 00:00:00 2001 From: Febbraro Date: Tue, 26 Nov 2019 14:02:18 -0500 Subject: [PATCH 6/7] CR func name update --- addons/docs/src/frameworks/angular/compodoc.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/addons/docs/src/frameworks/angular/compodoc.ts b/addons/docs/src/frameworks/angular/compodoc.ts index 7e2d97e5d06..8362919f175 100644 --- a/addons/docs/src/frameworks/angular/compodoc.ts +++ b/addons/docs/src/frameworks/angular/compodoc.ts @@ -18,7 +18,7 @@ export const setCompodocJson = (compodocJson: CompodocJson) => { // @ts-ignore export const getCompdocJson = (): CompodocJson => window.__STORYBOOK_COMPODOC_JSON__; -export const checkValidComponent = (component: Component | Directive) => { +export const checkValidComponentOrDirective = (component: Component | Directive) => { if (!component.name) { throw new Error(`Invalid component ${JSON.stringify(component)}`); } @@ -75,7 +75,7 @@ const getComponentData = (component: Component | Directive) => { if (!component) { return null; } - checkValidComponent(component); + checkValidComponentOrDirective(component); const compodocJson = getCompdocJson(); checkValidCompodocJson(compodocJson); const { name } = component; From a10b2d18b20666920e5ad3699751e93b8d075cd5 Mon Sep 17 00:00:00 2001 From: Febbraro Date: Tue, 26 Nov 2019 14:56:04 -0500 Subject: [PATCH 7/7] CR update to use type alias --- addons/docs/src/frameworks/angular/types.ts | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/addons/docs/src/frameworks/angular/types.ts b/addons/docs/src/frameworks/angular/types.ts index 778e9bc1fb6..9bc7f760c85 100644 --- a/addons/docs/src/frameworks/angular/types.ts +++ b/addons/docs/src/frameworks/angular/types.ts @@ -15,15 +15,6 @@ export interface Property { description?: string; } -export interface Component { - name: string; - propertiesClass: Property[]; - inputsClass: Property[]; - outputsClass: Property[]; - methodsClass: Method[]; - rawdescription: string; -} - export interface Directive { name: string; propertiesClass: Property[]; @@ -33,6 +24,8 @@ export interface Directive { rawdescription: string; } +export type Component = Directive; + export interface Argument { name: string; type: string;