Merge pull request #1999 from microsoftgraph/docs/add-version-info

docs: adds version information to storybook

Author: gavinbarron

.github/workflows/pr-storybook.yml

@@ -25,10 +25,25 @@ jobs:
           node-version: ${{ matrix.node-version }}
           registry-url: 'https://registry.npmjs.org'
 
-      - name: Build 🛠
+      - name: Install deps 🛠
         run: |
           npm install -g yarn lerna
           yarn
+      - name: Extract tag name
+        shell: bash
+        run: |
+          tag=$(branch=${{ github.event.pull_request.head.ref }}; echo ${branch/\//.})
+          if [[ $tag == next.* ]];
+          then
+            echo "##[set-output name=tag;]$tag"
+          else
+            echo "##[set-output name=tag;]pr.${{ github.event.pull_request.number }}"
+          fi
+        id: extract_tag
+      - run: node scripts/setVersion.js --tag ${{ steps.extract_tag.outputs.tag }}
+
+      - name: Build 🛠
+        run: |
           yarn build
           yarn storybook:build
 

.storybook/main.js

@@ -18,6 +18,7 @@ module.exports = {
   ],
   stories: ['../stories/overview.stories.mdx', '../stories/**/*.@(js|mdx)'],
   addons: [
+    'storybook-version',
     '@storybook/addon-docs'
     // '@storybook/addon-a11y/register',
     // '@storybook/addon-actions/register',

.storybook/manager-head.html

@@ -6,10 +6,15 @@
 </script>
 
 <footer class="storybook-footer">
-  Microsoft Graph Toolkit Playground was founded by Microsoft as a community guided, open source project.
+  Microsoft Graph Toolkit (v<span id="mgt-version"></span>) Playground was founded by Microsoft as a community guided,
+  open source project.
   <a tabindex="-1" href="https://privacy.microsoft.com/en-us/privacystatement">Privacy & cookies</a>
   <a tabindex="-1" href="https://www.microsoft.com/en-us/legal/intellectualproperty/copyright/default">Term of use</a>
 </footer>
+<script type="module">
+  import { PACKAGE_VERSION } from './mgt.storybook.js'
+  document.getElementById('mgt-version').innerText = PACKAGE_VERSION;
+</script>
 
 <script src="https://consentdeliveryfd.azurefd.net/mscc/lib/v2/wcp-consent.js"></script>
 <script src="https://az725175.vo.msecnd.net/scripts/jsll-4.js" type="text/javascript"></script>
@@ -309,11 +314,26 @@
 </style>
 
 <style>
+
+  /* don't show the footer on mobile */
+  @media (max-width: 599px) {
+    .storybook-footer {
+        display: none !important;
+    }
+  }
+
   /* this keeps the storybook body area above footer */
-  #root>div:first-of-type {
-    height: calc(100% - 40px);
+  @media (max-width: 768px) {
+    #root>div:first-of-type {
+      height: calc(100% - 50px);
+    }
   }
 
+  @media (min-width: 769px) {
+    #root>div:first-of-type {
+      height: calc(100% - 40px);
+    }
+  }
   .sidebar-header button {
     display: none !important;
   }
@@ -341,12 +361,6 @@
     color: #717171 !important;
   }
 
-  @media (max-width: 768px) {
-    #root>div:first-of-type {
-      height: calc(100% - 50px);
-    }
-  }
-
   .sidebar-header h1 {
     font-size: 14px;
     font-weight: 700;

package.json

@@ -113,6 +113,7 @@
     "sass": "^1.29.0",
     "shx": "^0.3.3",
     "storybook-addon-web-components-knobs": "^0.3.20",
+    "storybook-version": "^0.1.1",
     "ts-jest": "^26.5.5",
     "tslint": "^6.1.3",
     "tslint-config-prettier": "^1.18.0",

packages/mgt-element/src/index.ts

@@ -27,6 +27,7 @@ export * from './utils/TemplateContext';
 export * from './utils/TemplateHelper';
 export * from './utils/GraphPageIterator';
 export * from './utils/LocalizationHelper';
+export { PACKAGE_VERSION } from './utils/version';
 
 export * from './mock/MockProvider';
 export * from './mock/mgt-mock-provider';

scripts/setVersion.js

@@ -1,9 +1,9 @@
-var child_process = require('child_process')
+var child_process = require('child_process');
 var path = require('path');
 var fs = require('fs');
 var project = require('../package.json');
 
-const ignoreDirs = ['node_modules'];
+const ignoreDirs = ['node_modules', 'samples'];
 
 const getFiles = (filter, startPath = 'packages') => {
   let results = [];
@@ -25,30 +25,30 @@ const getFiles = (filter, startPath = 'packages') => {
   }
 
   return results;
-}
+};
 
 const updateMgtDependencyVersion = (packages, version) => {
   for (let package of packages) {
-    console.log(`updating package ${package} with version ${version}`)
+    console.log(`updating package ${package} with version ${version}`);
     const data = fs.readFileSync(package, 'utf8');
 
     var result = data.replace(/"(@microsoft\/mgt.*)": "(\*)"/g, `"$1": "${version}"`);
     result = result.replace(/"version": "(.*)"/g, `"version": "${version}"`);
 
     fs.writeFileSync(package, result, 'utf8');
   }
-}
+};
 
 const updateSpfxSolutionVersion = (solutions, version) => {
   for (let solution of solutions) {
-    console.log(`updating spfx solution ${solution} with version ${version}`)
+    console.log(`updating spfx solution ${solution} with version ${version}`);
     const data = fs.readFileSync(solution, 'utf8');
 
     var result = data.replace(/"version": "(.*)"/g, `"version": "${version}.0"`);
 
     fs.writeFileSync(solution, result, 'utf8');
   }
-}
+};
 
 let version = project.version;
 
@@ -83,8 +83,8 @@ if (process.argv.length > 2) {
       return;
   }
 }
-
-const packages = getFiles('package.json');
+// include update to the root package.json
+const packages = getFiles('package.json', '.');
 updateMgtDependencyVersion(packages, version);
 
 const spfxSolutions = getFiles('package-solution.json');

stories/components/agenda/agenda.a.js

@@ -7,8 +7,12 @@
 
 import { html } from 'lit-element';
 import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon';
+import { versionInfo } from '../../versionInfo';
 
 export default {
+  parameters: {
+    version: versionInfo
+  },
   title: 'Components / mgt-agenda',
   component: 'mgt-agenda',
   decorators: [withCodeEditor]

stories/components/agenda/agenda.properties.js

@@ -7,8 +7,12 @@
 
 import { html } from 'lit-element';
 import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon';
+import { versionInfo } from '../../versionInfo';
 
 export default {
+  parameters: {
+    version: versionInfo
+  },
   title: 'Components / mgt-agenda / Properties',
   component: 'mgt-agenda',
   decorators: [withCodeEditor]
@@ -37,4 +41,3 @@ export const getEventsForNextWeek = () => html`
 export const preferredTimezone = () => html`
   <mgt-agenda preferred-timezone="Europe/Paris"></mgt-agenda>
 `;
-

stories/components/agenda/agenda.style.js

@@ -7,8 +7,12 @@
 
 import { html } from 'lit-element';
 import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon';
+import { versionInfo } from '../../versionInfo';
 
 export default {
+  parameters: {
+    version: versionInfo
+  },
   title: 'Components / mgt-agenda / Style',
   component: 'mgt-agenda',
   decorators: [withCodeEditor]

stories/components/agenda/agenda.templating.js

@@ -7,8 +7,12 @@
 
 import { html } from 'lit-element';
 import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon';
+import { versionInfo } from '../../versionInfo';
 
 export default {
+  parameters: {
+    version: versionInfo
+  },
   title: 'Components / mgt-agenda / Templating',
   component: 'mgt-agenda',
   decorators: [withCodeEditor]
@@ -261,4 +265,3 @@ export const header = () => html`
 	</template>
 </mgt-agenda>
 `;
-