From 4065a65fe3294e0ddf54f5756380f7dc1aa032b2 Mon Sep 17 00:00:00 2001
From: Maksymilian Pamula <mpamula@virtuslab.com>
Date: Wed, 22 Apr 2020 06:46:36 +0200
Subject: TD: Rewrite application to TS

---
 .gitignore                                         |  3 +-
 .../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/search-component/build.gradle.kts     |  4 +-
 plugins/base/search-component/package.json         | 38 ++++------------
 plugins/base/search-component/postcss.config.js    |  1 -
 .../search-component/src/main/js/search/app.css    | 21 ---------
 .../search-component/src/main/js/search/app.js     | 41 -----------------
 .../search-component/src/main/js/search/search.js  | 52 ----------------------
 plugins/base/search-component/webpack.config.js    | 30 +++++++------
 17 files changed, 214 insertions(+), 161 deletions(-)
 create mode 100644 core/search-component/src/main/components/app/index.scss
 create mode 100644 core/search-component/src/main/components/app/index.tsx
 create mode 100644 core/search-component/src/main/components/root.tsx
 create mode 100644 core/search-component/src/main/components/search/search.tsx
 create mode 100644 core/search-component/src/main/components/search/types.ts
 create mode 100644 core/search-component/src/main/scss/index.scss
 create mode 100644 core/search-component/tsconfig.json
 create mode 100644 core/search-component/types/@jetbrains/index.d.ts
 create mode 100644 core/search-component/types/index.d.ts
 delete mode 100644 plugins/base/search-component/src/main/js/search/app.css
 delete mode 100644 plugins/base/search-component/src/main/js/search/app.js
 delete mode 100644 plugins/base/search-component/src/main/js/search/search.js

diff --git a/.gitignore b/.gitignore
index d949076b..664c9774 100644
--- a/.gitignore
+++ b/.gitignore
@@ -97,4 +97,5 @@ android.local.properties
 !integration-tests/gradle-integration-tests/testData/basic/classDir/**/*.class
 
 core/out/
-runners/**/out/
\ No newline at end of file
+runners/**/out/
+.idea
diff --git a/core/search-component/src/main/components/app/index.scss b/core/search-component/src/main/components/app/index.scss
new file mode 100644
index 00000000..a7406115
--- /dev/null
+++ b/core/search-component/src/main/components/app/index.scss
@@ -0,0 +1,21 @@
+@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
new file mode 100644
index 00000000..3427c1ce
--- /dev/null
+++ b/core/search-component/src/main/components/app/index.tsx
@@ -0,0 +1,11 @@
+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
new file mode 100644
index 00000000..70ed9550
--- /dev/null
+++ b/core/search-component/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/core/search-component/src/main/components/search/search.tsx b/core/search-component/src/main/components/search/search.tsx
new file mode 100644
index 00000000..f0df0c98
--- /dev/null
+++ b/core/search-component/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/core/search-component/src/main/components/search/types.ts b/core/search-component/src/main/components/search/types.ts
new file mode 100644
index 00000000..2900153a
--- /dev/null
+++ b/core/search-component/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/core/search-component/src/main/scss/index.scss b/core/search-component/src/main/scss/index.scss
new file mode 100644
index 00000000..74af970d
--- /dev/null
+++ b/core/search-component/src/main/scss/index.scss
@@ -0,0 +1 @@
+@import "~@jetbrains/ring-ui/components/global/variables.css";
diff --git a/core/search-component/tsconfig.json b/core/search-component/tsconfig.json
new file mode 100644
index 00000000..6e97c848
--- /dev/null
+++ b/core/search-component/tsconfig.json
@@ -0,0 +1,34 @@
+{
+  "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
new file mode 100644
index 00000000..1dc9983c
--- /dev/null
+++ b/core/search-component/types/@jetbrains/index.d.ts
@@ -0,0 +1,3 @@
+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
new file mode 100644
index 00000000..80b7428f
--- /dev/null
+++ b/core/search-component/types/index.d.ts
@@ -0,0 +1 @@
+/// <reference types="./@jetbrains" />
diff --git a/plugins/base/search-component/build.gradle.kts b/plugins/base/search-component/build.gradle.kts
index ce747c5e..11f04ace 100644
--- a/plugins/base/search-component/build.gradle.kts
+++ b/plugins/base/search-component/build.gradle.kts
@@ -8,11 +8,11 @@ task("generateSearchFiles") {
 
 tasks {
     "npm_run_build" {
-        inputs.dir("$projectDir/src/main/js/search/")
+        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")
     }
-}
\ No newline at end of file
+}
diff --git a/plugins/base/search-component/package.json b/plugins/base/search-component/package.json
index fa997c44..1fb386f6 100644
--- a/plugins/base/search-component/package.json
+++ b/plugins/base/search-component/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "config": {
-    "components": "./src/main/js/search",
+    "components": "./src/main/components",
     "dist": "./dist"
   },
   "scripts": {
@@ -28,50 +28,30 @@
   "dependencies": {
     "@babel/core": "^7.8.3",
     "@jetbrains/babel-preset-jetbrains": "^2.1.4",
-    "@jetbrains/icons": "3.6.0",
     "@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",
-    "copy-webpack-plugin": "^5.1.1",
-    "css-loader": "^3.4.2",
-    "json-loader": "^0.5.7",
     "postcss-import": "^12.0.1",
-    "postcss-loader": "^3.0.0",
     "postcss-preset-env": "^6.7.0",
-    "prop-types": "^15.7.2",
     "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/generator-ring-ui": "2.0.53",
-    "@jetbrains/eslint-config": "^4.0.6",
     "@jetbrains/stylelint-config": "^2.0.0",
     "babel-eslint": "^10.0.3",
-    "chai": "^4.2.0",
-    "chai-as-promised": "^7.1.1",
-    "chai-dom": "^1.8.1",
-    "chai-enzyme": "1.0.0-beta.1",
-    "electron": "^7.1.9",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.2",
     "eslint": "^6.8.0",
-    "karma": "^4.4.1",
-    "karma-chai-plugins": "^0.9.0",
-    "karma-electron": "^6.3.0",
-    "karma-mocha": "^1.3.0",
-    "karma-sourcemap-loader": "^0.3.7",
-    "karma-teamcity-reporter": "^1.1.0",
-    "karma-webpack": "^4.0.2",
-    "mocha": "^6.2.2",
-    "react-test-renderer": "^16.12.0",
-    "sinon": "^8.0.4",
-    "sinon-chai": "^3.4.0",
-    "stylelint": "^12.0.1",
-    "xvfb-maybe": "^0.2.1",
+    "sass": "^1.26.3",
+    "sass-loader": "^8.0.2",
+    "stylelint": "^13.3.2",
     "yo": "^3.1.1"
   },
   "engines": {
diff --git a/plugins/base/search-component/postcss.config.js b/plugins/base/search-component/postcss.config.js
index ce65774e..66c94ee0 100644
--- a/plugins/base/search-component/postcss.config.js
+++ b/plugins/base/search-component/postcss.config.js
@@ -4,7 +4,6 @@ module.exports = () => ({
     require('postcss-preset-env')({
       features: {
         stage: 3, // See https://cssdb.org/#staging-process
-        importFrom: require.resolve('@jetbrains/ring-ui/components/global/variables.css'),
         features: {
           'nesting-rules': true,
           'custom-properties': {
diff --git a/plugins/base/search-component/src/main/js/search/app.css b/plugins/base/search-component/src/main/js/search/app.css
deleted file mode 100644
index c51d3fe1..00000000
--- a/plugins/base/search-component/src/main/js/search/app.css
+++ /dev/null
@@ -1,21 +0,0 @@
-@import "@jetbrains/ring-ui/components/global/variables.css";
-
-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/search-component/src/main/js/search/app.js b/plugins/base/search-component/src/main/js/search/app.js
deleted file mode 100644
index bceffa48..00000000
--- a/plugins/base/search-component/src/main/js/search/app.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-import {render} from 'react-dom';
-import RedBox from 'redbox-react';
-
-import {AppRoot} from './app-root';
-import './app.css';
-
-const appEl = document.getElementById('searchBar');
-const rootEl = document.createElement('div');
-
-let renderApp = () => {
-  render(
-    <AppRoot/>,
-    rootEl
-  );
-};
-
-if (module.hot) {
-  const renderAppHot = renderApp;
-  const renderError = error => {
-    render(
-      <RedBox error={error}/>,
-      rootEl
-    );
-  };
-
-  renderApp = () => {
-    try {
-      renderAppHot();
-    } catch (error) {
-      renderError(error);
-    }
-  };
-
-  module.hot.accept('./app-root', () => {
-    setTimeout(renderApp);
-  });
-}
-
-renderApp();
-appEl.appendChild(rootEl);
diff --git a/plugins/base/search-component/src/main/js/search/search.js b/plugins/base/search-component/src/main/js/search/search.js
deleted file mode 100644
index a742f11d..00000000
--- a/plugins/base/search-component/src/main/js/search/search.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import React, {Component} from 'react';
-import Select from '@jetbrains/ring-ui/components/select/select';
-import '@jetbrains/ring-ui/components/input-size/input-size.scss';
-
-class WithFuzzySearchFilterComponent extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {selected: props.data[0]};
-  }
-
-  clearSelection = () => {
-    this.setState({selected: null});
-  };
-
-  onSelect = option => {
-    window.location.href = `${window.pathToRoot}${option.location}?query${option.name}`;
-    this.setState({selected: option});
-    debugger
-  };
-
-  render() {
-    return (
-      <div className="search-container">
-        <div className="search">
-          <Select
-            selectedLabel="Search"
-            label="Please type page name"
-            filter={{fuzzy: true}}
-            clear
-            selected={this.state.selected}
-            data={this.props.data}
-            onSelect={this.onSelect}
-          />
-        </div>
-      </div>
-    );
-  }
-}
-
-export const WithFuzzySearchFilter = () => {
-  let data = [];
-  if (window.pages) {
-    data = window.pages.map((page, i) => ({
-      ...page,
-      label: page.name,
-      key: i + 1,
-      type: page.kind
-    }));
-  }
-
-  return <WithFuzzySearchFilterComponent data={data}/>;
-};
diff --git a/plugins/base/search-component/webpack.config.js b/plugins/base/search-component/webpack.config.js
index a7b503b6..559f5792 100644
--- a/plugins/base/search-component/webpack.config.js
+++ b/plugins/base/search-component/webpack.config.js
@@ -13,9 +13,10 @@ ringUiWebpackConfig.loaders.svgInlineLoader.include.push(
 );
 
 const webpackConfig = () => ({
-  entry: `${componentsPath}/app.js`,
+  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'),
@@ -32,24 +33,25 @@ const webpackConfig = () => ({
     rules: [
       ...ringUiWebpackConfig.config.module.rules,
       {
-        test: /\.css$/,
-        include: componentsPath,
+        test: /\.s[ac]ss$/i,
         use: [
           'style-loader',
-          {loader: 'css-loader'},
-          {loader: 'postcss-loader'}
-        ]
-      },
-      {
-        test: /\.css$/,
-        include: /node_modules/,
+          'css-loader',
+          'sass-loader',
+        ],
+        include: componentsPath,
         exclude: ringUiWebpackConfig.componentsPath,
-        use: ['style-loader', 'css-loader']
       },
       {
-        test: /\.js$/,
-        include: [componentsPath],
-        loader: 'babel-loader?cacheDirectory'
+        test: /\.tsx?$/,
+        use: [
+          {
+            loader: 'ts-loader',
+            options: {
+              transpileOnly: true
+            }
+          }
+        ]
       }
     ]
   },
-- 
cgit