docs(storybook): Lemon UI

[Twixes]

Problem

We have a growing suite of building block components designed by Chris (often prefixed with Lemon to differentiate them from Ant Design used before). Those components serve our needs well, but the docs for using them are scattered in Storybook, and a bit lacking in examples for more advanced uses.

Changes

Adds section "Lemon UI" to Storybook, moves some existing stories there, also adding some new ones (for buttons and tables most importantly).

[Twixes]

This is the collection at the moment:

It's still missing a few components:

• LemonRow
• LemonButtonWithSideAction
• LemonButtonWithPopup
• LemonButton
• More
• PaginationControl

And I haven't touched two stories here that could use a big revamp:

• LemonTable
• Popup

But this is already a huge improvement, so I think it's ready for review.

I refactored a few Lemon things, which inflates the diff:

• Renamed LemonSpacer to LemonDivider and moved it out of LemonRow.tsx to LemonDivider.tsx
• Moved most of disabled styling from LemonRow-based components to LemonRow itself – since it was all basically the same and maintaining separate .LemonCheckbox--disabled, .LemonSwitch--disabled, .LemonInput--disabled didn't make a ton sense
• Fixed LemonSwitch taking up full width by default
• Consolidated styles to the BEM convention in AlertMessage, Spinner, and Splotch
• Removed deprecated InfoMessage, which was just AlertMessage with type="info"
• Made LemonSwitch use Spinner in loading state for better consistency and simpler code
• Made number handling in Lettermark more logical

[pauldambra]

overall LGTM

Big step forward in discoverability! I didn't know LemonSpacer existed (and LemonDivider is a much better name)

We could add a linter to warn when using the components where someone should use the Lemon version instead...

[pauldambra]

Example of custom linting #8156

[clarkus]

Looks like a good start. I'd like to work on dialing in some color usage at some point. We need to use alternate values for text in a lot of scenarios, so mapping those to variables and guidelines would be good. I will work on examples for figma to help come up with some guidelines.

As an example, this color combination is really hard to read. There's a related pattern with our letter-marks for identifying users and organizations. Some reusable set of color combinations for these components would be great.

[mariusandra]

This is great! 👍

Also, looks like code.

[Twixes]

@pauldambra Linter rules are super cool, but my worry here is that it would also alert on all existing uses of components we're phasing out, which would be a ton of noise. So going just for dev awareness for now.