gvaldambrini / storybook-router Goto Github PK
View Code? Open in Web Editor NEWA storybook decorator that allows you to use routing-aware components in your stories
License: MIT License
A storybook decorator that allows you to use routing-aware components in your stories
License: MIT License
Issue:
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?
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:
"storybook-vue-router": "^1.0.7",
"@storybook/vue": "^5.3.18",
"vue": "^2.6.11",
"vue-router": "^3.1.5"
Vue
I'm building a stand-alone component library, but the components should be able to handle vue-router links
On the storybook page, I get the error: "Cannot read property 'resolve' of undefined"
I'm declaring my story like this:
storiesOf('LinkingComponent', module) .addDecorator(StoryRouter()) .add('route', () => ({ components: { LinkingComponent }, template:
, computed: { item() { return { name: 'Item Name', } }, route() { return (item) => ({ query: { name: item.name }}); } } }));
It's possible I'm declaring it incorrectly, but it's not clear from the documentation how else to do this.
Issue:
"storybook-react-router": "^1.0.8",
react
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
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:
1.0.7
Vue
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()],
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
"@storybook/react": "^5.0.10",
"react-router": "^5.0.0",
"react-router-dom": "^5.0.0",
"storybook-react-router": "^1.0.5",
React
Getting invariant violation "You should not use <Route>
outside a <Router>
" (or "...<Link>
outside <Router>
").
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?
1.0.7
vue
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
"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",
},
Yes
storybook_vue_router__WEBPACK_IMPORTED_MODULE_2___default(...) is not a function
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 ?)
v1.0.7
vue
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.
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:
^0.3.2
Vue
A components beforeRouteEnter
guard doesn't seem to be called before the component is created but it should.
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:
React (Gatsby)
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:
1.0.8
react
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 projectCould 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
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:
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"
},
react
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:
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:
storybook-react-router
: ^5.0.2
@storybook/react
: ^5.0.6
React
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} />
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:
After add this to my story, I found this Cannot read property 'name' of undefined error.
Issue:
"storybook-react-router": "^1.0.5",
React
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
master as of 17 March 2020
React examples
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
...
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?
1.0.2
Vue
Passing props
to a component through Vue router doesn't work in Storybook.
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:
1.0.5
React
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')
})
Issue:
React
During install warning displayed:
"storybook-router > @storybook/[email protected]" has incorrect peer dependency "@storybook/addons@^3.3.0".
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:
1.0.7
react
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.
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
0.3.2
React
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:
1.0.8
React based project
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)
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?
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.
1.0.3
Vue
Issue:
0.3.0
Vue
Imposible to invoke StoryRouter
as on README
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.
React
Hi,
1.0.1
React
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.
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());
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.