diff options
Diffstat (limited to 'plugins/base')
15 files changed, 197 insertions, 28 deletions
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/search-component/.gitignore b/plugins/base/frontend/.gitignore index 9220c11f..9220c11f 100644 --- a/plugins/base/search-component/.gitignore +++ b/plugins/base/frontend/.gitignore diff --git a/plugins/base/search-component/build.gradle.kts b/plugins/base/frontend/build.gradle.kts index 11f04ace..d1141a4c 100644 --- a/plugins/base/search-component/build.gradle.kts +++ b/plugins/base/frontend/build.gradle.kts @@ -2,7 +2,7 @@ plugins { id("com.moowork.node") version "1.3.1" } -task("generateSearchFiles") { +task("generateFrontendFiles") { dependsOn("npm_install", "npm_run_build") } diff --git a/plugins/base/search-component/package.json b/plugins/base/frontend/package.json index 1fb386f6..120d7f34 100644 --- a/plugins/base/search-component/package.json +++ b/plugins/base/frontend/package.json @@ -7,12 +7,9 @@ "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", + "stylelint": "stylelint --ignore-path .gitignore ./src/main/**/*.scss", "start": "webpack-dev-server -d --history-api-fallback --inline --hot --colors --port 9010" }, "babel": { diff --git a/plugins/base/search-component/postcss.config.js b/plugins/base/frontend/postcss.config.js index 66c94ee0..66c94ee0 100644 --- a/plugins/base/search-component/postcss.config.js +++ b/plugins/base/frontend/postcss.config.js 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/search-component/src/main/js/search/app-root.js b/plugins/base/frontend/src/main/components/app/index.tsx index 3544c61b..1a51e699 100644 --- a/plugins/base/search-component/src/main/js/search/app-root.js +++ b/plugins/base/frontend/src/main/components/app/index.tsx @@ -1,18 +1,19 @@ -import React, {useRef, useState, useEffect} from 'react'; -import {WithFuzzySearchFilter} from './search'; -import './app.css'; +import React, {useEffect, useRef, useState} from 'react'; +import {WithFuzzySearchFilter} from '../search/search'; +import './index.scss'; -function useComponentVisible(initialIsVisible) { +function useComponentVisible(initialIsVisible: boolean) { const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible); const ref = useRef(null); - const handleHideDropdown = (event) => { + const handleHideDropdown = (event: KeyboardEvent) => { if (event.key === "Escape") { setIsComponentVisible(false); } }; - const handleClickOutside = event => { + const handleClickOutside = (event : MouseEvent)=> { + // @ts-ignore if (ref.current && !ref.current.contains(event.target)) { setIsComponentVisible(false); } @@ -30,18 +31,20 @@ function useComponentVisible(initialIsVisible) { 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)}> +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> -}
\ No newline at end of file + </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/search-component/stylelint.config.js b/plugins/base/frontend/stylelint.config.js index 02b3f4ac..02b3f4ac 100644 --- a/plugins/base/search-component/stylelint.config.js +++ b/plugins/base/frontend/stylelint.config.js 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/search-component/webpack.config.js b/plugins/base/frontend/webpack.config.js index 559f5792..559f5792 100644 --- a/plugins/base/search-component/webpack.config.js +++ b/plugins/base/frontend/webpack.config.js |