diff --git a/.storybook/addons/codeEditorAddon/codeAddon.js b/.storybook/addons/codeEditorAddon/codeAddon.js index f8ced0a76e..c54ef05a28 100644 --- a/.storybook/addons/codeEditorAddon/codeAddon.js +++ b/.storybook/addons/codeEditorAddon/codeAddon.js @@ -3,6 +3,7 @@ import { addons, makeDecorator } from '@storybook/preview-api'; import { ProviderState } from '../../../packages/mgt-element/dist/es6/providers/IProvider'; import { EditorElement } from './editor'; import { CLIENTID, SETPROVIDER_EVENT, AUTH_PAGE } from '../../env'; +import { beautifyContent } from '../../utils/beautifyContent'; const mgtScriptName = './mgt.storybook.js'; @@ -61,6 +62,7 @@ const setupEditorResize = (first, separator, last, dragComplete) => { }; }; +let reactRegex = /]*>([\s\S]*?)<\/react>/gm; let scriptRegex = /]*>([\s\S]*?)<\/script>/gm; let styleRegex = /]*>([\s\S]*?)<\/style>/gm; @@ -89,20 +91,25 @@ export const withCodeEditor = makeDecorator({ let scriptMatches = scriptRegex.exec(storyHtml); let scriptCode = scriptMatches && scriptMatches.length > 1 ? scriptMatches[1].trim() : ''; + let reactMatches = reactRegex.exec(storyHtml); + let reactCode = reactMatches && reactMatches.length > 1 ? reactMatches[1].trim() : ''; + let styleMatches = styleRegex.exec(storyHtml); let styleCode = styleMatches && styleMatches.length > 1 ? styleMatches[1].trim() : ''; storyHtml = storyHtml - .replace(styleRegex, '') - .replace(scriptRegex, '') - .replace(/\n?\n?/g, '') - .trim(); - - let editor = new EditorElement(); - editor.files = { - html: storyHtml, - js: scriptCode, - css: styleCode + ?.replace(styleRegex, '') + ?.replace(reactRegex, '') + ?.replace(scriptRegex, '') + ?.replace(/\n?\n?/g, '') + ?.trim(); + + const fileTypes = reactCode ? ['react', 'css'] : ['html', 'js', 'css']; + + let editor = new EditorElement(fileTypes); + + const isEditorEnabled = () => { + return !context.parameters.docs?.editor?.hidden; }; const getContent = async (url, json) => { @@ -152,9 +159,9 @@ export const withCodeEditor = makeDecorator({ ]).then(values => { //editor.autoFormat = false; editor.files = { - html: values[0], - js: values[1], - css: values[2] + html: beautifyContent('html', values[0]), + js: beautifyContent('js', values[1]), + css: beautifyContent('css', values[2]) }; }); }); @@ -207,12 +214,12 @@ export const withCodeEditor = makeDecorator({ redirectUri: "${window.location.origin}/${AUTH_PAGE}" });`; } - - loadEditorContent(); }); - const componentRegistration = ` - `; + const getStoryTitle = context => { + const storyTitle = `${context?.title} - ${context?.story}`; + return storyTitle; + }; const loadEditorContent = () => { const storyElement = document.createElement('iframe'); @@ -224,35 +231,35 @@ export const withCodeEditor = makeDecorator({ let { html, css, js } = editor.files; js = js.replace( - /import \{([^\}]+)\}\s+from\s+['"]@microsoft\/mgt\x2d([^\}]+)['"];/gm, + /import \{([^\}]+)\}\s+from\s+['"]@microsoft\/mgt\x2d.*['"];/gm, `import {$1} from '${mgtScriptName}';` ); const docContent = ` - - - - - - - - - ${themeToggle} - ${html} - - - - `; + + + + + + + + + ${themeToggle} + ${html} + + + + `; doc.open(); doc.write(docContent); @@ -274,13 +281,17 @@ export const withCodeEditor = makeDecorator({ setupEditorResize(storyElementWrapper, separator, editor, () => editor.layout()); root.className = 'story-mgt-root'; - storyElementWrapper.className = 'story-mgt-preview-wrapper'; + + storyElementWrapper.className = isEditorEnabled() ? 'story-mgt-preview-wrapper' : 'story-mgt-preview-wrapper-full'; separator.className = 'story-mgt-separator'; editor.className = 'story-mgt-editor'; root.appendChild(storyElementWrapper); root.appendChild(separator); - root.appendChild(editor); + + if (isEditorEnabled()) { + root.appendChild(editor); + } window.addEventListener('resize', () => { storyElementWrapper.style.height = null; @@ -289,6 +300,17 @@ export const withCodeEditor = makeDecorator({ editor.style.width = null; }); + if (isEditorEnabled()) { + editor.files = { + html: beautifyContent('html', storyHtml), + react: beautifyContent('js', reactCode), + js: beautifyContent('js', scriptCode), + css: beautifyContent('css', styleCode) + }; + + editor.title = getStoryTitle(context); + } + return root; } }); diff --git a/.storybook/addons/codeEditorAddon/editor.js b/.storybook/addons/codeEditorAddon/editor.js index 77c6d2c3e6..1b0ca2ec91 100644 --- a/.storybook/addons/codeEditorAddon/editor.js +++ b/.storybook/addons/codeEditorAddon/editor.js @@ -1,5 +1,6 @@ import { LitElement, css, html } from 'lit'; import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'; +import { generateProject } from './projectBuilder'; let debounce = (func, wait, immediate) => { var timeout; @@ -50,6 +51,10 @@ export class EditorElement extends LitElement { border: 1px solid transparent; } + .tab-right { + float: right; + } + .tab[aria-selected='true'] { background-color: white; color: rgb(51, 51, 51); @@ -83,11 +88,10 @@ export class EditorElement extends LitElement { return this.internalFiles; } - constructor() { + constructor(fileTypes) { super(); this.internalFiles = []; - this.fileTypes = ['html', 'js', 'css']; - this.autoFormat = true; + this.fileTypes = fileTypes ?? ['html', 'js', 'css']; this.editorRoot = document.createElement('div'); this.editorRoot.setAttribute('slot', 'editor'); @@ -120,10 +124,14 @@ export class EditorElement extends LitElement { html: { model: monaco.editor.createModel('', 'html'), state: null + }, + react: { + model: monaco.editor.createModel('', 'typescript'), + state: null } }; - this.currentEditorState = this.editorState.html; + this.currentEditorState = this.editorState[this.fileTypes[0]]; this.editor = monaco.editor.create(htmlElement, { model: this.currentEditorState.model, @@ -185,7 +193,7 @@ export class EditorElement extends LitElement { } showTab(type) { - this.editor.updateOptions({ readOnly: false }); + this.editor.updateOptions({ readOnly: type === 'react' }); this.currentType = type; if (this.files && typeof this.files[type] !== 'undefined') { @@ -195,10 +203,6 @@ export class EditorElement extends LitElement { this.editor.setModel(this.currentEditorState.model); this.editor.restoreViewState(this.currentEditorState.state); } - - if (this.autoFormat) { - this.editor.getAction('editor.action.formatDocument').run(); - } } tabKeyDown = e => { @@ -245,6 +249,17 @@ export class EditorElement extends LitElement { ` )} + + + ` diff --git a/.storybook/addons/codeEditorAddon/projectBuilder.js b/.storybook/addons/codeEditorAddon/projectBuilder.js new file mode 100644 index 0000000000..190ffac162 --- /dev/null +++ b/.storybook/addons/codeEditorAddon/projectBuilder.js @@ -0,0 +1,111 @@ +import sdk from '@stackblitz/sdk'; +import { beautifyContent } from '../../utils/beautifyContent'; +import { getCleanVersionInfo } from '../../versionInfo'; + +const TEMPLATE_PATH = [window.location.protocol, '//', window.location.host, window.location.pathname] + .join('') + .replace('iframe.html', ''); +const REACT_TEMPLATE_PATH = TEMPLATE_PATH + 'stackblitz/react/'; +const REACT_TEMPLATE_FILES = [ + { name: 'package.json', type: 'json' }, + { name: 'index.html', type: 'html' }, + { name: 'tsconfig.json', type: 'json' }, + { name: 'tsconfig.node.json', type: 'json' }, + { name: 'vite.config.ts', type: 'js' }, + { name: 'src/vite-env.d.ts', type: 'js' }, + { name: 'src/main.css', type: 'css' }, + { name: 'src/main.tsx', type: 'js' } +]; +const HTML_TEMPLATE_PATH = TEMPLATE_PATH + 'stackblitz/html/'; +const HTML_TEMPLATE_FILES = [ + { name: 'index.html', type: 'html' }, + { name: 'main.css', type: 'css' }, + { name: 'app.js', type: 'js' }, + { name: 'main.js', type: 'js' }, + { name: 'package.json', type: 'json' }, + { name: 'style.css', type: 'css' } +]; + +export const generateProject = async (title, files) => { + files.react && files.react !== '\n' ? await openReactProject(title, files) : await openHtmlProject(title, files); +}; + +let openReactProject = async (title, files) => { + const snippets = [ + { name: 'src/App.tsx', type: 'js', content: files.react }, + { name: 'src/App.css', type: 'css', content: files.css } + ]; + const stackblitzFiles = await buildFiles(REACT_TEMPLATE_PATH, REACT_TEMPLATE_FILES, snippets); + sdk.openProject( + { + files: stackblitzFiles, + template: 'node', + title: title + }, + { + openFile: 'src/App.tsx', + newWindow: true + } + ); +}; + +let openHtmlProject = async (title, files) => { + const snippets = [ + { name: 'index.html', type: 'html', content: files.html }, + { name: 'style.css', type: 'css', content: files.css }, + { name: 'main.js', type: 'js', content: files.js } + ]; + const stackblitzFiles = await buildFiles(HTML_TEMPLATE_PATH, HTML_TEMPLATE_FILES, snippets); + sdk.openProject( + { + files: stackblitzFiles, + template: 'node', + title: title + }, + { + openFile: 'index.html', + newWindow: true + } + ); +}; + +let buildFiles = async (templatePath, files, snippets) => { + const stackblitzFiles = {}; + await Promise.all( + files.map(async file => { + let fileContent = await loadFile(templatePath + file.name); + fileContent = fileContent.replace(/<\/mgt-version>/g, getCleanVersionInfo()); + stackblitzFiles[file.name] = beautifyContent(file.type, fileContent); + }) + ); + + snippets.map(file => { + let fileContent = ''; + if (file.content) { + if (stackblitzFiles[file.name] && stackblitzFiles[file.name] !== '\n') { + fileContent = stackblitzFiles[file.name].replace(/<\/mgt-component>/g, file.content); + } else { + fileContent = file.content; + } + } + + fileContent = beautifyContent(file.type, fileContent); + stackblitzFiles[file.name] = fileContent; + }); + + return stackblitzFiles; +}; + +let loadFile = async fileUrl => { + let content = ''; + if (fileUrl) { + let response = await fetch(fileUrl); + + if (response.ok) { + content = await response.text(); + } else { + console.warn(`🦒: Can't get snippet from '${fileUrl}'`); + } + } + return content; +}; diff --git a/.storybook/manager.js b/.storybook/manager.js index e5fd862356..f83f9db6ad 100644 --- a/.storybook/manager.js +++ b/.storybook/manager.js @@ -5,7 +5,7 @@ * ------------------------------------------------------------------------------------------- */ -import { addons, types } from '@storybook/addons'; +import { addons, types } from '@storybook/manager-api'; import theme from './theme'; import React, { useState } from 'react'; @@ -14,16 +14,10 @@ import { Providers } from '../packages/mgt-element/dist/es6/providers/Providers' import { ProviderState, LoginType } from '../packages/mgt-element/dist/es6/providers/IProvider'; import { Msal2Provider } from '../packages/providers/mgt-msal2-provider/dist/es6/Msal2Provider'; import { CLIENTID, SETPROVIDER_EVENT, AUTH_PAGE } from './env'; -import { MockProvider } from '@microsoft/mgt-element'; -import { PACKAGE_VERSION } from '../packages/mgt-element/dist/es6/utils/version'; -import { registerMgtPersonComponent } from '../packages/mgt-components/dist/es6/components/mgt-person/mgt-person'; -import { registerMgtLoginComponent } from '../packages/mgt-components/dist/es6/components/mgt-login/mgt-login'; - +import { MockProvider, PACKAGE_VERSION } from '@microsoft/mgt-element'; +import { Login, Person } from '../packages/mgt-react/src/generated/react'; import './manager.css'; -registerMgtPersonComponent(); -registerMgtLoginComponent(); - const getClientId = () => { const urlParams = new window.URL(window.location.href).searchParams; const customClientId = urlParams.get('clientId'); @@ -60,6 +54,7 @@ const msal2Provider = new Msal2Provider({ ], loginType: LoginType.Popup }); +let loginInitiated = false; Providers.globalProvider = msal2Provider; @@ -81,48 +76,79 @@ const SignInPanel = () => { }; Providers.onProviderUpdated(() => { + if (state === Providers.globalProvider.state) return; setState(Providers.globalProvider.state); emitProvider(Providers.globalProvider.state); }); - const onSignOut = () => { - Providers.globalProvider.logout(); + const onSignOut = async () => { + await Providers.globalProvider.logout(); + reload(); + }; + + const reload = () => { + console.log('reload'); + window.location.reload(); + }; + + const onLoginCompleted = e => { + if (loginInitiated) { + reload(); + } + console.log('loginCompleted'); + }; + + const onLoginInitiated = e => { + loginInitiated = true; + console.log('loginInitiated'); }; emitProvider(state); return ( <> - {Providers.globalProvider.state !== ProviderState.SignedIn ? ( - - ) : ( - <> - - - Sign Out - - - )} +
+ {/* We need to keep the login component available (but hidden) to handle mock to logged in states */} + +
+ +
+
+ +
+ + Sign Out + +
); }; -addons.setConfig({ - enableShortcuts: false, - theme -}); - -addons.register('microsoft/graph-toolkit', storybookAPI => { - const render = ({ active }) => ; - - addons.add('mgt/sign-in', { +addons.register('mgt', api => { + addons.add('mgt/login', { type: types.TOOLEXTRA, title: 'Sign In', - match: ({ viewMode }) => true, - render + render: ({ active }) => }); }); +addons.setConfig({ + enableShortcuts: false, + theme, + sidebar: { + filters: { + patterns: item => { + return !(item.tags.includes('hidden') && item.type === 'story'); + } + } + } +}); + // inject page setup for manager frame. const xmlns = 'http://www.w3.org/2000/svg'; diff --git a/.storybook/preview.css b/.storybook/preview.css index e325c7a01a..abd7e4d770 100644 --- a/.storybook/preview.css +++ b/.storybook/preview.css @@ -1,87 +1,95 @@ a { - text-decoration: underline !important; + text-decoration: underline !important; } html, body, #root, #storybook-root { - height: 100%; - width: 100%; - font-family: var(--default-font-family, 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, - 'Helvetica Neue', sans-serif); - padding: 0!important; + height: 100%; + width: 100%; + font-family: var(--default-font-family, 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, + 'Helvetica Neue', sans-serif); + padding: 0!important; } .docs-img-centered { - display: block; - float: none; - margin-left: auto; - margin-right: auto; + display: block; + float: none; + margin-left: auto; + margin-right: auto; } body { - margin: 0; + margin: 0; } /* code editor add-on styling */ .story-mgt-root { - height: 100%; - width: 100%; - position: relative; - display: flex; - overflow: hidden; + height: 100%; + width: 100%; + position: relative; + display: flex; + overflow: hidden; } .story-mgt-preview { - height: 100%; - width: 100%; - margin: 0; - border: none; - background: none; - padding: 0; + height: 100%; + width: 100%; + margin: 0; + border: none; + background: none; + padding: 0; } .story-mgt-preview-wrapper { - position: relative; - height: 100%; - width: 50%; - float: left; - background-color: #fff; + position: relative; + height: 100%; + width: 50%; + float: left; + background-color: #fff; +} + +.story-mgt-preview-wrapper-full { + position: relative; + height: 100%; + width: 100%; + float: left; + background-color: #fff; } .story-mgt-editor { - width: calc(50% - 1px); - height: 100%; - position: relative; - float: left; - overflow: hidden; - border-left: 1px solid #e7e7e7; + width: calc(50% - 1px); + height: 100%; + position: relative; + float: left; + overflow: hidden; + border-left: 1px solid #e7e7e7; } .story-mgt-separator { - cursor: ew-resize; - background-color: rgb(37 37 38); - position: relative; - height: 100%; - float: left; + cursor: ew-resize; + background-color: rgb(37 37 38); + position: relative; + height: 100%; + float: left; - /* prevent browser's built-in drag from interfering */ - /* stylelint-disable-next-line property-no-vendor-prefix */ - -moz-user-select: none; - /* stylelint-disable-next-line property-no-vendor-prefix */ - -ms-user-select: none; - user-select: none; + /* prevent browser's built-in drag from interfering */ + /* stylelint-disable-next-line property-no-vendor-prefix */ + -moz-user-select: none; + /* stylelint-disable-next-line property-no-vendor-prefix */ + -ms-user-select: none; + user-select: none; } .story-mgt-separator::after { - content: ''; - display: block; - height: 100%; - width: 8px; - position: absolute; - left: -3px; - z-index: 10; + content: ''; + display: block; + height: 100%; + width: 8px; + position: absolute; + left: -3px; + z-index: 10; } /* End code editor add-on styling */ @@ -89,64 +97,69 @@ body { /* fixes link color and attribute value colors in storybook inline code blocks */ .sbdocs-a, .css-zj0253 * .token.attr-value { - color: #0360B9 !important; + color: #0360B9 !important; } /* fix attribute names in html rendering */ .mtk4, .css-zj0253 * .token.attr-name { - color: #e50000 !important; + color: #e50000 !important; } /* fix number colors in monaco editor */ .mtk7 { - color: #088155 !important; + color: #088155 !important; } .css-3ltsna:focus-visible { - outline: auto; + outline: auto; } /* changes to eliminate padding/margins inside embedded stories in docs page */ .docs-story > div { - padding: 0; - margin: 0; + padding: 0; + margin: 0; } /* stylelint-disable-next-line selector-class-pattern */ .css-1wjen9k .innerZoomElementWrapper > div { - border: 0!important; + border: 0!important; } /* responsive fixes for small screens */ @media (width <= 768px) { - .story-mgt-root { - flex-direction: column; - overflow-y: auto; - } - - .story-mgt-preview-wrapper { - height: 50%; - width: 100%; - } - - .story-mgt-editor { - height: calc(50% - 1px); - width: 100%; - border-left: none; - border-top: 1px solid #e7e7e7; - } - - .story-mgt-separator { - cursor: ns-resize; - width: 100%; - height: 0; - } - - .story-mgt-separator::after { - content: ''; - display: block; - height: 8px; - width: 100%; - top: -3px; - } -} \ No newline at end of file + .story-mgt-root { + flex-direction: column; + overflow-y: hidden; + } + + .story-mgt-preview-wrapper { + height: 50%; + width: 100%; + } + + .story-mgt-preview-wrapper-full { + height: 100%; + width: 100%; + } + + .story-mgt-editor { + height: calc(50% - 1px); + width: 100%; + border-left: none; + border-top: 1px solid #e7e7e7; + } + + .story-mgt-separator { + cursor: ns-resize; + width: 100%; + height: 0; + } + + .story-mgt-separator::after { + content: ''; + display: block; + height: 8px; + width: 100%; + top: -3px; + } +} diff --git a/.storybook/utils/beautifyContent.js b/.storybook/utils/beautifyContent.js new file mode 100644 index 0000000000..c45a2080fc --- /dev/null +++ b/.storybook/utils/beautifyContent.js @@ -0,0 +1,40 @@ +import * as beautify from 'js-beautify'; + +export const beautifyContent = (type, content) => { + const options = { + indent_size: '2', + indent_char: ' ', + max_preserve_newlines: '0', + preserve_newlines: true, + keep_array_indentation: true, + break_chained_methods: false, + indent_scripts: 'separate', + brace_style: 'collapse,preserve-inline', + space_before_conditional: false, + unescape_strings: false, + jslint_happy: false, + end_with_newline: true, + wrap_line_length: '120', + indent_inner_html: true, + comma_first: false, + e4x: true, + indent_empty_lines: false + }; + + let beautifiedContent = content; + switch (type) { + case 'html': + beautifiedContent = beautify.default.html(content, options); + break; + case 'js': + case 'json': + beautifiedContent = beautify.default.js(content, options); + break; + case 'css': + beautifiedContent = beautify.default.css(content, options); + break; + default: + break; + } + return beautifiedContent; +}; diff --git a/.storybook/versionInfo.js b/.storybook/versionInfo.js index bde631878c..ca1eed1a08 100644 --- a/.storybook/versionInfo.js +++ b/.storybook/versionInfo.js @@ -20,3 +20,15 @@ export const versionInfo = { patch, postfix }; + +export const getCleanVersionInfo = (majorOnly = false) => { + if (versionInfo.postfix || window.location.href.indexOf('localhost') > -1) { + return `next`; + } else { + if (majorOnly) { + return `${versionInfo.major}`; + } else { + return `${versionInfo.major}.${versionInfo.minor}.${versionInfo.patch}`; + } + } +}; diff --git a/.yarn/cache/@fluentui-fluent2-theme-npm-8.107.59-0db2580052-897710264d.zip b/.yarn/cache/@fluentui-fluent2-theme-npm-8.107.60-ffc38dd54a-a18022f6f6.zip similarity index 88% rename from .yarn/cache/@fluentui-fluent2-theme-npm-8.107.59-0db2580052-897710264d.zip rename to .yarn/cache/@fluentui-fluent2-theme-npm-8.107.60-ffc38dd54a-a18022f6f6.zip index 857ecb4737..6b7d51effb 100644 Binary files a/.yarn/cache/@fluentui-fluent2-theme-npm-8.107.59-0db2580052-897710264d.zip and b/.yarn/cache/@fluentui-fluent2-theme-npm-8.107.60-ffc38dd54a-a18022f6f6.zip differ diff --git a/.yarn/cache/@fluentui-react-focus-npm-8.8.38-e4e74552b2-e945290f50.zip b/.yarn/cache/@fluentui-react-focus-npm-8.8.38-e4e74552b2-e945290f50.zip deleted file mode 100644 index 764c0d2d4c..0000000000 Binary files a/.yarn/cache/@fluentui-react-focus-npm-8.8.38-e4e74552b2-e945290f50.zip and /dev/null differ diff --git a/.yarn/cache/@fluentui-react-focus-npm-8.8.39-b1c70ae024-9a4e22a29c.zip b/.yarn/cache/@fluentui-react-focus-npm-8.8.39-b1c70ae024-9a4e22a29c.zip new file mode 100644 index 0000000000..1fea1000fd Binary files /dev/null and b/.yarn/cache/@fluentui-react-focus-npm-8.8.39-b1c70ae024-9a4e22a29c.zip differ diff --git a/.yarn/cache/@fluentui-react-npm-8.115.0-fb3e2f3d97-f28d7c23e6.zip b/.yarn/cache/@fluentui-react-npm-8.115.1-5ba11d306b-86e89313a0.zip similarity index 87% rename from .yarn/cache/@fluentui-react-npm-8.115.0-fb3e2f3d97-f28d7c23e6.zip rename to .yarn/cache/@fluentui-react-npm-8.115.1-5ba11d306b-86e89313a0.zip index 86d0c8c5c6..0ed969b94e 100644 Binary files a/.yarn/cache/@fluentui-react-npm-8.115.0-fb3e2f3d97-f28d7c23e6.zip and b/.yarn/cache/@fluentui-react-npm-8.115.1-5ba11d306b-86e89313a0.zip differ diff --git a/.yarn/cache/@one-ini-wasm-npm-0.1.1-cee8120e33-11de17108e.zip b/.yarn/cache/@one-ini-wasm-npm-0.1.1-cee8120e33-11de17108e.zip new file mode 100644 index 0000000000..636d88198b Binary files /dev/null and b/.yarn/cache/@one-ini-wasm-npm-0.1.1-cee8120e33-11de17108e.zip differ diff --git a/.yarn/cache/@rushstack-eslint-patch-npm-1.7.0-51fe37dfef-1eb2bef0ee.zip b/.yarn/cache/@rushstack-eslint-patch-npm-1.7.1-2de6fb4b8a-b5db62384c.zip similarity index 90% rename from .yarn/cache/@rushstack-eslint-patch-npm-1.7.0-51fe37dfef-1eb2bef0ee.zip rename to .yarn/cache/@rushstack-eslint-patch-npm-1.7.1-2de6fb4b8a-b5db62384c.zip index 90a51c2237..ea72f0df22 100644 Binary files a/.yarn/cache/@rushstack-eslint-patch-npm-1.7.0-51fe37dfef-1eb2bef0ee.zip and b/.yarn/cache/@rushstack-eslint-patch-npm-1.7.1-2de6fb4b8a-b5db62384c.zip differ diff --git a/.yarn/cache/@stackblitz-sdk-npm-1.9.0-8dff395930-9003383143.zip b/.yarn/cache/@stackblitz-sdk-npm-1.9.0-8dff395930-9003383143.zip new file mode 100644 index 0000000000..70878c95ff Binary files /dev/null and b/.yarn/cache/@stackblitz-sdk-npm-1.9.0-8dff395930-9003383143.zip differ diff --git a/.yarn/cache/@types-node-npm-16.18.74-c91c0e66be-33d8f157b5.zip b/.yarn/cache/@types-node-npm-16.18.75-19df230a71-c118a26ee2.zip similarity index 91% rename from .yarn/cache/@types-node-npm-16.18.74-c91c0e66be-33d8f157b5.zip rename to .yarn/cache/@types-node-npm-16.18.75-19df230a71-c118a26ee2.zip index 071d60f37e..81c769eca3 100644 Binary files a/.yarn/cache/@types-node-npm-16.18.74-c91c0e66be-33d8f157b5.zip and b/.yarn/cache/@types-node-npm-16.18.75-19df230a71-c118a26ee2.zip differ diff --git a/.yarn/cache/@types-node-npm-18.19.8-c797f1f1ad-fa291495d6.zip b/.yarn/cache/@types-node-npm-18.19.9-0cb538efbf-8ffd4043ad.zip similarity index 92% rename from .yarn/cache/@types-node-npm-18.19.8-c797f1f1ad-fa291495d6.zip rename to .yarn/cache/@types-node-npm-18.19.9-0cb538efbf-8ffd4043ad.zip index 10b44c7d4c..ff19ecf846 100644 Binary files a/.yarn/cache/@types-node-npm-18.19.8-c797f1f1ad-fa291495d6.zip and b/.yarn/cache/@types-node-npm-18.19.9-0cb538efbf-8ffd4043ad.zip differ diff --git a/.yarn/cache/@types-node-npm-20.11.5-b807d46a1a-a542727de1.zip b/.yarn/cache/@types-node-npm-20.11.6-e5e1974d32-54b3739f42.zip similarity index 91% rename from .yarn/cache/@types-node-npm-20.11.5-b807d46a1a-a542727de1.zip rename to .yarn/cache/@types-node-npm-20.11.6-e5e1974d32-54b3739f42.zip index 9eddfe1fb9..52a0fb088f 100644 Binary files a/.yarn/cache/@types-node-npm-20.11.5-b807d46a1a-a542727de1.zip and b/.yarn/cache/@types-node-npm-20.11.6-e5e1974d32-54b3739f42.zip differ diff --git a/.yarn/cache/commander-npm-10.0.1-f17613b72b-436901d64a.zip b/.yarn/cache/commander-npm-10.0.1-f17613b72b-436901d64a.zip new file mode 100644 index 0000000000..6e5dd2648d Binary files /dev/null and b/.yarn/cache/commander-npm-10.0.1-f17613b72b-436901d64a.zip differ diff --git a/.yarn/cache/dotenv-npm-16.4.0-1d798baca6-f39dccc0eb.zip b/.yarn/cache/dotenv-npm-16.4.0-1d798baca6-f39dccc0eb.zip deleted file mode 100644 index a9c8931dea..0000000000 Binary files a/.yarn/cache/dotenv-npm-16.4.0-1d798baca6-f39dccc0eb.zip and /dev/null differ diff --git a/.yarn/cache/dotenv-npm-16.4.1-07f53222f2-a343f0a1d1.zip b/.yarn/cache/dotenv-npm-16.4.1-07f53222f2-a343f0a1d1.zip new file mode 100644 index 0000000000..c178daf1ab Binary files /dev/null and b/.yarn/cache/dotenv-npm-16.4.1-07f53222f2-a343f0a1d1.zip differ diff --git a/.yarn/cache/editorconfig-npm-1.0.4-95c5a5b144-09904f1938.zip b/.yarn/cache/editorconfig-npm-1.0.4-95c5a5b144-09904f1938.zip new file mode 100644 index 0000000000..29db2cb776 Binary files /dev/null and b/.yarn/cache/editorconfig-npm-1.0.4-95c5a5b144-09904f1938.zip differ diff --git a/.yarn/cache/electron-to-chromium-npm-1.4.643-1aea43a5d2-e97f15a3cb.zip b/.yarn/cache/electron-to-chromium-npm-1.4.644-6c4b670092-10b33ce2f5.zip similarity index 91% rename from .yarn/cache/electron-to-chromium-npm-1.4.643-1aea43a5d2-e97f15a3cb.zip rename to .yarn/cache/electron-to-chromium-npm-1.4.644-6c4b670092-10b33ce2f5.zip index 0339535086..604ab44bb9 100644 Binary files a/.yarn/cache/electron-to-chromium-npm-1.4.643-1aea43a5d2-e97f15a3cb.zip and b/.yarn/cache/electron-to-chromium-npm-1.4.644-6c4b670092-10b33ce2f5.zip differ diff --git a/.yarn/cache/js-beautify-npm-1.14.11-6578c9c9d5-92512b8dcc.zip b/.yarn/cache/js-beautify-npm-1.14.11-6578c9c9d5-92512b8dcc.zip new file mode 100644 index 0000000000..cd7afa839c Binary files /dev/null and b/.yarn/cache/js-beautify-npm-1.14.11-6578c9c9d5-92512b8dcc.zip differ diff --git a/.yarn/cache/minimatch-npm-9.0.1-277fdc6fbd-97f5f5284b.zip b/.yarn/cache/minimatch-npm-9.0.1-277fdc6fbd-97f5f5284b.zip new file mode 100644 index 0000000000..66cac932f1 Binary files /dev/null and b/.yarn/cache/minimatch-npm-9.0.1-277fdc6fbd-97f5f5284b.zip differ diff --git a/.yarn/cache/spdx-exceptions-npm-2.3.0-2b68dad75a-cb69a26fa3.zip b/.yarn/cache/spdx-exceptions-npm-2.3.0-2b68dad75a-cb69a26fa3.zip deleted file mode 100644 index faebf4211d..0000000000 Binary files a/.yarn/cache/spdx-exceptions-npm-2.3.0-2b68dad75a-cb69a26fa3.zip and /dev/null differ diff --git a/.yarn/cache/spdx-exceptions-npm-2.4.0-fa64f5993f-b1b650a8d9.zip b/.yarn/cache/spdx-exceptions-npm-2.4.0-fa64f5993f-b1b650a8d9.zip new file mode 100644 index 0000000000..b3ed9a55e5 Binary files /dev/null and b/.yarn/cache/spdx-exceptions-npm-2.4.0-fa64f5993f-b1b650a8d9.zip differ diff --git a/.yarn/cache/webpack-npm-5.89.0-3800e9efd0-43fe0dbc30.zip b/.yarn/cache/webpack-npm-5.90.0-eac7686483-178a0e7e9e.zip similarity index 54% rename from .yarn/cache/webpack-npm-5.89.0-3800e9efd0-43fe0dbc30.zip rename to .yarn/cache/webpack-npm-5.90.0-eac7686483-178a0e7e9e.zip index 95d9ac96e2..ae4d0a3177 100644 Binary files a/.yarn/cache/webpack-npm-5.89.0-3800e9efd0-43fe0dbc30.zip and b/.yarn/cache/webpack-npm-5.90.0-eac7686483-178a0e7e9e.zip differ diff --git a/assets/auth.js b/assets/auth.js new file mode 100644 index 0000000000..26d85eb667 --- /dev/null +++ b/assets/auth.js @@ -0,0 +1,7 @@ +import { Providers } from '../packages/mgt-element/dist/es6/providers/Providers'; +import { Msal2Provider } from '../packages/providers/mgt-msal2-provider/dist/es6/Msal2Provider'; +import { CLIENTID } from './env'; + +Providers.globalProvider = new Msal2Provider({ + clientId: CLIENTID +}); diff --git a/assets/blank.html b/assets/blank.html index 9907887a10..d991a68d9b 100644 --- a/assets/blank.html +++ b/assets/blank.html @@ -1,7 +1,6 @@ - - + diff --git a/assets/stackblitz/html/app.js b/assets/stackblitz/html/app.js new file mode 100644 index 0000000000..7d617cb333 --- /dev/null +++ b/assets/stackblitz/html/app.js @@ -0,0 +1,4 @@ +import { registerMgtComponents, Providers, MockProvider } from './node_modules/@microsoft/mgt/dist/es6/index.js'; + +Providers.globalProvider = new MockProvider(true); +registerMgtComponents(); diff --git a/assets/stackblitz/html/index.html b/assets/stackblitz/html/index.html new file mode 100644 index 0000000000..f7a7015de0 --- /dev/null +++ b/assets/stackblitz/html/index.html @@ -0,0 +1,20 @@ + + + + + + Vite App + + + + + + +
+ +
+
+ +
+ + diff --git a/assets/stackblitz/html/main.css b/assets/stackblitz/html/main.css new file mode 100644 index 0000000000..fdd4e6b48c --- /dev/null +++ b/assets/stackblitz/html/main.css @@ -0,0 +1,13 @@ +body { + background-color: var(--fill-color); + color: var(--neutral-foreground-rest); + font-family: var(--body-font); + padding: 0 12px; +} + +header { + display: flex; + flex-direction: row; + justify-content: flex-end; + padding: 0 0 12px 0; +} diff --git a/assets/stackblitz/html/main.js b/assets/stackblitz/html/main.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/assets/stackblitz/html/package.json b/assets/stackblitz/html/package.json new file mode 100644 index 0000000000..7cd1a87fbf --- /dev/null +++ b/assets/stackblitz/html/package.json @@ -0,0 +1,17 @@ +{ + "name": "vite-starter", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + }, + "dependencies": { + "@microsoft/mgt": "" + }, + "devDependencies": { + "vite": "^5.0.8" + } +} diff --git a/assets/stackblitz/html/style.css b/assets/stackblitz/html/style.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/assets/stackblitz/react/index.html b/assets/stackblitz/react/index.html new file mode 100644 index 0000000000..e2cbf55fd9 --- /dev/null +++ b/assets/stackblitz/react/index.html @@ -0,0 +1,13 @@ + + + + + + + Microsoft Graph Toolkit React Snippet (Vite + React + TS + MGT) + + +
+ + + diff --git a/assets/stackblitz/react/package.json b/assets/stackblitz/react/package.json new file mode 100644 index 0000000000..bdbaa89d96 --- /dev/null +++ b/assets/stackblitz/react/package.json @@ -0,0 +1,30 @@ +{ + "name": "mgt-react-snippet", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "tsc && vite build", + "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", + "preview": "vite preview" + }, + "dependencies": { + "@microsoft/mgt-element": "", + "@microsoft/mgt-react": "", + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@types/react": "^18.2.43", + "@types/react-dom": "^18.2.17", + "@typescript-eslint/eslint-plugin": "^6.14.0", + "@typescript-eslint/parser": "^6.14.0", + "@vitejs/plugin-react": "^4.2.1", + "eslint": "^8.55.0", + "eslint-plugin-react-hooks": "^4.6.0", + "eslint-plugin-react-refresh": "^0.4.5", + "typescript": "^5.2.2", + "vite": "^5.0.8" + } +} diff --git a/assets/stackblitz/react/src/main.css b/assets/stackblitz/react/src/main.css new file mode 100644 index 0000000000..fdd4e6b48c --- /dev/null +++ b/assets/stackblitz/react/src/main.css @@ -0,0 +1,13 @@ +body { + background-color: var(--fill-color); + color: var(--neutral-foreground-rest); + font-family: var(--body-font); + padding: 0 12px; +} + +header { + display: flex; + flex-direction: row; + justify-content: flex-end; + padding: 0 0 12px 0; +} diff --git a/assets/stackblitz/react/src/main.tsx b/assets/stackblitz/react/src/main.tsx new file mode 100644 index 0000000000..085d437d70 --- /dev/null +++ b/assets/stackblitz/react/src/main.tsx @@ -0,0 +1,17 @@ +import React from 'react' +import ReactDOM from 'react-dom/client' +import App from './App.tsx' +import { Providers, MockProvider } from '@microsoft/mgt-element'; +import { ThemeToggle } from '@microsoft/mgt-react'; +import './main.css'; + +Providers.globalProvider = new MockProvider(true); + +ReactDOM.createRoot(document.getElementById('root')!).render( + +
+ +
+ + , +) diff --git a/assets/stackblitz/react/src/vite-env.d.ts b/assets/stackblitz/react/src/vite-env.d.ts new file mode 100644 index 0000000000..11f02fe2a0 --- /dev/null +++ b/assets/stackblitz/react/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/assets/stackblitz/react/tsconfig.json b/assets/stackblitz/react/tsconfig.json new file mode 100644 index 0000000000..b774c988d2 --- /dev/null +++ b/assets/stackblitz/react/tsconfig.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["react/src"], + "references": [{ "path": "./tsconfig.node.json" }] +} diff --git a/assets/stackblitz/react/tsconfig.node.json b/assets/stackblitz/react/tsconfig.node.json new file mode 100644 index 0000000000..42872c59f5 --- /dev/null +++ b/assets/stackblitz/react/tsconfig.node.json @@ -0,0 +1,10 @@ +{ + "compilerOptions": { + "composite": true, + "skipLibCheck": true, + "module": "ESNext", + "moduleResolution": "bundler", + "allowSyntheticDefaultImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/assets/stackblitz/react/vite.config.ts b/assets/stackblitz/react/vite.config.ts new file mode 100644 index 0000000000..654918240e --- /dev/null +++ b/assets/stackblitz/react/vite.config.ts @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [react()] +}); diff --git a/package.json b/package.json index cbfab70869..831e18839c 100644 --- a/package.json +++ b/package.json @@ -73,16 +73,17 @@ "@octokit/rest": "^18.5.3", "@open-wc/testing": "^3.2.0", "@open-wc/testing-helpers": "^2.3.0", - "@storybook/addon-a11y": "^7.4.5", - "@storybook/addon-actions": "^7.4.5", - "@storybook/addon-docs": "^7.4.5", + "@stackblitz/sdk": "^1.9.0", + "@storybook/addon-a11y": "^7.6.7", + "@storybook/addon-actions": "^7.6.7", + "@storybook/addon-docs": "^7.6.7", "@storybook/addon-knobs": "^7.0.2", - "@storybook/addon-links": "^7.4.5", - "@storybook/addon-mdx-gfm": "^7.4.5", - "@storybook/addon-storysource": "^7.4.5", - "@storybook/cli": "^7.4.5", - "@storybook/web-components": "^7.4.5", - "@storybook/web-components-webpack5": "^7.4.5", + "@storybook/addon-links": "^7.6.7", + "@storybook/addon-mdx-gfm": "^7.6.7", + "@storybook/addon-storysource": "^7.6.7", + "@storybook/cli": "^7.6.7", + "@storybook/web-components": "^7.6.7", + "@storybook/web-components-webpack5": "^7.6.7", "@types/node": "12.12.22", "@types/react": "^17.0.0", "@types/react-dom": "^17.0.0", @@ -104,7 +105,7 @@ "eslint-plugin-jsdoc": "^46.8.2", "eslint-plugin-prefer-arrow": "^1.2.3", "eslint-plugin-react": "^7.32.2", - "eslint-plugin-storybook": "^0.6.14", + "eslint-plugin-storybook": "^0.6.15", "fs-extra": "^9.0.1", "gulp": "^4.0.2", "gulp-append-prepend": "^1.0.8", @@ -115,6 +116,7 @@ "gulp-sass": "^5.1.0", "gulp-util": "^3.0.8", "husky": "^4.3.0", + "js-beautify": "^1.14.11", "lerna": "^7.1.1", "lit": "^3.0.0", "monaco-editor": "^0.30.0", @@ -139,7 +141,7 @@ "sass": "^1.29.0", "shx": "^0.3.3", "sinon": "^16.1.0", - "storybook": "^7.4.5", + "storybook": "^7.6.7", "storybook-addon-web-components-knobs": "^0.3.20", "storybook-version": "^0.1.1", "stylelint": "^15.6.1", 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 2cdc9e426e..5b168c0d73 100644 --- a/packages/mgt-components/src/components/mgt-login/mgt-login.ts +++ b/packages/mgt-components/src/components/mgt-login/mgt-login.ts @@ -213,7 +213,9 @@ export class MgtLogin extends MgtTemplatedTaskComponent { */ public async login(): Promise { const provider = Providers.globalProvider; - if (!provider.isMultiAccountSupportedAndEnabled && (this.userDetails || !this.fireCustomEvent('loginInitiated'))) { + // (If we have user details or the consumer doesn't cancel the loginInitiated event) and the provider doesn't support multi-account, we don't have to login. + // This condition is to prevent the login popup from showing up when the user is already logged in while still ensuring the loginIntiated event is raised + if ((this.userDetails || !this.fireCustomEvent('loginInitiated')) && !provider.isMultiAccountSupportedAndEnabled) { return; } if (provider?.login) { @@ -356,9 +358,9 @@ export class MgtLogin extends MgtTemplatedTaskComponent { light-dismiss @opened=${this.flyoutOpened} @closed=${this.flyoutClosed}> - diff --git a/scripts/setVersion.js b/scripts/setVersion.js index dd4627470b..065bedb774 100644 --- a/scripts/setVersion.js +++ b/scripts/setVersion.js @@ -3,7 +3,7 @@ var path = require('path'); var fs = require('fs'); var project = require('../package.json'); -const ignoreDirs = ['node_modules', 'samples']; +const ignoreDirs = ['node_modules', 'samples', 'assets']; const getFiles = (filter, startPath = 'packages') => { let results = []; diff --git a/stories/components/agenda/agenda.docs.stories.js b/stories/components/agenda/agenda.docs.stories.js new file mode 100644 index 0000000000..0dbcd8eb33 --- /dev/null +++ b/stories/components/agenda/agenda.docs.stories.js @@ -0,0 +1,28 @@ +/** + * ------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License. + * See License in the project root for license information. + * ------------------------------------------------------------------------------------------- + */ + +import { html } from 'lit'; +import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; + +export default { + title: 'Components / mgt-agenda', + component: 'agenda', + decorators: [withCodeEditor], + tags: ['autodocs', 'hidden'], + parameters: { + docs: { + source: { code: '' }, + editor: { + hidden: true + } + } + } +}; + +export const Agenda = () => html` + +`; diff --git a/stories/components/agenda/agenda.stories.js b/stories/components/agenda/agenda.html.stories.js similarity index 83% rename from stories/components/agenda/agenda.stories.js rename to stories/components/agenda/agenda.html.stories.js index 1091c6d754..16b3b67c68 100644 --- a/stories/components/agenda/agenda.stories.js +++ b/stories/components/agenda/agenda.html.stories.js @@ -9,18 +9,12 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; export default { - title: 'Components / mgt-agenda', + title: 'Components / mgt-agenda / HTML', component: 'agenda', - decorators: [withCodeEditor], - tags: ['autodocs'], - parameters: { - docs: { - source: { code: '' } - } - } + decorators: [withCodeEditor] }; -export const simple = () => html` +export const agenda = () => html` `; diff --git a/stories/components/agenda/agenda.react.stories.js b/stories/components/agenda/agenda.react.stories.js new file mode 100644 index 0000000000..dbb7146e86 --- /dev/null +++ b/stories/components/agenda/agenda.react.stories.js @@ -0,0 +1,92 @@ +/** + * ------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License. + * See License in the project root for license information. + * ------------------------------------------------------------------------------------------- + */ + +import { html } from 'lit'; +import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; + +export default { + title: 'Components / mgt-agenda / React', + component: 'agenda', + decorators: [withCodeEditor] +}; + +export const Agenda = () => html` + + + import { Agenda } from '@microsoft/mgt-react'; + + export default () => ( + + ); + +`; + +export const getByEventQuery = () => html` + + +import { Agenda } from '@microsoft/mgt-react'; + +export default () => ( + +); + +`; + +export const groupByDay = () => html` + + +import { Agenda } from '@microsoft/mgt-react'; + +export default () => ( + +); + +`; + +export const showMax = () => html` + + +import { Agenda } from '@microsoft/mgt-react'; + +export default () => ( + +); + +`; + +export const getByDate = () => html` + + +import { Agenda } from '@microsoft/mgt-react'; + +export default () => ( + +); + +`; + +export const getEventsForNextWeek = () => html` + + +import { Agenda } from '@microsoft/mgt-react'; + +export default () => ( + +); + +`; + +export const preferredTimezone = () => html` + + +import { Agenda } from '@microsoft/mgt-react'; + +export default () => ( + +); + +`; diff --git a/stories/components/file/file.docs.stories.js b/stories/components/file/file.docs.stories.js new file mode 100644 index 0000000000..da3a61dea5 --- /dev/null +++ b/stories/components/file/file.docs.stories.js @@ -0,0 +1,28 @@ +/** + * ------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License. + * See License in the project root for license information. + * ------------------------------------------------------------------------------------------- + */ + +import { html } from 'lit'; +import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; + +export default { + title: 'Components / mgt-file', + component: 'file', + decorators: [withCodeEditor], + tags: ['autodocs', 'hidden'], + parameters: { + docs: { + source: { code: '' }, + editor: { + hidden: true + } + } + } +}; + +export const file = () => html` + +`; diff --git a/stories/components/file/file.stories.js b/stories/components/file/file.html.stories.js similarity index 83% rename from stories/components/file/file.stories.js rename to stories/components/file/file.html.stories.js index 7eda2db77d..6814780e56 100644 --- a/stories/components/file/file.stories.js +++ b/stories/components/file/file.html.stories.js @@ -9,15 +9,9 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; export default { - title: 'Components / mgt-file', + title: 'Components / mgt-file / HTML', component: 'file', - decorators: [withCodeEditor], - tags: ['autodocs'], - parameters: { - docs: { - source: { code: '' } - } - } + decorators: [withCodeEditor] }; export const file = () => html` diff --git a/stories/components/file/file.react.stories.js b/stories/components/file/file.react.stories.js new file mode 100644 index 0000000000..1895bbe64b --- /dev/null +++ b/stories/components/file/file.react.stories.js @@ -0,0 +1,26 @@ +/** + * ------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License. + * See License in the project root for license information. + * ------------------------------------------------------------------------------------------- + */ + +import { html } from 'lit'; +import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; + +export default { + title: 'Components / mgt-file / React', + component: 'file', + decorators: [withCodeEditor] +}; + +export const file = () => html` + + + import { File } from '@microsoft/mgt-react'; + + export default () => ( + + ); + +`; diff --git a/stories/components/fileList/fileList.docs.stories.js b/stories/components/fileList/fileList.docs.stories.js new file mode 100644 index 0000000000..22fd334b43 --- /dev/null +++ b/stories/components/fileList/fileList.docs.stories.js @@ -0,0 +1,28 @@ +/** + * ------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License. + * See License in the project root for license information. + * ------------------------------------------------------------------------------------------- + */ + +import { html } from 'lit'; +import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; + +export default { + title: 'Components / mgt-file-list', + component: 'file-list', + decorators: [withCodeEditor], + tags: ['autodocs', 'hidden'], + parameters: { + docs: { + source: { code: '' }, + editor: { + hidden: true + } + } + } +}; + +export const fileList = () => html` + +`; diff --git a/stories/components/fileList/fileList.stories.js b/stories/components/fileList/fileList.html.stories.js similarity index 95% rename from stories/components/fileList/fileList.stories.js rename to stories/components/fileList/fileList.html.stories.js index cbd35cd472..d73a19d1ff 100644 --- a/stories/components/fileList/fileList.stories.js +++ b/stories/components/fileList/fileList.html.stories.js @@ -9,15 +9,9 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; export default { - title: 'Components / mgt-file-list', + title: 'Components / mgt-file-list / HTML', component: 'file-list', - decorators: [withCodeEditor], - tags: ['autodocs'], - parameters: { - docs: { - source: { code: '' } - } - } + decorators: [withCodeEditor] }; export const fileList = () => html` diff --git a/stories/components/fileList/fileList.react.stories.js b/stories/components/fileList/fileList.react.stories.js new file mode 100644 index 0000000000..1faff51669 --- /dev/null +++ b/stories/components/fileList/fileList.react.stories.js @@ -0,0 +1,26 @@ +/** + * ------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License. + * See License in the project root for license information. + * ------------------------------------------------------------------------------------------- + */ + +import { html } from 'lit'; +import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; + +export default { + title: 'Components / mgt-file-list / React', + component: 'file-list', + decorators: [withCodeEditor] +}; + +export const fileList = () => html` + + + import { FileList } from '@microsoft/mgt-react'; + + export default () => ( + + ); + +`; diff --git a/stories/components/get/get.docs.stories.js b/stories/components/get/get.docs.stories.js new file mode 100644 index 0000000000..eb843357c3 --- /dev/null +++ b/stories/components/get/get.docs.stories.js @@ -0,0 +1,39 @@ +/** + * ------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License. + * See License in the project root for license information. + * ------------------------------------------------------------------------------------------- + */ + +import { html } from 'lit'; +import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; + +export default { + title: 'Components / mgt-get', + component: 'get', + decorators: [withCodeEditor], + tags: ['autodocs', 'hidden'], + parameters: { + docs: { + source: { + code: ` + + +` + }, + editor: { + hidden: true + } + } + } +}; + +export const Get = () => html` + + + +`; diff --git a/stories/components/get/get.stories.js b/stories/components/get/get.html.stories.js similarity index 95% rename from stories/components/get/get.stories.js rename to stories/components/get/get.html.stories.js index acb3adaeff..c14184e5b6 100644 --- a/stories/components/get/get.stories.js +++ b/stories/components/get/get.html.stories.js @@ -9,22 +9,9 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; export default { - title: 'Components / mgt-get', + title: 'Components / mgt-get / HTML', component: 'get', - decorators: [withCodeEditor], - tags: ['autodocs'], - parameters: { - docs: { - source: { - code: ` - - -` - } - } - } + decorators: [withCodeEditor] }; export const Get = () => html` diff --git a/stories/components/get/get.react.stories.js b/stories/components/get/get.react.stories.js new file mode 100644 index 0000000000..ad03856af1 --- /dev/null +++ b/stories/components/get/get.react.stories.js @@ -0,0 +1,39 @@ +/** + * ------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License. + * See License in the project root for license information. + * ------------------------------------------------------------------------------------------- + */ + +import { html } from 'lit'; +import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; + +export default { + title: 'Components / mgt-get / React', + component: 'get', + decorators: [withCodeEditor] +}; + +export const Get = () => html` + + + + + import { Get, MgtTemplateProps } from '@microsoft/mgt-react'; + + export const Messages = (props: MgtTemplateProps) => { + const value = props.dataContext; + return ( + 
{ JSON.stringify(value, null, 2) }
+ ); + }; + + export default () => ( + + + + ); + +`; diff --git a/stories/components/login/login.docs.stories.js b/stories/components/login/login.docs.stories.js new file mode 100644 index 0000000000..33f319577c --- /dev/null +++ b/stories/components/login/login.docs.stories.js @@ -0,0 +1,28 @@ +/** + * ------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License. + * See License in the project root for license information. + * ------------------------------------------------------------------------------------------- + */ + +import { html } from 'lit'; +import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; + +export default { + title: 'Components / mgt-login', + component: 'login', + decorators: [withCodeEditor], + tags: ['autodocs', 'hidden'], + parameters: { + docs: { + source: { code: '' }, + editor: { + hidden: true + } + } + } +}; + +export const Login = () => html` + +`; diff --git a/stories/components/login/login.stories.js b/stories/components/login/login.html.stories.js similarity index 95% rename from stories/components/login/login.stories.js rename to stories/components/login/login.html.stories.js index e31e2c08f0..6fbfe6f12b 100644 --- a/stories/components/login/login.stories.js +++ b/stories/components/login/login.html.stories.js @@ -9,15 +9,9 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; export default { - title: 'Components / mgt-login', + title: 'Components / mgt-login / HTML', component: 'login', - decorators: [withCodeEditor], - tags: ['autodocs'], - parameters: { - docs: { - source: { code: '' } - } - } + decorators: [withCodeEditor] }; export const Login = () => html` @@ -114,7 +108,7 @@ export const Events = () => html` `; -export const localization = () => html` +export const Localization = () => html` +`; diff --git a/stories/components/people/people.stories.js b/stories/components/people/people.docs.stories.js similarity index 85% rename from stories/components/people/people.stories.js rename to stories/components/people/people.docs.stories.js index 9de5a81eed..dd00b42a62 100644 --- a/stories/components/people/people.stories.js +++ b/stories/components/people/people.docs.stories.js @@ -12,10 +12,13 @@ export default { title: 'Components / mgt-people', component: 'people', decorators: [withCodeEditor], - tags: ['autodocs'], + tags: ['autodocs', 'hidden'], parameters: { docs: { - source: { code: '' } + source: { code: '' }, + editor: { + hidden: true + } } } }; @@ -23,9 +26,3 @@ export default { export const People = () => html` `; - -export const RTL = () => html` - - - -`; diff --git a/stories/components/people/people.html.stories.js b/stories/components/people/people.html.stories.js new file mode 100644 index 0000000000..595a06510f --- /dev/null +++ b/stories/components/people/people.html.stories.js @@ -0,0 +1,25 @@ +/** + * ------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License. + * See License in the project root for license information. + * ------------------------------------------------------------------------------------------- + */ + +import { html } from 'lit'; +import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; + +export default { + title: 'Components / mgt-people / HTML', + component: 'people', + decorators: [withCodeEditor] +}; + +export const People = () => html` + +`; + +export const RTL = () => html` + + + +`; diff --git a/stories/components/people/people.react.stories.js b/stories/components/people/people.react.stories.js new file mode 100644 index 0000000000..b398de8e3e --- /dev/null +++ b/stories/components/people/people.react.stories.js @@ -0,0 +1,26 @@ +/** + * ------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License. + * See License in the project root for license information. + * ------------------------------------------------------------------------------------------- + */ + +import { html } from 'lit'; +import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; + +export default { + title: 'Components / mgt-people / React', + component: 'people', + decorators: [withCodeEditor] +}; + +export const People = () => html` + + + import { People } from '@microsoft/mgt-react'; + + export default () => ( + + ); + +`; diff --git a/stories/components/peoplePicker/peoplePicker.docs.stories.js b/stories/components/peoplePicker/peoplePicker.docs.stories.js new file mode 100644 index 0000000000..ac3e3db3c9 --- /dev/null +++ b/stories/components/peoplePicker/peoplePicker.docs.stories.js @@ -0,0 +1,28 @@ +/** + * ------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License. + * See License in the project root for license information. + * ------------------------------------------------------------------------------------------- + */ + +import { html } from 'lit'; +import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; + +export default { + title: 'Components / mgt-people-picker', + component: 'people-picker', + decorators: [withCodeEditor], + tags: ['autodocs', 'hidden'], + parameters: { + docs: { + source: { code: '' }, + editor: { + hidden: true + } + } + } +}; + +export const peoplePicker = () => html` + + `; diff --git a/stories/components/peoplePicker/peoplePicker.stories.js b/stories/components/peoplePicker/peoplePicker.html.stories.js similarity index 94% rename from stories/components/peoplePicker/peoplePicker.stories.js rename to stories/components/peoplePicker/peoplePicker.html.stories.js index 39ebb097e3..32a8be09ab 100644 --- a/stories/components/peoplePicker/peoplePicker.stories.js +++ b/stories/components/peoplePicker/peoplePicker.html.stories.js @@ -9,15 +9,9 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; export default { - title: 'Components / mgt-people-picker', + title: 'Components / mgt-people-picker / HTML', component: 'people-picker', - decorators: [withCodeEditor], - tags: ['autodocs'], - parameters: { - docs: { - source: { code: '' } - } - } + decorators: [withCodeEditor] }; export const peoplePicker = () => html` diff --git a/stories/components/peoplePicker/peoplePicker.react.stories.js b/stories/components/peoplePicker/peoplePicker.react.stories.js new file mode 100644 index 0000000000..20682f9529 --- /dev/null +++ b/stories/components/peoplePicker/peoplePicker.react.stories.js @@ -0,0 +1,43 @@ +/** + * ------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License. + * See License in the project root for license information. + * ------------------------------------------------------------------------------------------- + */ + +import { html } from 'lit'; +import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; + +export default { + title: 'Components / mgt-people-picker / React', + component: 'people-picker', + decorators: [withCodeEditor] +}; + +export const peoplePicker = () => html` + + + import { PeoplePicker } from '@microsoft/mgt-react'; + + export default () => ( + + ); + + `; + +export const selectionChangedEvent = () => html` + + + // Check the console tab for the event to fire + import { useCallback } from 'react'; + import { PeoplePicker, IDynamicPerson } from '@microsoft/mgt-react'; + + export default () => { + const onSelectionChanged = useCallback((e: CustomEvent) => { + console.log(e.detail); + }, []); + + return ; + }; + +`; diff --git a/stories/components/person/person.docs.stories.js b/stories/components/person/person.docs.stories.js new file mode 100644 index 0000000000..5e5430b272 --- /dev/null +++ b/stories/components/person/person.docs.stories.js @@ -0,0 +1,26 @@ +/** + * ------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License. + * See License in the project root for license information. + * ------------------------------------------------------------------------------------------- + */ + +import { html } from 'lit'; +import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; + +export default { + title: 'Components / mgt-person', + component: 'person', + decorators: [withCodeEditor], + tags: ['autodocs', 'hidden'], + parameters: { + docs: { + source: { code: '' }, + editor: { hidden: true } + } + } +}; + +export const person = () => html` + +`; diff --git a/stories/components/person/person.stories.js b/stories/components/person/person.html.stories.js similarity index 96% rename from stories/components/person/person.stories.js rename to stories/components/person/person.html.stories.js index 60b42cf7ff..23682dbe73 100644 --- a/stories/components/person/person.stories.js +++ b/stories/components/person/person.html.stories.js @@ -9,15 +9,9 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; export default { - title: 'Components / mgt-person', + title: 'Components / mgt-person / HTML', component: 'person', - decorators: [withCodeEditor], - tags: ['autodocs'], - parameters: { - docs: { - source: { code: '' } - } - } + decorators: [withCodeEditor] }; export const person = () => html` diff --git a/stories/components/person/person.react.stories.js b/stories/components/person/person.react.stories.js new file mode 100644 index 0000000000..c433b0cc29 --- /dev/null +++ b/stories/components/person/person.react.stories.js @@ -0,0 +1,100 @@ +/** + * ------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License. + * See License in the project root for license information. + * ------------------------------------------------------------------------------------------- + */ + +import { html } from 'lit'; +import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; + +export default { + title: 'Components / mgt-person / React', + component: 'person', + decorators: [withCodeEditor] +}; + +export const person = () => html` + +
+ +
+ +
+ +
+ + + import { Person } from '@microsoft/mgt-react'; + + export default () => ( + <> + +
+ +
+ +
+ +
+ + + ); + +`; + +export const personCard = () => html` +
+
Person card Hover
+ +
+
+
Person card Click
+ +
+ + + import { Person } from '@microsoft/mgt-react'; + + export default () => ( + <> +
+
Person card Hover
+ +
+
+
Person card Click
+ +
+ + ); + + `; + +export const events = () => html` +
Click on each line
+
+ +
+ + // Check the console tab for the event to fire + import { useCallback } from 'react'; + import { Person, IDynamicPerson } from '@microsoft/mgt-react'; + + export default () => { + const onLineClicked = useCallback((e: CustomEvent) => { + console.log(e.detail); + }, []); + + return ( + + ); + }; + +`; diff --git a/stories/components/personCard/personCard.docs.stories.js b/stories/components/personCard/personCard.docs.stories.js new file mode 100644 index 0000000000..e7d46519ee --- /dev/null +++ b/stories/components/personCard/personCard.docs.stories.js @@ -0,0 +1,38 @@ +/** + * ------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License. + * See License in the project root for license information. + * ------------------------------------------------------------------------------------------- + */ + +import { html } from 'lit'; +import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; + +export default { + title: 'Components / mgt-person-card', + component: 'person-card', + decorators: [withCodeEditor], + tags: ['autodocs', 'hidden'], + parameters: { + docs: { + source: { code: '' }, + editor: { hidden: true } + } + } +}; + +export const personCard = () => html` + + + + + +`; diff --git a/stories/components/personCard/personCard.stories.js b/stories/components/personCard/personCard.html.stories.js similarity index 94% rename from stories/components/personCard/personCard.stories.js rename to stories/components/personCard/personCard.html.stories.js index 237186017c..7fe8d7225b 100644 --- a/stories/components/personCard/personCard.stories.js +++ b/stories/components/personCard/personCard.html.stories.js @@ -9,15 +9,9 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; export default { - title: 'Components / mgt-person-card', + title: 'Components / mgt-person-card / HTML', component: 'person-card', - decorators: [withCodeEditor], - tags: ['autodocs'], - parameters: { - docs: { - source: { code: '' } - } - } + decorators: [withCodeEditor] }; export const personCard = () => html` diff --git a/stories/components/personCard/personCard.react.stories.js b/stories/components/personCard/personCard.react.stories.js new file mode 100644 index 0000000000..8a26a74bcc --- /dev/null +++ b/stories/components/personCard/personCard.react.stories.js @@ -0,0 +1,52 @@ +/** + * ------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License. + * See License in the project root for license information. + * ------------------------------------------------------------------------------------------- + */ + +import { html } from 'lit'; +import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; + +export default { + title: 'Components / mgt-person-card / React', + component: 'person-card', + decorators: [withCodeEditor] +}; + +export const personCard = () => html` + + + import { PersonCard } from '@microsoft/mgt-react'; + + export default () => ( + + ); + +`; + +export const events = () => html` + + + + + + // Check the console tab for the event to fire + import { useCallback } from 'react'; + import { PersonCard } from '@microsoft/mgt-react'; + + export default () => { + const onExpanded = useCallback((e: CustomEvent) => { + console.log("expanded"); + }, []); + + return ; + }; + + +`; diff --git a/stories/components/picker/picker.docs.stories.js b/stories/components/picker/picker.docs.stories.js new file mode 100644 index 0000000000..020df75f1c --- /dev/null +++ b/stories/components/picker/picker.docs.stories.js @@ -0,0 +1,28 @@ +/** + * ------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License. + * See License in the project root for license information. + * ------------------------------------------------------------------------------------------- + */ + +import { html } from 'lit'; +import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; + +export default { + title: 'Components / mgt-picker', + component: 'picker', + decorators: [withCodeEditor], + tags: ['autodocs', 'hidden'], + parameters: { + docs: { + source: { + code: '' + }, + editor: { hidden: true } + } + } +}; + +export const picker = () => html` + +`; diff --git a/stories/components/picker/picker.stories.js b/stories/components/picker/picker.html.stories.js similarity index 81% rename from stories/components/picker/picker.stories.js rename to stories/components/picker/picker.html.stories.js index 070766542f..9219f1e1c5 100644 --- a/stories/components/picker/picker.stories.js +++ b/stories/components/picker/picker.html.stories.js @@ -9,17 +9,9 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; export default { - title: 'Components / mgt-picker', + title: 'Components / mgt-picker / HTML', component: 'picker', - decorators: [withCodeEditor], - tags: ['autodocs'], - parameters: { - docs: { - source: { - code: '' - } - } - } + decorators: [withCodeEditor] }; export const picker = () => html` @@ -42,7 +34,7 @@ export const events = () => html` `; diff --git a/stories/components/picker/picker.react.stories.js b/stories/components/picker/picker.react.stories.js new file mode 100644 index 0000000000..b0d691b675 --- /dev/null +++ b/stories/components/picker/picker.react.stories.js @@ -0,0 +1,57 @@ +/** + * ------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License. + * See License in the project root for license information. + * ------------------------------------------------------------------------------------------- + */ + +import { html } from 'lit'; +import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; + +export default { + title: 'Components / mgt-picker / React', + component: 'picker', + decorators: [withCodeEditor] +}; + +export const picker = () => html` + + + import { Picker } from '@microsoft/mgt-react'; + + export default () => ( + + ); + +`; + +export const events = () => html` + + + + // Check the console tab for the event to fire + import { useCallback } from 'react'; + import { Picker } from '@microsoft/mgt-react'; + + export default () => { + const onSelectionChanged = useCallback((e: CustomEvent) => { + console.log('selectedItem', e.detail); + }, []); + + return ( + + ); + }; + + +`; diff --git a/stories/components/planner/planner.docs.stories.js b/stories/components/planner/planner.docs.stories.js new file mode 100644 index 0000000000..f1fe9328ff --- /dev/null +++ b/stories/components/planner/planner.docs.stories.js @@ -0,0 +1,26 @@ +/** + * ------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License. + * See License in the project root for license information. + * ------------------------------------------------------------------------------------------- + */ + +import { html } from 'lit'; +import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; + +export default { + title: 'Components / mgt-planner', + component: 'planner', + decorators: [withCodeEditor], + tags: ['autodocs', 'hidden'], + parameters: { + docs: { + source: { code: '' }, + editor: { hidden: true } + } + } +}; + +export const tasks = () => html` + +`; diff --git a/stories/components/planner/planner.stories.js b/stories/components/planner/planner.html.stories.js similarity index 78% rename from stories/components/planner/planner.stories.js rename to stories/components/planner/planner.html.stories.js index 5449e0dc03..c28311c112 100644 --- a/stories/components/planner/planner.stories.js +++ b/stories/components/planner/planner.html.stories.js @@ -9,22 +9,16 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; export default { - title: 'Components / mgt-planner', + title: 'Components / mgt-planner / HTML', component: 'planner', - decorators: [withCodeEditor], - tags: ['autodocs'], - parameters: { - docs: { - source: { code: '' } - } - } + decorators: [withCodeEditor] }; -export const tasks = () => html` +export const planner = () => html` `; -export const tasksWithGroupId = () => html` +export const plannerWithGroupId = () => html` - `; diff --git a/stories/components/searchBox/searchBox.react.stories.js b/stories/components/searchBox/searchBox.react.stories.js new file mode 100644 index 0000000000..74c48b7335 --- /dev/null +++ b/stories/components/searchBox/searchBox.react.stories.js @@ -0,0 +1,51 @@ +/** + * ------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License. + * See License in the project root for license information. + * ------------------------------------------------------------------------------------------- + */ + +import { html } from 'lit'; +import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; + +export default { + title: 'Components / mgt-search-box / React', + component: 'search-box', + decorators: [withCodeEditor] +}; + +export const searchBox = () => html` + + + import { SearchBox } from '@microsoft/mgt-react'; + + export default () => ( + + ); + +`; + +export const events = () => html` + + + + + // Check the console tab for the event to fire + import { useCallback } from 'react'; + import { SearchBox } from '@microsoft/mgt-react'; + + export default () => { + const onSearchTermChanged = useCallback((e: CustomEvent) => { + console.log(e.detail); + }, []); + + return ; + }; + + +`; diff --git a/stories/components/searchResults/searchResults.docs.stories.js b/stories/components/searchResults/searchResults.docs.stories.js new file mode 100644 index 0000000000..8f5bbcec0e --- /dev/null +++ b/stories/components/searchResults/searchResults.docs.stories.js @@ -0,0 +1,30 @@ +/** + * ------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License. + * See License in the project root for license information. + * ------------------------------------------------------------------------------------------- + */ + +import { html } from 'lit'; +import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; + +export default { + title: 'Components / mgt-search-results', + component: 'search-results', + decorators: [withCodeEditor], + tags: ['autodocs', 'hidden'], + parameters: { + docs: { + source: { code: '' }, + editor: { hidden: true } + } + } +}; + +export const searchResults = () => html` + + +`; diff --git a/stories/components/searchResults/searchResults.stories.js b/stories/components/searchResults/searchResults.html.stories.js similarity index 84% rename from stories/components/searchResults/searchResults.stories.js rename to stories/components/searchResults/searchResults.html.stories.js index bbc4a18d66..d45f452319 100644 --- a/stories/components/searchResults/searchResults.stories.js +++ b/stories/components/searchResults/searchResults.html.stories.js @@ -9,15 +9,9 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; export default { - title: 'Components / mgt-search-results', + title: 'Components / mgt-search-results / HTML', component: 'search-results', - decorators: [withCodeEditor], - tags: ['autodocs'], - parameters: { - docs: { - source: { code: '' } - } - } + decorators: [withCodeEditor] }; export const searchResults = () => html` diff --git a/stories/components/searchResults/searchResults.react.stories.js b/stories/components/searchResults/searchResults.react.stories.js new file mode 100644 index 0000000000..b47ebc3d9f --- /dev/null +++ b/stories/components/searchResults/searchResults.react.stories.js @@ -0,0 +1,30 @@ +/** + * ------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License. + * See License in the project root for license information. + * ------------------------------------------------------------------------------------------- + */ + +import { html } from 'lit'; +import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; + +export default { + title: 'Components / mgt-search-results / React', + component: 'search-results', + decorators: [withCodeEditor] +}; + +export const searchResults = () => html` + + + + import { SearchResults } from '@microsoft/mgt-react'; + + export default () => ( + + ); + +`; diff --git a/stories/components/taxonomyPicker/taxonomyPicker.docs.stories.js b/stories/components/taxonomyPicker/taxonomyPicker.docs.stories.js new file mode 100644 index 0000000000..092f754717 --- /dev/null +++ b/stories/components/taxonomyPicker/taxonomyPicker.docs.stories.js @@ -0,0 +1,28 @@ +/** + * ------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License. + * See License in the project root for license information. + * ------------------------------------------------------------------------------------------- + */ + +import { html } from 'lit'; +import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; + +export default { + title: 'Components / mgt-taxonomy-picker', + component: 'taxonomy-picker', + decorators: [withCodeEditor], + tags: ['autodocs', 'hidden'], + parameters: { + docs: { + source: { + code: '' + }, + editor: { hidden: true } + } + } +}; + +export const TaxonomyPicker = () => html` + +`; diff --git a/stories/components/taxonomyPicker/taxonomyPicker.stories.js b/stories/components/taxonomyPicker/taxonomyPicker.html.stories.js similarity index 79% rename from stories/components/taxonomyPicker/taxonomyPicker.stories.js rename to stories/components/taxonomyPicker/taxonomyPicker.html.stories.js index 992ce6c785..0501b4d46b 100644 --- a/stories/components/taxonomyPicker/taxonomyPicker.stories.js +++ b/stories/components/taxonomyPicker/taxonomyPicker.html.stories.js @@ -9,17 +9,9 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; export default { - title: 'Components / mgt-taxonomy-picker', + title: 'Components / mgt-taxonomy-picker / HTML', component: 'taxonomy-picker', - decorators: [withCodeEditor], - tags: ['autodocs'], - parameters: { - docs: { - source: { - code: '' - } - } - } + decorators: [withCodeEditor] }; export const TaxonomyPicker = () => html` diff --git a/stories/components/taxonomyPicker/taxonomyPicker.react.stories.js b/stories/components/taxonomyPicker/taxonomyPicker.react.stories.js new file mode 100644 index 0000000000..510bbdc3dc --- /dev/null +++ b/stories/components/taxonomyPicker/taxonomyPicker.react.stories.js @@ -0,0 +1,49 @@ +/** + * ------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License. + * See License in the project root for license information. + * ------------------------------------------------------------------------------------------- + */ + +import { html } from 'lit'; +import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; + +export default { + title: 'Components / mgt-taxonomy-picker / React', + component: 'taxonomy-picker', + decorators: [withCodeEditor] +}; + +export const TaxonomyPicker = () => html` + + + import { TaxonomyPicker } from '@microsoft/mgt-react'; + + export default () => ( + + ); + +`; + +export const SelectionChangedEvent = () => html` + + + + // Check the console tab for the event to fire + import { useCallback } from 'react'; + import { TaxonomyPicker } from '@microsoft/mgt-react'; + + export default () => { + const onSelectionChanged = useCallback((e: CustomEvent) => { + console.log(e.detail); + }, []); + + return ; + }; + + +`; diff --git a/stories/components/teamsChannelPicker/teamsChannelPicker.docs.stories.js b/stories/components/teamsChannelPicker/teamsChannelPicker.docs.stories.js new file mode 100644 index 0000000000..8060a582d6 --- /dev/null +++ b/stories/components/teamsChannelPicker/teamsChannelPicker.docs.stories.js @@ -0,0 +1,28 @@ +/** + * ------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License. + * See License in the project root for license information. + * ------------------------------------------------------------------------------------------- + */ + +import { html } from 'lit'; +import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; + +export default { + title: 'Components / mgt-teams-channel-picker', + component: 'teams-channel-picker', + decorators: [withCodeEditor], + tags: ['autodocs', 'hidden'], + parameters: { + docs: { + source: { + code: '' + }, + editor: { hidden: true } + } + } +}; + +export const teamsChannelPicker = () => html` + +`; diff --git a/stories/components/teamsChannelPicker/teamsChannelPicker.stories.js b/stories/components/teamsChannelPicker/teamsChannelPicker.html.stories.js similarity index 94% rename from stories/components/teamsChannelPicker/teamsChannelPicker.stories.js rename to stories/components/teamsChannelPicker/teamsChannelPicker.html.stories.js index 6be6e0067b..ce7914dd53 100644 --- a/stories/components/teamsChannelPicker/teamsChannelPicker.stories.js +++ b/stories/components/teamsChannelPicker/teamsChannelPicker.html.stories.js @@ -9,17 +9,9 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; export default { - title: 'Components / mgt-teams-channel-picker', + title: 'Components / mgt-teams-channel-picker / HTML', component: 'teams-channel-picker', - decorators: [withCodeEditor], - tags: ['autodocs'], - parameters: { - docs: { - source: { - code: '' - } - } - } + decorators: [withCodeEditor] }; export const teamsChannelPicker = () => html` diff --git a/stories/components/teamsChannelPicker/teamsChannelPicker.react.stories.js b/stories/components/teamsChannelPicker/teamsChannelPicker.react.stories.js new file mode 100644 index 0000000000..5889dd5ac3 --- /dev/null +++ b/stories/components/teamsChannelPicker/teamsChannelPicker.react.stories.js @@ -0,0 +1,49 @@ +/** + * ------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License. + * See License in the project root for license information. + * ------------------------------------------------------------------------------------------- + */ + +import { html } from 'lit'; +import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; + +export default { + title: 'Components / mgt-teams-channel-picker / React', + component: 'teams-channel-picker', + decorators: [withCodeEditor] +}; + +export const teamsChannelPicker = () => html` + + + import { TeamsChannelPicker } from '@microsoft/mgt-react'; + + export default () => ( + + ); + +`; + +export const Events = () => html` + + + // Check the console tab for the event to fire + import { useCallback } from 'react'; + import { TeamsChannelPicker, SelectedChannel } from '@microsoft/mgt-react'; + + export default () => { + const onSelectionChanged = useCallback((e: CustomEvent) => { + console.log(e.detail); + }, []); + + return ; + }; + + +`; diff --git a/stories/components/theme-toggle/themeToggle.docs.stories.js b/stories/components/theme-toggle/themeToggle.docs.stories.js new file mode 100644 index 0000000000..0c92316b6a --- /dev/null +++ b/stories/components/theme-toggle/themeToggle.docs.stories.js @@ -0,0 +1,37 @@ +/** + * ------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License. + * See License in the project root for license information. + * ------------------------------------------------------------------------------------------- + */ + +import { html } from 'lit'; +import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; + +export default { + title: 'Components / mgt-theme-toggle', + component: 'theme-toggle', + decorators: [ + withCodeEditor({ + disableThemeToggle: true + }) + ], + tags: ['autodocs', 'hidden'], + parameters: { + docs: { + source: { code: '' }, + editor: { hidden: true } + } + } +}; + +export const userPreferenceDriven = () => html` + + +`; diff --git a/stories/components/theme-toggle/themeToggle.stories.js b/stories/components/theme-toggle/themeToggle.html.stories.js similarity index 94% rename from stories/components/theme-toggle/themeToggle.stories.js rename to stories/components/theme-toggle/themeToggle.html.stories.js index 9e41db8dd9..5b0775d6fd 100644 --- a/stories/components/theme-toggle/themeToggle.stories.js +++ b/stories/components/theme-toggle/themeToggle.html.stories.js @@ -9,19 +9,13 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; export default { - title: 'Components / mgt-theme-toggle', + title: 'Components / mgt-theme-toggle / HTML', component: 'theme-toggle', decorators: [ withCodeEditor({ disableThemeToggle: true }) - ], - tags: ['autodocs'], - parameters: { - docs: { - source: { code: '' } - } - } + ] }; export const userPreferenceDriven = () => html` @@ -61,7 +55,7 @@ export const themingWithoutToggle = () => html`

This page has the provided light theme applied by calling applyTheme('light'). and applying some basic css rules to the body tag
- This function uses a default value of document for the second optional element parameter, + This function uses a default value of document for the second optional element parameter, which is used below to set the dark theme.
Refer to the CSS and JS tabs for details.

diff --git a/stories/components/theme-toggle/themeToggle.react.stories.js b/stories/components/theme-toggle/themeToggle.react.stories.js new file mode 100644 index 0000000000..fedfdc8a2d --- /dev/null +++ b/stories/components/theme-toggle/themeToggle.react.stories.js @@ -0,0 +1,53 @@ +/** + * ------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License. + * See License in the project root for license information. + * ------------------------------------------------------------------------------------------- + */ + +import { html } from 'lit'; +import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; + +export default { + title: 'Components / mgt-theme-toggle / React', + component: 'theme-toggle', + decorators: [ + withCodeEditor({ + disableThemeToggle: true + }) + ] +}; + +export const UserPreferenceDriven = () => html` + + + import { ThemeToggle } from '@microsoft/mgt-react'; + + export default () => ( + + ); + + +`; + +export const SetMode = () => html` + + + import { ThemeToggle } from '@microsoft/mgt-react'; + + export default () => ( + + ); + + +`; diff --git a/stories/components/todo/todo.docs.stories.js b/stories/components/todo/todo.docs.stories.js new file mode 100644 index 0000000000..eeb082bf05 --- /dev/null +++ b/stories/components/todo/todo.docs.stories.js @@ -0,0 +1,26 @@ +/** + * ------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License. + * See License in the project root for license information. + * ------------------------------------------------------------------------------------------- + */ + +import { html } from 'lit'; +import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; + +export default { + title: 'Components / mgt-todo', + component: 'todo', + decorators: [withCodeEditor], + tags: ['autodocs', 'hidden'], + parameters: { + docs: { + source: { code: '' }, + editor: { hidden: true } + } + } +}; + +export const todos = () => html` + +`; diff --git a/stories/components/todo/todo.stories.js b/stories/components/todo/todo.html.stories.js similarity index 85% rename from stories/components/todo/todo.stories.js rename to stories/components/todo/todo.html.stories.js index 18b2b347f9..aaed9d6a8a 100644 --- a/stories/components/todo/todo.stories.js +++ b/stories/components/todo/todo.html.stories.js @@ -9,15 +9,9 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; export default { - title: 'Components / mgt-todo', + title: 'Components / mgt-todo / HTML', component: 'todo', - decorators: [withCodeEditor], - tags: ['autodocs'], - parameters: { - docs: { - source: { code: '' } - } - } + decorators: [withCodeEditor] }; export const todos = () => html` diff --git a/stories/components/todo/todo.react.stories.js b/stories/components/todo/todo.react.stories.js new file mode 100644 index 0000000000..5c8507e01a --- /dev/null +++ b/stories/components/todo/todo.react.stories.js @@ -0,0 +1,26 @@ +/** + * ------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License. + * See License in the project root for license information. + * ------------------------------------------------------------------------------------------- + */ + +import { html } from 'lit'; +import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; + +export default { + title: 'Components / mgt-todo / React', + component: 'todo', + decorators: [withCodeEditor] +}; + +export const todos = () => html` + + + import { Todo } from '@microsoft/mgt-react'; + + export default () => ( + + ); + +`; diff --git a/stories/components/todo/todo.style.stories.js b/stories/components/todo/todo.style.stories.js index 5a2ad1baa6..dcceedf018 100644 --- a/stories/components/todo/todo.style.stories.js +++ b/stories/components/todo/todo.style.stories.js @@ -9,15 +9,9 @@ import { html } from 'lit'; import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon'; export default { - title: 'Components / mgt-todo', + title: 'Components / mgt-todo / Style', component: 'todo', - decorators: [withCodeEditor], - tags: ['autodocs'], - parameters: { - docs: { - source: { code: '' } - } - } + decorators: [withCodeEditor] }; export const customCSSProperties = () => html` diff --git a/stories/overview.stories.mdx b/stories/overview.stories.mdx index e7ae4a3b8d..a9bade1dab 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-element'; -import { versionInfo } from '../.storybook/versionInfo'; +import { getCleanVersionInfo } from '../.storybook/versionInfo'; import { TableNamer, CopyButtonNamer } from '../.storybook/components/ElementNamer'; @@ -23,14 +23,14 @@ It's easy to get started! Add the Toolkit via our `mgt-loader` or via npm and yo `} + code={``} /> #### Via npm ### What's in the Microsoft Graph Toolkit? diff --git a/stories/samples/embed.stories.js b/stories/samples/embed.stories.js new file mode 100644 index 0000000000..65acfd1a2f --- /dev/null +++ b/stories/samples/embed.stories.js @@ -0,0 +1,38 @@ +/** + * ------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License. + * See License in the project root for license information. + * ------------------------------------------------------------------------------------------- + */ + +import { html } from 'lit'; +import { withCodeEditor } from '../../.storybook/addons/codeEditorAddon/codeAddon'; + +export default { + title: 'Samples / Embed', + decorators: [withCodeEditor], + tags: ['hidden'], + parameters: { + viewMode: 'story' + } +}; + +export const LoginToShowAgenda = () => html` + + +`; + +export const LoginToShowAgendaReact = () => html` + + + + import { Agenda, Login } from '@microsoft/mgt-react'; + + export default () => ( + <> + + + + ); + +`; diff --git a/stories/samples/general.stories.js b/stories/samples/general.stories.js index b5e858fc89..ec9f74eeb9 100644 --- a/stories/samples/general.stories.js +++ b/stories/samples/general.stories.js @@ -16,11 +16,6 @@ export default { } }; -export const LoginToShowAgenda = () => html` - - -`; - export const Localization = () => html` diff --git a/yarn.lock b/yarn.lock index e0ef4cbeda..9afd8ed10d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2641,13 +2641,13 @@ __metadata: linkType: hard "@fluentui/fluent2-theme@npm:^8.0.0": - version: 8.107.59 - resolution: "@fluentui/fluent2-theme@npm:8.107.59" + version: 8.107.60 + resolution: "@fluentui/fluent2-theme@npm:8.107.60" dependencies: - "@fluentui/react": ^8.115.0 + "@fluentui/react": ^8.115.1 "@fluentui/set-version": ^8.2.14 tslib: ^2.1.0 - checksum: 897710264d3a3f99bceac6954591b336d20703ffbead19aad2f2d1db1c8e52a418a70dd86466f3bd6dca7dd20f3f8f9aa5810c21e11be07d2f1172db58a468f3 + checksum: a18022f6f63855dc03a6336f520a6537fd11a7e2e19eaf2a88b78c5bd76f63a80511faf3a26b24eccb60c4ac19a52e7f21d35180c91c91f2fc5d13a22fc8440e languageName: node linkType: hard @@ -3129,9 +3129,9 @@ __metadata: languageName: node linkType: hard -"@fluentui/react-focus@npm:^8.8.38": - version: 8.8.38 - resolution: "@fluentui/react-focus@npm:8.8.38" +"@fluentui/react-focus@npm:^8.8.39": + version: 8.8.39 + resolution: "@fluentui/react-focus@npm:8.8.39" dependencies: "@fluentui/keyboard-key": ^0.4.14 "@fluentui/merge-styles": ^8.5.15 @@ -3142,7 +3142,7 @@ __metadata: peerDependencies: "@types/react": ">=16.8.0 <19.0.0" react: ">=16.8.0 <19.0.0" - checksum: e945290f5048e16b1f0340492617580f0c7bbb2dd46bce80f314169a7eec19309b6c2e4b9b5a17a69118688f2b1dee396e97c2fb87dab58940d4f12d4396ae8b + checksum: 9a4e22a29ca7ea9fe6637a7d2516dfc7932c2bb8f8e6b556dda509204b494ab361030b2ff589d02f4afe09ca8bc06077536aee2e3d5033d9e2d2150f57a230e7 languageName: node linkType: hard @@ -4037,15 +4037,15 @@ __metadata: languageName: node linkType: hard -"@fluentui/react@npm:^8.0.0, @fluentui/react@npm:^8.115.0": - version: 8.115.0 - resolution: "@fluentui/react@npm:8.115.0" +"@fluentui/react@npm:^8.0.0, @fluentui/react@npm:^8.115.1": + version: 8.115.1 + resolution: "@fluentui/react@npm:8.115.1" dependencies: "@fluentui/date-time-utilities": ^8.5.16 "@fluentui/font-icons-mdl2": ^8.5.31 "@fluentui/foundation-legacy": ^8.2.51 "@fluentui/merge-styles": ^8.5.15 - "@fluentui/react-focus": ^8.8.38 + "@fluentui/react-focus": ^8.8.39 "@fluentui/react-hooks": ^8.6.36 "@fluentui/react-portal-compat-context": ^9.0.11 "@fluentui/react-window-provider": ^2.2.18 @@ -4060,7 +4060,7 @@ __metadata: "@types/react-dom": ">=16.8.0 <19.0.0" react: ">=16.8.0 <19.0.0" react-dom: ">=16.8.0 <19.0.0" - checksum: f28d7c23e67b5a7f81515348dad40109d8db535ed0a384c4c5ab83129f1341c3b1b6e9d7887bbfb242b1d16b40853bdc25c975122e6412e9024a619e7bfe4e84 + checksum: 86e89313a0defa5e2dac203e820f02b41ab2187b1113e0f980f6531483ff874bd482a98f72940b28dc03868959f7d999b3029197780aca07453f2023a7efc0f5 languageName: node linkType: hard @@ -5515,6 +5515,13 @@ __metadata: languageName: node linkType: hard +"@one-ini/wasm@npm:0.1.1": + version: 0.1.1 + resolution: "@one-ini/wasm@npm:0.1.1" + checksum: 11de17108eae57c797e552e36b259398aede999b4a689d78be6459652edc37f3428472410590a9d328011a8751b771063a5648dd5c4205631c55d1d58e313156 + languageName: node + linkType: hard + "@open-wc/dedupe-mixin@npm:^1.3.0, @open-wc/dedupe-mixin@npm:^1.4.0": version: 1.4.0 resolution: "@open-wc/dedupe-mixin@npm:1.4.0" @@ -6352,9 +6359,9 @@ __metadata: linkType: hard "@rushstack/eslint-patch@npm:^1.1.0": - version: 1.7.0 - resolution: "@rushstack/eslint-patch@npm:1.7.0" - checksum: 1eb2bef0eeab96893e852787cccf04011cbd6147c719dd55aff07207cfdabaa532abc26551565bcb4398956dbc2dc7abcfc945340235a22f8d05f1cb11e41110 + version: 1.7.1 + resolution: "@rushstack/eslint-patch@npm:1.7.1" + checksum: b5db62384c1890dd4561e8886c95f8ba4a312b5a137fd1896b502234d4d106b9477d28e02fbd327bdb983fcf203e164634d3787d983bc38332a2aca88e90cc77 languageName: node linkType: hard @@ -6488,7 +6495,14 @@ __metadata: languageName: node linkType: hard -"@storybook/addon-a11y@npm:^7.4.5": +"@stackblitz/sdk@npm:^1.9.0": + version: 1.9.0 + resolution: "@stackblitz/sdk@npm:1.9.0" + checksum: 9003383143cc17ef8a6982cece827d85e7bcfb63f07242af85d19834ce387c293f44c83360f8a7ca46dc153e89151c7487c54bc842967047910712aab9bd4a04 + languageName: node + linkType: hard + +"@storybook/addon-a11y@npm:^7.6.7": version: 7.6.10 resolution: "@storybook/addon-a11y@npm:7.6.10" dependencies: @@ -6498,7 +6512,7 @@ __metadata: languageName: node linkType: hard -"@storybook/addon-actions@npm:^7.4.5": +"@storybook/addon-actions@npm:^7.6.7": version: 7.6.10 resolution: "@storybook/addon-actions@npm:7.6.10" dependencies: @@ -6512,7 +6526,7 @@ __metadata: languageName: node linkType: hard -"@storybook/addon-docs@npm:^7.4.5": +"@storybook/addon-docs@npm:^7.6.7": version: 7.6.10 resolution: "@storybook/addon-docs@npm:7.6.10" dependencies: @@ -6583,7 +6597,7 @@ __metadata: languageName: node linkType: hard -"@storybook/addon-links@npm:^7.4.5": +"@storybook/addon-links@npm:^7.6.7": version: 7.6.10 resolution: "@storybook/addon-links@npm:7.6.10" dependencies: @@ -6599,7 +6613,7 @@ __metadata: languageName: node linkType: hard -"@storybook/addon-mdx-gfm@npm:^7.4.5": +"@storybook/addon-mdx-gfm@npm:^7.6.7": version: 7.6.10 resolution: "@storybook/addon-mdx-gfm@npm:7.6.10" dependencies: @@ -6610,7 +6624,7 @@ __metadata: languageName: node linkType: hard -"@storybook/addon-storysource@npm:^7.4.5": +"@storybook/addon-storysource@npm:^7.6.7": version: 7.6.10 resolution: "@storybook/addon-storysource@npm:7.6.10" dependencies: @@ -6742,7 +6756,7 @@ __metadata: languageName: node linkType: hard -"@storybook/cli@npm:7.6.10, @storybook/cli@npm:^7.4.5": +"@storybook/cli@npm:7.6.10, @storybook/cli@npm:^7.6.7": version: 7.6.10 resolution: "@storybook/cli@npm:7.6.10" dependencies: @@ -7204,7 +7218,7 @@ __metadata: languageName: node linkType: hard -"@storybook/web-components-webpack5@npm:^7.4.5": +"@storybook/web-components-webpack5@npm:^7.6.7": version: 7.6.10 resolution: "@storybook/web-components-webpack5@npm:7.6.10" dependencies: @@ -7220,7 +7234,7 @@ __metadata: languageName: node linkType: hard -"@storybook/web-components@npm:7.6.10, @storybook/web-components@npm:^7.4.5": +"@storybook/web-components@npm:7.6.10, @storybook/web-components@npm:^7.6.7": version: 7.6.10 resolution: "@storybook/web-components@npm:7.6.10" dependencies: @@ -7876,7 +7890,7 @@ __metadata: languageName: node linkType: hard -"@types/estree@npm:*, @types/estree@npm:^1.0.0": +"@types/estree@npm:*, @types/estree@npm:^1.0.0, @types/estree@npm:^1.0.5": version: 1.0.5 resolution: "@types/estree@npm:1.0.5" checksum: dd8b5bed28e6213b7acd0fb665a84e693554d850b0df423ac8076cc3ad5823a6bc26b0251d080bdc545af83179ede51dd3f6fa78cad2c46ed1f29624ddf3e41a @@ -8145,11 +8159,11 @@ __metadata: linkType: hard "@types/node@npm:*": - version: 20.11.5 - resolution: "@types/node@npm:20.11.5" + version: 20.11.6 + resolution: "@types/node@npm:20.11.6" dependencies: undici-types: ~5.26.4 - checksum: a542727de1334ae20a3ca034b0ecf4b464a57ca01efc4f9cf43bd9ab93896125ab3c2de060ecd8f6ae23b86c6bf3463f681b643e69c032c6a662d376c98a6092 + checksum: 54b3739f42d9c2266fd724d8ecbf50bc64eb0563343b65a6ea874a51a7fc8bb4793bf3a1b2222e40e3b7bd62cf5af5609899bf1a3de8b69748dcac65e63e8bdc languageName: node linkType: hard @@ -8168,18 +8182,18 @@ __metadata: linkType: hard "@types/node@npm:^16.18.12": - version: 16.18.74 - resolution: "@types/node@npm:16.18.74" - checksum: 33d8f157b51cb2f6907a7019e0bef0733f6ebd025f208863e6e6ea4721348902f2c7ac9eeaadff9f1e138927921e620c7f0a655475a298569d7551f2d28e35f3 + version: 16.18.75 + resolution: "@types/node@npm:16.18.75" + checksum: c118a26ee29c253fab45b393720d640f09cdc36d607a278756f9df30794a41d33eab898ca7aa987f33fe63bf88dc010e112aa83404d6e3df6be5c602ea205b2f languageName: node linkType: hard "@types/node@npm:^18.0.0": - version: 18.19.8 - resolution: "@types/node@npm:18.19.8" + version: 18.19.9 + resolution: "@types/node@npm:18.19.9" dependencies: undici-types: ~5.26.4 - checksum: fa291495d6157a9d9393b4c3bdbf1ce12a8f661dc9da6a4fa19bcdb19af1c62bb8dbf7fb66ae135f29cd788b618e9845b83e9c47edcf39f0953a8561fdacd9a3 + checksum: 8ffd4043ada193cf32d4c13eb850e8c510d4c96504c62fdc5326b3bb2c7ddc2c81892c351b2c0c403c29df3ab13c864a370f0282daf6d3380ba3c2001728a643 languageName: node linkType: hard @@ -11256,7 +11270,7 @@ __metadata: languageName: node linkType: hard -"browserslist@npm:^4.0.0, browserslist@npm:^4.14.5, browserslist@npm:^4.18.1, browserslist@npm:^4.21.4, browserslist@npm:^4.22.2": +"browserslist@npm:^4.0.0, browserslist@npm:^4.18.1, browserslist@npm:^4.21.10, browserslist@npm:^4.21.4, browserslist@npm:^4.22.2": version: 4.22.2 resolution: "browserslist@npm:4.22.2" dependencies: @@ -12279,6 +12293,13 @@ __metadata: languageName: node linkType: hard +"commander@npm:^10.0.0": + version: 10.0.1 + resolution: "commander@npm:10.0.1" + checksum: 436901d64a818295803c1996cd856621a74f30b9f9e28a588e726b2b1670665bccd7c1a77007ebf328729f0139838a88a19265858a0fa7a8728c4656796db948 + languageName: node + linkType: hard + "commander@npm:^2.20.0": version: 2.20.3 resolution: "commander@npm:2.20.3" @@ -12437,7 +12458,7 @@ __metadata: languageName: node linkType: hard -"config-chain@npm:^1.1.11": +"config-chain@npm:^1.1.11, config-chain@npm:^1.1.13": version: 1.1.13 resolution: "config-chain@npm:1.1.13" dependencies: @@ -13956,9 +13977,9 @@ __metadata: linkType: hard "dotenv@npm:^16.0.0": - version: 16.4.0 - resolution: "dotenv@npm:16.4.0" - checksum: f39dccc0eb25345675045d91762b8c92fc853402a8b25ba02723a7e27da58cefe0593771bbea97781df09300514eedb393b6c8f7bfa547fd9f7b69f0c965cbdb + version: 16.4.1 + resolution: "dotenv@npm:16.4.1" + checksum: a343f0a1d156deef8c60034f797969867af4dbccfacedd4ac15fad04547e7ffe0553b58fc3b27a5837950f0d977e38e9234943fbcec4aeced4e3d044309a76ab languageName: node linkType: hard @@ -14030,6 +14051,20 @@ __metadata: languageName: node linkType: hard +"editorconfig@npm:^1.0.3": + version: 1.0.4 + resolution: "editorconfig@npm:1.0.4" + dependencies: + "@one-ini/wasm": 0.1.1 + commander: ^10.0.0 + minimatch: 9.0.1 + semver: ^7.5.3 + bin: + editorconfig: bin/editorconfig + checksum: 09904f19381b3ddf132cea0762971aba887236f387be3540909e96b8eb9337e1793834e10f06890cd8e8e7bb1ba80cb13e7d50a863f227806c9ca74def4165fb + languageName: node + linkType: hard + "ee-first@npm:1.1.1": version: 1.1.1 resolution: "ee-first@npm:1.1.1" @@ -14049,9 +14084,9 @@ __metadata: linkType: hard "electron-to-chromium@npm:^1.4.601": - version: 1.4.643 - resolution: "electron-to-chromium@npm:1.4.643" - checksum: e97f15a3cb10460e8763f1b6a080bdd566c2375a63259af18a48ece03af0c0cf2aea4d25e7f0b2cf532f56e469efd4259ebafd6aa5a6e69ea679459e08f3645f + version: 1.4.644 + resolution: "electron-to-chromium@npm:1.4.644" + checksum: 10b33ce2f5b1fcdd017fced57d1cc00b41897dc98565c3c2a6924fc3cf80cc8d07d26379fa9947ff1d96518a6c47d19c5c65bb8d40753204929ec9ae594d0118 languageName: node linkType: hard @@ -14856,7 +14891,7 @@ __metadata: languageName: node linkType: hard -"eslint-plugin-storybook@npm:^0.6.14": +"eslint-plugin-storybook@npm:^0.6.15": version: 0.6.15 resolution: "eslint-plugin-storybook@npm:0.6.15" dependencies: @@ -16549,7 +16584,7 @@ __metadata: languageName: node linkType: hard -"glob@npm:^10.0.0, glob@npm:^10.2.2, glob@npm:^10.3.10": +"glob@npm:^10.0.0, glob@npm:^10.2.2, glob@npm:^10.3.10, glob@npm:^10.3.3": version: 10.3.10 resolution: "glob@npm:10.3.10" dependencies: @@ -19471,6 +19506,22 @@ __metadata: languageName: node linkType: hard +"js-beautify@npm:^1.14.11": + version: 1.14.11 + resolution: "js-beautify@npm:1.14.11" + dependencies: + config-chain: ^1.1.13 + editorconfig: ^1.0.3 + glob: ^10.3.3 + nopt: ^7.2.0 + bin: + css-beautify: js/bin/css-beautify.js + html-beautify: js/bin/html-beautify.js + js-beautify: js/bin/js-beautify.js + checksum: 92512b8dcc54330fe075569fd0226a1960da3fbb68f91e35dbfb110cc2b85e53e3ef17878c8be88b0888277bc5d51b1a692d72a00142d653ce7a8cbd48c66ee0 + languageName: node + linkType: hard + "js-tokens@npm:^3.0.0 || ^4.0.0, js-tokens@npm:^4.0.0": version: 4.0.0 resolution: "js-tokens@npm:4.0.0" @@ -21796,6 +21847,15 @@ __metadata: languageName: node linkType: hard +"minimatch@npm:9.0.1": + version: 9.0.1 + resolution: "minimatch@npm:9.0.1" + dependencies: + brace-expansion: ^2.0.1 + checksum: 97f5f5284bb57dc65b9415dec7f17a0f6531a33572193991c60ff18450dcfad5c2dad24ffeaf60b5261dccd63aae58cc3306e2209d57e7f88c51295a532d8ec3 + languageName: node + linkType: hard + "minimatch@npm:9.0.3, minimatch@npm:^9.0.0, minimatch@npm:^9.0.1": version: 9.0.3 resolution: "minimatch@npm:9.0.3" @@ -22419,7 +22479,7 @@ __metadata: languageName: node linkType: hard -"nopt@npm:^7.0.0": +"nopt@npm:^7.0.0, nopt@npm:^7.2.0": version: 7.2.0 resolution: "nopt@npm:7.2.0" dependencies: @@ -27027,16 +27087,17 @@ __metadata: "@octokit/rest": ^18.5.3 "@open-wc/testing": ^3.2.0 "@open-wc/testing-helpers": ^2.3.0 - "@storybook/addon-a11y": ^7.4.5 - "@storybook/addon-actions": ^7.4.5 - "@storybook/addon-docs": ^7.4.5 + "@stackblitz/sdk": ^1.9.0 + "@storybook/addon-a11y": ^7.6.7 + "@storybook/addon-actions": ^7.6.7 + "@storybook/addon-docs": ^7.6.7 "@storybook/addon-knobs": ^7.0.2 - "@storybook/addon-links": ^7.4.5 - "@storybook/addon-mdx-gfm": ^7.4.5 - "@storybook/addon-storysource": ^7.4.5 - "@storybook/cli": ^7.4.5 - "@storybook/web-components": ^7.4.5 - "@storybook/web-components-webpack5": ^7.4.5 + "@storybook/addon-links": ^7.6.7 + "@storybook/addon-mdx-gfm": ^7.6.7 + "@storybook/addon-storysource": ^7.6.7 + "@storybook/cli": ^7.6.7 + "@storybook/web-components": ^7.6.7 + "@storybook/web-components-webpack5": ^7.6.7 "@types/node": 12.12.22 "@types/react": ^17.0.0 "@types/react-dom": ^17.0.0 @@ -27058,7 +27119,7 @@ __metadata: eslint-plugin-jsdoc: ^46.8.2 eslint-plugin-prefer-arrow: ^1.2.3 eslint-plugin-react: ^7.32.2 - eslint-plugin-storybook: ^0.6.14 + eslint-plugin-storybook: ^0.6.15 fs-extra: ^9.0.1 gulp: ^4.0.2 gulp-append-prepend: ^1.0.8 @@ -27069,6 +27130,7 @@ __metadata: gulp-sass: ^5.1.0 gulp-util: ^3.0.8 husky: ^4.3.0 + js-beautify: ^1.14.11 lerna: ^7.1.1 lit: ^3.0.0 monaco-editor: ^0.30.0 @@ -27093,7 +27155,7 @@ __metadata: sass: ^1.29.0 shx: ^0.3.3 sinon: ^16.1.0 - storybook: ^7.4.5 + storybook: ^7.6.7 storybook-addon-web-components-knobs: ^0.3.20 storybook-version: ^0.1.1 stylelint: ^15.6.1 @@ -27907,9 +27969,9 @@ __metadata: linkType: hard "spdx-exceptions@npm:^2.1.0": - version: 2.3.0 - resolution: "spdx-exceptions@npm:2.3.0" - checksum: cb69a26fa3b46305637123cd37c85f75610e8c477b6476fa7354eb67c08128d159f1d36715f19be6f9daf4b680337deb8c65acdcae7f2608ba51931540687ac0 + version: 2.4.0 + resolution: "spdx-exceptions@npm:2.4.0" + checksum: b1b650a8d94424473bf9629cf972c86a91c03cccc260f5c901bce0e4b92d831627fec28c9e0a1e9c34c5ebad0a12cf2eab887bec088e0a862abb9d720c2fd0a1 languageName: node linkType: hard @@ -28136,7 +28198,7 @@ __metadata: languageName: node linkType: hard -"storybook@npm:^7.4.5": +"storybook@npm:^7.6.7": version: 7.6.10 resolution: "storybook@npm:7.6.10" dependencies: @@ -29085,7 +29147,7 @@ __metadata: languageName: node linkType: hard -"terser-webpack-plugin@npm:^5.2.5, terser-webpack-plugin@npm:^5.3.1, terser-webpack-plugin@npm:^5.3.7": +"terser-webpack-plugin@npm:^5.2.5, terser-webpack-plugin@npm:^5.3.1, terser-webpack-plugin@npm:^5.3.10": version: 5.3.10 resolution: "terser-webpack-plugin@npm:5.3.10" dependencies: @@ -30851,17 +30913,17 @@ __metadata: linkType: hard "webpack@npm:5, webpack@npm:^5.64.4, webpack@npm:^5.76.0": - version: 5.89.0 - resolution: "webpack@npm:5.89.0" + version: 5.90.0 + resolution: "webpack@npm:5.90.0" dependencies: "@types/eslint-scope": ^3.7.3 - "@types/estree": ^1.0.0 + "@types/estree": ^1.0.5 "@webassemblyjs/ast": ^1.11.5 "@webassemblyjs/wasm-edit": ^1.11.5 "@webassemblyjs/wasm-parser": ^1.11.5 acorn: ^8.7.1 acorn-import-assertions: ^1.9.0 - browserslist: ^4.14.5 + browserslist: ^4.21.10 chrome-trace-event: ^1.0.2 enhanced-resolve: ^5.15.0 es-module-lexer: ^1.2.1 @@ -30875,7 +30937,7 @@ __metadata: neo-async: ^2.6.2 schema-utils: ^3.2.0 tapable: ^2.1.1 - terser-webpack-plugin: ^5.3.7 + terser-webpack-plugin: ^5.3.10 watchpack: ^2.4.0 webpack-sources: ^3.2.3 peerDependenciesMeta: @@ -30883,7 +30945,7 @@ __metadata: optional: true bin: webpack: bin/webpack.js - checksum: 43fe0dbc30e168a685ef5a86759d5016a705f6563b39a240aa00826a80637d4a3deeb8062e709d6a4b05c63e796278244c84b04174704dc4a37bedb0f565c5ed + checksum: 178a0e7e9e5b26264a19dd5fe554a3508a8afafc9cce972bfd4452b5128d0db1b37832f5e615be1cff1934f24da0de967929f199be2b3fe283ca1951f98ea3fe languageName: node linkType: hard