From b614604effda51ca7c76c8901be78ced62b642b2 Mon Sep 17 00:00:00 2001 From: Marcin Aman Date: Thu, 28 May 2020 16:17:13 +0200 Subject: Update TS migration to current dev, move to a common package, rename to frontend --- 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 ---------------------- 22 files changed, 385 insertions(+), 216 deletions(-) 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 (limited to 'plugins/base') 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
+ {isComponentVisible && ()} + {!isComponentVisible && ( + setIsComponentVisible(true)}> + + )} +
+} + +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( + , + rootEl + ); +}; + +// @ts-ignore +if (module.hot) { + const renderAppHot = renderApp; + const renderError = (error: Error) => { + render( + , + 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 = ({data}: Props) => { + const [selected, onSelected] = useState