Merge pull request #29 from knovator/widget-workflow-improvements

Widget workflow improvements

apps/widget/package.json

@@ -3,8 +3,8 @@
 	"version": "1.0.0",
 	"private": true,
 	"scripts": {
-		"start": "craco start",
-		"start:dev": "cross-env PORT=3500 pnpm start",
+		"start": "cross-env PORT=3500 craco start",
+		"start:dev": "cross-env PORT=3500 craco start",
 		"preinstall": "pnpm build",
 		"prebuild": "rimraf build",
 		"build": "craco build",

libs/embed/package.json

@@ -7,9 +7,7 @@
   "main": "dist/embed.umd.min.js",
   "module": "dist/embed.es5.min.js",
   "typings": "dist/types/embed.d.ts",
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "repository": {
     "type": "git",
     "url": ""
@@ -22,9 +20,9 @@
     "build": "tsc && cross-env ENVIRONMENT=local rollup -c rollup.config.js",
     "build:dev": "tsc && cross-env ENVIRONMENT=dev rollup -c rollup.config.js -w",
     "build:prod": "tsc && cross-env ENVIRONMENT=production rollup -c rollup.config.js",
-    "start:dev": "http-server -p 4701 -o test",
-    "start:docker": "pnpm build && pnpm start",
-    "start": "http-server -p 4701 -o test",
+    "start:dev": "http-server -p 4701 test",
+    "start:docker": "pnpm build && http-server -p 4701 dist",
+    "start": "http-server -p 4701 dist",
     "dev": "concurrently \"pnpm build:dev\" \"pnpm start:dev\"",
     "precommit": "lint-staged"
   },
@@ -33,20 +31,14 @@
     "node": ">=6.0.0"
   },
   "lint-staged": {
-    "*.{js,jsx,ts,tsx}": [
-      "eslint"
-    ],
+    "*.{js,jsx,ts,tsx}": ["eslint"],
     "{*.json,.{babelrc,eslintrc,prettierrc,stylelintrc}}": [
       "prettier --ignore-path .eslintignore --parser json --write"
     ],
-    "*.{html,md,yml}": [
-      "prettier --ignore-path .eslintignore --single-quote --write"
-    ]
+    "*.{html,md,yml}": ["prettier --ignore-path .eslintignore --single-quote --write"]
   },
   "commitlint": {
-    "extends": [
-      "@commitlint/config-conventional"
-    ]
+    "extends": ["@commitlint/config-conventional"]
   },
   "devDependencies": {
     "@commitlint/cli": "^17.1.2",

libs/embed/src/embed.ts

@@ -14,8 +14,6 @@ const WRAPPER_CLASS_NAME = 'wrapper-impler-widget';
 class Impler {
   public projectId: string | unknown;
 
-  private backendUrl?: string = '';
-
   private i18n?: Record<string, unknown>;
 
   private debugMode: boolean;
@@ -56,7 +54,6 @@ class Impler {
     } else {
       this.selector = selectorOrOptions.selector;
       this.options = selectorOrOptions;
-      this.backendUrl = selectorOrOptions.backendUrl;
       this.i18n = selectorOrOptions.i18n;
     }
 
@@ -87,7 +84,6 @@ class Impler {
       wrapper.style.width = '100vw';
       wrapper.style.top = '0';
       wrapper.style.left = '0';
-      wrapper.style.backgroundColor = 'gray';
     }
 
     function hideWidget() {
@@ -99,7 +95,7 @@ class Impler {
     }
 
     function handleClick(e: MouseEvent | TouchEvent) {
-      if (document.querySelector(_scope.selector)?.contains(e.target as Node)) {
+      if (document.querySelector(_scope.selector)?.contains(e.target as Node) && projectId) {
         _scope.widgetVisible = !_scope.widgetVisible;
         positionIframe();
 
@@ -183,7 +179,6 @@ class Impler {
               type: EventTypes.INIT_IFRAME,
               value: {
                 projectId: this.projectId,
-                backendUrl: this.backendUrl,
                 i18n: this.i18n,
                 topHost: window.location.host,
                 data: options,
@@ -271,6 +266,5 @@ export default ((window: any) => {
 
 interface IOptions {
   selector: string;
-  backendUrl?: string;
   i18n?: Record<string, unknown>;
 }

package.json

@@ -8,15 +8,21 @@
     "clean": "pnpm run prebuild",
     "lint": "nx run-many --target=lint --all",
     "start:dev": "cross-env TZ=UTC nx run-many --target=start --parallel --projects=@impler/api,@impler/dal,@impler/queue-manager",
+    "start:widget-dev": "cross-env TZ=UTC nx run-many --target=start --parallel --projects=@impler/widget,@impler/embed",
     "start:dal": "cross-env nx run @impler/dal:start",
     "start:api": "cross-env nx run @impler/api:start",
     "start:embed": "cross-env nx run @impler/embed:start",
     "start:widget": "cross-env nx run @impler/widget:start",
+    "start:queue-manager": "cross-env nx run @impler/queue-manager:start",
+    "start:docker:embed": "cd libs/embed && npm run start:docker",
     "prebuild": "nx run-many --target=prebuild --all",
     "build": "nx run-many --target=build --all",
     "build:api": "nx build @impler/api",
     "build:dal": "nx build @impler/dal",
-    "build:shared": "nx build @impler/shared"
+    "build:react": "nx build @impler/react",
+    "build:shared": "nx build @impler/shared",
+    "build:widget": "nx build @impler/widget",
+    "build:embed": "nx build @impler/embed"
   },
   "keywords": [
     "data-import",

packages/react/demo/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

packages/react/demo/README.md

@@ -0,0 +1,17 @@
+# Widget Demo
+
+You can use this application to check widget & it's components working together. You can follow this steps to get started,
+
+## Project Setup
+1. Clone the repository.
+2. Install the dependencies using `pnpm install`.
+3. Start widget applications using `pnpm start:widget-dev`.
+
+## Demo Project setup
+Go to the demo project directory using `cd packages/react/demo`.
+1. Install the packages using `yarn installl` command.
+2. Update **projectId** in `index.html` file at following position,
+    ```
+    impler.init("<PROJECT_ID>", "#import");
+    ```
+3. Start the application using `yarn dev` command.

packages/react/demo/index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Widget Demo</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+    <script>
+      (function (n, o, t, i, f) {
+        /* eslint-disable */
+        let m;
+        (n[i] = {}), (m = ['init', 'on']);
+        n[i]._c = [];
+        m.forEach(
+          (me) =>
+            (n[i][me] = function () {
+              n[i]._c.push([me, arguments]);
+            })
+        );
+        const elt = o.createElement(f);
+        elt.type = 'text/javascript';
+        elt.async = true;
+        elt.src = t;
+        const before = o.getElementsByTagName(f)[0];
+        before.parentNode?.insertBefore(elt, before);
+      })(window, document, "http://127.0.0.1:4701/embed.umd.min.js", 'impler', 'script');
+
+      impler.init("", "#import");
+    </script>
+  </body>
+</html>

packages/react/demo/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "demo",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.22",
+    "@types/react-dom": "^18.0.7",
+    "@vitejs/plugin-react": "^2.2.0",
+    "typescript": "^4.6.4",
+    "vite": "^3.2.0"
+  }
+}

packages/react/demo/src/App.tsx

@@ -0,0 +1,11 @@
+import { Button } from '../../';
+
+function App() {
+  return (
+    <div className="App">
+      <Button />
+    </div>
+  );
+}
+
+export default App;

packages/react/demo/src/main.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

packages/react/demo/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

packages/react/demo/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

packages/react/demo/tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

packages/react/demo/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+});