diff --git a/frontend/.storybook/HeadlampTheme.js b/frontend/.storybook/HeadlampTheme.js
index 9b207f3a98f..2e176e0373c 100644
--- a/frontend/.storybook/HeadlampTheme.js
+++ b/frontend/.storybook/HeadlampTheme.js
@@ -1,7 +1,7 @@
// 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({
@@ -9,4 +9,6 @@ export default create({
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
deleted file mode 100644
index 3c32c651cc4..00000000000
--- a/frontend/.storybook/main.js
+++ /dev/null
@@ -1,19 +0,0 @@
-export default {
- stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-
- addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
-
- core: {
- builder: '@storybook/builder-vite',
- disableTelemetry: true,
- },
-
- framework: {
- name: '@storybook/react-vite',
- options: {},
- },
-
- docs: {
- autodocs: true,
- },
-};
diff --git a/frontend/.storybook/main.ts b/frontend/.storybook/main.ts
new file mode 100644
index 00000000000..780f53691f3
--- /dev/null
+++ b/frontend/.storybook/main.ts
@@ -0,0 +1,22 @@
+import { StorybookConfig } from '@storybook/react-vite';
+
+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
index 53d569022a2..364512f5b5a 100644
--- 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
index 058b0448374..84d35894ac2 100644
--- a/frontend/.storybook/preview.tsx
+++ b/frontend/.storybook/preview.tsx
@@ -1,81 +1,48 @@
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 { http, HttpResponse } 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 = (
-
-
-
-
-
+
+
+
);
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: {
handlers: [
- rest.get('https://api.iconify.design/mdi.json', (_req, res, ctx) => {
- return res(ctx.json({}));
- }),
- rest.get('http://localhost/api/v1/namespaces', (_req, res, ctx) => {
- return res(ctx.json({}));
- }),
- rest.get('http://localhost/api/v1/events', (_req, res, ctx) => {
- return res(ctx.json({}));
- }),
- rest.post(
- 'http://localhost/apis/authorization.k8s.io/v1/selfsubjectaccessreviews',
- (_req, res, ctx) => {
- return res(ctx.json({ status: 200 }));
- }
+ http.get('https://api.iconify.design/mdi.json', () => HttpResponse.json({})),
+ http.get('http://localhost/api/v1/namespaces', () => HttpResponse.json({})),
+ http.get('http://localhost/api/v1/events', () => HttpResponse.json({})),
+ http.post('http://localhost/apis/authorization.k8s.io/v1/selfsubjectaccessreviews', () =>
+ HttpResponse.json({ status: 200 })
),
- rest.get('http://localhost:4466/api/v1/namespaces', (_req, res, ctx) => {
- return res(ctx.json({}));
- }),
- rest.get('http://localhost:4466/api/v1/events', (_req, res, ctx) => {
- return res(ctx.json({}));
- }),
- rest.post(
- 'http://localhost:4466/apis/authorization.k8s.io/v1/selfsubjectaccessreviews',
- (_req, res, ctx) => {
- return res(ctx.json({ status: 200 }));
- }
+ http.get('http://localhost:4466/api/v1/namespaces', () => HttpResponse.json({})),
+ http.get('http://localhost:4466/api/v1/events', () => HttpResponse.json({})),
+ http.post('http://localhost:4466/apis/authorization.k8s.io/v1/selfsubjectaccessreviews', () =>
+ HttpResponse.json({ status: 200 })
),
],
},
};
+export const tags = ['autodocs', 'autodocs'];
diff --git a/frontend/index.html b/frontend/index.html
index 2b2964fe47b..d6d2e4d5116 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -11,57 +11,6 @@
-
-