From bbd5da4896c522fd916aa90b7006bfd89003a926 Mon Sep 17 00:00:00 2001 From: Gavin Barron Date: Mon, 6 Feb 2023 08:35:25 -0800 Subject: [PATCH] feat: typed events (#1981) * feat: typed events adds typings to events Changes the package use to generate the custom-elements.json file used to build React components and tell Storybook about the web-components definitions mgt- prefix from story component names to correct the connection to the data in custom-elements.json set code pane content on agenda disable ArgsTable on docs pages by default show ArgsTable on base agenda stories BREAKING CHANGE: moves agenda eventClick event from a property of e.detail to be the value of e.detail BREAKING CHANGE: all events for mgt-task now emit a CustomEvent --- .storybook/preview.js | 29 ++- .storybook/story-elements/defaultDocsPage.js | 14 ++ .storybook/story-elements/noArgsDocsPage.js | 13 ++ {stories => .storybook}/versionInfo.js | 0 package.json | 4 +- .../src/components/mgt-agenda/mgt-agenda.ts | 4 +- .../components/mgt-file-list/mgt-file-list.ts | 8 +- .../src/components/mgt-get/mgt-get.ts | 12 +- .../src/components/mgt-login/mgt-login.ts | 10 +- .../mgt-people-picker/mgt-people-picker.ts | 2 +- .../mgt-person-card/mgt-person-card.ts | 40 ++-- .../src/components/mgt-person/mgt-person.ts | 8 +- .../src/components/mgt-tasks/mgt-tasks.ts | 18 +- .../src/components/mgt-tasks/task-sources.ts | 4 +- .../mgt-teams-channel-picker.ts | 6 +- .../src/components/mgt-todo/mgt-todo.ts | 3 +- .../src/components/templatedComponent.ts | 13 +- packages/mgt-react/package.json | 3 +- packages/mgt-react/scripts/generate.js | 94 +++++--- packages/mgt-react/src/generated/react.ts | 201 +++++++++--------- stories/components/agenda/agenda.a.js | 28 ++- .../components/agenda/agenda.properties.js | 6 +- stories/components/agenda/agenda.style.js | 6 +- .../components/agenda/agenda.templating.js | 6 +- stories/components/file/file.a.js | 6 +- stories/components/file/file.properties.js | 6 +- stories/components/file/file.style.js | 6 +- stories/components/file/file.templating.js | 6 +- stories/components/fileList/fileList.a.js | 6 +- .../fileList/fileList.properties.js | 6 +- stories/components/fileList/fileList.style.js | 6 +- .../fileList/fileList.templating.js | 6 +- stories/components/get.stories.js | 6 +- stories/components/login/login.stories.js | 6 +- stories/components/login/login.styles.js | 6 +- stories/components/people/people.a.js | 6 +- .../components/people/people.properties.js | 6 +- stories/components/people/people.styles.js | 6 +- .../components/people/people.templating.js | 6 +- .../components/peoplePicker/peoplePicker.a.js | 6 +- .../peoplePicker/peoplePicker.properties.js | 6 +- .../peoplePicker/peoplePicker.style.js | 6 +- .../peoplePicker/peoplePicker.templating.js | 6 +- stories/components/person/person.js | 6 +- .../components/person/person.properties.js | 48 ++--- stories/components/person/person.style.js | 6 +- .../components/person/person.templating.js | 6 +- stories/components/personCard/personCard.a.js | 6 +- .../personCard/personCard.properties.js | 6 +- .../components/personCard/personCard.style.js | 6 +- .../personCard/personCard.templating.js | 6 +- stories/components/tasks.stories.js | 6 +- .../teamsChannelPicker.a.js | 6 +- .../teamsChannelPicker.style.js | 6 +- .../teamsChannelPicker.templating.js | 6 +- stories/components/todo.stories.js | 6 +- stories/overview.stories.mdx | 2 +- stories/samples/editor.stories.js | 4 - stories/samples/general.stories.js | 5 - stories/samples/templating.stories.js | 6 +- yarn.lock | 98 ++++++++- 61 files changed, 468 insertions(+), 413 deletions(-) create mode 100644 .storybook/story-elements/defaultDocsPage.js create mode 100644 .storybook/story-elements/noArgsDocsPage.js rename {stories => .storybook}/versionInfo.js (100%) diff --git a/.storybook/preview.js b/.storybook/preview.js index c0d64bfbe4..525938e797 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -8,11 +8,30 @@ /* global window */ import { addParameters, setCustomElements } from '@storybook/web-components'; - import '../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js'; import customElements from '../custom-elements.json'; +import { versionInfo } from './versionInfo'; +import { noArgsDocsPage } from './story-elements/noArgsDocsPage.js'; + +const setCustomElementsManifestWithOptions = (customElements, options) => { + let { privateFields = true } = options; + if (!privateFields) { + customElements?.modules?.forEach(module => { + module?.declarations?.forEach(declaration => { + Object.keys(declaration).forEach(key => { + if (Array.isArray(declaration[key])) { + declaration[key] = declaration[key].filter( + member => !member.privacy?.includes('private') && !member.privacy?.includes('protected') + ); + } + }); + }); + }); + } + return setCustomElements(customElements); +}; -setCustomElements(customElements); +setCustomElementsManifestWithOptions(customElements, { privateFields: false }); addParameters({ previewTabs: { @@ -22,8 +41,10 @@ addParameters({ }, docs: { iframeHeight: '400px', - inlineStories: false - } + inlineStories: false, + page: noArgsDocsPage + }, + version: versionInfo }); const req = require.context('../stories', true, /\.(js|mdx)$/); diff --git a/.storybook/story-elements/defaultDocsPage.js b/.storybook/story-elements/defaultDocsPage.js new file mode 100644 index 0000000000..9f13b0f894 --- /dev/null +++ b/.storybook/story-elements/defaultDocsPage.js @@ -0,0 +1,14 @@ +import React from 'react'; + +import { Title, Subtitle, Description, Primary, ArgsTable, Stories, PRIMARY_STORY } from '@storybook/addon-docs'; + +export const defaultDocsPage = () => ( + <> + + <Subtitle /> + <Description /> + <Primary /> + <ArgsTable story={PRIMARY_STORY} /> + <Stories /> + </> +); diff --git a/.storybook/story-elements/noArgsDocsPage.js b/.storybook/story-elements/noArgsDocsPage.js new file mode 100644 index 0000000000..5367c68d59 --- /dev/null +++ b/.storybook/story-elements/noArgsDocsPage.js @@ -0,0 +1,13 @@ +import React from 'react'; + +import { Title, Subtitle, Description, Primary, ArgsTable, Stories, PRIMARY_STORY } from '@storybook/addon-docs'; + +export const noArgsDocsPage = () => ( + <> + <Title /> + <Subtitle /> + <Description /> + <Primary /> + <Stories /> + </> +); diff --git a/stories/versionInfo.js b/.storybook/versionInfo.js similarity index 100% rename from stories/versionInfo.js rename to .storybook/versionInfo.js diff --git a/package.json b/package.json index 81fbf6e153..f784298033 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ ] }, "scripts": { + "analyze": "custom-elements-manifest analyze --litelement --globs \"./packages/*/src/**/*.ts\"", "build": "npm run prettier:check && npm run clean && lerna run build --scope @microsoft/*", "build:compile": "npm run prettier:check && npm run clean && lerna run build:compile --scope @microsoft/*", "build:mgt": "cd ./packages/mgt && npm run build", @@ -51,7 +52,7 @@ "prettier:check": "npm run prettier:base -- --check \"packages/**/*.{ts,tsx}\"", "prettier:write": "npm run prettier:base -- --write \"packages/**/*.{ts,tsx}\"", "storybook": "start-storybook -p 6006 -s assets", - "storybook:dev": "npm run build:compile && wca analyze packages --format json --outFile custom-elements.json", + "storybook:dev": "npm run build:compile && npm run analyze", "storybook:watch": "npm-run-all --parallel watch storybook:bundle:watch storybook", "storybook:bundle": "rollup -c ./.storybook/rollup.config.js", "storybook:bundle:watch": "rollup -c ./.storybook/rollup.config.js --watch", @@ -74,6 +75,7 @@ "@babel/preset-env": "^7.12.7", "@babel/preset-react": "^7.12.7", "@babel/preset-typescript": "^7.12.7", + "@custom-elements-manifest/analyzer": "^0.6.6", "@octokit/rest": "^18.5.3", "@open-wc/testing-helpers": "^2.1.4", "@storybook/addon-a11y": "^6.4.4", diff --git a/packages/mgt-components/src/components/mgt-agenda/mgt-agenda.ts b/packages/mgt-components/src/components/mgt-agenda/mgt-agenda.ts index 09ccfea93e..8872fc496a 100644 --- a/packages/mgt-components/src/components/mgt-agenda/mgt-agenda.ts +++ b/packages/mgt-components/src/components/mgt-agenda/mgt-agenda.ts @@ -30,7 +30,7 @@ import { MgtPeople } from '../mgt-people/mgt-people'; * @class MgtAgenda * @extends {MgtTemplatedComponent} * - * @fires eventClick - Fired when user click an event + * @fires {CustomEvent<MicrosoftGraph.Event>} eventClick - Fired when user click an event * * @cssprop --event-box-shadow - {String} Event box shadow color and size * @cssprop --event-margin - {String} Event margin @@ -538,7 +538,7 @@ export class MgtAgenda extends MgtTemplatedComponent { } private eventClicked(event: MicrosoftGraph.Event) { - this.fireCustomEvent('eventClick', { event }); + this.fireCustomEvent('eventClick', event); } private getEventTimeString(event: MicrosoftGraph.Event) { diff --git a/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.ts b/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.ts index 8252b51c3c..1d4bb077f7 100644 --- a/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.ts +++ b/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.ts @@ -51,14 +51,14 @@ registerFluentComponents(fluentProgressRing, fluentDesignSystemProvider); /** * The File List component displays a list of multiple folders and files by - * using the file/folder name, an icon, and other properties specicified by the developer. + * using the file/folder name, an icon, and other properties specified by the developer. * This component uses the mgt-file component. * * @export * @class MgtFileList * @extends {MgtTemplatedComponent} * - * @fires itemClick - Fired when user click a file. Returns the file (DriveItem) details. + * @fires {CustomEvent<MicrosoftGraph.DriveItem>} itemClick - Fired when user click a file. Returns the file (DriveItem) details. * @cssprop --file-upload-border- {String} File upload border top style * @cssprop --file-upload-background-color - {Color} File upload background color with opacity style * @cssprop --file-upload-button-float - {string} Upload button float position @@ -712,7 +712,7 @@ export class MgtFileList extends MgtTemplatedComponent { */ private onFileListKeyDown(event: KeyboardEvent): void { const fileList = this.renderRoot.querySelector('.file-list'); - let focusedItem; + let focusedItem: Element; if (!fileList || !fileList.children.length) { return; @@ -736,7 +736,7 @@ export class MgtFileList extends MgtTemplatedComponent { if (event.code === 'Enter' || event.code === 'Space') { focusedItem = fileList.children[this._focusedItemIndex]; - const file = focusedItem.children[0] as any; + const file = focusedItem.children[0] as MgtFile; event.preventDefault(); this.fireCustomEvent('itemClick', file.fileDetails); diff --git a/packages/mgt-components/src/components/mgt-get/mgt-get.ts b/packages/mgt-components/src/components/mgt-get/mgt-get.ts index cbdc730a26..4c392733a7 100644 --- a/packages/mgt-components/src/components/mgt-get/mgt-get.ts +++ b/packages/mgt-components/src/components/mgt-get/mgt-get.ts @@ -65,10 +65,20 @@ const getResponseInvalidationTime = (currentInvalidationPeriod: number): number const getIsResponseCacheEnabled = (): boolean => CacheService.config.response.isEnabled && CacheService.config.isEnabled; +/** + * Holder type emitted with the dataChange event + */ +export type DataChangedDetail = { + // tslint:disable: completed-docs + response?: any; + error?: any; + // tslint:enable: completed-docs +}; + /** * Custom element for making Microsoft Graph get queries * - * @fires dataChange - Fired when data changes + * @fires {CustomEvent<DataChangedDetail>} dataChange - Fired when data changes * * @export * @class mgt-get diff --git a/packages/mgt-components/src/components/mgt-login/mgt-login.ts b/packages/mgt-components/src/components/mgt-login/mgt-login.ts index 3b40391510..4501401f37 100644 --- a/packages/mgt-components/src/components/mgt-login/mgt-login.ts +++ b/packages/mgt-components/src/components/mgt-login/mgt-login.ts @@ -55,11 +55,11 @@ type PersonViewConfig = { * @class MgtLogin * @extends {MgtBaseComponent} * - * @fires loginInitiated - Fired when login is initiated by the user - * @fires loginCompleted - Fired when login completes - * @fires loginFailed - Fired when login fails - * @fires logoutInitiated - Fired when logout is initiated by the user - * @fires logoutCompleted - Fired when logout completed + * @fires {CustomEvent<undefined>} loginInitiated - Fired when login is initiated by the user + * @fires {CustomEvent<undefined>} loginCompleted - Fired when login completes + * @fires {CustomEvent<undefined>} loginFailed - Fired when login fails + * @fires {CustomEvent<undefined>} logoutInitiated - Fired when logout is initiated by the user + * @fires {CustomEvent<undefined>} logoutCompleted - Fired when logout completed * * @template signed-in-button-content (dataContext: {personDetails, personImage}) * @template signed-out-button-content (dataContext: null) diff --git a/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts b/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts index dbaf403d13..824e5ee4e7 100644 --- a/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts +++ b/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts @@ -68,7 +68,7 @@ interface IFocusable { * @class MgtPicker * @extends {MgtTemplatedComponent} * - * @fires selectionChanged - Fired when selection changes + * @fires {CustomEvent<IDynamicPerson[]>} selectionChanged - Fired when set of selected people changes * * @cssprop --color - {Color} Default font color * diff --git a/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts b/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts index b4c60506d4..0fcd4a410d 100644 --- a/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts +++ b/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts @@ -65,7 +65,7 @@ type HoverStatesActions = 'email' | 'chat' | 'video' | 'call'; * @class MgtPersonCard * @extends {MgtTemplatedComponent} * - * @fires expanded - Fired when expanded details section is opened + * @fires {CustomEvent<null>} expanded - Fired when expanded details section is opened * * @cssprop --person-card-display-name-font-size - {Length} Font size of display name title * @cssprop --person-card-display-name-line-height - {Length} Line height of display name @@ -784,26 +784,26 @@ export class MgtPersonCard extends MgtTemplatedComponent { }); return html` - <fluent-tabs - orientation="horizontal" - activeindicator - @wheel=${(e: WheelEvent) => this.handleSectionScroll(e)} + <fluent-tabs + orientation="horizontal" + activeindicator + @wheel=${(e: WheelEvent) => this.handleSectionScroll(e)} + > + <fluent-tab + class="${overviewClasses}" + slot="tab" + @keyup="${() => this.updateCurrentSection(null)}" + @click=${() => this.updateCurrentSection(null)} > - <fluent-tab - class="${overviewClasses}" - slot="tab" - @keyup="${() => this.updateCurrentSection(null)}" - @click=${() => this.updateCurrentSection(null)} - > - <div>${getSvg(SvgIcon.Overview)}</div> - </fluent-tab> - ${additionalSectionTemplates} - <fluent-tab-panel slot="tabpanel" > - <div class="overview-panel">${!this._currentSection ? this.renderOverviewSection() : null}</div> - </fluent-tab-panel> - ${additionalPanelTemplates} - </fluent-tabs> - `; + <div>${getSvg(SvgIcon.Overview)}</div> + </fluent-tab> + ${additionalSectionTemplates} + <fluent-tab-panel slot="tabpanel" > + <div class="overview-panel">${!this._currentSection ? this.renderOverviewSection() : null}</div> + </fluent-tab-panel> + ${additionalPanelTemplates} + </fluent-tabs> + `; } /** diff --git a/packages/mgt-components/src/components/mgt-person/mgt-person.ts b/packages/mgt-components/src/components/mgt-person/mgt-person.ts index 3ed2371e13..0dc0fe8b15 100644 --- a/packages/mgt-components/src/components/mgt-person/mgt-person.ts +++ b/packages/mgt-components/src/components/mgt-person/mgt-person.ts @@ -53,10 +53,10 @@ const defaultPersonProperties = [ * @class MgtPerson * @extends {MgtTemplatedComponent} * - * @fires line1clicked - Fired when line1 is clicked - * @fires line2clicked - Fired when line2 is clicked - * @fires line3clicked - Fired when line3 is clicked - * @fires line4clicked - Fired when line4 is clicked + * @fires {CustomEvent<IDynamicPerson>} line1clicked - Fired when line1 is clicked + * @fires {CustomEvent<IDynamicPerson>} line2clicked - Fired when line2 is clicked + * @fires {CustomEvent<IDynamicPerson>} line3clicked - Fired when line3 is clicked + * @fires {CustomEvent<IDynamicPerson>} line4clicked - Fired when line4 is clicked * * @cssprop --avatar-size - {Length} Avatar size * @cssprop --avatar-border - {String} Avatar border diff --git a/packages/mgt-components/src/components/mgt-tasks/mgt-tasks.ts b/packages/mgt-components/src/components/mgt-tasks/mgt-tasks.ts index 19879e3c4e..7453df770a 100644 --- a/packages/mgt-components/src/components/mgt-tasks/mgt-tasks.ts +++ b/packages/mgt-components/src/components/mgt-tasks/mgt-tasks.ts @@ -134,10 +134,10 @@ const plannerAssignment = { * @class MgtTasks * @extends {MgtBaseComponent} * - * @fires taskAdded - Fires when a new task has been created. - * @fires taskChanged - Fires when task metadata has been changed, such as marking completed. - * @fires taskClick - Fires when the user clicks or taps on a task. - * @fires taskRemoved - Fires when an existing task has been deleted. + * @fires {CustomEvent<ITask>} taskAdded - Fires when a new task has been created. + * @fires {CustomEvent<ITask>} taskChanged - Fires when task metadata has been changed, such as marking completed. + * @fires {CustomEvent<ITask>} taskClick - Fires when the user clicks or taps on a task. + * @fires {CustomEvent<ITask>} taskRemoved - Fires when an existing task has been deleted. * * @cssprop --tasks-header-padding - {String} Tasks header padding * @cssprop --tasks-header-margin - {String} Tasks header margin @@ -224,7 +224,7 @@ export class MgtTasks extends MgtTemplatedComponent { * * @memberof MgtTasks */ - public get isNewTaskVisible() { + public get isNewTaskVisible(): boolean { return this._isNewTaskVisible; } @@ -650,8 +650,8 @@ export class MgtTasks extends MgtTemplatedComponent { } as ITask; this._newTaskBeingAdded = true; - const task = await ts.addTask(newTask); - this.fireCustomEvent('taskAdded', task); + newTask._raw = await ts.addTask(newTask); + this.fireCustomEvent('taskAdded', newTask); await this.requestStateUpdate(); this._newTaskBeingAdded = false; @@ -1334,7 +1334,7 @@ export class MgtTasks extends MgtTemplatedComponent { private handleTaskClick(task: ITask) { if (task) { - this.fireCustomEvent('taskClick', { task: task._raw }); + this.fireCustomEvent('taskClick', task); } } @@ -1478,3 +1478,5 @@ export class MgtTasks extends MgtTemplatedComponent { return null; } } + +export { ITask }; diff --git a/packages/mgt-components/src/components/mgt-tasks/task-sources.ts b/packages/mgt-components/src/components/mgt-tasks/task-sources.ts index 894d5c161a..de912dd5be 100644 --- a/packages/mgt-components/src/components/mgt-tasks/task-sources.ts +++ b/packages/mgt-components/src/components/mgt-tasks/task-sources.ts @@ -32,7 +32,7 @@ import { } from './mgt-tasks.graph.todo'; /** - * Itask + * ITask * * @export * @interface ITask @@ -611,7 +611,7 @@ export class TodoTaskSource extends TaskSourceBase implements ITaskSource { * @returns {Promise<any>} * @memberof TodoTaskSource */ - public async addTask(newTask: ITask): Promise<any> { + public async addTask(newTask: ITask): Promise<OutlookTask> { const task = { parentFolderId: newTask.immediateParentId, subject: newTask.name diff --git a/packages/mgt-components/src/components/mgt-teams-channel-picker/mgt-teams-channel-picker.ts b/packages/mgt-components/src/components/mgt-teams-channel-picker/mgt-teams-channel-picker.ts index ba4e7f9849..2079146046 100644 --- a/packages/mgt-components/src/components/mgt-teams-channel-picker/mgt-teams-channel-picker.ts +++ b/packages/mgt-components/src/components/mgt-teams-channel-picker/mgt-teams-channel-picker.ts @@ -139,7 +139,7 @@ export interface MgtTeamsChannelPickerConfig { * @class MgtTeamsChannelPicker * @extends {MgtTemplatedComponent} * - * @fires selectionChanged - Fired when the selection changes + * @fires {CustomEvent<SelectedChannel | null>} selectionChanged - Fired when the selection changes * * @cssprop --color - {font} Default font color * @@ -199,7 +199,7 @@ export class MgtTeamsChannelPicker extends MgtTemplatedComponent { * @type {SelectedChannel} * @memberof MgtTeamsChannelPicker */ - public get selectedItem(): SelectedChannel { + public get selectedItem(): SelectedChannel | null { if (this._selectedItemState) { return { channel: this._selectedItemState.item, team: this._selectedItemState.parent.item }; } else { @@ -896,7 +896,7 @@ export class MgtTeamsChannelPicker extends MgtTemplatedComponent { private selectChannel(item: ChannelPickerItemState) { if (this._selectedItemState !== item) { this._selectedItemState = item; - this.fireCustomEvent('selectionChanged', item ? [this.selectedItem] : []); + this.fireCustomEvent('selectionChanged', this.selectedItem); } const input = this._input; diff --git a/packages/mgt-components/src/components/mgt-todo/mgt-todo.ts b/packages/mgt-components/src/components/mgt-todo/mgt-todo.ts index 361540d712..25dc71602e 100644 --- a/packages/mgt-components/src/components/mgt-todo/mgt-todo.ts +++ b/packages/mgt-components/src/components/mgt-todo/mgt-todo.ts @@ -29,10 +29,9 @@ import { import { styles } from './mgt-todo-css'; import { strings } from './strings'; -/* +/** * Filter function */ -// tslint:disable-next-line: completed-docs export type TodoFilter = (task: TodoTask) => boolean; /** diff --git a/packages/mgt-element/src/components/templatedComponent.ts b/packages/mgt-element/src/components/templatedComponent.ts index 3471f88810..45424ff061 100644 --- a/packages/mgt-element/src/components/templatedComponent.ts +++ b/packages/mgt-element/src/components/templatedComponent.ts @@ -29,6 +29,14 @@ interface RenderedTemplates { }; } +// tslint:disable: completed-docs +export interface TemplateRenderedData { + templateType: string; + context: Record<string, unknown>; + element: HTMLElement; +} +// tslint:enable: completed-docs + /** * An abstract class that defines a templatable web component * @@ -37,7 +45,7 @@ interface RenderedTemplates { * @class MgtTemplatedComponent * @extends {MgtBaseComponent} * - * @fires templateRendered - fires when a template is rendered + * @fires {CustomEvent<MgtElement.TemplateRenderedData>} templateRendered - fires when a template is rendered */ export abstract class MgtTemplatedComponent extends MgtBaseComponent { /** @@ -135,7 +143,8 @@ export abstract class MgtTemplatedComponent extends MgtBaseComponent { this._renderedTemplates[slotName] = { context: dataContext, slot: div }; - this.fireCustomEvent('templateRendered', { templateType, context: dataContext, element: div }); + const templateRenderedData: TemplateRenderedData = { templateType, context: dataContext, element: div }; + this.fireCustomEvent('templateRendered', templateRenderedData); return template; } diff --git a/packages/mgt-react/package.json b/packages/mgt-react/package.json index 017e32f47b..043615b148 100644 --- a/packages/mgt-react/package.json +++ b/packages/mgt-react/package.json @@ -28,7 +28,8 @@ "build": "npm run clean && npm run generate && tsc", "clean": "node ./scripts/clean.js", "postpack": "cpx *.tgz ../../artifacts", - "generate": "wca analyze ../mgt-components/src --format json --outFile temp/web-components.json && node ./scripts/generate.js" + "analyze": "custom-elements-manifest analyze --litelement --globs \"../*/src/**/*.ts\" --outdir temp", + "generate": "npm run analyze && node ./scripts/generate.js" }, "dependencies": { "@microsoft/mgt-components": "*", diff --git a/packages/mgt-react/scripts/generate.js b/packages/mgt-react/scripts/generate.js index 82ba113e09..6bc2741c2e 100644 --- a/packages/mgt-react/scripts/generate.js +++ b/packages/mgt-react/scripts/generate.js @@ -1,8 +1,8 @@ var fs = require('fs-extra'); -let wc = JSON.parse(fs.readFileSync(`${__dirname}/../temp/web-components.json`)); +let wc = JSON.parse(fs.readFileSync(`${__dirname}/../temp/custom-elements.json`)); -const primitives = new Set(['string', 'boolean', 'number', 'any']); +const primitives = new Set(['string', 'boolean', 'number', 'any', 'void', 'null', 'undefined']); const mgtComponentImports = new Set(); const mgtElementImports = new Set(); @@ -25,29 +25,65 @@ let output = ''; const wrappers = []; -for (const tag of wc.tags) { - if (!tags.has(tag.name)) { - continue; +const customTags = []; +for (const module of wc.modules) { + for (const d of module.declarations) { + if (d.customElement && d.tagName && tags.has(d.tagName)) { + customTags.push(d); + } + } +} + +const removeGenericTypeDecoration = type => { + if (type.endsWith('[]')) { + return type.substring(0, type.length - 2); + } else if (type.startsWith('Array<')) { + return removeGenericTypeDecoration(type.substring(6, type.length - 1)); + } else if (type.startsWith('CustomEvent<')) { + return removeGenericTypeDecoration(type.substring(12, type.length - 1)); + } + return type; +}; + +const addTypeToImports = type => { + if (type === '*') { + return; + } + // make sure to remove any generic type decorations before trying to split for union types + type = removeGenericTypeDecoration(type); + for (let t of type.split('|')) { + t = removeGenericTypeDecoration(t.trim()); + if (t.startsWith('MicrosoftGraph.') || t.startsWith('MicrosoftGraphBeta.')) { + return; + } + + if (t.startsWith('MgtElement.') && !mgtElementImports.has(t)) { + mgtElementImports.add(t.split('.')[1]); + } else if (!primitives.has(t) && !mgtComponentImports.has(t)) { + mgtComponentImports.add(t); + } } +}; - const className = tag.name +for (const tag of customTags.sort((a, b) => (a.tagName > b.tagName ? 1 : -1))) { + const className = tag.tagName .split('-') .map(t => t[0].toUpperCase() + t.substring(1)) .join(''); wrappers.push({ - tag: tag.name, + tag: tag.tagName, propsType: className + 'Props', className: className }); const props = {}; - for (let i = 0; i < tag.properties.length; ++i) { - const prop = tag.properties[i]; - let type = prop.type; + for (let i = 0; i < tag.members.length; ++i) { + const prop = tag.members[i]; + let type = prop.type?.text; - if (type) { + if (type && prop.kind === 'field' && prop.privacy === 'public' && !prop.static) { if (prop.name) { props[prop.name] = type; } @@ -55,30 +91,16 @@ for (const tag of wc.tags) { if (type.includes('|')) { const types = type.split('|'); for (const t of types) { - tag.properties.push({ - type: t.trim() + tag.members.push({ + kind: 'field', + privacy: 'public', + type: { text: t.trim() } }); } continue; } - if (type.endsWith('[]')) { - type = type.substring(0, type.length - 2); - } else if (type.startsWith('Array<')) { - type = type.substring(6, type.length - 1); - } else if (type === '*') { - continue; - } - - if (type.startsWith('MicrosoftGraph.') || type.startsWith('MicrosoftGraphBeta.')) { - continue; - } - - if (type.startsWith('MgtElement.') && !mgtElementImports.has(type)) { - mgtElementImports.add(type.split('.')[1]); - } else if (!primitives.has(type) && !mgtComponentImports.has(type)) { - mgtComponentImports.add(type); - } + addTypeToImports(type); } } @@ -94,7 +116,17 @@ for (const tag of wc.tags) { if (tag.events) { for (const event of tag.events) { - propsType += `\t${event.name}?: (e: Event) => void;\n`; + if (event.type && event.type.text) { + // remove MgtElement. prefix as this it only used to ensure it's imported from the correct package + propsType += `\t${event.name}?: (e: ${event.type.text.replace( + 'CustomEvent<MgtElement.', + 'CustomEvent<' + )}) => void;\n`; + // also ensure that the necessary import is added to either mgt-element or mgt-component imports + addTypeToImports(event.type.text); + } else { + propsType += `\t${event.name}?: (e: Event) => void;\n`; + } } } diff --git a/packages/mgt-react/src/generated/react.ts b/packages/mgt-react/src/generated/react.ts index 3cb64475e6..580e1fbdbf 100644 --- a/packages/mgt-react/src/generated/react.ts +++ b/packages/mgt-react/src/generated/react.ts @@ -1,5 +1,5 @@ -import { OfficeGraphInsightString,ViewType,ResponseType,IDynamicPerson,LoginViewType,PersonType,GroupType,UserType,PersonCardInteraction,MgtPersonConfig,AvatarSize,PersonViewType,TasksStringResource,TasksSource,TaskFilter,SelectedChannel,TodoFilter } from '@microsoft/mgt-components'; -import { TemplateContext,ComponentMediaQuery } from '@microsoft/mgt-element'; +import { OfficeGraphInsightString,ViewType,ResponseType,DataChangedDetail,IDynamicPerson,LoginViewType,PersonCardInteraction,PersonType,GroupType,UserType,AvatarSize,PersonViewType,TasksStringResource,TasksSource,TaskFilter,ITask,SelectedChannel,TodoFilter } from '@microsoft/mgt-components'; +import { TemplateContext,ComponentMediaQuery,TemplateRenderedData } from '@microsoft/mgt-element'; import * as MicrosoftGraph from '@microsoft/microsoft-graph-types'; import * as MicrosoftGraphBeta from '@microsoft/microsoft-graph-types-beta'; import {wrapMgt} from '../Mgt'; @@ -15,33 +15,8 @@ export type AgendaProps = { preferredTimezone?: string; templateContext?: TemplateContext; mediaQuery?: ComponentMediaQuery; - eventClick?: (e: Event) => void; - templateRendered?: (e: Event) => void; -} - -export type FileListProps = { - fileListQuery?: string; - fileQueries?: string[]; - files?: MicrosoftGraph.DriveItem[]; - siteId?: string; - driveId?: string; - groupId?: string; - itemId?: string; - itemPath?: string; - userId?: string; - insightType?: OfficeGraphInsightString; - fileExtensions?: string[]; - hideMoreFilesButton?: boolean; - maxFileSize?: number; - excludedFileExtensions?: string[]; - pageSize?: number; - itemView?: ViewType; - maxUploadFile?: number; - enableFileUpload?: boolean; - templateContext?: TemplateContext; - mediaQuery?: ComponentMediaQuery; - itemClick?: (e: Event) => void; - templateRendered?: (e: Event) => void; + eventClick?: (e: CustomEvent<MicrosoftGraph.Event>) => void; + templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void; } export type FileProps = { @@ -64,7 +39,32 @@ export type FileProps = { view?: ViewType; templateContext?: TemplateContext; mediaQuery?: ComponentMediaQuery; - templateRendered?: (e: Event) => void; + templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void; +} + +export type FileListProps = { + fileListQuery?: string; + fileQueries?: string[]; + files?: MicrosoftGraph.DriveItem[]; + siteId?: string; + driveId?: string; + groupId?: string; + itemId?: string; + itemPath?: string; + userId?: string; + insightType?: OfficeGraphInsightString; + itemView?: ViewType; + fileExtensions?: string[]; + pageSize?: number; + hideMoreFilesButton?: boolean; + maxFileSize?: number; + enableFileUpload?: boolean; + maxUploadFile?: number; + excludedFileExtensions?: string[]; + templateContext?: TemplateContext; + mediaQuery?: ComponentMediaQuery; + itemClick?: (e: CustomEvent<MicrosoftGraph.DriveItem>) => void; + templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void; } export type GetProps = { @@ -76,10 +76,12 @@ export type GetProps = { pollingRate?: number; cacheEnabled?: boolean; cacheInvalidationPeriod?: number; + response?: any; + error?: any; templateContext?: TemplateContext; mediaQuery?: ComponentMediaQuery; - dataChange?: (e: Event) => void; - templateRendered?: (e: Event) => void; + dataChange?: (e: CustomEvent<DataChangedDetail>) => void; + templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void; } export type LoginProps = { @@ -88,12 +90,29 @@ export type LoginProps = { loginView?: LoginViewType; templateContext?: TemplateContext; mediaQuery?: ComponentMediaQuery; - loginInitiated?: (e: Event) => void; - loginCompleted?: (e: Event) => void; - loginFailed?: (e: Event) => void; - logoutInitiated?: (e: Event) => void; - logoutCompleted?: (e: Event) => void; - templateRendered?: (e: Event) => void; + loginInitiated?: (e: CustomEvent<undefined>) => void; + loginCompleted?: (e: CustomEvent<undefined>) => void; + loginFailed?: (e: CustomEvent<undefined>) => void; + logoutInitiated?: (e: CustomEvent<undefined>) => void; + logoutCompleted?: (e: CustomEvent<undefined>) => void; + templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void; +} + +export type PeopleProps = { + groupId?: string; + userIds?: string[]; + people?: IDynamicPerson[]; + peopleQueries?: string[]; + showMax?: number; + showPresence?: boolean; + personCardInteraction?: PersonCardInteraction; + resource?: string; + version?: string; + scopes?: string[]; + fallbackDetails?: IDynamicPerson[]; + templateContext?: TemplateContext; + mediaQuery?: ComponentMediaQuery; + templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void; } export type PeoplePickerProps = { @@ -104,70 +123,38 @@ export type PeoplePickerProps = { userType?: UserType; transitiveSearch?: boolean; people?: IDynamicPerson[]; + showMax?: number; + disableImages?: boolean; selectedPeople?: IDynamicPerson[]; defaultSelectedUserIds?: string[]; defaultSelectedGroupIds?: string[]; placeholder?: string; + disabled?: boolean; + allowAnyEmail?: boolean; selectionMode?: string; userIds?: string[]; userFilters?: string; peopleFilters?: string; groupFilters?: string; ariaLabel?: string; - showMax?: number; - disableImages?: boolean; - disabled?: boolean; - allowAnyEmail?: boolean; - templateContext?: TemplateContext; - mediaQuery?: ComponentMediaQuery; - selectionChanged?: (e: Event) => void; - templateRendered?: (e: Event) => void; -} - -export type PeopleProps = { - groupId?: string; - userIds?: string[]; - people?: IDynamicPerson[]; - peopleQueries?: string[]; - showPresence?: boolean; - personCardInteraction?: PersonCardInteraction; - resource?: string; - version?: string; - scopes?: string[]; - fallbackDetails?: IDynamicPerson[]; - showMax?: number; - templateContext?: TemplateContext; - mediaQuery?: ComponentMediaQuery; - templateRendered?: (e: Event) => void; -} - -export type PersonCardProps = { - personDetails?: IDynamicPerson; - personQuery?: string; - lockTabNavigation?: boolean; - userId?: string; - personImage?: string; - fetchImage?: boolean; - isExpanded?: boolean; - inheritDetails?: boolean; - showPresence?: boolean; - personPresence?: MicrosoftGraph.Presence; templateContext?: TemplateContext; mediaQuery?: ComponentMediaQuery; - expanded?: (e: Event) => void; - templateRendered?: (e: Event) => void; + selectionChanged?: (e: CustomEvent<IDynamicPerson[]>) => void; + templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void; } export type PersonProps = { - config?: MgtPersonConfig; personQuery?: string; fallbackDetails?: IDynamicPerson; userId?: string; usage?: string; showPresence?: boolean; + avatarSize?: AvatarSize; personDetails?: IDynamicPerson; personImage?: string; fetchImage?: boolean; + disableImageFetch?: boolean; + verticalLayout?: boolean; avatarType?: string; personPresence?: MicrosoftGraph.Presence; personCardInteraction?: PersonCardInteraction; @@ -176,16 +163,30 @@ export type PersonProps = { line3Property?: string; line4Property?: string; view?: ViewType | PersonViewType; - avatarSize?: AvatarSize; - disableImageFetch?: boolean; - verticalLayout?: boolean; templateContext?: TemplateContext; mediaQuery?: ComponentMediaQuery; - line1clicked?: (e: Event) => void; - line2clicked?: (e: Event) => void; - line3clicked?: (e: Event) => void; - line4clicked?: (e: Event) => void; - templateRendered?: (e: Event) => void; + line1clicked?: (e: CustomEvent<IDynamicPerson>) => void; + line2clicked?: (e: CustomEvent<IDynamicPerson>) => void; + line3clicked?: (e: CustomEvent<IDynamicPerson>) => void; + line4clicked?: (e: CustomEvent<IDynamicPerson>) => void; + templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void; +} + +export type PersonCardProps = { + personDetails?: IDynamicPerson; + personQuery?: string; + lockTabNavigation?: boolean; + userId?: string; + personImage?: string; + fetchImage?: boolean; + isExpanded?: boolean; + inheritDetails?: boolean; + showPresence?: boolean; + personPresence?: MicrosoftGraph.Presence; + templateContext?: TemplateContext; + mediaQuery?: ComponentMediaQuery; + expanded?: (e: CustomEvent<null>) => void; + templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void; } export type TasksProps = { @@ -203,19 +204,19 @@ export type TasksProps = { taskFilter?: TaskFilter; templateContext?: TemplateContext; mediaQuery?: ComponentMediaQuery; - taskAdded?: (e: Event) => void; - taskChanged?: (e: Event) => void; - taskClick?: (e: Event) => void; - taskRemoved?: (e: Event) => void; - templateRendered?: (e: Event) => void; + taskAdded?: (e: CustomEvent<ITask>) => void; + taskChanged?: (e: CustomEvent<ITask>) => void; + taskClick?: (e: CustomEvent<ITask>) => void; + taskRemoved?: (e: CustomEvent<ITask>) => void; + templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void; } export type TeamsChannelPickerProps = { selectedItem?: SelectedChannel; templateContext?: TemplateContext; mediaQuery?: ComponentMediaQuery; - selectionChanged?: (e: Event) => void; - templateRendered?: (e: Event) => void; + selectionChanged?: (e: CustomEvent<SelectedChannel | null>) => void; + templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void; } export type TodoProps = { @@ -227,27 +228,27 @@ export type TodoProps = { initialId?: string; templateContext?: TemplateContext; mediaQuery?: ComponentMediaQuery; - templateRendered?: (e: Event) => void; + templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void; } export const Agenda = wrapMgt<AgendaProps>('agenda'); -export const FileList = wrapMgt<FileListProps>('file-list'); - export const File = wrapMgt<FileProps>('file'); +export const FileList = wrapMgt<FileListProps>('file-list'); + export const Get = wrapMgt<GetProps>('get'); export const Login = wrapMgt<LoginProps>('login'); -export const PeoplePicker = wrapMgt<PeoplePickerProps>('people-picker'); - export const People = wrapMgt<PeopleProps>('people'); -export const PersonCard = wrapMgt<PersonCardProps>('person-card'); +export const PeoplePicker = wrapMgt<PeoplePickerProps>('people-picker'); export const Person = wrapMgt<PersonProps>('person'); +export const PersonCard = wrapMgt<PersonCardProps>('person-card'); + export const Tasks = wrapMgt<TasksProps>('tasks'); export const TeamsChannelPicker = wrapMgt<TeamsChannelPickerProps>('teams-channel-picker'); diff --git a/stories/components/agenda/agenda.a.js b/stories/components/agenda/agenda.a.js index 12aa5573ec..e7a96981fc 100644 --- a/stories/components/agenda/agenda.a.js +++ b/stories/components/agenda/agenda.a.js @@ -7,15 +7,18 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; -import { versionInfo } from '../../versionInfo'; +import { defaultDocsPage } from '../../../.storybook/story-elements/defaultDocsPage'; export default { - parameters: { - version: versionInfo - }, title: 'Components / mgt-agenda', - component: 'mgt-agenda', - decorators: [withCodeEditor] + component: 'agenda', + decorators: [withCodeEditor], + parameters: { + docs: { + page: defaultDocsPage, + source: { code: '<mgt-agenda></mgt-agenda>' } + } + } }; export const simple = () => html` @@ -30,7 +33,7 @@ export const events = () => html` <script> const agenda = document.querySelector('mgt-agenda'); agenda.addEventListener('eventClick', (e) => { - console.log(e.detail.event); + console.log(e.detail); }) </script> `; @@ -40,3 +43,14 @@ export const RTL = () => html` <mgt-agenda></mgt-agenda> </body> `; +RTL.parameters = { + docs: { + source: { + code: ` +<body dir="rtl"> + <mgt-agenda></mgt-agenda> +</body> +` + } + } +}; diff --git a/stories/components/agenda/agenda.properties.js b/stories/components/agenda/agenda.properties.js index 3642271082..ec606a188b 100644 --- a/stories/components/agenda/agenda.properties.js +++ b/stories/components/agenda/agenda.properties.js @@ -7,14 +7,10 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; -import { versionInfo } from '../../versionInfo'; export default { - parameters: { - version: versionInfo - }, title: 'Components / mgt-agenda / Properties', - component: 'mgt-agenda', + component: 'agenda', decorators: [withCodeEditor] }; diff --git a/stories/components/agenda/agenda.style.js b/stories/components/agenda/agenda.style.js index bd0ca66fca..c385d15267 100644 --- a/stories/components/agenda/agenda.style.js +++ b/stories/components/agenda/agenda.style.js @@ -7,14 +7,10 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; -import { versionInfo } from '../../versionInfo'; export default { - parameters: { - version: versionInfo - }, title: 'Components / mgt-agenda / Style', - component: 'mgt-agenda', + component: 'agenda', decorators: [withCodeEditor] }; diff --git a/stories/components/agenda/agenda.templating.js b/stories/components/agenda/agenda.templating.js index a376c0abb3..3f80708618 100644 --- a/stories/components/agenda/agenda.templating.js +++ b/stories/components/agenda/agenda.templating.js @@ -7,14 +7,10 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; -import { versionInfo } from '../../versionInfo'; export default { - parameters: { - version: versionInfo - }, title: 'Components / mgt-agenda / Templating', - component: 'mgt-agenda', + component: 'agenda', decorators: [withCodeEditor] }; diff --git a/stories/components/file/file.a.js b/stories/components/file/file.a.js index 3edc4482a3..c25c63d840 100644 --- a/stories/components/file/file.a.js +++ b/stories/components/file/file.a.js @@ -7,14 +7,10 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; -import { versionInfo } from '../../versionInfo'; export default { - parameters: { - version: versionInfo - }, title: 'Components / mgt-file', - component: 'mgt-file', + component: 'file', decorators: [withCodeEditor] }; diff --git a/stories/components/file/file.properties.js b/stories/components/file/file.properties.js index 371593391e..c17110b35f 100644 --- a/stories/components/file/file.properties.js +++ b/stories/components/file/file.properties.js @@ -7,14 +7,10 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; -import { versionInfo } from '../../versionInfo'; export default { - parameters: { - version: versionInfo - }, title: 'Components / mgt-file / Properties', - component: 'mgt-file', + component: 'file', decorators: [withCodeEditor] }; diff --git a/stories/components/file/file.style.js b/stories/components/file/file.style.js index 6ea3ff22d4..ec1b04bbbe 100644 --- a/stories/components/file/file.style.js +++ b/stories/components/file/file.style.js @@ -7,14 +7,10 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; -import { versionInfo } from '../../versionInfo'; export default { - parameters: { - version: versionInfo - }, title: 'Components / mgt-file / Style', - component: 'mgt-file', + component: 'file', decorators: [withCodeEditor] }; diff --git a/stories/components/file/file.templating.js b/stories/components/file/file.templating.js index 0b7550233e..bb6c210889 100644 --- a/stories/components/file/file.templating.js +++ b/stories/components/file/file.templating.js @@ -1,13 +1,9 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; -import { versionInfo } from '../../versionInfo'; export default { - parameters: { - version: versionInfo - }, title: 'Components / mgt-file / Templating', - component: 'mgt-file', + component: 'file', decorators: [withCodeEditor] }; diff --git a/stories/components/fileList/fileList.a.js b/stories/components/fileList/fileList.a.js index 6fb0d74231..ef91cab12f 100644 --- a/stories/components/fileList/fileList.a.js +++ b/stories/components/fileList/fileList.a.js @@ -7,14 +7,10 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; -import { versionInfo } from '../../versionInfo'; export default { - parameters: { - version: versionInfo - }, title: 'Components / mgt-file-list', - component: 'mgt-file-list', + component: 'file-list', decorators: [withCodeEditor] }; diff --git a/stories/components/fileList/fileList.properties.js b/stories/components/fileList/fileList.properties.js index 18eedfd00e..b8510778f2 100644 --- a/stories/components/fileList/fileList.properties.js +++ b/stories/components/fileList/fileList.properties.js @@ -7,14 +7,10 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; -import { versionInfo } from '../../versionInfo'; export default { - parameters: { - version: versionInfo - }, title: 'Components / mgt-file-list / Properties', - component: 'mgt-file-list', + component: 'file-list', decorators: [withCodeEditor] }; diff --git a/stories/components/fileList/fileList.style.js b/stories/components/fileList/fileList.style.js index d70a192bab..87aac5055d 100644 --- a/stories/components/fileList/fileList.style.js +++ b/stories/components/fileList/fileList.style.js @@ -7,14 +7,10 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; -import { versionInfo } from '../../versionInfo'; export default { - parameters: { - version: versionInfo - }, title: 'Components / mgt-file-list / Style', - component: 'mgt-file-list', + component: 'file-list', decorators: [withCodeEditor] }; diff --git a/stories/components/fileList/fileList.templating.js b/stories/components/fileList/fileList.templating.js index ecb3ea983c..d65a87a8e4 100644 --- a/stories/components/fileList/fileList.templating.js +++ b/stories/components/fileList/fileList.templating.js @@ -6,14 +6,10 @@ */ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; -import { versionInfo } from '../../versionInfo'; export default { - parameters: { - version: versionInfo - }, title: 'Components / mgt-file-list / Templating', - component: 'mgt-file', + component: 'file', decorators: [withCodeEditor] }; diff --git a/stories/components/get.stories.js b/stories/components/get.stories.js index 4eb33b268a..d016a72453 100644 --- a/stories/components/get.stories.js +++ b/stories/components/get.stories.js @@ -7,14 +7,10 @@ import { html } from 'lit'; import { withCodeEditor } from '../../.storybook/addons/codeEditorAddon/codeAddon'; -import { versionInfo } from '../versionInfo'; export default { - parameters: { - version: versionInfo - }, title: 'Components / mgt-get', - component: 'mgt-get', + component: 'get', decorators: [withCodeEditor] }; diff --git a/stories/components/login/login.stories.js b/stories/components/login/login.stories.js index 5b9b394486..5fdf8f2a45 100644 --- a/stories/components/login/login.stories.js +++ b/stories/components/login/login.stories.js @@ -7,14 +7,10 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; -import { versionInfo } from '../../versionInfo'; export default { - parameters: { - version: versionInfo - }, title: 'Components / mgt-login', - component: 'mgt-login', + component: 'login', decorators: [withCodeEditor] }; diff --git a/stories/components/login/login.styles.js b/stories/components/login/login.styles.js index 65f5e9602b..2b2b3f02ef 100644 --- a/stories/components/login/login.styles.js +++ b/stories/components/login/login.styles.js @@ -7,14 +7,10 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; -import { versionInfo } from '../../versionInfo'; export default { - parameters: { - version: versionInfo - }, title: 'Components / mgt-login / Styles', - component: 'mgt-login', + component: 'login', decorators: [withCodeEditor] }; diff --git a/stories/components/people/people.a.js b/stories/components/people/people.a.js index 18f3271ebf..16cb37dba0 100644 --- a/stories/components/people/people.a.js +++ b/stories/components/people/people.a.js @@ -7,14 +7,10 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; -import { versionInfo } from '../../versionInfo'; export default { - parameters: { - version: versionInfo - }, title: 'Components / mgt-people', - component: 'mgt-people', + component: 'people', decorators: [withCodeEditor] }; diff --git a/stories/components/people/people.properties.js b/stories/components/people/people.properties.js index 9dba924e31..191214fa1a 100644 --- a/stories/components/people/people.properties.js +++ b/stories/components/people/people.properties.js @@ -7,14 +7,10 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; -import { versionInfo } from '../../versionInfo'; export default { - parameters: { - version: versionInfo - }, title: 'Components / mgt-people / Properties', - component: 'mgt-people', + component: 'people', decorators: [withCodeEditor] }; diff --git a/stories/components/people/people.styles.js b/stories/components/people/people.styles.js index 550821d22c..0b5c7c6475 100644 --- a/stories/components/people/people.styles.js +++ b/stories/components/people/people.styles.js @@ -7,14 +7,10 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; -import { versionInfo } from '../../versionInfo'; export default { - parameters: { - version: versionInfo - }, title: 'Components / mgt-people / Styles', - component: 'mgt-people', + component: 'people', decorators: [withCodeEditor] }; diff --git a/stories/components/people/people.templating.js b/stories/components/people/people.templating.js index d32b01339b..0a27757c34 100644 --- a/stories/components/people/people.templating.js +++ b/stories/components/people/people.templating.js @@ -7,14 +7,10 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; -import { versionInfo } from '../../versionInfo'; export default { - parameters: { - version: versionInfo - }, title: 'Components / mgt-people / Templating', - component: 'mgt-people', + component: 'people', decorators: [withCodeEditor] }; diff --git a/stories/components/peoplePicker/peoplePicker.a.js b/stories/components/peoplePicker/peoplePicker.a.js index 2bde4a5753..2ec0cf4417 100644 --- a/stories/components/peoplePicker/peoplePicker.a.js +++ b/stories/components/peoplePicker/peoplePicker.a.js @@ -7,14 +7,10 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; -import { versionInfo } from '../../versionInfo'; export default { - parameters: { - version: versionInfo - }, title: 'Components / mgt-people-picker', - component: 'mgt-people-picker', + component: 'people-picker', decorators: [withCodeEditor] }; diff --git a/stories/components/peoplePicker/peoplePicker.properties.js b/stories/components/peoplePicker/peoplePicker.properties.js index 7a7616399b..bc62b3e3a9 100644 --- a/stories/components/peoplePicker/peoplePicker.properties.js +++ b/stories/components/peoplePicker/peoplePicker.properties.js @@ -7,14 +7,10 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; -import { versionInfo } from '../../versionInfo'; export default { - parameters: { - version: versionInfo - }, title: 'Components / mgt-people-picker / Properties', - component: 'mgt-people-picker', + component: 'people-picker', decorators: [withCodeEditor] }; diff --git a/stories/components/peoplePicker/peoplePicker.style.js b/stories/components/peoplePicker/peoplePicker.style.js index 1e3bf92d7b..86560464a6 100644 --- a/stories/components/peoplePicker/peoplePicker.style.js +++ b/stories/components/peoplePicker/peoplePicker.style.js @@ -7,14 +7,10 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; -import { versionInfo } from '../../versionInfo'; export default { - parameters: { - version: versionInfo - }, title: 'Components / mgt-people-picker / Styles', - component: 'mgt-people-picker', + component: 'people-picker', decorators: [withCodeEditor] }; diff --git a/stories/components/peoplePicker/peoplePicker.templating.js b/stories/components/peoplePicker/peoplePicker.templating.js index 7910ac805c..318bfc0e1d 100644 --- a/stories/components/peoplePicker/peoplePicker.templating.js +++ b/stories/components/peoplePicker/peoplePicker.templating.js @@ -7,14 +7,10 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; -import { versionInfo } from '../../versionInfo'; export default { - parameters: { - version: versionInfo - }, title: 'Components / mgt-people-picker / Templating', - component: 'mgt-people-picker', + component: 'people-picker', decorators: [withCodeEditor] }; diff --git a/stories/components/person/person.js b/stories/components/person/person.js index c63614f858..817a8cc437 100644 --- a/stories/components/person/person.js +++ b/stories/components/person/person.js @@ -7,14 +7,10 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; -import { versionInfo } from '../../versionInfo'; export default { - parameters: { - version: versionInfo - }, title: 'Components | mgt-person', - component: 'mgt-person', + component: 'person', decorators: [withCodeEditor] }; diff --git a/stories/components/person/person.properties.js b/stories/components/person/person.properties.js index 8055bf66d0..6af1a2a120 100644 --- a/stories/components/person/person.properties.js +++ b/stories/components/person/person.properties.js @@ -7,14 +7,10 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; -import { versionInfo } from '../../versionInfo'; export default { - parameters: { - version: versionInfo - }, title: 'Components / mgt-person / Properties', - component: 'mgt-person', + component: 'person', decorators: [withCodeEditor] }; @@ -37,12 +33,12 @@ export const setPersonDetails = () => html` <mgt-person class="my-person" view="twoLines" line2-property="title" person-card="hover" fetch-image> </mgt-person> <script> const person = document.querySelector('.my-person'); - + person.personDetails = { displayName: 'Megan Bowen', mail: 'MeganB@M365x214355.onmicrosoft.com' }; - + // set image // person.personImage = ''; </script> @@ -65,7 +61,7 @@ export const personFallbackDetails = () => html` <mgt-person person-query="mbowen" view="twoLines" fallback-details='{}'></mgt-person> </div> - + <style> .example { margin-top: 16px; @@ -93,9 +89,9 @@ export const personView = () => html` <div class="example"> <mgt-person person-query="me" view="fourlines"></mgt-person> </div> - + <!-- Person View with presence; check JS tab --> - + <div class="example"> <mgt-person person-query="me" id="online" view="oneline" show-presence></mgt-person> </div> @@ -108,7 +104,7 @@ export const personView = () => html` <div class="example"> <mgt-person person-query="me" id="online4" show-presence view="fourLines" ></mgt-person> </div> - + <script> const online = { activity: 'Available', @@ -119,13 +115,13 @@ export const personView = () => html` const onlinePerson2 = document.getElementById('online2'); const onlinePerson3 = document.getElementById('online3'); const onlinePerson4 = document.getElementById('online4'); - + onlinePerson.personPresence = online; onlinePerson2.personPresence = online; onlinePerson3.personPresence = online; onlinePerson4.personPresence = online; </script> - + <style> .example { margin-bottom: 20px; @@ -216,7 +212,7 @@ export const personPresenceDisplayAll = () => html` availability: 'Offline', id: null }; - + const onlinePerson = document.getElementById('online'); const onlineOofPerson = document.getElementById('onlineOof'); const busyPerson = document.getElementById('busy'); @@ -233,7 +229,7 @@ export const personPresenceDisplayAll = () => html` const dndOofPersonSmall = document.getElementById('dndOof-small'); const awayPersonSmall = document.getElementById('away-small'); const oofPersonSmall = document.getElementById('oof-small'); - + onlinePerson.personPresence = online; onlineOofPerson.personPresence = onlineOof; busyPerson.personPresence = busy; @@ -315,7 +311,7 @@ export const moreExamples = () => html` .example { margin-bottom: 20px; } - + .styled-person { --font-family: 'Comic Sans MS', cursive, sans-serif; --color-sub1: red; @@ -325,7 +321,7 @@ export const moreExamples = () => html` --avatar-border-radius: 10% 35%; --line2-text-transform: uppercase; } - + .person-initials { --initials-color: yellow; --initials-background-color: red; @@ -333,22 +329,22 @@ export const moreExamples = () => html` --avatar-border-radius: 10% 35%; } </style> - + <div class="example"> <div>Default person</div> <mgt-person person-query="me"></mgt-person> </div> - + <div class="example"> <div>One line</div> <mgt-person person-query="me" view="oneline"></mgt-person> </div> - + <div class="example"> <div>Two lines</div> <mgt-person person-query="me" view="twoLines"></mgt-person> </div> - + <div class="example"> <div>Change line content</div> <!--add fallback property by comma separating--> @@ -359,27 +355,27 @@ export const moreExamples = () => html` view="twoLines" ></mgt-person> </div> - + <div class="example"> <div>Large avatar</div> <mgt-person person-query="me" avatar-size="large"></mgt-person> </div> - + <div class="example"> <div>Different styles (see css tab for style)</div> <mgt-person class="styled-person" person-query="me" view="twoLines"></mgt-person> </div> - + <div class="example" style="width: 200px"> <div>Overflow</div> <mgt-person person-query="me" view="twoLines"></mgt-person> </div> - + <div class="example"> <div>Style initials (see css tab for style)</div> <mgt-person class="person-initials" person-query="alex@fineartschool.net" view="oneline"></mgt-person> </div> - + <div> <div>Additional Person properties</div> <mgt-person diff --git a/stories/components/person/person.style.js b/stories/components/person/person.style.js index cd12698268..93343bf49f 100644 --- a/stories/components/person/person.style.js +++ b/stories/components/person/person.style.js @@ -7,14 +7,10 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; -import { versionInfo } from '../../versionInfo'; export default { - parameters: { - version: versionInfo - }, title: 'Components / mgt-person / Style', - component: 'mgt-person', + component: 'person', decorators: [withCodeEditor] }; diff --git a/stories/components/person/person.templating.js b/stories/components/person/person.templating.js index 82c785b08c..46a4a8e3b3 100644 --- a/stories/components/person/person.templating.js +++ b/stories/components/person/person.templating.js @@ -7,14 +7,10 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; -import { versionInfo } from '../../versionInfo'; export default { - parameters: { - version: versionInfo - }, title: 'Components / mgt-person / Templating', - component: 'mgt-person', + component: 'person', decorators: [withCodeEditor] }; diff --git a/stories/components/personCard/personCard.a.js b/stories/components/personCard/personCard.a.js index 9abbc5fb99..f39eab76db 100644 --- a/stories/components/personCard/personCard.a.js +++ b/stories/components/personCard/personCard.a.js @@ -7,14 +7,10 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; -import { versionInfo } from '../../versionInfo'; export default { - parameters: { - version: versionInfo - }, title: 'Components / mgt-person-card', - component: 'mgt-person-card', + component: 'person-card', decorators: [withCodeEditor] }; diff --git a/stories/components/personCard/personCard.properties.js b/stories/components/personCard/personCard.properties.js index c76c13a51a..65534db59a 100644 --- a/stories/components/personCard/personCard.properties.js +++ b/stories/components/personCard/personCard.properties.js @@ -7,14 +7,10 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; -import { versionInfo } from '../../versionInfo'; export default { - parameters: { - version: versionInfo - }, title: 'Components / mgt-person-card / Properties', - component: 'mgt-person-card', + component: 'person-card', decorators: [withCodeEditor] }; diff --git a/stories/components/personCard/personCard.style.js b/stories/components/personCard/personCard.style.js index b54ef113d6..9cd89802df 100644 --- a/stories/components/personCard/personCard.style.js +++ b/stories/components/personCard/personCard.style.js @@ -7,14 +7,10 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; -import { versionInfo } from '../../versionInfo'; export default { - parameters: { - version: versionInfo - }, title: 'Components / mgt-person-card / Style', - component: 'mgt-person-card', + component: 'person-card', decorators: [withCodeEditor] }; diff --git a/stories/components/personCard/personCard.templating.js b/stories/components/personCard/personCard.templating.js index 9cb5511620..14b241691b 100644 --- a/stories/components/personCard/personCard.templating.js +++ b/stories/components/personCard/personCard.templating.js @@ -7,14 +7,10 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; -import { versionInfo } from '../../versionInfo'; export default { - parameters: { - version: versionInfo - }, title: 'Components / mgt-person-card / Templating', - component: 'mgt-person-card', + component: 'person-card', decorators: [withCodeEditor] }; diff --git a/stories/components/tasks.stories.js b/stories/components/tasks.stories.js index 51bedaf383..371f627d08 100644 --- a/stories/components/tasks.stories.js +++ b/stories/components/tasks.stories.js @@ -7,14 +7,10 @@ import { html } from 'lit'; import { withCodeEditor } from '../../.storybook/addons/codeEditorAddon/codeAddon'; -import { versionInfo } from '../versionInfo'; export default { - parameters: { - version: versionInfo - }, title: 'Components / mgt-tasks', - component: 'mgt-tasks', + component: 'tasks', decorators: [withCodeEditor] }; diff --git a/stories/components/teamsChannelPicker/teamsChannelPicker.a.js b/stories/components/teamsChannelPicker/teamsChannelPicker.a.js index 39ceb7c9ac..446c512e93 100644 --- a/stories/components/teamsChannelPicker/teamsChannelPicker.a.js +++ b/stories/components/teamsChannelPicker/teamsChannelPicker.a.js @@ -7,14 +7,10 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; -import { versionInfo } from '../../versionInfo'; export default { - parameters: { - version: versionInfo - }, title: 'Components / mgt-teams-channel-picker', - component: 'mgt-teams-channel-picker', + component: 'teams-channel-picker', decorators: [withCodeEditor] }; diff --git a/stories/components/teamsChannelPicker/teamsChannelPicker.style.js b/stories/components/teamsChannelPicker/teamsChannelPicker.style.js index fc5cf39909..104cb27991 100644 --- a/stories/components/teamsChannelPicker/teamsChannelPicker.style.js +++ b/stories/components/teamsChannelPicker/teamsChannelPicker.style.js @@ -1,13 +1,9 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; -import { versionInfo } from '../../versionInfo'; export default { - parameters: { - version: versionInfo - }, title: 'Components / mgt-teams-channel-picker / Style', - component: 'mgt-teams-channel-picker', + component: 'teams-channel-picker', decorators: [withCodeEditor] }; diff --git a/stories/components/teamsChannelPicker/teamsChannelPicker.templating.js b/stories/components/teamsChannelPicker/teamsChannelPicker.templating.js index 186aef3f00..ff24dc9de5 100644 --- a/stories/components/teamsChannelPicker/teamsChannelPicker.templating.js +++ b/stories/components/teamsChannelPicker/teamsChannelPicker.templating.js @@ -7,14 +7,10 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; -import { versionInfo } from '../../versionInfo'; export default { - parameters: { - version: versionInfo - }, title: 'Components / mgt-teams-channel-picker / Templating', - component: 'mgt-teams-channel-picker', + component: 'teams-channel-picker', decorators: [withCodeEditor] }; diff --git a/stories/components/todo.stories.js b/stories/components/todo.stories.js index 04d7e32310..f8fa92f62b 100644 --- a/stories/components/todo.stories.js +++ b/stories/components/todo.stories.js @@ -7,14 +7,10 @@ import { html } from 'lit'; import { withCodeEditor } from '../../.storybook/addons/codeEditorAddon/codeAddon'; -import { versionInfo } from '../versionInfo'; export default { - parameters: { - version: versionInfo - }, title: 'Components / mgt-todo', - component: 'mgt-todo', + component: 'todo', decorators: [withCodeEditor] }; diff --git a/stories/overview.stories.mdx b/stories/overview.stories.mdx index f0f27cd296..1248222bd9 100644 --- a/stories/overview.stories.mdx +++ b/stories/overview.stories.mdx @@ -1,6 +1,6 @@ import { Meta, Source } from '@storybook/addon-docs'; import { PACKAGE_VERSION } from '@microsoft/mgt'; -import { versionInfo } from './versionInfo'; +import { versionInfo } from '../.storybook/versionInfo'; <Meta title="Overview" /> diff --git a/stories/samples/editor.stories.js b/stories/samples/editor.stories.js index a68f510b55..5c8d857a94 100644 --- a/stories/samples/editor.stories.js +++ b/stories/samples/editor.stories.js @@ -7,12 +7,8 @@ import { html } from 'lit'; import { withCodeEditor } from '../../.storybook/addons/codeEditorAddon/codeAddon'; -import { versionInfo } from '../versionInfo'; export default { - parameters: { - version: versionInfo - }, title: 'Editor', decorators: [withCodeEditor] }; diff --git a/stories/samples/general.stories.js b/stories/samples/general.stories.js index 23eca91d9f..42f92d036f 100644 --- a/stories/samples/general.stories.js +++ b/stories/samples/general.stories.js @@ -7,14 +7,9 @@ import { html } from 'lit'; import { withCodeEditor } from '../../.storybook/addons/codeEditorAddon/codeAddon'; -import { versionInfo } from '../versionInfo'; export default { - parameters: { - version: versionInfo - }, title: 'Samples / General', - component: 'mgt-combo', decorators: [withCodeEditor] }; diff --git a/stories/samples/templating.stories.js b/stories/samples/templating.stories.js index cb26bcc547..7a439a3070 100644 --- a/stories/samples/templating.stories.js +++ b/stories/samples/templating.stories.js @@ -7,14 +7,10 @@ import { html } from 'lit'; import { withCodeEditor } from '../../.storybook/addons/codeEditorAddon/codeAddon'; -import { versionInfo } from '../versionInfo'; export default { - parameters: { - version: versionInfo - }, title: 'Samples / Templating', - component: 'mgt-get', + component: 'get', decorators: [withCodeEditor] }; diff --git a/yarn.lock b/yarn.lock index ae46da5a26..9efc720896 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2162,6 +2162,29 @@ resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz#1bfafe4b7ed0f3e4105837e056e0a89b108ebe36" integrity sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg== +"@custom-elements-manifest/analyzer@^0.6.6": + version "0.6.8" + resolved "https://registry.yarnpkg.com/@custom-elements-manifest/analyzer/-/analyzer-0.6.8.tgz#7b8b662791b5e0e57666c56480351b6b32bd23a8" + integrity sha512-Wy5CiMUq9njT6vbeEPi7Zjm7OcVmL+5zyJXUam5TZe13QVnsn/m3VaJx8aqMecTp1m/pFNCL4QGJpYV/oZYIkg== + dependencies: + "@custom-elements-manifest/find-dependencies" "^0.0.5" + "@github/catalyst" "^1.6.0" + "@web/config-loader" "0.1.3" + chokidar "3.5.2" + command-line-args "5.1.2" + comment-parser "1.2.4" + custom-elements-manifest "1.0.0" + debounce "1.2.1" + globby "11.0.4" + typescript "~4.3.2" + +"@custom-elements-manifest/find-dependencies@^0.0.5": + version "0.0.5" + resolved "https://registry.yarnpkg.com/@custom-elements-manifest/find-dependencies/-/find-dependencies-0.0.5.tgz#ebc11672019de3d52bb8f29f76efe510b8401fbd" + integrity sha512-fKIMMZCDFSoL2ySUoz8knWgpV4jpb0lUXgLOvdZQMQFHxgxz1PqOJpUIypwvEVyKk3nEHRY4f10gNol02HjeCg== + dependencies: + es-module-lexer "^0.9.3" + "@discoveryjs/json-ext@0.5.7", "@discoveryjs/json-ext@^0.5.0", "@discoveryjs/json-ext@^0.5.3": version "0.5.7" resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70" @@ -2423,6 +2446,11 @@ resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6" integrity sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw== +"@github/catalyst@^1.6.0": + version "1.6.0" + resolved "https://registry.yarnpkg.com/@github/catalyst/-/catalyst-1.6.0.tgz#378734d1d2b6a85af169d7e66c1a2a604bf1e82c" + integrity sha512-u8A+DameixqpeyHzvnJWTGj+wfiskQOYHzSiJscCWVfMkIT3rxnbHMtGh3lMthaRY21nbUOK71WcsCnCrXhBJQ== + "@hapi/address@2.x.x": version "2.1.4" resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5" @@ -7919,7 +7947,7 @@ resolved "https://registry.yarnpkg.com/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz#b6b40a7625429d2bd7c2281ddba601ed05dc7f1a" integrity sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA== -"@web/config-loader@^0.1.3": +"@web/config-loader@0.1.3", "@web/config-loader@^0.1.3": version "0.1.3" resolved "https://registry.yarnpkg.com/@web/config-loader/-/config-loader-0.1.3.tgz#8325ea54f75ef2ee7166783e64e66936db25bff7" integrity sha512-XVKH79pk4d3EHRhofete8eAnqto1e8mCRAqPV00KLNFzCWSe8sWmLnqKCqkPNARC6nksMaGrATnA5sPDRllMpQ== @@ -9134,6 +9162,11 @@ array-back@^4.0.1, array-back@^4.0.2: resolved "https://registry.yarnpkg.com/array-back/-/array-back-4.0.2.tgz#8004e999a6274586beeb27342168652fdb89fa1e" integrity sha512-NbdMezxqf94cnNfWLL7V/im0Ub+Anbb0IoZhvzie8+4HJ4nMQuzHuy49FkGYCJK2yAloZ3meiB6AVMClbrI1vg== +array-back@^6.1.2: + version "6.2.2" + resolved "https://registry.yarnpkg.com/array-back/-/array-back-6.2.2.tgz#f567d99e9af88a6d3d2f9dfcc21db6f9ba9fd157" + integrity sha512-gUAZ7HPyb4SJczXAMUXMGAvI976JoK3qEx9v1FTmeYuJj0IBiaKttG1ydtGKdkfqWkIkouke7nG8ufGy77+Cvw== + array-differ@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/array-differ/-/array-differ-1.0.0.tgz#eff52e3758249d33be402b8bb8e564bb2b5d4031" @@ -11205,6 +11238,21 @@ check-types@^8.0.3: resolved "https://registry.yarnpkg.com/check-types/-/check-types-8.0.3.tgz#3356cca19c889544f2d7a95ed49ce508a0ecf552" integrity sha512-YpeKZngUmG65rLudJ4taU7VLkOCTMhNl/u4ctNC56LQS/zJTyNH0Lrtwm1tfTsbLlwvlfsA2d1c8vCf/Kh2KwQ== +chokidar@3.5.2: + version "3.5.2" + resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75" + integrity sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ== + dependencies: + anymatch "~3.1.2" + braces "~3.0.2" + glob-parent "~5.1.2" + is-binary-path "~2.1.0" + is-glob "~4.0.1" + normalize-path "~3.0.0" + readdirp "~3.6.0" + optionalDependencies: + fsevents "~2.3.2" + "chokidar@>=3.0.0 <4.0.0", chokidar@^3.0.0, chokidar@^3.3.0, chokidar@^3.4.1, chokidar@^3.4.2, chokidar@^3.4.3, chokidar@^3.5.1, chokidar@^3.5.3: version "3.5.3" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd" @@ -11704,6 +11752,16 @@ comma-separated-tokens@^1.0.0: resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz#632b80b6117867a158f1080ad498b2fbe7e3f5ea" integrity sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw== +command-line-args@5.1.2: + version "5.1.2" + resolved "https://registry.yarnpkg.com/command-line-args/-/command-line-args-5.1.2.tgz#25908e573d2214bc23a8437e3df853b02dffa425" + integrity sha512-fytTsbndLbl+pPWtS0CxLV3BEWw9wJayB8NnU2cbQqVPsNdYezQeT+uIQv009m+GShnMNyuoBrRo8DTmuTfSCA== + dependencies: + array-back "^6.1.2" + find-replace "^3.0.0" + lodash.camelcase "^4.3.0" + typical "^4.0.0" + command-line-args@^5.0.2, command-line-args@^5.1.1: version "5.2.1" resolved "https://registry.yarnpkg.com/command-line-args/-/command-line-args-5.2.1.tgz#c44c32e437a57d7c51157696893c5909e9cec42e" @@ -11759,6 +11817,11 @@ commander@~2.19.0: resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a" integrity sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg== +comment-parser@1.2.4: + version "1.2.4" + resolved "https://registry.yarnpkg.com/comment-parser/-/comment-parser-1.2.4.tgz#489f3ee55dfd184a6e4bffb31baba284453cb760" + integrity sha512-pm0b+qv+CkWNriSTMsfnjChF9kH0kxz55y44Wo5le9qLxMj5xDQAaEd9ZN1ovSuk9CsrncWaFwgpOMg7ClJwkw== + common-tags@^1.8.0: version "1.8.2" resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.2.tgz#94ebb3c076d26032745fd54face7f688ef5ac9c6" @@ -12795,6 +12858,11 @@ currently-unhandled@^0.4.1: dependencies: array-find-index "^1.0.1" +custom-elements-manifest@1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/custom-elements-manifest/-/custom-elements-manifest-1.0.0.tgz#b35c2129076a1dc9f95d720c6f7b5b71a857274b" + integrity sha512-j59k0ExGCKA8T6Mzaq+7axc+KVHwpEphEERU7VZ99260npu/p/9kd+Db+I3cGKxHkM5y6q5gnlXn00mzRQkX2A== + custom-event@~1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/custom-event/-/custom-event-1.0.1.tgz#5d02a46850adf1b4a317946a3928fccb5bfd0425" @@ -12893,7 +12961,7 @@ de-indent@^1.0.2: resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d" integrity sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg== -debounce@^1.2.0: +debounce@1.2.1, debounce@^1.2.0: version "1.2.1" resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.1.tgz#38881d8f4166a5c5848020c11827b834bcb3e0a5" integrity sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug== @@ -14009,7 +14077,7 @@ es-module-lexer@^0.3.13, es-module-lexer@^0.3.26: resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-0.3.26.tgz#7b507044e97d5b03b01d4392c74ffeb9c177a83b" integrity sha512-Va0Q/xqtrss45hWzP8CZJwzGSZJjDM5/MJRE3IXXnUCcVLElR9BRaE9F62BopysASyc4nM3uwhSW7FFB9nlWAA== -es-module-lexer@^0.9.0: +es-module-lexer@^0.9.0, es-module-lexer@^0.9.3: version "0.9.3" resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-0.9.3.tgz#6f13db00cc38417137daf74366f535c8eb438f19" integrity sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ== @@ -15087,7 +15155,7 @@ fast-glob@^2.0.2, fast-glob@^2.2.6: merge2 "^1.2.3" micromatch "^3.1.10" -fast-glob@^3.2.11, fast-glob@^3.2.12, fast-glob@^3.2.2, fast-glob@^3.2.4, fast-glob@^3.2.9: +fast-glob@^3.1.1, fast-glob@^3.2.11, fast-glob@^3.2.12, fast-glob@^3.2.2, fast-glob@^3.2.4, fast-glob@^3.2.9: version "3.2.12" resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80" integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w== @@ -16325,6 +16393,18 @@ globalthis@^1.0.0, globalthis@^1.0.1, globalthis@^1.0.3: dependencies: define-properties "^1.1.3" +globby@11.0.4: + version "11.0.4" + resolved "https://registry.yarnpkg.com/globby/-/globby-11.0.4.tgz#2cbaff77c2f2a62e71e9b2813a67b97a3a3001a5" + integrity sha512-9O4MVG9ioZJ08ffbcyVYyLOJLk5JQ688pJ4eMGLpdWLHq/Wr1D9BlriLQyL0E+jbkuePVZXYFj47QM/v093wHg== + dependencies: + array-union "^2.1.0" + dir-glob "^3.0.1" + fast-glob "^3.1.1" + ignore "^5.1.4" + merge2 "^1.3.0" + slash "^3.0.0" + globby@8.0.2: version "8.0.2" resolved "https://registry.yarnpkg.com/globby/-/globby-8.0.2.tgz#5697619ccd95c5275dbb2d6faa42087c1a941d8d" @@ -17414,6 +17494,11 @@ ignore@^4.0.3, ignore@^4.0.6: resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc" integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg== +ignore@^5.1.4: + version "5.2.4" + resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324" + integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ== + ignore@^5.1.8, ignore@^5.2.0: version "5.2.1" resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.1.tgz#c2b1f76cb999ede1502f3a226a9310fdfe88d46c" @@ -29833,6 +29918,11 @@ typescript@~4.2.4: resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.2.4.tgz#8610b59747de028fda898a8aef0e103f156d0961" integrity sha512-V+evlYHZnQkaz8TRBuxTA92yZBPotr5H+WhQ7bD3hZUndx5tGOa1fuCgeSjxAzM1RiN5IzvadIXTVefuuwZCRg== +typescript@~4.3.2: + version "4.3.5" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.5.tgz#4d1c37cc16e893973c45a06886b7113234f119f4" + integrity sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA== + typescript@~4.5.5: version "4.5.5" resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.5.tgz#d8c953832d28924a9e3d37c73d729c846c5896f3"