storybook: global language selector

[VIKTORVAV99]

Issue

Many of our components are directly using translations but we have no way to control the language in storybook right now.

Closes: AVO-347

Description

Adds a decorator and global controls to the main storybook preview file as instructed here: https://storybook.js.org/recipes/react-i18next

Note

There is an add-on that does this as well but we'll actually end up with more code if we go down that route? So I opted to just do the simple solution.

Double check

• I have run pnpx prettier@2 --write . and poetry run format in the top level directory to format my changes.

[madsnedergaard]

I like the simple approach!
Doesn't seem to work for me though 🤔
https://github.com/electricitymaps/electricitymaps-contrib/assets/3296643/7ea6974f-dec7-4e16-add2-5d0bc967dc6b

[VIKTORVAV99]

I like the simple approach!

Doesn't seem to work for me though 🤔

Kapture.2024-07-01.at.12.32.46.mp4

Did you make sure it's not a component that has its own i18next wrapper?

I'm going to remove those in a follow up PR.

I think you can test it best on the FAQ panel.

[VIKTORVAV99]

I like the simple approach! Doesn't seem to work for me though 🤔 https://github.com/electricitymaps/electricitymaps-contrib/assets/3296643/7ea6974f-dec7-4e16-add2-5d0bc967dc6b

Hehe, turns out these are hardcoded in storybook...

export const Default: Story = {
  argTypes: {
    ratio: {
      control: { type: 'number', min: 0, max: 1, step: 0.1 },
    },
  },
  args: {
    ratio: 0.5,
    name: 'Renewable', // <- This one...
  },
};

I'll add a task to clean them up later.

[madsnedergaard]

Oh, that explains it! 😄