Migrate CommonComponents from nodejs.dev

[ovflowd]

To kick off the migration of Components from the nodejs.dev repository, we should start migrating the CommonComponents from the nodejs.dev repository.

This issue will keep track of these components and their development progress. Remember that #5191 should be done first, as we want to migrate Components and add Storybooks for them.

The Migration of each Component

• Each Component should go under components/Common folder on this repository
• Each Component has its sub-folder (e.g., components/Common/Banner)
• The folder structure should pretty much be the same (CSS components, React, and sub-components), but feel free to make changes if you see deemed
• Please add some if the Component does not have unit tests already. At least to ensure the Component is rendering. If the Component has states/CTAs (Buttons/Triggers), please cover them too.
• The Storybook of each component should allow interaction with all possible states of the Component
• If the Component depends on Hooks, please migrate them too, with the following caveat:
  • If that component only uses the Hook, move it to the same folder of the Component
  • Otherwise, migrate it to the hooks folder of the repository.
• If the Component has a Gatsby-specific logic (e.g. Dark Theme Switcher), if it is straightforward enough (e.g. a dark theme switcher plugin for Next.js or it is simple enough to code by ourselves, e.g. a Hook that we manage together with a React Provider) then feel free to do it.
  • Otherwise, if you have questions, please ask them on this Issue or your Draft PR for the Component.

List of Components to Migrate

• AnimatedPlaceholder @HinataKah0
• Banner @manishprivet
• DarkModeToggle @shanpriyan
• Dropdown @ktssr
• LanguageSelector @ktssr
• RandomContributor @ovflowd
• SectionTitle @araujogui
• ShellBox @AugustinMauroy

Components not to migrate

• Hero
  • The Hero Component will be directly part of the Home-page Layout and will be migrated afterwards once we start designing the Home Layout (It will reside under components/Home)
• SearchBar
  • The Search Bar component is complex and requires first content-indexing, which probably requires SSR. Nevertheless, a dedicated issue will be opened for the component so that research and development might be completed.
• SEO
  • The SEO component is obsolete and does not require a counterpart here as we already have a replacement.

[AugustinMauroy]

Can I Take random Contributor ?

[ovflowd]

You can, but I also wanted to work on that, mostly because I want to simplify the monster logic from https://github.com/nodejs/nodejs.dev/blob/main/src/hooks/useNodeJsContributorsApi.tsx#L147.

[AugustinMauroy]

Oh ok do it claudio . I will do Shellbox.

[shanpriyan]

I will start with DarkModeToggle

[ovflowd]

Friendly reminder that #5191 needs to be done first.

[harshitphoenix]

I will be working on Dropdown component

[manishprivet]

I can work on the Banner component here

[araujogui]

I'll work on SectionTitle component

[ovflowd]

Hey @manishprivet @shanpriyan @harshitphoenix @AugustinMauroy any updates on the development of your components?

[AugustinMauroy]

Problem with global CSS (old css) and module css.

[ovflowd]

Problem with global CSS (old css) and module CSS.

CSS modules should be working out of the box. What issues are you facing?

[shanpriyan]

@ovflowd working on it

[manishprivet]

I'm working on it as well

[ktssr]

Are there any components that are not being worked on available for me to pick?

[harshitphoenix]

Hey @manishprivet @shanpriyan @harshitphoenix @AugustinMauroy any updates on the development of your components?

I am working on it as well.

[manishprivet]

@ktssr I believe LanguageSelector hasn't been picked up yet

[ktssr]

@ktssr I believe LanguageSelector hasn't been picked up yet

But I see the language selector in the header after setting up the project.

[ovflowd]

@ktssr I believe you're mistaking things. The current nodejs.org website that you see is the legacy one :)

This Issue is about working on the migration of new components from nodejs.dev, please read #5131 first.

[rodion-arr]

@ovflowd, could you please update in the top post who is working on what component? It will be much easier to see grouped info there rather that scanning through comments

[ktssr]

Thank you, @ovflowd, for pointing out that I was on the wrong branch. I realized I should have checked out major/website-redesign instead of staying on the main branch.

[ovflowd]

@ktssr sure, but it's important to mention the major/website-redesign still contains the old components that will eventually be removed. The plan right now is to only add the new components within the codebase with their unit tests and storybooks, since they will not be embedded anywhere for now.

[ovflowd]

@ovflowd, could you please update in the top post who is working on what component? It will be much easier to see grouped info there rather that scanning through comments

I'm usually not much keen on assigning tasks to named people as it discourages other people to tackle them. It's common for people to say they're working in smth and then abandon it. But let make an exception based on good faith here.

[ovflowd]

@ktssr, the icon to be used is the icon used on nodejs.dev. The nodejs.org website should eventually have a 1:1 match of that design. But if you're in doubt, opening a draft PR asking that there rather than here would be better. Otherwise, this issue gets too polluted 🙇

Of course, you're free to make CSS tweaks, functionality tweaks or even propose a different icon, which we can review altogether. You can even propose a different icon library (if they provide all the icons we need)

[ovflowd]

@araujogui can you make a simple PR adding https://storybook.js.org/addons/storybook-addon-sass-postcss to the Storybook Addons? Basically each PR is implementing it, and it feels like this should have been done on the Storybook PR. Thank you 🙇

[araujogui]

@araujogui can you make a simple PR adding https://storybook.js.org/addons/storybook-addon-sass-postcss to the Storybook Addons? Basically each PR is implementing it, and it feels like this should have been done on the Storybook PR. Thank you 🙇

I did some local tests, without storybook-addon-sass-postcss, and it is working as expected, sass modules works out of the box. However, CSS classes names must be camel case.

[ovflowd]

Hey, y'all 👋 let's remove the addon from the PRs then (cc @AugustinMauroy @manishprivet @shanpriyan)

[AugustinMauroy]

Hey, y'all 👋 let's remove the addon from the PRs then

Why ?

[ovflowd]

Hey, y'all 👋 let's remove the addon from the PRs then

Why ?

Because we don't sem to need this addon. As @araujogui explained Sass works out of the box on Storybook. The addon is probably needed for the snake_case/kebab-case conversion to camelCase, which we don't need if we simply rename the CSS class names (I assume)

[ovflowd]

Hey, @ktssr did you have any progress on your component? 👀 eager to see what you have done!! :D

[ktssr]

Hey, @ktssr did you have any progress on your component? 👀 eager to see what you have done!! :D

Will raise PR in couple of hours

[ktssr]

Hey, @ktssr did you have any progress on your component? 👀 eager to see what you have done!! :D

Will raise PR in couple of hours

I was occupied with other priorities hence could not raise PR. I will raise it some time tomorrow

[ovflowd]

All fine, no rush!

[ktssr]

All fine, no rush!

Raised the pr
#5266