-
-
Notifications
You must be signed in to change notification settings - Fork 9.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Show more source files in storysource #3566
Comments
Hey @zetekla, I looked through our repository a bit and google'd a bit about it, and sadly couldn't find it either. As not all the examples in the addon gallery have a reference to the source code either, I suspect that the source code of coursera-ui is also not publicly available. Tagging @vidaaudrey whether she knows more, as she was the latest editor of the coursera-ui demo link. |
Hi @zetekla currently coursera-ui is in our private repo and is still under active development. It'll take some time before we can share the source code publicly. Happy to answer any questions if you have. |
@vidaaudrey you may consider using |
Thanks @Hypnosphi, that's a great feature. Currently we are still on 3.3.2, not on 3.4 yet and we have separate demo files for each component (it gets messy if we keep all the demos in the story source file). Maybe we'll wait till storybook v4 for a more complete upgrade with storysource support. |
That's totally OK, we have a similar setup for our own examples, and storysource addon works well with it, see http://storybooks-official.netlify.com/ |
@Hypnosphi our set up is a little different. To uncluttered the story file, we have a separate demo js file for each component. Would be useful if storySource allows us to add additional files. |
CC @igor-dv |
Probably we can add more tabs for other imports. Let's say for every import according to some pattern, for example here it will be for |
@igor-dv great idea! That's would be very useful! |
Think this would be a great addition to Maybe we could (only) show the component subject to the current story that is highlighted already? I'm scared that the amount of tabs will explode in cases where the structure of stories is not similar to the ones seen here. |
I will experiment with it =) |
Maybe can use Dropdown in case there are too many files? |
We have the same requirement for our angular demo modules Would be the same use-case, right? Example storiesOf('Inputs', module)
.add(
'Calendar',
() => ({
component: CalendarDemoComponent,
moduleMetadata: {
imports: [
CalendarModule
]
}
}), {
notes: { markdown: readme }
}
); @igor-dv Do you have started working on this or have any specs / ideas finished? Before I saw this issue I thought about writing a custom addon. Let me know if there's anything I can do to help and I will check if I am able to. |
My idea is to generate tabs with a code of the imported to story components according to some rules. Like if in your example you have import { CalendarDemoComponent } from './CalendarDemoComponent'; the addon will take the code of the
Yep, I have a branch, |
Here are a couple of thoughts to this coming from an Angular perspective
How about something inside the storysource panel? E.g. a collapsable file tree or to keep it simple use a combobox/doprdown for all story related files I hope this isn't nonsense :) I'm already playing around with storybook and how it loads its storyfiles - If I have code-related questions, should I open new issues or is there something like a slack channel? |
Sorry for not answering a while. Having some kind of file selection in storysource panel sounds interesting =) |
@igor-dv this would be a cool feature to have |
Someone looked into this yet? I will implement a POC next week. Would imagine the POC working like this in CSF:
I will then create a webpack plugin to attach source code following a specific glob/regex
I won't be able to do it exactly like storysource is doing it, but that is overall the idea. Thoughts? |
cc @atanasster |
Yeah that would be great. I will have a look at your current progress! |
Hi - ended up getting super busy so this dropped off. I was thinking about the solution the other day. Perhaps the right solution is to enable tabs for the preview under docs? Why:
Thoughts @atanasster & @shilman ? |
@RuneKR I think it's a great idea. Pretty sure @atanasster implemented this in his controls work. I'm currently busy tying to refactor and simplify docs for the 6.0 release, but would be happy to work with you on this in 6.1. |
This feature would be super useful. We have some complex examples in our Storybook and have tried to pull out some of the example code into separate files. But by doing that, we remove the ability to see the source code in the docs which sucks. |
Any updates on this issue? It seems Storybook 7, for some reason broke the ability to see the entire file's source code. In storybook 6, we were able to at least see the entire file. |
Hello,
I'm interested in getting the version of this demo https://building.coursera.org/coursera-ui/?selectedKind=Welcome&selectedStory=to%20Storybook&full=0&addons=0&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel
to render, test and play out locally.
Can you help with where to clone/download it?
The only one I found was outdated.
thanks
The text was updated successfully, but these errors were encountered: