Code Monkey home page Code Monkey logo

storybook-addon-angular-router's People

Contributors

jakob-em avatar thebspin avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar

Forkers

freddycoder thebspin

storybook-addon-angular-router's Issues

Error in all stories if this addon is included

I am in the process of upgrading our nx mono-repo (https://nx.dev) to latest version of Angular and Storybook (going from Storybook 7.0.12 to 7.3.1). The migration went fine, and my storybooks start up just fine. All stories however, reports the following error

beforeEach is not defined
ReferenceError: beforeEach is not defined
    at ./node_modules/@angular/core/fesm2022/testing.mjs (http://localhost:4400/vendors-node_modules_angular_material_fesm2022_icon_mjs-node_modules_ngrx_effects_fesm2022_ng-0729bf.iframe.bundle.js:108374:1)
    at __webpack_require__ (http://localhost:4400/runtime~main.iframe.bundle.js:28:33)
    at fn (http://localhost:4400/runtime~main.iframe.bundle.js:353:21)
    at ./node_modules/@angular/router/fesm2022/testing.mjs (http://localhost:4400/vendors-node_modules_angular_material_fesm2022_icon_mjs-node_modules_ngrx_effects_fesm2022_ng-0729bf.iframe.bundle.js:122382:79)
    at __webpack_require__ (http://localhost:4400/runtime~main.iframe.bundle.js:28:33)
    at fn (http://localhost:4400/runtime~main.iframe.bundle.js:353:21)
    at ./node_modules/storybook-addon-angular-router/dist/withAngularRouter.js (http://localhost:4400/vendors-node_modules_angular_material_fesm2022_icon_mjs-node_modules_ngrx_effects_fesm2022_ng-0729bf.iframe.bundle.js:173822:16)
    at __webpack_require__ (http://localhost:4400/runtime~main.iframe.bundle.js:28:33)
    at fn (http://localhost:4400/runtime~main.iframe.bundle.js:353:21)
    at ./node_modules/storybook-addon-angular-router/dist/preset/preview.js (http://localhost:4400/vendors-node_modules_angular_material_fesm2022_icon_mjs-node_modules_ngrx_effects_fesm2022_ng-0729bf.iframe.bundle.js:173789:26)

I have pinpointed this addon as the culprit, because the error goes away, and all stories render again if I remove the addon from the addons array in main.ts.

As far as I can see the addon should be compatible with Storybook 7 (and worked fine on 7.0.12). I have not investigated more, but I suspect that it is related to changes in the Angular Router.

We went from Angular 15.2.8 to ~16.2.0

Version information

 mono git:(feature/update-nx) ✗ npx sb info  

Environment Info:

  System:
    OS: macOS 13.4.1
    CPU: (8) arm64 Apple M1 Pro
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
  Browsers:
    Chrome: 116.0.5845.96
    Safari: 16.5.1
  npmPackages:
    @storybook/addon-a11y: ~7.3.1 => 7.3.1 
    @storybook/addon-essentials: ~7.3.1 => 7.3.1 
    @storybook/addon-links: ~7.3.1 => 7.3.1 
    @storybook/addon-mdx-gfm: ~7.3.1 => 7.3.1 
    @storybook/addons: ~7.3.1 => 7.3.1 
    @storybook/angular: ~7.3.1 => 7.3.1 
    @storybook/core-server: ~7.3.1 => 7.3.1 
    @storybook/manager-api: ~7.3.1 => 7.3.1 
    @storybook/theming: ~7.3.1 => 7.3.1

And we have been using version 1.9.0 of this addon since before we did the latest migration.

Any idea what might cause this issue?

Feature request: Mock NavigationExtras through stories parameters ?

Using this addon is perfect to check for outgoing links in the action panel.

It would be great to have a way to simulate the router input parameter like state, queryParams or data.
Here are some use case:

  • we need to get the "product id" from data for a product detail page. If there is no id, it will display an error.
  • we need to get the "search" from query param for a search detail page. If there is no "search", display a virgin search page
  • we need to get the "signin" state from the route while we go through the multi factor authentification page in order to know if we're doing a signin or a business validation.

Having a way to mock those 3 flavors of extra params through stories parameters would be really handy, so that we could mock at a story level =)

`router.isActive()` does not work

The isActive() Method of the Router has some overloads. Unfortunatly only the overload isActive(url: UrlTree, exact: boolean) is supported by this addon.

The other overloads isActive(url: string | UrlTree, matchOptions: IsActiveMatchOptions) is not working when using this addon. To make matters worse the isActive(url: UrlTree, exact: boolean) signature has been deprecated in the Router API.

Could you please also provide an implementation for the other overloads of isActive()?

Error: Cannot find module '@storybook/global'

Hi, I tried to integrate your addon using the context described below:

  • Storybook 7.6.3 (also tried using 7.5)
  • Angular 16.2.10

But when I start Storybook I got the following error using Firefox:

Error: Cannot find module '@storybook/global'
    webpackEmptyContext sync:2
    js index.js:23
    Angular 2
    Webpack 25
[runtime.js:4:101929](http://localhost:6006/sb-preview/runtime.js)
    error runtime.js:4
    renderPreviewEntryError runtime.js:89
    renderPreviewEntryError runtime.js:103
    getProjectAnnotationsOrRenderError runtime.js:87
    _runRejections runtime.js:4
    _runRejections runtime.js:4
    catch runtime.js:4
    getProjectAnnotationsOrRenderError runtime.js:87
    initialize runtime.js:81
    js storybook-config-entry.js:25

Same error but using Chrome which provides a more explicit stack-trace:

   runtime.js:4 Error: Cannot find module '@storybook/global'
    at webpackEmptyContext ( sync:2:1)
    at ../../lib/channels/dist/index.js (index.js:23:1)
    at index.js:8:1
    at ./node_modules/@storybook/addon-actions/dist/index.js (index.js:23:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./node_modules/storybook-addon-angular-router/dist/actionLoggingRouter.js (actionLoggingRouter.js:7:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./node_modules/storybook-addon-angular-router/dist/withAngularRouter.js (withAngularRouter.js:10:1

To reproduce:

  1. npx @angular/[email protected] new mylib --no-create-application
  2. cd mylib/
  3. npx @angular/[email protected] generate library my-lib
  4. npx storybook@latest init
  5. npm i -D storybook-addon-angular-router
  6. Add the storybook-addon-angular-router addon in /mylib/projects/my-lib/.storybook/main.ts
  7. ng run my-lib:storybook
  8. Access http://localhost:6006/
  9. F12 to show JS console and check the error

add url to get active routerLink

I have an expanding menu component and expands the active menu by checking the router.url in order to open the menu depending on where you are in the router link.

Just wondering it's possible to add the url to the ActionLoggingRouter:

get url() {
    return this.activePath;
  }

Storybook 8 compatibility

Hey @Jakob-em! I’m reaching out from the core SB team :)

Storybook 8 (our next major release) is coming soon, and it introduces some breaking changes that your addon might need to account for.

We’ve listed all the key changes in a new Storybook 8 migration guide, and we’d encourage you to check it out and see if your addon is impacted.

We also have an addons channel in our Discord community, which we’d like to use to better communicate with addon authors in the future. If you’re not part of the server, consider joining here and message me (@joevaugh4n) so that I can give you the addon creator role! If you’re already in the server, please just ping me and I’ll respond to you there.

Thanks for being a part of our addon community!

Joe

React error in console when parameters.controls is defined in story default meta data

Here are the errors I get:

Without addons setup:

NG0303: Can't bind to 'routerLink' since it isn't a known property of 'a'.

With addons set up and enabled in the story:

vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:86972 Warning: React has detected a change in the order of Hooks called by null. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://fb.me/rules-of-hooks

   Previous render            Next render
   ------------------------------------------------------
1. useContext                 useState
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    in Unknown
    in Unknown
    in Unknown
    in Unknown (created by ManagerConsumer)
    in ManagerConsumer (created by Panel)
    in Panel (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Panel)
    in Panel (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in Main (created by Layout)
    in Layout (created by Context.Consumer)
    in WithTheme(Layout)
    in Unknown
    in div (created by Context.Consumer)
    in Styled(div)
    in Unknown
    in Unknown (created by SizeMeRenderer(Component))
    in SizeMeReferenceWrapper (created by SizeMeRenderer(Component))
    in SizeMeRenderer(Component) (created by SizeMe(Component))
    in SizeMe(Component)
    in ThemeProvider
    in Unknown (created by ManagerConsumer)
    in ManagerConsumer (created by Manager)
    in EffectOnMount (created by Manager)
    in Manager (created by Context.Consumer)
    in Location (created by QueryLocation)
    in QueryLocation (created by Root)
    in LocationProvider (created by Root)
    in HelmetProvider (created by Root)
    in Root
printWarning @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:86972
error @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:86944
warnOnHookMismatchInDev @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:101599
updateHookTypesDev @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:101558
useState @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:102828
useState @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:116308
title @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:6461
(anonymous) @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:36321
(anonymous) @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:36316
renderWithHooks @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:101687
updateFunctionComponent @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:103918
beginWork @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:105494
beginWork$1 @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:110063
performUnitOfWork @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:109041
workLoopSync @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:109014
performSyncWorkOnRoot @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:108640
(anonymous) @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:97973
unstable_runWithPriority @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:118659
runWithPriority$1 @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:97923
flushSyncCallbackQueueImpl @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:97968
flushSyncCallbackQueue @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:97956
scheduleUpdateOnFiber @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:108083
enqueueSetState @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:99523
Component.setState @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:115282
setState @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:12765
newState @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:9696
_callee$ @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:9695
tryCatch @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:4231
invoke @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:4372
(anonymous) @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:4264
asyncGeneratorStep @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:9593
_next @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:9595
(anonymous) @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:9595
(anonymous) @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:9595
setState @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:9727
_callee$ @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:11156
tryCatch @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:4231
invoke @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:4372
(anonymous) @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:4264
stories_asyncGeneratorStep @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:10934
_next @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:10936
(anonymous) @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:10936
(anonymous) @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:10936
setStories @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:11171
handler @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:11327
(anonymous) @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:17217
handleEvent @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:17216
(anonymous) @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:17101
handler @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:39697
handleEvent @ vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-95ae78.manager.bundle.js:39866
postMessage (async)
(anonymous) @ index.js:154
send @ index.js:152
handler @ index.js:90
emit @ index.js:100
StoryStore.pushToManager @ story_store.js:263
finishConfiguring @ story_store.js:442
ConfigApi.configure @ config_api.js:26
(anonymous) @ loadCsf.js:223
push../node_modules/@storybook/angular/dist/ts3.9/client/preview/index.js.exports.configure @ index.js:31
./.storybook/generated-stories-entry.js @ generated-stories-entry.js:6
__webpack_require__ @ bootstrap:24
__webpack_exec__ @ main.iframe.bundle.js:2990
(anonymous) @ main.iframe.bundle.js:2991
__webpack_require__.O @ chunk loaded:23
(anonymous) @ main.iframe.bundle.js:2992
webpackJsonpCallback @ jsonp chunk loading:557
(anonymous) @ main.iframe.bundle.js:1
Show 20 more frames

With addons set up but disabled in the story: both errors are there.

Here is my Storybook setup in main.js which is similar to the documentation (any combination of addons has the same result):

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  // addons: ['storybook-addon-angular-router', '@storybook/addon-links', '@storybook/addon-essentials'],
  // addons: ['@storybook/addon-links', 'storybook-addon-angular-router', '@storybook/addon-essentials'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials', 'storybook-addon-angular-router'],
  core: {
    builder: 'webpack5',
  },
};

After some experiment, problem is narrowed to story parameters:

export default {
  title: 'My title',
  component: MyComponent,
  decorators: [
    moduleMetadata({
      declarations: [MyOtherComponent],
      imports: [MyModule],
    }),
  ],
  argTypes: { onMyEvent: { action: 'myEvent' } },
  parameters: { controls: { disable: true } },
} as Meta;

If I remove the parameters.controls, everything works fine.
It seems there is an incompatibility there =)

For your information, it works fine with parameters.actions:

parameters: { actions: { disable: true } },

Also, the error occurs only once in the console. Navigating to other stories does not trigger the problem, only a full refresh does.

Use the new Framework API?

Hey @Jakob-em!
I'm one of the Storybook maintainers. I focus primarily on documentation and community outreach. I'm opening up this issue and letting you know that the Storybook API for building addons is currently being updated to factor in the changes introduced by the upcoming 7.0 release. If you're interested in making the required changes to help the community from benefiting from using your addon, we've prepared an abridged guide for the required changes here, and if you have any questions or issues, please reach out to us in the #prerelease channel in our Discord Server.

Hope you have a great day!

Stay safe

Angular v14 support

Hi,

First of all thanks for the awesome package!

Since Angular v14 is out, could we please have support for it?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.