[mgt.dev] Added support for importing toolkit exports in stories (#773)

nmetulev · beth-panx · web-flow · commit 94bf4f99970d · 2020-11-19T17:13:46.000-08:00
* Changed story rendering from div to iframe and added support for importing mgt exports

* removed commented out code

* fixed conflict

* Apply suggestions from code review

Co-authored-by: Beth Pan &lt;xupa@microsoft.com&gt;

Co-authored-by: Beth Pan &lt;xupa@microsoft.com&gt;
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,7 @@
 dist/
 www/
 lib/
+assets/*.js
 
 *~
 *.sw[mnpcod]
diff --git a/.storybook/addons/codeEditorAddon/codeAddon.js b/.storybook/addons/codeEditorAddon/codeAddon.js
@@ -1,6 +1,8 @@
 import { makeDecorator } from '@storybook/addons';
 import { EditorElement } from './editor';
 
+const mgtScriptName = './mgt.storybook.js';
+
 // function is used for dragging and moving
 const setupEditorResize = (first, separator, last, dragComplete) => {
   var md; // remember mouse down info
@@ -63,14 +65,11 @@ export const withCodeEditor = makeDecorator({
     let storyHtml;
     const root = document.createElement('div');
     let storyElementWrapper = document.createElement('div');
-    let storyElement;
 
     if (story.strings) {
       storyHtml = story.strings[0];
-      storyElement = document.createElement('div');
     } else {
       storyHtml = story.innerHTML;
-      storyElement = story;
     }
 
     let scriptMatches = scriptRegex.exec(storyHtml);
@@ -93,8 +92,46 @@ export const withCodeEditor = makeDecorator({
     };
 
     editor.addEventListener('fileUpdated', () => {
-      storyElement.innerHTML = editor.files.html + `<style>${editor.files.css}</style>`;
-      eval(editor.files.js);
+      const storyElement = document.createElement('iframe');
+
+      storyElement.addEventListener('load', () => {
+        let doc = storyElement.contentDocument;
+
+        let { html, css, js } = editor.files;
+        js = js.replace(
+          /import \{([^\}]+)\}\s+from\s+['"]@microsoft\/mgt['"];/gm,
+          `import {$1} from '${mgtScriptName}';`
+        );
+
+        const docContent = `
+      <html>
+        <head>
+          <script type="module" src="${mgtScriptName}"></script>
+          <script type="module">
+            import {Providers, MockProvider} from "${mgtScriptName}";
+            Providers.globalProvider = new MockProvider(true);
+          </script>
+          <style>
+            ${css}
+          </style>
+        </head>
+        <body>
+          ${html}
+          <script type="module">
+            ${js}
+          </script>
+        </body>
+      </html>
+      `;
+
+        doc.open();
+        doc.write(docContent);
+        doc.close();
+      });
+
+      storyElement.className = 'story-mgt-preview';
+      storyElementWrapper.innerHTML = '';
+      storyElementWrapper.appendChild(storyElement);
     });
 
     const separator = document.createElement('div');
@@ -103,12 +140,10 @@ export const withCodeEditor = makeDecorator({
 
     root.className = 'story-mgt-root';
     storyElementWrapper.className = 'story-mgt-preview-wrapper';
-    storyElement.className = 'story-mgt-preview';
     separator.className = 'story-mgt-separator';
     editor.className = 'story-mgt-editor';
 
     root.appendChild(storyElementWrapper);
-    storyElementWrapper.appendChild(storyElement);
     root.appendChild(separator);
     root.appendChild(editor);
 
diff --git a/.storybook/manager.js b/.storybook/manager.js
@@ -10,7 +10,7 @@ import { addons, types } from '@storybook/addons';
 import { STORIES_CONFIGURED, STORY_MISSING } from '@storybook/core-events';
 import { AddonPanel } from '@storybook/components';
 import { useParameter, useChannel } from '@storybook/api';
-import { MsalProvider } from '../packages/mgt/dist/commonjs';
+import { MsalProvider } from '../packages/mgt/dist/es6';
 import { Providers, LoginType } from '../packages/mgt-element/dist';
 import { CLIENTID, GETPROVIDER_EVENT, SETPROVIDER_EVENT } from './env';
 
@@ -54,8 +54,8 @@ const SignInPanel = () => {
       {_allow_signin ? (
         <mgt-login />
       ) : (
-        'All components are using mock data - sign in function will be available in a future release'
-      )}
+          'All components are using mock data - sign in function will be available in a future release'
+        )}
     </div>
   );
 };
diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html
@@ -20,15 +20,19 @@
   }
 
   .story-mgt-preview {
-    margin: 0.5em;
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    border: none;
+    background: none;
+    padding: 0;
   }
 
   .story-mgt-preview-wrapper {
     position: relative;
     height: 100%;
     width: 50%;
     float: left;
-    overflow: auto;
     background-color: #ffffff;
   }
 
diff --git a/.storybook/rollup.config.js b/.storybook/rollup.config.js
@@ -0,0 +1,43 @@
+import resolve from 'rollup-plugin-node-resolve';
+import babel from 'rollup-plugin-babel';
+import postcss from 'rollup-plugin-postcss';
+import { terser } from 'rollup-plugin-terser';
+
+const extensions = ['.js'];
+
+const getBabelConfig = isEs5 => {
+  return {
+    plugins: [
+      ['@babel/plugin-proposal-decorators', isEs5 ? { legacy: true } : { decoratorsBeforeExport: true, legacy: false }],
+      ['@babel/proposal-class-properties', { loose: isEs5 }],
+      '@babel/proposal-object-rest-spread'
+    ],
+    include: [
+      'packages/**/*',
+      'node_modules/lit-element/**/*',
+      'node_modules/lit-html/**/*',
+      'node_modules/@microsoft/microsoft-graph-client/lib/es/**/*',
+      'node_modules/msal/lib-es6/**/*'
+    ]
+  };
+};
+
+const es6Bundle = {
+  input: ['./packages/mgt/dist/es6/index.js'],
+  output: {
+    dir: 'assets',
+    entryFileNames: 'mgt.storybook.js',
+    format: 'esm',
+  },
+  plugins: [
+    babel({
+      extensions,
+      ...getBabelConfig(false)
+    }),
+    resolve({ module: true, jsnext: true, extensions }),
+    postcss(),
+    terser({ keep_classnames: true, keep_fnames: true })
+  ]
+};
+
+export default [es6Bundle];
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
   ],
   "scripts": {
     "build": "npm run prettier:check && npm run clean && lerna run build --scope @microsoft/*",
+    "build:compile": "npm run prettier:check && npm run clean && lerna run build:compile --scope @microsoft/*",
     "build:mgt": "cd ./packages/mgt && npm run build",
     "build:mgt-element": "cd ./packages/mgt-element && npm run build",
     "build:mgt-react": "lerna run build --scope @microsoft/mgt-react",
@@ -31,9 +32,10 @@
     "prettier:check": "npm run prettier:base -- --list-different \"packages/**/*.{ts,tsx}\"",
     "prettier:write": "npm run prettier:base -- --write \"packages/**/*.{ts,tsx}\"",
     "storybook": "start-storybook -p 6006 -s assets",
-    "storybook:dev": "npm run build && wca analyze packages --format json --outFile custom-elements.json",
-    "storybook:build": "build-storybook -s assets && cpx .storybook/CNAME storybook-static",
-    "storybook:deploy": "npm run storybook:build && storybook-to-ghpages -e storybook-static"
+    "storybook:dev": "npm run build:compile && npm run storybook:bundle && wca analyze packages --format json --outFile custom-elements.json",
+    "storybook:build": "npm run storybook:dev && build-storybook -s assets && cpx .storybook/CNAME storybook-static",
+    "storybook:deploy": "npm run storybook:build && storybook-to-ghpages -e storybook-static",
+    "storybook:bundle": "rollup -c ./.storybook/rollup.config.js"
   },
   "storybook-deployer": {
     "gitUsername": "@microsoft/mgt",
diff --git a/packages/mgt-element/src/index.ts b/packages/mgt-element/src/index.ts
@@ -23,3 +23,5 @@ export * from './utils/TemplateContext';
 export * from './utils/TemplateHelper';
 export * from './utils/GraphPageIterator';
 export * from './utils/LocalizationHelper';
+export * from './mock/MockProvider';
+export * from './mock/mgt-mock-provider';
diff --git a/stories/samples/templating.stories.js b/stories/samples/templating.stories.js
@@ -371,3 +371,18 @@ export const TeamsMessages = () => html`
   }
 </style>
 `;
+
+export const ChangeBindingSyntax = () => html`
+<mgt-agenda>
+  <template data-type="event">
+    <div>
+      [[event.subject]]
+    </div>
+  </template>
+</mgt-agenda>
+<script>
+  import { TemplateHelper } from '@microsoft/mgt';
+
+  TemplateHelper.setBindingSyntax('[[', ']]');
+</script>
+`;

-Original file line number
+Diff line change
@@ @@ -1,6 +1,7 @@ @@
 dist/
 www/
 lib/
 +assets/*.js
 *~
 *.sw[mnpcod]
Original file line number	Diff line number	Diff line change
`@@ -20,15 +20,19 @@`
`20`	`20`	`}`
`21`	`21`
`22`	`22`	`.story-mgt-preview {`
`23`		`- margin: 0.5em;`
	`23`	`+ height: 100%;`
	`24`	`+ width: 100%;`
	`25`	`+ margin: 0;`
	`26`	`+ border: none;`
	`27`	`+ background: none;`
	`28`	`+ padding: 0;`
`24`	`29`	`}`
`25`	`30`
`26`	`31`	`.story-mgt-preview-wrapper {`
`27`	`32`	`position: relative;`
`28`	`33`	`height: 100%;`
`29`	`34`	`width: 50%;`
`30`	`35`	`float: left;`
`31`		`- overflow: auto;`
`32`	`36`	`background-color: #ffffff;`
`33`	`37`	`}`
`34`	`38`