aboutsummaryrefslogtreecommitdiff
path: root/plugins/base/frontend
diff options
context:
space:
mode:
Diffstat (limited to 'plugins/base/frontend')
-rw-r--r--plugins/base/frontend/.gitignore3
-rw-r--r--plugins/base/frontend/build.gradle.kts18
-rw-r--r--plugins/base/frontend/package.json57
-rw-r--r--plugins/base/frontend/postcss.config.js16
-rw-r--r--plugins/base/frontend/src/main/components/app/index.scss21
-rw-r--r--plugins/base/frontend/src/main/components/app/index.tsx50
-rw-r--r--plugins/base/frontend/src/main/components/root.tsx43
-rw-r--r--plugins/base/frontend/src/main/components/search/search.tsx45
-rw-r--r--plugins/base/frontend/src/main/components/search/types.ts26
-rw-r--r--plugins/base/frontend/src/main/scss/index.scss1
-rw-r--r--plugins/base/frontend/src/main/types/@jetbrains/index.d.ts3
-rw-r--r--plugins/base/frontend/stylelint.config.js4
-rw-r--r--plugins/base/frontend/tsconfig.json30
-rw-r--r--plugins/base/frontend/webpack.config.js64
14 files changed, 381 insertions, 0 deletions
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;
generated by cgit (git 2.46.0) at 2024-12-04 19:29:40 +0000