feat(storybook): Storybook 7, migrate docs from READMEs to stories, add guides

[sashathor]

Description of changes

This PR implements:

• Migrate to Storybook 7 and update docs
• Make Storybook work automatically with sample tacosoft data

See preview

Checklist

Before merging to main:

• Tests
• Manually tested in React apps
• Release notes
• Approved

Release notes

# App changes

## Storybook

- Migrated to Storybook version 7.
- Fixed HMR support for the stories.
- Added a11y checker.
- Added documentation: Overview, Installation, Usage, Customization, Migration guide, Contributing, APIs.
- Added custom components documentation.
- Updated READMEs.
- Updated component stories.
- Added Propel's favicon.
- Added Propel's logo.
- Added access token endpoint that automatically generates a token to Tacasoft sample data for Connected components on every page load.
- Introduced a solution to display API props for non-primitive types.

[vercel]

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

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
ui-kit	⬜️ Ignored (Inspect)	Visit Preview		Sep 19, 2023 6:21am

[felipecadavid]

Overall it lgtm, I just have a question regarding axios and I think I found a bug in the storybook

[felipecadavid]

Can't we use fetch here instead? What are the benefits of using axios?

[sashathor]

It's a matter of personal preferences. It's a Storybook dependency and will not affect the bundle size of the libs. There are also some benefits of using axios:

• Axios has built-in XSRF(Cross-Site Request Forgery) protection, while Fetch does not.
• Axios has the ability to intercept HTTP requests but Fetch, by default, does not.
• Axios allows canceling requests and request timeout but fetch does not.
• IE11 support

Also, to make it work in Storybook it's required to use an addon to handle real API calls (not mocks). storybook-fetch-addon is 4 years old vs storybook-axios is 2 years old.

[felipecadavid]

It seems like changing the theme is not working? Maybe this is not a feature for this PR and we'd want to remove this button instead?

Screen.Recording.2023-09-18.at.10.58.08.AM.mov

[sashathor]

It seems like changing the theme is not working? Maybe this is not a feature for this PR and we'd want to remove this button instead?

Screen.Recording.2023-09-18.at.10.58.08.AM.mov

Yeah, we don't have theme support yet. I made a few experiments and this is a legacy. I've temporarily removed the theme switcher from the toolbar.

[sashathor]

The pattern tag is used to mark (hidden) stories that shouldn't be added to the Storybook's sidebar. We use it for some component stories that are part of the documentation (e.g. Leaderboard CustomStyleStory) and for non-primitive type stories (e.g. ChartBarProps).

[sashathor]

Establishing the serverless function on Vercel for Storybook setup is a bit tricky.
First of all, there is an official instruction: Deploying Storybook with Vercel.
Secondly, Serverless Functions Quickstart.
The thing is that seems like Vercel runs some simple HTTP server for the Storybook setup, which can’t handle unbundled files (e.g. *.ts).
So, I’ve seen two main roads here:

1. Configure a dummy Next.js project to handle calls to the functions and serve static Storybook content.
2. Find a way to force Vercel’s Storybook env to handle function calls.
   I didn’t find a quick solution for 1 and honestly, I don’t like the idea of proxying calls to static files through the next.js env.
   I decided to follow 2. The initial assumption was to pre-build a script for the serverless function with tsc to the vercel’s api/ folder (Vercel’s reserved folder). The build workflow works without errors locally and on Vercel, but for some reasons, Vercel refuses to include tsc output in the final Deployment.
   What helped was the creation of an empty file (a placeholder) and adding it to the repo, e.g. api/token/route.js.
   With this hack Vercel started to include the function to the Deployment.