gvaldambrini / storybook-router Goto Github PK

Issue:

Which version are you using?

• [email protected]
• [email protected]

Please describe the problem:

So I am using <Redirect/> component in of our components, and we want to test out if the redirection works correctly in Storybook.

Is this even possible using storybook-router?

Please explain how to reproduce the issue or (better) provide an example to do it.

Here is our main app

<BrowserRouter>
                <Switch>
                    <Route path="/" component={RegistrationContainer}/>
                    <Route path="/entitlements" component={FormEntitlementsContainer}/>
                </Switch>
</BrowserRouter>

And we are rendering a Redirect component in one of our forms:

if (true === this.state.submitting) {
            return <Redirect to="/entitlements"/>
 }

I can see rendering happened correctly, but the page does not redirect in Storybook.

I have a react-redux application which on successful login redirects to homepage.This is done using react-router's browserHistory.push("/") .Now I am trying to implement this in react storybook using Story router.
This browserHistory.push() is placed inside action creator. How can I do this redirection in Storybook router?Currently on successful Login state changes but page doesn't get redirected into homepage.
I use react-router V3.

Issue:

Which version are you using?

"storybook-vue-router": "^1.0.7",
"@storybook/vue": "^5.3.18",
"vue": "^2.6.11",
"vue-router": "^3.1.5"

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

Vue
I'm building a stand-alone component library, but the components should be able to handle vue-router links

Please describe the problem:

On the storybook page, I get the error: "Cannot read property 'resolve' of undefined"

Please explain how to reproduce the issue or (better) provide an example to do it.

I'm declaring my story like this:

storiesOf('LinkingComponent', module) .addDecorator(StoryRouter()) .add('route', () => ({ components: { LinkingComponent }, template:

It's possible I'm declaring it incorrectly, but it's not clear from the documentation how else to do this.

Issue:

Which version are you using?

"storybook-react-router": "^1.0.8",

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

react

Please describe the problem:

It shows the following error when I use useRouteMatch hook:

TypeError: Cannot read property 'match' of undefined
    at useRouteMatch (http://localhost:6007/vendors~main.44791deccf2e14082e5e.bundle.js:138564:78)
.
.
.
    at StoryRouter (http://localhost:6007/vendors~main.44791deccf2e14082e5e.bundle.js:145079:7)

Couldn't get unoptimized version because of this issue on storybook, storybookjs/storybook#8062

Please explain how to reproduce the issue or (better) provide an example to do it.

const CompanyDetailsPage = () => {
  const { path, params } = useRouteMatch();
  const to = pathToRegexp.compile(path)({
    ...params,
    someparameter: 'someparameter',
  }),

  return (<Link to={to} >Link</Link>)
};

should raise mentioned error.

Just found this library today and it's really useful for what I am currently trying to do so thanks for that :)

Anyway, I noticed that the default action handling onHistoryChanged events is to call the storybook action addon with location.pathname:

action(historyAction ? historyAction : location.action)(path)
(and same for the user specified actions you can pass in as params).

I am playing around a bit with using the search part of a location and it would be great if that would be passed to the action in addition to the path.

Happy to send a pull request if you want this as part of the library.

Issue:

Which version are you using?

1.0.7

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

Vue

Please describe the problem:

I have tried to set up the above plugin with the new CSF syntax, and after debugging, i noticed that the plugin is initialised, but not triggered.

Translating to a storyOf syntax works fine.

Running the below story will trigger an error because the router is not defined.

I have tried the following different way of calling the decorator:
decorators: [StoryRouter], decorators: [StoryRouter()],

Please explain how to reproduce the issue or (better) provide an example to do it.

import StoryRouter from 'storybook-vue-router';

export default {
  title: 'PopupMenu',
};
export const defaultPopupMenu = () => ({
  decorators: [StoryRouter],
  template: '<router-link to="/" />',
});

Issue:
Storybook-router only works when components are importing <Route>, <Link>, etc. from react-router, but fail when importing from react-router-dom.

I'm guessing this is the same problem in #36

Which version are you using?

    "@storybook/react": "^5.0.10",
    "react-router": "^5.0.0",
    "react-router-dom": "^5.0.0",
    "storybook-react-router": "^1.0.5",

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

React

Please describe the problem:

Getting invariant violation "You should not use <Route> outside a <Router>" (or "...<Link> outside <Router>").

Please explain how to reproduce the issue or (better) provide an example to do it.

I made a simple test story and component, and when the component is importing Route from react-router-dom, I get the invariant violation. If I import from react-router, then it is ok.

import React from 'react';
import { Route } from 'react-router';
// import { Route } from 'react-router-dom'; <--- This is how it should work (?)

const TestRouteComponent = ({ val }) => (
  <div>
    <Route
      path="/:path?"
      render={({ match }) => (
        <div>
          <div style={{ backgroundColor: '#fdd' }}>
            Prop:
            {val}
          </div>
          <div style={{ backgroundColor: '#ddf' }}>
            Route params:
            {JSON.stringify(match.params)}
          </div>
        </div>
      )}
    />
  </div>
);

export default TestRouteComponent;

import React from 'react';
import StoryRouter from 'storybook-react-router';
import { storiesOf } from '@storybook/react';
import TestRouteComponent from './TestRouteComponent';

const storyRouterConfig = [
  {},
  { initialEntries: ['/foo'] },
];

const getRouterDecorator = () => StoryRouter(...storyRouterConfig);

storiesOf('Test', module)
  .addParameters({
    info: 'some info',
  })
  .addDecorator(getRouterDecorator())
  .add('with val = foo', () => (
    <TestRouteComponent val="val" />
  ));

Issue: All the examples show the old syntax. How do you use this package with the new args based syntax?

Which version are you using?

1.0.7

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

vue

Please describe the problem:

Most of the examples show the old syntax for storybook. I tried to use the args based syntax, but am getting lots of errors.

This is what i tried to do:

import Header from '@/components/Header.vue'
import { storiesOf } from '@storybook/vue';
import StoryRouter from 'storybook-vue-router';

const Template = (args) => ({
    components: { Header },
    template: '<Header />',
})

const Default = Template.bind({});

storiesOf('Header',module)
    .addDecorator(StoryRouter(
        {},
        {
            initialEntry: '/',
            routes:[

            ]
        }
    ))
    .add('Default',() => Default);

I'm using Vue, and whenever I click on a link everything behaves normally but I get the following errors in the console:

• $attrs is readonly
• $listeners is readonly

Any ideas?

Right now when installing this addon with storybook 5 you get this warning in yarn:

warning " > [email protected]" has incorrect peer dependency "@storybook/addon-actions@^4.0.0".
warning " > [email protected]" has unmet peer dependency "@storybook/addons@^4.0.0".

It seems like the addon works fine in SB5 so should be fine to bump the dependency to ^4.0.0||^5.0.0.

Issue:

The decorator currently supports react-router v4 / v5 and vue-router v2 / v3.

It seems currently not supporting vue-router v4

Which version are you using?

  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0"
  },

  "devDependencies": {
   ...
    "@storybook/vue3": "^6.3.0-alpha.43",
    "storybook-vue-router": "^1.0.7",
  },

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

Yes

Please describe the problem:

storybook_vue_router__WEBPACK_IMPORTED_MODULE_2___default(...) is not a function

Please explain how to reproduce the issue or (better) provide an example to do it.

1.Init storybook for vue 3 with CLI

npx sb@next init

2.Write a story for a router component

import MyComponent from './MyComponent.vue';
import StoryRouter from 'storybook-vue-router';

export default {
  title: 'Example/Folder',
  component: MyComponent,
};

export const MyComponent = () => ({
  components: { MyComponent },
  decorators:  [ StoryRouter() ],
  template: '<MyComponent />',
});

3.yarn storybook

its not obvious to me what changed with the build, but the latest build appears to no longer transpile to the degree that it used to. it now leaves es module import syntax in the bundle that is set to main in the package.json.

it probably does make sense to include a version that uses es modules like this, but it would need to be defined as module in the package.json rather than main in order for webpack to handle it correctly.

i use rollup in my projects to easily produce a common-js bundle and an es-module bundle that i define as main and module, respectively.

Issue:

The declaration file is missing to work properly with typescript. (= typescript support ?)

Which version are you using?

v1.0.7

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

vue

Please describe the problem:

I have the following error on serve:

Could not find a declaration file for module 'storybook-vue-router'. 'd:/path/node_modules/storybook-vue-router/dist/vue.js' implicitly has an 'any' type.

Please explain how to reproduce the issue or (better) provide an example to do it.

a simple import and use decorator trigger this error

// myComponent.stories.ts
import StoryRouter from "storybook-vue-router";

export default {
  title: "aStory/Title",
  component: MyComponent,
  decorators: [StoryRouter()]
};

Issue:

Which version are you using?

^0.3.2

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

Vue

Please describe the problem:

A components beforeRouteEnter guard doesn't seem to be called before the component is created but it should.

Please explain how to reproduce the issue or (better) provide an example to do it.

Add a beforeRouteEnter method with a console.log to a component. Navigate to the component. See that nothing is logged to the console.

Side suggestion: Update to vue-router v3.

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!

Issue:

Which version are you using?

1.0.8

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

react

Please describe the problem:

There is a problem with peer dependency since I'm using @storybook/addon-actions@"^6.5.16"

Found: @storybook/[email protected]
node_modules/@storybook/addon-actions
dev @storybook/addon-actions@"^6.5.16" from the root project

Could not resolve dependency:
peer @storybook/addon-actions@"^4.0.0||^5.0.0||5.2.0-beta.13" from [email protected]
node_modules/storybook-react-router
dev storybook-react-router@"^1.0.8" from the root project

Please explain how to reproduce the issue or (better) provide an example to do it.

Use storybook-router 1.0.8 in a project depending on @storybook/addon-actions version > 6

This plugin should use react-router-dom instead of react-router.

This is a pretty minor usability bug, but I notice that clicking any two links that resolve to the same path (or clicking the same link twice) will only log the event once. I haven't looked to see if this is intentional in the code, but it does make testing a little harder in some cases (e.g. one component with N links to the same place).

https://github.com/gvaldambrini/storybook-router/blob/master/package.json#L28

Hey any reason why you've locked the version of @storybook/react to exactly 3.0.0?

Any updates on our part and this addon will be duplicating the @storybook/react package.. Which is a bad idea 😯

Issue:

Which version are you using?

CNA

  "devDependencies": {
    "@storybook/addon-actions": "^3.4.10",
    "@storybook/addon-info": "^3.4.10",
    "@storybook/addon-knobs": "^3.4.10",
    "@storybook/addon-links": "^3.4.10",
    "@storybook/react": "^3.4.10",
    "apollo-cache-inmemory": "^1.3.0-beta.6",
    "apollo-client": "^2.3.7",
    "apollo-link": "^1.2.2",
    "apollo-link-http": "^1.5.4",
    "apollo-storybook-react": "^0.1.5",
    "babel-eslint": "^8.2.6",
    "babel-preset-env": "^1.7.0",
    "babel-register": "^6.26.0",
    "color": "^3.0.0",
    "cross-fetch": "^2.2.1",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "17.0.0",
    "eslint-config-prettier": "^2.9.0",
    "eslint-plugin-import": "^2.12.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-prettier": "^2.6.2",
    "eslint-plugin-react": "^7.9.1",
    "graphql": "^0.13.2",
    "graphql-tag": "^2.9.2",
    "luxon": "^1.3.0",
    "postcss-syntax": "^0.3.1",
    "query-string": "5",
    "react-app-rewire-styled-components": "^3.0.2",
    "react-app-rewired": "^1.5.2",
    "react-slick": "^0.23.1",
    "react-styled-flexboxgrid": "^2.4.0",
    "react-window-size": "^1.2.0",
    "recompose": "^0.28.0",
    "storybook-react-router": "^1.0.1",
    "styled-components": "^3.3.3",
    "styled-normalize": "^4.0.0",
    "stylelint": "^9.3.0",
    "stylelint-config-recommended": "^2.1.0",
    "stylelint-config-styled-components": "^0.1.1",
    "stylelint-processor-styled-components": "^1.3.1"
  },

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

react

Please describe the problem:

I am using the info addon to see prop information etc.

using the storybook-react decorator and I unfortunately see the router props instead of the underlying component's props:

import React from 'react';
import StoryRouter from 'storybook-react-router';
import { storiesOf } from '@storybook/react';

import HealthGauge from './index';

import ChromeLayout from 'components/common/ChromeLayout';

storiesOf('HealthGauge', module)
  .addDecorator(StoryRouter())
  .add('default', () => (
    <ChromeLayout>
      <HealthGauge />
    </ChromeLayout>
  ));

should be something like this:

but I see this:

Please explain how to reproduce the issue or (better) provide an example to do it.

config

import React from 'react';
import { configure, addDecorator } from '@storybook/react';
import { ThemeProvider } from 'styled-components';
import theme from '../src/lib/theme';
import { withInfo } from '@storybook/addon-info';
import { withKnobs } from '@storybook/addon-knobs';
import StoryRouter from 'storybook-react-router';

const req = require.context('../src', true, /stories\.(js)$/);

function loadStories() {
  req.keys().forEach(req);
}

addDecorator((story, context) => withInfo()(story)(context));
//addDecorator((story, context) => withKnobs(story)(context));
addDecorator(story => <ThemeProvider theme={theme}>{story()}</ThemeProvider>);
//addDecorator(StoryRouter());

configure(loadStories, module);

Issue:

Which version are you using?

• storybook-react-router: ^5.0.2
• @storybook/react: ^5.0.6

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

React

Please describe the problem:

It's working, but once I add the StoryRouter() decorator, the Story Source only displays the StoryRouter's component definition:

<StoryRouter story={anonymous} links={null} routerProps={null} />

Please explain how to reproduce the issue or (better) provide an example to do it.

import StoryRouter from 'storybook-react-router';

const story = storiesOf('Tabs', module);
story.addDecorator(StoryRouter());
story.add('Example Hidden', () => <h1>Will not show source</h1>, {
  info: { inline: true, source: true },
});

Is it possible to retain the hot reloading set up in storybook while using this decorator?

From my initial tests, it seems like shouldComponentUpdate is preventing the stories from hot reloading.

I've created an example repo here:
https://github.com/lsirivong/storybook-router-hot-reload-test

Now that Storybook supports Vue, does this project have any interest in supporting vue-router?

Link: https://github.com/vuejs/vue-router

Related: storybookjs/storybook#1657

Ignore.

Issue:

Which version are you using? 1.0.3

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

Please describe the problem:

After add this to my story, I found this Cannot read property 'name' of undefined error.

Please explain how to reproduce the issue or (better) provide an example to do it.

Here how I add it:

Issue:

Which version are you using?

"storybook-react-router": "^1.0.5",

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

React

Please describe the problem:

We are importing a React component from another library that uses links and a switch. In its basic form it looks like this:

const TabGroup : React.FunctionComponent<{match: string}> = ({match}) =>{
    const path = match;
    return(
        <div>
            <div className="links">
              <Link to={`${path}`} className="link">Profile</Link>
              <Link to={`${path}/comments`} className="link">Comments</Link>
              <Link to={`${path}/contact`} className="link">Contact</Link>
            </div>
            <div className="tabs">
                 <Switch>
                    <Route path={`${path}`} exact component={Profile} />
                    <Route path={`${path}/comments`} component={Comments} />
                    <Route path={`${path}/contact`} component={Contact} />
                </Switch>
            </div>
        </div>
    )
}

However it seems as though StoryRouter is completely unable to understand this component as my console is filled with invariant errors complaining that Link and Switch should not be used outisde of a Router.

Our story looks like this:

import * as React from 'react';
import { storiesOf } from '@storybook/react';
import StoryRouter from 'storybook-react-router';
import { TabGroup } from '@draftit/ui-library';

const stories = storiesOf("Components", module);
stories
    .addDecorator(StoryRouter())
    .add(
        'Tab Group', () => <TabGroup match="/hr-expert" />
    );

The example all include the components within the story file itself so its hard to determine what is causing this. I have also tried disabling all other storybook extensions that were not relevant to this without avail. Can this plugin not support typescript or external components?

In order to run the current examples we have to also run yarn add -W storybook-react-router
I do have lerna installed, unlike #25

Which version are you using?

master as of 17 March 2020

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

React examples

Please describe the problem:

Documentation does not match what you actually need to run the examples. Not sure if the problem is in the docs, or is in the actual project setup. I do have lerna installed as you can see from this:

mark@Marks-MacBook-Pro /tmp/storybook-router (master) $ yarn storybook-react-examples
yarn run v1.17.3
$ lerna exec --scope storybook-react-router-examples -- npm run storybook
lerna notice cli v3.16.4
lerna info versioning independent
lerna info filter [ 'storybook-react-router-examples' ]
lerna info Executing command in 1 package: "npm run storybook"

ERROR in ./Prompt.js
Module not found: Error: Can't resolve 'storybook-react-router' in '/private/tmp/storybook-router/examples/react-router'
 @ ./Prompt.js 6:0-49 91:41-52
 @ ./index.js
 @ ./.storybook/config.js
 @ multi /private/tmp/storybook-router/node_modules/@storybook/core/dist/server/common/polyfills.js /private/tmp/storybook-router/node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js /private/tmp/storybook-router/node_modules/webpack-hot-middleware/client.js?reload=true

...

Please explain how to reproduce the issue or (better) provide an example to do it.

git clone https://github.com/gvaldambrini/storybook-router.git
cd storybook-router/
yarn install && yarn bootstrap
yarn storybook-react-examples      # This fails because storybook-react-router cannot be found
yarn add storybook-react-router     # This fails because of the root check in yarn
yarn add -W storybook-react-router   # This succeeds, but probably ruins the environment
yarn storybook-react-examples     # Success

great work with the plugin. i've really found it helpful in projects where i can use router v4.

however, i still maintain several projects that are not able to update to v4 yet. i'd love to be able to use this with those projects.

any chance you'd be open to adding support for router v3?

Which version are you using?

1.0.2

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

Vue

Please describe the problem:

Passing props to a component through Vue router doesn't work in Storybook.

Please explain how to reproduce the issue or (better) provide an example to do it.

You can use the same example as in Vue router documentation for passing props - https://router.vuejs.org/guide/essentials/passing-props.html

In my case I'm using function mode, like so:

.addDecorator(StoryRouter({}, {
  routes: [{
    name: 'wizard',
    path: '/wizard/:id/:step',
    component: Wizard,
    props: route => {
      return {
        id: parseInt(route.params.id),
        step: parseInt(route.params.step),
      };
    },
  }],
}))

Using this, props are not sent to Wizard component when the story is opened.

Issue:

Which version are you using?

1.0.5

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

React

Please describe the problem:

• Link with query string <Link to={/page/1?status=bla>Bla</Link>. ?status=bla is not captured in actions logger.

• Configuration with query string is not recognised

StoryRouter({
'/page/1?status=bla': linkTo('MyComponent, 'story')
})

Without QS works

StoryRouter({
'/page/1': linkTo('MyComponent, 'story')
})

Please explain how to reproduce the issue or (better) provide an example to do it.

• Setup a Link with query string in it.
• Configure StoryRouter with query string in it.

Issue:

Which version are you using?

[email protected]

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

React

Please describe the problem:

During install warning displayed:
"storybook-router > @storybook/[email protected]" has incorrect peer dependency "@storybook/addons@^3.3.0".

Please explain how to reproduce the issue or (better) provide an example to do it.

After Webpack 4 and Babel 7 update, storybook update was also necessary but it seems that the storybook-router give a warning on this one

Version:

"@storybook/addons": "^4.0.0-alpha.25",

Issue:

Which version are you using?

1.0.7

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

react

Please describe the problem:

A warning is displayed that the component StoryRouter needs the story prop. Although the example seem to work fine. I had look inside the code and indeed, the story property is marked as required, but it is not used in the StoryRouter component. The StoryRouterDecorator is not providing a story prop to StoryRouter either.
Maybe just to delete the declaration in StoryRouter.propTypes may fix the issue.

Warning:

In Code:

Please explain how to reproduce the issue or (better) provide an example to do it.

I just used the example provided in the readme.md => with the ComponentParam and ChildId components.

Hey! awesome plugin, Can you join us in the storybook slack?
https://storybooks-slackin.herokuapp.com/

That way we can keep you updated on the upcoming 3.0.0 release!

❤️ storybook team

Which version are you using?

0.3.2

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

React

Please describe the problem:

I am working on a project that just uses React. As such, I have no use for having Vue as a dependency.

Unfortunately, my Yarn package manager will pull in vue as a dependency regardless, since it is a dependency in storybook-router's package.json file. I now have vue in my project's node_modules, despite the fact that there's no way my react project will ever use that library. I wonder if it makes more sense to have vue specified as a peer dependency in package.json. That way, it is up to the app that uses storybook-router to determine whether vue should actually be installed into node_modules as a dependency.

I feel like the same can be said in vice-versa: an app that only uses vue will have no reason to pull in react as a dependency.

Issue:

Which version are you using?

1.0.8

Are you using storybook-router with a React based project or a Vue one?

React based project

Please describe the problem:

I would like to set a route for my component, which uses a route parameter for fetching data (which is intercepted and a response mocked using msw-storybook-addon)

Please explain how to reproduce the issue or (better) provide an example to do it.

Context

I have a React component which extracts a route parameters and queries and uses them to fetch my api.

const Details = () => {
  const client = useAxiosAuth(); // Custom axios client hook
  const history = useHistory(); // History hook provided by react router
  const location = useLocation(); // Hook provided by react-router

 // Hooks for extracting url parameters and queries
// Example path: /details/1?redeemable=true
  const { id } = useParams<{ id: string }>(); // result: 1
  const { redeemable } = queryString.parse(location.search); // result: true
  
// React-query is used for fetching data, implementation will be omited
  const { data, status } = useQuery<any>('collectible', () =>
    fetchCollectible(client, id),
  );
}

I am using msw-storybook-addon for intercepting each component's api request in my stories like so (this is another story which is not related to this problem):

export default {
  title: 'Screens/Profile',
  component: Profile,
  decorators: [
    (Story) => (
      <ContentContainer>
        <Story />
      </ContentContainer>
    ),
  ],
  parameters: {
    msw: [
      rest.get(
        `${process.env.REACT_APP_API_URL}/profile`,
        (_, res: any, ctx: any) => {
          return res(
            ctx.json({
              username: 'Foo',
              description: "bar",
              name: 'Jhon Doe'
            }),
          );
        },
      ),
    ],
  },
} as Meta;

export const ProfileStory: Story<any> = (args) => <Profile {...args} />;

Now only need to configure the first story to provide a URL for the component, since there isn't one, and error is thrown. Here since there isn't an id in the path, my component tries to execute a fetch request with an id of undefined

index.js:1581 GET http://localhost:3000/defatils/undefined/business 

I already checked the Params example, but honestly it makes to sense to me, since no param is being passed into the child component?

My Storybook Router Config

I am using the CSF and followed this issue for configuring this package (pls update the documentation with an example configuration for CSF).

Here's preview.js I didn't add any routes here.

addDecorator(storyRouterDecorator());

Here's the story causing me trouble

export default {
  title: 'Screens/CollectibleDetails',
  component: Details,
  decorators: [
    storyRouterDecorator({ // I tried to provide a link to this story hopping it would be used by the component
      '/details/1/business': linkTo(
        'Screens/CollectibleDetails',
        'RedeemableCollectible',
      ),
    }),
    (Story) => (
      <AppAlertProvider>
        <ContentContainer>
          <Story />
        </ContentContainer>
      </AppAlertProvider>
    ),
  ],
  parameters: {
    msw: [
      rest.get(
        `${process.env.REACT_APP_API_URL}/details/1/business`, // intercept this request
        (_, res: any, ctx: any) => { // Send this response
          return res(
            ctx.json({
            // some data
             }),
      ),
    ],
  },
} as Meta;

const Template: Story<any> = (args: any) => <Details {...args} />;

export const RedeemableCollectible = Template.bind({});

Note: I'm using typescript in my project

i expect that this is user error, but i'm struggling to find my problem, so i'm hoping you have something that you can point me to.

i'm using this with react-router v3 and passing my linkTo definitions as the first argument to the storyRouter decorator as

.addDecorator(storyRouter({
    '/companies': linkTo('Organisms/Companies List', 'default')
  }))

however, when i click on the <Link> that points to /companies i get the following error:

Warning: [react-router] Location "/companies" did not match any routes

this then results in the following trace:

Uncaught TypeError: Cannot read property 'emit' of null
    at Object.eval [as /companies] (preview.js?e884:22)
    at HistoryWatcher.onHistoryChanged (StoryRouter.js?b7c2:202)
    at eval (useQueries.js?c2b7:75)
    at eval (useBasename.js?bfcd:67)
    at eval (createHistory.js?96f2:55)
    at Array.forEach (<anonymous>)
    at updateLocation (createHistory.js?96f2:54)
    at eval (createHistory.js?96f2:117)
    at eval (createHistory.js?96f2:90)
    at next (AsyncUtils.js?f52d:51)

my assumption is that the "did not match any routes" error shouldn't occur since i defined that route in the decorator? should i be configuring that in a different way?

i'm using v0.2.9 of storybook-router

Just cloned the repo and trying to run the examples

~/code/storybook-router $ npm install && npm run storybook-react-examples
up to date in 1.811s

> storybook-router@ storybook-react-examples /Users/gmauer/code/storybook-router
> lerna exec --scope storybook-react-router-examples -- npm run storybook

lerna info version 2.9.1
lerna info versioning independent
lerna info scope storybook-react-router-examples

> [email protected] storybook /Users/gmauer/code/storybook-router/examples/react-router
> start-storybook -p 9001 -c .storybook

sh: start-storybook: command not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! [email protected] storybook: `start-storybook -p 9001 -c .storybook`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the [email protected] storybook script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/gmauer/.npm/_logs/2018-07-15T20_19_12_344Z-debug.log
lerna ERR! exec Errored while executing 'npm run storybook' in 'storybook-react-router-examples'
lerna ERR! execute callback with error
lerna ERR! Error: Command failed: npm run storybook
lerna ERR!     at Promise.all.then.arr (/Users/gmauer/code/storybook-router/node_modules/lerna/node_modules/execa/index.js:236:11)
lerna ERR!     at <anonymous>
{ Error: Command failed: npm run storybook
    at Promise.all.then.arr (/Users/gmauer/code/storybook-router/node_modules/lerna/node_modules/execa/index.js:236:11)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:182:7)
  code: 1,
  killed: false,
  stdout: null,
  stderr: null,
  failed: true,
  signal: null,
  cmd: 'npm run storybook',
  timedOut: false,
  exitCode: 1 }
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! storybook-router@ storybook-react-examples: `lerna exec --scope storybook-react-router-examples -- npm run storybook`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the storybook-router@ storybook-react-examples script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Issue:

Renders blank when using "react-router-dom": "^6.0.0-alpha.4",

If you open component with router and then open another component in Storybook, width of page becomes smaller each time you open component with router decorator

Issue:
After adding the storybook router as a global decorator to our stories, all of our story snapshots were renamed with an extra space so our snapshots no longer matched. The space is at the front of the story name.

Which version are you using?

1.0.3

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

Vue

Please describe the problem:

Please explain how to reproduce the issue or (better) provide an example to do it.

Issue:

Which version are you using?

0.3.0

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

Vue

Please describe the problem:

Imposible to invoke StoryRouter as on README

Please explain how to reproduce the issue or (better) provide an example to do it.

Simple do.

storiesOf('NavBar', module)
  .addDecorator(StoryRouter())
  .add('default', () => NavBar);

will return into a story is not a function, doing .addDecorator(StoryRouter) fix the issue.

i can work on a PR for this, i just want to be sure i'm not crazy =p

Feature request:

What would it take to add support for angular router?

Issue:

Did a bulk yarn upgrade, and upgraded storybook-react-router to 1.0.6 from 1.0.5.

When running the storybook, I was showen the following error when running as before.

ERROR in ./node_modules/storybook-react-router/react.js 19:2
Module parse failed: Unexpected token (19:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   // a story to another one and so you cannot implement a back or forward button which
|   // works among stories.
>   <MemoryRouter {...routerProps}>
|     <Route
|       render={({ history, location }) => (
 @ ./.storybook/config.js 11:0-49 22:13-24
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true

Installed 1.0.5 again, and storybook loaded as expected.

I am loading the router in my global .storybook/config.js file:

addDecorator(StoryRouter())

I'm unsure what part of my setup might be causing this. I am overidding the default config, to use typescript, as follows, which may contribute. I couldn't see what was different that could be causing it.

module.exports = ({ config }) => {
    config.devtool = "eval-source-map";
    config.module.rules.push({
        test: /\.(ts|tsx)$/,
        include: ['../'],
        exclude: ['../node_modules'],
        use: {
            loader: 'babel-loader',
            options: {
                presets: [
                    "@babel/preset-env",
                    "@babel/preset-typescript",
                    "@babel/preset-react"
                ],
                plugins: [
                    "emotion",
                    "@babel/proposal-class-properties",
                    "@babel/proposal-object-rest-spread"
                ]
            }
        },
    });
    config.resolve.extensions.push('.ts', '.tsx');
    return config;
};

The standard way to use React Router is to install react-router-dom (or react-router-native) and not worry about manually adding the base package react-router, since all of its exports are available on the former. However with this setup I get a peer dependency warning from yarn when installing/updating packages which is pretty annoying:

warning " > [email protected]" has unmet peer dependency "react-router@^4.0.0||^5.0.0".

I don't know how "fixable" this is (without expecting consumers to explicitly add react-router) but I thought I'd create an issue anyway.

Which version are you using?

• 1.0.5
• [email protected]

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

React

Hi,

Which version are you using?

1.0.1

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

React

Please describe the problem:

I get the dreadly You should not use <Link> outside a <Router> on hot reload. It does work however if I manually refresh the page. So the decorator seems to be incorrectly applied.

Please explain how to reproduce the issue or (better) provide an example to do it.

config.js

import { configure } from "@storybook/react";
import "./decorators";

const req = require.context("../src", true, /stor(ies|y)\.js$/);

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

decorators.js

import React from "react";
import { addDecorator } from "@storybook/react";
import StoryRouter from "storybook-react-router";
import "semantic-ui-css/semantic.min.css";

// add
addDecorator(StoryRouter());