chore: write components using @prismicio/editor-ui

[bapmrl]

Completes DT-1098: AADev, I can write UI components in SM using the Editor's stack.

[xrutayisire]

Nice work!

[xrutayisire]

Nice work!

[linear]

DT-1098 AADev, I can write UI components in SM using the Editor's stack

We want to improve perceived quality, reduce the amount of duplicated styles/tokens and slowly move away from Theme UI (which is based on Emotion). The Editor project is using vanilla-extract and Radix UI with great success (and the Choosing a UI library for the Editor Notion page explains the rationale behind these choices). We are going to leverage the same technical stack to encourage cross-team collaboration and ease code reusability.

From now on, prior to developing UI components, engineers will have to:

1. Ask designers whether a component is (or will be) shared with the Editor.
   1. If that's the case, the component must be implemented in the Editor's repository.
   2. If that's not the case (or they don't know), the component must be implemented in Slice Machine's repository.

Additionally, all UI components will be implemented using Storybook. This will promote good separation of concerns (as we don't want domain code in UI components).

Checklist

• Check how Storybook and vanilla-extract are configured in the Editor's repository (bearing in mind they might not be using the latest major versions).
• Install Storybook 7.0 (or later), eslint-plugin-storybook and vanilla-extract as development dependencies of the slice-machine-ui workspace.
• Update all configurations files, including: .eslintignore, .eslintrc.js, .gitignore, .prettierignore...
• Add storybook (for development) and storybook-build (for production) scripts to the slice-machine-ui workspace.
• Move the prismicio/editor-ui's ThemeProvider to the root of Slice Machine and add it to Storybook's global decorators. Don't forget to pass it the mode="light" prop as we don't want to use the dark theme for now.
• Find the best way to use the prismicio/editor-ui's colors, selectors and sprinkles function to write Slice Machine specific components. You'll probably need baptiste.morelle or alexg's help as it might be difficult and require small changes to the Editor project.
• Write a temporary test component (and its corresponding story) in a new packages/slice-machine/src/components directory to ensure we can use the Editor's stack in the slice-machine-ui workspace.

In the unlikely case vanilla-extract can't be used with Next.js version 13 (or later), we'll have to migrate to Vite (and create another Linear issue). An interesting GitHub issue to read about this potential incompatibility is vanilla-extract-css/vanilla-extract#929.

[xrutayisire]

What do you think about adding a build storybook GitHub action? It could be sure in the future to deploy the storybook, but currently it could help us to know when someone will break storybook because of the difficult deps management.

[xrutayisire]

LGTM otherwise, good to merge, super nice to have this now, thanks!