docs: storybook performance improvements + do not show visual folder …

…on documentation website (#1152)
SAP · Aug 10, 2020 · 6f65e47 · 6f65e47
1 parent 6235d27
commit 6f65e47
Show file tree

Hide file tree

Showing 9 changed files with 120 additions and 63 deletions.
diff --git a/.gitignore b/.gitignore
@@ -12,8 +12,6 @@ storybook-testing/__image_snapshots__/__diff_output__/*
 src/Docs/
 
 # documentation website assets
-.storybook/static/*.woff
-.storybook/static/*.css
 storybook-static
 
 #index files

diff --git a/.storybook/custom/custom.scss b/.storybook/custom/custom.scss
@@ -71,6 +71,7 @@ $heading-toc-spacer: $docs-hd-tp + $docs-hd-bp + $docs-hd-ch + $docs-tm;
 
 /* header */
 .fddocs-header {
+    -webkit-box-sizing: border-box;
     box-sizing: border-box;
     padding: $docs-hd-tp 0 $docs-hd-bp 0;
     position: fixed;
@@ -79,22 +80,38 @@ $heading-toc-spacer: $docs-hd-tp + $docs-hd-bp + $docs-hd-ch + $docs-tm;
     width: 100%;
     color: #404040;
     background-color: #fff;
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
     justify-content: space-between;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
     align-items: center;
     border-bottom: 2px solid #d7dbde;
     z-index: 10;
 
     &--left {
+        display: -webkit-box;
+        display: -ms-flexbox;
         display: flex;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
         align-items: center;
         justify-self: start;
+        -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
         justify-content: space-between;
     }
 
     &--right {
         justify-self: end;
+        display: -webkit-box;
+        display: -ms-flexbox;
         display: flex;
+        -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
         justify-content: space-between;
     }
 
@@ -123,16 +140,24 @@ $heading-toc-spacer: $docs-hd-tp + $docs-hd-bp + $docs-hd-ch + $docs-tm;
     padding: 16px 0;
     font-size: 14px;
     line-height: 1.33;
+    display: -ms-grid;
     display: grid;
+    -ms-grid-columns: auto auto;
     grid-template-columns: auto auto;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
     align-items: center;
     border-top: 2px solid #d7dbde;
     color: #404040;
 
     &__logo {
         margin-right: 16px;
         min-width: 120px;
+        display: -webkit-box;
+        display: -ms-flexbox;
         display: flex;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
         align-items: center;
     }
 
@@ -148,15 +173,25 @@ $heading-toc-spacer: $docs-hd-tp + $docs-hd-bp + $docs-hd-ch + $docs-tm;
     }
 
     &--left {
+        display: -webkit-box;
+        display: -ms-flexbox;
         display: flex;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
         align-items: center;
         justify-self: start;
+        -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
         justify-content: space-between;
     }
 
     &--right {
         justify-self: end;
+        display: -webkit-box;
+        display: -ms-flexbox;
         display: flex;
+        -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
         justify-content: space-between;
 
         a {
@@ -173,9 +208,18 @@ $heading-toc-spacer: $docs-hd-tp + $docs-hd-bp + $docs-hd-ch + $docs-tm;
 
 /* community social links */
 .fddocs-community {
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: row;
     flex-direction: row;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
     justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
     align-items: center;
     border-top: 2px solid #d7dbde;
     color: #404040;
@@ -218,8 +262,11 @@ $heading-toc-spacer: $docs-hd-tp + $docs-hd-bp + $docs-hd-ch + $docs-tm;
 
 /* story example layout containers */
 .fddocs-container {
+    display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
     -ms-flex-direction: row;
     flex-direction: row;
     -ms-flex-wrap: wrap;
@@ -230,6 +277,7 @@ $heading-toc-spacer: $docs-hd-tp + $docs-hd-bp + $docs-hd-ch + $docs-tm;
     padding: 10px 10px;
 
     &--break {
+        -ms-flex-preferred-size: 100%;
         flex-basis: 100%;
         height: 0;
         border-bottom: 10px solid transparent;

diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,7 +1,12 @@
 const path = require('path');
+const { merge } = require('webpack-merge');
+
+const maxAssetSize = 1024 * 1024;
+
+const includedStories = process.env.STORYBOOK_ENV === 'docs' ? '(stories)' : '(stories|visual)';
 
 module.exports = {
-    stories: ['../src/Docs/introduction.stories.mdx', '../src/**/*.@(stories|visual).js'],
+    stories: ['../src/Docs/introduction.stories.mdx', `../src/**/*.@${includedStories}.js`],
 
     addons: [
         '@storybook/addon-knobs/register',
@@ -27,6 +32,19 @@ module.exports = {
             include: path.resolve(__dirname, '../'),
           });
 
-        return config;
+        return merge(config, {
+            optimization: {
+                splitChunks: {
+                    chunks: 'all',
+                    minSize: 30 * 1024,
+                    maxSize: maxAssetSize,
+                },
+                runtimeChunk: true,
+              },
+              performance: {
+                hints: 'warning',
+                maxAssetSize: maxAssetSize
+              }
+        });
     }
 };
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -3,28 +3,28 @@
 <style type="text/css">
 @font-face {
     font-family: '72';
-    src: url('./72-Regular.woff') format('woff');
+    src: url('./theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Regular.woff') format('woff');
     font-weight: normal;
     font-style: normal;
 }
 
 @font-face {
     font-family: '72';
-    src: url('./72-Light.woff') format('woff');
+    src: url('./theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Light.woff') format('woff');
     font-weight: 300;
     font-style: normal;
 }
 
 @font-face {
     font-family: '72';
-    src: url('./72-Bold.woff') format('woff');
+    src: url('./theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Bold.woff') format('woff');
     font-weight: 700;
     font-style: normal;
 }
 
 @font-face {
     font-family: 'SAP-icons';
-    src: url('./SAP-icons.woff') format('woff');
+    src: url('./theming-base-content/content/Base/baseLib/sap_fiori_3/fonts/SAP-icons.woff') format('woff');
     font-weight: normal;
     font-style: normal;
 }

diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -9,33 +9,33 @@ import { addDecorator, addParameters } from '@storybook/react';
 
 addParameters({
     options: {
-        showRoots: true,
+        showRoots: false,
         theme: fundamentals
     },
     cssresources: [
         {
             id: 'css_variables',
-            code: '<link rel="stylesheet" type="text/css" href="./css_variables.css"></link>',
+            code: '<link rel="stylesheet" type="text/css" href="./theming-base-content/content/Base/baseLib/sap_fiori_3/css_variables.css"></link>',
             picked: true
         },
         {
             id: 'dark_css_variables',
-            code: '<link rel="stylesheet" type="text/css" href="./dark_css_variables.css"></link>',
+            code: '<link rel="stylesheet" type="text/css" href="./theming-base-content/content/Base/baseLib/sap_fiori_3_dark/css_variables.css"></link>',
             picked: false
         },
         {
             id: 'light_dark_css_variables',
-            code: '<link rel="stylesheet" type="text/css" href="./light_dark_css_variables.css"></link>',
+            code: '<link rel="stylesheet" type="text/css" href="./theming-base-content/content/Base/baseLib/sap_fiori_3_light_dark/css_variables.css"></link>',
             picked: false
         },
         {
             id: 'HCB_css_variables',
-            code: '<link rel="stylesheet" type="text/css" href="./HCB_css_variables.css"></link>',
+            code: '<link rel="stylesheet" type="text/css" href="./theming-base-content/content/Base/baseLib/sap_fiori_3_hcb/css_variables.css"></link>',
             picked: false
         },
         {
             id: 'HCW_css_variables',
-            code: '<link rel="stylesheet" type="text/css" href="./HCW_css_variables.css"></link>',
+            code: '<link rel="stylesheet" type="text/css" href="./theming-base-content/content/Base/baseLib/sap_fiori_3_hcw/css_variables.css"></link>',
             picked: false
         }
     ],

diff --git a/.storybook/static/logo_text.png b/.storybook/static/logo_text.png
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,9 +33,9 @@
     "size:debug": "npm run build && size-limit --why",
     "start": "npm run storybook",
     "std-version": "standard-version -m \"chore(release): version %s build ${TRAVIS_BUILD_NUMBER} [ci skip]\"",
-    "storybook": "npm run build:storybook && start-storybook -p 12123 -s .storybook/static/",
+    "storybook": "npm run build:storybook && start-storybook -p 12123 -s .storybook/static/,node_modules/@sap-theming",
     "storybook:ci": "npm run storybook -- --ci --quiet",
-    "storybook:static": "rm -rf storybook-static && npm run build:storybook && build-storybook -c .storybook -o storybook-static -s .storybook/static/ --docs",
+    "storybook:static": "rm -rf storybook-static && npm run build:storybook && STORYBOOK_ENV=docs build-storybook -c .storybook -o storybook-static -s .storybook/static/,node_modules/@sap-theming --docs",
     "test:coverage:watch": "npm run test:coverage -- --watch",
     "test:coverage": "npm run test:dev -- --coverage",
     "test:coveralls": "cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js || echo -e \"Coveralls failed.\"",
@@ -138,7 +138,8 @@
     "stylelint": "^13.5.0",
     "stylelint-config-prettier": "^8.0.0",
     "stylelint-prettier": "^1.1.2",
-    "tocbot": "^4.11.1"
+    "tocbot": "^4.11.1",
+    "webpack-merge": "^5.1.1"
   },
   "peerDependencies": {
     "react": "^16.8.0",

diff --git a/scripts/copy-assets.js b/scripts/copy-assets.js
@@ -1,19 +1,5 @@
 const fs = require('fs-extra');
 
-// All files for Storybook documentation website
-// fonts and icons
-const fontPath = require.resolve('@sap-theming/theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Regular.woff');
-const fontPathLight = require.resolve('@sap-theming/theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Light.woff');
-const fontPathBold = require.resolve('@sap-theming/theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Bold.woff');
-const iconPath = require.resolve('@sap-theming/theming-base-content/content/Base/baseLib/sap_fiori_3/fonts/SAP-icons.woff');
-
-const defaultCssVariables = require.resolve('@sap-theming/theming-base-content/content/Base/baseLib/sap_fiori_3/css_variables.css');
-const darkCssVariables = require.resolve('@sap-theming/theming-base-content/content/Base/baseLib/sap_fiori_3_dark/css_variables.css');
-const lightDarkCssVariables = require.resolve('@sap-theming/theming-base-content/content/Base/baseLib/sap_fiori_3_light_dark/css_variables.css');
-const HCBCssVariables = require.resolve('@sap-theming/theming-base-content/content/Base/baseLib/sap_fiori_3_hcb/css_variables.css');
-const HCWCssVariables = require.resolve('@sap-theming/theming-base-content/content/Base/baseLib/sap_fiori_3_hcw/css_variables.css');
-
-
 const introductionPath = 'src/Docs/introduction.stories.mdx';
 
 // if readme copy already exists, remove it
@@ -52,35 +38,3 @@ import { Meta } from \'@storybook/addon-docs/blocks\';\n
     });
 
 });
-
-if (!fs.existsSync('.storybook/static')) {
-    fs.mkdirSync('.storybook/static');
-}
-
-fs.copyFile(fontPath, '.storybook/static/72-Regular.woff', (err) => {
-    if (err) throw err;
-});
-fs.copyFile(fontPathLight, '.storybook/static/72-Light.woff', (err) => {
-    if (err) throw err;
-});
-fs.copyFile(fontPathBold, '.storybook/static/72-Bold.woff', (err) => {
-    if (err) throw err;
-});
-fs.copyFile(iconPath, '.storybook/static/SAP-icons.woff', (err) => {
-    if (err) throw err;
-});
-fs.copyFile(defaultCssVariables, '.storybook/static/css_variables.css', (err) => {
-    if (err) throw err;
-});
-fs.copyFile(darkCssVariables, '.storybook/static/dark_css_variables.css', (err) => {
-    if (err) throw err;
-});
-fs.copyFile(lightDarkCssVariables, '.storybook/static/light_dark_css_variables.css', (err) => {
-    if (err) throw err;
-});
-fs.copyFile(HCBCssVariables, '.storybook/static/HCB_css_variables.css', (err) => {
-    if (err) throw err;
-});
-fs.copyFile(HCWCssVariables, '.storybook/static/HCW_css_variables.css', (err) => {
-    if (err) throw err;
-});