[HOLD for payment 2022-01-25] Storybook - Errors appear in the JS console when tap any default page Canvas/ Docs

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Go to https://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

Expected Result:

Verify that no errors appear in the JS console and HeaderWithCloseButton component renders without a problem.

Actual Result:

Errors appear in the JS console and the HeaderWithCloseButton component does not render due to an error.

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Web

Version Number: 1.1. 29.1

Reproducible in staging?: Yes

Reproducible in production?: Yes

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL: Applause

Issue reported by:

Slack conversation:

Issue was found when executing: #7154

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @mountiny (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[mountiny]

When testing locally as well as on staging, there are the following errors showing up in the console:

I could not replicate the same errors which are shown on staging in dev (running, not built storybook).

I have updated the issue description to also include the broken scenario for HeaderWithCloseButton component, where the translate props are not passed.

It might be trickier to identify the other error, but it would be nice to get someone External to look into this, it is a low priority task.

cc @roryabraham since you have worked on the recent rehaul of the Storybook.

[MelvinBot]

Triggered auto assignment to @NicMendonca (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[parasharrajat]

Proposal

1. HeaderWithCloseButton component usages withLocalize HOC which depends on Onyx data vai withOnyx to work properly.
2. We changed our app logic to use the Context-Provider pattern to speed up the app and WithLocalize also went through this evolution.
3. Thus as a result it requires LocaleContextProvider in the parent Component Tree to work.
4. In our stores, we do not wrap HeaderWithCloseButton story in this provider and thus it fails.

The Fix

1. Now, we can create a local decorator for this story only but I believe that other components may also need this.
2. Thus I will create a global decorator in .storybook/preview.js file.

const decorators = [
    Story => (
        <ComposeProviders
            components={[
                OnyxProvider,
                LocaleContextProvider,
            ]}
        >
            <Story />
        </ComposeProviders>
    ),
];

3. Now, LocaleContextProvider internally usages withOnyx and WithOnyx hocs will prevent the render on any child component until the Onyx's internal state is ready. So we need to also initialize the Onyx.
4. We can easily pollute the global scope as we don't want any shutdown mechanism for stories.
   we can simply do that in preview.js via

Onyx.init({
    keys: ONYXKEYS,
});

5. And adding the OnyxProvider in the decorator shown in the above snippets.

This will fix the errors and as a plus, we can create stories for any component that depends on OnyxData. Just add the mock data in Onyx.Init statement and voila.

[mountiny]

@parasharrajat This looks great, but just to clarify. Will this fix the errors shown in the console, which do not have necessarily any negative effect on the app afaik, but we would still like to get rid of them.