This component is part of a monorepo, specifically within thepackages/ui-elements project, which houses the main EmbeddedChat Component.

Try It Out 🚀​

Check out our Storybook showcasing all the components in action! Preview and test them here:https://rocketchat.github.io/EmbeddedChat/ui-elements/

Development​

To develop and view the components:

1. Clone the repository.

2. Navigate topackages/ui-elements.

3. Run the following commands:

   yarn build       # To build the component library
   yarn storybook   # To view the components in real-time
   

Installation​

To install the component library, run:

yarn add @embeddedchat/ui-elements

This library offers a range of UI components, includingBox,Input,StaticSelect,MultiSelect, and more. For a complete list of available components, please refer to the Storybook.

You can import components using the following syntax:

import{
Box,
Heading,
Icon,
Menu,
  useToastBarDispatch,
  useComponentOverrides,
}from'@embeddedchat/ui-elements';

###Theming

Bydefault, the component uses a standard theme.You can apply a custom theme and mode by importing`ThemeProvider`from`@embeddedchat/ui-elements` and using itasfollows:

```jsx
import{ThemeProvider}from"@embeddedchat/ui-elements";

<ThemeProvidertheme={customTheme}mode="light">
<YourMainComponent/>
</ThemeProvider>;

Supported modes are'light' and'dark'. Ensure that thetheme prop is provided with the correct format.

The library also includes auseTheme hook for managing the theme and mode:

import{ useTheme}from"@embeddedchat/ui-elements";

const{ theme, mode, setTheme, setMode}=useTheme();

TheuseTheme hook provides:

• theme: The current theme object.
• mode: The current mode ('light' or'dark').
• setTheme: A function to update the theme dynamically.
• setMode: A function to toggle between'light' and'dark' modes.

setTheme allows you to change the theme on-the-fly, whilesetMode lets you switch between light and dark modes. This flexibility is useful for dynamically adjusting the appearance of your application based on user preferences or other conditions.

You can use this hook to style your components with the provided theme.theme object also dynamically providescolors andinvertedColors, simplifying color management.theme.colors will automatically adjust according to the mode, whileinvertedColors provides colors for the alternate mode.

Additionally, the library offersdarken andlighten functions to dynamically adjust color brightness:

import{ darken, lighten}from"@embeddedchat/ui-elements";

These functions can be used as follows:

background-color: ${mode==='light'
?darken(colors.background,0.03)
:lighten(colors.background,1)};

This hook allows you to dynamically switch modes or themes as needed. Thetheme object must adhere to a specific format, as outlined in the EmbeddedChatreact projectReadme.md.