search

miragejs / discuss

Ask questions, get help, and share what you've built with Mirage
MIT License
2 stars 0 forks source link

Starting mirage for Storybook #22

Open techdragon opened 5 years ago

techdragon commented 5 years ago

Feature request

The ability to use mirage's factories as a source of data when working with components in Storybook would be extremely useful. I've tried to get it up and running but I'm starting to feel out of my depth after a couple of hours trying, so far its just been resolving a seemingly endless permutation of Module not found: Error: Can't resolve $foo only to meet yet another Module not found: Error: Can't resolve $nextFoo ... so I'm starting to think I may be missing something fundamental and figured I'd see what the author/maintainers think about how to solve it.

If this is a feature request, add a 👍 reaction to it. We use these to help us prioritize new feature development!

samselikoff commented 5 years ago

Interesting, love the idea!

Some upcoming changes will make it easier to start Mirage in isolation. For now, best way I could help you out is if you were able to upload a simplified reproduction with the issue you're hitting.

techdragon commented 5 years ago

Happy to help by providing an example, I've just been following the stock starting guides.

  1. Make a simple ember quickstart example project.
  2. Install ember-bootstrap and ember-cli-mirage
  3. Install and setup both storybook and ember-cli-storybook.
  4. Run storybook with the defaults to confirm storybook is working with ember.
  5. Make a new file for storybook, first.stories.js and just add a story using any old ember-bootstrap sample/example component to test that storybook is picking up new files correctly.
  6. Try to get mirage setup/started (using the docs) so that I can use mirage data in a handlebars template like hbs`{{a-job job=job}}`, similar to how this blog post does, but with a storybook story, instead of an acceptance test.

I can build a sample project if it will help, but since I'm trying to stick as close to "follow the example docs" as possible I'm not sure it wont be faster for you to just try it directly.

Also, as I keep pondering how to get this working, the more I suspect this is entering the territory discussed back in miragejs/ember-cli-mirage#46 and miragejs/ember-cli-mirage#195, but possibly a more extreme version of the "not designed for that usage" since having also tried to use factory-guy today, it also throws similar errors. After some more code reading in the storybook repo, I'm starting to suspect that the way Storybook renders the ember components, (which i think lives here ) may actually be the underlying cause. From what I was reading, Storybook looks like its just calling to Ember.component.extend directly without the rest of ember at all. Which, if true would make this feature request the equivalent of "make ember-cli-mirage work without ember" which is obviously a daft idea... unless of course storybook changes to make it possible to use other parts of ember.

Of course I could just be reading it wrong, and it might be no where near this big a problem, its been a long day. 😆

samselikoff commented 4 years ago

FYI: Transferred this to our Discuss repo, our new home for more open-ended conversations about Mirage!

If things become more concrete + actionable we can create a tracking issue in the main repo.

andrewcaulfield commented 3 years ago

Would love to see a guide on best practices for getting this running.