Displaying Full Source Code

[acruigrok]

I'm currently trying to build a UI Library that's built on top of Material-Ui V1. I want our developers to be able to reference the component code from Storybook.

This is an example of what I'd like to be able to see in Storybook (the full component file with dependencies):

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

function PrimaryButton(props) {
  const { classes } = props;
  return (
    <Button
      variant="contained"
    >
      Primary Button
  </Button>
  );
}

PrimaryButton.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(PrimaryButton);

I've implemented @storybook/addon-storysource and @storybook/addon-info. They are great features, but they don't work for our use-case. They can't see past the Material-UI layer, and if it did it would only be the part of the component that's rendered.

This is the output from addon-info:

<div style={{textAlign: 'center'}}>
  <WithStyles(PrimaryButton)/>
</div>

Are there any recommended ways of displaying the full source code? Thanks in advance for any guidance you can provide.

[igor-dv]

I am working on improvements to the addons-storysource (discussed in #3566), but have no ETA yet.

[maciej-gurban]

I've run into similar issue. Is there any progress on this front?

[ndelangen]

Let's concentrate the discussion here: #3566