From b5c3b4800aec5dd7ce7934ea4ed47abd489e5ace Mon Sep 17 00:00:00 2001 From: Ritesh Kumar Date: Fri, 24 Jun 2016 19:34:01 +0530 Subject: [PATCH 1/6] added support for redux devtools --- src/index.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index cee0d7b92628..b6cdc71a4b48 100644 --- a/src/index.js +++ b/src/index.js @@ -27,7 +27,14 @@ export default function (domNode, provider) { ...uiModule.reducers, }); - const reduxStore = createStore(reducer); + console.log(domNode, provider); + + const reduxStore = createStore(reducer, ( + typeof window === 'object' && + typeof window.devToolsExtension !== 'undefined' && + window.devToolsExtension && + window.devToolsExtension() + )); const context = buildContext(reduxStore, domNode, provider); const app = createApp(context); From eeb0a5967682d016adb6aeb5d0c6e380a1676d95 Mon Sep 17 00:00:00 2001 From: Ritesh Kumar Date: Fri, 24 Jun 2016 22:00:25 +0530 Subject: [PATCH 2/6] added fuzzy search --- package.json | 9 +- src/index.js | 2 - src/libs/key_events.js | 4 + .../shortcuts/configs/reducers/shortcuts.js | 3 + src/modules/ui/components/layout/index.js | 86 +++++++++++++++++++ src/modules/ui/components/shortcuts_help.js | 5 ++ src/modules/ui/containers/layout.js | 11 ++- 7 files changed, 112 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index 04521ca0bf73..a8552e36f941 100644 --- a/package.json +++ b/package.json @@ -46,16 +46,19 @@ }, "dependencies": { "@kadira/react-split-pane": "^1.4.0", - "redux": "^3.5.2", - "mantra-core": "^1.6.1", "babel-runtime": "^6.5.0", + "classnames": "^2.2.5", "deep-equal": "^1.0.1", + "fuse.js": "^2.2.0", "fuzzysearch": "^1.0.3", "json-stringify-safe": "^5.0.1", "keycode": "^2.1.1", "lodash.pick": "^4.2.1", + "mantra-core": "^1.6.1", "qs": "^6.2.0", - "react-modal": "^1.2.1" + "react-fuzzy": "^0.2.1", + "react-modal": "^1.2.1", + "redux": "^3.5.2" }, "main": "dist/index.js", "engines": { diff --git a/src/index.js b/src/index.js index b6cdc71a4b48..22f3f6cf0dfd 100644 --- a/src/index.js +++ b/src/index.js @@ -27,8 +27,6 @@ export default function (domNode, provider) { ...uiModule.reducers, }); - console.log(domNode, provider); - const reduxStore = createStore(reducer, ( typeof window === 'object' && typeof window.devToolsExtension !== 'undefined' && diff --git a/src/libs/key_events.js b/src/libs/key_events.js index 4a3b674bdfce..bd3cafd5d21d 100755 --- a/src/libs/key_events.js +++ b/src/libs/key_events.js @@ -8,6 +8,7 @@ export const features = { ESCAPE: 5, NEXT_STORY: 6, PREV_STORY: 7, + SEARCH: 8 }; export function isModifierPressed(e) { @@ -39,6 +40,9 @@ export default function handle(e) { case keycode('left'): e.preventDefault(); return features.PREV_STORY; + case keycode('P'): + e.preventDefault(); + return features.SEARCH; default: return false; } diff --git a/src/modules/shortcuts/configs/reducers/shortcuts.js b/src/modules/shortcuts/configs/reducers/shortcuts.js index 69cf34515eb1..b710dabce62b 100755 --- a/src/modules/shortcuts/configs/reducers/shortcuts.js +++ b/src/modules/shortcuts/configs/reducers/shortcuts.js @@ -5,6 +5,7 @@ const defaultState = { goFullScreen: false, showLeftPanel: true, showDownPanel: true, + showSearchBox: false }; export function keyEventToState(state, event) { @@ -15,6 +16,8 @@ export function keyEventToState(state, event) { return { showDownPanel: !state.showDownPanel }; case features.LEFT_PANEL: return { showLeftPanel: !state.showLeftPanel }; + case features.SEARCH: + return { showSearchBox: !state.showSearchBox }; default: return {}; } diff --git a/src/modules/ui/components/layout/index.js b/src/modules/ui/components/layout/index.js index 9b8d6cbde90f..0441fa5b66db 100755 --- a/src/modules/ui/components/layout/index.js +++ b/src/modules/ui/components/layout/index.js @@ -3,6 +3,9 @@ import React from 'react'; import VSplit from './vsplit'; import HSplit from './hsplit'; import SplitPane from '@kadira/react-split-pane'; +import FuzzySearch from 'react-fuzzy'; + +import { features } from '../../../../libs/key_events'; const rootStyle = { height: '100vh', @@ -47,6 +50,14 @@ const previewStyle = { borderRadius: 4, }; +const searchBoxStyle = { + position: 'absolute', + backgroundColor: '#FFF', + top: '100px', + left: '50%', + marginLeft: '-215px' +}; + const vsplit = ; const hsplit = ; @@ -58,7 +69,69 @@ const onDragEnd = function () { document.body.classList.remove('dragging'); }; +const formatStories = function (stories) { + const formattedStories=[]; + let i = 0; + stories.forEach((val) => { + formattedStories.push({ + type: 'kind', + value: val.kind, + id: i++ + }); + + val.stories.forEach((story) => { + formattedStories.push({ + type: 'story', + value: story, + id: i++, + kind: val.kind + }) + }) + }); + + return formattedStories; +}; + +const suggestionTemplate = function(props, state, styles) { + return state.results.map((val, i) => { + const style = state.selectedIndex === i ? styles.selectedResultStyle : styles.resultsStyle; + return ( +
+ {val.value} + + {val.type === 'story' ? `in ${val.kind}` : 'Kind'} + +
+ ); + }); +}; + class Layout extends React.Component { + constructor (props){ + super(props); + + this.onSelect = this.onSelect.bind(this); + this.fireOnStory = this.fireOnStory.bind(this); + this.fireOnKind = this.fireOnKind.bind(this); + } + + fireOnKind(kind) { + const onSelectStory = this.props.actions.api.selectStory; + if (onSelectStory) onSelectStory(kind, null); + } + + fireOnStory(story, kind) { + const onSelectStory = this.props.actions.api.selectStory; + if (onSelectStory) onSelectStory(kind, story); + } + + onSelect(selected){ + const { actions } = this.props; + if(selected.type === 'story') this.fireOnStory(selected.value, selected.kind); + else this.fireOnKind(selected.value); + actions.shortcuts.handleEvent(features.SEARCH) + } + renderWithFullscreen() { return (
@@ -104,6 +177,16 @@ class Layout extends React.Component {
+ +
+ {props.showSearchBox && } +
); } @@ -125,6 +208,9 @@ Layout.propTypes = { leftPanel: React.PropTypes.func.isRequired, preview: React.PropTypes.func.isRequired, downPanel: React.PropTypes.func.isRequired, + stories: React.PropTypes.arrayOf(React.PropTypes.object).isRequired, + showSearchBox: React.PropTypes.bool.isRequired, + actions: React.PropTypes.object.isRequired }; export default Layout; diff --git a/src/modules/ui/components/shortcuts_help.js b/src/modules/ui/components/shortcuts_help.js index f05d78fe90df..a3253d38f1ca 100755 --- a/src/modules/ui/components/shortcuts_help.js +++ b/src/modules/ui/components/shortcuts_help.js @@ -34,6 +34,11 @@ const modalStyles = { export const Content = () => (

Keyboard Shortcuts

+
+ ⌘ ⇧ P /   + ⌃ ⇧ P + Toggle SearchBox +
⌘ ⇧ F /   ⌃ ⇧ F diff --git a/src/modules/ui/containers/layout.js b/src/modules/ui/containers/layout.js index df8bcfd74551..b98213ec73dc 100755 --- a/src/modules/ui/containers/layout.js +++ b/src/modules/ui/containers/layout.js @@ -3,9 +3,14 @@ import { useDeps, composeAll } from 'mantra-core'; import pick from 'lodash.pick'; import reduxComposer from '../libs/redux_composer'; -export const composer = ({ shortcuts }) => { - const data = pick(shortcuts, 'showLeftPanel', 'showDownPanel', 'goFullScreen'); - return data; +export const composer = ({ shortcuts, api }, { actions }) => { + const actionMap = actions(); + const propShortCuts = pick(shortcuts, 'showLeftPanel', 'showDownPanel', 'goFullScreen', 'showSearchBox'); + return { + ...propShortCuts, + stories: api.stories, + actions: actionMap + }; }; export default composeAll( From a49259918f5cde1fe6386676ba0e5651551b653d Mon Sep 17 00:00:00 2001 From: Ritesh Kumar Date: Fri, 24 Jun 2016 22:07:36 +0530 Subject: [PATCH 3/6] fix linting errors --- src/libs/key_events.js | 2 +- .../shortcuts/configs/reducers/shortcuts.js | 2 +- src/modules/ui/components/layout/index.js | 34 +++++++++---------- src/modules/ui/containers/layout.js | 10 ++++-- 4 files changed, 27 insertions(+), 21 deletions(-) diff --git a/src/libs/key_events.js b/src/libs/key_events.js index bd3cafd5d21d..95ce146e9c8b 100755 --- a/src/libs/key_events.js +++ b/src/libs/key_events.js @@ -8,7 +8,7 @@ export const features = { ESCAPE: 5, NEXT_STORY: 6, PREV_STORY: 7, - SEARCH: 8 + SEARCH: 8, }; export function isModifierPressed(e) { diff --git a/src/modules/shortcuts/configs/reducers/shortcuts.js b/src/modules/shortcuts/configs/reducers/shortcuts.js index b710dabce62b..9febefeb1c67 100755 --- a/src/modules/shortcuts/configs/reducers/shortcuts.js +++ b/src/modules/shortcuts/configs/reducers/shortcuts.js @@ -5,7 +5,7 @@ const defaultState = { goFullScreen: false, showLeftPanel: true, showDownPanel: true, - showSearchBox: false + showSearchBox: false, }; export function keyEventToState(state, event) { diff --git a/src/modules/ui/components/layout/index.js b/src/modules/ui/components/layout/index.js index 0441fa5b66db..0d77533d8de6 100755 --- a/src/modules/ui/components/layout/index.js +++ b/src/modules/ui/components/layout/index.js @@ -55,7 +55,7 @@ const searchBoxStyle = { backgroundColor: '#FFF', top: '100px', left: '50%', - marginLeft: '-215px' + marginLeft: '-215px', }; const vsplit = ; @@ -70,13 +70,13 @@ const onDragEnd = function () { }; const formatStories = function (stories) { - const formattedStories=[]; + const formattedStories = []; let i = 0; stories.forEach((val) => { formattedStories.push({ type: 'kind', value: val.kind, - id: i++ + id: i++, }); val.stories.forEach((story) => { @@ -84,15 +84,15 @@ const formatStories = function (stories) { type: 'story', value: story, id: i++, - kind: val.kind - }) - }) + kind: val.kind, + }); + }); }); return formattedStories; }; -const suggestionTemplate = function(props, state, styles) { +const suggestionTemplate = function (props, state, styles) { return state.results.map((val, i) => { const style = state.selectedIndex === i ? styles.selectedResultStyle : styles.resultsStyle; return ( @@ -107,7 +107,7 @@ const suggestionTemplate = function(props, state, styles) { }; class Layout extends React.Component { - constructor (props){ + constructor(props) { super(props); this.onSelect = this.onSelect.bind(this); @@ -115,6 +115,13 @@ class Layout extends React.Component { this.fireOnKind = this.fireOnKind.bind(this); } + onSelect(selected) { + const { actions } = this.props; + if (selected.type === 'story') this.fireOnStory(selected.value, selected.kind); + else this.fireOnKind(selected.value); + actions.shortcuts.handleEvent(features.SEARCH); + } + fireOnKind(kind) { const onSelectStory = this.props.actions.api.selectStory; if (onSelectStory) onSelectStory(kind, null); @@ -125,13 +132,6 @@ class Layout extends React.Component { if (onSelectStory) onSelectStory(kind, story); } - onSelect(selected){ - const { actions } = this.props; - if(selected.type === 'story') this.fireOnStory(selected.value, selected.kind); - else this.fireOnKind(selected.value); - actions.shortcuts.handleEvent(features.SEARCH) - } - renderWithFullscreen() { return (
@@ -184,7 +184,7 @@ class Layout extends React.Component { onSelect={this.onSelect} keys={['value', 'type']} resultsTemplate={suggestionTemplate} - autoFocus={true} + autoFocus />}
@@ -210,7 +210,7 @@ Layout.propTypes = { downPanel: React.PropTypes.func.isRequired, stories: React.PropTypes.arrayOf(React.PropTypes.object).isRequired, showSearchBox: React.PropTypes.bool.isRequired, - actions: React.PropTypes.object.isRequired + actions: React.PropTypes.object.isRequired, }; export default Layout; diff --git a/src/modules/ui/containers/layout.js b/src/modules/ui/containers/layout.js index b98213ec73dc..50fb72cdc9b0 100755 --- a/src/modules/ui/containers/layout.js +++ b/src/modules/ui/containers/layout.js @@ -5,11 +5,17 @@ import reduxComposer from '../libs/redux_composer'; export const composer = ({ shortcuts, api }, { actions }) => { const actionMap = actions(); - const propShortCuts = pick(shortcuts, 'showLeftPanel', 'showDownPanel', 'goFullScreen', 'showSearchBox'); + const propShortCuts = pick( + shortcuts, + 'showLeftPanel', + 'showDownPanel', + 'goFullScreen', + 'showSearchBox' + ); return { ...propShortCuts, stories: api.stories, - actions: actionMap + actions: actionMap, }; }; From 1774217323da1e1fa003cc22d174f78219a5fd56 Mon Sep 17 00:00:00 2001 From: Ritesh Kumar Date: Sat, 25 Jun 2016 12:33:58 +0530 Subject: [PATCH 4/6] moved searchbox into a separate component --- src/modules/ui/components/layout/index.js | 86 -------------------- src/modules/ui/components/search_box.js | 97 +++++++++++++++++++++++ src/modules/ui/containers/search_box.js | 18 +++++ src/modules/ui/routes.js | 3 + 4 files changed, 118 insertions(+), 86 deletions(-) create mode 100644 src/modules/ui/components/search_box.js create mode 100644 src/modules/ui/containers/search_box.js diff --git a/src/modules/ui/components/layout/index.js b/src/modules/ui/components/layout/index.js index 0d77533d8de6..9b8d6cbde90f 100755 --- a/src/modules/ui/components/layout/index.js +++ b/src/modules/ui/components/layout/index.js @@ -3,9 +3,6 @@ import React from 'react'; import VSplit from './vsplit'; import HSplit from './hsplit'; import SplitPane from '@kadira/react-split-pane'; -import FuzzySearch from 'react-fuzzy'; - -import { features } from '../../../../libs/key_events'; const rootStyle = { height: '100vh', @@ -50,14 +47,6 @@ const previewStyle = { borderRadius: 4, }; -const searchBoxStyle = { - position: 'absolute', - backgroundColor: '#FFF', - top: '100px', - left: '50%', - marginLeft: '-215px', -}; - const vsplit = ; const hsplit = ; @@ -69,69 +58,7 @@ const onDragEnd = function () { document.body.classList.remove('dragging'); }; -const formatStories = function (stories) { - const formattedStories = []; - let i = 0; - stories.forEach((val) => { - formattedStories.push({ - type: 'kind', - value: val.kind, - id: i++, - }); - - val.stories.forEach((story) => { - formattedStories.push({ - type: 'story', - value: story, - id: i++, - kind: val.kind, - }); - }); - }); - - return formattedStories; -}; - -const suggestionTemplate = function (props, state, styles) { - return state.results.map((val, i) => { - const style = state.selectedIndex === i ? styles.selectedResultStyle : styles.resultsStyle; - return ( -
- {val.value} - - {val.type === 'story' ? `in ${val.kind}` : 'Kind'} - -
- ); - }); -}; - class Layout extends React.Component { - constructor(props) { - super(props); - - this.onSelect = this.onSelect.bind(this); - this.fireOnStory = this.fireOnStory.bind(this); - this.fireOnKind = this.fireOnKind.bind(this); - } - - onSelect(selected) { - const { actions } = this.props; - if (selected.type === 'story') this.fireOnStory(selected.value, selected.kind); - else this.fireOnKind(selected.value); - actions.shortcuts.handleEvent(features.SEARCH); - } - - fireOnKind(kind) { - const onSelectStory = this.props.actions.api.selectStory; - if (onSelectStory) onSelectStory(kind, null); - } - - fireOnStory(story, kind) { - const onSelectStory = this.props.actions.api.selectStory; - if (onSelectStory) onSelectStory(kind, story); - } - renderWithFullscreen() { return (
@@ -177,16 +104,6 @@ class Layout extends React.Component {
- -
- {props.showSearchBox && } -
); } @@ -208,9 +125,6 @@ Layout.propTypes = { leftPanel: React.PropTypes.func.isRequired, preview: React.PropTypes.func.isRequired, downPanel: React.PropTypes.func.isRequired, - stories: React.PropTypes.arrayOf(React.PropTypes.object).isRequired, - showSearchBox: React.PropTypes.bool.isRequired, - actions: React.PropTypes.object.isRequired, }; export default Layout; diff --git a/src/modules/ui/components/search_box.js b/src/modules/ui/components/search_box.js new file mode 100644 index 000000000000..28c37382619d --- /dev/null +++ b/src/modules/ui/components/search_box.js @@ -0,0 +1,97 @@ +import React from 'react'; +import FuzzySearch from 'react-fuzzy'; + +import { features } from '../../../libs/key_events'; + +const searchBoxStyle = { + position: 'absolute', + backgroundColor: '#FFF', + top: '100px', + left: '50%', + marginLeft: '-215px', +}; + +const formatStories = function (stories) { + const formattedStories = []; + let i = 0; + stories.forEach((val) => { + formattedStories.push({ + type: 'kind', + value: val.kind, + id: i++, + }); + + val.stories.forEach((story) => { + formattedStories.push({ + type: 'story', + value: story, + id: i++, + kind: val.kind, + }); + }); + }); + + return formattedStories; +}; + +const suggestionTemplate = function (props, state, styles) { + return state.results.map((val, i) => { + const style = state.selectedIndex === i ? styles.selectedResultStyle : styles.resultsStyle; + return ( +
+ {val.value} + + {val.type === 'story' ? `in ${val.kind}` : 'Kind'} + +
+ ); + }); +}; + +export default class SearchBox extends React.Component { + constructor(props) { + super(props); + + this.onSelect = this.onSelect.bind(this); + this.fireOnStory = this.fireOnStory.bind(this); + this.fireOnKind = this.fireOnKind.bind(this); + } + + onSelect(selected) { + const { handleEvent } = this.props; + if (selected.type === 'story') this.fireOnStory(selected.value, selected.kind); + else this.fireOnKind(selected.value); + handleEvent(features.SEARCH); + } + + fireOnKind(kind) { + const { onSelectStory } = this.props; + if (onSelectStory) onSelectStory(kind, null); + } + + fireOnStory(story, kind) { + const { onSelectStory } = this.props; + if (onSelectStory) onSelectStory(kind, story); + } + + render() { + return ( +
+ {this.props.showSearchBox && } +
+ ); + } +} + +SearchBox.propTypes = { + showSearchBox: React.PropTypes.bool.isRequired, + stories: React.PropTypes.arrayOf(React.PropTypes.object).isRequired, + onSelectStory: React.PropTypes.func.isRequired, + handleEvent: React.PropTypes.func.isRequired, +}; diff --git a/src/modules/ui/containers/search_box.js b/src/modules/ui/containers/search_box.js new file mode 100644 index 000000000000..6522602e6131 --- /dev/null +++ b/src/modules/ui/containers/search_box.js @@ -0,0 +1,18 @@ +import SearchBox from '../components/search_box'; +import { useDeps, composeAll } from 'mantra-core'; +import reduxComposer from '../libs/redux_composer'; + +export const composer = ({ api, shortcuts }, { actions }) => { + const actionMap = actions(); + return { + showSearchBox: shortcuts.showSearchBox, + stories: api.stories, + onSelectStory: actionMap.api.selectStory, + handleEvent: actionMap.shortcuts.handleEvent, + }; +}; + +export default composeAll( + reduxComposer(composer), + useDeps() +)(SearchBox); diff --git a/src/modules/ui/routes.js b/src/modules/ui/routes.js index 369301599769..894d55ae5fc0 100755 --- a/src/modules/ui/routes.js +++ b/src/modules/ui/routes.js @@ -4,10 +4,12 @@ import Layout from './containers/layout'; import LeftPanel from './containers/left_panel'; import ActionLogger from './containers/action_logger'; import ShortcutsHelp from './containers/shortcuts_help'; +import SearchBox from './containers/search_box'; export default function (injectDeps, { reduxStore, provider, domNode }) { const InjectedLayout = injectDeps(Layout); const InjectedShortcutsHelp = injectDeps(ShortcutsHelp); + const InjectedSearchBox = injectDeps(SearchBox); // generate preview const Preview = () => { @@ -25,6 +27,7 @@ export default function (injectDeps, { reduxStore, provider, domNode }) { downPanel={() => ()} /> + ); ReactDOM.render(root, domNode); From 7daf2b126b79498c33262d12d8d4718feca70133 Mon Sep 17 00:00:00 2001 From: Ritesh Kumar Date: Sat, 25 Jun 2016 12:59:28 +0530 Subject: [PATCH 5/6] removed unused code --- src/modules/ui/containers/layout.js | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/src/modules/ui/containers/layout.js b/src/modules/ui/containers/layout.js index 50fb72cdc9b0..fc6e44c1c301 100755 --- a/src/modules/ui/containers/layout.js +++ b/src/modules/ui/containers/layout.js @@ -3,20 +3,13 @@ import { useDeps, composeAll } from 'mantra-core'; import pick from 'lodash.pick'; import reduxComposer from '../libs/redux_composer'; -export const composer = ({ shortcuts, api }, { actions }) => { - const actionMap = actions(); - const propShortCuts = pick( +export const composer = ({ shortcuts }) => { + return pick( shortcuts, 'showLeftPanel', 'showDownPanel', - 'goFullScreen', - 'showSearchBox' + 'goFullScreen' ); - return { - ...propShortCuts, - stories: api.stories, - actions: actionMap, - }; }; export default composeAll( From 28487b64b42a2b34c48cd910296be10dedf9c54d Mon Sep 17 00:00:00 2001 From: Ritesh Kumar Date: Sat, 25 Jun 2016 15:19:31 +0530 Subject: [PATCH 6/6] fixed commit comments --- package.json | 4 +--- src/index.js | 7 +------ src/modules/ui/components/search_box.js | 2 ++ 3 files changed, 4 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index a8552e36f941..d89eefc14c83 100644 --- a/package.json +++ b/package.json @@ -47,16 +47,14 @@ "dependencies": { "@kadira/react-split-pane": "^1.4.0", "babel-runtime": "^6.5.0", - "classnames": "^2.2.5", "deep-equal": "^1.0.1", - "fuse.js": "^2.2.0", "fuzzysearch": "^1.0.3", "json-stringify-safe": "^5.0.1", "keycode": "^2.1.1", "lodash.pick": "^4.2.1", "mantra-core": "^1.6.1", "qs": "^6.2.0", - "react-fuzzy": "^0.2.1", + "react-fuzzy": "^0.2.2", "react-modal": "^1.2.1", "redux": "^3.5.2" }, diff --git a/src/index.js b/src/index.js index 22f3f6cf0dfd..cee0d7b92628 100644 --- a/src/index.js +++ b/src/index.js @@ -27,12 +27,7 @@ export default function (domNode, provider) { ...uiModule.reducers, }); - const reduxStore = createStore(reducer, ( - typeof window === 'object' && - typeof window.devToolsExtension !== 'undefined' && - window.devToolsExtension && - window.devToolsExtension() - )); + const reduxStore = createStore(reducer); const context = buildContext(reduxStore, domNode, provider); const app = createApp(context); diff --git a/src/modules/ui/components/search_box.js b/src/modules/ui/components/search_box.js index 28c37382619d..14f2c98475ed 100644 --- a/src/modules/ui/components/search_box.js +++ b/src/modules/ui/components/search_box.js @@ -2,6 +2,7 @@ import React from 'react'; import FuzzySearch from 'react-fuzzy'; import { features } from '../../../libs/key_events'; +import { baseFonts } from './theme'; const searchBoxStyle = { position: 'absolute', @@ -9,6 +10,7 @@ const searchBoxStyle = { top: '100px', left: '50%', marginLeft: '-215px', + ...baseFonts }; const formatStories = function (stories) {