Skip to content

Commit

Permalink
[#1590] Refactor: Split chatplugin into library and app targets (#2120)
Browse files Browse the repository at this point in the history
  • Loading branch information
chrismatix committed Jul 8, 2021
1 parent 524fb60 commit 3f5a69c
Show file tree
Hide file tree
Showing 55 changed files with 487 additions and 464 deletions.
4 changes: 2 additions & 2 deletions bazel.tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -75,10 +75,10 @@
"./frontend/chat-plugin/handles"
],
"chat-plugin": [
"./frontend/chat-plugin"
"./frontend/chat-plugin/lib"
],
"chat-plugin/*": [
"./frontend/chat-plugin/*"
"./frontend/chat-plugin/lib/*"
]
}
}
Expand Down
152 changes: 1 addition & 151 deletions frontend/chat-plugin/BUILD
Original file line number Diff line number Diff line change
@@ -1,165 +1,15 @@
load("//tools/lint:web.bzl", "web_lint")
load("@com_github_airyhq_bazel_tools//lint:buildifier.bzl", "check_pkg")
load("@npm//@bazel/typescript:index.bzl", "ts_config")
load("@com_github_airyhq_bazel_tools//web:typescript.bzl", "ts_web_library")
load("@com_github_airyhq_bazel_tools//web:web_app.bzl", "web_app")
load("@com_github_airyhq_bazel_tools//web:web_library.bzl", "web_library")
load("@rules_pkg//:pkg.bzl", "pkg_tar")
load("//tools/build:container_release.bzl", "container_release")
load("@io_bazel_rules_docker//container:container.bzl", "container_image")
load("//tools/build/npm:rules.bzl", "assemble_npm", "deploy_npm")
load("//tools/lint:web.bzl", "web_lint")

package(default_visibility = ["//visibility:public"])

module_deps = [
"//lib/typescript/assets",
"//lib/typescript/components",
"//lib/typescript/types",
"//lib/typescript/model",
"//lib/typescript/render",
"//lib/typescript/dates",
"//frontend/chat-plugin/handles:chat-plugin-handles",
]

web_app(
name = "bundle",
aliases = {
"react": "preact/compat",
"react-dom": "preact/compat",
},
app_lib = ":chat-plugin",
entry = "frontend/chat-plugin/src/iframe",
index = ":development.html",
module_deps = module_deps,
output = {
"publicPath": "/chatplugin/ui",
},
)

web_library(
name = "library",
aliases = {
"react": "preact/compat",
"react-dom": "preact/compat",
},
app_lib = ":chat-plugin",
entry = "frontend/chat-plugin/src/defaultScript.js",
module_deps = module_deps,
output = {
"libraryExport": "AiryWidget",
"publicPath": "/chatplugin/ui",
"filename": "s.js",
},
)

web_library(
name = "dist",
app_lib = ":chat-plugin",
entry = "frontend/chat-plugin/index.js",
externals = {
"@stomp/stompjs": "@stomp/stompjs",
"@types/node": "@types/node",
"@types/react": "@types/react",
"@types/react-dom": "@types/react-dom",
"linkifyjs": "linkifyjs",
"react": "react",
"react-dom": "react-dom",
"camelcase-keys": "camelcase-keys",
},
module_deps = module_deps,
output = {
"library": "@airyhq/chat-plugin",
"libraryTarget": "umd",
"filename": "index.js",
},
)

ts_web_library(
name = "chat-plugin",
tsconfig = ":widget_tsconfig",
deps = module_deps + [
"@npm//@stomp/stompjs",
"@npm//@types/node",
"@npm//@types/react",
"@npm//@types/react-dom",
"@npm//linkifyjs",
"@npm//react",
"@npm//react-dom",
"@npm//camelcase-keys",
"@npm//emoji-mart",
],
)

ts_config(
name = "widget_tsconfig",
src = "bazel.tsconfig.json",
deps = ["//:bazel.tsconfig.json"],
)

pkg_tar(
name = "bundle_tar",
srcs = [":library"],
package_dir = "/usr/share/nginx/html/",
strip_prefix = "./library",
)

pkg_tar(
name = "example_tar",
srcs = [":example.html"],
package_dir = "/usr/share/nginx/html/",
)

pkg_tar(
name = "conf_tar",
srcs = [":nginx.conf"],
package_dir = "/etc/nginx",
)

container_image(
name = "image",
base = "@nginx_base//image",
tars = [
":bundle_tar",
":example_tar",
":conf_tar",
],
visibility = ["//visibility:public"],
)

container_release(
registry = "ghcr.io/airyhq/frontend",
repository = "chat-plugin",
)

genrule(
name = "npm_library",
srcs = [
"package.json",
"README.md",
":dist",
":chat-plugin",
],
outs = ["chat-plugin_lib"],
cmd = """
mkdir -p $(OUTS)/{src,dist} && cp -R $(location :dist) $(OUTS) \
&& cp $(location :package.json) $(location :README.md) $(OUTS) \
&& mv $(RULEDIR)/src $(OUTS)
""",
)

assemble_npm(
name = "assemble-npm",
target = ":npm_library",
version_file = "//:VERSION",
)

deploy_npm(
name = "publish-npm",
release = "https://registry.npmjs.org/",
snapshot = "https://registry.npmjs.org/",
target = ":assemble-npm",
)

check_pkg(name = "buildifier")

web_lint()
55 changes: 15 additions & 40 deletions frontend/chat-plugin/README.md
Original file line number Diff line number Diff line change
@@ -1,52 +1,27 @@
# Airy Chat Plugin

[Airy Chat Plugin](https://airy.co/docs/core/sources/chatplugin/overview) is an open-source chat widget that is fully customizable and included in [Airy Core](https://airy.co/docs/core/).
This project hosts the frontend of the [Airy Live Chat Plugin](https://airy.co/docs/core/sources/chatplugin/overview) source.

## Install
- `lib/`

```bash
npm install --save @airyhq/chat-plugin
```
Chat Plugin source code and npm library deployment.

or
- `image/`

```bash
yarn add @airyhq/chat-plugin
```
Builds an image with a bundle that will bootstrap the Chat Plugin using the user's script tag installation.

- `dev/`

## Usage

First, [set up the Airy Chat Plugin as a source](https://airy.co/docs/core/sources/chatplugin/quickstart) to Airy Core to get the channelId. Then, install the package and import the Airy Chat Plugin to a React component. Pass the configuration variables to the AiryChatPlugin wrapper to customize it.

```tsx
import React from "react";
import {AiryChatPlugin, AiryChatPluginConfiguration} from "@airyhq/chat-plugin";

const Component = () => {
const demoConfig: AiryChatPluginConfiguration = {
apiHost: ApiHostURL,
channelId: yourChannelId,
config: {
showMode: true,
headerText: "i am a header text",
startNewConversationTex: "start new conversation text",
headerTextColor: "#FF0000",
primaryColor: "#0000FF",
accentColor: "#FFA500",
backgroundColor: "#8510d8",
bubbleIconUrl: "#FFFF00",
sendMessageIcon: "https://yourcustomIcon/sent.png"
}
};

return (
<div className="demoChatPlugin">
<AiryChatPlugin config={demoConfig} />
</div>
);
};
Contains entrypoint for local development. Run:

```shell script
./scripts/web-dev.sh //frontend/chat-plugin/dev:bundle_server
```

- `handles`

Cypress css tags.

## License

Apache 2.0 © [Airy, Inc.](https://airy.co)
21 changes: 21 additions & 0 deletions frontend/chat-plugin/deps.bzl
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
module_deps = [
"//lib/typescript/assets",
"//lib/typescript/components",
"//lib/typescript/types",
"//lib/typescript/model",
"//lib/typescript/render",
"//lib/typescript/dates",
"//frontend/chat-plugin/handles:chat-plugin-handles",
]

npm_deps = [
"@npm//@stomp/stompjs",
"@npm//@types/node",
"@npm//@types/react",
"@npm//@types/react-dom",
"@npm//linkifyjs",
"@npm//react",
"@npm//react-dom",
"@npm//camelcase-keys",
"@npm//emoji-mart",
]
32 changes: 32 additions & 0 deletions frontend/chat-plugin/dev/BUILD
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
load("//tools/lint:web.bzl", "web_lint")
load("@com_github_airyhq_bazel_tools//lint:buildifier.bzl", "check_pkg")
load("@com_github_airyhq_bazel_tools//web:typescript.bzl", "ts_web_library")
load("@com_github_airyhq_bazel_tools//web:web_app.bzl", "web_app")
load("//frontend/chat-plugin:deps.bzl", "module_deps", "npm_deps")

package(default_visibility = ["//visibility:public"])

ts_web_library(
name = "dev",
tsconfig = "//frontend/chat-plugin:widget_tsconfig",
deps = ["//frontend/chat-plugin/lib:chat-plugin"] + module_deps + npm_deps,
)

web_app(
name = "bundle",
aliases = {
"react": "preact/compat",
"react-dom": "preact/compat",
},
app_lib = ":dev",
entry = "frontend/chat-plugin/dev/index",
index = ":development.html",
module_deps = ["//frontend/chat-plugin/lib:chat-plugin"] + module_deps,
output = {
"publicPath": "/chatplugin/ui",
},
)

check_pkg(name = "buildifier")

web_lint()
32 changes: 32 additions & 0 deletions frontend/chat-plugin/dev/config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import {Config} from 'chat-plugin';

export const config: Config = {
welcomeMessage: {
fallback: 'Hello!\n\nWelcome to Airy!',
richCard: {
standaloneCard: {
cardContent: {
title: 'Hola!',
description: 'Welcome to Airy!',
media: {
height: 'MEDIUM',
contentInfo: {
altText: 'Airy logo',
fileUrl: 'https://picsum.photos/200',
forceRefresh: 'false',
},
},
suggestions: [
{
reply: {
text: "Let's start",
postbackData: '/start',
},
},
],
},
},
},
},
showMode: false,
};
34 changes: 34 additions & 0 deletions frontend/chat-plugin/dev/development.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Airy - Chat Plugin</title>
<style>
#root {
position: fixed;
width: -webkit-fill-available;
width: -moz-available;
right: 0;
bottom: 0;
z-index: 9999;
max-height: 700px;
max-width: 380px;
height: 100vh;
padding: 0;
margin: 0;
color: #444;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.customClass {
height: 100%;
}
</style>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
Loading

0 comments on commit 3f5a69c

Please sign in to comment.