IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Storybook: Fix asset paths for hosted storybooks (#56319)

Browse Source 
* feat(sass): introduce font-file-path var to define where to load fonts from

* feat(storybook): introduce storybook sass theme styles to set font file paths

* chore(sass): change imports so treated as sass rather than css

* feat(storybook): filter assets so builds dont contain thousands of files
This commit is contained in:
Jack Westbrook 2022-10-05 12:10:29 +02:00 committed by GitHub
parent aa274500cf
commit dcc02a8ebe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 79 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/grafana-ui/.storybook/grafana.dark.scss Normal file
View File

@ -0,0 +1,6 @@
// reset font file paths so storybook loads them based on
// staticDirs defined in packages/grafana-ui/.storybook/main.ts
$font-file-path: './public/fonts';
$fa-font-path: $font-file-path;
@import '../../../public/sass/grafana.dark.scss';

6
packages/grafana-ui/.storybook/grafana.light.scss Normal file
View File

@ -0,0 +1,6 @@
// reset font file paths so storybook loads them based on
// staticDirs defined in packages/grafana-ui/.storybook/main.ts
$font-file-path: './public/fonts';
$fa-font-path: $font-file-path;
@import '../../../public/sass/grafana.light.scss';

30
packages/grafana-ui/.storybook/main.ts
View File

@ -1,4 +1,7 @@
const path = require('path');
import path from 'path';
import type { StorybookConfig } from '@storybook/react/types';
import { getAvailableIcons, IconName } from '../src/types/icon';
import { getIconSubDir } from '../src/components/Icon/utils';
const stories = ['../src/**/*.story.@(tsx|mdx)'];
@ -6,7 +9,19 @@ if (process.env.NODE_ENV !== 'production') {
stories.push('../src/**/*.story.internal.@(tsx|mdx)');
}
const mainConfig = {
// We limit icon paths to only the available icons so publishing
// doesn't require uploading 1000s of unused assets.
const iconPaths = getAvailableIcons()
.filter((iconName) => !iconName.includes('fa'))
.map((iconName) => {
const subDir = getIconSubDir(iconName as IconName, 'default');
return {
from: `../../../public/img/icons/${subDir}/${iconName}.svg`,
to: `/public/img/icons/${subDir}/${iconName}.svg`,
};
});
const mainConfig: StorybookConfig = {
stories,
addons: [
{
@ -67,9 +82,12 @@ const mainConfig = {
fastRefresh: true,
},
staticDirs: [
{ from: '../../../public/fonts', to: '/fonts' },
{ from: '../../../public/img', to: '/public/img' },
{ from: '../../../public/fonts', to: '/public/fonts' },
{ from: '../../../public/img/grafana_text_logo-dark.svg', to: '/public/img/grafana_text_logo-dark.svg' },
{ from: '../../../public/img/grafana_text_logo-light.svg', to: '/public/img/grafana_text_logo-light.svg' },
{ from: '../../../public/img/fav32.png', to: '/public/img/fav32.png' },
{ from: '../../../public/lib', to: '/public/lib' },
...iconPaths,
],
typescript: {
check: true,
@ -82,7 +100,7 @@ const mainConfig = {
savePropValueAsString: true,
},
},
webpackFinal: async (config: any) => {
webpackFinal: async (config) => {
// expose jquery as a global so jquery plugins don't break at runtime.
config.module.rules.push({
test: require.resolve('jquery'),
@ -92,7 +110,7 @@ const mainConfig = {
},
});
// use the raw-loader for SVGS for compatibility with grafana/ui Icon component.
// use the asset module for SVGS for compatibility with grafana/ui Icon component.
config.module.rules.push({
test: /(unicons|mono|custom)[\\/].*\.svg$/,
type: 'asset/source',

4
packages/grafana-ui/.storybook/preview.ts
View File

@ -11,9 +11,9 @@ import '../../../public/vendor/flot/jquery.flot.gauge';
import { withTheme } from '../src/utils/storybook/withTheme';
import { ThemedDocsContainer } from '../src/utils/storybook/ThemedDocsContainer';
// @ts-ignore
import lightTheme from '../../../public/sass/grafana.light.scss';
import lightTheme from './grafana.light.scss';
// @ts-ignore
import darkTheme from '../../../public/sass/grafana.dark.scss';
import darkTheme from './grafana.dark.scss';
import { GrafanaLight, GrafanaDark } from './storybookTheme';
const handleThemeChange = (theme: any) => {

2
packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
View File

@ -101,6 +101,8 @@ $font-family-sans-serif: ${theme.typography.fontFamily};
/* stylelint-disable-next-line string-quotes */
$font-family-monospace: ${theme.typography.fontFamilyMonospace};
$font-file-path: '../fonts' !default;
$font-size-base: ${theme.typography.fontSize}px !default;
$font-size-lg: ${theme.typography.size.lg} !default;

3
packages/grafana-ui/tsconfig.json
View File

@ -12,7 +12,8 @@
// override for storybook which uses ts-node to compile main.ts / preview.ts files.
"ts-node": {
"compilerOptions": {
"isolatedModules": false
"isolatedModules": false,
"module": "commonjs"
}
}
}

2
public/sass/_variables.generated.scss
View File

@ -103,6 +103,8 @@ $font-family-sans-serif: "Roboto", "Helvetica", "Arial", sans-serif;
/* stylelint-disable-next-line string-quotes */
$font-family-monospace: 'Roboto Mono', monospace;
$font-file-path: '../fonts' !default;
$font-size-base: 14px !default;
$font-size-lg: 18px !default;

63
public/sass/base/_fonts.scss
View File

@ -7,7 +7,7 @@
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'),
url(../fonts/roboto/ek4gzZ-GeXAPcSbHtCeQI_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
url(#{$font-file-path}/roboto/ek4gzZ-GeXAPcSbHtCeQI_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
unicode-range: U+0460-052f, U+20b4, U+2de0-2dff, U+A640-A69F;
}
/* cyrillic */
@ -16,7 +16,7 @@
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'),
url(../fonts/roboto/mErvLBYg_cXG3rLvUsKT_fesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
url(#{$font-file-path}/roboto/mErvLBYg_cXG3rLvUsKT_fesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
unicode-range: U+0400-045f, U+0490-0491, U+04b0-04b1, U+2116;
}
/* greek-ext */
@ -25,7 +25,7 @@
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'),
url(../fonts/roboto/-2n2p-_Y08sg57CNWQfKNvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
url(#{$font-file-path}/roboto/-2n2p-_Y08sg57CNWQfKNvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
unicode-range: U+1f00-1fff;
}
/* greek */
@ -34,7 +34,7 @@
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/roboto/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2) format('woff2');
src: url(#{$font-file-path}/roboto/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@ -43,7 +43,7 @@
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'),
url(../fonts/roboto/NdF9MtnOpLzo-noMoG0miPesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
url(#{$font-file-path}/roboto/NdF9MtnOpLzo-noMoG0miPesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
unicode-range: U+0102-0103, U+1ea0-1ef9, U+20ab;
}
/* latin-ext */
@ -52,7 +52,7 @@
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'),
url(../fonts/roboto/Fcx7Wwv8OzT71A3E1XOAjvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
url(#{$font-file-path}/roboto/Fcx7Wwv8OzT71A3E1XOAjvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
unicode-range: U+0100-024f, U+1-1eff, U+20a0-20ab, U+20ad-20cf, U+2c60-2c7f, U+A720-A7FF;
}
/* latin */
@ -61,7 +61,8 @@
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(../fonts/roboto/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2');
src: local('Roboto'), local('Roboto-Regular'),
url(#{$font-file-path}/roboto/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2');
unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02c6, U+02da, U+02dc, U+2000-206f, U+2074, U+20ac, U+2212, U+2215;
}
/* cyrillic-ext */
@ -70,7 +71,7 @@
font-style: normal;
font-weight: 500;
src: local('Roboto Medium'), local('Roboto-Medium'),
url(../fonts/roboto/ZLqKeelYbATG60EpZBSDyxJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
url(#{$font-file-path}/roboto/ZLqKeelYbATG60EpZBSDyxJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
unicode-range: U+0460-052f, U+20b4, U+2de0-2dff, U+A640-A69F;
}
/* cyrillic */
@ -79,7 +80,7 @@
font-style: normal;
font-weight: 500;
src: local('Roboto Medium'), local('Roboto-Medium'),
url(../fonts/roboto/oHi30kwQWvpCWqAhzHcCSBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
url(#{$font-file-path}/roboto/oHi30kwQWvpCWqAhzHcCSBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
unicode-range: U+0400-045f, U+0490-0491, U+04b0-04b1, U+2116;
}
/* greek-ext */
@ -88,7 +89,7 @@
font-style: normal;
font-weight: 500;
src: local('Roboto Medium'), local('Roboto-Medium'),
url(../fonts/roboto/rGvHdJnr2l75qb0YND9NyBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
url(#{$font-file-path}/roboto/rGvHdJnr2l75qb0YND9NyBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
unicode-range: U+1f00-1fff;
}
/* greek */
@ -97,7 +98,7 @@
font-style: normal;
font-weight: 500;
src: local('Roboto Medium'), local('Roboto-Medium'),
url(../fonts/roboto/mx9Uck6uB63VIKFYnEMXrRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
url(#{$font-file-path}/roboto/mx9Uck6uB63VIKFYnEMXrRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
unicode-range: U+0370-03ff;
}
/* vietnamese */
@ -106,7 +107,7 @@
font-style: normal;
font-weight: 500;
src: local('Roboto Medium'), local('Roboto-Medium'),
url(../fonts/roboto/mbmhprMH69Zi6eEPBYVFhRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
url(#{$font-file-path}/roboto/mbmhprMH69Zi6eEPBYVFhRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
unicode-range: U+0102-0103, U+1ea0-1ef9, U+20ab;
}
/* latin-ext */
@ -115,7 +116,7 @@
font-style: normal;
font-weight: 500;
src: local('Roboto Medium'), local('Roboto-Medium'),
url(../fonts/roboto/oOeFwZNlrTefzLYmlVV1UBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
url(#{$font-file-path}/roboto/oOeFwZNlrTefzLYmlVV1UBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
unicode-range: U+0100-024f, U+1-1eff, U+20a0-20ab, U+20ad-20cf, U+2c60-2c7f, U+A720-A7FF;
}
/* latin */
@ -125,7 +126,7 @@
font-style: normal;
font-weight: 500;
src: local('Roboto Medium'), local('Roboto-Medium'),
url(../fonts/roboto/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
url(#{$font-file-path}/roboto/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02c6, U+02da, U+02dc, U+2000-206f, U+2074, U+20ac, U+2212, U+2215;
}
/* cyrillic-ext */
@ -134,7 +135,7 @@
font-style: italic;
font-weight: 400;
src: local('Roboto Italic'), local('Roboto-Italic'),
url(../fonts/roboto/WxrXJa0C3KdtC7lMafG4dRTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
url(#{$font-file-path}/roboto/WxrXJa0C3KdtC7lMafG4dRTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
unicode-range: U+0460-052f, U+20b4, U+2de0-2dff, U+A640-A69F;
}
/* cyrillic */
@ -143,7 +144,7 @@
font-style: italic;
font-weight: 400;
src: local('Roboto Italic'), local('Roboto-Italic'),
url(../fonts/roboto/OpXUqTo0UgQQhGj_SFdLWBTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
url(#{$font-file-path}/roboto/OpXUqTo0UgQQhGj_SFdLWBTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
unicode-range: U+0400-045f, U+0490-0491, U+04b0-04b1, U+2116;
}
/* greek-ext */
@ -152,7 +153,7 @@
font-style: italic;
font-weight: 400;
src: local('Roboto Italic'), local('Roboto-Italic'),
url(../fonts/roboto/1hZf02POANh32k2VkgEoUBTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
url(#{$font-file-path}/roboto/1hZf02POANh32k2VkgEoUBTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
unicode-range: U+1f00-1fff;
}
/* greek */
@ -161,7 +162,7 @@
font-style: italic;
font-weight: 400;
src: local('Roboto Italic'), local('Roboto-Italic'),
url(../fonts/roboto/cDKhRaXnQTOVbaoxwdOr9xTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
url(#{$font-file-path}/roboto/cDKhRaXnQTOVbaoxwdOr9xTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
unicode-range: U+0370-03ff;
}
/* vietnamese */
@ -170,7 +171,7 @@
font-style: italic;
font-weight: 400;
src: local('Roboto Italic'), local('Roboto-Italic'),
url(../fonts/roboto/K23cxWVTrIFD6DJsEVi07RTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
url(#{$font-file-path}/roboto/K23cxWVTrIFD6DJsEVi07RTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
unicode-range: U+0102-0103, U+1ea0-1ef9, U+20ab;
}
/* latin-ext */
@ -179,7 +180,7 @@
font-style: italic;
font-weight: 400;
src: local('Roboto Italic'), local('Roboto-Italic'),
url(../fonts/roboto/vSzulfKSK0LLjjfeaxcREhTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
url(#{$font-file-path}/roboto/vSzulfKSK0LLjjfeaxcREhTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
unicode-range: U+0100-024f, U+1-1eff, U+20a0-20ab, U+20ad-20cf, U+2c60-2c7f, U+A720-A7FF;
}
/* latin */
@ -189,7 +190,7 @@
font-style: italic;
font-weight: 400;
src: local('Roboto Italic'), local('Roboto-Italic'),
url(../fonts/roboto/vPcynSL0qHq_6dX7lKVByfesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
url(#{$font-file-path}/roboto/vPcynSL0qHq_6dX7lKVByfesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02c6, U+02da, U+02dc, U+2000-206f, U+2074, U+20ac, U+2212, U+2215;
}
/* cyrillic-ext */
@ -198,7 +199,7 @@
font-style: italic;
font-weight: 500;
src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
url(../fonts/roboto/OLffGBTaF0XFOW1gnuHF0TTOQ_MqJVwkKsUn0wKzc2I.woff2) format('woff2');
url(#{$font-file-path}/roboto/OLffGBTaF0XFOW1gnuHF0TTOQ_MqJVwkKsUn0wKzc2I.woff2) format('woff2');
unicode-range: U+0460-052f, U+20b4, U+2de0-2dff, U+A640-A69F;
}
/* cyrillic */
@ -207,7 +208,7 @@
font-style: italic;
font-weight: 500;
src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
url(../fonts/roboto/OLffGBTaF0XFOW1gnuHF0TUj_cnvWIuuBMVgbX098Mw.woff2) format('woff2');
url(#{$font-file-path}/roboto/OLffGBTaF0XFOW1gnuHF0TUj_cnvWIuuBMVgbX098Mw.woff2) format('woff2');
unicode-range: U+0400-045f, U+0490-0491, U+04b0-04b1, U+2116;
}
/* greek-ext */
@ -216,7 +217,7 @@
font-style: italic;
font-weight: 500;
src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
url(../fonts/roboto/OLffGBTaF0XFOW1gnuHF0UbcKLIaa1LC45dFaAfauRA.woff2) format('woff2');
url(#{$font-file-path}/roboto/OLffGBTaF0XFOW1gnuHF0UbcKLIaa1LC45dFaAfauRA.woff2) format('woff2');
unicode-range: U+1f00-1fff;
}
/* greek */
@ -225,7 +226,7 @@
font-style: italic;
font-weight: 500;
src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
url(../fonts/roboto/OLffGBTaF0XFOW1gnuHF0Wo_sUJ8uO4YLWRInS22T3Y.woff2) format('woff2');
url(#{$font-file-path}/roboto/OLffGBTaF0XFOW1gnuHF0Wo_sUJ8uO4YLWRInS22T3Y.woff2) format('woff2');
unicode-range: U+0370-03ff;
}
/* vietnamese */
@ -234,7 +235,7 @@
font-style: italic;
font-weight: 500;
src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
url(../fonts/roboto/OLffGBTaF0XFOW1gnuHF0b6up8jxqWt8HVA3mDhkV_0.woff2) format('woff2');
url(#{$font-file-path}/roboto/OLffGBTaF0XFOW1gnuHF0b6up8jxqWt8HVA3mDhkV_0.woff2) format('woff2');
unicode-range: U+0102-0103, U+1ea0-1ef9, U+20ab;
}
/* latin-ext */
@ -243,7 +244,7 @@
font-style: italic;
font-weight: 500;
src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
url(../fonts/roboto/OLffGBTaF0XFOW1gnuHF0SYE0-AqJ3nfInTTiDXDjU4.woff2) format('woff2');
url(#{$font-file-path}/roboto/OLffGBTaF0XFOW1gnuHF0SYE0-AqJ3nfInTTiDXDjU4.woff2) format('woff2');
unicode-range: U+0100-024f, U+1-1eff, U+20a0-20ab, U+20ad-20cf, U+2c60-2c7f, U+A720-A7FF;
}
/* latin */
@ -252,7 +253,7 @@
font-style: italic;
font-weight: 500;
src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
url(../fonts/roboto/OLffGBTaF0XFOW1gnuHF0Y4P5ICox8Kq3LLUNMylGO4.woff2) format('woff2');
url(#{$font-file-path}/roboto/OLffGBTaF0XFOW1gnuHF0Y4P5ICox8Kq3LLUNMylGO4.woff2) format('woff2');
unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02c6, U+02da, U+02dc, U+2000-206f, U+2074, U+20ac, U+2212, U+2215;
}
@ -262,7 +263,8 @@
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/roboto/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vrtSM1J-gEPT5Ese6hmHSh0mQ.woff2) format('woff2');
src: url(#{$font-file-path}/roboto/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vrtSM1J-gEPT5Ese6hmHSh0mQ.woff2)
format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@ -273,7 +275,8 @@
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/roboto/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vrtSM1J-gEPT5Ese6hmHSh0mQ.woff2) format('woff2');
src: url(#{$font-file-path}/roboto/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vrtSM1J-gEPT5Ese6hmHSh0mQ.woff2)
format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

4
public/sass/components/_dashboard_grid.scss
View File

@ -1,5 +1,5 @@
@import 'react-grid-layout/css/styles.css';
@import 'react-resizable/css/styles.css';
@import 'react-grid-layout/css/styles';
@import 'react-resizable/css/styles';
.react-resizable-handle {
// this needs to use visibility and not display none in order not to cause resize flickering