chore: install Storybook addon themes

[HinataKah0]

Description

Install Storybook's addon @storybook/addon-themes and setup light & dark mode in Storybook

Followed this guide
See this comment for context

Validation

Tested locally using CrossLink component

export const Prev: Story = {
  args: {
    direction: 'left',
    text: 'How to install Node.js',
    url: 'https://nodejs.dev/en/learn/how-to-install-nodejs/',
  },
  decorators: [
    Story => (
      <div className="w-[305px]">
        <Story />
      </div>
    ),
  ],
};

Related Issues

Check List

• I have read the Contributing Guidelines and made commit messages that follow the guideline.
• I have run npx turbo lint to ensure the code follows the style guide. And run npx turbo lint:fix to fix the style errors if necessary.
• I have run npx turbo format to ensure the code follows the style guide.
• I have run npx turbo test to check if all tests are passing.
• I've covered new added functionality with unit tests if necessary.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 12, 2023 0:28am

[github-actions]

Unit Test Coverage Report

Lines	Statements	Branches	Functions
	90.24% (185/205)	75% (30/40)	86.66% (39/45)

Unit Test Report

Tests	Skipped	Failures	Errors	Time
14	0 💤	0 ❌	0 🔥	3.535s ⏱️

[AugustinMauroy]

should try not to use decorators in stories. And personally theme switch doesn't work on preview.

[HinataKah0]

About decorator usage

It is based on the collaborator guide

If you need to decorate/wrap your Component/Story with a Container/Provider, please use [Storybook Decorators](https://storybook.js.org/docs/react/writing-stories/decorators)

And personally theme switch doesn't work on preview.

Sorry, I don't get it. Which preview are you referring to?
Edit: Are you saying that theme switcher (the component that we will create later) won't work in Storybook preview?

[ovflowd]

LGTM! Clean implementation :)

[ovflowd]

I'd like to fast-track this as other PRs would definitely benefit from this trivial change. cc @nodejs/nodejs-website

[AugustinMauroy]

I mean we should use theme switching on all stories.

[ovflowd]

I mean we should use theme switching on all stories.

This is already what this changeset does. Or so I believe

[HinataKah0]

Yes, it changes all stories. You can switch between stories and the themes are the same.

[ovflowd]

@HinataKah0 can you run the CI? :)

[HinataKah0]

I usually let some time passes before merging
@ovflowd If you think we can merge soon, I am fine with it

[ovflowd]

@HinataKah0 Im just asking for you to run the CI pipelines... not to merge the PR

[HinataKah0]

My bad :)