aboutsummaryrefslogtreecommitdiff
path: root/plugins/base/search-component
diff options
context:
space:
mode:
Diffstat (limited to 'plugins/base/search-component')
-rw-r--r--plugins/base/search-component/.gitignore3
-rw-r--r--plugins/base/search-component/build.gradle.kts18
-rw-r--r--plugins/base/search-component/package.json80
-rw-r--r--plugins/base/search-component/postcss.config.js17
-rw-r--r--plugins/base/search-component/src/main/js/search/app-root.js47
-rw-r--r--plugins/base/search-component/src/main/js/search/app.css21
-rw-r--r--plugins/base/search-component/src/main/js/search/app.js41
-rw-r--r--plugins/base/search-component/src/main/js/search/search.js52
-rw-r--r--plugins/base/search-component/stylelint.config.js4
-rw-r--r--plugins/base/search-component/webpack.config.js62
10 files changed, 345 insertions, 0 deletions
diff --git a/plugins/base/search-component/.gitignore b/plugins/base/search-component/.gitignore
new file mode 100644
index 00000000..9220c11f
--- /dev/null
+++ b/plugins/base/search-component/.gitignore
@@ -0,0 +1,3 @@
+/dist/
+/node_modules/
+/package-lock.json
diff --git a/plugins/base/search-component/build.gradle.kts b/plugins/base/search-component/build.gradle.kts
new file mode 100644
index 00000000..ce747c5e
--- /dev/null
+++ b/plugins/base/search-component/build.gradle.kts
@@ -0,0 +1,18 @@
+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/js/search/")
+ 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
new file mode 100644
index 00000000..fa997c44
--- /dev/null
+++ b/plugins/base/search-component/package.json
@@ -0,0 +1,80 @@
+{
+ "name": "search",
+ "version": "1.0.0",
+ "private": true,
+ "config": {
+ "components": "./src/main/js/search",
+ "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/icons": "3.6.0",
+ "@jetbrains/logos": "1.1.5",
+ "@jetbrains/ring-ui": "2.1.16",
+ "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",
+ "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",
+ "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
new file mode 100644
index 00000000..ce65774e
--- /dev/null
+++ b/plugins/base/search-component/postcss.config.js
@@ -0,0 +1,17 @@
+module.exports = () => ({
+ plugins: [
+ require('postcss-import'),
+ 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': {
+ 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
new file mode 100644
index 00000000..5d650581
--- /dev/null
+++ b/plugins/base/search-component/src/main/js/search/app-root.js
@@ -0,0 +1,47 @@
+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, true);
+ document.addEventListener("click", handleClickOutside, true);
+ return () => {
+ document.removeEventListener("keydown", handleHideDropdown, true);
+ document.removeEventListener("click", handleClickOutside, true);
+ };
+ });
+
+ 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/src/main/js/search/app.css b/plugins/base/search-component/src/main/js/search/app.css
new file mode 100644
index 00000000..c51d3fe1
--- /dev/null
+++ b/plugins/base/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 {
+ 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
new file mode 100644
index 00000000..bceffa48
--- /dev/null
+++ b/plugins/base/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/plugins/base/search-component/src/main/js/search/search.js b/plugins/base/search-component/src/main/js/search/search.js
new file mode 100644
index 00000000..a742f11d
--- /dev/null
+++ b/plugins/base/search-component/src/main/js/search/search.js
@@ -0,0 +1,52 @@
+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/stylelint.config.js b/plugins/base/search-component/stylelint.config.js
new file mode 100644
index 00000000..02b3f4ac
--- /dev/null
+++ b/plugins/base/search-component/stylelint.config.js
@@ -0,0 +1,4 @@
+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
new file mode 100644
index 00000000..a7b503b6
--- /dev/null
+++ b/plugins/base/search-component/webpack.config.js
@@ -0,0 +1,62 @@
+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}/app.js`,
+ resolve: {
+ mainFields: ['module', 'browser', 'main'],
+ 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: /\.css$/,
+ include: componentsPath,
+ use: [
+ 'style-loader',
+ {loader: 'css-loader'},
+ {loader: 'postcss-loader'}
+ ]
+ },
+ {
+ test: /\.css$/,
+ include: /node_modules/,
+ exclude: ringUiWebpackConfig.componentsPath,
+ use: ['style-loader', 'css-loader']
+ },
+ {
+ test: /\.js$/,
+ include: [componentsPath],
+ loader: 'babel-loader?cacheDirectory'
+ }
+ ]
+ },
+ plugins: [],
+ output: {
+ path: __dirname + '/dist/'
+ }
+});
+
+module.exports = webpackConfig;
generated by cgit (git 2.46.0) at 2024-12-04 12:43:38 +0000