fix: Stories rendering issues

[parasharrajat]

Details

Fixed Issues

$ #7187

Tests | QA Steps

1. Go to staging.new.expensify.com/docs/index.html
   and verify that you can see the storybook docs with the themes matching the screenshots below.
2. Canvas / Header/ Default
3. Canvas / ButtonWithDropdwn/ Fefault
4. Canvas/ MenuItem/ Default
5. Repeat step 2-4 for Docs tab
6. Go to HeaderWithCloseButton

• Verify that no errors appear in the JS console

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

Web

508579.png)

Mobile Web

Desktop

iOS

Android

[mountiny]

Is this ready for a review?

[parasharrajat]

Yeah, Stories only work on the Web. So only a screenshot of the Web is attached.

[mountiny]

Yeah yeah, I see you did not run npm install to get the new design and Expensify logo in the Storybook :)

[mountiny]

@parasharrajat Just to confirm, I keep seeing these console errors locally

When I seacherd for these previously, these avraibles are not defined in our codebase so I assume this must be a problem inside Storybook. What do you think?

[parasharrajat]

Let me run thenpm install first.

[parasharrajat]

I checked the storybook local server and I don't see any error.

Please tell me if you are using something else.

[mountiny]

@parasharrajat nono I am using the same. That is odd.

Whenever I switch between the components, I get those 3 errors.

[parasharrajat]

An interesting fact is I can't find these strings in our codebase. 😃

[mountiny]

Yeah, I said that before too which makes me think it must be from Storybook. Well, let's try this on staging then 😄 Thank you for working on this!

[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 by @mountiny in version: 1.1.29-6 🚀

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

[kavimuru]

@parasharrajat PR is failing. Still we see console errors. Able to reproduce this bug #7187

7

[parasharrajat]

These are cors and security errors. It does not break the Storybook in any way. You can see that headers are rendered correctly on the Canvas.
It is about the deployment and configuration of the Storybook so it should be handled on the backend. To me, it does not matter much but I will leave this to @mountiny to decide.

[mountiny]

Yes, that is true. These errors are cors related and not sure if there is anything simple we can do about this. These errors are not reproducible in the local dev environment.

@kavimuru I think we will have to accept these particular errors will be around for Storybook for a while. Would you be able to reflect it in your QA steps, please? They always refer Content Security Policy or CSP.

Can you also label this as passing the QA? It has resolved the other issues and Rajat can't do much about this particular type of errors.

[OSBotify]

🚀 Deployed to production by @roryabraham in version: 1.1.30-3 🚀

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