add loop-test-plugin

loop-test-plugin/webapp/.eslintrc.json

@@ -0,0 +1,50 @@
+{
+   "settings": {
+      "import/resolver": {
+         "typescript": {
+            "project": "./tsconfig.json"
+         }
+       },
+      "react": {
+         "version": "17.0.2"
+      }
+   },
+   "extends": [
+      "eslint:recommended",
+      "plugin:react-hooks/recommended",
+      "plugin:import/recommended",
+      "plugin:import/typescript"
+   ],
+   "parser": "@typescript-eslint/parser",
+   "plugins": [
+      "react",
+      "import",
+      "babel",
+      "cypress",
+      "no-only-tests",
+      "@typescript-eslint",
+      "unused-imports"
+   ],
+   "parserOptions": {
+      "ecmaVersion": "latest",
+      "sourceType": "module",
+      "ecmaFeatures": {
+         "jsx": true,
+         "impliedStrict": true,
+         "modules": true,
+         "experimentalObjectRestSpread": true
+      }
+   },
+   "env": {
+      "browser": true,
+      "node": true,
+      "jquery": true,
+      "es6": true
+   },
+   "rules": {
+      "no-unused-vars": "warn",
+      "no-unused-expressions": "warn",
+      "unused-imports/no-unused-imports": "warn",
+      "import/no-named-as-default": "off"
+   }
+}

loop-test-plugin/webapp/.gitignore

@@ -0,0 +1,4 @@
+.eslintcache
+junit.xml
+node_modules
+yarn-error.log

loop-test-plugin/webapp/babel.config.js

@@ -0,0 +1,42 @@
+// eslint-disable-next-line no-process-env
+const mode = process.env.WEBPACK_SERVE ? 'development' : 'production';
+
+const config = {
+  presets: [
+    ['@babel/preset-env', {
+      targets: "> 0.25%, not dead",
+      modules: false,
+      useBuiltIns: "entry",
+      corejs: "3.32",
+      debug: false,
+      // useBuiltIns: 'usage',
+      shippedProposals: true,
+    }],
+    ['@babel/preset-react', {
+      useBuiltIns: true,
+    }],
+    ['@babel/typescript', {
+      allExtensions: true,
+      isTSX: true,
+    }],
+  ],
+  plugins: [
+    '@babel/plugin-proposal-class-properties',
+    '@babel/plugin-syntax-dynamic-import',
+    '@babel/proposal-object-rest-spread',
+    '@babel/plugin-proposal-optional-chaining',
+    'babel-plugin-typescript-to-proptypes',
+    mode !== 'production' && require.resolve('react-refresh/babel'),
+  ].filter(Boolean),
+};
+
+// Jest needs module transformation
+config.env = {
+  test: {
+    presets: config.presets,
+    plugins: config.plugins,
+  },
+};
+config.env.test.presets[0][1].modules = 'auto';
+
+module.exports = config;

loop-test-plugin/webapp/package.json

@@ -0,0 +1,76 @@
+{
+  "private": true,
+  "scripts": {
+    "build": "webpack --mode=production",
+    "build:watch": "webpack --mode=production --watch",
+    "debug": "webpack --mode=none",
+    "debug:watch": "webpack --mode=development --watch",
+    "debug:serve": "webpack serve --mode=development",
+    "lint": "eslint --ignore-pattern node_modules --ignore-pattern dist --ext .js --ext .jsx --ext tsx --ext ts . --quiet --cache",
+    "fix": "eslint --ignore-pattern node_modules --ignore-pattern dist --ext .js --ext .jsx --ext tsx --ext ts . --quiet --fix --cache",
+    "check-types": "tsc"
+  },
+  "devDependencies": {
+    "@babel/cli": "7.16.8",
+    "@babel/core": "7.16.12",
+    "@babel/plugin-proposal-class-properties": "7.16.7",
+    "@babel/plugin-proposal-object-rest-spread": "7.16.7",
+    "@babel/plugin-proposal-optional-chaining": "7.16.7",
+    "@babel/plugin-syntax-dynamic-import": "7.8.3",
+    "@babel/preset-env": "7.16.11",
+    "@babel/preset-react": "7.16.7",
+    "@babel/preset-typescript": "7.16.7",
+    "@babel/runtime": "7.16.7",
+    "@types/babel__core": "7.1.18",
+    "@types/babel__template": "7.4.1",
+    "@types/luxon": "3.3.1",
+    "@types/node": "17.0.12",
+    "@types/react": "17.0.2",
+    "@types/react-dom": "17.0.11",
+    "@types/react-redux": "7.1.22",
+    "@types/react-router-dom": "5.1.5",
+    "@types/react-transition-group": "4.4.0",
+    "@typescript-eslint/eslint-plugin": "5.10.1",
+    "@typescript-eslint/parser": "5.10.1",
+    "@typescript-eslint/typescript-estree": "5.52.0",
+    "babel-eslint": "10.1.0",
+    "babel-loader": "8.2.2",
+    "babel-plugin-formatjs": "10.3.7",
+    "babel-plugin-typescript-to-proptypes": "2.0.0",
+    "core-js": "3.32.0",
+    "css-loader": "6.5.1",
+    "eslint": "8.8.0",
+    "eslint-import-resolver-alias": "1.1.2",
+    "eslint-import-resolver-typescript": "2.7.1",
+    "eslint-import-resolver-webpack": "0.13.2",
+    "eslint-plugin-babel": "5.3.1",
+    "eslint-plugin-cypress": "2.12.1",
+    "eslint-plugin-header": "3.1.1",
+    "eslint-plugin-import": "2.25.4",
+    "eslint-plugin-jest": "26.5.3",
+    "eslint-plugin-no-only-tests": "2.6.0",
+    "eslint-plugin-react": "7.28.0",
+    "eslint-plugin-react-hooks": "4.3.0",
+    "eslint-plugin-unused-imports": "3.0.0",
+    "file-loader": "6.2.0",
+    "identity-obj-proxy": "3.0.0",
+    "sass": "1.52.3",
+    "sass-loader": "13.0.0",
+    "style-loader": "3.3.1",
+    "typescript": "4.6.4",
+    "uglifyjs-webpack-plugin": "2.2.0",
+    "webpack": "5.75.0",
+    "webpack-cli": "5.0.1",
+    "webpack-dev-server": "4.15.1"
+  },
+  "dependencies": {
+    "@loop/plugin-sdk": "https://artifacts.wilix.dev/repository/npm-public-loop/%40loop/plugin-sdk/-/plugin-sdk-0.1.91.tgz",
+    "antd": "^5.9.0",
+    "luxon": "3.4.0",
+    "react": "17.0.2",
+    "react-intl": "6.4.4",
+    "react-redux": "8.0.2",
+    "redux": "4.2.0",
+    "styled-components": "6.0.7"
+  }
+}

loop-test-plugin/webapp/src/index.tsx

@@ -0,0 +1,70 @@
+import Badge from 'antd/es/badge';
+import React from 'react';
+import { Store, Action } from "redux";
+import { manifest } from "@/manifest";
+import "@loop/plugin-sdk/lib/window"
+import { PluginClass, PluginRegistry } from "@loop/plugin-sdk/lib/plugin";
+import { GlobalState } from "@loop/plugin-sdk/lib/loop/types/store";
+
+const Comp = (num: number) => () => <Badge count={num} showZero color='#faad14' />
+const El = (num: number) => <Badge count={num} showZero color='#faad14' />
+
+export default class Plugin extends PluginClass {
+  public async initialize(registry: PluginRegistry, store: Store<GlobalState, Action<Record<string, unknown>>>) {
+    registry.registerChannelHeaderButtonAction(Comp(1), () => {}, "ABC", "CBA");
+    registry.registerMainMenuAction(Comp(3), () => {}, Comp(3))
+    registry.registerPostDropdownMenuAction(El(4), () => {}, () => true)
+    registry.registerCreatePostActionComponent(El(5), <span>ABC</span>, () => {})
+    registry.registerCreatePostLabelComponent(Comp(6))
+    registry.registerPopoverUserAttributesComponent(Comp(7))
+    registry.registerPopoverUserActionsComponent(Comp(8))
+    const { toggleRHSPlugin } = registry.registerRightHandSidebarComponent(Comp(35), "ABC9")
+    registry.registerChannelHeaderMenuAction(Comp(2), () => store.dispatch(toggleRHSPlugin));
+    registry.registerLeftSidebarHeaderComponent(Comp(9))
+    registry.registerBottomTeamSidebarComponent(Comp(10))
+    registry.registerLinkTooltipComponent(Comp(11))
+    registry.registerActionAfterChannelCreation(Comp(12), () => {})
+    registry.registerChannelIntroButtonAction(El(12), () => {}, El(13))
+    registry.registerCallButtonAction(El(14), El(15), () => {})
+
+    registry.registerPostCardTypeComponent("my", Comp(16)) // ???
+
+    registry.registerFileDropdownMenuAction(() => true, Comp(17), () => {})
+    registry.registerUserGuideDropdownMenuAction(Comp(18), () => {})
+    //registry.registerPostActionComponent(Comp(19))
+    //registry.registerPostEditorActionComponent(Comp(20))
+      // registry.registerCodeBlockActionComponent(Comp(21)) // временно depricated
+      // registry.registerNewMessagesSeparatorActionComponent(Comp(22)) // временно depricated
+    registry.registerPostDropdownSubMenuAction(
+      Comp(23),
+      (...args) => { console.log(23, args); },
+      (...args) => { console.log(23, args); return true }
+    )
+    registry.registerPostDropdownMenuComponent(Comp(24))
+    registry.registerFileUploadMethod(
+      Comp(25),
+      (...args) => { console.log(25, args); },
+      Comp(26),
+    )
+    registry.registerSidebarChannelLinkLabelComponent(Comp(27))
+    registry.registerChannelToastComponent(Comp(28))
+    registry.registerGlobalComponent(Comp(29))
+    registry.registerAppBarComponent(
+      'https://wilix.org/icon.png',
+      () => {},
+      Comp(30),
+      null,
+      Comp(31),
+      Comp(32),
+    )
+    registry.registerSiteStatisticsHandler((...args) => {
+      console.log(33, args);
+      return {
+        abc: Comp(33)
+      }
+    })
+    registry.registerRootComponent(Comp(34))
+  }
+}
+
+window.registerPlugin(manifest.id, new Plugin());

loop-test-plugin/webapp/src/manifest.ts

@@ -0,0 +1,3 @@
+import manifest from '@/../../plugin.json';
+
+export {manifest};

loop-test-plugin/webapp/tsconfig.json

@@ -0,0 +1,37 @@
+{
+  "compilerOptions": {
+    "target": "es6",
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "strictNullChecks": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "experimentalDecorators": true,
+    "jsx": "react"
+  },
+  "include": [
+    "src",
+    "tests"
+  ],
+  "exclude": [
+    "dist",
+    "node_modules",
+    "!node_modules/@types"
+  ]
+}

loop-test-plugin/webapp/webpack.config.js

@@ -0,0 +1,117 @@
+const exec = require("child_process").exec;
+const path = require("path");
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const PLUGIN_ID = require("../plugin.json").id;
+
+const NPM_TARGET = process.env.npm_lifecycle_event; //eslint-disable-line no-process-env
+const isDev = NPM_TARGET === "debug" || NPM_TARGET === "debug:watch" || NPM_TARGET === 'build:watch';
+
+const plugins = [];
+if (NPM_TARGET === "build:watch" || NPM_TARGET === "debug:watch") {
+  plugins.push({
+    apply: (compiler) => {
+      compiler.hooks.watchRun.tap("WatchStartPlugin", () => {
+        // eslint-disable-next-line no-console
+        console.log("Change detected. Rebuilding webapp.");
+      });
+      compiler.hooks.afterEmit.tap("AfterEmitPlugin", () => {
+        exec("cd .. && make deploy-from-watch", (err, stdout, stderr) => {
+          if (stdout) {
+            process.stdout.write(stdout);
+          }
+          if (stderr) {
+            process.stderr.write(stderr);
+          }
+        });
+      });
+    },
+  });
+}
+
+const config = {
+  entry: [
+    "./src/index.tsx",
+  ],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "src"),
+    },
+    modules: [
+      "src",
+      "node_modules",
+      path.resolve(__dirname),
+    ],
+    extensions: ["*", ".js", ".jsx", ".ts", ".tsx"],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx|ts|tsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "babel-loader",
+          options: {
+            cacheDirectory: true,
+
+            // Babel configuration is in babel.config.js because jest requires it to be there.
+          },
+        },
+      },
+      {
+        test: /\.(scss|css)$/,
+        use: [
+          "style-loader",
+          {
+            loader: "css-loader",
+          },
+          {
+            loader: "sass-loader",
+            options: {
+              sassOptions: {
+                includePaths: ["node_modules/compass-mixins/lib", "sass"],
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+  externals: {
+    "react": "React",
+    "react-dom": "ReactDOM",
+    "react-intl": "ReactIntl",
+    "redux": "Redux",
+    "react-redux": "ReactRedux",
+    "react-bootstrap": "ReactBootstrap",
+    "react-router-dom": "ReactRouterDom",
+    "prop-types": "PropTypes",
+    "luxon": "Luxon",
+    "styled-components": "StyledComponents",
+  },
+  output: {
+    devtoolNamespace: PLUGIN_ID,
+    path: path.join(__dirname, "/dist"),
+    publicPath: "/",
+    filename: "main.js",
+  },
+  mode: (isDev) ? "inline-source-map" : "production",
+  plugins,
+};
+
+if (isDev) {
+  Object.assign(config, {
+    devServer: {
+      // hot: true,
+      port: 3004,
+    },
+    devtool: "inline-source-map",
+  });
+} else {
+  config.optimization = {
+    usedExports: true,
+    minimizer: [new UglifyJsPlugin()],
+  };
+  config.stats = 'detailed';
+}
+
+module.exports = config;