From b895500e3e1d4ee686434fc4fb3c771c15e3d1d7 Mon Sep 17 00:00:00 2001 From: Lachlan Heywood Date: Sun, 4 Oct 2020 22:53:23 -0400 Subject: [PATCH 01/10] add miscellaneous property to CompodocJson type --- addons/docs/src/frameworks/angular/types.ts | 30 +++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/addons/docs/src/frameworks/angular/types.ts b/addons/docs/src/frameworks/angular/types.ts index 9f7e64afbabf..f78db98a5e38 100644 --- a/addons/docs/src/frameworks/angular/types.ts +++ b/addons/docs/src/frameworks/angular/types.ts @@ -66,10 +66,40 @@ export interface Decorator { name: string; } +export interface TypeAlias { + name: string; + ctype: string; + subtype: string; + rawtype: string; + file: string; + kind: number; + description?: string; + rawdescription?: string; +} + +export interface EnumType { + name: string; + childs: EnumTypeChild[]; + ctype: string; + subtype: string; + file: string; + description?: string; + rawdescription?: string; +} + +export interface EnumTypeChild { + name: string; + value?: string; +} + export interface CompodocJson { directives: Directive[]; components: Component[]; pipes: Pipe[]; injectables: Injectable[]; classes: Class[]; + miscellaneous: { + typealiases: TypeAlias[]; + enumerations: EnumType[]; + }; } From 7a7560d9ff79c6d26a1de6012d1f14d24e65fcff Mon Sep 17 00:00:00 2001 From: Lachlan Heywood Date: Sun, 4 Oct 2020 22:57:38 -0400 Subject: [PATCH 02/10] correct spelling --- 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 e0c47427d1f7..3ae9850fb0fb 100644 --- a/addons/docs/src/frameworks/angular/compodoc.ts +++ b/addons/docs/src/frameworks/angular/compodoc.ts @@ -25,7 +25,7 @@ export const setCompodocJson = (compodocJson: CompodocJson) => { }; // @ts-ignore -export const getCompdocJson = (): CompodocJson => window.__STORYBOOK_COMPODOC_JSON__; +export const getCompodocJson = (): CompodocJson => window.__STORYBOOK_COMPODOC_JSON__; export const checkValidComponentOrDirective = (component: Component | Directive) => { if (!component.name) { @@ -90,7 +90,7 @@ const getComponentData = (component: Component | Directive) => { return null; } checkValidComponentOrDirective(component); - const compodocJson = getCompdocJson(); + const compodocJson = getCompodocJson(); checkValidCompodocJson(compodocJson); const { name } = component; const metadata = findComponentByName(name, compodocJson); From 97bf14a33110623505fd832f047878a8286252bd Mon Sep 17 00:00:00 2001 From: Lachlan Heywood Date: Sun, 4 Oct 2020 22:58:51 -0400 Subject: [PATCH 03/10] Add resolution for type aliases from compodoc gen --- addons/docs/src/frameworks/angular/compodoc.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/addons/docs/src/frameworks/angular/compodoc.ts b/addons/docs/src/frameworks/angular/compodoc.ts index 3ae9850fb0fb..a8d25c039134 100644 --- a/addons/docs/src/frameworks/angular/compodoc.ts +++ b/addons/docs/src/frameworks/angular/compodoc.ts @@ -135,7 +135,8 @@ export const extractType = (property: Property, defaultValue: any) => { case null: return { name: 'void' }; default: { - const enumValues = extractEnumValues(compodocType); + const resolvedType = resolveTypealias(compodocType); + const enumValues = extractEnumValues(resolvedType); return enumValues ? { name: 'enum', value: enumValues } : { name: 'object' }; } } @@ -152,6 +153,12 @@ const extractDefaultValue = (property: Property) => { } }; +const resolveTypealias = (compodocType: string): string => { + const compodocJson = getCompodocJson(); + const typeAlias = compodocJson.miscellaneous.typealiases.find((x) => x.name === compodocType); + return typeAlias ? resolveTypealias(typeAlias.rawtype) : compodocType; +}; + export const extractArgTypesFromData = (componentData: Class | Directive | Injectable | Pipe) => { const sectionToItems: Record = {}; const compodocClasses = ['component', 'directive'].includes(componentData.type) From 659c203f21a202c2ee2705ea3c9ffa137a350510 Mon Sep 17 00:00:00 2001 From: Lachlan Heywood Date: Mon, 5 Oct 2020 01:28:36 -0400 Subject: [PATCH 04/10] add test component for enums --- .../component-with-enums/enums.component.html | 8 +++ .../enums.component.stories.ts | 28 ++++++++++ .../component-with-enums/enums.component.ts | 53 +++++++++++++++++++ 3 files changed, 89 insertions(+) create mode 100644 examples/angular-cli/src/stories/component-with-enums/enums.component.html create mode 100644 examples/angular-cli/src/stories/component-with-enums/enums.component.stories.ts create mode 100644 examples/angular-cli/src/stories/component-with-enums/enums.component.ts diff --git a/examples/angular-cli/src/stories/component-with-enums/enums.component.html b/examples/angular-cli/src/stories/component-with-enums/enums.component.html new file mode 100644 index 000000000000..08584b9824f4 --- /dev/null +++ b/examples/angular-cli/src/stories/component-with-enums/enums.component.html @@ -0,0 +1,8 @@ +
+
unionType: {{ unionType }}
+
aliasedUnionType: {{ aliasedUnionType }}
+
enumNumeric: {{ enumNumeric }}
+
enumNumericInitial: {{ enumNumericInitial }}
+
enumStrings: {{ enumStrings }}
+
enumAlias: {{ enumAlias }}
+
diff --git a/examples/angular-cli/src/stories/component-with-enums/enums.component.stories.ts b/examples/angular-cli/src/stories/component-with-enums/enums.component.stories.ts new file mode 100644 index 000000000000..bfa282c03765 --- /dev/null +++ b/examples/angular-cli/src/stories/component-with-enums/enums.component.stories.ts @@ -0,0 +1,28 @@ +import { Story, Meta } from '@storybook/angular'; +import EnumsComponent, { + EnumNumeric, + EnumNumericInitial, + EnumStringValues, +} from './enums.component'; + +export default { + title: 'Enum Types', +} as Meta; + +const Template: Story = (args) => ({ + component: EnumsComponent, + props: args, +}); + +export const NoDefaults = Template.bind({}); +NoDefaults.args = {}; + +export const WithDefaults = Template.bind({}); +WithDefaults.args = { + unionType: 'union a', + aliasedUnionType: 'Type Alias 1', + enumNumeric: EnumNumeric.FIRST, + enumNumericInitial: EnumNumericInitial.UNO, + enumStrings: EnumStringValues.PRIMARY, + enumAlias: EnumNumeric.FIRST, +}; diff --git a/examples/angular-cli/src/stories/component-with-enums/enums.component.ts b/examples/angular-cli/src/stories/component-with-enums/enums.component.ts new file mode 100644 index 000000000000..5cd7266c7fd7 --- /dev/null +++ b/examples/angular-cli/src/stories/component-with-enums/enums.component.ts @@ -0,0 +1,53 @@ +import { Component, Input, OnInit } from '@angular/core'; + +/** + * This component is used for testing the various forms of enum types + */ +@Component({ + selector: 'app-enums', + templateUrl: './enums.component.html', +}) +export default class EnumsComponent { + /** Union Type of string literals */ + @Input() unionType: 'Union A' | 'Union B' | 'Union C'; + + /** Union Type assigned as a Type Alias */ + @Input() aliasedUnionType: TypeAlias; + + /** Base Enum Type with no assigned values */ + @Input() enumNumeric: EnumNumeric; + + /** Enum with initial numeric value and auto-incrementing subsequent values */ + @Input() enumNumericInitial: EnumNumericInitial; + + /** Enum with string values */ + @Input() enumStrings: EnumStringValues; + + /** Type Aliased Enum Type */ + @Input() enumAlias: EnumAlias; +} + +/** + * Button Priority + */ +export enum EnumNumeric { + FIRST, + SECOND, + THIRD, +} + +export enum EnumNumericInitial { + UNO = 1, + DOS, + TRES, +} + +export enum EnumStringValues { + PRIMARY = 'PRIMARY', + SECONDARY = 'SECONDARY', + TERTIARY = 'TERTIARY', +} + +export type EnumAlias = EnumNumeric; + +type TypeAlias = 'Type Alias 1' | 'Type Alias 2' | 'Type Alias 3'; From 54cba15c462415ac7b7bdc78d7f45379c3c67d98 Mon Sep 17 00:00:00 2001 From: Lachlan Heywood Date: Mon, 5 Oct 2020 01:28:59 -0400 Subject: [PATCH 05/10] add enums check for compodoc types --- addons/docs/src/frameworks/angular/compodoc.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/addons/docs/src/frameworks/angular/compodoc.ts b/addons/docs/src/frameworks/angular/compodoc.ts index a8d25c039134..8b849b77f843 100644 --- a/addons/docs/src/frameworks/angular/compodoc.ts +++ b/addons/docs/src/frameworks/angular/compodoc.ts @@ -113,6 +113,13 @@ const extractTypeFromValue = (defaultValue: any) => { }; const extractEnumValues = (compodocType: any) => { + const compodocJson = getCompodocJson(); + const enumType = compodocJson.miscellaneous.enumerations.find((x) => x.name === compodocType); + + if (enumType?.childs.every((x) => x.value)) { + return enumType.childs.map((x) => x.value); + } + if (typeof compodocType !== 'string' || compodocType.indexOf('|') === -1) { return null; } From ce33a20018c60ca57350528a8120102ade694895 Mon Sep 17 00:00:00 2001 From: Lachlan Heywood Date: Tue, 6 Oct 2020 17:26:36 -0400 Subject: [PATCH 06/10] update test coverage --- .../src/frameworks/angular/compodoc.test.ts | 96 ++++++++++++++++++- .../docs/src/frameworks/angular/compodoc.ts | 4 +- addons/docs/src/frameworks/angular/types.ts | 6 +- 3 files changed, 99 insertions(+), 7 deletions(-) diff --git a/addons/docs/src/frameworks/angular/compodoc.test.ts b/addons/docs/src/frameworks/angular/compodoc.test.ts index 6e1590c4bc74..95a7731d878f 100644 --- a/addons/docs/src/frameworks/angular/compodoc.test.ts +++ b/addons/docs/src/frameworks/angular/compodoc.test.ts @@ -1,5 +1,5 @@ -import { extractType } from './compodoc'; -import { Decorator } from './types'; +import { extractType, setCompodocJson } from './compodoc'; +import { CompodocJson, Decorator } from './types'; const makeProperty = (compodocType?: string) => ({ type: compodocType, @@ -8,8 +8,96 @@ const makeProperty = (compodocType?: string) => ({ optional: true, }); +const getDummyCompodocJson = () => { + return { + miscellaneous: { + typealiases: [ + { + name: 'EnumAlias', + ctype: 'miscellaneous', + subtype: 'typealias', + rawtype: 'EnumNumeric', + file: 'src/stories/component-with-enums/enums.component.ts', + description: '', + kind: 161, + }, + { + name: 'TypeAlias', + ctype: 'miscellaneous', + subtype: 'typealias', + rawtype: '"Type Alias 1" | "Type Alias 2" | "Type Alias 3"', + file: 'src/stories/component-with-enums/enums.component.ts', + description: '', + kind: 168, + }, + ], + enumerations: [ + { + name: 'EnumNumeric', + childs: [ + { + name: 'FIRST', + }, + { + name: 'SECOND', + }, + { + name: 'THIRD', + }, + ], + ctype: 'miscellaneous', + subtype: 'enum', + description: '

Button Priority

\n', + file: 'src/stories/component-with-enums/enums.component.ts', + }, + { + name: 'EnumNumericInitial', + childs: [ + { + name: 'UNO', + value: '1', + }, + { + name: 'DOS', + }, + { + name: 'TRES', + }, + ], + ctype: 'miscellaneous', + subtype: 'enum', + description: '', + file: 'src/stories/component-with-enums/enums.component.ts', + }, + { + name: 'EnumStringValues', + childs: [ + { + name: 'PRIMARY', + value: 'PRIMARY', + }, + { + name: 'SECONDARY', + value: 'SECONDARY', + }, + { + name: 'TERTIARY', + value: 'TERTIARY', + }, + ], + ctype: 'miscellaneous', + subtype: 'enum', + description: '', + file: 'src/stories/component-with-enums/enums.component.ts', + }, + ], + }, + } as CompodocJson; +}; + describe('extractType', () => { describe('with compodoc type', () => { + setCompodocJson(getDummyCompodocJson()); it.each([ ['string', { name: 'string' }], ['boolean', { name: 'boolean' }], @@ -21,6 +109,10 @@ describe('extractType', () => { ['T[]', { name: 'object' }], ['[]', { name: 'object' }], ['"primary" | "secondary"', { name: 'enum', value: ['primary', 'secondary'] }], + ['TypeAlias', { name: 'enum', value: ['Type Alias 1', 'Type Alias 2', 'Type Alias 3'] }], + ['EnumNumeric', { name: 'object' }], + ['EnumNumericInitial', { name: 'object' }], + ['EnumStringValues', { name: 'enum', value: ['PRIMARY', 'SECONDARY', 'TERTIARY'] }], ])('%s', (compodocType, expected) => { expect(extractType(makeProperty(compodocType), null)).toEqual(expected); }); diff --git a/addons/docs/src/frameworks/angular/compodoc.ts b/addons/docs/src/frameworks/angular/compodoc.ts index 8b849b77f843..20ef868123d9 100644 --- a/addons/docs/src/frameworks/angular/compodoc.ts +++ b/addons/docs/src/frameworks/angular/compodoc.ts @@ -114,7 +114,7 @@ const extractTypeFromValue = (defaultValue: any) => { const extractEnumValues = (compodocType: any) => { const compodocJson = getCompodocJson(); - const enumType = compodocJson.miscellaneous.enumerations.find((x) => x.name === compodocType); + const enumType = compodocJson?.miscellaneous.enumerations.find((x) => x.name === compodocType); if (enumType?.childs.every((x) => x.value)) { return enumType.childs.map((x) => x.value); @@ -162,7 +162,7 @@ const extractDefaultValue = (property: Property) => { const resolveTypealias = (compodocType: string): string => { const compodocJson = getCompodocJson(); - const typeAlias = compodocJson.miscellaneous.typealiases.find((x) => x.name === compodocType); + const typeAlias = compodocJson?.miscellaneous.typealiases.find((x) => x.name === compodocType); return typeAlias ? resolveTypealias(typeAlias.rawtype) : compodocType; }; diff --git a/addons/docs/src/frameworks/angular/types.ts b/addons/docs/src/frameworks/angular/types.ts index f78db98a5e38..db5bd6a1a648 100644 --- a/addons/docs/src/frameworks/angular/types.ts +++ b/addons/docs/src/frameworks/angular/types.ts @@ -98,8 +98,8 @@ export interface CompodocJson { pipes: Pipe[]; injectables: Injectable[]; classes: Class[]; - miscellaneous: { - typealiases: TypeAlias[]; - enumerations: EnumType[]; + miscellaneous?: { + typealiases?: TypeAlias[]; + enumerations?: EnumType[]; }; } From 73e1cbf3088927249b20f4ebe48de59cad9527db Mon Sep 17 00:00:00 2001 From: Lachlan Heywood Date: Tue, 6 Oct 2020 17:42:45 -0400 Subject: [PATCH 07/10] remove unused dep --- .../src/stories/component-with-enums/enums.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/angular-cli/src/stories/component-with-enums/enums.component.ts b/examples/angular-cli/src/stories/component-with-enums/enums.component.ts index 5cd7266c7fd7..fb66361caaba 100644 --- a/examples/angular-cli/src/stories/component-with-enums/enums.component.ts +++ b/examples/angular-cli/src/stories/component-with-enums/enums.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, Input } from '@angular/core'; /** * This component is used for testing the various forms of enum types From 2aab20e5653423657c54b792b4fb6c60afd93ac5 Mon Sep 17 00:00:00 2001 From: Lachlan Heywood Date: Tue, 6 Oct 2020 18:56:04 -0400 Subject: [PATCH 08/10] update snapshots --- .../enums.component.stories.storyshot | 63 +++++++++++++++++++ 1 file changed, 63 insertions(+) create mode 100644 examples/angular-cli/src/stories/component-with-enums/__snapshots__/enums.component.stories.storyshot diff --git a/examples/angular-cli/src/stories/component-with-enums/__snapshots__/enums.component.stories.storyshot b/examples/angular-cli/src/stories/component-with-enums/__snapshots__/enums.component.stories.storyshot new file mode 100644 index 000000000000..413190a5118e --- /dev/null +++ b/examples/angular-cli/src/stories/component-with-enums/__snapshots__/enums.component.stories.storyshot @@ -0,0 +1,63 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Enum Types No Defaults 1`] = ` + + +
+
+ unionType: +
+
+ aliasedUnionType: +
+
+ enumNumeric: +
+
+ enumNumericInitial: +
+
+ enumStrings: +
+
+ enumAlias: +
+
+ + +`; + +exports[`Storyshots Enum Types With Defaults 1`] = ` + + +
+
+ unionType: union a +
+
+ aliasedUnionType: Type Alias 1 +
+
+ enumNumeric: +
+
+ enumNumericInitial: 1 +
+
+ enumStrings: PRIMARY +
+
+ enumAlias: +
+
+ + +`; From 36bed859abe111b5869a3aabf7b2c2c74a6a0140 Mon Sep 17 00:00:00 2001 From: Lachlan Heywood Date: Tue, 6 Oct 2020 22:56:50 -0400 Subject: [PATCH 09/10] simplify example story --- .../component-with-enums/enums.component.stories.ts | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/examples/angular-cli/src/stories/component-with-enums/enums.component.stories.ts b/examples/angular-cli/src/stories/component-with-enums/enums.component.stories.ts index bfa282c03765..50364b985081 100644 --- a/examples/angular-cli/src/stories/component-with-enums/enums.component.stories.ts +++ b/examples/angular-cli/src/stories/component-with-enums/enums.component.stories.ts @@ -7,18 +7,14 @@ import EnumsComponent, { export default { title: 'Enum Types', + component: EnumsComponent, } as Meta; -const Template: Story = (args) => ({ +export const Basic: Story = (args) => ({ component: EnumsComponent, props: args, }); - -export const NoDefaults = Template.bind({}); -NoDefaults.args = {}; - -export const WithDefaults = Template.bind({}); -WithDefaults.args = { +Basic.args = { unionType: 'union a', aliasedUnionType: 'Type Alias 1', enumNumeric: EnumNumeric.FIRST, From 598591eb6ff19601ee2a81ca0da96bd14c4010e7 Mon Sep 17 00:00:00 2001 From: Lachlan Heywood Date: Wed, 7 Oct 2020 09:27:32 -0400 Subject: [PATCH 10/10] update exports and storyshot --- .../enums.component.stories.storyshot | 33 +------------------ .../enums.component.stories.ts | 3 +- .../component-with-enums/enums.component.ts | 2 +- 3 files changed, 4 insertions(+), 34 deletions(-) diff --git a/examples/angular-cli/src/stories/component-with-enums/__snapshots__/enums.component.stories.storyshot b/examples/angular-cli/src/stories/component-with-enums/__snapshots__/enums.component.stories.storyshot index 413190a5118e..a6d00d8f5aa5 100644 --- a/examples/angular-cli/src/stories/component-with-enums/__snapshots__/enums.component.stories.storyshot +++ b/examples/angular-cli/src/stories/component-with-enums/__snapshots__/enums.component.stories.storyshot @@ -1,37 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Storyshots Enum Types No Defaults 1`] = ` - - -
-
- unionType: -
-
- aliasedUnionType: -
-
- enumNumeric: -
-
- enumNumericInitial: -
-
- enumStrings: -
-
- enumAlias: -
-
- - -`; - -exports[`Storyshots Enum Types With Defaults 1`] = ` +exports[`Storyshots Enum Types Basic 1`] = `