deps: Update @geometricpanda/storybook-addon-badges to v0.2.2

[frankieyan]

Closes #678

Short description

This updates @geometricpanda/storybook-addon-badges to the latest version, because the previous version we were using has an older version of @storybook/theming as a dependency, which includes the non-React 18 compatible Emotion 10.

The interesting thing is that the newest version of addon-badges lists @storybook/[email protected] as a prod dependency without using the ^ semver range, but once installed in Reactist, the semver symbol is included, allowing it to use v6.5.3 and deduped between other dependencies that use the theming package. I have no idea why this happened though I've been looking at the wrong package.json the whole time in the repo. This is the correct one: https://github.com/geometricpanda/geometricpanda/blob/72ac16e6eb121480efccc426a4aac275d3b09b4d/libs/storybook-addon-badges/package.json#L40

The only remaining package that pulls in Emotion 10 is addon-knobs, which will be removed with #677

How the badges are styled were deprecated as well, and has been updated to the new API (ref).

Test plan

• Test that running npm install on this branch results in the package tree above (same versions of @storybook/theming throughout, only one instance of @emotion/core left)
• Run npm run storybook and check that the badges resembles the deployed docs at https://doist.github.io/reactist (it's by default positioned a little further away from the tabs which I thought looked better)

Before	After

PR Checklist

• Added tests for bugs / new features
• Updated docs (storybooks, readme)
• Executed npm run validate and made sure no errors / warnings were shown
• Described changes in CHANGELOG.md
• Bumped version in package.json and package-lock.json (npm --no-git-tag-version version <major|minor|patch>) ref
• Updated all static build artifacts (npm run build-all)

Versioning

No release needed

[pawelgrimm]

🚀 Looks great! 2 small nits, but I don't need to see this again.

---

✅ I ran npm explain @emotion/core and got this, so I think we're in good shape:

@emotion/[email protected] dev
node_modules/@emotion/core
@emotion/core@"^10.0.9" from [email protected]
node_modules/react-select👍
react-select@"^3.2.0" from @storybook/[email protected]
node_modules/@storybook/addon-knobs
dev @storybook/addon-knobs@"^6.3.1" from the root project

💭 (nit): The badge has more padding on the left than on the right:

[frankieyan]

💭 (nit): The badge has more padding on the left than on the right:

@pawelgrimm the padding/margin around the badges are set here: https://github.com/geometricpanda/geometricpanda/blob/72ac16e6eb121480efccc426a4aac275d3b09b4d/libs/storybook-addon-badges/src/lib/blocks/badges.tsx#L57

I've tried setting layoutMargin on the theme (in .storybook/theme.js), but it doesn't seem to allow being overridden. Its type and docs also exclude it from create's config options. I tried to run the addon's storybook, but I ran into some errors on that end too. We can log an issue later so they can be aware of the issue though.