From 22009b48bea49b52f638763e8c5b230d1b1e192c Mon Sep 17 00:00:00 2001 From: Prasanna Suman Date: Sun, 24 Mar 2019 12:52:13 -0700 Subject: [PATCH 01/16] chore: add storybook --- parijat-frontend/.storybook/config.js | 8 ++++++++ parijat-frontend/package.json | 4 ++++ parijat-frontend/src/components/searchbox/index.js | 3 ++- parijat-frontend/stories/index.js | 14 ++++++++++++++ 4 files changed, 28 insertions(+), 1 deletion(-) create mode 100644 parijat-frontend/.storybook/config.js create mode 100644 parijat-frontend/stories/index.js diff --git a/parijat-frontend/.storybook/config.js b/parijat-frontend/.storybook/config.js new file mode 100644 index 00000000..3766f881 --- /dev/null +++ b/parijat-frontend/.storybook/config.js @@ -0,0 +1,8 @@ +import { configure } from '@storybook/preact'; + +function loadStories() { + require('../stories/index.js'); + // You can require as many stories as you need. +} + +configure(loadStories, module); diff --git a/parijat-frontend/package.json b/parijat-frontend/package.json index 1aa9dda0..3d5a2b3e 100644 --- a/parijat-frontend/package.json +++ b/parijat-frontend/package.json @@ -5,6 +5,7 @@ "license": "MIT", "scripts": { "start": "if-env NODE_ENV=production && npm run -s serve || npm run -s dev", + "storybook": "start-storybook", "build": "NODE_ENV=production preact build", "serve": "yarn serve:gen-config && superstatic --port 8080 --host 0.0.0.0", "serve:gen-config": "preact serve --server config --dest superstatic.json", @@ -25,6 +26,9 @@ "build/*" ], "devDependencies": { + "@babel/core": "^7.4.0", + "@storybook/preact": "^5.0.4", + "babel-loader": "^8.0.5", "babel-polyfill": "^6.26.0", "babel-register": "^6.26.0", "eslint": "^4.5.0", diff --git a/parijat-frontend/src/components/searchbox/index.js b/parijat-frontend/src/components/searchbox/index.js index 305c5a6b..cf865f95 100644 --- a/parijat-frontend/src/components/searchbox/index.js +++ b/parijat-frontend/src/components/searchbox/index.js @@ -4,7 +4,8 @@ import ReactAutocomplete from 'react-autocomplete'; import debounce from 'lodash/debounce'; import { getSuggestions } from '../../api'; import { nepaliTransliterator } from '../../tools/transliterate'; -import style from './style'; +let style = {}; +// import style from './style'; function isSuggestionsEmpty(sug1, sug2) { return sug1.length === 0 && sug2.length === 0; diff --git a/parijat-frontend/stories/index.js b/parijat-frontend/stories/index.js new file mode 100644 index 00000000..6bee76ea --- /dev/null +++ b/parijat-frontend/stories/index.js @@ -0,0 +1,14 @@ +import { h } from 'preact'; +import { storiesOf } from '@storybook/preact'; +import SearchBox from '../src/components/searchbox'; + +storiesOf('SearchBox', module) + .add('with text', () => ) + .add('with emoji', () => ( + )} @@ -164,9 +164,9 @@ class FiltersList extends Component { searchValue: '' }; - onSearchValueChange(evnt) { + onSearchValueChange(newSearchValue) { this.setState({ - searchValue: evnt.target.value + searchValue: newSearchValue }); } diff --git a/parijat-frontend/src/components/filters/style.css b/parijat-frontend/src/components/filters/style.css index 4f7569bd..39015bc9 100644 --- a/parijat-frontend/src/components/filters/style.css +++ b/parijat-frontend/src/components/filters/style.css @@ -47,7 +47,9 @@ .FiltersListInput__NonEditable { display: flex; width: 100%; + padding-left: 14px; justify-content: space-between; + align-items: center; } .FiltersListInput__Button { @@ -55,6 +57,7 @@ border: none; width: 3rem; height: 3rem; + line-height: 0rem; } /* To swith to a button view when in small screens */ diff --git a/parijat-frontend/src/components/header/index.js b/parijat-frontend/src/components/header/index.js index 5cdd83db..d8d1c7e1 100644 --- a/parijat-frontend/src/components/header/index.js +++ b/parijat-frontend/src/components/header/index.js @@ -1,7 +1,6 @@ import { h, Component } from 'preact'; import { route } from 'preact-router'; import Toolbar from 'preact-material-components/Toolbar'; -import 'preact-material-components/Toolbar/style.css'; import 'preact-material-components/TextField/style.css'; import style from './style.css'; @@ -15,8 +14,6 @@ export default class Header extends Component { render() { const { query, children } = this.props; - return (
- {children} -
); + return
{children}
; } } diff --git a/parijat-frontend/src/components/searchbox/index.js b/parijat-frontend/src/components/searchbox/index.js index cf865f95..379ac2d5 100644 --- a/parijat-frontend/src/components/searchbox/index.js +++ b/parijat-frontend/src/components/searchbox/index.js @@ -2,14 +2,9 @@ import { h, Component } from 'preact'; import Icon from 'preact-material-components/Icon'; import ReactAutocomplete from 'react-autocomplete'; import debounce from 'lodash/debounce'; +import TransliteratedInput from '../transliteratedinput'; import { getSuggestions } from '../../api'; -import { nepaliTransliterator } from '../../tools/transliterate'; -let style = {}; -// import style from './style'; - -function isSuggestionsEmpty(sug1, sug2) { - return sug1.length === 0 && sug2.length === 0; -} +import style from './style.css'; const NoSuggestion = ({ onSuggestionClick }) => (
@@ -39,30 +34,19 @@ const SuggestionItem = (item, highlighted) =>
); -const TransliteratedList = ({ items, onSelect }) => - items.length > 0 ? ( -
- लिपी परिवर्तन - {items.map(item => ( - { - onSelect(item); - }} - > - {item} - - ))} -
- ) : null; +const renderInput = ({ onChange, ...props }) => { + const onInput = value => { + onChange && onChange({ target: { value } }); + }; + return ; +}; export default class SearchBox extends Component { constructor() { super(); this.state = { searchValue: '', - suggestions: [], - transliterationSuggestions: [] + suggestions: [] }; } @@ -99,29 +83,14 @@ export default class SearchBox extends Component { }); if (searchValue.length > 0) { this.getSuggestionsDebounced(searchValue); - if (searchValue.match(/[a-z]/i)) { - nepaliTransliterator - .transliterate(searchValue) - .then(transliteratedText => { - this.setState({ - transliterationSuggestions: [transliteratedText] - }); - }); - } } else { this.setState({ - transliterationSuggestions: [], suggestions: [] }); } }; - onTransliterationSelect = suggestion => { - this.setState({ searchValue: suggestion, transliterationSuggestions: [] }); - this.getSuggestions(suggestion); - }; - onAutocompleteSelect = searchValue => { this.props.onSubmit(this.state.searchValue); }; @@ -138,21 +107,16 @@ export default class SearchBox extends Component { className={style.SearchBox__Input} items={[...this.state.suggestions]} getItemValue={item => item} - renderMenu={children => ( -
- + renderInput={renderInput} + renderMenu={children => { + console.log("Reached here"); + return
{children} - {isSuggestionsEmpty( - this.state.suggestions, - this.state.transliterationSuggestions - ) ? ( - - ) : null} + {this.state.suggestions.length === 0 ? ( + + ) : null}
- )} + }} renderItem={SuggestionItem} value={this.state.searchValue} onChange={this.onTextInputChange} diff --git a/parijat-frontend/src/components/searchbox/style.css b/parijat-frontend/src/components/searchbox/style.css index 6b6d6481..c1be2dd8 100644 --- a/parijat-frontend/src/components/searchbox/style.css +++ b/parijat-frontend/src/components/searchbox/style.css @@ -9,6 +9,7 @@ .SearchBox > div { width: 100%; + height: 100%; } .SearchBox__Menu { @@ -40,6 +41,7 @@ right: 0rem; top: 0rem; position: absolute; + line-height: 0; } .SuggestionItem { diff --git a/parijat-frontend/src/components/transliteratedinput/index.js b/parijat-frontend/src/components/transliteratedinput/index.js new file mode 100644 index 00000000..5ee3a9be --- /dev/null +++ b/parijat-frontend/src/components/transliteratedinput/index.js @@ -0,0 +1,65 @@ +import { h, Component } from 'preact'; +import { nepaliTransliterator } from '../../tools/transliterate'; +import style from './style.css'; + +class TransliteratedInput extends Component { + constructor() { + super(); + this.state = { + value: '', + tranSuggestion: '' + }; + } + + onInput = evnt => { + const { onInput } = this.props; + const { value } = evnt.target; + nepaliTransliterator.transliterate(value).then(tranSuggestion => { + this.setState({ tranSuggestion, value }); + }); + onInput && onInput(value); + }; + + onSuggestionClick = evnt => { + const { tranSuggestion } = this.state; + const { onInput } = this.props; + onInput && onInput(tranSuggestion); + this.setState({ value: tranSuggestion }); + this.focus(); + }; + + focus = () => { + this.inputElm.focus(); + } + + render() { + const { props } = this.props; + const showSuggestion = this.state.value !== this.state.tranSuggestion; + return ( + + this.inputElm = inp } + className={style.TransliteratedInput__Input} + value={this.state.value || this.props.value} + onInput={this.onInput} + {...props} + /> + {showSuggestion ? ( + + ) : null} + + ); + } + + componentDidMount() { + this.focus(); + } +} + +export default TransliteratedInput; diff --git a/parijat-frontend/src/components/transliteratedinput/style.css b/parijat-frontend/src/components/transliteratedinput/style.css new file mode 100644 index 00000000..03d8e437 --- /dev/null +++ b/parijat-frontend/src/components/transliteratedinput/style.css @@ -0,0 +1,29 @@ +.TransliteratedInput { + display: inline-block; + padding: 5px; + background: rgb(255, 255, 255); + width: 100%; + height: 100%; + box-sizing: border-box; + position: relative; +} + +.TransliteratedInput__Input { + border: none; + width: 100%; + height: 100%; + background: transparent; +} + +.TransliteratedInput__Suggestion { + background: #e9e9e9; + border: 1px solid black; + white-space: nowrap; + position: absolute; + top: 90%; + left: 20px; +} + +.TransliteratedInput__Suggestion:hover { + background: #e0e0e0; +} diff --git a/parijat-frontend/src/routes/about/index.js b/parijat-frontend/src/routes/about/index.js index afdfe35d..5c4dd7a9 100644 --- a/parijat-frontend/src/routes/about/index.js +++ b/parijat-frontend/src/routes/about/index.js @@ -1,6 +1,5 @@ import { h, Component } from 'preact'; import Toolbar from 'preact-material-components/Toolbar'; -import 'preact-material-components/Toolbar/style.css'; import { route } from 'preact-router'; import Header from '../../components/header'; import Footer from '../../components/footer'; diff --git a/parijat-frontend/src/routes/content/index.js b/parijat-frontend/src/routes/content/index.js index 87a62a53..32e3f12c 100644 --- a/parijat-frontend/src/routes/content/index.js +++ b/parijat-frontend/src/routes/content/index.js @@ -1,6 +1,5 @@ import { h, Component } from 'preact'; import Toolbar from 'preact-material-components/Toolbar'; -import 'preact-material-components/Toolbar/style.css'; import { route } from 'preact-router'; import Header from '../../components/header'; import Footer from '../../components/footer'; diff --git a/parijat-frontend/src/routes/fair-use/index.js b/parijat-frontend/src/routes/fair-use/index.js index 3b44a116..e4094fc8 100644 --- a/parijat-frontend/src/routes/fair-use/index.js +++ b/parijat-frontend/src/routes/fair-use/index.js @@ -1,6 +1,5 @@ import { h, Component } from 'preact'; import Toolbar from 'preact-material-components/Toolbar'; -import 'preact-material-components/Toolbar/style.css'; import { route } from 'preact-router'; import Header from '../../components/header'; import Footer from '../../components/footer'; diff --git a/parijat-frontend/src/routes/search/index.js b/parijat-frontend/src/routes/search/index.js index cf718fe1..d425059d 100644 --- a/parijat-frontend/src/routes/search/index.js +++ b/parijat-frontend/src/routes/search/index.js @@ -72,7 +72,6 @@ export default class Search extends Component {
-
( + { + console.log(queryValue); + }} + /> +)); diff --git a/parijat-frontend/stories/components/TransliteratedInput.js b/parijat-frontend/stories/components/TransliteratedInput.js new file mode 100644 index 00000000..7ff74626 --- /dev/null +++ b/parijat-frontend/stories/components/TransliteratedInput.js @@ -0,0 +1,8 @@ +import { h } from 'preact'; +import { storiesOf } from '@storybook/preact'; +import TransliteratedInput from '../../src/components/transliteratedinput'; + +storiesOf('TransliteratedInput', module) + .add('default', () => ( + + )); diff --git a/parijat-frontend/stories/index.js b/parijat-frontend/stories/index.js deleted file mode 100644 index 6bee76ea..00000000 --- a/parijat-frontend/stories/index.js +++ /dev/null @@ -1,14 +0,0 @@ -import { h } from 'preact'; -import { storiesOf } from '@storybook/preact'; -import SearchBox from '../src/components/searchbox'; - -storiesOf('SearchBox', module) - .add('with text', () => ) - .add('with emoji', () => ( -
{ route(`search?q=${queryValue}`); }} diff --git a/parijat-frontend/src/routes/home/style.css b/parijat-frontend/src/routes/home/style.css index a052e105..d1c4fbb3 100644 --- a/parijat-frontend/src/routes/home/style.css +++ b/parijat-frontend/src/routes/home/style.css @@ -8,6 +8,7 @@ body { .Logo { font-size: 3rem; + height: 5rem; width: 100%; text-align: center; } diff --git a/parijat-frontend/stories/components/Logo.js b/parijat-frontend/stories/components/Logo.js new file mode 100644 index 00000000..13b647e3 --- /dev/null +++ b/parijat-frontend/stories/components/Logo.js @@ -0,0 +1,9 @@ +import { h } from 'preact'; +import { storiesOf } from '@storybook/preact'; +import Logo from '../../src/components/logo'; + +storiesOf('Logo', module).add('default', () => ( +
+ +
+)); From 0717d36d01513b142b8efed9d6a18f6525d067c0 Mon Sep 17 00:00:00 2001 From: Prasanna Suman Date: Sun, 15 Sep 2019 20:44:49 -0700 Subject: [PATCH 04/16] Fix issues with use of TransliteratedInput for searchbox fix: many runtime errors feature: use header for all routes that contains logo and searchbox --- parijat-frontend/package.json | 2 +- .../src/components/filters/index.js | 6 +- .../src/components/searchbox/index.js | 38 +++++++----- .../components/transliteratedinput/index.js | 26 ++++---- parijat-frontend/src/routes/about/index.js | 17 +----- parijat-frontend/src/routes/content/index.js | 19 +----- parijat-frontend/src/routes/fair-use/index.js | 21 +------ .../src/routes/search/SearchBox.js | 4 +- parijat-frontend/src/routes/search/index.js | 59 +++++++------------ parijat-frontend/src/routes/search/style.css | 5 -- .../stories/components/SearchBox.js | 5 +- .../stories/components/TransliteratedInput.js | 7 +-- parijat-frontend/yarn.lock | 19 +++--- 13 files changed, 88 insertions(+), 140 deletions(-) diff --git a/parijat-frontend/package.json b/parijat-frontend/package.json index 7211c1fd..d1bd006a 100644 --- a/parijat-frontend/package.json +++ b/parijat-frontend/package.json @@ -41,7 +41,7 @@ }, "dependencies": { "lodash": "^4.17.5", - "preact": "^8.2.1", + "preact": "^8.5.2", "preact-compat": "^3.17.0", "preact-material-components": "^1.4.0", "preact-router": "^2.5.5", diff --git a/parijat-frontend/src/components/filters/index.js b/parijat-frontend/src/components/filters/index.js index 718c22a6..7dc91ac6 100644 --- a/parijat-frontend/src/components/filters/index.js +++ b/parijat-frontend/src/components/filters/index.js @@ -133,7 +133,7 @@ class FiltersListInput extends Component {
{ this.scrollingDlg = scrollingDlg; }} > - Select Filters + खोज सुधार - Close + बन्द गर्नुहोस्
diff --git a/parijat-frontend/src/components/searchbox/index.js b/parijat-frontend/src/components/searchbox/index.js index 8e0803ba..f46190aa 100644 --- a/parijat-frontend/src/components/searchbox/index.js +++ b/parijat-frontend/src/components/searchbox/index.js @@ -85,7 +85,7 @@ export default class SearchBox extends Component { }; onAutocompleteSelect = searchValue => { - this.props.onSubmit(this.state.searchValue); + this.props.onSubmit(searchValue); }; handleSubmit = evnt => { From 7fbf586dd4f666f612af3b6387a79eaa18019654 Mon Sep 17 00:00:00 2001 From: tux4 Date: Mon, 14 Oct 2019 21:15:25 -0700 Subject: [PATCH 15/16] fix: minor style issue in autcomplete no result --- parijat-frontend/src/components/searchbox/style.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/parijat-frontend/src/components/searchbox/style.css b/parijat-frontend/src/components/searchbox/style.css index c1be2dd8..ee3f19b5 100644 --- a/parijat-frontend/src/components/searchbox/style.css +++ b/parijat-frontend/src/components/searchbox/style.css @@ -83,6 +83,7 @@ } .NoSuggestion > p { + display: flex; margin: 0.25rem; width: 100%; white-space: normal; @@ -96,4 +97,4 @@ .NoSuggestion__Icon { margin-right: 0.25rem; margin-left: 0.25rem; -} \ No newline at end of file +} From 62bda47b826add6797379b28a97d5e87175b6077 Mon Sep 17 00:00:00 2001 From: tux4 Date: Mon, 14 Oct 2019 21:29:49 -0700 Subject: [PATCH 16/16] =?UTF-8?q?feature:=20f=20for=20=E0=A4=AB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- parijat-frontend/src/tools/transliterate/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/parijat-frontend/src/tools/transliterate/index.js b/parijat-frontend/src/tools/transliterate/index.js index ce8eff67..8a735667 100644 --- a/parijat-frontend/src/tools/transliterate/index.js +++ b/parijat-frontend/src/tools/transliterate/index.js @@ -27,6 +27,7 @@ export const DEVANAGARI_CONSONANTS = { pa: 'प', pha: 'फ', + fa: 'फ', ba: 'ब', bha: 'भ', ma: 'म',