mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 01:38:56 -04:00
[Storybook] Use native theme switcher (#215443)
## Summary Closes #213294 This PR replaces the custom theme switcher in favor of the native toolbar customization SB has integrated. Also removed `@storybook/icons` which was only used in the theme switcher component. ## How to test 1. Run `yarn storybook <plugin>` 2. You should be able to change between themes on the toolbar.
This commit is contained in:
Sergi Romeu
GitHub
parent
17ecc6a9f1
commit
965a69d9fb
6 changed files with 42 additions and 127 deletions
|
|
@ -1572,7 +1572,6 @@
|
|||
"@storybook/components": "^8.6.3",
|
||||
"@storybook/core-events": "^8.6.3",
|
||||
"@storybook/core-server": "^8.6.3",
|
||||
"@storybook/icons": "^1.3.2",
|
||||
"@storybook/manager-api": "^8.6.3",
|
||||
"@storybook/preview-api": "^8.6.3",
|
||||
"@storybook/react": "^8.6.3",
|
||||
|
|
|
|||
|
|
@ -10,13 +10,53 @@
|
|||
import type { Preview } from '@storybook/react';
|
||||
import * as jest from 'jest-mock';
|
||||
import { decorators } from './decorators';
|
||||
import {
|
||||
AMSTERDAM_DARK,
|
||||
AMSTERDAM_LIGHT,
|
||||
BOREALIS_DARK,
|
||||
BOREALIS_LIGHT,
|
||||
DEFAULT_THEME,
|
||||
THEME_TITLES,
|
||||
} from './themes';
|
||||
|
||||
// @ts-expect-error
|
||||
window.jest = jest;
|
||||
|
||||
const preview: Preview = {
|
||||
decorators,
|
||||
initialGlobals: { euiTheme: 'v8.light' },
|
||||
initialGlobals: { euiTheme: DEFAULT_THEME },
|
||||
globalTypes: {
|
||||
euiTheme: {
|
||||
description: 'Change the EUI theme',
|
||||
toolbar: {
|
||||
title: 'Theme',
|
||||
icon: 'paintbrush',
|
||||
dynamicTitle: true,
|
||||
items: [
|
||||
{
|
||||
value: BOREALIS_LIGHT,
|
||||
icon: 'hearthollow',
|
||||
title: THEME_TITLES[BOREALIS_LIGHT],
|
||||
},
|
||||
{
|
||||
value: BOREALIS_DARK,
|
||||
icon: 'heart',
|
||||
title: THEME_TITLES[BOREALIS_DARK],
|
||||
},
|
||||
{
|
||||
value: AMSTERDAM_LIGHT,
|
||||
icon: 'hearthollow',
|
||||
title: THEME_TITLES[AMSTERDAM_LIGHT],
|
||||
},
|
||||
{
|
||||
value: AMSTERDAM_DARK,
|
||||
icon: 'heart',
|
||||
title: THEME_TITLES[AMSTERDAM_DARK],
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// eslint-disable-next-line import/no-default-export
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
|
||||
import { addons } from '@storybook/manager-api';
|
||||
import { create } from '@storybook/theming';
|
||||
import { registerThemeSwitcherAddon } from './register_theme_switcher_addon';
|
||||
|
||||
// This configures the "Manager", or main outer view of Storybook. It is an
|
||||
// addon that's loaded by the `managerEntries` part of the preset in ../preset.js.
|
||||
|
|
@ -25,5 +24,3 @@ addons.setConfig({
|
|||
panelPosition: 'bottom',
|
||||
showToolbar: true,
|
||||
});
|
||||
|
||||
registerThemeSwitcherAddon();
|
||||
|
|
|
|||
|
|
@ -1,39 +0,0 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the "Elastic License
|
||||
* 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
|
||||
* Public License v 1"; you may not use this file except in compliance with, at
|
||||
* your election, the "Elastic License 2.0", the "GNU Affero General Public
|
||||
* License v3.0 only", or the "Server Side Public License, v 1".
|
||||
*/
|
||||
|
||||
import { addons, types } from '@storybook/manager-api';
|
||||
import { ThemeSwitcher } from './theme_switcher';
|
||||
|
||||
export const THEME_SWITCHER_ADDON_ID = 'kibana/eui-theme-switcher';
|
||||
|
||||
export function registerThemeSwitcherAddon() {
|
||||
addons.register(THEME_SWITCHER_ADDON_ID, (api) => {
|
||||
const channel = api.getChannel();
|
||||
|
||||
channel?.on('globalsUpdated', ({ globals }) => {
|
||||
const previewFrame = document.getElementById(
|
||||
'storybook-preview-iframe'
|
||||
) as HTMLIFrameElement | null;
|
||||
const stylesheet = previewFrame?.contentDocument?.getElementById(
|
||||
'eui-theme-css'
|
||||
) as HTMLLinkElement | null;
|
||||
|
||||
if (stylesheet && globals.euiTheme) {
|
||||
stylesheet.href = `kbn-ui-shared-deps-npm.${globals.euiTheme}.css`;
|
||||
}
|
||||
});
|
||||
|
||||
addons.add(THEME_SWITCHER_ADDON_ID, {
|
||||
title: 'EUI Theme Switcher',
|
||||
type: types.TOOL,
|
||||
match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
|
||||
render: ThemeSwitcher,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the "Elastic License
|
||||
* 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
|
||||
* Public License v 1"; you may not use this file except in compliance with, at
|
||||
* your election, the "Elastic License 2.0", the "GNU Affero General Public
|
||||
* License v3.0 only", or the "Server Side Public License, v 1".
|
||||
*/
|
||||
|
||||
import React, { useCallback, useEffect } from 'react';
|
||||
import { IconButton, TooltipLinkList, WithTooltip } from '@storybook/components';
|
||||
import { useGlobals } from '@storybook/manager-api';
|
||||
import { HeartIcon, HeartHollowIcon } from '@storybook/icons';
|
||||
|
||||
import { DEFAULT_THEME, THEMES, THEME_TITLES } from './themes';
|
||||
|
||||
type PropsOf<T extends React.FC<any>> = T extends React.FC<infer P> ? P : never;
|
||||
type ArrayItem<T extends any[]> = T extends Array<infer I> ? I : never;
|
||||
type Link = ArrayItem<PropsOf<typeof TooltipLinkList>['links']>;
|
||||
|
||||
export function ThemeSwitcher() {
|
||||
const [{ euiTheme: selectedTheme }, updateGlobals] = useGlobals();
|
||||
|
||||
const selectTheme = useCallback(
|
||||
(themeId: string) => {
|
||||
updateGlobals({ euiTheme: themeId });
|
||||
},
|
||||
[updateGlobals]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedTheme) {
|
||||
selectTheme(DEFAULT_THEME);
|
||||
}
|
||||
}, [selectTheme, selectedTheme]);
|
||||
|
||||
return (
|
||||
<WithTooltip
|
||||
placement="top"
|
||||
trigger="click"
|
||||
tooltip={({ onHide }) => (
|
||||
<ThemeSwitcherTooltip
|
||||
onHide={onHide}
|
||||
onChangeSelectedTheme={selectTheme}
|
||||
selectedTheme={selectedTheme}
|
||||
/>
|
||||
)}
|
||||
>
|
||||
<IconButton key="eui-theme" title="Change the EUI theme">
|
||||
{selectedTheme?.includes('dark') ? <HeartIcon /> : <HeartHollowIcon />}
|
||||
</IconButton>
|
||||
</WithTooltip>
|
||||
);
|
||||
}
|
||||
|
||||
const ThemeSwitcherTooltip = React.memo(
|
||||
({
|
||||
onHide,
|
||||
onChangeSelectedTheme,
|
||||
selectedTheme,
|
||||
}: {
|
||||
onHide: () => void;
|
||||
onChangeSelectedTheme: (themeId: string) => void;
|
||||
selectedTheme: string;
|
||||
}) => {
|
||||
const links = THEMES.map(
|
||||
(theme): Link => ({
|
||||
id: theme,
|
||||
title: THEME_TITLES[theme],
|
||||
onClick: (_event, item) => {
|
||||
if (item.id != null && item.id !== selectedTheme) {
|
||||
onChangeSelectedTheme(item.id);
|
||||
}
|
||||
onHide();
|
||||
},
|
||||
active: selectedTheme === theme,
|
||||
})
|
||||
);
|
||||
|
||||
return <TooltipLinkList links={links.flat()} />;
|
||||
}
|
||||
);
|
||||
|
|
@ -10292,7 +10292,7 @@
|
|||
resolved "https://registry.yarnpkg.com/@storybook/global/-/global-5.0.0.tgz#b793d34b94f572c1d7d9e0f44fac4e0dbc9572ed"
|
||||
integrity sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==
|
||||
|
||||
"@storybook/icons@^1.2.12", "@storybook/icons@^1.3.2":
|
||||
"@storybook/icons@^1.2.12":
|
||||
version "1.3.2"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/icons/-/icons-1.3.2.tgz#e9b92c35ca789ff79f9d0b3848829dd6490ca628"
|
||||
integrity sha512-t3xcbCKkPvqyef8urBM0j/nP6sKtnlRkVgC+8JTbTAZQjaTmOjes3byEgzs89p4B/K6cJsg9wLW2k3SknLtYJw==
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue