From dac5b245588dfa7a67107ba393a277d38e4a7510 Mon Sep 17 00:00:00 2001 From: Oleksandr Dubenko Date: Thu, 8 Aug 2024 13:39:47 +0200 Subject: [PATCH] frontend: Upgrade storybook setup Signed-off-by: Oleksandr Dubenko --- frontend/.storybook/HeadlampTheme.js | 4 +- frontend/.storybook/main.js | 19 - frontend/.storybook/main.ts | 22 + frontend/.storybook/manager.js | 2 +- frontend/.storybook/preview.tsx | 71 +- frontend/index.html | 51 - frontend/package-lock.json | 13374 ++++++---------- frontend/package.json | 23 +- .../assets}/fonts/overpass/cyrillic-ext.woff2 | Bin .../assets}/fonts/overpass/cyrillic.woff2 | Bin .../assets}/fonts/overpass/latin-ext.woff2 | Bin .../assets}/fonts/overpass/latin.woff2 | Bin .../assets}/fonts/overpass/vietnamese.woff2 | Bin .../components/App/Home/RecentClusters.tsx | 2 +- .../PluginSettingsDetails.stories.tsx | 8 +- ...ingsDetails.WithAutoSave.stories.storyshot | 6 +- ...sDetails.WithoutAutoSave.stories.storyshot | 6 +- .../components/App/Settings/NumRowsInput.tsx | 2 +- .../Settings.General.stories.storyshot | 2 +- frontend/src/components/App/TopBar.tsx | 20 +- .../DetailsViewSection.stories.tsx | 23 +- .../detailsViewSectionSlice.ts | 4 +- .../components/Sidebar/Sidebar.stories.tsx | 4 +- .../Sidebar/Sidebaritem.stories.tsx | 4 +- frontend/src/components/account/Auth.tsx | 2 +- frontend/src/components/cluster/Chooser.tsx | 2 +- .../cluster/ClusterChooserPopup.tsx | 2 +- .../src/components/common/ConfirmDialog.tsx | 2 +- frontend/src/components/common/Dialog.tsx | 2 +- .../ErrorBoundary/ErrorBoundary.stories.tsx | 12 +- .../common/ErrorBoundary/ErrorBoundary.tsx | 3 +- .../common/ErrorPage/ErrorPage.stories.tsx | 4 +- .../Label.stories/HeaderLabel.stories.tsx | 4 +- .../Label.stories/HoverInfoLabel.stories.tsx | 4 +- .../Label.stories/InfoLabel.stories.tsx | 4 +- .../Label.stories/NameLabel.stories.tsx | 6 +- .../Label.stories/StatusLabel.stories.tsx | 4 +- .../Label.stories/ValueLabel.stories.tsx | 4 +- frontend/src/components/common/LogViewer.tsx | 2 +- .../NameValueTable/NameValueTable.stories.tsx | 4 +- .../common/Resource/EditorDialog.stories.tsx | 4 +- .../MainInfoSection.stories.tsx | 4 +- .../MainInfoSection/MainInfoSection.tsx | 2 +- .../MainInfoSection/MainInfoSectionHeader.tsx | 10 +- .../Resource/MetadataDisplay.stories.tsx | 4 +- .../components/common/Resource/Resource.tsx | 2 +- .../Resource/ResourceListView.stories.tsx | 4 +- .../common/Resource/ResourceTable.stories.tsx | 4 +- .../common/Resource/SimpleEditor.stories.tsx | 4 +- .../common/Resource/ViewButton.stories.tsx | 4 +- .../ShowHideLabel/ShowHideLabel.stories.tsx | 4 +- .../src/components/common/Tabs.stories.tsx | 4 +- .../common/TileChart/TileChart.stories.tsx | 4 +- .../common/Tooltip/TooltipIcon.stories.tsx | 4 +- .../common/Tooltip/TooltipLight.stories.tsx | 4 +- .../Details.WithBase.stories.storyshot | 12 +- .../crd/CustomResourceDefinition.stories.tsx | 4 +- .../crd/CustomResourceDetails.stories.tsx | 4 +- .../crd/CustomResourceList.stories.tsx | 4 +- .../cronjob/CronJobDetails.stories.tsx | 4 +- .../src/components/daemonset/List.stories.tsx | 4 +- .../endpoints/EndpointDetails.stories.tsx | 4 +- .../endpoints/EndpointList.stories.tsx | 4 +- .../HPADetails.stories.tsx | 4 +- .../HPAList.stories.tsx | 4 +- .../ingress/ClassDetails.stories.tsx | 4 +- .../components/ingress/ClassList.stories.tsx | 4 +- .../components/ingress/Details.stories.tsx | 4 +- .../ingress/LinkStringFormat.stories.tsx | 4 +- .../src/components/ingress/List.stories.tsx | 4 +- .../src/components/job/JobList.stories.tsx | 4 +- .../components/limitRange/Details.stories.tsx | 4 +- .../components/limitRange/List.stories.tsx | 4 +- .../CreateNamespaceButton.stories.tsx | 9 +- .../namespace/NamespaceDetails.stories.tsx | 4 +- .../namespace/NamespaceList.stories.tsx | 4 +- frontend/src/components/node/List.stories.tsx | 4 +- .../src/components/pod/PodDetails.stories.tsx | 4 +- .../src/components/pod/PodList.stories.tsx | 4 +- .../src/components/pod/PodLogs.stories.tsx | 4 +- .../pod/podDetailsVolumeSection.stories.tsx | 4 +- .../pdbDetails.stories.tsx | 4 +- .../podDisruptionBudget/pdbList.stories.tsx | 4 +- .../priorityClassDetails.stories.tsx | 4 +- .../priorityClassList.stories.tsx | 4 +- .../components/replicaset/List.stories.tsx | 4 +- .../resourceQuotaDetails.stories.tsx | 4 +- .../resourceQuotaList.stories.tsx | 4 +- frontend/src/components/service/Details.tsx | 2 +- .../storage/ClaimDetails.stories.tsx | 4 +- .../components/storage/ClaimList.stories.tsx | 4 +- .../storage/ClassDetails.stories.tsx | 4 +- .../components/storage/ClassList.stories.tsx | 4 +- .../storage/VolumeDetails.stories.tsx | 4 +- .../components/storage/VolumeList.stories.tsx | 4 +- .../MutatingWebhookConfigDetails.stories.tsx | 4 +- .../MutatingWebhookConfigList.stories.tsx | 4 +- ...ValidatingWebhookConfigDetails.stories.tsx | 4 +- .../ValidatingWebhookConfigList.stories.tsx | 4 +- .../LocaleSelect/LocaleSelect.stories.tsx | 4 +- frontend/src/i18n/ThemeProviderNexti18n.tsx | 7 +- frontend/src/index.css | 52 + frontend/src/index.tsx | 69 +- frontend/src/plugin/registry.tsx | 2 +- frontend/src/redux/actionButtonsSlice.ts | 2 +- frontend/src/storybook.test.tsx | 36 +- plugins/headlamp-plugin/package.json | 31 +- 107 files changed, 5484 insertions(+), 8676 deletions(-) delete mode 100644 frontend/.storybook/main.js create mode 100644 frontend/.storybook/main.ts rename frontend/{public => src/assets}/fonts/overpass/cyrillic-ext.woff2 (100%) rename frontend/{public => src/assets}/fonts/overpass/cyrillic.woff2 (100%) rename frontend/{public => src/assets}/fonts/overpass/latin-ext.woff2 (100%) rename frontend/{public => src/assets}/fonts/overpass/latin.woff2 (100%) rename frontend/{public => src/assets}/fonts/overpass/vietnamese.woff2 (100%) create mode 100644 frontend/src/index.css 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 @@ - -