frontend: Upgrade storybook setup

Signed-off-by: Oleksandr Dubenko <oldubenko@microsoft.com>
headlamp-k8s · Aug 8, 2024 · 956be60 · 956be60
1 parent c9e1a6e
commit 956be60
Show file tree

Hide file tree

Showing 20 changed files with 5,258 additions and 8,387 deletions.
diff --git a/frontend/.storybook/HeadlampTheme.js b/frontend/.storybook/HeadlampTheme.js
@@ -1,12 +1,14 @@
 // https://storybook.js.org/docs/react/configure/theming#create-a-theme-quickstart
 //  To workaround a bug at time of writing, where theme is not refreshed,
 //  you may need to `npm run storybook --no-manager-cache`
-import { create } from '@storybook/theming';
+import { create } from '@storybook/theming/create';
 import logoUrl from '../../docs/headlamp_light.svg';
 
 export default create({
   base: 'light',
   brandTitle: 'Headlamp Kubernetes Web UI dashboard',
   brandUrl: 'https://headlamp.dev/docs/latest/development/',
   brandImage: logoUrl,
+  fontBase: '"Overpass", sans-serif',
+  fontCode: '"Overpass Mono", monospace',
 });
diff --git a/frontend/.storybook/main.js b/frontend/.storybook/main.js
diff --git a/frontend/.storybook/main.ts b/frontend/.storybook/main.ts
@@ -0,0 +1,22 @@
+import { StorybookConfig } from '@storybook/react';
+
+export default {
+  framework: '@storybook/react-vite',
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+
+  core: {
+    disableTelemetry: true,
+  },
+
+  docs: {},
+
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
+} satisfies StorybookConfig;
diff --git a/frontend/.storybook/manager.js b/frontend/.storybook/manager.js
@@ -1,4 +1,4 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
 import theme from './HeadlampTheme';
 
 addons.setConfig({

diff --git a/frontend/.storybook/preview.tsx b/frontend/.storybook/preview.tsx
@@ -1,50 +1,32 @@
 import React from 'react';
 import themesConf from '../src/lib/themes';
-import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
+import { ThemeProvider } from '@mui/material/styles';
 import { initialize, mswDecorator } from 'msw-storybook-addon';
 import { rest } from 'msw';
+import '../src/index.css';
 
 // https://github.com/mswjs/msw-storybook-addon
 initialize();
 
-const darkTheme = themesConf['dark'];
-const lightTheme = themesConf['light'];
-
 const withThemeProvider = (Story, context) => {
-  const backgroundColor = context.globals.backgrounds ? context.globals.backgrounds.value : 'light';
-  const theme = backgroundColor !== 'dark' ? lightTheme : darkTheme;
+  const theme = themesConf[context.globals.backgrounds?.value === '#1f1f1f' ? 'dark' : 'light'];
 
   const ourThemeProvider = (
-    <StyledEngineProvider injectFirst>
-      <ThemeProvider theme={theme}>
-        <Story {...context} />
-      </ThemeProvider>
-    </StyledEngineProvider>
+    <ThemeProvider theme={theme}>
+      <Story {...context} />
+    </ThemeProvider>
   );
   return ourThemeProvider;
 };
 export const decorators = [withThemeProvider, mswDecorator];
 
-export const globalTypes = {
-  theme: {
-    name: 'Theme',
-    description: 'Global theme for components',
-    defaultValue: 'light',
-    toolbar: {
-      icon: 'circlehollow',
-      items: ['light', 'dark'],
-    },
-  },
-};
-
 export const parameters = {
   backgrounds: {
     values: [
-      { name: 'light', value: 'light' },
-      { name: 'dark', value: 'dark' },
+      { name: 'light', value: '#FFF' },
+      { name: 'dark', value: '#1f1f1f' },
     ],
   },
-  actions: { argTypesRegex: '^on[A-Z].*' },
 
   // https://github.com/mswjs/msw-storybook-addon#composing-request-handlers
   msw: {
@@ -79,3 +61,4 @@ export const parameters = {
     ],
   },
 };
+export const tags = ['autodocs', 'autodocs'];
diff --git a/frontend/index.html b/frontend/index.html
@@ -11,57 +11,6 @@
     <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
     <meta name="msapplication-TileColor" content="#fff" />
     <meta name="description" content="Headlamp: Kubernetes Web UI" />
-    <!-- Custom font -->
-    <style type="text/css">
-      /* cyrillic-ext */
-      @font-face {
-        font-family: 'Overpass';
-        font-style: normal;
-        font-weight: 400;
-        font-display: swap;
-        src: url(/fonts/overpass/cyrillic-ext.woff2) format('woff2');
-        unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-      }
-      /* cyrillic */
-      @font-face {
-        font-family: 'Overpass';
-        font-style: normal;
-        font-weight: 400;
-        font-display: swap;
-        src: url(/fonts/overpass/cyrillic.woff2) format('woff2');
-        unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-      }
-      /* vietnamese */
-      @font-face {
-        font-family: 'Overpass';
-        font-style: normal;
-        font-weight: 400;
-        font-display: swap;
-        src: url(/fonts/overpass/vietnamese.woff2) format('woff2');
-        unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0,
-          U+1EA0-1EF9, U+20AB;
-      }
-      /* latin-ext */
-      @font-face {
-        font-family: 'Overpass';
-        font-style: normal;
-        font-weight: 400;
-        font-display: swap;
-        src: url(/fonts/overpass/latin-ext.woff2) format('woff2');
-        unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
-          U+2C60-2C7F, U+A720-A7FF;
-      }
-      /* latin */
-      @font-face {
-        font-family: 'Overpass';
-        font-style: normal;
-        font-weight: 400;
-        font-display: swap;
-        src: url(/fonts/overpass/latin.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;
-      }
-    </style>
     <link rel="apple-touch-icon" href="logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a