Theming Foundation Set up

package.json

@@ -7,12 +7,8 @@
 		"packages/*"
 	],
 	"devDependencies": {
-		"@rollup/plugin-replace": "^5.0.2",
 		"esbuild": "^0.17.19",
 		"lerna": "^6.6.2",
-		"rollup": "^3.23.0",
-		"rollup-plugin-dts": "^5.3.0",
-		"rollup-plugin-esbuild": "^5.0.0",
 		"typescript": "^5.1.3"
 	}
 }

packages/api/package.json

@@ -14,6 +14,12 @@
 	},
 	"author": "",
 	"license": "ISC",
+	"devDependencies": {
+		"rollup": "^3.23.0",
+		"rollup-plugin-dts": "^5.3.0",
+		"rollup-plugin-esbuild": "^5.0.0",
+		"rollup-plugin-serve": "^2.0.2"
+	},
 	"dependencies": {
 		"@embeddedchat/auth": "./packages/auth",
 		"@rocket.chat/sdk": "^1.0.0-alpha.42",

packages/api/rollup.config.js

@@ -1,7 +1,5 @@
 import dts from 'rollup-plugin-dts'
 import esbuild from 'rollup-plugin-esbuild'
-import serve from 'rollup-plugin-serve'
-
 import packageJson from './package.json' assert { type: 'json' };
 
 const name = packageJson.main.replace(/\.js$/, '');
@@ -14,7 +12,7 @@ const bundle = config => ({
 
 export default [
   bundle({
-    plugins: [esbuild(), serve('dist')],
+    plugins: [esbuild()],
     output: [
       {
         file: `${name}.js`,

packages/auth/package.json

@@ -17,6 +17,9 @@
 		"axios": "^1.4.0"
 	},
 	"devDependencies": {
-		"parcel": "^2.9.1"
+		"parcel": "^2.9.1",
+		"rollup": "^3.23.0",
+		"rollup-plugin-dts": "^5.3.0",
+		"rollup-plugin-esbuild": "^5.0.0"
 	}
 }

packages/react/.eslintignore

@@ -0,0 +1 @@
+rollup.config.js

packages/react/.eslintrc.json

@@ -0,0 +1,57 @@
+{
+  "parser": "@babel/eslint-parser",
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "extends": [
+    "airbnb",
+    "plugin:react/recommended",
+    "prettier",
+    "plugin:storybook/recommended"
+  ],
+  "plugins": [
+    "react",
+    "prettier"
+  ],
+  "rules": {
+    "prettier/prettier": "error",
+    "no-unused-vars": "warn",
+    "no-console": "off",
+    "no-underscore-dangle": "off",
+    "no-unused-expressions": "off",
+    "react/function-component-definition": "off",
+    "react/require-default-props": "off",
+    "react/jsx-filename-extension": [
+      1,
+      {
+        "extensions": [
+          ".js",
+          ".jsx"
+        ]
+      }
+    ],
+    "arrow-body-style": [
+      "error",
+      "as-needed"
+    ],
+    "import/prefer-default-export": "off",
+    "camelcase": "off",
+    "no-param-reassign": "off",
+    "class-methods-use-this": "off",
+    "consistent-return": "off",
+    "react/forbid-prop-types": "off",
+    "react/no-array-index-key": "off",
+    "jsx-a11y/media-has-caption": "off",
+    "jsx-a11y/alt-text": "off",
+    "no-nested-ternary": "off",
+    "no-undef": "error",
+    "no-restricted-exports": "off",
+    "react/destructuring-assignment": "off",
+    "react/jsx-no-useless-fragment": "off",
+    "react/jsx-props-no-spreading": "off",
+    "import/no-cycle": 0,
+    "import/no-extraneous-dependencies": "off",
+    "react/no-unknown-property": ["error", { "ignore": ["css"] }]
+  }
+}

packages/react/.gitignore

@@ -0,0 +1,107 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# pnpm-lock
+pnpm-lock.yaml

packages/react/.gitpod.yml

@@ -0,0 +1,13 @@
+tasks:
+  - name: Initialize RC server
+    init: |
+      docker-compose up -d
+  - name: Initialize playground
+    init: |
+      npm install
+      cd playground 
+      npm install
+      cd ..
+    command: npm run dev
+
+

packages/react/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "semi": true
+}

packages/react/.storybook/main.js

@@ -0,0 +1,18 @@
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const config = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+};
+
+export default config;

packages/react/.storybook/preview.js

@@ -0,0 +1,17 @@
+import 'normalize.css'
+import '@rocket.chat/icons/dist/rocketchat.css';
+
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

packages/react/README.md

@@ -0,0 +1,95 @@
+# EmbeddedChat
+
+An easy to use full-stack component (ReactJS + backend behaviors) embedding Rocket.Chat into your webapp.
+
+_EmbeddedChat is a full-stack React component node module of the RocketChat application that is fully configurable, extensible, and flexible for use. It is tightly bound with the RocketChat server using Rocket.Chat nodejs SDK and its UI using RocketChat's Fuselage Design System._
+
+![embeddedchatwall](https://user-images.githubusercontent.com/73601258/178119162-ecabb9b7-e3ae-4c70-8ab2-f6c02856f4c6.png)
+
+<div align='center' width='100%'>
+<a href="https://github.com/monoclehq">
+<img src="https://open-source-assets.middlewarehq.com/svgs/RocketChat-EmbeddedChat-contributor-metrics-dark-widget.svg?caching=true"></img>
+</a>
+</div>
+
+## Installation
+
+```bash
+npm i embeddedchat
+```
+
+## Usage
+
+Just import the component,
+
+```javascript
+import { RCComponent } from 'embeddedchat';
+```
+
+and use it,
+
+```jsx
+<RCComponent
+  isClosable={true}
+  setClosableState={setClosableState}
+  moreOpts={true}
+  width="100%"
+  height="40vh"
+  GOOGLE_CLIENT_ID={process.env.REACT_APP_GOOGLE_CLIENT_ID}
+  host={'http://localhost:3000'}
+  roomId={'GENERAL'}
+  channelName="Customer Service"
+  anonymousMode={false}
+  showAvatar={false}
+  showRoles={false}
+/>
+```
+
+## Props
+
+Read this [wiki page](https://github.com/RocketChat/EmbeddedChat/wiki/Roots-of-EmbeddedChat) for more info on each prop.
+
+| prop             | description                                                                                                                                 |
+| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
+| isClosable       | is the component closable?, defaults to `false`.                                                                                            |
+| setClosableState | the reusable setState, which will track the opening and closing of EmbeddedChat. It is a `setState fn` => which toggles the previous state. |
+| moreOpts         | it adds a kebab menu with added functionalities like showing pinned, starred, thread messages                                               |
+| width            | `width` of the component                                                                                                                    |
+| height           | `height` of the component (based on the `ChatBody`)                                                                                         |
+| host             | your Rocket.Chat host domain, defaults to `http://localhost:3000` (the dev server)                                                          |
+| GOOGLE_CLIENT_ID | it is the google client id that you will receive after creating a project in google console                                                 |
+| roomId           | the public room's id that you want to subscribe to                                                                                          |
+| channelName      | the fallback channel name to be present on the chat header                                                                                  |
+| anonymousMode    | if the user can see the chat without logging in                                                                                             |
+| showAvatar       | show the user's avatar in the chat component, defaults to false                                                                             |
+| showRoles        | show the user's roles in the chat component, defaults to false                                                                              |
+| enableThreads    | enable RocketChat's style thread messages, defaults to false                                                                             |
+
+## Setting up Authentication
+
+Follow this [documentation](https://docs.rocket.chat/guides/administration/admin-panel/settings/oauth/google-oauth-setup) to receive the `GOOGLE_CLIENT_ID` as well as to setup Google SSO for EmbeddedChat.
+
+## Development
+
+<h3>Local Setup</h3>
+
+```bash
+npm i
+cd playground && npm i
+npm run dev # at the root folder --> EMBEDDEDCHAT
+
+```
+
+It will open up a playground react app at `http://localhost:4000`.
+Make a `.env` file in the playground directory following the `.env[example]` file.
+
+<h3>Gitpod Setup</h3>
+
+Make a `.env` file in the playground directory following the `.env[example]` file.
+
+<a href="https://gitpod.io/#https://github.com/RocketChat/EmbeddedChat">
+  <img
+    src="https://img.shields.io/badge/Contribute%20with-Gitpod-908a85?logo=gitpod"
+    alt="Contribute with Gitpod"
+  />
+</a>

packages/react/babel.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        modules: false,
+        bugfixes: true,
+        targets: { browsers: '> 0.25%, ie 11, not op_mini all, not dead' },
+      },
+    ],
+    '@babel/preset-react',
+    '@emotion/babel-preset-css-prop',
+  ],
+};