Waffle next

[plouc]

Adjust @nivo/waffle to be more in line with other packages.

---

🧰 Internal

• Migrate the package to TypeScript, so typings should now be correct.
• Not specific to @nivo/waffle, upgraded jest and enabled --workerThreads for the pgks-test make target.
• Introduce a new @nivo/grid core package.
• Introduce a new @nivo/canvas core package.

🎉 Improvements

• Components now support aria attributes.
• SVG and HTML implementations now support layers.
• Rather than having event handlers attached to each individual cells, we now have areas which capture the events, it makes the tooltip smoother when using padding as before the tooltip disappeared due to the gaps.
• When using a custom tooltip, it'll behave like other packages, meaning that we won't wrap it with the default styled container (Custom tooltip render issue #2218).
• Introduce a testIdPrefix property, if specified, we're going to add a data-test-id attribute to the Waffle and WaffleHtml components, to ease testing. Please note that it doesn't work for WaffleCanvas as it has no concrete elements.
• The package won't rely on recompose anymore, finally 😅 (related to Tracking issue for removing recompose dependency #884).
• Introduce a new forwardLegendData property, allowing users to implement custom legends.
• Legend items order reacts to fillDirection.
• The package doesn't need lodash anymore.
• Add support for borderRadius on cells.

💥 Breaking Changes 😢 (but still improvements for most of them 😄):

• Remove react-motion and use @react-spring instead, meaning that the config you can use is slightly different.
  This will help to resolve Tracking issue for removing react-motion dependency #667, but @nivo/core should now only consider a react-spring config, to be addressed in a different PR.
• I couldn't reproduce the previous transitions, so it behaves a bit differently.
• Due to the introductions of areas, custom event handlers will now receive the data the cell is attached to rather than the cell itself, but if we want to somehow emulate the previous behavior, we can remove the areas layer and use a custom cell component using cellComponent.
• As suggested in Use readonly types for arrays where appropriate #2248, data is now readonly.
• fillDirection was defining the origin rather than the direction, which was a bit confusing, so things are now inverted, e.g, bottom has the same behavior as top in the previous version:

│   top             │   right           │   bottom          │   left            │
│                   │                   │   ↓               │                   │
│   8 ─── 7 ─── 6   │ → 0  ╭─ 3  ╭─ 6   │   0 ─── 1 ─── 2   │   8  ╭─ 5  ╭─ 2   │
│   ╭───────────╯   │   │  │  │  │  │   │   ╭───────────╯   │   │  │  │  │  │   │
│   5 ─── 4 ─── 3   │   1  │  4  │  7   │   3 ─── 4 ─── 5   │   5  │  4  │  1   │
│   ╭───────────╯   │   │  │  │  │  │   │   ╭───────────╯   │   │  │  │  │  │   │
│   2 ─── 1 ─── 0   │   2 ─╯  5 ─╯  8   │   6 ─── 7 ─── 8   │   6 ─╯  3 ─╯  0 ← │
│               ↑   │                   │                   │                   │

---

• Supersed @nivo/waffle typescript migration #1271.
• Resolve Migrate @nivo/waffle to TypeScript #1245.
• Resolve Custom tooltip render issue #2218.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
nivo	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 7, 2023 4:27am

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 5d95efc:

Sandbox	Source
nivo	Configuration
React 16.9.0	Issue #667