diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index de66ccd85..7336d89d1 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -10,9 +10,10 @@ permissions: pages: write id-token: write -env: +env: STORYBOOK_RC_HOST: "https://demo.qa.rocket.chat" - + RC_ROOM_ID: "66ccc4f1e050428c76256939" + jobs: build-and-deploy: runs-on: ubuntu-latest diff --git a/README.md b/README.md index 59b58af26..455b2fa89 100644 --- a/README.md +++ b/README.md @@ -14,9 +14,18 @@ _EmbeddedChat is a full-stack React component designed to integrate Rocket.Chat +## Try It Out 🚀 + +Explore our project in action! It's live for a sneak peek and testing at: https://rocketchat.github.io/EmbeddedChat/ + +Test credentials: + +- **Username:** test_acc +- **Password:** test_acc + ## Installation and Usage -Installation and usage documentation could be found here [EmbeddedChat installation and usage](packages/react/README.md) +Installation and usage documentation could be found here [EmbeddedChat installation and usage](https://rocketchat.github.io/EmbeddedChat/docs/docs/Usage/embeddedchat_setup) ## Development @@ -158,21 +167,25 @@ This environment offers a complete setup for developing and testing the `Embedde ## References -- Embedded Chat Development: [EC Development](packages/docs/embeddedchat_dev.md) – Explore development techniques for Embedded Chat. +- **Documentation Overview**: For a comprehensive overview of Embedded Chat, including installation, usage, and advanced topics, visit our [Documentation Page](https://rocketchat.github.io/EmbeddedChat/docs/). + + Below are specific sections that cover various aspects of Embedded Chat: + + - Embedded Chat Development: [EC Development](https://rocketchat.github.io/EmbeddedChat/docs/docs/Development/dev_launch) – Explore development techniques for Embedded Chat. -- Embedded Chat Setup: [Setup Instructions](packages/docs/embeddedchat_setup.md) – Start setting up Embedded Chat in your app. + - Embedded Chat Setup: [Setup Instructions](https://rocketchat.github.io/EmbeddedChat/docs/docs/Usage/embeddedchat_setup) – Start setting up Embedded Chat in your app. -- UI Elements: [Setup & Dev Guide](packages/docs/ui-elements.md) – Integration and customization of UI elements. + - UI Elements: [Setup & Dev Guide](https://rocketchat.github.io/EmbeddedChat/docs/docs/Development/ui-elements) – Integration and customization of UI elements. -- Layout Editor: [Using the Editor](packages/docs/layout_editor.md) – Customize the chat interface with the layout editor. + - Layout Editor: [Using the Editor](https://rocketchat.github.io/EmbeddedChat/docs/docs/Usage/layout_editor) – Customize the chat interface with the layout editor. -- EmbeddedChat RC Setup: [Setup Instructions](packages/docs/ec_rc_setup.md) – Guide for setting up Embedded Chat RC App. + - EmbeddedChat RC Setup: [Setup Instructions](https://rocketchat.github.io/EmbeddedChat/docs/docs/Usage/ec_rc_setup) – Guide for setting up Embedded Chat RC App. -- Authentication: [Guide](packages/docs/authentication.md) – Configure and manage authentication for Embedded Chat. + - Authentication: [Guide](https://rocketchat.github.io/EmbeddedChat/docs/docs/Usage/authentication) – Configure and manage authentication for Embedded Chat. -- Theming Guide: [Guide](packages/docs/theming.md) – Guide to theming options and customization. + - Theming Guide: [Guide](https://rocketchat.github.io/EmbeddedChat/docs/docs/Usage/theming) – Guide to theming options and customization. -- Theming Technical: [Technical Overview](packages/docs/theming_technical.md) – Technical aspects of theming. + - Theming Technical: [Technical Overview](https://rocketchat.github.io/EmbeddedChat/docs/docs/Development/theming_technical) – Technical aspects of theming. ### Contributors diff --git a/packages/docs/.gitignore b/packages/docs/.gitignore index b2d6de306..27a8a2e6a 100644 --- a/packages/docs/.gitignore +++ b/packages/docs/.gitignore @@ -18,3 +18,4 @@ npm-debug.log* yarn-debug.log* yarn-error.log* +.yarn/* diff --git a/packages/docs/.yarn/install-state.gz b/packages/docs/.yarn/install-state.gz deleted file mode 100644 index 1f543b731..000000000 Binary files a/packages/docs/.yarn/install-state.gz and /dev/null differ diff --git a/packages/docs/blog/EmbeddedChat-2024.md b/packages/docs/blog/EmbeddedChat-2024.md index 60a244aaf..6827d5940 100644 --- a/packages/docs/blog/EmbeddedChat-2024.md +++ b/packages/docs/blog/EmbeddedChat-2024.md @@ -1,7 +1,7 @@ # Google Summer of Code 2024, RocketChat
- google-summer-of-code + google-summer-of-code
## 📘 Introduction @@ -31,7 +31,7 @@ Explore a demonstration of the latest features and improvements. See firsthand h Here's a brief preview of EmbeddedChat integrated into a website, designed to demonstrate the functionality of RC apps without the need for local setup.

- EC Integration + EC Integration

### Code Refactor: Separation of Concerns @@ -45,20 +45,21 @@ Key updates to the EmbeddedChat repository include: 3. **Markup and UI-Kit Separation**: Markups and the UI Kit are organized into a separate library (monorepo).

- CSS styles in component.styles.js + CSS styles in component.styles.js
CSS styles are now in `component.styles.js`

- Separation into monorepo + Separation into monorepo
Separation into monorepo for `ui-elements`, `markups`, and `ui-kit`

The video below illustrates the development, usage, and setup of the ui-elements monorepo, and it also shows that EmbeddedChat functions as expected following this separation: -[UI-Elements Storybook](https://github.com/RocketChat/EmbeddedChat/assets/78961432/a399defd-cae7-495a-9f88-11f4b518df00) + + ### UI Theming Upgrade: Prebuilt Themes and Style Variants @@ -66,18 +67,18 @@ The theming system has been enhanced with several prebuilt themes, ensuring a co Once the Storybook is running, you can explore and experiment with various designs within the `Design Variants` folder, including `RCVariant`, `Bubble Variant`, and `Modern Variant`. These options enable you to either use the prebuilt themes or draw inspiration to create your own. Below are images and videos demonstrating the different variants; note that the videos also highlight fixes introduced with these PRs: -[RC Variant](https://github.com/RocketChat/EmbeddedChat/assets/78961432/d9fea331-fa32-44df-8322-36c9fb2baa6c) + -[Bubble Variant](https://github.com/RocketChat/EmbeddedChat/assets/78961432/06d61e66-8f17-423b-a339-1728323661b3) +

- Automatically generated colors in usernames in dark mode + popup instead of sidebar + Automatically generated colors in usernames in dark mode + popup instead of sidebar
Automatically generated colors in usernames in dark mode + popup instead of sidebar

- Automatically generated colors in usernames in light mode + popup instead of sidebar + Automatically generated colors in usernames in light mode + popup instead of sidebar
Automatically generated colors in usernames in light mode + popup instead of sidebar

@@ -86,7 +87,7 @@ The theming system follows a convention similar to the ShadCN theming system. Us A demonstration video is available here: -[Theme Converter](https://github.com/user-attachments/assets/9078260f-1933-4be6-b019-61e9ac54be7d) + For further details on theming, you can visit the [documentation](https://github.com/RocketChat/EmbeddedChat/blob/develop/packages/docs/theming.md) or check out the [technical guide](https://github.com/RocketChat/EmbeddedChat/blob/develop/packages/docs/theming_technical.md) for insights on how theming is implemented in the repository. @@ -96,7 +97,7 @@ EmbeddedChat authentication security has been enhanced through the use of HTTP-O A video demonstration is available here: -[Http-Only-Cookie Auth](https://github.com/RocketChat/EmbeddedChat/assets/78961432/24fdf4bf-34b5-4e66-b045-802d6fc428dd) + For more information on authentication, refer to the [authentication guide](https://github.com/RocketChat/EmbeddedChat/blob/develop/packages/docs/authentication.md). @@ -113,15 +114,15 @@ Testing was conducted across three distinct RC apps, with video demonstrations p 1. **Reminder RC App**: -[Reminder App UI-Kit Test](https://github.com/RocketChat/EmbeddedChat/assets/78961432/eeb17fd6-68f2-4113-8ef1-dc0faf32ca05) + 2. **Notion RC App**: -[Notion App UI-Kit Test](https://github.com/RocketChat/EmbeddedChat/assets/78961432/71d9baa1-a54d-4077-9fbd-f7e005742f77) + 3. **News Aggregation App** (tested multi-select functionality): -[News App UI-Kit Test](https://github.com/RocketChat/EmbeddedChat/assets/78961432/d3f611b0-3205-483f-b00a-9800893b98fb) + ### EmbeddedChat Remote Configurability @@ -129,9 +130,9 @@ I have added support for remote configuration of EmbeddedChat props, including t The following videos demonstrate its usage: -[Remotely Configure EC](https://github.com/RocketChat/EmbeddedChat/assets/78961432/8f2e5027-2a8d-4723-8c2b-33ae7cbf9336) + -[CSS Validation Test](https://github.com/RocketChat/EmbeddedChat/assets/78961432/2eaa4e50-ad38-4ac8-8cc7-d8eebd875f26) + To set up the EmbeddedChat RC App, follow this guide: [EmbeddedChat RC App Setup](https://github.com/RocketChat/EmbeddedChat/blob/develop/packages/docs/ec_rc_setup.md). @@ -141,7 +142,7 @@ I also worked on a new sub-project called `layout-editor` during GSoC to enhance A video demonstration showcases the features: -[Layout Editor Demo](https://github.com/user-attachments/assets/3f846616-bf33-49ca-95c7-3a6e98685476) + To learn more about the layout editor, visit the guide: [Layout Editor Guide](https://github.com/RocketChat/EmbeddedChat/blob/develop/packages/docs/layout_editor.md). @@ -201,4 +202,4 @@ Interested in chatting about GSoC, Rocket.Chat, or open-source adventures? I'm a ## 📌 Closing Notes -This repository contains the final report and serves as a guide for future contributors to the EmbeddedChat project, which was developed and improved during Google Summer of Code (GSoC) 2024. The final report details the solutions implemented during the project, while the guide provides insights and instructions for new contributors to effectively engage with and build upon the project's foundation. \ No newline at end of file +This repository contains the final report and serves as a guide for future contributors to the EmbeddedChat project, which was developed and improved during Google Summer of Code (GSoC) 2024. The final report details the solutions implemented during the project, while the guide provides insights and instructions for new contributors to effectively engage with and build upon the project's foundation. diff --git a/packages/docs/docs/Development/theming_technical.md b/packages/docs/docs/Development/theming_technical.md index a2d37a8d3..e444a372a 100644 --- a/packages/docs/docs/Development/theming_technical.md +++ b/packages/docs/docs/Development/theming_technical.md @@ -14,26 +14,30 @@ We use [Emotion](https://emotion.sh/) for styling. Each component has a `compone We use theming with our `useTheme` hook, exported from `@embeddedchat/ui-elements`, according to our specific requirements. The implementation looks something like this: ```jsx -import { useContext } from 'react'; -import { ThemeContext } from '../context/ThemeContextProvider'; -import DefaultTheme from '../theme/DefaultTheme'; +import { useContext } from "react"; +import { ThemeContext } from "../context/ThemeContextProvider"; +import DefaultTheme from "../theme/DefaultTheme"; -const invertMode = (mode) => (mode === 'light' ? 'dark' : 'light'); +const invertMode = (mode) => (mode === "light" ? "dark" : "light"); const useTheme = () => { const context = useContext(ThemeContext); if (!context) { - const defaultMode = 'light'; - const defaultTheme = DefaultTheme; - const colors = defaultTheme.schemes?.[defaultMode]; - const invertedColors = defaultTheme.schemes?.[invertMode(defaultMode)]; + const defaultMode = "light"; + const theme = DefaultTheme; + const colors = theme.schemes?.[defaultMode]; + const invertedColors = theme.schemes?.[invertMode(defaultMode)]; - return { - theme: defaultTheme, - mode: defaultMode, + const modifiedTheme = { + ...theme, colors, invertedColors, + }; + + return { + theme: modifiedTheme, + mode: defaultMode, setMode: () => {}, setTheme: () => {}, }; @@ -45,25 +49,25 @@ const useTheme = () => { export default useTheme; ``` -This hook grants access to the theme, mode, colors, and invertedColors, streamlining their usage across different parts of the application. It ensures that colors are dynamically provided according to the current theme mode (light or dark), eliminating the need for repetitive code. +This hook provides access to the `theme` and `mode`, simplifying their use across the application. The theme object dynamically provides `colors` and `invertedColors` in `theme` object based on the mode (light or dark), reducing the need for repetitive code. For example, in the CSS: ```jsx -const { colors } = useTheme(); +const { theme } = useTheme(); const main = css` margin: 0.2rem 2rem; display: block; max-height: 10rem; overflow: scroll; overflow-x: hidden; - border: 1px solid ${colors.border}; + border: 1px solid ${theme.colors.border}; border-radius: 0.2rem; - color: ${colors.secondaryForeground}; + color: ${theme.colors.secondaryForeground}; `; ``` -Here, `colors` from `useTheme` sets `colors.border` and `colors.secondaryForeground`. +In this example, `theme.colors` from `useTheme` is used to set the values for `theme.colors.border` and `theme.colors.secondaryForeground`. ## Technical Overview of `useComponentOverrides` @@ -72,16 +76,16 @@ Components utilize the `useComponentOverrides` hook to facilitate various types ### Example: styleOverrides and classNames ```jsx -import { useComponentOverrides } from '../../hooks/useComponentOverrides'; +import { useComponentOverrides } from "../../hooks/useComponentOverrides"; export const MessageBody = ({ children, - className = '', + className = "", style = {}, ...props }) => { const { styleOverrides, classNames } = useComponentOverrides( - 'MessageBody', + "MessageBody", className, style ); @@ -89,7 +93,7 @@ export const MessageBody = ({ return ( @@ -105,67 +109,82 @@ In this example, it's evident that the className and style properties are dynami ```jsx const { styleOverrides, classNames, configOverrides } = useComponentOverrides( - 'MessageToolbox', + "MessageToolbox", className, style ); // Extract surfaceItems and menuItems from configOverrides -const surfaceItems = configOverrides.optionConfig?.surfaceItems || optionConfig.surfaceItems; -const menuItems = configOverrides.optionConfig?.menuItems || optionConfig.menuItems; +const surfaceItems = + configOverrides.optionConfig?.surfaceItems || optionConfig.surfaceItems; +const menuItems = + configOverrides.optionConfig?.menuItems || optionConfig.menuItems; // Process surfaceItems and menuItems based on the configuration const menuOptions = menuItems - ?.map((item) => options[item]?.visible ? { - id: options[item].id, - action: options[item].onClick, - label: options[item].label, - icon: options[item].iconName, - } : null) + ?.map((item) => + options[item]?.visible + ? { + id: options[item].id, + action: options[item].onClick, + label: options[item].label, + icon: options[item].iconName, + } + : null + ) .filter((option) => option !== null); const surfaceOptions = surfaceItems - ?.map((item) => options[item]?.visible ? { - id: options[item].id, - onClick: options[item].onClick, - label: options[item].label, - iconName: options[item].iconName, - type: options[item].type, - } : null) + ?.map((item) => + options[item]?.visible + ? { + id: options[item].id, + onClick: options[item].onClick, + label: options[item].label, + iconName: options[item].iconName, + type: options[item].type, + } + : null + ) .filter((option) => option !== null); // Render the options -{surfaceOptions?.length > 0 && ( - -)} -{menuOptions?.length > 0 && ( - -)} +{ + surfaceOptions?.length > 0 && ( + + ); +} +{ + menuOptions?.length > 0 && ( + + ); +} ``` In this snippet, `surfaceItems` and `menuItems` are retrieved from `configOverrides.optionConfig` or fall back to default values (`optionConfig.surfaceItems` and `optionConfig.menuItems`) when not provided in `configOverrides`. These items are then processed and rendered accordingly. + ### Example: Variant Overrides ```jsx const { styleOverrides, classNames, variantOverrides } = - useComponentOverrides('MessageHeader'); + useComponentOverrides("MessageHeader"); // Determine the display name variant or default to 'Normal' -const displayNameVariant = variantOverrides || 'Normal'; +const displayNameVariant = variantOverrides || "Normal"; // Render a span element for the message header username +## Try It Out 🚀 + +Explore our project in action! It's live for a sneak peek and testing at: https://rocketchat.github.io/EmbeddedChat/ + +Test credentials: + +- **Username:** test_acc +- **Password:** test_acc + ## Installation and usage Set up and start using the product in no time. Dive into our installation and usage docs [here](Usage/embeddedchat_setup.md) diff --git a/packages/e2e-react/src/App.tsx b/packages/e2e-react/src/App.tsx index 5be050dd0..d0f16785a 100644 --- a/packages/e2e-react/src/App.tsx +++ b/packages/e2e-react/src/App.tsx @@ -4,9 +4,8 @@ import { EmbeddedChat } from "@embeddedchat/react"; function App() { return ( ); } diff --git a/packages/e2e-react/tests/example.spec.ts b/packages/e2e-react/tests/example.spec.ts index e309eeb4e..1189f4442 100644 --- a/packages/e2e-react/tests/example.spec.ts +++ b/packages/e2e-react/tests/example.spec.ts @@ -1,18 +1,13 @@ -import { test, expect } from '@playwright/test'; +import { test, expect } from "@playwright/test"; -test('EmbeddedChat should render', async ({ page }) => { - await page.goto('/'); - await expect(page.locator('.ec-embedded-chat')).toBeVisible(); +test("EmbeddedChat should render", async ({ page }) => { + await page.goto("/"); + await expect(page.locator(".ec-embedded-chat")).toBeVisible(); }); -test('EmbeddedChat has a title', async ({ page }) => { - await page.goto('/'); - await expect(page.locator('.ec-chat-header--channelName')).toHaveText('Login to chat'); -}); - -test('EmbeddedChat has messages', async ({ page }) => { - await page.goto('/'); - - await page.waitForSelector('.ec-message'); - expect(await page.locator('.ec-message').count()).toBeGreaterThan(0); +test("EmbeddedChat has a title", async ({ page }) => { + await page.goto("/"); + await expect(page.locator(".ec-chat-header--channelName")).toHaveText( + "Login to chat" + ); }); diff --git a/packages/layout_editor/README.md b/packages/layout_editor/README.md index 690a7d8bf..571294786 100644 --- a/packages/layout_editor/README.md +++ b/packages/layout_editor/README.md @@ -17,6 +17,10 @@ We offer a layout editor that lets you customize the design and appearance of th - **Resizable Sidebar**: Adjust the sidebar by dragging. - **Theme Lab**: Customize layout and theme settings, including palette colors and typography. +### Try It Out 🚀 + +Explore the Layout Editor to style and customize EmbeddedChat to your needs. Generate a theme object and pass it to EmbeddedChat via props. Start customizing here: [Layout Editor](https://rocketchat.github.io/EmbeddedChat/layout_editor/) + ### Theme Lab In the Theme Lab, you can: @@ -54,5 +58,5 @@ yarn preview # Preview build ### Additional Resources -- For installation instructions of the EmbeddedChat RC App, visit [this guide](../rc-app/README.md). -- For detailed prop usage, refer to [this guide](../react/README.md). +- For installation instructions of the EmbeddedChat RC App, visit [this guide](https://rocketchat.github.io/EmbeddedChat/docs/docs/Usage/ec_rc_setup). +- For detailed prop usage, refer to [this guide](https://rocketchat.github.io/EmbeddedChat/docs/docs/Usage/embeddedchat_setup). diff --git a/packages/layout_editor/src/components/SortableMenu/Menu.styles.js b/packages/layout_editor/src/components/SortableMenu/Menu.styles.js index 6b16dd691..586ffe379 100644 --- a/packages/layout_editor/src/components/SortableMenu/Menu.styles.js +++ b/packages/layout_editor/src/components/SortableMenu/Menu.styles.js @@ -1,7 +1,7 @@ import { css } from '@emotion/react'; import { lighten, darken } from '@embeddedchat/ui-elements'; -export const getMenuStyles = ({ theme, colors }) => { +export const getMenuStyles = ({ theme }) => { const styles = { wrapper: css` position: relative; @@ -18,15 +18,14 @@ export const getMenuStyles = ({ theme, colors }) => { border-radius: 0.2em; padding: 0.5rem 0; box-shadow: ${theme.shadows[1]}; - background-color: ${colors.background}; + background-color: ${theme.colors.background}; `, }; return styles; }; -export const getMenuItemStyles = (customTheme) => { - const { mode, colors } = customTheme; +export const getMenuItemStyles = ({ theme, mode }) => { const styles = { item: css` @@ -38,11 +37,11 @@ export const getMenuItemStyles = (customTheme) => { padding: 0.25em 0.75em; white-space: nowrap; gap: 0.2rem; - color: ${colors.foreground}; + color: ${theme.colors.foreground}; &:hover { background-color: ${mode === 'light' - ? darken(colors.background, 0.05) - : lighten(colors.background, 2)}; + ? darken(theme.colors.background, 0.05) + : lighten(theme.colors.background, 2)}; cursor: pointer; } `, @@ -55,13 +54,13 @@ export const getMenuItemStyles = (customTheme) => { disabled: css` cursor: not-allowed !important; - color: ${colors.mutedForeground}; + color: ${theme.colors.mutedForeground}; `, icon: css` visibility: hidden; &:hover { - fill: ${colors.destructive}; + fill: ${theme.colors.destructive}; } `, @@ -74,7 +73,7 @@ export const getMenuItemStyles = (customTheme) => { dragOverlay: css` padding: 0.5rem 0.75em; - border: 1px solid ${colors.border}; + border: 1px solid ${theme.colors.border}; border-right: none; border-left: none; `, diff --git a/packages/layout_editor/src/components/SurfaceMenu/SurfaceMenu.styles.js b/packages/layout_editor/src/components/SurfaceMenu/SurfaceMenu.styles.js index 1d86eaf16..a62e50291 100644 --- a/packages/layout_editor/src/components/SurfaceMenu/SurfaceMenu.styles.js +++ b/packages/layout_editor/src/components/SurfaceMenu/SurfaceMenu.styles.js @@ -1,12 +1,12 @@ import { css } from '@emotion/react'; -export const getSurfaceItemStyles = ({ theme, colors }) => { +export const getSurfaceItemStyles = ({ theme }) => { const styles = { overlayBox: css` width: 24px; height: 24px; - border: 1px solid ${colors.border}; - border-radius: ${theme.schemes.radius}; + border: 1px solid ${theme.colors.border}; + border-radius: ${theme.radius}; `, itemContainer: css` @@ -16,8 +16,8 @@ export const getSurfaceItemStyles = ({ theme, colors }) => { width: 14px; height: 14px; border-radius: 50%; - background: ${colors.secondary}; - border: 1px solid ${colors.border}; + background: ${theme.colors.secondary}; + border: 1px solid ${theme.colors.border}; } `, @@ -30,7 +30,7 @@ export const getSurfaceItemStyles = ({ theme, colors }) => { icon: css` &:hover { - fill: ${colors.destructive}; + fill: ${theme.colors.destructive}; } `, }; diff --git a/packages/layout_editor/src/hooks/useDisplayNameColor.js b/packages/layout_editor/src/hooks/useDisplayNameColor.js index 043ca8a89..e5590898d 100644 --- a/packages/layout_editor/src/hooks/useDisplayNameColor.js +++ b/packages/layout_editor/src/hooks/useDisplayNameColor.js @@ -15,7 +15,7 @@ const useDisplayNameColor = () => { const getDisplayNameColor = (username) => { const hash = simpleHash(username); - const { saturation, luminance } = theme.schemes.contrastParams[mode]; + const { saturation, luminance } = theme.contrastParams[mode]; const hue = Math.abs(hash) % 360; return `hsl(${hue}, ${saturation}%, ${luminance}%)`; }; diff --git a/packages/layout_editor/src/theme/DefaultTheme.js b/packages/layout_editor/src/theme/DefaultTheme.js index 8752e2e4a..88d102103 100644 --- a/packages/layout_editor/src/theme/DefaultTheme.js +++ b/packages/layout_editor/src/theme/DefaultTheme.js @@ -1,20 +1,10 @@ const DefaultTheme = { + radius: '0.2rem', + commonColors: { + black: 'hsl(0, 100%, 0%)', + white: 'hsl(0, 100%, 100%)', + }, schemes: { - radius: '0.2rem', - contrastParams: { - light: { - saturation: 70, - luminance: 19, - }, - dark: { - saturation: 88, - luminance: 77, - }, - }, - common: { - black: 'hsl(0, 100%, 0%)', - white: 'hsl(0, 100%, 100%)', - }, light: { background: 'hsl(0, 0%, 100%)', foreground: 'hsl(240, 10%, 3.9%)', @@ -71,6 +61,17 @@ const DefaultTheme = { }, }, + contrastParams: { + light: { + saturation: 70, + luminance: 19, + }, + dark: { + saturation: 88, + luminance: 77, + }, + }, + typography: { default: { fontFamily: "'Times New Roman', serif", diff --git a/packages/layout_editor/src/views/ChatHeader/ChatHeader.styles.js b/packages/layout_editor/src/views/ChatHeader/ChatHeader.styles.js index 570a7e989..372fc77c2 100644 --- a/packages/layout_editor/src/views/ChatHeader/ChatHeader.styles.js +++ b/packages/layout_editor/src/views/ChatHeader/ChatHeader.styles.js @@ -1,7 +1,7 @@ import { css } from '@emotion/react'; import { darken, lighten } from '@embeddedchat/ui-elements'; -export const getChatHeaderStyles = ({ theme, mode, colors }) => { +export const getChatHeaderStyles = ({ theme, mode }) => { const styles = { clearSpacing: css` margin: 0; @@ -19,8 +19,8 @@ export const getChatHeaderStyles = ({ theme, mode, colors }) => { chatHeaderParent: css` background-color: ${mode === 'light' - ? darken(colors.background, 0.03) - : lighten(colors.background, 1)}; + ? darken(theme.colors.background, 0.03) + : lighten(theme.colors.background, 1)}; width: 100%; z-index: 1200; display: flex; @@ -47,8 +47,8 @@ export const getChatHeaderStyles = ({ theme, mode, colors }) => { overlayBox: css` width: 24px; height: 24px; - border: 1px solid ${colors.border}; - border-radius: ${theme.schemes.radius}; + border: 1px solid ${theme.colors.border}; + border-radius: ${theme.radius}; `, }; diff --git a/packages/layout_editor/src/views/ChatInput/ChatInput.styles.js b/packages/layout_editor/src/views/ChatInput/ChatInput.styles.js index 92855c1b0..dfa592877 100644 --- a/packages/layout_editor/src/views/ChatInput/ChatInput.styles.js +++ b/packages/layout_editor/src/views/ChatInput/ChatInput.styles.js @@ -1,14 +1,14 @@ import { css } from '@emotion/react'; import { darken, lighten } from '@embeddedchat/ui-elements'; -export const getChatInputStyles = ({ theme, colors }) => { +export const getChatInputStyles = ({ theme }) => { const styles = { inputWithFormattingBox: css` - border: 1px solid ${colors.border}; - border-radius: ${theme.schemes.radius}; + border: 1px solid ${theme.colors.border}; + border-radius: ${theme.radius}; margin: 0.5rem 2rem 1rem 2rem; &.focused { - border: ${`1.5px solid ${colors.ring}`}; + border: ${`1.5px solid ${theme.colors.ring}`}; } `, @@ -48,27 +48,27 @@ export const getChatInputStyles = ({ theme, colors }) => { return styles; }; -export const getChatInputToolbarStyles = ({ theme, mode, colors }) => { +export const getChatInputToolbarStyles = ({ theme, mode }) => { const styles = { chatFormat: css` bottom: 0; padding: 0.2rem; align-items: center; background-color: ${mode === 'light' - ? darken(colors.background, 0.03) - : lighten(colors.background, 1)}; + ? darken(theme.colors.background, 0.03) + : lighten(theme.colors.background, 1)}; display: flex; position: relative; flex-direction: row; gap: 0.375rem; - border-radius: 0 0 ${theme.schemes.radius} ${theme.schemes.radius}; + border-radius: 0 0 ${theme.radius} ${theme.radius}; `, }; return styles; }; -export const getFormatterStyles = ({ theme, colors }) => { +export const getFormatterStyles = ({ theme }) => { const styles = { toolboxContainer: css` display: flex; @@ -80,11 +80,11 @@ export const getFormatterStyles = ({ theme, colors }) => { toolbox: css` display: flex; - background-color: ${colors.background}; - box-shadow: 0 0 2px ${colors.foreground}; + background-color: ${theme.colors.background}; + box-shadow: 0 0 2px ${theme.colors.foreground}; gap: 0.25rem; padding: 0.25rem; - border-radius: ${theme.schemes.radius}; + border-radius: ${theme.radius}; `, }; diff --git a/packages/layout_editor/src/views/ChatLayout/ChatLayout.jsx b/packages/layout_editor/src/views/ChatLayout/ChatLayout.jsx index 0f745e9da..8e071e23a 100644 --- a/packages/layout_editor/src/views/ChatLayout/ChatLayout.jsx +++ b/packages/layout_editor/src/views/ChatLayout/ChatLayout.jsx @@ -10,9 +10,8 @@ import members from '../../data/members.json'; import useLayoutStore from '../../store/layoutStore'; const ChatLayout = () => { - const theme = useTheme(); + const { theme } = useTheme(); const styles = getChatLayoutStyles(theme); - const { colors } = theme; const { setSidebarWidth } = useLayoutStore((state) => ({ setSidebarWidth: state.setSidebarWidth, @@ -44,7 +43,7 @@ const ChatLayout = () => { diff --git a/packages/layout_editor/src/views/ChatLayout/ChatLayout.styles.js b/packages/layout_editor/src/views/ChatLayout/ChatLayout.styles.js index 6d5b481a1..d15c43ae4 100644 --- a/packages/layout_editor/src/views/ChatLayout/ChatLayout.styles.js +++ b/packages/layout_editor/src/views/ChatLayout/ChatLayout.styles.js @@ -1,6 +1,6 @@ import { css } from '@emotion/react'; -export const getChatLayoutStyles = ({ colors }) => { +export const getChatLayoutStyles = () => { const styles = { layout: css` height: 100%; diff --git a/packages/layout_editor/src/views/GlobalStyles.jsx b/packages/layout_editor/src/views/GlobalStyles.jsx index 2b6bd97e9..b6b0fda2b 100644 --- a/packages/layout_editor/src/views/GlobalStyles.jsx +++ b/packages/layout_editor/src/views/GlobalStyles.jsx @@ -2,7 +2,7 @@ import React from 'react'; import { css, Global } from '@emotion/react'; import { useTheme, alpha } from '@embeddedchat/ui-elements'; -const useStyles = ({ colors, theme }) => css` +const getGlobalStyles = ({ theme }) => css` * { box-sizing: border-box; margin: 0; @@ -16,7 +16,7 @@ const useStyles = ({ colors, theme }) => css` } a { - color: ${colors.foreground}; + color: ${theme.colors.foreground}; } ::-webkit-scrollbar { @@ -25,12 +25,12 @@ const useStyles = ({ colors, theme }) => css` } ::-webkit-scrollbar-thumb { - background: ${alpha(colors.primary, 0.5)}; + background: ${alpha(theme.colors.primary, 0.5)}; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { - background: ${colors.primary}; + background: ${theme.colors.primary}; } ::-webkit-scrollbar-button { @@ -39,7 +39,7 @@ const useStyles = ({ colors, theme }) => css` `; const GlobalStyles = () => { - const styles = useStyles(useTheme()); + const styles = getGlobalStyles(useTheme()); return ; }; diff --git a/packages/layout_editor/src/views/LayoutEditor.jsx b/packages/layout_editor/src/views/LayoutEditor.jsx index 106095f90..d8145cd72 100644 --- a/packages/layout_editor/src/views/LayoutEditor.jsx +++ b/packages/layout_editor/src/views/LayoutEditor.jsx @@ -9,7 +9,8 @@ import { getEditorStyles } from './LayoutEditor.style'; const LayoutEditor = () => { const themeLabOpen = useLayoutStore((state) => state.themeLabOpen); - const styles = getEditorStyles(useTheme()); + const { theme } = useTheme(); + const styles = getEditorStyles(theme); return ( diff --git a/packages/layout_editor/src/views/LayoutEditor.style.js b/packages/layout_editor/src/views/LayoutEditor.style.js index 61451c36b..c6afbd7e7 100644 --- a/packages/layout_editor/src/views/LayoutEditor.style.js +++ b/packages/layout_editor/src/views/LayoutEditor.style.js @@ -1,23 +1,23 @@ import { css } from '@emotion/react'; -export const getEditorStyles = ({ theme, colors }) => { +export const getEditorStyles = (theme) => { const styles = { embeddedchat: css` width: 75%; position: relative; - background: ${colors.background}; - color: ${colors.foreground}; + background: ${theme.colors.background}; + color: ${theme.colors.foreground}; display: flex; flex: 1; flex-direction: column; - border: ${`1.5px solid ${theme.schemes.border}`}; - border-radius: ${theme.schemes.radius}; + border: ${`1.5px solid ${theme.colors.border}`}; + border-radius: ${theme.radius}; overflow: hidden; `, layoutEditor: css` - background: ${colors.background}; - color: ${colors.foreground}; + background: ${theme.colors.background}; + color: ${theme.colors.foreground}; height: 100vh; display: flex; gap: 0.25rem; diff --git a/packages/layout_editor/src/views/Message/BubbleVariant/Bubble.styles.js b/packages/layout_editor/src/views/Message/BubbleVariant/Bubble.styles.js index 0bc6c7ce0..ac7d387ac 100644 --- a/packages/layout_editor/src/views/Message/BubbleVariant/Bubble.styles.js +++ b/packages/layout_editor/src/views/Message/BubbleVariant/Bubble.styles.js @@ -1,7 +1,7 @@ import { css } from '@emotion/react'; import { alpha } from '@embeddedchat/ui-elements'; -export const bubbleStyles = ({ theme, colors }) => { +export const bubbleStyles = ({ theme }) => { const styles = { name: 'bubble', messageParent: css` @@ -11,7 +11,7 @@ export const bubbleStyles = ({ theme, colors }) => { align-items: flex-start; padding: 0 2.25rem 0.25rem 2.25rem; a { - color: ${colors.primaryForeground}; + color: ${theme.colors.primaryForeground}; } `, @@ -36,12 +36,11 @@ export const bubbleStyles = ({ theme, colors }) => { width: fit-content; max-width: 80%; padding: 0.5rem 0.75rem; - border-radius: ${theme.schemes.radius} ${theme.schemes.radius} - ${theme.schemes.radius} 0.2rem; - background: ${colors.primary}; - color: ${colors.primaryForeground}; + border-radius: ${theme.radius} ${theme.radius} ${theme.radius} 0.2rem; + background: ${theme.colors.primary}; + color: ${theme.colors.primaryForeground}; &:hover { - background: ${alpha(colors.primary, 0.8)}; + background: ${alpha(theme.colors.primary, 0.8)}; } `, @@ -49,16 +48,14 @@ export const bubbleStyles = ({ theme, colors }) => { position: relative; width: fit-content; max-width: 80%; - border-radius: ${theme.schemes.radius} ${theme.schemes.radius} - ${theme.schemes.radius} 0.2rem; + border-radius: ${theme.radius} ${theme.radius} ${theme.radius} 0.2rem; `, sequential: css` - border-radius: 0.2rem ${theme.schemes.radius} ${theme.schemes.radius} - 0.2rem; + border-radius: 0.2rem ${theme.radius} ${theme.radius} 0.2rem; `, lastSequential: css` - border-radius: 0.2rem ${theme.schemes.radius} ${theme.schemes.radius}; + border-radius: 0.2rem ${theme.radius} ${theme.radius}; `, metricsContainer: css` @@ -67,8 +64,8 @@ export const bubbleStyles = ({ theme, colors }) => { `, threadReplyButton: css` - background-color: ${colors.accent}; - color: ${colors.accentForeground}; + background-color: ${theme.colors.accent}; + color: ${theme.colors.accentForeground}; border-radius: 0.2rem; `, @@ -86,11 +83,11 @@ export const bubbleStyles = ({ theme, colors }) => { `, videoAttachmentContainer: css` - border: 1px solid ${colors.border}; + border: 1px solid ${theme.colors.border}; border-radius: inherit; `, imageAttachmentContainer: css` - border: 1px solid ${colors.border}; + border: 1px solid ${theme.colors.border}; border-radius: inherit; overflow: hidden; `, @@ -99,12 +96,12 @@ export const bubbleStyles = ({ theme, colors }) => { `, quoteContainer: css` - background-color: ${colors.background}; - color: ${colors.foreground}; + background-color: ${theme.colors.background}; + color: ${theme.colors.foreground}; flex: 1; border-bottom-right-radius: inherit; border-bottom-left-radius: inherit; - border: 2px solid ${colors.border}; + border: 2px solid ${theme.colors.border}; margin: 0.2rem -0.75rem -0.5rem; `, @@ -126,9 +123,7 @@ export const bubbleStyles = ({ theme, colors }) => { return styles; }; -export const bubbleStylesMe = (customTheme) => { - const { theme, colors } = customTheme; - +export const bubbleStylesMe = ({ theme }) => { const styles = { messageParentMe: css` flex-direction: row-reverse; @@ -139,27 +134,23 @@ export const bubbleStylesMe = (customTheme) => { `, messageBodyMe: css` - background: ${colors.secondary}; - color: ${colors.secondaryForeground}; - border-radius: ${theme.schemes.radius} ${theme.schemes.radius} 0.2rem - ${theme.schemes.radius}; + background: ${theme.colors.secondary}; + color: ${theme.colors.secondaryForeground}; + border-radius: ${theme.radius} ${theme.radius} 0.2rem ${theme.radius}; &:hover { - background: ${alpha(colors.secondary, 0.8)}; + background: ${alpha(theme.colors.secondary, 0.8)}; } `, attachmentBodyMe: css` - border-radius: ${theme.schemes.radius} ${theme.schemes.radius} 0.2rem - ${theme.schemes.radius}; + border-radius: ${theme.radius} ${theme.radius} 0.2rem ${theme.radius}; `, lastSequentialMe: css` - border-radius: ${theme.schemes.radius} 0.2rem ${theme.schemes.radius} - ${theme.schemes.radius}; + border-radius: ${theme.radius} 0.2rem ${theme.radius} ${theme.radius}; `, sequentialMe: css` - border-radius: ${theme.schemes.radius} 0.2rem 0.2rem - ${theme.schemes.radius}; + border-radius: ${theme.radius} 0.2rem 0.2rem ${theme.radius}; `, metricsContainerMe: css` @@ -177,7 +168,7 @@ export const bubbleStylesMe = (customTheme) => { pinnedContainerMe: css` border-inline-start: none; - border-inline-end: 3px solid ${colors.border}; + border-inline-end: 3px solid ${theme.colors.border}; `, textUserInfoMe: css` diff --git a/packages/layout_editor/src/views/Message/BubbleVariant/BubbleThreadBtn.js b/packages/layout_editor/src/views/Message/BubbleVariant/BubbleThreadBtn.js index fd966423e..cc8f301f3 100644 --- a/packages/layout_editor/src/views/Message/BubbleVariant/BubbleThreadBtn.js +++ b/packages/layout_editor/src/views/Message/BubbleVariant/BubbleThreadBtn.js @@ -3,7 +3,7 @@ import { format } from 'date-fns'; import { Button, Icon, useTheme } from '@embeddedchat/ui-elements'; const BubbleThreadBtn = ({ message, handleOpenThread, styles = {} }) => { - const { colors } = useTheme(); + const { theme } = useTheme(); return ( <> @@ -11,7 +11,7 @@ const BubbleThreadBtn = ({ message, handleOpenThread, styles = {} }) => { name="arc" size="30" fill="none" - color={`${colors.accent}`} + color={`${theme.colors.accent}`} css={styles.arcIcon} />