Add storybook and a Header story

[marcaaron]

Details

Adds Storybook to E.cash

Fixed Issues

Fixes https://github.com/Expensify/Expensify/issues/164021

Tests

1. npm i
2. Run npm run storybook
3. Verify that storybook opens

QA

1. Navigate to https://staging.expensify.cash/docs
2. Verify that storybook is accessible

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

Web

[github-actions]

CLA Assistant Lite bot All contributors have signed the CLA ✍️ ✅

[botify]

Hey, I noticed you changed some webpack configuration files. This can break production builds. Did you remember to run a production build locally to verify they still work?

[botify]

Hey, I noticed you changed some webpack configuration files. This can break production builds. Did you remember to run a production build locally to verify they still work?

[botify]

Hey, I noticed you changed some webpack configuration files. This can break production builds. Did you remember to run a production build locally to verify they still work?

[roryabraham]

GH actions code seems fine!

[shawnborton]

This is probably not the best place to deliver this feedback, but what is the difference between default and large for the header text size? I actually think large (assuming it's 17) is probably the default here. In fact, I think the only other time we would have a non-17 sized font in the header area is for chats. And I think that's okay - it's almost like we aren't using a font-size for the header title but rather, we are using a component as the header title - with the component being the little avatar(single, two, or counter) + name(s) component we use.

[marcaaron]

Oh hmm yeah that's a good point @shawnborton. Looking through the code now and I don't really see anything passing this prop at all. I think all of the headers are set to have "large" text.

[marcaaron]

Actually this is only true for HeaderWithCloseButton

https://github.com/Expensify/Expensify.cash/blob/66d265e144a69f0a40bf5ca05d1b506a5a19a4bd/src/components/HeaderWithCloseButton.js#L37-L45

[marcaaron]

e.g. the IOU view is not using the large text

[shawnborton]

Ah got it, the IOU view should be using the larger text size. I say we remove it as a prop and just update the default header styles everywhere to use 17px as the font size unless a component replaces the header title.

[marcaaron]

We could probably change this to textSize="small" and have the default be 17 if that makes more sense.

[roryabraham]

Just tested locally and this is AWESOME!!! I'm stoked for this – is there a tracking issue to create stories for all our components? 😁

[marcaaron]

Fixed up that Header issue @shawnborton and added some stories for the more complex HeaderWithCloseButton. It shows off the variations:

2021-05-14_08-48-37.mp4

[shawnborton]

Woo, thanks Marc!

[thienlnam]

Wowwww this is so cool

[roryabraham]

Cool!

[OSBotify]

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

[OSBotify]

🚀 Deployed to staging in version: 1.0.46-1🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[isagoico]

@roryabraham Heyo! Are we able to test this? I tried navigating to https://staging.expensify.cash/docs and I was unable to access storybook.

[marcaaron]

@isagoico can check this off as we'll need to fix this somewhere else but can access via /docs/index.html for now. It's not a blocker in any case.