Skip to content

Commit 6f65e47

Browse files
jbadanjbadan
authored
docs: storybook performance improvements + do not show visual folder on documentation website (#1152)
1 parent 6235d27 commit 6f65e47

File tree

9 files changed

+120
-63
lines changed

9 files changed

+120
-63
lines changed

‎.gitignore‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,6 @@ storybook-testing/__image_snapshots__/__diff_output__/*
1212
src/Docs/
1313

1414
# documentation website assets
15-
.storybook/static/*.woff
16-
.storybook/static/*.css
1715
storybook-static
1816

1917
#index files

‎.storybook/custom/custom.scss‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ $heading-toc-spacer: $docs-hd-tp + $docs-hd-bp + $docs-hd-ch + $docs-tm;
7171

7272
/* header */
7373
.fddocs-header {
74+
-webkit-box-sizing: border-box;
7475
box-sizing: border-box;
7576
padding: $docs-hd-tp 0 $docs-hd-bp 0;
7677
position: fixed;
@@ -79,22 +80,38 @@ $heading-toc-spacer: $docs-hd-tp + $docs-hd-bp + $docs-hd-ch + $docs-tm;
7980
width: 100%;
8081
color: #404040;
8182
background-color: #fff;
83+
display: -webkit-box;
84+
display: -ms-flexbox;
8285
display: flex;
86+
-webkit-box-pack: justify;
87+
-ms-flex-pack: justify;
8388
justify-content: space-between;
89+
-webkit-box-align: center;
90+
-ms-flex-align: center;
8491
align-items: center;
8592
border-bottom: 2px solid #d7dbde;
8693
z-index: 10;
8794

8895
&--left {
96+
display: -webkit-box;
97+
display: -ms-flexbox;
8998
display: flex;
99+
-webkit-box-align: center;
100+
-ms-flex-align: center;
90101
align-items: center;
91102
justify-self: start;
103+
-webkit-box-pack: justify;
104+
-ms-flex-pack: justify;
92105
justify-content: space-between;
93106
}
94107

95108
&--right {
96109
justify-self: end;
110+
display: -webkit-box;
111+
display: -ms-flexbox;
97112
display: flex;
113+
-webkit-box-pack: justify;
114+
-ms-flex-pack: justify;
98115
justify-content: space-between;
99116
}
100117

@@ -123,16 +140,24 @@ $heading-toc-spacer: $docs-hd-tp + $docs-hd-bp + $docs-hd-ch + $docs-tm;
123140
padding: 16px 0;
124141
font-size: 14px;
125142
line-height: 1.33;
143+
display: -ms-grid;
126144
display: grid;
145+
-ms-grid-columns: auto auto;
127146
grid-template-columns: auto auto;
147+
-webkit-box-align: center;
148+
-ms-flex-align: center;
128149
align-items: center;
129150
border-top: 2px solid #d7dbde;
130151
color: #404040;
131152

132153
&__logo {
133154
margin-right: 16px;
134155
min-width: 120px;
156+
display: -webkit-box;
157+
display: -ms-flexbox;
135158
display: flex;
159+
-webkit-box-align: center;
160+
-ms-flex-align: center;
136161
align-items: center;
137162
}
138163

@@ -148,15 +173,25 @@ $heading-toc-spacer: $docs-hd-tp + $docs-hd-bp + $docs-hd-ch + $docs-tm;
148173
}
149174

150175
&--left {
176+
display: -webkit-box;
177+
display: -ms-flexbox;
151178
display: flex;
179+
-webkit-box-align: center;
180+
-ms-flex-align: center;
152181
align-items: center;
153182
justify-self: start;
183+
-webkit-box-pack: justify;
184+
-ms-flex-pack: justify;
154185
justify-content: space-between;
155186
}
156187

157188
&--right {
158189
justify-self: end;
190+
display: -webkit-box;
191+
display: -ms-flexbox;
159192
display: flex;
193+
-webkit-box-pack: justify;
194+
-ms-flex-pack: justify;
160195
justify-content: space-between;
161196

162197
a {
@@ -173,9 +208,18 @@ $heading-toc-spacer: $docs-hd-tp + $docs-hd-bp + $docs-hd-ch + $docs-tm;
173208

174209
/* community social links */
175210
.fddocs-community {
211+
display: -webkit-box;
212+
display: -ms-flexbox;
176213
display: flex;
214+
-webkit-box-orient: horizontal;
215+
-webkit-box-direction: normal;
216+
-ms-flex-direction: row;
177217
flex-direction: row;
218+
-webkit-box-pack: center;
219+
-ms-flex-pack: center;
178220
justify-content: center;
221+
-webkit-box-align: center;
222+
-ms-flex-align: center;
179223
align-items: center;
180224
border-top: 2px solid #d7dbde;
181225
color: #404040;
@@ -218,8 +262,11 @@ $heading-toc-spacer: $docs-hd-tp + $docs-hd-bp + $docs-hd-ch + $docs-tm;
218262

219263
/* story example layout containers */
220264
.fddocs-container {
265+
display: -webkit-box;
221266
display: -ms-flexbox;
222267
display: flex;
268+
-webkit-box-orient: horizontal;
269+
-webkit-box-direction: normal;
223270
-ms-flex-direction: row;
224271
flex-direction: row;
225272
-ms-flex-wrap: wrap;
@@ -230,6 +277,7 @@ $heading-toc-spacer: $docs-hd-tp + $docs-hd-bp + $docs-hd-ch + $docs-tm;
230277
padding: 10px 10px;
231278

232279
&--break {
280+
-ms-flex-preferred-size: 100%;
233281
flex-basis: 100%;
234282
height: 0;
235283
border-bottom: 10px solid transparent;

‎.storybook/main.js‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
const path = require('path');
2+
const { merge } = require('webpack-merge');
3+
4+
const maxAssetSize = 1024 * 1024;
5+
6+
const includedStories = process.env.STORYBOOK_ENV === 'docs' ? '(stories)' : '(stories|visual)';
27

38
module.exports = {
4-
stories: ['../src/Docs/introduction.stories.mdx', '../src/**/*.@(stories|visual).js'],
9+
stories: ['../src/Docs/introduction.stories.mdx', `../src/**/*.@${includedStories}.js`],
510

611
addons: [
712
'@storybook/addon-knobs/register',
@@ -27,6 +32,19 @@ module.exports = {
2732
include: path.resolve(__dirname, '../'),
2833
});
2934

30-
return config;
35+
return merge(config, {
36+
optimization: {
37+
splitChunks: {
38+
chunks: 'all',
39+
minSize: 30 * 1024,
40+
maxSize: maxAssetSize,
41+
},
42+
runtimeChunk: true,
43+
},
44+
performance: {
45+
hints: 'warning',
46+
maxAssetSize: maxAssetSize
47+
}
48+
});
3149
}
3250
};

‎.storybook/preview-head.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,28 +3,28 @@
33
<style type="text/css">
44
@font-face {
55
font-family: '72';
6-
src: url('./72-Regular.woff') format('woff');
6+
src: url('./theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Regular.woff') format('woff');
77
font-weight: normal;
88
font-style: normal;
99
}
1010

1111
@font-face {
1212
font-family: '72';
13-
src: url('./72-Light.woff') format('woff');
13+
src: url('./theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Light.woff') format('woff');
1414
font-weight: 300;
1515
font-style: normal;
1616
}
1717

1818
@font-face {
1919
font-family: '72';
20-
src: url('./72-Bold.woff') format('woff');
20+
src: url('./theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Bold.woff') format('woff');
2121
font-weight: 700;
2222
font-style: normal;
2323
}
2424

2525
@font-face {
2626
font-family: 'SAP-icons';
27-
src: url('./SAP-icons.woff') format('woff');
27+
src: url('./theming-base-content/content/Base/baseLib/sap_fiori_3/fonts/SAP-icons.woff') format('woff');
2828
font-weight: normal;
2929
font-style: normal;
3030
}

‎.storybook/preview.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,33 +9,33 @@ import { addDecorator, addParameters } from '@storybook/react';
99

1010
addParameters({
1111
options: {
12-
showRoots: true,
12+
showRoots: false,
1313
theme: fundamentals
1414
},
1515
cssresources: [
1616
{
1717
id: 'css_variables',
18-
code: '<link rel="stylesheet" type="text/css" href="./css_variables.css"></link>',
18+
code: '<link rel="stylesheet" type="text/css" href="./theming-base-content/content/Base/baseLib/sap_fiori_3/css_variables.css"></link>',
1919
picked: true
2020
},
2121
{
2222
id: 'dark_css_variables',
23-
code: '<link rel="stylesheet" type="text/css" href="./dark_css_variables.css"></link>',
23+
code: '<link rel="stylesheet" type="text/css" href="./theming-base-content/content/Base/baseLib/sap_fiori_3_dark/css_variables.css"></link>',
2424
picked: false
2525
},
2626
{
2727
id: 'light_dark_css_variables',
28-
code: '<link rel="stylesheet" type="text/css" href="./light_dark_css_variables.css"></link>',
28+
code: '<link rel="stylesheet" type="text/css" href="./theming-base-content/content/Base/baseLib/sap_fiori_3_light_dark/css_variables.css"></link>',
2929
picked: false
3030
},
3131
{
3232
id: 'HCB_css_variables',
33-
code: '<link rel="stylesheet" type="text/css" href="./HCB_css_variables.css"></link>',
33+
code: '<link rel="stylesheet" type="text/css" href="./theming-base-content/content/Base/baseLib/sap_fiori_3_hcb/css_variables.css"></link>',
3434
picked: false
3535
},
3636
{
3737
id: 'HCW_css_variables',
38-
code: '<link rel="stylesheet" type="text/css" href="./HCW_css_variables.css"></link>',
38+
code: '<link rel="stylesheet" type="text/css" href="./theming-base-content/content/Base/baseLib/sap_fiori_3_hcw/css_variables.css"></link>',
3939
picked: false
4040
}
4141
],

‎.storybook/static/logo_text.png‎

-56.7 KB
Loading

‎package-lock.json‎

Lines changed: 38 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,9 @@
3333
"size:debug": "npm run build && size-limit --why",
3434
"start": "npm run storybook",
3535
"std-version": "standard-version -m \"chore(release): version %s build ${TRAVIS_BUILD_NUMBER} [ci skip]\"",
36-
"storybook": "npm run build:storybook && start-storybook -p 12123 -s .storybook/static/",
36+
"storybook": "npm run build:storybook && start-storybook -p 12123 -s .storybook/static/,node_modules/@sap-theming",
3737
"storybook:ci": "npm run storybook -- --ci --quiet",
38-
"storybook:static": "rm -rf storybook-static && npm run build:storybook && build-storybook -c .storybook -o storybook-static -s .storybook/static/ --docs",
38+
"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",
3939
"test:coverage:watch": "npm run test:coverage -- --watch",
4040
"test:coverage": "npm run test:dev -- --coverage",
4141
"test:coveralls": "cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js || echo -e \"Coveralls failed.\"",
@@ -138,7 +138,8 @@
138138
"stylelint": "^13.5.0",
139139
"stylelint-config-prettier": "^8.0.0",
140140
"stylelint-prettier": "^1.1.2",
141-
"tocbot": "^4.11.1"
141+
"tocbot": "^4.11.1",
142+
"webpack-merge": "^5.1.1"
142143
},
143144
"peerDependencies": {
144145
"react": "^16.8.0",

‎scripts/copy-assets.js‎

Lines changed: 0 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,5 @@
11
const fs = require('fs-extra');
22

3-
// All files for Storybook documentation website
4-
// fonts and icons
5-
const fontPath = require.resolve('@sap-theming/theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Regular.woff');
6-
const fontPathLight = require.resolve('@sap-theming/theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Light.woff');
7-
const fontPathBold = require.resolve('@sap-theming/theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Bold.woff');
8-
const iconPath = require.resolve('@sap-theming/theming-base-content/content/Base/baseLib/sap_fiori_3/fonts/SAP-icons.woff');
9-
10-
const defaultCssVariables = require.resolve('@sap-theming/theming-base-content/content/Base/baseLib/sap_fiori_3/css_variables.css');
11-
const darkCssVariables = require.resolve('@sap-theming/theming-base-content/content/Base/baseLib/sap_fiori_3_dark/css_variables.css');
12-
const lightDarkCssVariables = require.resolve('@sap-theming/theming-base-content/content/Base/baseLib/sap_fiori_3_light_dark/css_variables.css');
13-
const HCBCssVariables = require.resolve('@sap-theming/theming-base-content/content/Base/baseLib/sap_fiori_3_hcb/css_variables.css');
14-
const HCWCssVariables = require.resolve('@sap-theming/theming-base-content/content/Base/baseLib/sap_fiori_3_hcw/css_variables.css');
15-
16-
173
const introductionPath = 'src/Docs/introduction.stories.mdx';
184

195
// if readme copy already exists, remove it
@@ -52,35 +38,3 @@ import { Meta } from \'@storybook/addon-docs/blocks\';\n
5238
});
5339

5440
});
55-
56-
if (!fs.existsSync('.storybook/static')) {
57-
fs.mkdirSync('.storybook/static');
58-
}
59-
60-
fs.copyFile(fontPath, '.storybook/static/72-Regular.woff', (err) => {
61-
if (err) throw err;
62-
});
63-
fs.copyFile(fontPathLight, '.storybook/static/72-Light.woff', (err) => {
64-
if (err) throw err;
65-
});
66-
fs.copyFile(fontPathBold, '.storybook/static/72-Bold.woff', (err) => {
67-
if (err) throw err;
68-
});
69-
fs.copyFile(iconPath, '.storybook/static/SAP-icons.woff', (err) => {
70-
if (err) throw err;
71-
});
72-
fs.copyFile(defaultCssVariables, '.storybook/static/css_variables.css', (err) => {
73-
if (err) throw err;
74-
});
75-
fs.copyFile(darkCssVariables, '.storybook/static/dark_css_variables.css', (err) => {
76-
if (err) throw err;
77-
});
78-
fs.copyFile(lightDarkCssVariables, '.storybook/static/light_dark_css_variables.css', (err) => {
79-
if (err) throw err;
80-
});
81-
fs.copyFile(HCBCssVariables, '.storybook/static/HCB_css_variables.css', (err) => {
82-
if (err) throw err;
83-
});
84-
fs.copyFile(HCWCssVariables, '.storybook/static/HCW_css_variables.css', (err) => {
85-
if (err) throw err;
86-
});

0 commit comments

Comments
 (0)