From 3bc8192913b23f247e626e0089439a770a2c5eef Mon Sep 17 00:00:00 2001 From: Dima Vyshniakov Date: Sun, 11 Aug 2024 15:36:35 +0200 Subject: [PATCH] docs(storybook): add theme playground fix #35 --- .storybook/manager.ts | 20 +- .storybook/preview.tsx | 5 +- eslint.config.js | 1 + package.json | 29 +- pnpm-lock.yaml | 429 +++++++++--------- .../PlaygroundPanel/Control.tsx | 51 +++ .../PlaygroundPanel/Panel.tsx | 67 +++ .../PlaygroundPanel/Playground.tsx | 140 ++++++ .../theme-playground/PlaygroundPanel/index.ts | 1 + .../ThemeSwitcherTool/Color.tsx | 16 + .../ThemeSwitcherTool/ThemeList.tsx | 39 ++ .../ThemeSwitcherTool/ThemeSwitcherTool.tsx | 28 ++ .../ThemeSwitcherTool/index.ts | 2 + .../ThemeSwitcherTool/withThemeProvider.tsx | 38 ++ src/env/theme-playground/constants.ts | 8 + src/env/theme-playground/types.ts | 16 + src/env/theme-playground/useGlobalThemes.ts | 31 ++ 17 files changed, 695 insertions(+), 226 deletions(-) create mode 100644 src/env/theme-playground/PlaygroundPanel/Control.tsx create mode 100644 src/env/theme-playground/PlaygroundPanel/Panel.tsx create mode 100644 src/env/theme-playground/PlaygroundPanel/Playground.tsx create mode 100644 src/env/theme-playground/PlaygroundPanel/index.ts create mode 100644 src/env/theme-playground/ThemeSwitcherTool/Color.tsx create mode 100644 src/env/theme-playground/ThemeSwitcherTool/ThemeList.tsx create mode 100644 src/env/theme-playground/ThemeSwitcherTool/ThemeSwitcherTool.tsx create mode 100644 src/env/theme-playground/ThemeSwitcherTool/index.ts create mode 100644 src/env/theme-playground/ThemeSwitcherTool/withThemeProvider.tsx create mode 100644 src/env/theme-playground/constants.ts create mode 100644 src/env/theme-playground/types.ts create mode 100644 src/env/theme-playground/useGlobalThemes.ts diff --git a/.storybook/manager.ts b/.storybook/manager.ts index 4598fdec..05459e03 100644 --- a/.storybook/manager.ts +++ b/.storybook/manager.ts @@ -1,7 +1,25 @@ -import {addons} from '@storybook/manager-api'; +import {addons, types} from '@storybook/manager-api'; +import {TOOL_ID, PANEL_ID} from '../src/env/theme-playground/constants'; +import {ThemeSwitcherTool} from '../src/env/theme-playground/ThemeSwitcherTool'; +import {Panel} from '../src/env/theme-playground/PlaygroundPanel'; import kovalTheme from './kovalTheme'; addons.setConfig({ theme: kovalTheme, }); + +addons.add(TOOL_ID, { + type: types.TOOL, + title: 'Theme provider', + match: ({viewMode}) => !!(viewMode && viewMode.match(/^(story|docs)$/)), + render: ThemeSwitcherTool, +}); + +// Register the panel +addons.add(PANEL_ID, { + type: types.PANEL, + title: 'Theme playground', + match: ({viewMode}) => viewMode === 'story', + render: Panel, +}); diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index ad29c291..c10c79e9 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -1,9 +1,10 @@ import type {Preview} from '@storybook/react'; -import {withThemeProvider} from 'storybook-addon-theme-provider'; +// import {withThemeProvider} from 'storybook-addon-theme-provider'; import {theme as themePodil} from '../src/lib/Theme/themePodil.ts'; import {theme as themeDnipro} from '../src/lib/Theme/themeDnipro.ts'; import {Provider} from './../src/lib/Provider/Provider.tsx'; +import {withThemeProvider} from './../src/env/theme-playground/ThemeSwitcherTool'; import '@/lib/CSSReset/reset.css'; @@ -63,7 +64,7 @@ const preview: Preview = { decorators: [withThemeProvider(Provider)], - globals: { + initialGlobals: { // Set initially selected theme name selectedTheme: 'Podil', // Provide a list of available themes diff --git a/eslint.config.js b/eslint.config.js index 2806ddbd..9a7ab78c 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -131,6 +131,7 @@ export default [ '**/*.stories.*', '*.config.{js,ts}', '.storybook/*.{js,jsx,ts,tsx}', + 'src/env/**/*.{ts,tsx}', ], plugins: { import: pluginImport, diff --git a/package.json b/package.json index 8069d7eb..e81524e2 100644 --- a/package.json +++ b/package.json @@ -94,18 +94,21 @@ "@semantic-release/github": "10.1.3", "@semantic-release/npm": "12.0.1", "@semantic-release/release-notes-generator": "14.0.1", - "@storybook/addon-essentials": "8.2.7", - "@storybook/addon-interactions": "8.2.7", - "@storybook/addon-links": "8.2.7", - "@storybook/addon-storysource": "8.2.7", - "@storybook/blocks": "8.2.7", - "@storybook/builder-vite": "8.2.7", - "@storybook/manager-api": "8.2.7", - "@storybook/react": "8.2.7", - "@storybook/react-vite": "8.2.7", - "@storybook/test": "8.2.7", - "@storybook/theming": "8.2.7", - "@storybook/types": "8.2.7", + "@storybook/addon-essentials": "8.2.8", + "@storybook/addon-interactions": "8.2.8", + "@storybook/addon-links": "8.2.8", + "@storybook/addon-storysource": "8.2.8", + "@storybook/blocks": "8.2.8", + "@storybook/builder-vite": "8.2.8", + "@storybook/components": "8.2.8", + "@storybook/icons": "^1.2.10", + "@storybook/manager-api": "8.2.8", + "@storybook/preview-api": "8.2.8", + "@storybook/react": "8.2.8", + "@storybook/react-vite": "8.2.8", + "@storybook/test": "8.2.8", + "@storybook/theming": "8.2.8", + "@storybook/types": "8.2.8", "@testing-library/jest-dom": "6.4.8", "@testing-library/react": "16.0.0", "@types/jest": "29.5.12", @@ -143,7 +146,7 @@ "react": "18.3.1", "react-dom": "18.3.1", "semantic-release": "24.0.0", - "storybook": "8.2.7", + "storybook": "8.2.8", "storybook-addon-theme-provider": "0.2.2", "stylelint": "16.8.1", "stylelint-config-standard": "36.0.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 47b58eda..059ce784 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -58,41 +58,50 @@ importers: specifier: 14.0.1 version: 14.0.1(semantic-release@24.0.0(typescript@5.4.5)) '@storybook/addon-essentials': - specifier: 8.2.7 - version: 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))) + specifier: 8.2.8 + version: 8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))) '@storybook/addon-interactions': - specifier: 8.2.7 - version: 8.2.7(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.13)(ts-node@10.9.2(@types/node@20.14.13)(typescript@5.4.5)))(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))) + specifier: 8.2.8 + version: 8.2.8(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.13)(ts-node@10.9.2(@types/node@20.14.13)(typescript@5.4.5)))(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))) '@storybook/addon-links': - specifier: 8.2.7 - version: 8.2.7(react@18.3.1)(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))) + specifier: 8.2.8 + version: 8.2.8(react@18.3.1)(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))) '@storybook/addon-storysource': - specifier: 8.2.7 - version: 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))) + specifier: 8.2.8 + version: 8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))) '@storybook/blocks': - specifier: 8.2.7 - version: 8.2.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))) + specifier: 8.2.8 + version: 8.2.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))) '@storybook/builder-vite': - specifier: 8.2.7 - version: 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)))(typescript@5.4.5)(vite@5.3.5(@types/node@20.14.13)) + specifier: 8.2.8 + version: 8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)))(typescript@5.4.5)(vite@5.3.5(@types/node@20.14.13)) + '@storybook/components': + specifier: 8.2.8 + version: 8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))) + '@storybook/icons': + specifier: ^1.2.10 + version: 1.2.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@storybook/manager-api': - specifier: 8.2.7 - version: 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))) + specifier: 8.2.8 + version: 8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))) + '@storybook/preview-api': + specifier: 8.2.8 + version: 8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))) '@storybook/react': - specifier: 8.2.7 - version: 8.2.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)))(typescript@5.4.5) + specifier: 8.2.8 + version: 8.2.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)))(typescript@5.4.5) '@storybook/react-vite': - specifier: 8.2.7 - version: 8.2.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.14.0)(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)))(typescript@5.4.5)(vite@5.3.5(@types/node@20.14.13)) + specifier: 8.2.8 + version: 8.2.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.14.0)(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)))(typescript@5.4.5)(vite@5.3.5(@types/node@20.14.13)) '@storybook/test': - specifier: 8.2.7 - version: 8.2.7(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.13)(ts-node@10.9.2(@types/node@20.14.13)(typescript@5.4.5)))(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))) + specifier: 8.2.8 + version: 8.2.8(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.13)(ts-node@10.9.2(@types/node@20.14.13)(typescript@5.4.5)))(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))) '@storybook/theming': - specifier: 8.2.7 - version: 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))) + specifier: 8.2.8 + version: 8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))) '@storybook/types': - specifier: 8.2.7 - version: 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))) + specifier: 8.2.8 + version: 8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))) '@testing-library/jest-dom': specifier: 6.4.8 version: 6.4.8 @@ -205,11 +214,11 @@ importers: specifier: 24.0.0 version: 24.0.0(typescript@5.4.5) storybook: - specifier: 8.2.7 - version: 8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)) + specifier: 8.2.8 + version: 8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)) storybook-addon-theme-provider: specifier: 0.2.2 - version: 0.2.2(@storybook/blocks@8.2.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))))(@storybook/components@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))))(@storybook/core-events@8.1.11)(@storybook/manager-api@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))))(@storybook/preview-api@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))))(@storybook/theming@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))))(@storybook/types@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 0.2.2(@storybook/blocks@8.2.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))))(@storybook/components@8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))))(@storybook/core-events@8.1.11)(@storybook/manager-api@8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))))(@storybook/preview-api@8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))))(@storybook/theming@8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))))(@storybook/types@8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) stylelint: specifier: 16.8.1 version: 16.8.1(typescript@5.4.5) @@ -1911,92 +1920,92 @@ packages: '@sinonjs/fake-timers@10.3.0': resolution: {integrity: sha512-V4BG07kuYSUkTCSBHG8G8TNhM+F19jXFWnQtzj+we8DrkpSBCee9Z3Ms8yiGer/dlmhe35/Xdgyo3/0rQKg7YA==} - '@storybook/addon-actions@8.2.7': - resolution: {integrity: sha512-wDnMGGmaogAForkNncfCx8BEDiwxeK8zC0lj8HkRPUuH6vTr81U5RIb12Wa2TnnNKLKMFAtyPSnofHf3OAfzZQ==} + '@storybook/addon-actions@8.2.8': + resolution: {integrity: sha512-dyajqsMNAUktpi7aiml0Fsm4ey8Nh2YwRyTDuTJZ1iJFcFyARqfr5iKH4/qElq80y0FYXGgGRJB+dKJsCdefLw==} peerDependencies: - storybook: ^8.2.7 + storybook: ^8.2.8 - '@storybook/addon-backgrounds@8.2.7': - resolution: {integrity: sha512-kEL3kzYB0qNfpznchlGBnQm4iydyzdTYDPlCFsKUAxfUmJFnpz2H52Sl5lB+qJC/4OREp1Usltag7cUjeuyzMQ==} + '@storybook/addon-backgrounds@8.2.8': + resolution: {integrity: sha512-OqXGpq8KzWwAAQWPnby/v4ayWuUAB18Twgi6zeb+QNLEQdFnSp7kz6+4mP8ZVg8RS3ACGXD31nnvvlF7GYoJjQ==} peerDependencies: - storybook: ^8.2.7 + storybook: ^8.2.8 - '@storybook/addon-controls@8.2.7': - resolution: {integrity: sha512-u3MruX0Zh6l1iNkoJdXwx+zPVqpDKypVrC0YdN3qQ3+mtTwqt35rgetYqtOkDnJ8mXKxo8A5giERKPIyzH9iBA==} + '@storybook/addon-controls@8.2.8': + resolution: {integrity: sha512-adhg68CSFaR/r95rgyKU4ZzWwZz+MU0c4vr9hqrR1UGvg/zl33IZQQzb5j5v3Axo0O31yPMaY6LRty7pOv3+/Q==} peerDependencies: - storybook: ^8.2.7 + storybook: ^8.2.8 - '@storybook/addon-docs@8.2.7': - resolution: {integrity: sha512-icLbvUWp95WUxq2sY+0xgJ49MaQ2HqtWY9RUJUZswJ/ZPJTCCpIoa6HP/NOB9A90Oec9n8sW+1CdDL4CxfxfZg==} + '@storybook/addon-docs@8.2.8': + resolution: {integrity: sha512-8hqUYYveJjR3e/XdXt0vduA7TxFRIFWgXoa9jN5axa63kqfiHcfkpFYPjM8jCRhsfDIRgdrwe2qxsA0wewO1pA==} peerDependencies: - storybook: ^8.2.7 + storybook: ^8.2.8 - '@storybook/addon-essentials@8.2.7': - resolution: {integrity: sha512-5qe7La9B2Z4Y9Fet3C35y8zOZwKgrqduNk8yAUmPRAOwopdo8SGKYpnFTnAtTfTCVk6Y+AZlRfQq0yLUk0Wl3g==} + '@storybook/addon-essentials@8.2.8': + resolution: {integrity: sha512-NRbFv2ociM1l/Oi/1go/ZC5bUU41n9aKD1DzIbguEKBhUs/TGAES+f5x+7DvYnt3Hvd925/FyTXuMU+vNUeiUA==} peerDependencies: - storybook: ^8.2.7 + storybook: ^8.2.8 - '@storybook/addon-highlight@8.2.7': - resolution: {integrity: sha512-YhiLtyJ3NBNV3FQoQo8RFjj59QGSmmeSwRvCjoac6No2DY5vkMW5a8mW6ORr6QYd7ratRNtd3AsPqksZIehRwQ==} + '@storybook/addon-highlight@8.2.8': + resolution: {integrity: sha512-IM1pPx6CCZbHV0bv3oB1qBCGDsr8soq7XLl93tc7mc4hstWSDFfNn7rx4CWycSlCqXlNTKh8cEkbrPrhV9cwbg==} peerDependencies: - storybook: ^8.2.7 + storybook: ^8.2.8 - '@storybook/addon-interactions@8.2.7': - resolution: {integrity: sha512-WZXlwpBNLE483uKuR70A7nm+ZbcZNEmuVz/J1/u7dbi0BUWzmJUa9YIgVeQ/1KTwW8KTkxvB0TuUUH3aA4ZKlA==} + '@storybook/addon-interactions@8.2.8': + resolution: {integrity: sha512-ggctlrSlK72xMfhviHHRslZF5tr9aHr1VFwCG/tjF7s1lM3S7OGqgHLJpcja/wNREvq9GMEvX95ZSu5NMh5CtA==} peerDependencies: - storybook: ^8.2.7 + storybook: ^8.2.8 - '@storybook/addon-links@8.2.7': - resolution: {integrity: sha512-BJdR+vdj7S6Rtx8XqBNQzLsRGH/FYHJ6B6BPWGp0awVx0jNWJnxepINQov8i+GAddUVQGCNG+r4LI3QSD3tNAA==} + '@storybook/addon-links@8.2.8': + resolution: {integrity: sha512-2igEaSdKAFjKjioT6LGdBxZulpbVCzmlmV//sTu3sQiVnnxRjjGFt77sEeLMajrsSvg9DB1RMbDsvJ4FJTzXfQ==} peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.2.7 + storybook: ^8.2.8 peerDependenciesMeta: react: optional: true - '@storybook/addon-measure@8.2.7': - resolution: {integrity: sha512-cS5njwlzrgrUjigUKjhbgJMT8bhPmVDK3FwrQqGhw6xYP4cd9/YBJ4RLNPWhOgGJ+EUTz7eFZ/Rkli5mNrhYcQ==} + '@storybook/addon-measure@8.2.8': + resolution: {integrity: sha512-oqZiX571F9NNy8o/oVyM1Pe2cJz3WJ/OpL0lVbepHrV4ir1f+SDYZdMI58jGBAtoM52cwFc2ZPbzXKQs7a513A==} peerDependencies: - storybook: ^8.2.7 + storybook: ^8.2.8 - '@storybook/addon-outline@8.2.7': - resolution: {integrity: sha512-oFSo3o5eEUSsdGUSPV22pGoJ5lL0PGcqjcee2hyl0Rc60ovsnB1BEGOoaGk7/bmkywMxRZm8D6j85V8HftA/kg==} + '@storybook/addon-outline@8.2.8': + resolution: {integrity: sha512-Cbk4Z0ojggiXjpbS2c4WUP56yikQdT4O7+8AuBNNjVUHNvJQADWYovi6SvDmrS5dH1iyIkB+4saXMr0syp+BDw==} peerDependencies: - storybook: ^8.2.7 + storybook: ^8.2.8 - '@storybook/addon-storysource@8.2.7': - resolution: {integrity: sha512-jZEb0TMWPfSgti6AUMrK81/UVmdxAKvbDSQiudrcfK1MFWmS1ce4r4dwHpocheJ/ptSxU1PVksv9meMB1GnIxw==} + '@storybook/addon-storysource@8.2.8': + resolution: {integrity: sha512-xHH3gJttrfCXxGT6fQ2FBKreF1LFzUarX1YGxuRvZXXRSIYTUyAAlUCQT+/MskfuS6WNcpiao+4c3LCg+cx21Q==} peerDependencies: - storybook: ^8.2.7 + storybook: ^8.2.8 - '@storybook/addon-toolbars@8.2.7': - resolution: {integrity: sha512-lEq0/uiogQSxS8pM5AqIexPiG2mudHUxgBiVWSspbTQDUbGBUxB64VYeYERat50N/GyS2iCymlfSkC+OUXaYLQ==} + '@storybook/addon-toolbars@8.2.8': + resolution: {integrity: sha512-k64G3FUpX3H/mhJ7AG1r/4Drsk6cdUtxI3yVdgWb7O3Ka7v/OFZexRXRSiV03n5q/kaqVKDu96Tuog57+7EB4w==} peerDependencies: - storybook: ^8.2.7 + storybook: ^8.2.8 - '@storybook/addon-viewport@8.2.7': - resolution: {integrity: sha512-d4+klwM/duTukNED1WCeBgIMqL5Jvm/iUs2rUc5HI1FGMEDYnoLVR2ztjivQs+6f1cJWuGwWZD/toB5pKHuR/A==} + '@storybook/addon-viewport@8.2.8': + resolution: {integrity: sha512-/JZeIgB33yhryUvWaNO+3t9akcS8nGLyAUmlljPFr3LUDDYrO/0H9tE4CgjLqtwCXBq3k3s0HLzEJOrKI9Tmbw==} peerDependencies: - storybook: ^8.2.7 + storybook: ^8.2.8 - '@storybook/blocks@8.2.7': - resolution: {integrity: sha512-lZB4EzmY4ftgubkf7hmkALEhmfMhRkDRD5QjrgTZLRpdVXPzFUyljgLlTBhv34YTN+ZLYK618/4uSVJBpgoKeQ==} + '@storybook/blocks@8.2.8': + resolution: {integrity: sha512-AHBXu9s73Xv9r1JageIL7C4eGf5XYEByai4Y6NYQsE+jF7b7e8oaSUoLW6fWSyLGuqvjRx+5P7GMNI2K1EngBA==} peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.2.7 + storybook: ^8.2.8 peerDependenciesMeta: react: optional: true react-dom: optional: true - '@storybook/builder-vite@8.2.7': - resolution: {integrity: sha512-CoEQjsfAQdZeAavfh1sBTMmC453kUFLKHr1zs6MZAlkejxky+U21t1Zb1qEU+IsEr/AlzvJr60pxUNL/dy6PVQ==} + '@storybook/builder-vite@8.2.8': + resolution: {integrity: sha512-p9EJfZkX9ZsVi1Qr3jYyCJaZZ/2pt0KVTOYnDzNnhi3P/suU6O3Lp/YCV5+KOfAmlg2IgTND0EidqZinqPIBSg==} peerDependencies: '@preact/preset-vite': '*' - storybook: ^8.2.7 + storybook: ^8.2.8 typescript: '>= 4.3.x' vite: ^4.0.0 || ^5.0.0 vite-plugin-glimmerx: '*' @@ -2008,24 +2017,24 @@ packages: vite-plugin-glimmerx: optional: true - '@storybook/codemod@8.2.7': - resolution: {integrity: sha512-D2sJcZMUO6Y7DNja4LvdT6uBee4bZbQKB904kEG9Kpr0XF20IHAP9BbkfG8HEFaS0GbJwvGvE03Sg+S1y+vO6Q==} + '@storybook/codemod@8.2.8': + resolution: {integrity: sha512-dqD4j6JTsS8BM2y1yHBIe5fHvsGM08qpJQXkE77aXJIm5UfUeuWC7rY0xAheX3fU5G98l3BJk0ySUGspQL5pNg==} - '@storybook/components@8.2.7': - resolution: {integrity: sha512-FXhnoHl9S+tKSFc62iUG3EWplQP9ojGQaSMhqP4QTus6xmo53oSsPzuTPQilKVHkGxFQW8eGgKKsfHw3G2NT2g==} + '@storybook/components@8.2.8': + resolution: {integrity: sha512-d4fI7Clogx4rgLAM7vZVr9L2EFtAkGXvpkZFuB0H0eyYaxZSbuZYvDCzRglQGQGsqD8IA8URTgPVSXC3L3k6Bg==} peerDependencies: - storybook: ^8.2.7 + storybook: ^8.2.8 '@storybook/core-events@8.1.11': resolution: {integrity: sha512-vXaNe2KEW9BGlLrg0lzmf5cJ0xt+suPjWmEODH5JqBbrdZ67X6ApA2nb6WcxDQhykesWCuFN5gp1l+JuDOBi7A==} - '@storybook/core@8.2.7': - resolution: {integrity: sha512-vgw5MYN9Bq2/ZsObCOEHbBHwi4RpbYCHPFtKkr4kTnWID++FCSiSVd7jY3xPvcNxWqCxOyH6dThpBi+SsB/ZAA==} + '@storybook/core@8.2.8': + resolution: {integrity: sha512-Wwm/Txh87hbxqU9OaxXwdGAmdRBjDn7rlZEPjNBx0tt43SQ11fKambY7nVWrWuw46YsJpdF9V/PQr4noNEXXEA==} - '@storybook/csf-plugin@8.2.7': - resolution: {integrity: sha512-rBdplL6xcVJcuq+uM0eidomMQ5BtAlVAejYrOTNiqBk/zVh5JSvchYzYG9n6Fo2PdKLLKdlZ874zhsVuNriNBQ==} + '@storybook/csf-plugin@8.2.8': + resolution: {integrity: sha512-CEHY7xloBPE8d8h0wg2AM2kRaZkHK8/vkYMNZPbccqAYj6PQIdTuOcXZIBAhAGydyIBULZmsmmsASxM9RO5fKA==} peerDependencies: - storybook: ^8.2.7 + storybook: ^8.2.8 '@storybook/csf@0.0.1': resolution: {integrity: sha512-USTLkZze5gkel8MYCujSRBVIrUQ3YPBrLOx7GNk/0wttvVtlzWXAq9eLbQ4p/NicGxP+3T7KPEMVV//g+yubpw==} @@ -2036,75 +2045,75 @@ packages: '@storybook/global@5.0.0': resolution: {integrity: sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==} - '@storybook/icons@1.2.9': - resolution: {integrity: sha512-cOmylsz25SYXaJL/gvTk/dl3pyk7yBFRfeXTsHvTA3dfhoU/LWSq0NKL9nM7WBasJyn6XPSGnLS4RtKXLw5EUg==} + '@storybook/icons@1.2.10': + resolution: {integrity: sha512-310apKdDcjbbX2VSLWPwhEwAgjxTzVagrwucVZIdGPErwiAppX8KvBuWZgPo+rQLVrtH8S+pw1dbUwjcE6d7og==} engines: {node: '>=14.0.0'} peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - '@storybook/instrumenter@8.2.7': - resolution: {integrity: sha512-Zm6Ty4uWFTNchKUviuJ9vfcMb7+qU8eyrFXVY80XRpr62JEWkYj4eCwx4OG8GzlQahTh9aSv9+hzV6p/5Ld4mw==} + '@storybook/instrumenter@8.2.8': + resolution: {integrity: sha512-6Gk3CzoYQQXBXpW86PKqYSozOB/C9dSYiFvwPRo4XsEfjARDi8yglqkbOtG+FVqKDL66I5krcveB8bTWigqc9g==} peerDependencies: - storybook: ^8.2.7 + storybook: ^8.2.8 - '@storybook/manager-api@8.2.7': - resolution: {integrity: sha512-BXjz6eNl1GyFcMwzRQTIokslcIY71AYblJUscPcy03X93oqI0GjFVa1xuSMwYw/oXWn7SHhKmqtqEG19lvBGRQ==} + '@storybook/manager-api@8.2.8': + resolution: {integrity: sha512-wzfRu3vrD9a99pN3W/RJXVtgNGNsy9PyvetjUfgQVtUZ9eXXDuA+tM7ITTu3xvONtV/rT2YEBwzOpowa+r1GNQ==} peerDependencies: - storybook: ^8.2.7 + storybook: ^8.2.8 - '@storybook/preview-api@8.2.7': - resolution: {integrity: sha512-lNZBTjZaYNSwBY8dEcDZdkOBvq1/JoVWpuvqDEKvGmp5usTe77xAOwGyncEb96Cx1BbXXkMiDrqbV5G23PFRYA==} + '@storybook/preview-api@8.2.8': + resolution: {integrity: sha512-BDt1lo5oEWAaTVCsl6JUHCBFtIWI/Za4qvIdn2Lx9eCA+Ae6IDliosmu273DcvGD9R4OPF6sm1dML3TXILGGcA==} peerDependencies: - storybook: ^8.2.7 + storybook: ^8.2.8 - '@storybook/react-dom-shim@8.2.7': - resolution: {integrity: sha512-9VI+NrC09DAr0QQZsFmU5Fd9eqdJp/1AHK+sm9BOZretGGGJwn22xS7UXhHIiFpfXJQnr3TNcYWRzXFyuaE/Sw==} + '@storybook/react-dom-shim@8.2.8': + resolution: {integrity: sha512-2my3dGBOpBe30+FsSdQOIYCfxMyT68+SEq0qcXxfuax0BkhhJnZLpwvpqOna6EOVTgBD+Tk1TKmjpGwxuwp4rg==} peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.2.7 + storybook: ^8.2.8 - '@storybook/react-vite@8.2.7': - resolution: {integrity: sha512-OvC4c4VpMbMNWNR8zBfWPwSS+LilMZ5O7cUbFSFOsAAI5cYcReo1d0MqpiaWybQynkBFj81zRT+dr+B/5Y2Ajg==} + '@storybook/react-vite@8.2.8': + resolution: {integrity: sha512-xzXWyhFnLoFtJGgj8F5j/33QB4YTyEX61On6kolt7WFAjRFaUWJGYUC8cPPL4PNwsdouyCrnHvlJj77AvFlvfQ==} engines: {node: '>=18.0.0'} peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.2.7 + storybook: ^8.2.8 vite: ^4.0.0 || ^5.0.0 - '@storybook/react@8.2.7': - resolution: {integrity: sha512-Qkw1K1iBDk+E9dlHrEWOOkn0trUU6wSt4mvzyOekiApM290esnPtw6GYXvxfBgFwNXfXbaGG3QNYGAFevf7qHw==} + '@storybook/react@8.2.8': + resolution: {integrity: sha512-Nln0DDTQ930P4J+SEkWbLSgaDe8eDd5gP6h3l4b5RwT7sRuSyHtTtYHPCnU9U7sLQ3AbMsclgtJukHXDitlccg==} engines: {node: '>=18.0.0'} peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.2.7 + storybook: ^8.2.8 typescript: '>= 4.2.x' peerDependenciesMeta: typescript: optional: true - '@storybook/source-loader@8.2.7': - resolution: {integrity: sha512-2y0eeWryFFwv48hox3SIleLbdRI78MEBMa1CEovfd3UBvHfPR5Vmdslf/bV4lQBasxWOZGHcxaovTotawXujSg==} + '@storybook/source-loader@8.2.8': + resolution: {integrity: sha512-0KGuRfk0PGj4+eO8eXFG0TUZQzHz8K2s7ududkH7PNqjy513/aPfqYpwW+5XfJWT+fM8RmlajgSgI5Kzl8ciDQ==} peerDependencies: - storybook: ^8.2.7 + storybook: ^8.2.8 - '@storybook/test@8.2.7': - resolution: {integrity: sha512-7xypGR0zjJaM5MkxIz513SYiGs5vDJZL1bbkG1YKeBMff+ZRpa8y8VDYn/WDWuDw76KcFEXoPsPzKwktGhvnpw==} + '@storybook/test@8.2.8': + resolution: {integrity: sha512-Lbt4DHP8WhnakTPw981kP85DeoONKN+zVLjFPa5ptllyT+jazZANjIdGhNUlBdIzOw3oyDXhGlWIdtqztS3pSA==} peerDependencies: - storybook: ^8.2.7 + storybook: ^8.2.8 - '@storybook/theming@8.2.7': - resolution: {integrity: sha512-+iqm0GfRkshrjjNSOzwl7AD2m+LtJGXJCr93ke1huDK497WUKbX1hbbw51h5E1tEkx0c2wIqUlaqCM+7XMYcpw==} + '@storybook/theming@8.2.8': + resolution: {integrity: sha512-jt5oUO82LN3z5aygNdHucBZcErSicIAwzhR5Kz9E/C9wUbhyZhbWsWyhpZaytu8LJUj2YWAIPS8kq/jGx+qLZA==} peerDependencies: - storybook: ^8.2.7 + storybook: ^8.2.8 - '@storybook/types@8.2.7': - resolution: {integrity: sha512-dYPokh7dOVpMo5kT8WQn4X/0ApqZGz8A2o8dLf16LyGNBIeFXYzIv4BvP89BUjmSzEj2J4d1hNuI5dvq5khBRg==} + '@storybook/types@8.2.8': + resolution: {integrity: sha512-JacKzY2q5lzwnigBxhpSmB0cJCsEWRhpkjrX/GUKa5YZJsHtPQ3GAKVRGrF1/iGRrRo+lufFowBzB9BdzSn6Dw==} peerDependencies: - storybook: ^8.2.7 + storybook: ^8.2.8 '@svgr/babel-plugin-add-jsx-attribute@8.0.0': resolution: {integrity: sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==} @@ -6521,8 +6530,8 @@ packages: react-dom: optional: true - storybook@8.2.7: - resolution: {integrity: sha512-Jb9DXue1sr3tKkpuq66VP5ItOKTpxL6t99ze1wXDbjCvPiInTdPA5AyFEjBuKjOBIh28bayYoOZa6/xbMJV+Wg==} + storybook@8.2.8: + resolution: {integrity: sha512-sh4CNCXkieVgJ5GXrCOESS0BjRbQ9wG7BVnurQPl6izNnB9zR8rag+aUmjPZWBwbj55V1BFA5A/vEsCov21qjg==} hasBin: true stream-combiner2@1.1.1: @@ -9366,76 +9375,76 @@ snapshots: dependencies: '@sinonjs/commons': 3.0.1 - '@storybook/addon-actions@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': + '@storybook/addon-actions@8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': dependencies: '@storybook/global': 5.0.0 '@types/uuid': 9.0.8 dequal: 2.0.3 polished: 4.3.1 - storybook: 8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)) + storybook: 8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)) uuid: 9.0.1 - '@storybook/addon-backgrounds@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': + '@storybook/addon-backgrounds@8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': dependencies: '@storybook/global': 5.0.0 memoizerific: 1.11.3 - storybook: 8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)) + storybook: 8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)) ts-dedent: 2.2.0 - '@storybook/addon-controls@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': + '@storybook/addon-controls@8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': dependencies: dequal: 2.0.3 lodash: 4.17.21 - storybook: 8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)) + storybook: 8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)) ts-dedent: 2.2.0 - '@storybook/addon-docs@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': + '@storybook/addon-docs@8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': dependencies: '@babel/core': 7.24.6 '@mdx-js/react': 3.0.1(@types/react@18.3.3)(react@18.3.1) - '@storybook/blocks': 8.2.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))) - '@storybook/csf-plugin': 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))) + '@storybook/blocks': 8.2.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))) + '@storybook/csf-plugin': 8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))) '@storybook/global': 5.0.0 - '@storybook/react-dom-shim': 8.2.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))) + '@storybook/react-dom-shim': 8.2.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))) '@types/react': 18.3.3 fs-extra: 11.2.0 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) rehype-external-links: 3.0.0 rehype-slug: 6.0.0 - storybook: 8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)) + storybook: 8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)) ts-dedent: 2.2.0 transitivePeerDependencies: - supports-color - '@storybook/addon-essentials@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': - dependencies: - '@storybook/addon-actions': 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))) - '@storybook/addon-backgrounds': 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))) - '@storybook/addon-controls': 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))) - '@storybook/addon-docs': 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))) - '@storybook/addon-highlight': 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))) - '@storybook/addon-measure': 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))) - '@storybook/addon-outline': 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))) - '@storybook/addon-toolbars': 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))) - '@storybook/addon-viewport': 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))) - storybook: 8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)) + '@storybook/addon-essentials@8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': + dependencies: + '@storybook/addon-actions': 8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))) + '@storybook/addon-backgrounds': 8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))) + '@storybook/addon-controls': 8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))) + '@storybook/addon-docs': 8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))) + '@storybook/addon-highlight': 8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))) + '@storybook/addon-measure': 8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))) + '@storybook/addon-outline': 8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))) + '@storybook/addon-toolbars': 8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))) + '@storybook/addon-viewport': 8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))) + storybook: 8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)) ts-dedent: 2.2.0 transitivePeerDependencies: - supports-color - '@storybook/addon-highlight@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': + '@storybook/addon-highlight@8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': dependencies: '@storybook/global': 5.0.0 - storybook: 8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)) + storybook: 8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)) - '@storybook/addon-interactions@8.2.7(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.13)(ts-node@10.9.2(@types/node@20.14.13)(typescript@5.4.5)))(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': + '@storybook/addon-interactions@8.2.8(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.13)(ts-node@10.9.2(@types/node@20.14.13)(typescript@5.4.5)))(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': dependencies: '@storybook/global': 5.0.0 - '@storybook/instrumenter': 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))) - '@storybook/test': 8.2.7(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.13)(ts-node@10.9.2(@types/node@20.14.13)(typescript@5.4.5)))(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))) + '@storybook/instrumenter': 8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))) + '@storybook/test': 8.2.8(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.13)(ts-node@10.9.2(@types/node@20.14.13)(typescript@5.4.5)))(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))) polished: 4.3.1 - storybook: 8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)) + storybook: 8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)) ts-dedent: 2.2.0 transitivePeerDependencies: - '@jest/globals' @@ -9444,48 +9453,48 @@ snapshots: - jest - vitest - '@storybook/addon-links@8.2.7(react@18.3.1)(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': + '@storybook/addon-links@8.2.8(react@18.3.1)(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': dependencies: '@storybook/csf': 0.1.11 '@storybook/global': 5.0.0 - storybook: 8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)) + storybook: 8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)) ts-dedent: 2.2.0 optionalDependencies: react: 18.3.1 - '@storybook/addon-measure@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': + '@storybook/addon-measure@8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': dependencies: '@storybook/global': 5.0.0 - storybook: 8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)) + storybook: 8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)) tiny-invariant: 1.3.3 - '@storybook/addon-outline@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': + '@storybook/addon-outline@8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': dependencies: '@storybook/global': 5.0.0 - storybook: 8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)) + storybook: 8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)) ts-dedent: 2.2.0 - '@storybook/addon-storysource@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': + '@storybook/addon-storysource@8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': dependencies: - '@storybook/source-loader': 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))) + '@storybook/source-loader': 8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))) estraverse: 5.3.0 - storybook: 8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)) + storybook: 8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)) tiny-invariant: 1.3.3 - '@storybook/addon-toolbars@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': + '@storybook/addon-toolbars@8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': dependencies: - storybook: 8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)) + storybook: 8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)) - '@storybook/addon-viewport@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': + '@storybook/addon-viewport@8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': dependencies: memoizerific: 1.11.3 - storybook: 8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)) + storybook: 8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)) - '@storybook/blocks@8.2.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': + '@storybook/blocks@8.2.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': dependencies: '@storybook/csf': 0.1.11 '@storybook/global': 5.0.0 - '@storybook/icons': 1.2.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@storybook/icons': 1.2.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@types/lodash': 4.17.4 color-convert: 2.0.1 dequal: 2.0.3 @@ -9494,7 +9503,7 @@ snapshots: memoizerific: 1.11.3 polished: 4.3.1 react-colorful: 5.6.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - storybook: 8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)) + storybook: 8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)) telejson: 7.2.0 ts-dedent: 2.2.0 util-deprecate: 1.0.2 @@ -9502,9 +9511,9 @@ snapshots: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) - '@storybook/builder-vite@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)))(typescript@5.4.5)(vite@5.3.5(@types/node@20.14.13))': + '@storybook/builder-vite@8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)))(typescript@5.4.5)(vite@5.3.5(@types/node@20.14.13))': dependencies: - '@storybook/csf-plugin': 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))) + '@storybook/csf-plugin': 8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))) '@types/find-cache-dir': 3.2.1 browser-assert: 1.2.1 es-module-lexer: 1.5.3 @@ -9512,7 +9521,7 @@ snapshots: find-cache-dir: 3.3.2 fs-extra: 11.2.0 magic-string: 0.30.8 - storybook: 8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)) + storybook: 8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)) ts-dedent: 2.2.0 vite: 5.3.5(@types/node@20.14.13) optionalDependencies: @@ -9520,12 +9529,12 @@ snapshots: transitivePeerDependencies: - supports-color - '@storybook/codemod@8.2.7': + '@storybook/codemod@8.2.8': dependencies: '@babel/core': 7.24.6 '@babel/preset-env': 7.24.6(@babel/core@7.24.6) '@babel/types': 7.24.6 - '@storybook/core': 8.2.7 + '@storybook/core': 8.2.8 '@storybook/csf': 0.1.11 '@types/cross-spawn': 6.0.6 cross-spawn: 7.0.3 @@ -9540,9 +9549,9 @@ snapshots: - supports-color - utf-8-validate - '@storybook/components@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': + '@storybook/components@8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': dependencies: - storybook: 8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)) + storybook: 8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)) '@storybook/core-events@8.1.11': dependencies: @@ -9550,7 +9559,7 @@ snapshots: ts-dedent: 2.2.0 optional: true - '@storybook/core@8.2.7': + '@storybook/core@8.2.8': dependencies: '@storybook/csf': 0.1.11 '@types/express': 4.17.21 @@ -9568,9 +9577,9 @@ snapshots: - supports-color - utf-8-validate - '@storybook/csf-plugin@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': + '@storybook/csf-plugin@8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': dependencies: - storybook: 8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)) + storybook: 8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)) unplugin: 1.10.1 '@storybook/csf@0.0.1': @@ -9583,45 +9592,45 @@ snapshots: '@storybook/global@5.0.0': {} - '@storybook/icons@1.2.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@storybook/icons@1.2.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) - '@storybook/instrumenter@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': + '@storybook/instrumenter@8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': dependencies: '@storybook/global': 5.0.0 '@vitest/utils': 1.6.0 - storybook: 8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)) + storybook: 8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)) util: 0.12.5 - '@storybook/manager-api@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': + '@storybook/manager-api@8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': dependencies: - storybook: 8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)) + storybook: 8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)) - '@storybook/preview-api@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': + '@storybook/preview-api@8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': dependencies: - storybook: 8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)) + storybook: 8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)) - '@storybook/react-dom-shim@8.2.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': + '@storybook/react-dom-shim@8.2.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': dependencies: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) - storybook: 8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)) + storybook: 8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)) - '@storybook/react-vite@8.2.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.14.0)(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)))(typescript@5.4.5)(vite@5.3.5(@types/node@20.14.13))': + '@storybook/react-vite@8.2.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.14.0)(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)))(typescript@5.4.5)(vite@5.3.5(@types/node@20.14.13))': dependencies: '@joshwooding/vite-plugin-react-docgen-typescript': 0.3.1(typescript@5.4.5)(vite@5.3.5(@types/node@20.14.13)) '@rollup/pluginutils': 5.1.0(rollup@4.14.0) - '@storybook/builder-vite': 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)))(typescript@5.4.5)(vite@5.3.5(@types/node@20.14.13)) - '@storybook/react': 8.2.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)))(typescript@5.4.5) + '@storybook/builder-vite': 8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)))(typescript@5.4.5)(vite@5.3.5(@types/node@20.14.13)) + '@storybook/react': 8.2.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)))(typescript@5.4.5) find-up: 5.0.0 magic-string: 0.30.8 react: 18.3.1 react-docgen: 7.0.3 react-dom: 18.3.1(react@18.3.1) resolve: 1.22.8 - storybook: 8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)) + storybook: 8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)) tsconfig-paths: 4.2.0 vite: 5.3.5(@types/node@20.14.13) transitivePeerDependencies: @@ -9631,14 +9640,14 @@ snapshots: - typescript - vite-plugin-glimmerx - '@storybook/react@8.2.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)))(typescript@5.4.5)': + '@storybook/react@8.2.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)))(typescript@5.4.5)': dependencies: - '@storybook/components': 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))) + '@storybook/components': 8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))) '@storybook/global': 5.0.0 - '@storybook/manager-api': 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))) - '@storybook/preview-api': 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))) - '@storybook/react-dom-shim': 8.2.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))) - '@storybook/theming': 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))) + '@storybook/manager-api': 8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))) + '@storybook/preview-api': 8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))) + '@storybook/react-dom-shim': 8.2.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))) + '@storybook/theming': 8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))) '@types/escodegen': 0.0.6 '@types/estree': 0.0.51 '@types/node': 18.19.29 @@ -9653,31 +9662,31 @@ snapshots: react-dom: 18.3.1(react@18.3.1) react-element-to-jsx-string: 15.0.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) semver: 7.6.0 - storybook: 8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)) + storybook: 8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)) ts-dedent: 2.2.0 type-fest: 2.19.0 util-deprecate: 1.0.2 optionalDependencies: typescript: 5.4.5 - '@storybook/source-loader@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': + '@storybook/source-loader@8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': dependencies: '@storybook/csf': 0.1.11 estraverse: 5.3.0 lodash: 4.17.21 prettier: 3.3.3 - storybook: 8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)) + storybook: 8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)) - '@storybook/test@8.2.7(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.13)(ts-node@10.9.2(@types/node@20.14.13)(typescript@5.4.5)))(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': + '@storybook/test@8.2.8(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.13)(ts-node@10.9.2(@types/node@20.14.13)(typescript@5.4.5)))(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': dependencies: '@storybook/csf': 0.1.11 - '@storybook/instrumenter': 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))) + '@storybook/instrumenter': 8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))) '@testing-library/dom': 10.1.0 '@testing-library/jest-dom': 6.4.5(@jest/globals@29.7.0)(@types/jest@29.5.12)(jest@29.7.0(@types/node@20.14.13)(ts-node@10.9.2(@types/node@20.14.13)(typescript@5.4.5))) '@testing-library/user-event': 14.5.2(@testing-library/dom@10.1.0) '@vitest/expect': 1.6.0 '@vitest/spy': 1.6.0 - storybook: 8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)) + storybook: 8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)) util: 0.12.5 transitivePeerDependencies: - '@jest/globals' @@ -9686,13 +9695,13 @@ snapshots: - jest - vitest - '@storybook/theming@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': + '@storybook/theming@8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': dependencies: - storybook: 8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)) + storybook: 8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)) - '@storybook/types@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': + '@storybook/types@8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)))': dependencies: - storybook: 8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)) + storybook: 8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)) '@svgr/babel-plugin-add-jsx-attribute@8.0.0(@babel/core@7.24.6)': dependencies: @@ -14732,24 +14741,24 @@ snapshots: statuses@2.0.1: {} - storybook-addon-theme-provider@0.2.2(@storybook/blocks@8.2.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))))(@storybook/components@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))))(@storybook/core-events@8.1.11)(@storybook/manager-api@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))))(@storybook/preview-api@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))))(@storybook/theming@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))))(@storybook/types@8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))))(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + storybook-addon-theme-provider@0.2.2(@storybook/blocks@8.2.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))))(@storybook/components@8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))))(@storybook/core-events@8.1.11)(@storybook/manager-api@8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))))(@storybook/preview-api@8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))))(@storybook/theming@8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))))(@storybook/types@8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))))(react-dom@18.3.1(react@18.3.1))(react@18.3.1): optionalDependencies: - '@storybook/blocks': 8.2.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))) - '@storybook/components': 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))) + '@storybook/blocks': 8.2.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))) + '@storybook/components': 8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))) '@storybook/core-events': 8.1.11 - '@storybook/manager-api': 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))) - '@storybook/preview-api': 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))) - '@storybook/theming': 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))) - '@storybook/types': 8.2.7(storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6))) + '@storybook/manager-api': 8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))) + '@storybook/preview-api': 8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))) + '@storybook/theming': 8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))) + '@storybook/types': 8.2.8(storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6))) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) - storybook@8.2.7(@babel/preset-env@7.24.6(@babel/core@7.24.6)): + storybook@8.2.8(@babel/preset-env@7.24.6(@babel/core@7.24.6)): dependencies: '@babel/core': 7.24.6 '@babel/types': 7.24.6 - '@storybook/codemod': 8.2.7 - '@storybook/core': 8.2.7 + '@storybook/codemod': 8.2.8 + '@storybook/core': 8.2.8 '@types/semver': 7.5.8 '@yarnpkg/fslib': 2.10.3 '@yarnpkg/libzip': 2.3.0 diff --git a/src/env/theme-playground/PlaygroundPanel/Control.tsx b/src/env/theme-playground/PlaygroundPanel/Control.tsx new file mode 100644 index 00000000..ac1cfe41 --- /dev/null +++ b/src/env/theme-playground/PlaygroundPanel/Control.tsx @@ -0,0 +1,51 @@ +import type {FC} from 'react'; +// @ts-expect-error TODO: maybe fix later +// eslint-disable-next-line @typescript-eslint/no-unused-vars +import React, {useState, useEffect, useCallback} from 'react'; +import {styled} from '@storybook/theming'; +import {ColorControl} from '@storybook/blocks'; + +export type Props = { + onChange: (name: string, value?: string) => void; + value?: string; + name: string; +}; + +const Wrapper = styled.div` + display: flex; + flex-direction: row; + text-align: left; + flex-shrink: 1; + align-items: center; + gap: 12px; + & input { + width: 210px; + } +`; + +const Label = styled.label` + font-weight: bold; + font-size: 14px; +`; + +export const Control: FC = ({onChange, value: valueProp, name}) => { + const [value, setValue] = useState(valueProp); + useEffect(() => { + setValue(valueProp); + }, [valueProp]); + const handleChange = useCallback( + (value?: string) => { + setValue(value); + onChange(name, value); + }, + [name, onChange] + ); + return ( + + + + + ); +}; diff --git a/src/env/theme-playground/PlaygroundPanel/Panel.tsx b/src/env/theme-playground/PlaygroundPanel/Panel.tsx new file mode 100644 index 00000000..2a1b8ced --- /dev/null +++ b/src/env/theme-playground/PlaygroundPanel/Panel.tsx @@ -0,0 +1,67 @@ +import type {FC} from 'react'; +// @ts-expect-error TODO: maybe fix later +// eslint-disable-next-line @typescript-eslint/no-unused-vars +import React, {useCallback, useEffect} from 'react'; +import {useChannel} from '@storybook/manager-api'; +import {AddonPanel, ActionBar} from '@storybook/components'; +import {useAddonState} from '@storybook/manager-api'; + +import {useGlobalThemesManager} from './../useGlobalThemes.ts'; +import {EVENTS} from '../constants'; +import {Playground} from './Playground'; +import {ADDON_ID} from '../constants'; + +type PanelProps = { + active: boolean; +}; + +export const Panel: FC = props => { + const [theme, setTheme] = useAddonState(ADDON_ID, {}); + + const {themes, selectedTheme} = useGlobalThemesManager(); + + const vanillaTheme = themes?.find( + ({name}) => Boolean(selectedTheme) && name === selectedTheme + )?.themeObject; + + const handleThemeReset = useCallback(() => { + setTheme({}); + }, [setTheme]); + + const emit = useChannel({[EVENTS.RESET_THEME]: handleThemeReset}); + + useEffect(() => { + emit(EVENTS.SET_THEME, theme); + }, [emit, theme]); + + const handleColorChange = useCallback( + (change: Record) => { + change && setTheme({...theme, ...change}); + }, + [setTheme, theme] + ); + + const handleBackgroundInvert = useCallback((nextBgColors: object) => { + console.log('invert', nextBgColors); + }, []); + + const handleReset = useCallback(() => { + emit(EVENTS.RESET_THEME); + }, [emit]); + + return ( + + + {}}, + {title: 'Reset theme', onClick: handleReset}, + ]}> + + ); +}; diff --git a/src/env/theme-playground/PlaygroundPanel/Playground.tsx b/src/env/theme-playground/PlaygroundPanel/Playground.tsx new file mode 100644 index 00000000..a3da1438 --- /dev/null +++ b/src/env/theme-playground/PlaygroundPanel/Playground.tsx @@ -0,0 +1,140 @@ +import type {FC} from 'react'; +// @ts-expect-error TODO: maybe fix later +// eslint-disable-next-line @typescript-eslint/no-unused-vars +import React, {useCallback} from 'react'; +import {styled} from '@storybook/theming'; +// import {BooleanControl} from '@storybook/blocks'; + +import type {PublicThemeType} from './../../../lib/Theme'; +import {ColorsList} from '../types'; +import {Control} from './Control'; + +type PanelContentProps = { + onColorChange: (arg0: Record) => void; + onBackgroundInvert: (bgColors: object) => void; + vanillaTheme?: PublicThemeType; + theme: Partial; +}; + +const Wrapper = styled.div` + padding: 12px; +`; + +const FieldSet = styled.fieldset` + display: flex; + flex-direction: row; + gap: 36px; + max-width: 100%; + align-items: center; + flex-wrap: wrap; + margin-bottom: 24px; + border-color: hsla(203, 50%, 30%, 0.15); +`; + +const Legend = styled.legend` + font-size: 16px; + color: #73828c; + font-weight: bolder; +`; + +// const BooleanWrapper = styled.div` +// display: flex; +// flex-direction: row; +// gap: 12px; +// align-items: center; +// & > span { +// font-weight: bold; +// } +// & > label { +// margin-bottom: 0; +// } +// `; + +// type BackgroundColors = { +// background000?: string; +// background100?: string; +// background200?: string; +// background300?: string; +// background400?: string; +// background500?: string; +// background600?: string; +// }; +// +// const getBackground = (theme: BackgroundColors & unknown): BackgroundColors => { +// return { +// background000: theme['background000'], +// background100: theme['background100'], +// background200: theme['background200'], +// background300: theme['background300'], +// background400: theme['background400'], +// background500: theme['background500'], +// background600: theme['background600'], +// }; +// }; +// +// const getInvertedBackground = (theme: BackgroundColors & unknown): BackgroundColors => { +// return { +// background000: theme['background600'], +// background100: theme['background500'], +// background200: theme['background400'], +// background300: theme['background300'], +// background400: theme['background200'], +// background500: theme['background100'], +// background600: theme['background000'], +// }; +// }; + +export const Playground: FC = ({onColorChange, vanillaTheme, theme}) => { + // const [inverted, setInverted] = useState(false); + + const handleChange = useCallback( + (name?: string, value?: string) => { + name && value && onColorChange({[name]: value}); + }, + [onColorChange] + ); + + // TODO: mode logic to Panel. Fix state problem + // const handleInvert = useCallback( + // (value?: boolean) => { + // setInverted(value); + // if (vanillaTheme) { + // const nextTheme = value + // ? getInvertedBackground(vanillaTheme) + // : getBackground(vanillaTheme); + // onColorChange(nextTheme); + // } + // }, + // [onColorChange, setInverted, vanillaTheme] + // ); + + return ( + +
+ Brand colors + {Object.values(ColorsList).map(colorToken => { + return ( + + ); + })} +
+
+ Other colors + {/**/} + {/* Invert background colors:*/} + {/* */} + {/**/} + +
+ + ); +}; diff --git a/src/env/theme-playground/PlaygroundPanel/index.ts b/src/env/theme-playground/PlaygroundPanel/index.ts new file mode 100644 index 00000000..3702ffda --- /dev/null +++ b/src/env/theme-playground/PlaygroundPanel/index.ts @@ -0,0 +1 @@ +export {Panel} from './Panel'; diff --git a/src/env/theme-playground/ThemeSwitcherTool/Color.tsx b/src/env/theme-playground/ThemeSwitcherTool/Color.tsx new file mode 100644 index 00000000..e9efd6fb --- /dev/null +++ b/src/env/theme-playground/ThemeSwitcherTool/Color.tsx @@ -0,0 +1,16 @@ +import type {FC} from 'react'; +import {styled} from '@storybook/theming'; + +const gradient = + 'linear-gradient(-45deg, transparent, transparent 45%, pink 45%, pink 55%, transparent 55%, transparent 100%)'; + +export const Color: FC<{colorName?: string}> = ({colorName = gradient}) => { + return ; +}; + +export const ColorDiv = styled.div({ + width: '16px', + height: '16px', + borderRadius: '8px', + border: '1px solid lightgray', +}); diff --git a/src/env/theme-playground/ThemeSwitcherTool/ThemeList.tsx b/src/env/theme-playground/ThemeSwitcherTool/ThemeList.tsx new file mode 100644 index 00000000..4d6fd652 --- /dev/null +++ b/src/env/theme-playground/ThemeSwitcherTool/ThemeList.tsx @@ -0,0 +1,39 @@ +import type {FC} from 'react'; +// @ts-expect-error TODO: maybe fix later +// eslint-disable-next-line @typescript-eslint/no-unused-vars +import React from 'react'; +import {ListItem, TooltipMessage} from '@storybook/components'; + +import type {ThemeConfigType} from '../types'; +import {useGlobalThemesManager} from '../useGlobalThemes'; +import {Color} from './Color'; + +export const ThemeList: FC<{ + themes?: ThemeConfigType[]; + onSelect: (name: string) => void; +}> = ({themes, onSelect}) => { + const {selectedTheme} = useGlobalThemesManager(); + const hasConfig = Boolean(themes) && Array.isArray(themes) && Boolean(selectedTheme); + return hasConfig ? ( +
+ {themes.map(({name, color}) => { + return ( + { + selectedTheme !== name && onSelect(name); + }} + key={name} + title={name} + right={} + /> + ); + })} +
+ ) : ( + + ); +}; diff --git a/src/env/theme-playground/ThemeSwitcherTool/ThemeSwitcherTool.tsx b/src/env/theme-playground/ThemeSwitcherTool/ThemeSwitcherTool.tsx new file mode 100644 index 00000000..b970392d --- /dev/null +++ b/src/env/theme-playground/ThemeSwitcherTool/ThemeSwitcherTool.tsx @@ -0,0 +1,28 @@ +// @ts-expect-error TODO: maybe fix later +// eslint-disable-next-line @typescript-eslint/no-unused-vars +import React, {memo, useCallback} from 'react'; +import {IconButton, WithTooltipPure} from '@storybook/components'; +import {MirrorIcon} from '@storybook/icons'; + +import {TOOL_ID} from '../constants'; +import {ThemeList} from './ThemeList'; +import {useGlobalThemesManager} from '../useGlobalThemes'; + +export const ThemeSwitcherTool = memo(function MyAddonSelector() { + const {themes, setSelectedTheme} = useGlobalThemesManager(); + + const handleSelect = useCallback( + (name: string) => { + setSelectedTheme(name); + }, + [setSelectedTheme] + ); + + return ( + }> + + + + + ); +}); diff --git a/src/env/theme-playground/ThemeSwitcherTool/index.ts b/src/env/theme-playground/ThemeSwitcherTool/index.ts new file mode 100644 index 00000000..1f44a0dd --- /dev/null +++ b/src/env/theme-playground/ThemeSwitcherTool/index.ts @@ -0,0 +1,2 @@ +export {ThemeSwitcherTool} from './ThemeSwitcherTool.tsx'; +export {withThemeProvider} from './withThemeProvider.tsx'; diff --git a/src/env/theme-playground/ThemeSwitcherTool/withThemeProvider.tsx b/src/env/theme-playground/ThemeSwitcherTool/withThemeProvider.tsx new file mode 100644 index 00000000..0ee39b6a --- /dev/null +++ b/src/env/theme-playground/ThemeSwitcherTool/withThemeProvider.tsx @@ -0,0 +1,38 @@ +import type {FC, ReactNode} from 'react'; +// @ts-expect-error TODO: maybe fix later +// eslint-disable-next-line @typescript-eslint/no-unused-vars +import React, {useState, useCallback, useEffect} from 'react'; +import {useChannel} from '@storybook/preview-api'; + +import type {PublicThemeType} from './../../../lib/Theme'; +import {EVENTS} from '../constants'; +import {useGlobalThemesPreview} from './../useGlobalThemes.ts'; + +export const withThemeProvider = + (Provider: FC<{children?: ReactNode; theme?: PublicThemeType}>) => + // eslint-disable-next-line react/display-name + (Story: FC) => { + const {themes = [], selectedTheme} = useGlobalThemesPreview(); + const vanillaTheme = themes.find( + ({name}) => Boolean(selectedTheme) && name === selectedTheme + )?.themeObject; + const [tweakTheme, setTweakTheme] = useState({}); + + const handleThemeChange = useCallback((nextTheme: Record) => { + setTweakTheme(nextTheme); + }, []); + + const emit = useChannel({ + [EVENTS.SET_THEME]: handleThemeChange, + }); + + useEffect(() => { + emit(EVENTS.RESET_THEME); + }, [emit, selectedTheme]); + + return ( + + + + ); + }; diff --git a/src/env/theme-playground/constants.ts b/src/env/theme-playground/constants.ts new file mode 100644 index 00000000..3738d08e --- /dev/null +++ b/src/env/theme-playground/constants.ts @@ -0,0 +1,8 @@ +export const ADDON_ID = 'storybook-addon-koval'; +export const TOOL_ID = `${ADDON_ID}/tool`; +export const PANEL_ID = `${ADDON_ID}/panel`; + +export const EVENTS = { + SET_THEME: `${ADDON_ID}/set_theme`, + RESET_THEME: `${ADDON_ID}/reset_theme`, +}; diff --git a/src/env/theme-playground/types.ts b/src/env/theme-playground/types.ts new file mode 100644 index 00000000..ba70b935 --- /dev/null +++ b/src/env/theme-playground/types.ts @@ -0,0 +1,16 @@ +import type {PublicThemeType} from './../../lib/Theme'; + +export type ThemeConfigType = { + name: string; + color?: string; + themeObject: PublicThemeType; +}; + +export enum ColorsList { + do = 'colorDo', + re = 'colorRe', + mi = 'colorMi', + fa = 'colorFa', + sol = 'colorSol', + la = 'colorLa', +} diff --git a/src/env/theme-playground/useGlobalThemes.ts b/src/env/theme-playground/useGlobalThemes.ts new file mode 100644 index 00000000..32e03b6c --- /dev/null +++ b/src/env/theme-playground/useGlobalThemes.ts @@ -0,0 +1,31 @@ +import {useGlobals as useGlobalsManager} from '@storybook/manager-api'; +import {useGlobals as useGlobalsPreview} from '@storybook/preview-api'; +import {useCallback} from 'react'; + +import type {ThemeConfigType} from './types.ts'; + +export const useGlobalThemesManager = (): { + themes?: ThemeConfigType[]; + selectedTheme?: string; + setSelectedTheme: (nextTheme: string) => void; +} => { + const [{themes, selectedTheme}, updateGlobals] = useGlobalsManager(); + + const setSelectedTheme = useCallback( + (nextTheme: string) => { + updateGlobals({selectedTheme: nextTheme}); + }, + [updateGlobals] + ); + + return {themes, setSelectedTheme, selectedTheme}; +}; + +export const useGlobalThemesPreview = (): { + selectedTheme?: string; + themes?: ThemeConfigType[]; +} => { + const [{themes, selectedTheme}] = useGlobalsPreview(); + + return {themes, selectedTheme}; +};