From 91b20fd12b97e38bb690d7aca527f019674ee18c Mon Sep 17 00:00:00 2001 From: Heather Roberts Date: Wed, 24 Oct 2018 17:15:18 +1100 Subject: [PATCH 1/4] Fix issues with notes addon loading --- addons/notes/src/Panel.js | 9 +-------- addons/notes/src/register.js | 7 ------- lib/core/src/client/manager/provider.js | 3 --- 3 files changed, 1 insertion(+), 18 deletions(-) diff --git a/addons/notes/src/Panel.js b/addons/notes/src/Panel.js index 2d2974f9250..e6d21e21c07 100644 --- a/addons/notes/src/Panel.js +++ b/addons/notes/src/Panel.js @@ -23,15 +23,8 @@ export default class NotesPanel extends React.Component { componentDidMount() { this.mounted = true; - const { channel, api } = this.props; + const { channel } = this.props; - // Clear the current notes on every story change. - this.stopListeningOnStory = api.onStory(() => { - const { text } = this.state; - if (this.mounted && text !== '') { - this.onAddNotes(''); - } - }); channel.on(EVENT_ID, this.onAddNotes); channel.on(Events.SET_CURRENT_STORY, this.clearNotes); } diff --git a/addons/notes/src/register.js b/addons/notes/src/register.js index dda2d9224c6..e15b7ca4ae8 100644 --- a/addons/notes/src/register.js +++ b/addons/notes/src/register.js @@ -15,11 +15,4 @@ addons.register(ADDON_ID, api => { route: '/info/', render, }); - - addons.add(PANEL_ID, { - type: types.PANEL, - title, - route: '/info/', - render, - }); }); diff --git a/lib/core/src/client/manager/provider.js b/lib/core/src/client/manager/provider.js index a8eff13b6f3..56840fb09d0 100644 --- a/lib/core/src/client/manager/provider.js +++ b/lib/core/src/client/manager/provider.js @@ -17,9 +17,6 @@ export default class ReactProvider extends Provider { } handleAPI(api) { - api.onStory((kind, story) => { - this.channel.emit(Events.SET_CURRENT_STORY, { kind, story }); - }); this.channel.on(Events.SET_STORIES, data => { api.setStories(data.stories); }); From f905a5b534b9212cc18bfe71808422e664471b26 Mon Sep 17 00:00:00 2001 From: Heather Roberts Date: Wed, 24 Oct 2018 17:25:50 +1100 Subject: [PATCH 2/4] Set selected state of tab according to route --- lib/components/src/preview/preview.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/components/src/preview/preview.js b/lib/components/src/preview/preview.js index 8cc620ff75c..0d40dc5648d 100644 --- a/lib/components/src/preview/preview.js +++ b/lib/components/src/preview/preview.js @@ -93,7 +93,7 @@ class Preview extends Component { key={t.key || index} to={location.replace(/^\/(components|info)\//, t.route)} > - {t.title} + {t.title} ))} , @@ -108,7 +108,7 @@ class Preview extends Component { this.setState({ grid: !grid })}> , - ...toolList.map((t, index) => {t.render()}), + ...toolList.map((t, index) => {t.render()}), ]} right={[ , From 2fa89120e4b46e961490ed941c0bc76a07ee0bde Mon Sep 17 00:00:00 2001 From: Alexandre BODIN Date: Mon, 22 Oct 2018 09:25:49 +0200 Subject: [PATCH 3/4] Remove mobx in favor of custom store with React context --- lib/ui/package.json | 2 - lib/ui/src/app.js | 51 +- lib/ui/src/containers/nav.js | 42 +- lib/ui/src/containers/panel.js | 35 +- lib/ui/src/containers/preview.js | 34 +- lib/ui/src/containers/themeProvider.js | 17 +- lib/ui/src/core/context.js | 38 + lib/ui/src/core/manager.js | 211 ++ lib/ui/src/core/panels.js | 41 + lib/ui/src/core/stories.js | 177 ++ lib/ui/src/index.js | 22 +- lib/ui/src/init-key-handler.js | 74 +- lib/ui/src/init-provider-api.js | 49 +- lib/ui/src/onload-history.js | 12 +- lib/ui/src/store.js | 287 --- lib/ui/src/stores/index.js | 1 - lib/ui/src/stores/ui.js | 41 - lib/ui/src/stores/utils.js | 10 - yarn.lock | 3104 +----------------------- 19 files changed, 640 insertions(+), 3608 deletions(-) create mode 100644 lib/ui/src/core/context.js create mode 100644 lib/ui/src/core/manager.js create mode 100644 lib/ui/src/core/panels.js create mode 100644 lib/ui/src/core/stories.js delete mode 100644 lib/ui/src/store.js delete mode 100644 lib/ui/src/stores/index.js delete mode 100644 lib/ui/src/stores/ui.js delete mode 100644 lib/ui/src/stores/utils.js diff --git a/lib/ui/package.json b/lib/ui/package.json index 2dd36cbc09a..ef0b69108c6 100644 --- a/lib/ui/package.json +++ b/lib/ui/package.json @@ -46,8 +46,6 @@ "lodash.sortby": "^4.7.0", "lodash.throttle": "^4.1.1", "memoizerific": "^1.11.3", - "mobx": "^5.0.3", - "mobx-react": "^5.2.3", "prop-types": "^15.6.2", "qs": "^6.5.2", "react-draggable": "^3.0.5", diff --git a/lib/ui/src/app.js b/lib/ui/src/app.js index 64471f37673..575bd5141ae 100644 --- a/lib/ui/src/app.js +++ b/lib/ui/src/app.js @@ -1,13 +1,13 @@ import React from 'react'; import styled from '@emotion/styled'; import ResizeDetector from 'react-resize-detector'; -import { inject, observer } from 'mobx-react'; import { Mobile } from './components/layout/mobile'; import { Desktop } from './components/layout/desktop'; import Nav from './containers/nav'; import Preview from './containers/preview'; import Panel from './containers/panel'; +import { Consumer } from './core/context'; const Reset = styled.div(({ theme }) => ({ fontFamily: theme.mainTextFace, @@ -26,28 +26,31 @@ const Reset = styled.div(({ theme }) => ({ overflow: 'hidden', })); -const App = ({ uiStore }) => { - const props = { - Nav, - Preview, - Panel, - options: { - ...uiStore, - }, - }; +const App = () => ( + + {({ state }) => { + const props = { + Nav, + Preview, + Panel, + options: { + ...state.ui, + }, + }; - return ( - - - {width => { - if (width === 0) return
; - if (width < 600) return ; - return ; - }} - - - ); -}; + return ( + + + {width => { + if (width === 0) return
; + if (width < 600) return ; + return ; + }} + + + ); + }} + +); -// TODO: use a uiStore and observer in the layout -export default inject('uiStore')(observer(App)); +export default App; diff --git a/lib/ui/src/containers/nav.js b/lib/ui/src/containers/nav.js index 990af7ff5e6..f371675afa5 100755 --- a/lib/ui/src/containers/nav.js +++ b/lib/ui/src/containers/nav.js @@ -1,56 +1,58 @@ import React from 'react'; -import { inject } from 'mobx-react'; import { Badge } from '@storybook/components'; import { controlOrMetaKey, optionOrAlt } from '../../../components/src/treeview/utils'; import Nav from '../components/nav/nav'; -export const mapper = ({ store, uiStore }) => { +import { Consumer } from '../core/context'; + +export const mapper = ({ state, manager }) => { const { uiOptions: { name, url }, notifications, - } = store; + ui: { isFullscreen, showPanel, showNav, panelPosition }, + } = state; return { title: name, url, notifications, - stories: store.storiesHash, + stories: state.storiesHash, menu: [ { id: 'about', title: 'About your storybook', - action: () => store.navigate('/settings/about'), + action: () => manager.navigate('/settings/about'), detail: Update, icon: '', }, { id: 'F', title: 'Go Fullscreen', - action: () => uiStore.toggleFullscreen(), + action: () => manager.toggleFullscreen(), detail: 'F', - icon: uiStore.isFullscreen ? 'check' : '', + icon: isFullscreen ? 'check' : '', }, { id: 'S', title: 'Toggle Panel', - action: () => uiStore.togglePanel(), + action: () => manager.togglePanel(), detail: 'D', - icon: uiStore.showPanel ? 'check' : '', + icon: showPanel ? 'check' : '', }, { id: 'D', title: 'Toggle Panel Position', - action: () => uiStore.togglePanelPosition(), + action: () => manager.togglePanelPosition(), detail: 'G', - icon: uiStore.panelPosition === 'bottom' ? 'bottombar' : 'sidebaralt', + icon: panelPosition === 'bottom' ? 'bottombar' : 'sidebaralt', }, { id: 'A', title: 'Toggle Navigation', - action: () => uiStore.toggleNav(), + action: () => manager.toggleNav(), detail: 'S', - icon: uiStore.showNav ? 'check' : '', + icon: showNav ? 'check' : '', }, { id: '/', @@ -62,35 +64,35 @@ export const mapper = ({ store, uiStore }) => { { id: 'up', title: 'Previous component', - action: () => store.jumpToComponent(-1), + action: () => manager.jumpToComponent(-1), detail: `${optionOrAlt()} ↑`, icon: '', }, { id: 'down', title: 'Next component', - action: () => store.jumpToComponent(1), + action: () => manager.jumpToComponent(1), detail: `${optionOrAlt()} ↓`, icon: '', }, { id: 'prev', title: 'Previous story', - action: () => store.jumpToStory(-1), + action: () => manager.jumpToStory(-1), detail: `${optionOrAlt()} ←`, icon: '', }, { id: 'next', title: 'Next story', - action: () => store.jumpToStory(1), + action: () => manager.jumpToStory(1), detail: `${optionOrAlt()} →`, icon: '', }, { id: 'shortcuts', title: 'Customize Storybook Hotkeys', - action: () => store.navigate('/settings/shortcuts'), + action: () => manager.navigate('/settings/shortcuts'), detail: `⇧ ${controlOrMetaKey()} ,`, icon: 'wrench', }, @@ -98,4 +100,6 @@ export const mapper = ({ store, uiStore }) => { }; }; -export default inject(({ store, uiStore }) => mapper({ store, uiStore }))(Nav); +export default props => ( + {({ state, manager }) =>