From 9b8c578dc33e692f431cf3207820995017472ffe Mon Sep 17 00:00:00 2001 From: Tasso Evangelista Date: Mon, 12 Aug 2024 18:49:27 -0300 Subject: [PATCH 1/4] chore: Broken dark mode in Storybook docs and canvasses (#1426) --- .../.storybook/DocsContainer.tsx | 25 +++++++++++++++++++ .../fuselage-toastbar/.storybook/preview.tsx | 10 ++++++++ packages/fuselage-toastbar/package.json | 1 + .../fuselage/.storybook/DocsContainer.tsx | 25 +++++++++++++++++++ packages/fuselage/.storybook/preview.tsx | 14 ++++++++--- packages/layout/.storybook/DocsContainer.tsx | 25 +++++++++++++++++++ packages/layout/.storybook/preview.tsx | 10 ++++++++ packages/layout/package.json | 1 + .../.storybook/DocsContainer.tsx | 25 +++++++++++++++++++ packages/onboarding-ui/.storybook/preview.tsx | 10 ++++++++ yarn.lock | 2 ++ 11 files changed, 144 insertions(+), 4 deletions(-) create mode 100644 packages/fuselage-toastbar/.storybook/DocsContainer.tsx create mode 100644 packages/fuselage/.storybook/DocsContainer.tsx create mode 100644 packages/layout/.storybook/DocsContainer.tsx create mode 100644 packages/onboarding-ui/.storybook/DocsContainer.tsx diff --git a/packages/fuselage-toastbar/.storybook/DocsContainer.tsx b/packages/fuselage-toastbar/.storybook/DocsContainer.tsx new file mode 100644 index 0000000000..e15e7f2735 --- /dev/null +++ b/packages/fuselage-toastbar/.storybook/DocsContainer.tsx @@ -0,0 +1,25 @@ +import { DocsContainer as BaseContainer } from '@storybook/blocks'; +import { addons } from '@storybook/preview-api'; +import { themes } from '@storybook/theming'; +import type { ComponentPropsWithoutRef } from 'react'; +import { useEffect, useState } from 'react'; +import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode'; + +const channel = addons.getChannel(); + +const DocsContainer = ( + props: ComponentPropsWithoutRef +) => { + const [isDark, setDark] = useState(false); + + useEffect(() => { + channel.on(DARK_MODE_EVENT_NAME, setDark); + return () => channel.removeListener(DARK_MODE_EVENT_NAME, setDark); + }, [setDark]); + + return ( + + ); +}; + +export default DocsContainer; diff --git a/packages/fuselage-toastbar/.storybook/preview.tsx b/packages/fuselage-toastbar/.storybook/preview.tsx index 98e05e34dc..84e45f20bc 100644 --- a/packages/fuselage-toastbar/.storybook/preview.tsx +++ b/packages/fuselage-toastbar/.storybook/preview.tsx @@ -1,3 +1,4 @@ +import surface from '@rocket.chat/fuselage-tokens/dist/surface.json'; import { DarkModeProvider } from '@rocket.chat/layout'; import type { Preview } from '@storybook/react'; import { themes } from '@storybook/theming'; @@ -6,6 +7,7 @@ import { useDarkMode } from 'storybook-dark-mode'; import manifest from '../package.json'; import ToastBarProvider from '../src/ToastBarProvider'; +import DocsContainer from './DocsContainer'; import logo from './logo.svg'; import '@rocket.chat/fuselage/dist/fuselage.css'; @@ -21,6 +23,9 @@ export default { opacity: 0.5, }, }, + docs: { + container: DocsContainer, + }, options: { storySort: { method: 'alphabetical', @@ -29,12 +34,17 @@ export default { darkMode: { dark: { ...themes.dark, + appBg: surface.surface.dark.sidebar, + appContentBg: surface.surface.dark.light, + appPreviewBg: 'transparent', + barBg: surface.surface.dark.light, brandTitle: manifest.name, brandImage: logo, brandUrl: manifest.homepage, }, light: { ...themes.normal, + appPreviewBg: 'transparent', brandTitle: manifest.name, brandImage: logo, brandUrl: manifest.homepage, diff --git a/packages/fuselage-toastbar/package.json b/packages/fuselage-toastbar/package.json index c68d5e73fe..f4bb0c72f0 100644 --- a/packages/fuselage-toastbar/package.json +++ b/packages/fuselage-toastbar/package.json @@ -49,6 +49,7 @@ "@rocket.chat/eslint-config-alt": "workspace:~", "@rocket.chat/fuselage": "workspace:~", "@rocket.chat/fuselage-hooks": "workspace:~", + "@rocket.chat/fuselage-tokens": "workspace:~", "@rocket.chat/layout": "workspace:~", "@rocket.chat/prettier-config": "workspace:~", "@rocket.chat/styled": "workspace:~", diff --git a/packages/fuselage/.storybook/DocsContainer.tsx b/packages/fuselage/.storybook/DocsContainer.tsx new file mode 100644 index 0000000000..e15e7f2735 --- /dev/null +++ b/packages/fuselage/.storybook/DocsContainer.tsx @@ -0,0 +1,25 @@ +import { DocsContainer as BaseContainer } from '@storybook/blocks'; +import { addons } from '@storybook/preview-api'; +import { themes } from '@storybook/theming'; +import type { ComponentPropsWithoutRef } from 'react'; +import { useEffect, useState } from 'react'; +import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode'; + +const channel = addons.getChannel(); + +const DocsContainer = ( + props: ComponentPropsWithoutRef +) => { + const [isDark, setDark] = useState(false); + + useEffect(() => { + channel.on(DARK_MODE_EVENT_NAME, setDark); + return () => channel.removeListener(DARK_MODE_EVENT_NAME, setDark); + }, [setDark]); + + return ( + + ); +}; + +export default DocsContainer; diff --git a/packages/fuselage/.storybook/preview.tsx b/packages/fuselage/.storybook/preview.tsx index 41a655e7e0..018dcd49de 100644 --- a/packages/fuselage/.storybook/preview.tsx +++ b/packages/fuselage/.storybook/preview.tsx @@ -1,11 +1,12 @@ import breakpointTokens from '@rocket.chat/fuselage-tokens/breakpoints.json'; +import surface from '@rocket.chat/fuselage-tokens/dist/surface.json'; import type { Preview } from '@storybook/react'; import { themes } from '@storybook/theming'; import { useDarkMode } from 'storybook-dark-mode'; import manifest from '../package.json'; import { PaletteStyleTag } from '../src'; -import { surface } from './helpers'; +import DocsContainer from './DocsContainer'; import logo from './logo.svg'; import 'normalize.css/normalize.css'; @@ -21,6 +22,9 @@ export default { opacity: 0.5, }, }, + docs: { + container: DocsContainer, + }, options: { storySort: { order: [ @@ -54,15 +58,17 @@ export default { darkMode: { dark: { ...themes.dark, - appBg: surface.sidebar, - appContentBg: surface.main, - barBg: surface.main, + appBg: surface.surface.dark.sidebar, + appContentBg: surface.surface.dark.light, + appPreviewBg: 'transparent', + barBg: surface.surface.dark.light, brandTitle: manifest.name, brandImage: logo, brandUrl: manifest.homepage, }, light: { ...themes.normal, + appPreviewBg: 'transparent', brandTitle: manifest.name, brandImage: logo, brandUrl: manifest.homepage, diff --git a/packages/layout/.storybook/DocsContainer.tsx b/packages/layout/.storybook/DocsContainer.tsx new file mode 100644 index 0000000000..e15e7f2735 --- /dev/null +++ b/packages/layout/.storybook/DocsContainer.tsx @@ -0,0 +1,25 @@ +import { DocsContainer as BaseContainer } from '@storybook/blocks'; +import { addons } from '@storybook/preview-api'; +import { themes } from '@storybook/theming'; +import type { ComponentPropsWithoutRef } from 'react'; +import { useEffect, useState } from 'react'; +import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode'; + +const channel = addons.getChannel(); + +const DocsContainer = ( + props: ComponentPropsWithoutRef +) => { + const [isDark, setDark] = useState(false); + + useEffect(() => { + channel.on(DARK_MODE_EVENT_NAME, setDark); + return () => channel.removeListener(DARK_MODE_EVENT_NAME, setDark); + }, [setDark]); + + return ( + + ); +}; + +export default DocsContainer; diff --git a/packages/layout/.storybook/preview.tsx b/packages/layout/.storybook/preview.tsx index 32ac3919ba..ff7c305e16 100644 --- a/packages/layout/.storybook/preview.tsx +++ b/packages/layout/.storybook/preview.tsx @@ -1,3 +1,4 @@ +import surface from '@rocket.chat/fuselage-tokens/dist/surface.json'; import type { Preview } from '@storybook/react'; import { themes } from '@storybook/theming'; import { Suspense } from 'react'; @@ -5,6 +6,7 @@ import { useDarkMode } from 'storybook-dark-mode'; import manifest from '../package.json'; import DarkModeProvider from '../src/DarkModeProvider'; +import DocsContainer from './DocsContainer'; import logo from './logo.svg'; import '@rocket.chat/fuselage/dist/fuselage.css'; @@ -20,6 +22,9 @@ export default { opacity: 0.5, }, }, + docs: { + container: DocsContainer, + }, options: { storySort: { method: 'alphabetical', @@ -29,12 +34,17 @@ export default { darkMode: { dark: { ...themes.dark, + appBg: surface.surface.dark.sidebar, + appContentBg: surface.surface.dark.light, + appPreviewBg: 'transparent', + barBg: surface.surface.dark.light, brandTitle: manifest.name, brandImage: logo, brandUrl: manifest.homepage, }, light: { ...themes.normal, + appPreviewBg: 'transparent', brandTitle: manifest.name, brandImage: logo, brandUrl: manifest.homepage, diff --git a/packages/layout/package.json b/packages/layout/package.json index c1ce381bea..8d748af33a 100644 --- a/packages/layout/package.json +++ b/packages/layout/package.json @@ -41,6 +41,7 @@ "devDependencies": { "@rocket.chat/eslint-config-alt": "workspace:~", "@rocket.chat/fuselage": "workspace:~", + "@rocket.chat/fuselage-tokens": "workspace:~", "@rocket.chat/prettier-config": "workspace:~", "@storybook/addon-essentials": "~8.2.7", "@storybook/addon-webpack5-compiler-swc": "~1.0.5", diff --git a/packages/onboarding-ui/.storybook/DocsContainer.tsx b/packages/onboarding-ui/.storybook/DocsContainer.tsx new file mode 100644 index 0000000000..e15e7f2735 --- /dev/null +++ b/packages/onboarding-ui/.storybook/DocsContainer.tsx @@ -0,0 +1,25 @@ +import { DocsContainer as BaseContainer } from '@storybook/blocks'; +import { addons } from '@storybook/preview-api'; +import { themes } from '@storybook/theming'; +import type { ComponentPropsWithoutRef } from 'react'; +import { useEffect, useState } from 'react'; +import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode'; + +const channel = addons.getChannel(); + +const DocsContainer = ( + props: ComponentPropsWithoutRef +) => { + const [isDark, setDark] = useState(false); + + useEffect(() => { + channel.on(DARK_MODE_EVENT_NAME, setDark); + return () => channel.removeListener(DARK_MODE_EVENT_NAME, setDark); + }, [setDark]); + + return ( + + ); +}; + +export default DocsContainer; diff --git a/packages/onboarding-ui/.storybook/preview.tsx b/packages/onboarding-ui/.storybook/preview.tsx index d47e975aed..dfd16aff53 100644 --- a/packages/onboarding-ui/.storybook/preview.tsx +++ b/packages/onboarding-ui/.storybook/preview.tsx @@ -1,3 +1,4 @@ +import surface from '@rocket.chat/fuselage-tokens/dist/surface.json'; import { DarkModeProvider } from '@rocket.chat/layout'; import type { Preview } from '@storybook/react'; import { themes } from '@storybook/theming'; @@ -7,6 +8,7 @@ import { I18nextProvider, initReactI18next } from 'react-i18next'; import { useDarkMode } from 'storybook-dark-mode'; import manifest from '../package.json'; +import DocsContainer from './DocsContainer'; import logo from './logo.svg'; import '@rocket.chat/fuselage/dist/fuselage.css'; @@ -40,6 +42,9 @@ export default { opacity: 0.5, }, }, + docs: { + container: DocsContainer, + }, options: { storySort: { method: 'alphabetical', @@ -48,12 +53,17 @@ export default { darkMode: { dark: { ...themes.dark, + appBg: surface.surface.dark.sidebar, + appContentBg: surface.surface.dark.light, + appPreviewBg: 'transparent', + barBg: surface.surface.dark.light, brandTitle: manifest.name, brandImage: logo, brandUrl: manifest.homepage, }, light: { ...themes.normal, + appPreviewBg: 'transparent', brandTitle: manifest.name, brandImage: logo, brandUrl: manifest.homepage, diff --git a/yarn.lock b/yarn.lock index 8227bdd260..87f850ce9c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4568,6 +4568,7 @@ __metadata: "@rocket.chat/eslint-config-alt": "workspace:~" "@rocket.chat/fuselage": "workspace:~" "@rocket.chat/fuselage-hooks": "workspace:~" + "@rocket.chat/fuselage-tokens": "workspace:~" "@rocket.chat/layout": "workspace:~" "@rocket.chat/prettier-config": "workspace:~" "@rocket.chat/styled": "workspace:~" @@ -4758,6 +4759,7 @@ __metadata: dependencies: "@rocket.chat/eslint-config-alt": "workspace:~" "@rocket.chat/fuselage": "workspace:~" + "@rocket.chat/fuselage-tokens": "workspace:~" "@rocket.chat/prettier-config": "workspace:~" "@storybook/addon-essentials": "npm:~8.2.7" "@storybook/addon-webpack5-compiler-swc": "npm:~1.0.5" From f37f5f1a42bc9f27f77d3be9a635585230298bac Mon Sep 17 00:00:00 2001 From: Aleksander Nicacio da Silva Date: Tue, 13 Aug 2024 11:41:53 -0300 Subject: [PATCH 2/4] feat(icons): Add icon pause-shape-unfilled (#1425) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Júlia Jaeger Foresti <60678893+juliajforesti@users.noreply.github.com> --- .changeset/long-pants-mate.md | 5 +++++ packages/icons/glyphsMapping.json | 3 +++ packages/icons/src/pause-shape-unfilled.svg | 12 ++++++++++++ 3 files changed, 20 insertions(+) create mode 100644 .changeset/long-pants-mate.md create mode 100644 packages/icons/src/pause-shape-unfilled.svg diff --git a/.changeset/long-pants-mate.md b/.changeset/long-pants-mate.md new file mode 100644 index 0000000000..5982055967 --- /dev/null +++ b/.changeset/long-pants-mate.md @@ -0,0 +1,5 @@ +--- +"@rocket.chat/icons": minor +--- + +feat(icons): Add icon pause-shape-unfilled diff --git a/packages/icons/glyphsMapping.json b/packages/icons/glyphsMapping.json index 3af5fef2df..19e21bd5e0 100644 --- a/packages/icons/glyphsMapping.json +++ b/packages/icons/glyphsMapping.json @@ -979,5 +979,8 @@ }, "ai": { "start": "\ue159" + }, + "pause-shape-unfilled": { + "start": "\ue15b" } } diff --git a/packages/icons/src/pause-shape-unfilled.svg b/packages/icons/src/pause-shape-unfilled.svg new file mode 100644 index 0000000000..d9c5b7e4d3 --- /dev/null +++ b/packages/icons/src/pause-shape-unfilled.svg @@ -0,0 +1,12 @@ + + + + From cf5d3f479c4a6b5ce0793c0057cca7c47820c1e3 Mon Sep 17 00:00:00 2001 From: Tasso Evangelista Date: Tue, 13 Aug 2024 15:08:11 -0300 Subject: [PATCH 3/4] ci: Update pr-title.yml --- .github/workflows/pr-title.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/pr-title.yml b/.github/workflows/pr-title.yml index 09268a5c24..83c2460e88 100644 --- a/.github/workflows/pr-title.yml +++ b/.github/workflows/pr-title.yml @@ -1,6 +1,6 @@ name: "Pull request title" on: - pull_request: + pull_request_target: types: [opened, edited] jobs: From c5754e0771e2bc27f12273c465402bbfc3b65249 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 13 Aug 2024 16:00:48 -0300 Subject: [PATCH 4/4] Version Packages (#1427) Co-authored-by: github-actions[bot] --- .changeset/long-pants-mate.md | 5 ----- packages/icons/CHANGELOG.md | 6 ++++++ packages/icons/package.json | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 .changeset/long-pants-mate.md diff --git a/.changeset/long-pants-mate.md b/.changeset/long-pants-mate.md deleted file mode 100644 index 5982055967..0000000000 --- a/.changeset/long-pants-mate.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@rocket.chat/icons": minor ---- - -feat(icons): Add icon pause-shape-unfilled diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md index d9f7ff6c4d..94f682833a 100644 --- a/packages/icons/CHANGELOG.md +++ b/packages/icons/CHANGELOG.md @@ -1,5 +1,11 @@ # Change Log +## 0.38.0 + +### Minor Changes + +- [#1425](https://github.com/RocketChat/fuselage/pull/1425) [`f37f5f1a`](https://github.com/RocketChat/fuselage/commit/f37f5f1a42bc9f27f77d3be9a635585230298bac) Thanks [@aleksandernsilva](https://github.com/aleksandernsilva)! - feat(icons): Add icon pause-shape-unfilled + ## 0.37.0 ### Minor Changes diff --git a/packages/icons/package.json b/packages/icons/package.json index cda39164e4..3a09af860b 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,6 +1,6 @@ { "name": "@rocket.chat/icons", - "version": "0.37.0", + "version": "0.38.0", "description": "Rocket.Chat's Icons", "author": { "name": "Rocket.Chat",