How do I correlate a Story to actual, real code?

[growthwp]

Hey!

My use-case here is multiple containers, each one being a grid with variable sizes. I went and looked at the stories currently available: https://5fc05e08a4a65d0021ae0bf2-jgkpoqfady.chromatic.com/?path=/docs/presets-sortable-grid--variable-sizes and that was great. Well, if you actually get to one that is also covered in the stories directory from the repo. This one isn't. Sure, if I click "Source code", it'll show me the following:

() => (
  <Sortable
    {...props}
    itemCount={14}
    getItemStyles={({index}) => {
      if (index === 0 || index === 9) {
        return {
          fontSize: '2rem',
          padding: '36px 40px',
        };
      }

      return {};
    }}
    wrapperStyle={({index}) => {
      if (index === 0 || index === 9) {
        return {
          height: 288,
          gridRowStart: 'span 2',
          gridColumnStart: 'span 2',
        };
      }

      return {
        width: 140,
        height: 140,
      };
    }}
  />
)

But that doesn't really help. I can't just get this on local and run it, because it's not the whole code.

How can I go about seeing the actual, real source code for any given example?

[clauderic]

Hey @growthwp, the source code for stories is currently optimized for code shareability across different stories to avoid maintenance debt. To be clear, all the source code is there, it's just not optimized for individual legibility of a story or being something you can easily copy paste into a project (yet).

Moving forward, the plan is to create examples hosted on CodeSandbox that can easily be forked.

[growthwp]

Thank you, it's a good move. Developers will go the extra mile of "making it work" if it meant solving their problems :P