feat: add error boundary and responsiveness to SuperChart

[kristw]

🏠 Internal

• Rename former SuperChart class to SuperChartCore.
• Add @vx/responsive type declaration.

🏆 Enhancements

Create new class SuperChart that wraps SuperChartCore.
Create another new class SuperChartShell to wrap SuperChart and provide backward-compatibility API. This can be removed in the upcoming breaking change.
SuperChartShell is exported as SuperChart and provide 100% backward-compatibility.

• Provide ErrorBoundary, which can be disabled if needed.
• Allow users to specify width height as number or dynamic value such as 100%.
• Support spreading chartProps fields to top-level.

Before

This behavior is still supported, but less preferred.

<SuperChart chartProps={new ChartProps({ width: 400, height: 400, formData: {a: 1} })} />

Enhancement#1 Support plain object as chartProps

This format was used in many Storybooks, although it will show error once the story is converted to typescript. With this PR, the pattern is now legit.

<SuperChart chartProps={{ width: 400, height: 400, formData: {a: 1} }} />

Enhancement#2 Can list the fields as props to SuperChart

The new preferred way, which should be more natural.

<SuperChart width={400} height={400} formData={{a: 1}} />

See the storybook preview. Can use knobs to adjust width and height.

This one shows error boundary.

[codecov]

Codecov Report

Merging #175 into master will not change coverage.
The diff coverage is 100%.

@@          Coverage Diff          @@
##           master   #175   +/-   ##
=====================================
  Coverage     100%   100%           
=====================================
  Files          90     94    +4     
  Lines        1123   1157   +34     
  Branches      268    276    +8     
=====================================
+ Hits         1123   1157   +34

Impacted Files	Coverage Δ
...ackages/superset-ui-chart/src/models/ChartProps.ts	100% <ø> (ø)	⬆️
...rset-ui-chart/test/components/MockChartPlugins.tsx	100% <100%> (ø)	⬆️
...uperset-ui-chart/src/components/SuperChartCore.tsx	100% <100%> (ø)
...perset-ui-chart/test/components/promiseTimeout.tsx	100% <100%> (ø)
...rset-ui-chart/src/components/FallbackComponent.tsx	100% <100%> (ø)
...es/superset-ui-chart/src/components/SuperChart.tsx	100% <100%> (ø)	⬆️
...perset-ui-chart/src/components/SuperChartShell.tsx	100% <100%> (ø)
... and 1 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 54849c1...5c49d27. Read the comment docs.

[netlify]

Deploy preview for superset-ui ready!

Built with commit 5c49d27

https://deploy-preview-175--superset-ui.netlify.com

[kristw]

This PR is ready for review

[williaster]

LGTM overall! had a couple comments about possibly simplifying the API/questions about the API going forward.

[williaster]

Kernel makes this a little less understandable/more complex IMO, Base or Core seems a little more approachable 🤔

[kristw]

renaming to xxxCore

[williaster]

do we need to support both prop types? with a breaking version couldn't we just change to the new API?

or if you want to keep them around for a version, could we instead only support the new API in this component, and add a wrapper that just spreads chartProps to simplify this component?