CentileChart stories crashing on fontSize

[mbarton]

Start up Storybook and visit the Centile Chart > With Height And No Data story.

It crashes with an error:

TypeError: Cannot read properties of undefined (reading 'fontSize')
    at CentileChart (http://localhost:6006/src_CentileChart_CentileChart_tsx-src_testParameters_measurements_prematureGirlOverThreeHeigh-603ab9.iframe.bundle.js:830:41)
    at renderWithHooks (http://localhost:6006/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_mjs-node_modules_storybo-286a48.iframe.bundle.js:49742:18)
    at mountIndeterminateComponent (http://localhost:6006/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_mjs-node_modules_storybo-286a48.iframe.bundle.js:53506:13)
    at beginWork (http://localhost:6006/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_mjs-node_modules_storybo-286a48.iframe.bundle.js:55019:16)
    at beginWork$1 (http://localhost:6006/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_mjs-node_modules_storybo-286a48.iframe.bundle.js:60858:14)
    at performUnitOfWork (http://localhost:6006/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_mjs-node_modules_storybo-286a48.iframe.bundle.js:59992:12)
    at workLoopSync (http://localhost:6006/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_mjs-node_modules_storybo-286a48.iframe.bundle.js:59898:5)
    at renderRootSync (http://localhost:6006/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_mjs-node_modules_storybo-286a48.iframe.bundle.js:59866:7)
    at recoverFromConcurrentError (http://localhost:6006/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_mjs-node_modules_storybo-286a48.iframe.bundle.js:59282:20)
    at performConcurrentWorkOnRoot (http://localhost:6006/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_mjs-node_modules_storybo-286a48.iframe.bundle.js:59182:22)

I think we are not passing referenceTextStyle in the styles hardcoded here? https://github.com/rcpch/digital-growth-charts-react-component-library/blob/live/src/testParameters/styles/tanner3Styles.ts. They perhaps need regenerating?

[mbarton]

@eatyourpeas I'm very new to this code so this might be a silly question but could we call makeAllStyles from the stories to avoid getting out of sync in the future?

[eatyourpeas]

Loving the chromatic thank you @mbarton
The RCPCHChart component is really a wrapper for the CentileChart and SDSChart components. The styles are created before the RCPCHChart component is instantiated because the theme or custom style props passed in from the user need to be converted into the style object (using makeAllStyles) before passing into whichever chart is then rendered.

So best of all would be to remove all the stories in there currently for SDSChart and CentileChart and have a library of examples all using RCPCHChart instead. Within the RCPCHChart folder we would have the docs (as they are now), and then subfolders for each of the different chart types, measurement methods, sexes and references. Perhaps a preterm section for each also.