chore: add storybook

[robinpyon]

Description

This PR adds Storybook for local component development as we evaluate its usage for MVI-2 and beyond.

Things to note:

• A small subset of primitive component stories have been created – we can look to migrate more over time if and when we're happy with Storybook.
• All component stories have a default Docs story (the component with no required props) and surfaces all available props for usage
• Inter has been added to both the manager (Storybook UI) and previews (the stories themselves)
  • We're still loading the version provided by the author, we'll need to swap this out for our own hosted version at some stage
• Theme scheme (dark / light mode) toggles only apply to the stories themselves (not the entire interface)
• All stories are wrapped with a common decorator which wraps stories in both a <ThemeProvider> but also a <Card> with padding
  • We may want to consider highlighting this, as usage of some props (e.g. muted on <Text> have no effect without a wrapping <Card>)
• A separate 'Theme' section has been created, which also contains the current @sanity/color color spectrum story, which may be useful as a reference
• stories/constants.ts defines a number of preconfigured Storybook controls which are imported in each story's meta definition. There may be a way to either obviate a lot of this via typing in future, or at the very least define these settings globally
• ui-workshop usage and associated stories are unaffected

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
sanity-ui-workshop	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 26, 2023 10:36am

[pedrobonamin]

Do we need this story to be called Overview? could it simply be "Docs" ? And we get only on story generated for this file

[robinpyon]

Good question – I opted against "Docs" since this is a composite component (it's not exported and receives no props / has no controls).

It should probably be rendered as a page rather than a story, which might make this relationship a little more explicit in the sidebar?

[pedrobonamin]

Makes sense, no need to change it.

[pedrobonamin]

I think this is great.
Pushed a PR adding a new story for tooltips to have a demo using play function inside the stories.
Will appreciate your thoughts in that #1139

Do you think we could have a README file in the root of storybook stories to indicate some of the findings that you discovered with the current implementation?

I think it's worth mentioning (some copied from your PR description)

• Theme scheme (dark / light mode) toggles only apply to the stories themselves (not the entire interface)
• All stories are wrapped with a common decorator which wraps stories in both a <ThemeProvider> but also a <Card> with padding
• We may want to consider highlighting this, as usage of some props (e.g. muted on <Text> have no effect without a wrapping <Card>)
• Not accepting to change titles in the export default of stories.
• Folders structure.
• Docs component behaviour

[socket-security]

New dependencies detected. Learn more about Socket for GitHub ↗︎

Packages	Version	New capabilities	Transitives	Size	Publisher
storybook	7.4.5	None	+12	13.4 MB	shilman