4 files changed, 128 insertions, 0 deletions
diff --git a/search-component/src/main/js/search/app-root.js b/search-component/src/main/js/search/app-root.js
new file mode 100644
index 00000000..25a374a5
--- /dev/null
+++ b/search-component/src/main/js/search/app-root.js
@@ -0,0 +1,13 @@
+import React, {Component} from 'react';
+import {WithFuzzySearchFilter} from './search';
+import './app.css';
+
+export default class AppRoot extends Component {
+  render() {
+    return (
+        <div className="search-content">
+          <WithFuzzySearchFilter/>
+        </div>
+    );
+  }
+}
+\ No newline at end of file
diff --git a/search-component/src/main/js/search/app.css b/search-component/src/main/js/search/app.css
new file mode 100644
index 00000000..933237e0
--- /dev/null
+++ b/search-component/src/main/js/search/app.css
@@ -0,0 +1,21 @@
+@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 {
+  margin: calc(var(--ring-unit) * 4);
+}
diff --git a/search-component/src/main/js/search/app.js b/search-component/src/main/js/search/app.js
new file mode 100644
index 00000000..64091607
--- /dev/null
+++ b/search-component/src/main/js/search/app.js
@@ -0,0 +1,41 @@
+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/search-component/src/main/js/search/search.js b/search-component/src/main/js/search/search.js
new file mode 100644
index 00000000..ea51b9a7
--- /dev/null
+++ b/search-component/src/main/js/search/search.js
@@ -0,0 +1,53 @@
+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,
+      icon: `${window.pathToRoot}${window.iconsFolderName}${page.kind}.png`
+    }));
+  }
+
+  return <WithFuzzySearchFilterComponent data={data}/>;
+};