From b614604effda51ca7c76c8901be78ced62b642b2 Mon Sep 17 00:00:00 2001
From: Marcin Aman <maman@virtuslab.com>
Date: Thu, 28 May 2020 16:17:13 +0200
Subject: Update TS migration to current dev, move to a common package, rename
 to frontend

---
 .../src/main/components/app/index.scss             | 21 -------
 .../src/main/components/app/index.tsx              | 11 ----
 core/search-component/src/main/components/root.tsx | 43 ---------------
 .../src/main/components/search/search.tsx          | 45 ---------------
 .../src/main/components/search/types.ts            | 26 ---------
 core/search-component/src/main/scss/index.scss     |  1 -
 core/search-component/tsconfig.json                | 34 ------------
 core/search-component/types/@jetbrains/index.d.ts  |  3 -
 core/search-component/types/index.d.ts             |  1 -
 plugins/base/build.gradle.kts                      |  8 +--
 plugins/base/frontend/.gitignore                   |  3 +
 plugins/base/frontend/build.gradle.kts             | 18 ++++++
 plugins/base/frontend/package.json                 | 57 +++++++++++++++++++
 plugins/base/frontend/postcss.config.js            | 16 ++++++
 .../frontend/src/main/components/app/index.scss    | 21 +++++++
 .../frontend/src/main/components/app/index.tsx     | 50 +++++++++++++++++
 plugins/base/frontend/src/main/components/root.tsx | 43 +++++++++++++++
 .../frontend/src/main/components/search/search.tsx | 45 +++++++++++++++
 .../frontend/src/main/components/search/types.ts   | 26 +++++++++
 plugins/base/frontend/src/main/scss/index.scss     |  1 +
 .../frontend/src/main/types/@jetbrains/index.d.ts  |  3 +
 plugins/base/frontend/stylelint.config.js          |  4 ++
 plugins/base/frontend/tsconfig.json                | 30 ++++++++++
 plugins/base/frontend/webpack.config.js            | 64 ++++++++++++++++++++++
 plugins/base/search-component/.gitignore           |  3 -
 plugins/base/search-component/build.gradle.kts     | 18 ------
 plugins/base/search-component/package.json         | 60 --------------------
 plugins/base/search-component/postcss.config.js    | 16 ------
 .../src/main/js/search/app-root.js                 | 47 ----------------
 plugins/base/search-component/stylelint.config.js  |  4 --
 plugins/base/search-component/webpack.config.js    | 64 ----------------------
 settings.gradle.kts                                |  4 +-
 32 files changed, 388 insertions(+), 402 deletions(-)
 delete mode 100644 core/search-component/src/main/components/app/index.scss
 delete mode 100644 core/search-component/src/main/components/app/index.tsx
 delete mode 100644 core/search-component/src/main/components/root.tsx
 delete mode 100644 core/search-component/src/main/components/search/search.tsx
 delete mode 100644 core/search-component/src/main/components/search/types.ts
 delete mode 100644 core/search-component/src/main/scss/index.scss
 delete mode 100644 core/search-component/tsconfig.json
 delete mode 100644 core/search-component/types/@jetbrains/index.d.ts
 delete mode 100644 core/search-component/types/index.d.ts
 create mode 100644 plugins/base/frontend/.gitignore
 create mode 100644 plugins/base/frontend/build.gradle.kts
 create mode 100644 plugins/base/frontend/package.json
 create mode 100644 plugins/base/frontend/postcss.config.js
 create mode 100644 plugins/base/frontend/src/main/components/app/index.scss
 create mode 100644 plugins/base/frontend/src/main/components/app/index.tsx
 create mode 100644 plugins/base/frontend/src/main/components/root.tsx
 create mode 100644 plugins/base/frontend/src/main/components/search/search.tsx
 create mode 100644 plugins/base/frontend/src/main/components/search/types.ts
 create mode 100644 plugins/base/frontend/src/main/scss/index.scss
 create mode 100644 plugins/base/frontend/src/main/types/@jetbrains/index.d.ts
 create mode 100644 plugins/base/frontend/stylelint.config.js
 create mode 100644 plugins/base/frontend/tsconfig.json
 create mode 100644 plugins/base/frontend/webpack.config.js
 delete mode 100644 plugins/base/search-component/.gitignore
 delete mode 100644 plugins/base/search-component/build.gradle.kts
 delete mode 100644 plugins/base/search-component/package.json
 delete mode 100644 plugins/base/search-component/postcss.config.js
 delete mode 100644 plugins/base/search-component/src/main/js/search/app-root.js
 delete mode 100644 plugins/base/search-component/stylelint.config.js
 delete mode 100644 plugins/base/search-component/webpack.config.js

diff --git a/core/search-component/src/main/components/app/index.scss b/core/search-component/src/main/components/app/index.scss
deleted file mode 100644
index a7406115..00000000
--- a/core/search-component/src/main/components/app/index.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@import "src/main/scss/index";
-
-html,
-.app-root {
-  height: 100%;
-}
-
-.search-root {
-  margin: 0;
-  padding: 0;
-
-  background: var(--ring-content-background-color);
-
-  font-family: var(--ring-font-family);
-  font-size: var(--ring-font-size);
-  line-height: var(--ring-line-height);
-}
-
-.search-content {
-  margin: calc(var(--ring-unit) * 4);
-}
diff --git a/core/search-component/src/main/components/app/index.tsx b/core/search-component/src/main/components/app/index.tsx
deleted file mode 100644
index 3427c1ce..00000000
--- a/core/search-component/src/main/components/app/index.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import {WithFuzzySearchFilter} from '../search/search';
-import './index.scss';
-
-const App: React.FC = () => (
-    <div className="search-content">
-        <WithFuzzySearchFilter/>
-    </div>
-)
-
-export default App
diff --git a/core/search-component/src/main/components/root.tsx b/core/search-component/src/main/components/root.tsx
deleted file mode 100644
index 70ed9550..00000000
--- a/core/search-component/src/main/components/root.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-import {render} from 'react-dom';
-import RedBox from 'redbox-react';
-
-import App from "./app";
-import './app/index.scss';
-
-const appEl = document.getElementById('searchBar');
-const rootEl = document.createElement('div');
-
-let renderApp = () => {
-  render(
-      <App/>,
-      rootEl
-  );
-};
-
-// @ts-ignore
-if (module.hot) {
-  const renderAppHot = renderApp;
-  const renderError = (error: Error) => {
-    render(
-        <RedBox error={error}/>,
-        rootEl
-    );
-  };
-
-  renderApp = () => {
-    try {
-      renderAppHot();
-    } catch (error) {
-      renderError(error);
-    }
-  };
-
-  // @ts-ignore
-  module.hot.accept('./app', () => {
-    setTimeout(renderApp);
-  });
-}
-
-renderApp();
-appEl!.appendChild(rootEl);
diff --git a/core/search-component/src/main/components/search/search.tsx b/core/search-component/src/main/components/search/search.tsx
deleted file mode 100644
index f0df0c98..00000000
--- a/core/search-component/src/main/components/search/search.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, {useCallback, useState} from 'react';
-import {Select} from '@jetbrains/ring-ui';
-import '@jetbrains/ring-ui/components/input-size/input-size.scss';
-import {IWindow, Option, Props, State} from "./types";
-
-const WithFuzzySearchFilterComponent: React.FC<Props> = ({data}: Props) => {
-    const [selected, onSelected] = useState<Option>(data[0]);
-    const onChangeSelected = useCallback(
-        (option: Option) => {
-            window.location.replace(`${(window as IWindow).pathToRoot}${option.location}?query=${option.name}`)
-            onSelected(option);
-        },
-        [data]
-    );
-    return (
-        <div className="search-container">
-            <div className="search">
-                <Select
-                    selectedLabel="Search"
-                    label="Please type page name"
-                    filter={{fuzzy: true}}
-                    clear
-                    selected={selected}
-                    data={data}
-                    onSelect={onChangeSelected}
-                />
-        </div>
-      </div>
-    )
-}
-
-export const WithFuzzySearchFilter = () => {
-    let data: Option[] = [];
-    const pages = (window as IWindow).pages;
-    if (pages) {
-        data = pages.map((page, i) => ({
-            ...page,
-            label: page.name,
-            key: i + 1,
-            type: page.kind
-        }));
-    }
-
-    return <WithFuzzySearchFilterComponent data={data}/>;
-};
diff --git a/core/search-component/src/main/components/search/types.ts b/core/search-component/src/main/components/search/types.ts
deleted file mode 100644
index 2900153a..00000000
--- a/core/search-component/src/main/components/search/types.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-export type Page = {
-    name: string;
-    kind: string;
-    location: string;
-}
-
-export type Option = Page & {
-    label: string;
-    key: number;
-    location: string;
-    name: string;
-}
-
-export type IWindow = typeof window & {
-    pathToRoot: string
-    pages: Page[]
-}
-
-export type Props = {
-    data: Option[]
-};
-
-
-export type State = {
-    selected: any
-}
diff --git a/core/search-component/src/main/scss/index.scss b/core/search-component/src/main/scss/index.scss
deleted file mode 100644
index 74af970d..00000000
--- a/core/search-component/src/main/scss/index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "~@jetbrains/ring-ui/components/global/variables.css";
diff --git a/core/search-component/tsconfig.json b/core/search-component/tsconfig.json
deleted file mode 100644
index 6e97c848..00000000
--- a/core/search-component/tsconfig.json
+++ /dev/null
@@ -1,34 +0,0 @@
-{
-  "compilerOptions": {
-    "sourceMap": true,
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "noImplicitAny": true,
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react",
-    "typeRoots": [
-      "./types"
-    ]
-  },
-  "include": [
-    "src",
-    "node_modules/@types/node/globals.d.ts"
-  ],
-  "exclude": [
-    "./node_modules"
-  ]
-}
diff --git a/core/search-component/types/@jetbrains/index.d.ts b/core/search-component/types/@jetbrains/index.d.ts
deleted file mode 100644
index 1dc9983c..00000000
--- a/core/search-component/types/@jetbrains/index.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-declare module '@jetbrains/ring-ui' {
-    export const Select: any;
-}
diff --git a/core/search-component/types/index.d.ts b/core/search-component/types/index.d.ts
deleted file mode 100644
index 80b7428f..00000000
--- a/core/search-component/types/index.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-/// <reference types="./@jetbrains" />
diff --git a/plugins/base/build.gradle.kts b/plugins/base/build.gradle.kts
index 4fb8ed9f..24a7f593 100644
--- a/plugins/base/build.gradle.kts
+++ b/plugins/base/build.gradle.kts
@@ -10,14 +10,14 @@ dependencies {
     testImplementation(project(":test-tools"))
 }
 
-task("copy_search", Copy::class) {
-    from(File(project(":plugins:base:search-component").projectDir, "dist/"))
+task("copy_frontend", Copy::class) {
+    from(File(project(":plugins:base:frontend").projectDir, "dist/"))
     destinationDir = File(sourceSets.main.get().resources.sourceDirectories.singleFile, "dokka/scripts")
-}.dependsOn(":plugins:base:search-component:generateSearchFiles")
+}.dependsOn(":plugins:base:frontend:generateFrontendFiles")
 
 tasks {
     processResources {
-        dependsOn("copy_search")
+        dependsOn("copy_frontend")
     }
 }
 
diff --git a/plugins/base/frontend/.gitignore b/plugins/base/frontend/.gitignore
new file mode 100644
index 00000000..9220c11f
--- /dev/null
+++ b/plugins/base/frontend/.gitignore
@@ -0,0 +1,3 @@
+/dist/
+/node_modules/
+/package-lock.json
diff --git a/plugins/base/frontend/build.gradle.kts b/plugins/base/frontend/build.gradle.kts
new file mode 100644
index 00000000..d1141a4c
--- /dev/null
+++ b/plugins/base/frontend/build.gradle.kts
@@ -0,0 +1,18 @@
+plugins {
+    id("com.moowork.node") version "1.3.1"
+}
+
+task("generateFrontendFiles") {
+    dependsOn("npm_install", "npm_run_build")
+}
+
+tasks {
+    "npm_run_build" {
+        inputs.dir("$projectDir/src/main/components/")
+        inputs.files("$projectDir/package.json", "$projectDir/webpack.config.js")
+        outputs.dir("$projectDir/dist/")
+    }
+    clean {
+        delete = setOf("$projectDir/node_modules", "$projectDir/dist/", "$projectDir/package-lock.json")
+    }
+}
diff --git a/plugins/base/frontend/package.json b/plugins/base/frontend/package.json
new file mode 100644
index 00000000..120d7f34
--- /dev/null
+++ b/plugins/base/frontend/package.json
@@ -0,0 +1,57 @@
+{
+  "name": "search",
+  "version": "1.0.0",
+  "private": true,
+  "config": {
+    "components": "./src/main/components",
+    "dist": "./dist"
+  },
+  "scripts": {
+    "build": "webpack --mode=production --devtool sourcemap",
+    "lint": "eslint . && npm run stylelint",
+    "stylelint": "stylelint --ignore-path .gitignore ./src/main/**/*.scss",
+    "start": "webpack-dev-server -d --history-api-fallback --inline --hot --colors --port 9010"
+  },
+  "babel": {
+    "presets": [
+      [
+        "@jetbrains/jetbrains",
+        {
+          "useBuiltIns": "usage"
+        }
+      ]
+    ]
+  },
+  "dependencies": {
+    "@babel/core": "^7.8.3",
+    "@jetbrains/babel-preset-jetbrains": "^2.1.4",
+    "@jetbrains/logos": "1.1.5",
+    "@jetbrains/ring-ui": "2.1.16",
+    "@types/node": "^12.12.36",
+    "@types/react": "^16.9.0",
+    "@types/react-dom": "^16.9.0",
+    "babel-loader": "^8.0.6",
+    "postcss-import": "^12.0.1",
+    "postcss-preset-env": "^6.7.0",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "redbox-react": "^1.6.0",
+    "ts-loader": "^7.0.0",
+    "typescript": "^3.8.3",
+    "webpack": "^4.41.5",
+    "webpack-cli": "^3.3.10",
+    "webpack-dev-server": "^3.10.1"
+  },
+  "devDependencies": {
+    "@jetbrains/stylelint-config": "^2.0.0",
+    "babel-eslint": "^10.0.3",
+    "eslint": "^6.8.0",
+    "sass": "^1.26.3",
+    "sass-loader": "^8.0.2",
+    "stylelint": "^13.3.2",
+    "yo": "^3.1.1"
+  },
+  "engines": {
+    "node": ">=8.0.0"
+  }
+}
diff --git a/plugins/base/frontend/postcss.config.js b/plugins/base/frontend/postcss.config.js
new file mode 100644
index 00000000..66c94ee0
--- /dev/null
+++ b/plugins/base/frontend/postcss.config.js
@@ -0,0 +1,16 @@
+module.exports = () => ({
+  plugins: [
+    require('postcss-import'),
+    require('postcss-preset-env')({
+      features: {
+        stage: 3, // See https://cssdb.org/#staging-process
+        features: {
+          'nesting-rules': true,
+          'custom-properties': {
+            preserve: true
+          }
+        }
+      }
+    })
+  ]
+});
diff --git a/plugins/base/frontend/src/main/components/app/index.scss b/plugins/base/frontend/src/main/components/app/index.scss
new file mode 100644
index 00000000..c267bc6e
--- /dev/null
+++ b/plugins/base/frontend/src/main/components/app/index.scss
@@ -0,0 +1,21 @@
+@import "src/main/scss/index.scss";
+
+html,
+.app-root {
+  height: 100%;
+}
+
+.search-root {
+  margin: 0;
+  padding: 0;
+
+  background: var(--ring-content-background-color);
+
+  font-family: var(--ring-font-family);
+  font-size: var(--ring-font-size);
+  line-height: var(--ring-line-height);
+}
+
+.search-content {
+  padding: 24px 41px;
+}
diff --git a/plugins/base/frontend/src/main/components/app/index.tsx b/plugins/base/frontend/src/main/components/app/index.tsx
new file mode 100644
index 00000000..1a51e699
--- /dev/null
+++ b/plugins/base/frontend/src/main/components/app/index.tsx
@@ -0,0 +1,50 @@
+import React, {useEffect, useRef, useState} from 'react';
+import {WithFuzzySearchFilter} from '../search/search';
+import './index.scss';
+
+function useComponentVisible(initialIsVisible: boolean) {
+    const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible);
+    const ref = useRef(null);
+
+    const handleHideDropdown = (event: KeyboardEvent) => {
+        if (event.key === "Escape") {
+            setIsComponentVisible(false);
+        }
+    };
+
+    const handleClickOutside = (event : MouseEvent)=> {
+        // @ts-ignore
+        if (ref.current && !ref.current.contains(event.target)) {
+            setIsComponentVisible(false);
+        }
+    };
+
+    useEffect(() => {
+        document.addEventListener("keydown", handleHideDropdown, false);
+        document.addEventListener("click", handleClickOutside, false);
+        return () => {
+            document.removeEventListener("keydown", handleHideDropdown, false);
+            document.removeEventListener("click", handleClickOutside, false);
+        };
+    });
+
+    return { ref, isComponentVisible, setIsComponentVisible };
+}
+
+const App: React.FC = () => {
+    const {
+        ref,
+        isComponentVisible,
+        setIsComponentVisible
+    } = useComponentVisible(false);
+
+    return <div ref={ref} className="search-content">
+        {isComponentVisible && (<WithFuzzySearchFilter/>)}
+        {!isComponentVisible && (
+            <span onClick={() => setIsComponentVisible(true)}>
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M19.64 18.36l-6.24-6.24a7.52 7.52 0 1 0-1.28 1.28l6.24 6.24zM7.5 13.4a5.9 5.9 0 1 1 5.9-5.9 5.91 5.91 0 0 1-5.9 5.9z"/></svg>
+          </span>)}
+    </div>
+}
+
+export default App
diff --git a/plugins/base/frontend/src/main/components/root.tsx b/plugins/base/frontend/src/main/components/root.tsx
new file mode 100644
index 00000000..70ed9550
--- /dev/null
+++ b/plugins/base/frontend/src/main/components/root.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import {render} from 'react-dom';
+import RedBox from 'redbox-react';
+
+import App from "./app";
+import './app/index.scss';
+
+const appEl = document.getElementById('searchBar');
+const rootEl = document.createElement('div');
+
+let renderApp = () => {
+  render(
+      <App/>,
+      rootEl
+  );
+};
+
+// @ts-ignore
+if (module.hot) {
+  const renderAppHot = renderApp;
+  const renderError = (error: Error) => {
+    render(
+        <RedBox error={error}/>,
+        rootEl
+    );
+  };
+
+  renderApp = () => {
+    try {
+      renderAppHot();
+    } catch (error) {
+      renderError(error);
+    }
+  };
+
+  // @ts-ignore
+  module.hot.accept('./app', () => {
+    setTimeout(renderApp);
+  });
+}
+
+renderApp();
+appEl!.appendChild(rootEl);
diff --git a/plugins/base/frontend/src/main/components/search/search.tsx b/plugins/base/frontend/src/main/components/search/search.tsx
new file mode 100644
index 00000000..f0df0c98
--- /dev/null
+++ b/plugins/base/frontend/src/main/components/search/search.tsx
@@ -0,0 +1,45 @@
+import React, {useCallback, useState} from 'react';
+import {Select} from '@jetbrains/ring-ui';
+import '@jetbrains/ring-ui/components/input-size/input-size.scss';
+import {IWindow, Option, Props, State} from "./types";
+
+const WithFuzzySearchFilterComponent: React.FC<Props> = ({data}: Props) => {
+    const [selected, onSelected] = useState<Option>(data[0]);
+    const onChangeSelected = useCallback(
+        (option: Option) => {
+            window.location.replace(`${(window as IWindow).pathToRoot}${option.location}?query=${option.name}`)
+            onSelected(option);
+        },
+        [data]
+    );
+    return (
+        <div className="search-container">
+            <div className="search">
+                <Select
+                    selectedLabel="Search"
+                    label="Please type page name"
+                    filter={{fuzzy: true}}
+                    clear
+                    selected={selected}
+                    data={data}
+                    onSelect={onChangeSelected}
+                />
+        </div>
+      </div>
+    )
+}
+
+export const WithFuzzySearchFilter = () => {
+    let data: Option[] = [];
+    const pages = (window as IWindow).pages;
+    if (pages) {
+        data = pages.map((page, i) => ({
+            ...page,
+            label: page.name,
+            key: i + 1,
+            type: page.kind
+        }));
+    }
+
+    return <WithFuzzySearchFilterComponent data={data}/>;
+};
diff --git a/plugins/base/frontend/src/main/components/search/types.ts b/plugins/base/frontend/src/main/components/search/types.ts
new file mode 100644
index 00000000..2900153a
--- /dev/null
+++ b/plugins/base/frontend/src/main/components/search/types.ts
@@ -0,0 +1,26 @@
+export type Page = {
+    name: string;
+    kind: string;
+    location: string;
+}
+
+export type Option = Page & {
+    label: string;
+    key: number;
+    location: string;
+    name: string;
+}
+
+export type IWindow = typeof window & {
+    pathToRoot: string
+    pages: Page[]
+}
+
+export type Props = {
+    data: Option[]
+};
+
+
+export type State = {
+    selected: any
+}
diff --git a/plugins/base/frontend/src/main/scss/index.scss b/plugins/base/frontend/src/main/scss/index.scss
new file mode 100644
index 00000000..74af970d
--- /dev/null
+++ b/plugins/base/frontend/src/main/scss/index.scss
@@ -0,0 +1 @@
+@import "~@jetbrains/ring-ui/components/global/variables.css";
diff --git a/plugins/base/frontend/src/main/types/@jetbrains/index.d.ts b/plugins/base/frontend/src/main/types/@jetbrains/index.d.ts
new file mode 100644
index 00000000..1dc9983c
--- /dev/null
+++ b/plugins/base/frontend/src/main/types/@jetbrains/index.d.ts
@@ -0,0 +1,3 @@
+declare module '@jetbrains/ring-ui' {
+    export const Select: any;
+}
diff --git a/plugins/base/frontend/stylelint.config.js b/plugins/base/frontend/stylelint.config.js
new file mode 100644
index 00000000..02b3f4ac
--- /dev/null
+++ b/plugins/base/frontend/stylelint.config.js
@@ -0,0 +1,4 @@
+module.exports = {
+  extends: '@jetbrains/stylelint-config',
+  rules: {}
+};
diff --git a/plugins/base/frontend/tsconfig.json b/plugins/base/frontend/tsconfig.json
new file mode 100644
index 00000000..4cc8fd37
--- /dev/null
+++ b/plugins/base/frontend/tsconfig.json
@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "sourceMap": true,
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "noImplicitAny": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react",
+    "typeRoots": [
+      "src/main/types"
+    ]
+  },
+  "include": [
+    "./node_modules/@types/node/globals.d.ts"
+  ]
+}
diff --git a/plugins/base/frontend/webpack.config.js b/plugins/base/frontend/webpack.config.js
new file mode 100644
index 00000000..559f5792
--- /dev/null
+++ b/plugins/base/frontend/webpack.config.js
@@ -0,0 +1,64 @@
+const {join, resolve} = require('path');
+
+const ringUiWebpackConfig = require('@jetbrains/ring-ui/webpack.config');
+
+const pkgConfig = require('./package.json').config;
+
+const componentsPath = join(__dirname, pkgConfig.components);
+
+// Patch @jetbrains/ring-ui svg-sprite-loader config
+ringUiWebpackConfig.loaders.svgInlineLoader.include.push(
+  require('@jetbrains/logos'),
+  require('@jetbrains/icons')
+);
+
+const webpackConfig = () => ({
+  entry: `${componentsPath}/root.tsx`,
+  resolve: {
+    mainFields: ['module', 'browser', 'main'],
+    extensions: ['.tsx', '.ts', '.js'],
+    alias: {
+      react: resolve('./node_modules/react'),
+      'react-dom': resolve('./node_modules/react-dom'),
+      '@jetbrains/ring-ui': resolve('./node_modules/@jetbrains/ring-ui')
+    }
+  },
+  output: {
+    path: resolve(__dirname, pkgConfig.dist),
+    filename: '[name].js',
+    publicPath: '',
+    devtoolModuleFilenameTemplate: '/[absolute-resource-path]'
+  },
+  module: {
+    rules: [
+      ...ringUiWebpackConfig.config.module.rules,
+      {
+        test: /\.s[ac]ss$/i,
+        use: [
+          'style-loader',
+          'css-loader',
+          'sass-loader',
+        ],
+        include: componentsPath,
+        exclude: ringUiWebpackConfig.componentsPath,
+      },
+      {
+        test: /\.tsx?$/,
+        use: [
+          {
+            loader: 'ts-loader',
+            options: {
+              transpileOnly: true
+            }
+          }
+        ]
+      }
+    ]
+  },
+  plugins: [],
+  output: {
+    path: __dirname + '/dist/'
+  }
+});
+
+module.exports = webpackConfig;
diff --git a/plugins/base/search-component/.gitignore b/plugins/base/search-component/.gitignore
deleted file mode 100644
index 9220c11f..00000000
--- a/plugins/base/search-component/.gitignore
+++ /dev/null
@@ -1,3 +0,0 @@
-/dist/
-/node_modules/
-/package-lock.json
diff --git a/plugins/base/search-component/build.gradle.kts b/plugins/base/search-component/build.gradle.kts
deleted file mode 100644
index 11f04ace..00000000
--- a/plugins/base/search-component/build.gradle.kts
+++ /dev/null
@@ -1,18 +0,0 @@
-plugins {
-    id("com.moowork.node") version "1.3.1"
-}
-
-task("generateSearchFiles") {
-    dependsOn("npm_install", "npm_run_build")
-}
-
-tasks {
-    "npm_run_build" {
-        inputs.dir("$projectDir/src/main/components/")
-        inputs.files("$projectDir/package.json", "$projectDir/webpack.config.js")
-        outputs.dir("$projectDir/dist/")
-    }
-    clean {
-        delete = setOf("$projectDir/node_modules", "$projectDir/dist/", "$projectDir/package-lock.json")
-    }
-}
diff --git a/plugins/base/search-component/package.json b/plugins/base/search-component/package.json
deleted file mode 100644
index 1fb386f6..00000000
--- a/plugins/base/search-component/package.json
+++ /dev/null
@@ -1,60 +0,0 @@
-{
-  "name": "search",
-  "version": "1.0.0",
-  "private": true,
-  "config": {
-    "components": "./src/main/components",
-    "dist": "./dist"
-  },
-  "scripts": {
-    "create-component": "yo @jetbrains/ring-ui:react --path $npm_package_config_components",
-    "build": "webpack --mode=production --devtool sourcemap",
-    "test": "karma start",
-    "lint": "eslint . && npm run stylelint",
-    "stylelint": "stylelint --ignore-path .gitignore **/*.css",
-    "ci-test": "npm run lint && xvfb-maybe karma start --teamcity",
-    "start": "webpack-dev-server -d --history-api-fallback --inline --hot --colors --port 9010"
-  },
-  "babel": {
-    "presets": [
-      [
-        "@jetbrains/jetbrains",
-        {
-          "useBuiltIns": "usage"
-        }
-      ]
-    ]
-  },
-  "dependencies": {
-    "@babel/core": "^7.8.3",
-    "@jetbrains/babel-preset-jetbrains": "^2.1.4",
-    "@jetbrains/logos": "1.1.5",
-    "@jetbrains/ring-ui": "2.1.16",
-    "@types/node": "^12.12.36",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
-    "babel-loader": "^8.0.6",
-    "postcss-import": "^12.0.1",
-    "postcss-preset-env": "^6.7.0",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "redbox-react": "^1.6.0",
-    "ts-loader": "^7.0.0",
-    "typescript": "^3.8.3",
-    "webpack": "^4.41.5",
-    "webpack-cli": "^3.3.10",
-    "webpack-dev-server": "^3.10.1"
-  },
-  "devDependencies": {
-    "@jetbrains/stylelint-config": "^2.0.0",
-    "babel-eslint": "^10.0.3",
-    "eslint": "^6.8.0",
-    "sass": "^1.26.3",
-    "sass-loader": "^8.0.2",
-    "stylelint": "^13.3.2",
-    "yo": "^3.1.1"
-  },
-  "engines": {
-    "node": ">=8.0.0"
-  }
-}
diff --git a/plugins/base/search-component/postcss.config.js b/plugins/base/search-component/postcss.config.js
deleted file mode 100644
index 66c94ee0..00000000
--- a/plugins/base/search-component/postcss.config.js
+++ /dev/null
@@ -1,16 +0,0 @@
-module.exports = () => ({
-  plugins: [
-    require('postcss-import'),
-    require('postcss-preset-env')({
-      features: {
-        stage: 3, // See https://cssdb.org/#staging-process
-        features: {
-          'nesting-rules': true,
-          'custom-properties': {
-            preserve: true
-          }
-        }
-      }
-    })
-  ]
-});
diff --git a/plugins/base/search-component/src/main/js/search/app-root.js b/plugins/base/search-component/src/main/js/search/app-root.js
deleted file mode 100644
index 3544c61b..00000000
--- a/plugins/base/search-component/src/main/js/search/app-root.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React, {useRef, useState, useEffect} from 'react';
-import {WithFuzzySearchFilter} from './search';
-import './app.css';
-
-function useComponentVisible(initialIsVisible) {
-    const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible);
-    const ref = useRef(null);
-
-    const handleHideDropdown = (event) => {
-        if (event.key === "Escape") {
-            setIsComponentVisible(false);
-        }
-    };
-
-    const handleClickOutside = event => {
-        if (ref.current && !ref.current.contains(event.target)) {
-            setIsComponentVisible(false);
-        }
-    };
-
-    useEffect(() => {
-        document.addEventListener("keydown", handleHideDropdown, false);
-        document.addEventListener("click", handleClickOutside, false);
-        return () => {
-            document.removeEventListener("keydown", handleHideDropdown, false);
-            document.removeEventListener("click", handleClickOutside, false);
-        };
-    });
-
-    return { ref, isComponentVisible, setIsComponentVisible };
-}
-
-export const AppRoot = () => {
-  const {
-      ref,
-      isComponentVisible,
-      setIsComponentVisible
-  } = useComponentVisible(false);
-
-  return <div ref={ref} className="search-content">
-      {isComponentVisible && (<WithFuzzySearchFilter/>)}
-      {!isComponentVisible && (
-          <span onClick={() => setIsComponentVisible(true)}>
-                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M19.64 18.36l-6.24-6.24a7.52 7.52 0 1 0-1.28 1.28l6.24 6.24zM7.5 13.4a5.9 5.9 0 1 1 5.9-5.9 5.91 5.91 0 0 1-5.9 5.9z"/></svg>
-          </span>)}
-  </div>
-}
\ No newline at end of file
diff --git a/plugins/base/search-component/stylelint.config.js b/plugins/base/search-component/stylelint.config.js
deleted file mode 100644
index 02b3f4ac..00000000
--- a/plugins/base/search-component/stylelint.config.js
+++ /dev/null
@@ -1,4 +0,0 @@
-module.exports = {
-  extends: '@jetbrains/stylelint-config',
-  rules: {}
-};
diff --git a/plugins/base/search-component/webpack.config.js b/plugins/base/search-component/webpack.config.js
deleted file mode 100644
index 559f5792..00000000
--- a/plugins/base/search-component/webpack.config.js
+++ /dev/null
@@ -1,64 +0,0 @@
-const {join, resolve} = require('path');
-
-const ringUiWebpackConfig = require('@jetbrains/ring-ui/webpack.config');
-
-const pkgConfig = require('./package.json').config;
-
-const componentsPath = join(__dirname, pkgConfig.components);
-
-// Patch @jetbrains/ring-ui svg-sprite-loader config
-ringUiWebpackConfig.loaders.svgInlineLoader.include.push(
-  require('@jetbrains/logos'),
-  require('@jetbrains/icons')
-);
-
-const webpackConfig = () => ({
-  entry: `${componentsPath}/root.tsx`,
-  resolve: {
-    mainFields: ['module', 'browser', 'main'],
-    extensions: ['.tsx', '.ts', '.js'],
-    alias: {
-      react: resolve('./node_modules/react'),
-      'react-dom': resolve('./node_modules/react-dom'),
-      '@jetbrains/ring-ui': resolve('./node_modules/@jetbrains/ring-ui')
-    }
-  },
-  output: {
-    path: resolve(__dirname, pkgConfig.dist),
-    filename: '[name].js',
-    publicPath: '',
-    devtoolModuleFilenameTemplate: '/[absolute-resource-path]'
-  },
-  module: {
-    rules: [
-      ...ringUiWebpackConfig.config.module.rules,
-      {
-        test: /\.s[ac]ss$/i,
-        use: [
-          'style-loader',
-          'css-loader',
-          'sass-loader',
-        ],
-        include: componentsPath,
-        exclude: ringUiWebpackConfig.componentsPath,
-      },
-      {
-        test: /\.tsx?$/,
-        use: [
-          {
-            loader: 'ts-loader',
-            options: {
-              transpileOnly: true
-            }
-          }
-        ]
-      }
-    ]
-  },
-  plugins: [],
-  output: {
-    path: __dirname + '/dist/'
-  }
-});
-
-module.exports = webpackConfig;
diff --git a/settings.gradle.kts b/settings.gradle.kts
index 8e80db75..39a82007 100644
--- a/settings.gradle.kts
+++ b/settings.gradle.kts
@@ -8,7 +8,7 @@ include("runners:gradle-plugin")
 include("runners:cli")
 include("runners:maven-plugin")
 include("plugins:base")
-include("plugins:base:search-component")
+include("plugins:base:frontend")
 include("plugins:mathjax")
 include("plugins:gfm")
 include("plugins:jekyll")
@@ -32,3 +32,5 @@ pluginManagement {
         gradlePluginPortal()
     }
 }
+include("plugins:base:frontend")
+findProject(":plugins:base:frontend")?.name = "frontend"
-- 
cgit