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/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/ui-elements.md b/packages/docs/docs/Development/ui-elements.md index fefd676f6..47d0221fa 100644 --- a/packages/docs/docs/Development/ui-elements.md +++ b/packages/docs/docs/Development/ui-elements.md @@ -1,6 +1,7 @@ --- title: UI-Elements --- + # UI-Elements ![Embedded Chat Demo](https://github.com/RocketChat/EmbeddedChat/assets/78961432/b85c7b8a-65e2-4a90-a843-f4072c942ac0) @@ -9,6 +10,10 @@ This component is part of a monorepo, specifically within the `packages/ui-eleme ![image](https://github.com/user-attachments/assets/2fd76929-ce43-4bb3-8ea8-3a7318468923) +### 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: diff --git a/packages/docs/docs/Usage/layout_editor.md b/packages/docs/docs/Usage/layout_editor.md index bc3fbdac9..230a271fb 100644 --- a/packages/docs/docs/Usage/layout_editor.md +++ b/packages/docs/docs/Usage/layout_editor.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: diff --git a/packages/docs/docs/introduction.md b/packages/docs/docs/introduction.md index 4f5dccfb3..5d595248d 100644 --- a/packages/docs/docs/introduction.md +++ b/packages/docs/docs/introduction.md @@ -18,6 +18,15 @@ _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 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/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/react/README.md b/packages/react/README.md index 5478d4bf3..ce870a425 100644 --- a/packages/react/README.md +++ b/packages/react/README.md @@ -132,7 +132,7 @@ This section of the guide aims to provide a detailed explanation of these props. /> ``` - However, the `theme` object must follow a specific format. For detailed information on theming EmbeddedChat, refer to [theming.md](../docs/theming.md). + However, the `theme` object must follow a specific format. For detailed information on theming EmbeddedChat, refer to [theming.md](https://rocketchat.github.io/EmbeddedChat/docs/docs/Usage/theming). In Storybook, demonstrations of different themes and variants are provided in the 'Design Variants' section. @@ -151,11 +151,11 @@ This section of the guide aims to provide a detailed explanation of these props. 1. **Local Storage**: Store the `ec-token` in the browser's local storage. 2. **HTTP-Only Cookie**: Store the `ec-token` as an HTTP-only cookie. [This method requires the installation of the EmbeddedChat RC App on the Rocket.Chat server] - For a detailed guide on using each of these authentication methods with the `auth` and `secure` props, refer to the [authentication.md](../docs/authentication.md) file. + For a detailed guide on using each of these authentication methods with the `auth` and `secure` props, refer to the [authentication guide](../docs/authentication.md) file. ## Development -Follow this [EmbeddedChat Readme](https://github.com/RocketChat/EmbeddedChat) to setup EmbeddedChat for development. +Follow this [development guide](https://rocketchat.github.io/EmbeddedChat/docs/docs/Development/dev_launch) to setup EmbeddedChat for development. ## Conclusion diff --git a/packages/ui-elements/README.md b/packages/ui-elements/README.md index 5a17e4a48..bee7a2227 100644 --- a/packages/ui-elements/README.md +++ b/packages/ui-elements/README.md @@ -10,12 +10,16 @@ This component is part of a monorepo, specifically within the `packages/react` p ![image](https://github.com/user-attachments/assets/2fd76929-ce43-4bb3-8ea8-3a7318468923) +### 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 to `packages/layout_editor`. +2. Navigate to `packages/ui-elements`. 3. Run the following commands: ```bash @@ -92,4 +96,4 @@ background-color: ${mode === 'light' : lighten(colors.background, 1)}; ``` -This hook allows you to dynamically switch modes or themes as needed. The `theme` object must adhere to a specific format, as outlined in the EmbeddedChat `react` project [Readme.md](../docs/theming.md). +This hook allows you to dynamically switch modes or themes as needed. The `theme` object must adhere to a specific format, as outlined in the [theming guide](https://rocketchat.github.io/EmbeddedChat/docs/docs/Usage/theming).