Merge branch 'main' into feat/new-client-navigation

.github/workflows/pr-title.yml

@@ -1,6 +1,6 @@
 name: "Pull request title"
 on:
-  pull_request:
+  pull_request_target:
     types: [opened, edited]
 
 jobs:

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<typeof BaseContainer>
+) => {
+  const [isDark, setDark] = useState(false);
+
+  useEffect(() => {
+    channel.on(DARK_MODE_EVENT_NAME, setDark);
+    return () => channel.removeListener(DARK_MODE_EVENT_NAME, setDark);
+  }, [setDark]);
+
+  return (
+    <BaseContainer {...props} theme={isDark ? themes.dark : themes.light} />
+  );
+};
+
+export default DocsContainer;

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,

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:~",

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<typeof BaseContainer>
+) => {
+  const [isDark, setDark] = useState(false);
+
+  useEffect(() => {
+    channel.on(DARK_MODE_EVENT_NAME, setDark);
+    return () => channel.removeListener(DARK_MODE_EVENT_NAME, setDark);
+  }, [setDark]);
+
+  return (
+    <BaseContainer {...props} theme={isDark ? themes.dark : themes.light} />
+  );
+};
+
+export default DocsContainer;

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,

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

packages/icons/glyphsMapping.json

@@ -979,5 +979,8 @@
   },
   "ai": {
     "start": "\ue159"
+  },
+  "pause-shape-unfilled": {
+    "start": "\ue15b"
   }
 }

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",

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<typeof BaseContainer>
+) => {
+  const [isDark, setDark] = useState(false);
+
+  useEffect(() => {
+    channel.on(DARK_MODE_EVENT_NAME, setDark);
+    return () => channel.removeListener(DARK_MODE_EVENT_NAME, setDark);
+  }, [setDark]);
+
+  return (
+    <BaseContainer {...props} theme={isDark ? themes.dark : themes.light} />
+  );
+};
+
+export default DocsContainer;

packages/layout/.storybook/preview.tsx

@@ -1,10 +1,12 @@
+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';
 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,

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",

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<typeof BaseContainer>
+) => {
+  const [isDark, setDark] = useState(false);
+
+  useEffect(() => {
+    channel.on(DARK_MODE_EVENT_NAME, setDark);
+    return () => channel.removeListener(DARK_MODE_EVENT_NAME, setDark);
+  }, [setDark]);
+
+  return (
+    <BaseContainer {...props} theme={isDark ? themes.dark : themes.light} />
+  );
+};
+
+export default DocsContainer;

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,

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"