diff --git a/.changeset/storybook-dark-mode-fork.md b/.changeset/storybook-dark-mode-fork.md new file mode 100644 index 0000000000000..e6cf2e6fea669 --- /dev/null +++ b/.changeset/storybook-dark-mode-fork.md @@ -0,0 +1,7 @@ +--- +'@rocket.chat/storybook-dark-mode': minor +--- + +Declares `storybook` as a peer dependency, at `^9.0.0`. The addon has always imported from `storybook/preview-api`, `storybook/manager-api`, `storybook/theming` and several `storybook/internal/*` paths, but never said so, which left the requirement implicit and the internal APIs it relies on without a version contract. + +Also stops shipping `.d.ts` and `.d.ts.map` files inside `dist/esm` and `dist/cjs`. Declarations were being emitted three times over and only the `dist/ts` copy is referenced by `types`, so the other two were dead weight in the tarball. Anything deep-importing types from `dist/esm` or `dist/cjs` — as opposed to resolving them through the package entry point — needs to use `dist/ts` instead. diff --git a/packages/livechat/.storybook/main.ts b/packages/livechat/.storybook/main.ts index 70eab1ca0e1f6..128cb43b053a6 100644 --- a/packages/livechat/.storybook/main.ts +++ b/packages/livechat/.storybook/main.ts @@ -67,7 +67,7 @@ const config: StorybookConfig = { }, }, '@storybook/addon-webpack5-compiler-swc', - 'storybook-dark-mode', + '@rocket.chat/storybook-dark-mode', ], framework: { diff --git a/packages/livechat/package.json b/packages/livechat/package.json index 475572affcd22..70752be886f66 100644 --- a/packages/livechat/package.json +++ b/packages/livechat/package.json @@ -61,6 +61,7 @@ "@rocket.chat/fuselage-hooks": "^0.43.1", "@rocket.chat/fuselage-tokens": "^0.34.0", "@rocket.chat/logo": "^0.33.2", + "@rocket.chat/storybook-dark-mode": "workspace:~", "@rocket.chat/ui-contexts": "workspace:^", "@storybook/addon-docs": "^9.1.20", "@storybook/addon-styling-webpack": "^1.0.1", @@ -101,7 +102,6 @@ "sass": "~1.80.7", "sass-loader": "~16.0.8", "storybook": "^9.1.20", - "storybook-dark-mode": "^5.0.0", "style-loader": "^1.3.0", "stylelint": "^16.10.0", "stylelint-order": "^6.0.4", diff --git a/packages/storybook-config/package.json b/packages/storybook-config/package.json index 2fb0d6d8ffca0..9c17b0e2b4f90 100644 --- a/packages/storybook-config/package.json +++ b/packages/storybook-config/package.json @@ -22,6 +22,7 @@ "@rocket.chat/emitter": "workspace:~", "@rocket.chat/fuselage-hooks": "^0.43.1", "@rocket.chat/fuselage-tokens": "^0.34.0", + "@rocket.chat/storybook-dark-mode": "workspace:~", "@storybook/addon-a11y": "^9.1.20", "@storybook/addon-docs": "^9.1.20", "@storybook/addon-styling-webpack": "^2.0.0", @@ -29,7 +30,6 @@ "@storybook/react-webpack5": "^9.1.20", "react-virtuoso": "~4.18.12", "storybook": "^9.1.20", - "storybook-dark-mode": "^5.0.0", "webpack": "~5.104.1" }, "devDependencies": { diff --git a/packages/storybook-config/src/DocsContainer.tsx b/packages/storybook-config/src/DocsContainer.tsx index 59bc81570a441..130eec16edbd2 100644 --- a/packages/storybook-config/src/DocsContainer.tsx +++ b/packages/storybook-config/src/DocsContainer.tsx @@ -1,9 +1,9 @@ +import { DARK_MODE_EVENT_NAME } from '@rocket.chat/storybook-dark-mode'; import { DocsContainer as BaseContainer } from '@storybook/addon-docs/blocks'; import type { ComponentPropsWithoutRef } from 'react'; import { useEffect, useState } from 'react'; import { addons } from 'storybook/preview-api'; import { themes } from 'storybook/theming'; -import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode'; const channel = addons.getChannel(); diff --git a/packages/storybook-config/src/main.ts b/packages/storybook-config/src/main.ts index 0f63732e0acf4..3f56a8b960d33 100644 --- a/packages/storybook-config/src/main.ts +++ b/packages/storybook-config/src/main.ts @@ -12,7 +12,7 @@ const baseConfig = (customConfig?: Partial): StorybookConfig => addons: [ getAbsolutePath('@storybook/addon-a11y'), getAbsolutePath('@storybook/addon-docs'), - getAbsolutePath('storybook-dark-mode'), + getAbsolutePath('@rocket.chat/storybook-dark-mode'), getAbsolutePath('@storybook/addon-webpack5-compiler-swc'), getAbsolutePath('@storybook/addon-styling-webpack'), ], diff --git a/packages/storybook-config/src/preview.tsx b/packages/storybook-config/src/preview.tsx index b5c92c50d1d22..601c87d956d36 100644 --- a/packages/storybook-config/src/preview.tsx +++ b/packages/storybook-config/src/preview.tsx @@ -1,8 +1,8 @@ import { PaletteStyleTag } from '@rocket.chat/fuselage'; import surface from '@rocket.chat/fuselage-tokens/dist/surface.json'; +import { useDarkMode } from '@rocket.chat/storybook-dark-mode'; import type { Parameters, Decorator } from '@storybook/react'; import { themes } from 'storybook/theming'; -import { useDarkMode } from 'storybook-dark-mode'; import manifest from '../package.json'; import DocsContainer from './DocsContainer'; diff --git a/packages/storybook-dark-mode/CHANGELOG.md b/packages/storybook-dark-mode/CHANGELOG.md new file mode 100644 index 0000000000000..a2cb0b50b3d80 --- /dev/null +++ b/packages/storybook-dark-mode/CHANGELOG.md @@ -0,0 +1,19 @@ +# @rocket.chat/storybook-dark-mode + +## 4.2.1 + +### Patch Changes + +- [#2060](https://github.com/RocketChat/fuselage/pull/2060) [`ee381bb`](https://github.com/RocketChat/fuselage/commit/ee381bb32982d0f4ed9ef26385b5016e0a2e4023) Thanks [@tassoevan](https://github.com/tassoevan)! - feat: Remove deprecations and keep documentation comments + +## 4.2.0 + +### Minor Changes + +- [#1999](https://github.com/RocketChat/fuselage/pull/1999) [`6e37f9d`](https://github.com/RocketChat/fuselage/commit/6e37f9d2fee4c9ebeb8ea2c1601bbd4c89905859) Thanks [@tassoevan](https://github.com/tassoevan)! - feat!: Upgrade to React 19 + +## 4.1.0 + +### Minor Changes + +- [#1849](https://github.com/RocketChat/fuselage/pull/1849) [`99b319c`](https://github.com/RocketChat/fuselage/commit/99b319c6c2ef1015d1d1edb027068c23dc1e29d9) Thanks [@tassoevan](https://github.com/tassoevan)! - feat(storybook-dark-mode): Fork `storybook-dark-mode` diff --git a/packages/storybook-dark-mode/LICENSE b/packages/storybook-dark-mode/LICENSE new file mode 100644 index 0000000000000..bb150705f2b08 --- /dev/null +++ b/packages/storybook-dark-mode/LICENSE @@ -0,0 +1,20 @@ +Copyright (c) 2019 Andrew Lisowski +Copyright (c) 2026 Rocket.Chat Technologies Corp. + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. +IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, +DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR +OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE +OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/packages/storybook-dark-mode/package.json b/packages/storybook-dark-mode/package.json new file mode 100644 index 0000000000000..44613cc7e7908 --- /dev/null +++ b/packages/storybook-dark-mode/package.json @@ -0,0 +1,51 @@ +{ + "name": "@rocket.chat/storybook-dark-mode", + "version": "4.2.1", + "description": "Toggle between light and dark mode in Storybook (Rocket.Chat fork)", + "repository": { + "type": "git", + "url": "git+https://github.com/RocketChat/Rocket.Chat.git", + "directory": "packages/storybook-dark-mode" + }, + "license": "MIT", + "author": "Andrew Lisowski ", + "contributors": [ + "Rocket.Chat Technologies Corp." + ], + "main": "dist/cjs/index.js", + "module": "dist/esm/index.js", + "types": "dist/ts/index.d.ts", + "files": [ + "src", + "dist", + "preset.js" + ], + "scripts": { + "build": "rm -rf dist && tsc -p tsconfig.esm.json && tsc -p tsconfig.cjs.json && tsc -p tsconfig.build.json", + "lint": "eslint .", + "lint:fix": "eslint . --fix" + }, + "dependencies": { + "@storybook/global": "~5.0.0", + "@storybook/icons": "~1.6.0", + "fast-deep-equal": "~3.1.3" + }, + "devDependencies": { + "@rocket.chat/tsconfig": "workspace:~", + "@types/react": "~19.2.18", + "@types/react-dom": "~19.2.4", + "eslint": "~9.39.5", + "react": "~19.2.8", + "react-dom": "~19.2.8", + "storybook": "^9.1.20", + "typescript": "~5.9.3" + }, + "peerDependencies": { + "react": "*", + "react-dom": "*", + "storybook": "^9.0.0" + }, + "volta": { + "extends": "../../package.json" + } +} diff --git a/packages/storybook-dark-mode/preset.js b/packages/storybook-dark-mode/preset.js new file mode 100644 index 0000000000000..60dbce3d2f73b --- /dev/null +++ b/packages/storybook-dark-mode/preset.js @@ -0,0 +1,7 @@ +function managerEntries(entry = []) { + return [...entry, require.resolve('./dist/esm/preset/manager')]; +} + +module.exports = { + managerEntries, +}; diff --git a/packages/storybook-dark-mode/src/Tool.tsx b/packages/storybook-dark-mode/src/Tool.tsx new file mode 100644 index 0000000000000..e9230971a4121 --- /dev/null +++ b/packages/storybook-dark-mode/src/Tool.tsx @@ -0,0 +1,245 @@ +import { global } from '@storybook/global'; +import { MoonIcon, SunIcon } from '@storybook/icons'; +import equal from 'fast-deep-equal'; +import * as React from 'react'; +import { IconButton } from 'storybook/internal/components'; +import { STORY_CHANGED, SET_STORIES, DOCS_RENDERED } from 'storybook/internal/core-events'; +import type { API } from 'storybook/manager-api'; +import { useParameter } from 'storybook/manager-api'; +import type { ThemeVars } from 'storybook/theming'; +import { themes } from 'storybook/theming'; + +import { DARK_MODE_EVENT_NAME, UPDATE_DARK_MODE_EVENT_NAME } from './constants'; + +const { document, window } = global as { document: Document; window: Window }; +type Mode = 'light' | 'dark'; + +type DarkModeStore = { + /** The class target in the preview iframe */ + classTarget: string; + /** The current mode the storybook is set to */ + current: Mode; + /** The dark theme for storybook */ + dark: ThemeVars; + /** The dark class name for the preview iframe */ + darkClass: string | string[]; + /** The light theme for storybook */ + light: ThemeVars; + /** The light class name for the preview iframe */ + lightClass: string | string[]; + /** Apply mode to iframe */ + stylePreview: boolean; + /** Persist if the user has set the theme */ + userHasExplicitlySetTheTheme: boolean; +}; + +const STORAGE_KEY = 'sb-addon-themes-3'; +export const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); + +const defaultParams: Required> = { + classTarget: 'body', + dark: themes.dark, + darkClass: ['dark'], + light: themes.light, + lightClass: ['light'], + stylePreview: false, + userHasExplicitlySetTheTheme: false, +}; + +/** Persist the dark mode settings in localStorage */ +export const updateStore = (newStore: DarkModeStore) => { + window.localStorage.setItem(STORAGE_KEY, JSON.stringify(newStore)); +}; + +/** Add the light/dark class to an element */ +const toggleDarkClass = ( + el: Element, + { current, darkClass = defaultParams.darkClass, lightClass = defaultParams.lightClass }: DarkModeStore, +) => { + if (current === 'dark') { + el.classList.remove(...arrayify(lightClass)); + el.classList.add(...arrayify(darkClass)); + } else { + el.classList.remove(...arrayify(darkClass)); + el.classList.add(...arrayify(lightClass)); + } +}; + +/** Coerce a string to a single item array, or return an array as-is */ +const arrayify = (classes: string | string[]): string[] => { + const arr: string[] = []; + return arr.concat(classes).map((item) => item); +}; + +/** Update the preview iframe class */ +const updatePreview = (store: DarkModeStore) => { + const iframe = document.getElementById('storybook-preview-iframe') as HTMLIFrameElement; + + if (!iframe) { + return; + } + + const iframeDocument = iframe.contentDocument || iframe.contentWindow?.document; + const target = iframeDocument?.querySelector(store.classTarget); + + if (!target) { + return; + } + + toggleDarkClass(target, store); +}; + +/** Update the manager iframe class */ +const updateManager = (store: DarkModeStore) => { + const manager = document.querySelector(store.classTarget); + + if (!manager) { + return; + } + + toggleDarkClass(manager, store); +}; + +/** Update changed dark mode settings and persist to localStorage */ +export const store = (userTheme: Partial = {}): DarkModeStore => { + const storedItem = window.localStorage.getItem(STORAGE_KEY); + + if (typeof storedItem === 'string') { + const stored = JSON.parse(storedItem) as DarkModeStore; + + if (userTheme) { + if (userTheme.dark && !equal(stored.dark, userTheme.dark)) { + stored.dark = userTheme.dark; + updateStore(stored); + } + + if (userTheme.light && !equal(stored.light, userTheme.light)) { + stored.light = userTheme.light; + updateStore(stored); + } + } + + return stored; + } + + return { ...defaultParams, ...userTheme } as DarkModeStore; +}; + +// On initial load, set the dark mode class on the manager +// This is needed if you're using mostly CSS overrides to styles the storybook +// Otherwise the default theme is set in src/preset/manager.tsx +updateManager(store()); + +type DarkModeProps = { + /** The storybook API */ + api: API; +}; + +/** A toolbar icon to toggle between dark and light themes in storybook */ +export function DarkMode({ api }: DarkModeProps) { + const [isDark, setDark] = React.useState(prefersDark.matches); + const darkModeParams = useParameter>('darkMode', {}); + const { current: defaultMode, stylePreview, ...params } = darkModeParams; + const channel = api.getChannel(); + // Save custom themes on init + const userHasExplicitlySetTheTheme = React.useMemo(() => store(params).userHasExplicitlySetTheTheme, [params]); + /** Set the theme in storybook, update the local state, and emit an event */ + const setMode = React.useCallback( + (mode: Mode) => { + const currentStore = store(); + api.setOptions({ theme: currentStore[mode] }); + setDark(mode === 'dark'); + api.getChannel()?.emit(DARK_MODE_EVENT_NAME, mode === 'dark'); + updateManager(currentStore); + if (stylePreview) { + updatePreview(currentStore); + } + }, + [api, stylePreview], + ); + + /** Update the theme settings in localStorage, react, and storybook */ + const updateMode = React.useCallback( + (mode?: Mode) => { + const currentStore = store(); + const current = mode || (currentStore.current === 'dark' ? 'light' : 'dark'); + updateStore({ ...currentStore, current }); + setMode(current); + }, + [setMode], + ); + + /** Update the theme based on the color preference */ + function prefersDarkUpdate(event: MediaQueryListEvent) { + if (userHasExplicitlySetTheTheme || defaultMode) { + return; + } + + updateMode(event.matches ? 'dark' : 'light'); + } + + /** Render the current theme */ + const renderTheme = React.useCallback(() => { + const { current = 'light' } = store(); + setMode(current); + }, [setMode]); + + /** Handle the user event and side effects */ + const handleIconClick = () => { + updateMode(); + const currentStore = store(); + updateStore({ ...currentStore, userHasExplicitlySetTheTheme: true }); + }; + + /** When storybook params change update the stored themes */ + React.useEffect(() => { + const currentStore = store(); + // Ensure we use the stores `current` value first to persist + // themeing between page loads and story changes. + updateStore({ + ...currentStore, + ...darkModeParams, + current: currentStore.current || darkModeParams.current, + }); + renderTheme(); + }, [darkModeParams, renderTheme]); + React.useEffect(() => { + channel?.on(STORY_CHANGED, renderTheme); + channel?.on(SET_STORIES, renderTheme); + channel?.on(DOCS_RENDERED, renderTheme); + prefersDark.addListener(prefersDarkUpdate); + return () => { + channel?.removeListener(STORY_CHANGED, renderTheme); + channel?.removeListener(SET_STORIES, renderTheme); + channel?.removeListener(DOCS_RENDERED, renderTheme); + prefersDark.removeListener(prefersDarkUpdate); + }; + }); + React.useEffect(() => { + channel?.on(UPDATE_DARK_MODE_EVENT_NAME, updateMode); + return () => { + channel?.removeListener(UPDATE_DARK_MODE_EVENT_NAME, updateMode); + }; + }); + // Storybook's first render doesn't have the global user params loaded so we + // need the effect to run whenever defaultMode is updated + React.useEffect(() => { + // If a users has set the mode this is respected + if (userHasExplicitlySetTheTheme) { + return; + } + + if (defaultMode) { + updateMode(defaultMode); + } else if (prefersDark.matches) { + updateMode('dark'); + } + }, [defaultMode, updateMode, userHasExplicitlySetTheTheme]); + return ( + + {isDark ? + ); +} + +export default DarkMode; diff --git a/packages/storybook-dark-mode/src/constants.ts b/packages/storybook-dark-mode/src/constants.ts new file mode 100644 index 0000000000000..a2325e6a769e1 --- /dev/null +++ b/packages/storybook-dark-mode/src/constants.ts @@ -0,0 +1,2 @@ +export const DARK_MODE_EVENT_NAME = 'DARK_MODE'; +export const UPDATE_DARK_MODE_EVENT_NAME = 'UPDATE_DARK_MODE'; diff --git a/packages/storybook-dark-mode/src/index.tsx b/packages/storybook-dark-mode/src/index.tsx new file mode 100644 index 0000000000000..c7b27c91d3921 --- /dev/null +++ b/packages/storybook-dark-mode/src/index.tsx @@ -0,0 +1,21 @@ +import { addons, useState, useEffect } from 'storybook/preview-api'; + +import { store } from './Tool'; +import { DARK_MODE_EVENT_NAME } from './constants'; + +/** + * Returns the current state of storybook's dark-mode + */ +export function useDarkMode(): boolean { + const [isDark, setIsDark] = useState(store().current === 'dark'); + + useEffect(() => { + const chan = addons.getChannel(); + chan.on(DARK_MODE_EVENT_NAME, setIsDark); + return () => chan.off(DARK_MODE_EVENT_NAME, setIsDark); + }, []); + + return isDark; +} + +export * from './constants'; diff --git a/packages/storybook-dark-mode/src/preset/manager.tsx b/packages/storybook-dark-mode/src/preset/manager.tsx new file mode 100644 index 0000000000000..0e69876dd6d18 --- /dev/null +++ b/packages/storybook-dark-mode/src/preset/manager.tsx @@ -0,0 +1,26 @@ +// eslint-disable-next-line @typescript-eslint/no-unused-vars +import * as React from 'react'; +import { Addon_TypesEnum } from 'storybook/internal/types'; +import { addons } from 'storybook/manager-api'; +import { themes } from 'storybook/theming'; + +import Tool, { prefersDark, store } from '../Tool'; + +const currentStore = store(); +const currentTheme = currentStore.current || (prefersDark.matches && 'dark') || 'light'; + +addons.setConfig({ + theme: { + ...themes[currentTheme], + ...currentStore[currentTheme], + }, +}); + +addons.register('storybook/dark-mode', (api) => { + addons.add('storybook/dark-mode', { + title: 'dark mode', + type: Addon_TypesEnum.TOOL, + match: ({ viewMode }) => viewMode === 'story' || viewMode === 'docs', + render: () => , + }); +}); diff --git a/packages/storybook-dark-mode/tsconfig.build.json b/packages/storybook-dark-mode/tsconfig.build.json new file mode 100644 index 0000000000000..0e451be16e547 --- /dev/null +++ b/packages/storybook-dark-mode/tsconfig.build.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "emitDeclarationOnly": true, + "outDir": "./dist/ts", + "rootDir": "./src" + }, + "exclude": ["node_modules", "dist", "**/*.spec.*", "**/*.stories*"] +} diff --git a/packages/storybook-dark-mode/tsconfig.cjs.json b/packages/storybook-dark-mode/tsconfig.cjs.json new file mode 100644 index 0000000000000..dbc27284cb1da --- /dev/null +++ b/packages/storybook-dark-mode/tsconfig.cjs.json @@ -0,0 +1,12 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "module": "commonjs", + "moduleResolution": "node", + "outDir": "./dist/cjs", + "rootDir": "./src", + "declaration": false, + "declarationMap": false + }, + "exclude": ["node_modules", "dist", "**/*.spec.*", "**/*.stories*"] +} diff --git a/packages/storybook-dark-mode/tsconfig.esm.json b/packages/storybook-dark-mode/tsconfig.esm.json new file mode 100644 index 0000000000000..f8becda9cb9ef --- /dev/null +++ b/packages/storybook-dark-mode/tsconfig.esm.json @@ -0,0 +1,12 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "module": "ESNext", + "moduleResolution": "bundler", + "outDir": "./dist/esm", + "rootDir": "./src", + "declaration": false, + "declarationMap": false + }, + "exclude": ["node_modules", "dist", "**/*.spec.*", "**/*.stories*"] +} diff --git a/packages/storybook-dark-mode/tsconfig.json b/packages/storybook-dark-mode/tsconfig.json new file mode 100644 index 0000000000000..20838d7e67b2c --- /dev/null +++ b/packages/storybook-dark-mode/tsconfig.json @@ -0,0 +1,7 @@ +{ + "extends": "@rocket.chat/tsconfig/client.json", + "compilerOptions": { + "jsx": "react" + }, + "include": ["src/**/*"] +} diff --git a/yarn.lock b/yarn.lock index 38d8bd0d8a39b..a7128c7108655 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9865,6 +9865,7 @@ __metadata: "@rocket.chat/logo": "npm:^0.33.2" "@rocket.chat/message-parser": "workspace:^" "@rocket.chat/random": "workspace:~" + "@rocket.chat/storybook-dark-mode": "workspace:~" "@rocket.chat/ui-contexts": "workspace:^" "@rocket.chat/ui-kit": "workspace:~" "@storybook/addon-docs": "npm:^9.1.20" @@ -9922,7 +9923,6 @@ __metadata: sass: "npm:~1.80.7" sass-loader: "npm:~16.0.8" storybook: "npm:^9.1.20" - storybook-dark-mode: "npm:^5.0.0" style-loader: "npm:^1.3.0" stylelint: "npm:^16.10.0" stylelint-order: "npm:^6.0.4" @@ -11016,6 +11016,7 @@ __metadata: "@rocket.chat/fuselage-hooks": "npm:^0.43.1" "@rocket.chat/fuselage-tokens": "npm:^0.34.0" "@rocket.chat/icons": "npm:^0.49.0" + "@rocket.chat/storybook-dark-mode": "workspace:~" "@rocket.chat/tsconfig": "workspace:*" "@storybook/addon-a11y": "npm:^9.1.20" "@storybook/addon-docs": "npm:^9.1.20" @@ -11028,7 +11029,6 @@ __metadata: react-dom: "npm:~19.2.8" react-virtuoso: "npm:~4.18.12" storybook: "npm:^9.1.20" - storybook-dark-mode: "npm:^5.0.0" typescript: "npm:~5.9.3" webpack: "npm:~5.104.1" peerDependencies: @@ -11039,6 +11039,28 @@ __metadata: languageName: unknown linkType: soft +"@rocket.chat/storybook-dark-mode@workspace:packages/storybook-dark-mode, @rocket.chat/storybook-dark-mode@workspace:~": + version: 0.0.0-use.local + resolution: "@rocket.chat/storybook-dark-mode@workspace:packages/storybook-dark-mode" + dependencies: + "@rocket.chat/tsconfig": "workspace:~" + "@storybook/global": "npm:~5.0.0" + "@storybook/icons": "npm:~1.6.0" + "@types/react": "npm:~19.2.18" + "@types/react-dom": "npm:~19.2.4" + eslint: "npm:~9.39.5" + fast-deep-equal: "npm:~3.1.3" + react: "npm:~19.2.8" + react-dom: "npm:~19.2.8" + storybook: "npm:^9.1.20" + typescript: "npm:~5.9.3" + peerDependencies: + react: "*" + react-dom: "*" + storybook: ^9.0.0 + languageName: unknown + linkType: soft + "@rocket.chat/styled@npm:^0.34.1, @rocket.chat/styled@npm:~0.34.1": version: 0.34.1 resolution: "@rocket.chat/styled@npm:0.34.1" @@ -12970,14 +12992,14 @@ __metadata: languageName: node linkType: hard -"@storybook/global@npm:^5.0.0": +"@storybook/global@npm:^5.0.0, @storybook/global@npm:~5.0.0": version: 5.0.0 resolution: "@storybook/global@npm:5.0.0" checksum: 10/0e7b495f4fe7f36447e793926f1c0460ec07fd66f0da68e3150da5878f6043c9eeb9b41614a45c5ec0d48d5d383c59ca8f88b6dc7882a2a784ac9b20375d8edb languageName: node linkType: hard -"@storybook/icons@npm:^1.4.0": +"@storybook/icons@npm:^1.4.0, @storybook/icons@npm:~1.6.0": version: 1.6.0 resolution: "@storybook/icons@npm:1.6.0" peerDependencies: @@ -12987,16 +13009,6 @@ __metadata: languageName: node linkType: hard -"@storybook/icons@npm:^2.0.1": - version: 2.0.2 - resolution: "@storybook/icons@npm:2.0.2" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 - checksum: 10/e470c2e1a59211f9f0da7e39cf1cee6c4f62b72b3c2489d75e869840dabffb7ca84227e17f5d3657f459cc082a01b76482c111792ab5586ba9235be5c6199e29 - languageName: node - linkType: hard - "@storybook/node-logger@npm:^8.0.0-alpha.10": version: 8.3.5 resolution: "@storybook/node-logger@npm:8.3.5" @@ -23118,7 +23130,7 @@ __metadata: languageName: node linkType: hard -"fast-deep-equal@npm:^3.1.1, fast-deep-equal@npm:^3.1.3": +"fast-deep-equal@npm:^3.1.1, fast-deep-equal@npm:^3.1.3, fast-deep-equal@npm:~3.1.3": version: 3.1.3 resolution: "fast-deep-equal@npm:3.1.3" checksum: 10/e21a9d8d84f53493b6aa15efc9cfd53dd5b714a1f23f67fb5dc8f574af80df889b3bce25dc081887c6d25457cce704e636395333abad896ccdec03abaf1f3f9d @@ -28640,13 +28652,6 @@ __metadata: languageName: node linkType: hard -"map-or-similar@npm:^1.5.0": - version: 1.5.0 - resolution: "map-or-similar@npm:1.5.0" - checksum: 10/3cf43bcd0e7af41d7bade5f8b5be6bb9d021cc47e6008ad545d071cf3a709ba782884002f9eec6ccd51f572fc17841e07bf74628e0bc3694c33f4622b03e4b4c - languageName: node - linkType: hard - "map-stream@npm:~0.1.0": version: 0.1.0 resolution: "map-stream@npm:0.1.0" @@ -28893,15 +28898,6 @@ __metadata: languageName: node linkType: hard -"memoizerific@npm:^1.11.3": - version: 1.11.3 - resolution: "memoizerific@npm:1.11.3" - dependencies: - map-or-similar: "npm:^1.5.0" - checksum: 10/72b6b80699777d000f03db6e15fdabcd4afe77feb45be51fe195cb230c64a368fcfcfbb976375eac3283bd8193d6b1a67ac3081cae07f64fca73f1aa568d59e3 - languageName: node - linkType: hard - "memory-pager@npm:^1.0.2": version: 1.5.0 resolution: "memory-pager@npm:1.5.0" @@ -32200,6 +32196,15 @@ __metadata: languageName: node linkType: hard +"prettier@npm:~3.3.3": + version: 3.3.3 + resolution: "prettier@npm:3.3.3" + bin: + prettier: bin/prettier.cjs + checksum: 10/5beac1f30b5b40162532b8e2f7c3a4eb650910a2695e9c8512a62ffdc09dae93190c29db9107fa7f26d1b6c71aad3628ecb9b5de1ecb0911191099be109434d7 + languageName: node + linkType: hard + "prettier@npm:~3.9.6": version: 3.9.6 resolution: "prettier@npm:3.9.6" @@ -35446,19 +35451,6 @@ __metadata: languageName: node linkType: hard -"storybook-dark-mode@npm:^5.0.0": - version: 5.0.0 - resolution: "storybook-dark-mode@npm:5.0.0" - dependencies: - "@storybook/icons": "npm:^2.0.1" - fast-deep-equal: "npm:^3.1.3" - memoizerific: "npm:^1.11.3" - peerDependencies: - storybook: ^10.0.0 - checksum: 10/ae2940c92dc81327b048ff4f0dc7953c60d0da1f90e18a37baf41eefcfc1942581e942894334ced1bf01d41fda3a999afc01d95f8fbfe08c4e42f0c03d2ccff4 - languageName: node - linkType: hard - "storybook@npm:^9.1.20": version: 9.1.20 resolution: "storybook@npm:9.1.20"