Skip to content
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

Open
zetekla opened this issue May 10, 2018 · 27 comments
Open

Show more source files in storysource #3566

zetekla opened this issue May 10, 2018 · 27 comments

Comments

@zetekla
Copy link

zetekla commented May 10, 2018

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
Copy link
Contributor

Keraito commented May 11, 2018

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
Copy link
Contributor

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
Copy link
Member

@vidaaudrey
Copy link
Contributor

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
Copy link
Member

Hypnosphi commented May 12, 2018

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
Copy link
Contributor

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

image

@Hypnosphi
Copy link
Member

CC @igor-dv

@igor-dv
Copy link
Member

igor-dv commented May 14, 2018

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
Copy link
Contributor

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

@Keraito
Copy link
Contributor

Keraito commented May 14, 2018

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
Copy link
Member

igor-dv commented May 15, 2018

I will experiment with it =)

@vidaaudrey
Copy link
Contributor

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

@stale stale bot added the inactive label Jun 5, 2018
@igor-dv igor-dv added the todo label Jun 5, 2018
@stale stale bot removed the inactive label Jun 5, 2018
@kroeder
Copy link
Member

kroeder commented Jul 13, 2018

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
Copy link
Member

igor-dv commented Jul 18, 2018

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
Copy link
Member

kroeder commented Jul 18, 2018

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
Copy link
Member

igor-dv commented Jul 30, 2018

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

@Hypnosphi Hypnosphi changed the title Coursera-UI storybook Show more source files in storysource Sep 1, 2018
@storybookjs storybookjs deleted a comment from stale bot Oct 13, 2018
@mattdsteele
Copy link

mattdsteele commented Jan 2, 2019

@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
Copy link

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

@shilman
Copy link
Member

shilman commented Mar 16, 2019

cc @expe-lbenychou

@RuneKR
Copy link

RuneKR commented Jan 21, 2020

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:

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
Copy link
Member

shilman commented Jan 22, 2020

cc @atanasster

@atanasster
Copy link
Member

@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
Copy link

RuneKR commented Jan 22, 2020

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

@RuneKR
Copy link

RuneKR commented Mar 25, 2020

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
Copy link
Member

shilman commented Mar 25, 2020

@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
Copy link

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
Copy link

sscaff1 commented May 3, 2023

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.

@shilman shilman removed the todo label Jun 20, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests