Show more source files in storysource

[zetekla]

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

[Keraito]

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.

[vidaaudrey]

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.

[Hypnosphi]

@vidaaudrey you may consider using addon-storysource to share only the stories part https://github.com/storybooks/storybook/tree/master/addons/storysource

[vidaaudrey]

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.

[Hypnosphi]

separate demo files for each component

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/

[vidaaudrey]

@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.

[Hypnosphi]

CC @igor-dv

[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 ButtonDemo. WDYT about this?

[vidaaudrey]

@igor-dv great idea! That's would be very useful!

[Keraito]

Think this would be a great addition to addon-storysource, as imo a story currently only really displays how a component should be used, but not how it works which I sometimes miss when looking at a story. It also makes it easier to observe the relationship between implementation and result (UI) by seeing them side by side.

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.

[igor-dv]

I will experiment with it =)

[vidaaudrey]

Maybe can use Dropdown in case there are too many files?

[kroeder]

We have the same requirement for our angular demo modules
We never write our code directly into the story but instead create a demo component that handles everything for us

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.

[igor-dv]

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 CalendarDemoComponent and add it as a different tab in the addons panel. Also, I wanted to add an ability to click on this import row and navigate to the component tab.

Do you have started working on this or have any specs / ideas finished

Yep, I have a branch,

[kroeder]

Here are a couple of thoughts to this coming from an Angular perspective

1. When you put your HTML-Template inside a calendar-demo.component.html, would you add yet another tab to see the actual HTML-Implementation of a component? Just seeing the TypeScript code of CalendarDemoComponent might not solve this issue
2. Does this scale? Like in 1. - What if there are plenty more interesting files - If I get you right and it would be added as another tab there's a point where you can throw away that story just because of all these files

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?

[igor-dv]

Sorry for not answering a while. Having some kind of file selection in storysource panel sounds interesting =)
Anyway, I think the challenging thing here is retrieving an interesting content. Also, I hope it won't harm to performance very much...

[mattdsteele]

@igor-dv any update on this? We've got a set of Angular stories similar to @kroeder's use case, and looking at options to display the story's source code.

[anoopsinghbayes]

@igor-dv this would be a cool feature to have

[shilman]

cc @expe-lbenychou

[RuneKR]

Someone looked into this yet? I will implement a POC next week. Would imagine the POC working like this in CSF:

// one file import
MyStory.story = {
  source: './path/to/my.source.tsx'
}
// multiple files assuming [0] is the main source
MyStory.story = {
  source: ['./path/to/my.source.tsx', './path/to/other/my.source.tsx']
}

I will then create a webpack plugin to attach source code following a specific glob/regex (such as *.source.tsx) and put it in storybook like done in:

storybook/lib/source-loader/src/client/preview.js

Line 28 in da303c5

channel.emit(STORY_EVENT_ID, {

I won't be able to do it exactly like storysource is doing it, but that is overall the idea. Thoughts?

[shilman]

cc @atanasster

[atanasster]

@RuneKR - we are in the process of refactoring source-loader #9547 and this should be done easier with the new code base. Do you want us to work together on implementing this feature?

[RuneKR]

Yeah that would be great. I will have a look at your current progress!

[RuneKR]

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:

• Fully extendable framework already in place (everyone can write addons as normal)
• Supports multiple tabs for sources
• Supports knobs etc

Thoughts @atanasster & @shilman ?

[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.

[kyrstenkelly]

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.

[sscaff1]

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.