diff options
15 files changed, 163 insertions, 110 deletions
@@ -97,4 +97,5 @@ android.local.properties !integration-tests/gradle-integration-tests/testData/basic/classDir/**/*.class core/out/ -runners/**/out/
\ No newline at end of file +runners/**/out/ +.idea diff --git a/plugins/base/search-component/src/main/js/search/app.css b/core/search-component/src/main/components/app/index.scss index c51d3fe1..a7406115 100644 --- a/plugins/base/search-component/src/main/js/search/app.css +++ b/core/search-component/src/main/components/app/index.scss @@ -1,4 +1,4 @@ -@import "@jetbrains/ring-ui/components/global/variables.css"; +@import "src/main/scss/index"; html, .app-root { @@ -17,5 +17,5 @@ html, } .search-content { - padding: 24px 41px; + margin: calc(var(--ring-unit) * 4); } diff --git a/core/search-component/src/main/components/app/index.tsx b/core/search-component/src/main/components/app/index.tsx new file mode 100644 index 00000000..3427c1ce --- /dev/null +++ b/core/search-component/src/main/components/app/index.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import {WithFuzzySearchFilter} from '../search/search'; +import './index.scss'; + +const App: React.FC = () => ( + <div className="search-content"> + <WithFuzzySearchFilter/> + </div> +) + +export default App diff --git a/plugins/base/search-component/src/main/js/search/app.js b/core/search-component/src/main/components/root.tsx index bceffa48..70ed9550 100644 --- a/plugins/base/search-component/src/main/js/search/app.js +++ b/core/search-component/src/main/components/root.tsx @@ -2,25 +2,26 @@ import React from 'react'; import {render} from 'react-dom'; import RedBox from 'redbox-react'; -import {AppRoot} from './app-root'; -import './app.css'; +import App from "./app"; +import './app/index.scss'; const appEl = document.getElementById('searchBar'); const rootEl = document.createElement('div'); let renderApp = () => { render( - <AppRoot/>, - rootEl + <App/>, + rootEl ); }; +// @ts-ignore if (module.hot) { const renderAppHot = renderApp; - const renderError = error => { + const renderError = (error: Error) => { render( - <RedBox error={error}/>, - rootEl + <RedBox error={error}/>, + rootEl ); }; @@ -32,10 +33,11 @@ if (module.hot) { } }; - module.hot.accept('./app-root', () => { + // @ts-ignore + module.hot.accept('./app', () => { setTimeout(renderApp); }); } renderApp(); -appEl.appendChild(rootEl); +appEl!.appendChild(rootEl); diff --git a/core/search-component/src/main/components/search/search.tsx b/core/search-component/src/main/components/search/search.tsx new file mode 100644 index 00000000..f0df0c98 --- /dev/null +++ b/core/search-component/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/core/search-component/src/main/components/search/types.ts b/core/search-component/src/main/components/search/types.ts new file mode 100644 index 00000000..2900153a --- /dev/null +++ b/core/search-component/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/core/search-component/src/main/scss/index.scss b/core/search-component/src/main/scss/index.scss new file mode 100644 index 00000000..74af970d --- /dev/null +++ b/core/search-component/src/main/scss/index.scss @@ -0,0 +1 @@ +@import "~@jetbrains/ring-ui/components/global/variables.css"; diff --git a/core/search-component/tsconfig.json b/core/search-component/tsconfig.json new file mode 100644 index 00000000..6e97c848 --- /dev/null +++ b/core/search-component/tsconfig.json @@ -0,0 +1,34 @@ +{ + "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": [ + "./types" + ] + }, + "include": [ + "src", + "node_modules/@types/node/globals.d.ts" + ], + "exclude": [ + "./node_modules" + ] +} diff --git a/core/search-component/types/@jetbrains/index.d.ts b/core/search-component/types/@jetbrains/index.d.ts new file mode 100644 index 00000000..1dc9983c --- /dev/null +++ b/core/search-component/types/@jetbrains/index.d.ts @@ -0,0 +1,3 @@ +declare module '@jetbrains/ring-ui' { + export const Select: any; +} diff --git a/core/search-component/types/index.d.ts b/core/search-component/types/index.d.ts new file mode 100644 index 00000000..80b7428f --- /dev/null +++ b/core/search-component/types/index.d.ts @@ -0,0 +1 @@ +/// <reference types="./@jetbrains" /> diff --git a/plugins/base/search-component/build.gradle.kts b/plugins/base/search-component/build.gradle.kts index ce747c5e..11f04ace 100644 --- a/plugins/base/search-component/build.gradle.kts +++ b/plugins/base/search-component/build.gradle.kts @@ -8,11 +8,11 @@ task("generateSearchFiles") { tasks { "npm_run_build" { - inputs.dir("$projectDir/src/main/js/search/") + 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") } -}
\ No newline at end of file +} diff --git a/plugins/base/search-component/package.json b/plugins/base/search-component/package.json index fa997c44..1fb386f6 100644 --- a/plugins/base/search-component/package.json +++ b/plugins/base/search-component/package.json @@ -3,7 +3,7 @@ "version": "1.0.0", "private": true, "config": { - "components": "./src/main/js/search", + "components": "./src/main/components", "dist": "./dist" }, "scripts": { @@ -28,50 +28,30 @@ "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", + "@types/node": "^12.12.36", + "@types/react": "^16.9.0", + "@types/react-dom": "^16.9.0", "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", + "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/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", + "sass": "^1.26.3", + "sass-loader": "^8.0.2", + "stylelint": "^13.3.2", "yo": "^3.1.1" }, "engines": { diff --git a/plugins/base/search-component/postcss.config.js b/plugins/base/search-component/postcss.config.js index ce65774e..66c94ee0 100644 --- a/plugins/base/search-component/postcss.config.js +++ b/plugins/base/search-component/postcss.config.js @@ -4,7 +4,6 @@ module.exports = () => ({ 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': { diff --git a/plugins/base/search-component/src/main/js/search/search.js b/plugins/base/search-component/src/main/js/search/search.js deleted file mode 100644 index a742f11d..00000000 --- a/plugins/base/search-component/src/main/js/search/search.js +++ /dev/null @@ -1,52 +0,0 @@ -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/webpack.config.js b/plugins/base/search-component/webpack.config.js index a7b503b6..559f5792 100644 --- a/plugins/base/search-component/webpack.config.js +++ b/plugins/base/search-component/webpack.config.js @@ -13,9 +13,10 @@ ringUiWebpackConfig.loaders.svgInlineLoader.include.push( ); const webpackConfig = () => ({ - entry: `${componentsPath}/app.js`, + 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'), @@ -32,24 +33,25 @@ const webpackConfig = () => ({ rules: [ ...ringUiWebpackConfig.config.module.rules, { - test: /\.css$/, - include: componentsPath, + test: /\.s[ac]ss$/i, use: [ 'style-loader', - {loader: 'css-loader'}, - {loader: 'postcss-loader'} - ] - }, - { - test: /\.css$/, - include: /node_modules/, + 'css-loader', + 'sass-loader', + ], + include: componentsPath, exclude: ringUiWebpackConfig.componentsPath, - use: ['style-loader', 'css-loader'] }, { - test: /\.js$/, - include: [componentsPath], - loader: 'babel-loader?cacheDirectory' + test: /\.tsx?$/, + use: [ + { + loader: 'ts-loader', + options: { + transpileOnly: true + } + } + ] } ] }, |