Add storybook-react-i18next addon

[TylerAPfledderer]

This discussion is to consider adding the addon storybook-react-i18next to the Storybook configuration to account for stories attached to components that run translations.

Without this addon, a story might throw the following error stack. (Example is the custom Link component):

There are two variations in approach to the setup described in the Storybook docs.

• README of the addon
• Receipe docs

With this addon, you can customize the languages that you want to cycle through in the story using the context provided by react-i18next.

Known issue(s) and point(s) of note

• This addon requires installing the following dependencies that are not already present in the project:
  • i18next-browser-languagedetector
  • i18next-http-backend
• When testing this out by applying the required deps and suggested setups, error still exist on load of the storybook similar to the screenshot above, this might be related to Gatsby where an additional configuration is required.

[pettinarip]

Nice idea @TylerAPfledderer

Since translations are an important thing on the website I think this is something we would require for testing purposes.

Talking about the implementation, this addon is not compatible with SB v7 yet. There is currently a PR to tackle this stevensacks/storybook-react-i18next#17 we might need to wait until they merge that PR in order to make it work.

[TylerAPfledderer]

I missed that PR! I will keep an eye on it as well.

[pettinarip]

Another thing I was thinking is whether there is a way we can avoid using i18next-browser-languagedetector and i18next-http-backend...

There is another addon called just storybook-i18next https://storybook.js.org/addons/storybook-i18next it seems that it doesn't require any of the previous deps and it just loads the entire set of translations instead of relying on a backend server to lazy load the translations.

[TylerAPfledderer]

I will check this out. I didn't even think about this also working. 😅

[TylerAPfledderer]

@pettinarip so storybook-i18next is an outdated version. storybook-react-i18next recently received the update for Storybook 7. It might be possible to simply remove those i18next-browser-languagedetector and i18next-http-backend because they are just being chained via the use method to activate each plugin.

There are also loader issues with Gatsby in regards to any Gatsby-specific methods or similar (i.e. Gatsby Link component). The initial screenshot I provided seems to a part of these compatibility problems with Storybook.

The reason the stories I initially made or ones in open PRs seem to work is because Gatsby components or methods are not involved. This means that the gatsby-plugin-react-i18next might be triggering the issues when trying this addon and applying the Translation component in a story, say.

There look to be two known GH issues addressing this: storybookjs/storybook#22065

And there is a 7.0 project burndown (filter to just items that mention Gatsby)

I was not expecting this to be a problem 😞

[pettinarip]

Uhmm I see. So the Translation component imports our Link (which internally uses the link from gatsby-plugin-react-i18next which internally uses the link from gatsby 😆) and that is triggering the issue.

I guess that we don't have any other thing to do until someone has a fix for that.

Maybe...as a temporary patch, until there is an official solution, we could create a new Translation component (only used by the stories) that doesn't import the Link component. I think that should fix the error and allow us to play with the translations. The only downside would be that translations that have something like <a>text</a> will be parsed as plain text but I think that is not a big deal.

[TylerAPfledderer]

@pettinarip just now seeing this. 😅 I think I can take a look at a custom component.

[TylerAPfledderer]

@pettinarip Opened up PR #10234 in draft for now.

• Any idea what story I should make to verify the functionality?
• What should the primary list of testing languages be to switch between? I'm thinking:
  • English
  • Ukranian
  • Greek
  • Portuguese
    (based on Nuno's demos from the figma file addressing the site's header)

[pettinarip]

1st question
This should work on any existing story that we have right? isn't this an addon that we have for every story you play (like the breakpoint/resolution picker)?

2nd question
I think it would be nice if we can sync this with how the build process works.

Currently the build uses the supportedLanguages we specified in the .env file (GATSBY_BUILD_LANGS). You could use the supportedLanguages to know what langs you should build/load. So, if someone wants to test the zh lang, we could change it in the .env file.

Now, if we want to always have some default langs for visual testing purposes, I'd consider these:

• en
• zh
• uk & ru to check long words cases

[TylerAPfledderer]

1st response: it's available for all stories. I was just thinking of something temporary now since there are no stories yet for components that would use it 😅

2nd response: That should be straightforward to use! I'll mark that as a task to look at asap.