Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

reach-router support #26

Open
travi opened this issue Aug 7, 2018 · 6 comments
Open

reach-router support #26

travi opened this issue Aug 7, 2018 · 6 comments

Comments

@travi
Copy link

travi commented Aug 7, 2018

Feature Request:

Are you using storybook-router with a react based project or a vue one?

React (Gatsby)

Context for the request

I've been using storybook-router with components that use gatsby-link because it previously wrapped react-router's Link component.

However, that switched to using Reach Router. I haven't used react router yet to give much insight into what might be different, but it would be great to be able to continue using storybook-router the same way.

thanks for continued efforts with this package. it has been a great addition to storybook!

@gvaldambrini
Copy link
Owner

Hi @travi,
thank you for the suggestion.
I'll have a look but unfortunately I will not be able before September.

@travi
Copy link
Author

travi commented Aug 14, 2018

not a problem. mostly wanted to get it on your radar for when it makes sense

@JelaMiraj
Copy link

Would this thread be helpful? https://spectrum.chat/reach/questions/using-reach-router-in-storybook~d6ed6f77-dad7-4c5a-8ad3-c7784a594d7b?authed=true

In the thread @mikebarkmin suggested to @theinterned to use, for inspiration, his (MIT licensed) @reach/router proxy for react-cosmos as seen at this mirror: https://github.com/openpatch/ui-core/blob/master/src/proxies/ReachRouterProxy.js

@JelaMiraj
Copy link

Btw, sorry in advance if I don't notice my notification of this thread being updated... Guess I need to change the settings on a mobile app to make important GitHub notifications more obtrusive...

@jonknapp
Copy link

jonknapp commented Apr 7, 2019

I was able to add memory source support in Reach Router and Storyboard with the following decorator:

import {
  LocationProvider,
  createMemorySource,
  createHistory
} from "@reach/router";
import React from "react";
import { makeDecorator } from "@storybook/addons";

export const withRouter = makeDecorator({
  name: "router",
  parameterName: "router",
  skipIfNoParametersOrOptions: true,

  wrapper: (getStory, context, { parameters = "/" }) => {
    const source = createMemorySource(parameters);
    const history = createHistory(source);
    history.listen(() => console.log('message arrived at router', source.location));
    return <LocationProvider history={history}>{getStory(context)}</LocationProvider>;
  }
});

which I then include in all stories (though you don't have to) with:

import { withRouter } from "./addons/router";

addDecorator(withRouter);

In a story that I want to add Reach Router component rendering, I add a router param with the initial path:

storiesOf(storyName(base))
  .add("default app state", () => {
    return <App />
  }, { router: "/" });

The url of your app won't update as you navigate around, but it does tie into Reach Router in what looks like the desired approach. This does not attempt to tie into Storybook's <Link>s.

@jonknapp
Copy link

jonknapp commented Apr 18, 2019

I ran into a snag having the router work properly after changing any context (ex: changing "knob" value) and the issue seemed to stem from calling createHistory multiple times. If I kept a reference to the first history object I could make navigate calls, but otherwise they would trigger my listener but do nothing in the router.

Here's my current iteration of the code that memoizes the history object, but resets the router location when a story with the router parameter is encountered:

import {
  LocationProvider,
  createMemorySource,
  createHistory as createRouterHistory
} from "@reach/router";
import React from "react";
import { makeDecorator } from "@storybook/addons";

let firstHistoryObject = null;
function createHistory(initialPath) {
  if (firstHistoryObject) {
    firstHistoryObject.navigate(initialPath);
    return firstHistoryObject;
  }

  const source = createMemorySource(initialPath);
  firstHistoryObject = createRouterHistory(source);
  firstHistoryObject.listen(() =>
    console.log("message arrived at router", source.location)
  );
  return firstHistoryObject;
}

export const withRouter = makeDecorator({
  name: "router",
  parameterName: "router",
  skipIfNoParametersOrOptions: true,

  wrapper: (getStory, context, { parameters = "/" }) => {
    return (
      <LocationProvider history={createHistory(parameters)}>
        {getStory(context)}
      </LocationProvider>
    );
  }
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants