Add StoryBook #251

Vadorequest · 2021-01-11T15:19:37Z

Status

STABLE, the biggest issues have been fixed (babel/webpack/Emotion 10-11/Node vs browser/React providers).

~~Currently studying Storybook addons (first time using SB) to see what should be included by default.~~

~~SB is now configured with proper plugins, adding more stories (ideally, all components should have their stories)~~.

All NRN components have been documented thoroughly.

Resources:

Issues

⚠️ Emotion 11 emotion-js/emotion#1606 (comment) css prop isn't recognized in some part of the code
- It doesn't seem to be a compilation issue (Next.js compiles properly locally and on Vercel). The error is only visible on the WebStorm IDE. Maybe a TS type override might fix the issue, until Storybook upgrades to Emotion 11? (couldn't find a way to override TS types DOMAttributes in node_modules/@emotion/core/types/index.d.ts)
- To solve this, I've @ts-ignore the few statements where errors were thrown (~6)
✅ Emotion 11 requires to use a custom babel file. I first tried using the same as the one used by Next.js (babel.config.js) but it uses automatic runtime, which isn't supported by MDX, which is used in Storybook. So, I had to create a custom .storybook/babel.config.js file using classic mode. See https://emotion.sh/docs/css-prop#babel-preset
✅ NRN defines many providers, those need to be mocked using decorators in .storybook/preview.js
✅ Next.js router needs to be mocked (decorator), I used storybook-addon-next-router
✅ Sentry uses @sentry/node, webpack was configured to replace it by @sentry/browser during compilation
✅ The Airtable dataset needed to be mocked
✅ Various issues with node-related modules fs, etc. (webpack config)
✅ Added support for CSS Modules, used storybook-css-modules-preset (they're supported natively in Next.js) - See Next.js + TypeScript + Storybook compatibility issues storybookjs/storybook#9610 (comment) and @next/plugin-storybook issues vercel/next.js#19345

Features

Storybook static site hosted on Vercel

Upon code change, automatically export the Storybook static site and deploys it on Vercel

This way, you always have an online up-to-date version of your components!

Demo: https://nrn-v2-mst-aptd-at-lcz-sty-storybook.vercel.app/ (auto-updated)

Support for MDX, TSX, Emotion 11 and CSS Modules

Our components can be used normally, with TypeScript and Emotion or CSS Modules (that wasn't as easy to implement as one might believe)

I18n support in Stories

Our stories can be localized using a custom locale in the Storybook top toolbar!
Locize translations are being fetched upon build and then used within stories (using a filesystem cache to avoid fetching Locize API during navigation, to reduce cost).

Usage

Storybook localhost

Run yarn sb

Storybook online

Automatically built + deployed on another Vercel project (dedicated project), as a static site.

https://nrn-v2-mst-aptd-at-lcz-sty-storybook.vercel.app/

Looking for a way to optionally protect the static site behind Basic Auth.

github-actions · 2021-01-11T15:23:07Z

✅ Deployment SUCCESS
Commit f41008e successfully deployed to https://nrn-v2-mst-aptd-at-lcz-sty-c1-dy4lu8awa.vercel.app
Deployment aliased as nrn-v2-mst-aptd-at-lcz-sty-c1-storybook.vercel.app

github-actions · 2021-01-11T15:29:12Z

✅ E2E tests SUCCESS for commit f41008e previously deployed at https://nrn-v2-mst-aptd-at-lcz-sty-c1-dy4lu8awa.vercel.app

… already installed by Next.js and shouldn't be specified (let Next.js auto-update those) + use fixed versions + ignore storybook-static folder (when exporting static site)

github-actions · 2021-01-11T15:55:31Z

✅ Deployment SUCCESS
Commit d5570f8 successfully deployed to https://nrn-v2-mst-aptd-at-lcz-sty-c1-achjbsxj3.vercel.app
Deployment aliased as nrn-v2-mst-aptd-at-lcz-sty-c1-storybook.vercel.app

github-actions · 2021-01-11T16:01:39Z

✅ E2E tests SUCCESS for commit d5570f8 previously deployed at https://nrn-v2-mst-aptd-at-lcz-sty-c1-achjbsxj3.vercel.app

github-actions · 2021-01-11T16:02:12Z

✅ Deployment SUCCESS
Commit 206f209 successfully deployed to https://nrn-v2-mst-aptd-at-lcz-sty-c1-k3vj7njcb.vercel.app
Deployment aliased as nrn-v2-mst-aptd-at-lcz-sty-c1-storybook.vercel.app

github-actions · 2021-01-11T16:07:23Z

✅ E2E tests SUCCESS for commit 206f209 previously deployed at https://nrn-v2-mst-aptd-at-lcz-sty-c1-k3vj7njcb.vercel.app

github-actions · 2021-01-11T16:58:21Z

✅ Deployment SUCCESS
Commit a2cd983 successfully deployed to https://nrn-v2-mst-aptd-at-lcz-sty-c1-59pt4acow.vercel.app
Deployment aliased as nrn-v2-mst-aptd-at-lcz-sty-c1-storybook.vercel.app

github-actions · 2021-01-11T17:03:23Z

✅ E2E tests SUCCESS for commit a2cd983 previously deployed at https://nrn-v2-mst-aptd-at-lcz-sty-c1-59pt4acow.vercel.app

github-actions · 2021-01-11T17:29:15Z

❌ Deployment FAILED
Commit 6a3bff2 failed to deploy Storybook static site to
click to see logs

github-actions · 2021-01-11T17:35:33Z

✅ Deployment SUCCESS
Commit 6a3bff2 successfully deployed to https://nrn-v2-mst-aptd-at-lcz-sty-c1-gvvn8qawf.vercel.app
Deployment aliased as nrn-v2-mst-aptd-at-lcz-sty-c1-storybook.vercel.app

github-actions · 2021-01-11T17:40:28Z

✅ E2E tests SUCCESS for commit 6a3bff2 previously deployed at https://nrn-v2-mst-aptd-at-lcz-sty-c1-gvvn8qawf.vercel.app

github-actions · 2021-01-11T17:40:49Z

❌ Deployment FAILED
Commit f6d01a6 failed to deploy Storybook static site to
click to see logs

github-actions · 2021-01-11T17:44:39Z

✅ Deployment SUCCESS
Commit f6d01a6 successfully deployed to https://nrn-v2-mst-aptd-at-lcz-sty-c1-lu970cmal.vercel.app
Deployment aliased as nrn-v2-mst-aptd-at-lcz-sty-c1-storybook.vercel.app

…ting + don't deploy to all regions to avoid Vercel error

github-actions · 2021-01-11T17:50:11Z

✅ E2E tests SUCCESS for commit f6d01a6 previously deployed at https://nrn-v2-mst-aptd-at-lcz-sty-c1-lu970cmal.vercel.app

github-actions · 2021-01-11T17:55:44Z

✅ Deployment SUCCESS
Commit f5e4923 successfully deployed to https://nrn-v2-mst-aptd-at-lcz-sty-c1-9tfk8dr3x.vercel.app
Deployment aliased as nrn-v2-mst-aptd-at-lcz-sty-c1-storybook.vercel.app

github-actions · 2021-01-11T17:55:47Z

✅ Deployment SUCCESS
Commit f5e4923 successfully deployed Storybook static site to https://nrn-v2-mst-aptd-at-lcz-sty-storybook-4m3u29dwh.vercel.app
Deployment aliased as

…useful later to trigger production deployment on master branch)

github-actions · 2021-01-11T18:00:27Z

✅ Deployment SUCCESS
Commit e6251e6 successfully deployed Storybook static site to https://nrn-v2-mst-aptd-at-lcz-sty-storybook-4m3u29dwh.vercel.app
Deployment aliased as

github-actions · 2021-01-11T18:01:04Z

✅ E2E tests SUCCESS for commit f5e4923 previously deployed at https://nrn-v2-mst-aptd-at-lcz-sty-c1-9tfk8dr3x.vercel.app

github-actions · 2021-01-16T19:15:25Z

✅ E2E tests SUCCESS for commit 623d2d0 previously deployed at https://nrn-v2-mst-aptd-at-lcz-sty-c1-fwgk2f52j.vercel.app

github-actions · 2021-01-16T22:21:48Z

✅ Deployment SUCCESS
Commit d179fa4 successfully deployed to https://nrn-v2-mst-aptd-at-lcz-sty-c1-7oaf6d5f4.vercel.app
Deployment aliased as nrn-v2-mst-aptd-at-lcz-sty-c1-storybook.vercel.app

github-actions · 2021-01-16T22:27:17Z

✅ E2E tests SUCCESS for commit d179fa4 previously deployed at https://nrn-v2-mst-aptd-at-lcz-sty-c1-7oaf6d5f4.vercel.app

github-actions · 2021-01-16T22:28:59Z

✅ Deployment SUCCESS
Commit 8467569 successfully deployed to https://nrn-v2-mst-aptd-at-lcz-sty-c1-d8wh6xvpg.vercel.app
Deployment aliased as nrn-v2-mst-aptd-at-lcz-sty-c1-storybook.vercel.app

github-actions · 2021-01-16T22:29:28Z

✅ Deployment SUCCESS
Commit d179fa4 successfully deployed Storybook static site to https://nrn-v2-mst-aptd-at-lcz-sty-storybook-3gv3drgkg.vercel.app
Deployment aliased as nrn-v2-mst-aptd-at-lcz-sty-storybook

github-actions · 2021-01-16T22:29:59Z

✅ Deployment SUCCESS
Commit 8467569 successfully deployed Storybook static site to https://nrn-v2-mst-aptd-at-lcz-sty-storybook-odeivnhpr.vercel.app
Deployment aliased as nrn-v2-mst-aptd-at-lcz-sty-storybook

github-actions · 2021-01-16T22:34:03Z

✅ E2E tests SUCCESS for commit 8467569 previously deployed at https://nrn-v2-mst-aptd-at-lcz-sty-c1-d8wh6xvpg.vercel.app

github-actions · 2021-01-16T23:38:58Z

✅ Deployment SUCCESS
Commit 833c4e1 successfully deployed to https://nrn-v2-mst-aptd-at-lcz-sty-c1-ka6iuy3za.vercel.app
Deployment aliased as nrn-v2-mst-aptd-at-lcz-sty-c1-storybook.vercel.app

github-actions · 2021-01-16T23:43:46Z

✅ E2E tests SUCCESS for commit 833c4e1 previously deployed at https://nrn-v2-mst-aptd-at-lcz-sty-c1-ka6iuy3za.vercel.app

github-actions · 2021-01-16T23:47:46Z

✅ Deployment SUCCESS
Commit f1e44ff successfully deployed to https://nrn-v2-mst-aptd-at-lcz-sty-c1-e631etced.vercel.app
Deployment aliased as nrn-v2-mst-aptd-at-lcz-sty-c1-storybook.vercel.app

github-actions · 2021-01-16T23:48:15Z

✅ Deployment SUCCESS
Commit f1e44ff successfully deployed Storybook static site to https://nrn-v2-mst-aptd-at-lcz-sty-storybook-ch60it9z1.vercel.app
Deployment aliased as nrn-v2-mst-aptd-at-lcz-sty-storybook

github-actions · 2021-01-16T23:52:57Z

✅ E2E tests SUCCESS for commit f1e44ff previously deployed at https://nrn-v2-mst-aptd-at-lcz-sty-c1-e631etced.vercel.app

github-actions · 2021-01-16T23:53:12Z

✅ E2E tests SUCCESS for commit f1e44ff previously deployed Storybook static site at https://nrn-v2-mst-aptd-at-lcz-sty-storybook-ch60it9z1.vercel.app

Run "npx sb init"

f41008e

Rename script names (add "yarn sb" shortcut)

9922b50

Vadorequest added 2 commits January 11, 2021 16:45

Remove @babel/core and babel-loader explicit dependencies, as they're…

d5570f8

… already installed by Next.js and shouldn't be specified (let Next.js auto-update those) + use fixed versions + ignore storybook-static folder (when exporting static site)

Moved native SB examples into separate subfolder

206f209

Extends DOMAttributes (necessary to use Emotion "css" props)

a2cd983

Vadorequest added 3 commits January 11, 2021 18:27

Misc duplicated doc

3cd2d0c

Rename story (forgotten)

c857b5f

Add new github action workflow - deploy-vercel-storybook.yml

6a3bff2

Run yarn install (necessary to build storybook)

f6d01a6

Fixed deploy:sb:gha command + added deploy:sb:gha:fast for faster tes…

f5e4923

…ting + don't deploy to all regions to avoid Vercel error

Use rlespinasse/github-slug-action to detect current branch (will be …

e6251e6

…useful later to trigger production deployment on master branch)

Fix custom auto-aliasing

cccfcd9

Vadorequest added 3 commits January 16, 2021 22:51

Misc doc

41c3e2d

Improve doc

d179fa4

Fix link

8467569

Vadorequest added 5 commits January 16, 2021 23:40

Misc doc

fc4e65a

Misc doc

6c683b7

Add cypress custom commands for testing iframe

7488ce7

Add custom cypress scripts to run Cypress for storybook

2058d2c

Automatically run Cypress once Storybook has been deployed

833c4e1

Vadorequest added 2 commits January 17, 2021 00:39

Add await-for-vercel-deployment job

d5e7c1c

Fix job

f1e44ff

Vadorequest marked this pull request as ready for review January 16, 2021 23:55

Vadorequest merged commit 2d9587a into v2-mst-aptd-at-lcz-sty Jan 16, 2021

Vadorequest deleted the storybook branch January 16, 2021 23:56

Vadorequest added a commit that referenced this pull request Jan 17, 2021

Add StoryBook (#251)

73f5119

This was referenced Jan 17, 2021

Add StoryBook to v2-mst-aptd-gcms-lcz-sty #258

Merged

Add Storybook #252

Closed

eric-burel mentioned this pull request Feb 15, 2021

Storybook is not able to resolve path with Next js absolute import storybookjs/storybook#11639

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add StoryBook #251

Add StoryBook #251

Vadorequest commented Jan 11, 2021 •

edited

github-actions bot commented Jan 11, 2021

github-actions bot commented Jan 11, 2021

github-actions bot commented Jan 11, 2021

github-actions bot commented Jan 11, 2021

github-actions bot commented Jan 11, 2021

github-actions bot commented Jan 11, 2021

github-actions bot commented Jan 11, 2021

github-actions bot commented Jan 11, 2021

github-actions bot commented Jan 11, 2021

github-actions bot commented Jan 11, 2021

github-actions bot commented Jan 11, 2021

github-actions bot commented Jan 11, 2021

github-actions bot commented Jan 11, 2021

github-actions bot commented Jan 11, 2021

github-actions bot commented Jan 11, 2021

github-actions bot commented Jan 11, 2021

github-actions bot commented Jan 11, 2021

github-actions bot commented Jan 11, 2021

github-actions bot commented Jan 16, 2021

github-actions bot commented Jan 16, 2021

github-actions bot commented Jan 16, 2021

github-actions bot commented Jan 16, 2021

github-actions bot commented Jan 16, 2021

github-actions bot commented Jan 16, 2021

github-actions bot commented Jan 16, 2021

github-actions bot commented Jan 16, 2021

github-actions bot commented Jan 16, 2021

github-actions bot commented Jan 16, 2021

github-actions bot commented Jan 16, 2021

github-actions bot commented Jan 16, 2021

github-actions bot commented Jan 16, 2021

Add StoryBook #251

Add StoryBook #251

Conversation

Vadorequest commented Jan 11, 2021 • edited

Status

Issues

Features

Storybook static site hosted on Vercel

Support for MDX, TSX, Emotion 11 and CSS Modules

I18n support in Stories

Usage

Storybook localhost

Storybook online

github-actions bot commented Jan 11, 2021

github-actions bot commented Jan 11, 2021

github-actions bot commented Jan 11, 2021

github-actions bot commented Jan 11, 2021

github-actions bot commented Jan 11, 2021

github-actions bot commented Jan 11, 2021

github-actions bot commented Jan 11, 2021

github-actions bot commented Jan 11, 2021

github-actions bot commented Jan 11, 2021

github-actions bot commented Jan 11, 2021

github-actions bot commented Jan 11, 2021

github-actions bot commented Jan 11, 2021

github-actions bot commented Jan 11, 2021

github-actions bot commented Jan 11, 2021

github-actions bot commented Jan 11, 2021

github-actions bot commented Jan 11, 2021

github-actions bot commented Jan 11, 2021

github-actions bot commented Jan 11, 2021

github-actions bot commented Jan 16, 2021

github-actions bot commented Jan 16, 2021

github-actions bot commented Jan 16, 2021

github-actions bot commented Jan 16, 2021

github-actions bot commented Jan 16, 2021

github-actions bot commented Jan 16, 2021

github-actions bot commented Jan 16, 2021

github-actions bot commented Jan 16, 2021

github-actions bot commented Jan 16, 2021

github-actions bot commented Jan 16, 2021

github-actions bot commented Jan 16, 2021

github-actions bot commented Jan 16, 2021

github-actions bot commented Jan 16, 2021

Vadorequest commented Jan 11, 2021 •

edited