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

* 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

packages/grafana-ui/.storybook/grafana.dark.scss

@@ -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';

packages/grafana-ui/.storybook/grafana.light.scss

@@ -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';

packages/grafana-ui/.storybook/main.ts

@@ -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',

packages/grafana-ui/.storybook/preview.ts

@@ -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) => {

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

@@ -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;

packages/grafana-ui/tsconfig.json

@@ -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"
     }
   }
 }