Show JSX if PropVal is a React element

[sventschui]

Issue:

What I did

JSX elements within prop values are now rendered completely (in Story Source and Prop Table). The behaviour can be reverted by configuring showSourceOfProps: false.

This yields some errors in the source code generation (with indentation).

I think it would be easier to do the JSX source generation outside of React components since there are a lot of "inverted" dependencies. Rendering the parent depends often on whether the child has multiple lines of code or just a single one.

There is some paddingLeft used for indentation currently what breaks copy & paste behaviour. I think some of the issues outlined could be fixed by using paddingLeft in some cases but I'd rather not do that (because copy & paste).

Would you be open to a diffrent approach on rendering the source code?

How to test

Create a story with a property value of type JSX element.

  .addWithInfo('Test', () => {
    const Test = ({ foo, bar, children, arr }) => (<div>
      <div>{foo}</div>
      <div>{bar}</div>
      {arr}
      <div>{children}</div>
    </div>);

    Test.propTypes = {
      foo: PropTypes.node.isRequired,
      bar: PropTypes.node,
      arr: PropTypes.arrayOf(PropTypes.node),
      obj: PropTypes.objectOf(PropTypes.node),
      children: PropTypes.node.isRequired,
    };

    Test.defaultProps = {
      bar: <div>default works in PropTable!</div>,
      arr: null,
      obj: null,
    };

    return (
      <Test foo={<div />} arr={[<Test foo={<div />} />, <Test foo={<div />} />, <Test foo={<div />} />, <Test foo={<div />} />, <Test foo={<div />} />]}>
        <Test
          foo={<div>foo <div>bar</div></div>}
          bar={<div>test</div>}
          arr={[<Test foo={<div />} />, <Test foo={<div />} />, <Test foo={<div />} />, <Test foo={<div />} />, <Test foo={<div />} />]}
          obj={{ foo: <Test foo={<div />} />, bar: <Test foo={<div />} />, }}
        >
          <div>children</div>
        </Test>
      </Test>
    );
  })

[codecov]

Codecov Report

Merging #1455 into master will decrease coverage by 0.32%.
The diff coverage is 0%.

@@            Coverage Diff             @@
##           master    #1455      +/-   ##
==========================================
- Coverage    14.6%   14.27%   -0.33%     
==========================================
  Files         202      201       -1     
  Lines        4655     4636      -19     
  Branches      528      504      -24     
==========================================
- Hits          680      662      -18     
- Misses       3519     3553      +34     
+ Partials      456      421      -35

Impacted Files	Coverage Δ
addons/info/src/index.js	0% <ø> (ø)	⬆️
addons/info/src/components/PropVal.js	0% <0%> (ø)	⬆️
addons/info/src/components/Story.js	0% <0%> (ø)	⬆️
addons/info/src/components/PropTable.js	0% <0%> (ø)	⬆️
addons/info/src/components/Node.js	0% <0%> (ø)	⬆️
addons/info/src/components/Props.js	0% <0%> (ø)	⬆️
app/react/src/client/preview/client_api.js	39.28% <0%> (-2.76%)	⬇️
...codemod/src/transforms/update-organisation-name.js	40.62% <0%> (ø)	⬆️
lib/ui/src/modules/ui/containers/down_panel.js	23.52% <0%> (ø)	⬆️
addons/knobs/src/components/types/Boolean.js	11.62% <0%> (ø)	⬆️
... and 27 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d63af0d...e444e15. Read the comment docs.

[danielduan]

Looks good! Thanks for the PR!

Can you add an example of this in the kitchen sink example app? You should also take a quick glance at the existing info usages there and see that nothing breaks.

[danielduan]

_braceWrap?

[sventschui]

nice catch

[danielduan]

Does this achieve something different than element + ''?

[danielduan]

I wonder if this should get passed as a context instead.

[danielduan]

To answer your question on the rendering part, I don't think any of us are married to a specific method. A lot of the decisions were made way back when it was hard to predict the complexity of info.

If you think there's a more logical way to render it, we'd love a PR.

[sventschui]

I'll try to elaborate on a more robust way to render the source. I think the copy & paste use case is big enough issue for me to stop using padding-left as indentation.

I'll add an example to the kitchen sink. Thanks for the heads up.

[ndelangen]

@sventschui could you have a look at the merge conflicts? 🙇

[sventschui]

@ndelangen I think you can close this PR. This will yield some errors. The source code generation thingy needs to be refactored