Feat(install tabs): introduce #5400

AugustinMauroy · 2023-05-24T13:45:32Z

Description

Adding installTabs

In nodejs.dev the style of installTabs is not the same because style is "sparated" on par in installTabs others part is on pages/index.tsx so I have merge the style to have this component better.
But I don't have take leafs in this component

Related Issues

Related issues: Migrate DownloadComponents and Hero Component from nodejs.dev #5303

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, and/or npx turbo test:snapshot to update snapshots if I created and/or updated React Components.
I've covered new added functionality with unit tests if necessary.

Co-authored-by: Manish Kumar ⛄ <manishprivet@protonmail.com> Co-authored-by: Wai.Tung <maledong_public@foxmail.com> Co-authored-by: Shanmughapriyan S <priyanshan03@gmail.com> Co-authored-by: Michael Esteban <mickel13@gmail.com> Co-authored-by: Claudio Wunder <cwunder@gnome.org> Co-authored-by: Teja Sai Sandeep Reddy Konala <sandeep.konala@knacksystems.com> Co-authored-by: Claudio Wunder <cwunder@hubspot.com> Co-authored-by: vasanth9 <cheepurupalli.vasanthkumar.com> Co-authored-by: Aymen Naghmouchi <aymenadvance@gmail.com> Co-authored-by: Teja Sai Sandeep Reddy Konala <tejasaisandeepreddykonala@MacBook-Pro.local> Co-authored-by: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com> Co-authored-by: Guilherme Araújo <guilherme.araujo@maxxidata.com> Co-authored-by: Augustin Mauroy <augustin.mauroy@outlook.fr> Co-authored-by: HinataKah0 <128208841+HinataKah0@users.noreply.github.com> Co-authored-by: Olaleye Blessing <Olayinkablexxy@gmail.com> Co-authored-by: ktssr <31731919+ktssr@users.noreply.github.com> Co-authored-by: vasanthkumar <42891954+vasanth9@users.noreply.github.com> Co-authored-by: Floran Hachez <floran.hachez@gmail.com> Co-authored-by: Jatin <96469998+JatinSharma32@users.noreply.github.com> fixed styleling misconfig and fixed storybooks (#5281) fix storybook styles, imports, typescript config and dependencies (#5319 fix(package.json) Lint command is missing slashes (#5321 fix storybook local development mode (#5335) fix(i18n): translation key (#5347)

… method (#5369) Add clarity to step 4 based on clone method Signed-off-by: Vessy Shestorkina <46304479+Ve33y@users.noreply.github.com>

* Migrate JsonLink component Signed-off-by: Vessy Shestorkina <46304479+Ve33y@users.noreply.github.com> * Add storybook snap and robot icon Signed-off-by: Vessy Shestorkina <46304479+Ve33y@users.noreply.github.com> * Remove IconContext provider Signed-off-by: Vessy Shestorkina <46304479+Ve33y@users.noreply.github.com> --------- Signed-off-by: Vessy Shestorkina <46304479+Ve33y@users.noreply.github.com> Signed-off-by: Claudio Wunder <cwunder@gnome.org> Co-authored-by: Claudio Wunder <cwunder@gnome.org>

* refactor(useDownloadLink): Move useDetectOs to useDownloadLink * refactor(useDownloadLink): rename file * refactor(useDownloadLink): rename file * Apply suggestions from code review Signed-off-by: Claudio Wunder <cwunder@gnome.org> * refactor(useDownloadLink): undo deleted file --------- Signed-off-by: Claudio Wunder <cwunder@gnome.org> Co-authored-by: Claudio Wunder <cwunder@gnome.org>

* feat: Add MUI Config and Theme Provider * added createTheme * refactor themeConfig * feat(theme): Fix linting and package-lock * feat(theme): Add emotion styled and emtion react --------- Co-authored-by: Harkunwar Kochar <10580591+Harkunwar@users.noreply.github.com>

refactor(test): Delete duplicate test file Co-authored-by: Claudio Wunder <cwunder@gnome.org>

* feat(useClickOutside): introduce * Update hooks/useClickOutside.ts Co-authored-by: Claudio Wunder <cwunder@gnome.org> Signed-off-by: Augustin Mauroy <augustin.mauroy@outlook.fr> * feat(useClickOutside): fix and twix * feat(dropdown): remove useless ref * feat(useClickOutside): update unit test * feat(UseClickOutside): update type * fix: usage of type * Update hooks/useClickOutside.ts Co-authored-by: Claudio Wunder <cwunder@gnome.org> Signed-off-by: Augustin Mauroy <augustin.mauroy@outlook.fr> * update listener * Update components/Common/LanguageSelector/index.tsx Co-authored-by: Shanmughapriyan S <priyanshan03@gmail.com> Signed-off-by: Augustin Mauroy <augustin.mauroy@outlook.fr> * fix: languageSelector * update with feedback * better unit test * Update hooks/useClickOutside.ts Co-authored-by: Harkunwar Kochar <10580591+Harkunwar@users.noreply.github.com> Signed-off-by: Augustin Mauroy <augustin.mauroy@outlook.fr> * feat(useClickOutside): update with feedback * Update hooks/useClickOutside.ts Co-authored-by: Shanmughapriyan S <priyanshan03@gmail.com> Signed-off-by: Augustin Mauroy <augustin.mauroy@outlook.fr> * Update hooks/useClickOutside.ts Co-authored-by: Shanmughapriyan S <priyanshan03@gmail.com> Signed-off-by: Augustin Mauroy <augustin.mauroy@outlook.fr> * fix: if click on modal * Update hooks/useClickOutside.ts Co-authored-by: Harkunwar Kochar <10580591+Harkunwar@users.noreply.github.com> Signed-off-by: Augustin Mauroy <augustin.mauroy@outlook.fr> * Update hooks/useClickOutside.ts Signed-off-by: Harkunwar Kochar <10580591+Harkunwar@users.noreply.github.com> * Update hooks/useClickOutside.ts Co-authored-by: Harkunwar Kochar <10580591+Harkunwar@users.noreply.github.com> Signed-off-by: Augustin Mauroy <augustin.mauroy@outlook.fr> * Update useClickOutside.ts * Update hooks/useClickOutside.ts Co-authored-by: Shanmughapriyan S <priyanshan03@gmail.com> Signed-off-by: Augustin Mauroy <augustin.mauroy@outlook.fr> * Update useClickOutside.ts * Apply suggestions from code review Signed-off-by: Claudio Wunder <cwunder@gnome.org> * Update hooks/useClickOutside.ts Co-authored-by: Claudio Wunder <cwunder@gnome.org> Signed-off-by: Augustin Mauroy <augustin.mauroy@outlook.fr> * Update hooks/useClickOutside.ts Co-authored-by: Claudio Wunder <cwunder@gnome.org> Signed-off-by: Augustin Mauroy <augustin.mauroy@outlook.fr> * fix: build --------- Signed-off-by: Augustin Mauroy <augustin.mauroy@outlook.fr> Signed-off-by: Harkunwar Kochar <10580591+Harkunwar@users.noreply.github.com> Signed-off-by: Claudio Wunder <cwunder@gnome.org> Co-authored-by: Claudio Wunder <cwunder@gnome.org> Co-authored-by: Shanmughapriyan S <priyanshan03@gmail.com> Co-authored-by: Harkunwar Kochar <10580591+Harkunwar@users.noreply.github.com>

* feat: create codebox component * feat: add pointer to copy button * feat: add shell support * feat: use code element instead of pre * chore: fix eslint issues * refactor: remove shell codebox * refactor: use react.fc type * refactor: remove duplicate encoding * refactor: use pre element for codebox * style: some eol * style: some eol * refactor: use pre element for codebox * chore: create inlinecode story * refactor: create inline code story type * chore: revert .browserslistrc * test: remove duplicated test * test: remove beginning space on code * refactor: setup userEvent on tests * refactor: remove useless async * test: manual mock isomorphic-dompurify * fix: some fixes * chore: create multi lang story * test: snapshot before and after switch lang * refactor: inline mock * refactor: use decorators * chore: split inlinecode component * feat: add selected lang state * refactor: add inlinecode decorator * refactor: remove duplicate classes * chore: revert .browserslistrc * test: fix tests * chore: wip * feat: use story component arg * style: stories * test: remove i18n from clipboard test * chore: migrate pagination component (#5331) Co-authored-by: Teja Sai Sandeep Reddy Konala <tejasaisandeepreddykonala@MacBook-Pro.local> Co-authored-by: Claudio Wunder <cwunder@gnome.org> Co-authored-by: Wai.Tung <maledong_public@foxmail.com> * chore: add a proper decorated component * refactor: decorated inline code * Chore(node feat) (#5338) Co-authored-by: Claudio Wunder <cwunder@gnome.org> * (website redesign) Feat(shellbox): migration (#5234) Co-authored-by: Manish Kumar ⛄ <manishprivet@protonmail.com> Co-authored-by: Claudio Wunder <cwunder@gnome.org> Co-authored-by: Shanmughapriyan S <priyanshan03@gmail.com> Co-authored-by: Michael Esteban <mickel13@gmail.com> Co-authored-by: Wai.Tung <maledong_public@foxmail.com> * fix(i18n): translation key (#5347) Co-authored-by: Shanmughapriyan S <priyanshan03@gmail.com> Co-authored-by: Claudio Wunder <cwunder@gnome.org> * feat: add hover states * chore: fix rebase leftovers * chore: update snapshots * chore: install @types/prismjs * Update index.stories.tsx Signed-off-by: Claudio Wunder <cwunder@gnome.org> * chore: remove duplicate snapshots * chore: remove duplicate snapshot --------- Signed-off-by: Claudio Wunder <cwunder@gnome.org> Co-authored-by: ktssr <31731919+ktssr@users.noreply.github.com> Co-authored-by: Teja Sai Sandeep Reddy Konala <tejasaisandeepreddykonala@MacBook-Pro.local> Co-authored-by: Claudio Wunder <cwunder@gnome.org> Co-authored-by: Wai.Tung <maledong_public@foxmail.com> Co-authored-by: Claudio Wunder <cwunder@hubspot.com> Co-authored-by: Augustin Mauroy <augustin.mauroy@outlook.fr> Co-authored-by: Manish Kumar ⛄ <manishprivet@protonmail.com> Co-authored-by: Shanmughapriyan S <priyanshan03@gmail.com> Co-authored-by: Michael Esteban <mickel13@gmail.com>

* Migrate: Source-link * Fix: JSON key moved to the end of the file * Test: Storybook snapshot test --------- Signed-off-by: Claudio Wunder <cwunder@gnome.org> Co-authored-by: Claudio Wunder <cwunder@gnome.org>

* feat: introduce built-in next.js exports and updated scripts and configs (#5384) * chore: updated gitignore and rmeoved robots.txt * chore: updated next-sitemap config * chore: next-config refactored options and export support * chore: updated imports to node: prefix * chore: updated contributing guidelines * chore: updated scripts * chore: updated next-sitemap * chore: added missing props * fix: github-pages * chore: remove unused package * fix(storybook): update packages (#5386) --------- Co-authored-by: Harkunwar Kochar <10580591+Harkunwar@users.noreply.github.com>

Signed-off-by: Claudio Wunder <cwunder@gnome.org>

vercel · 2023-05-24T13:45:37Z

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

Name	Status	Preview	Comments	Updated (UTC)
nodejs-org	❌ Failed (Inspect)			Jun 28, 2023 10:18am
nodejs-org-stories	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 28, 2023 10:18am

vercel · 2023-05-24T13:45:38Z

@AugustinMauroy is attempting to deploy a commit to the OpenJS Foundation Team on Vercel.

A member of the Team first needs to authorize it.

AugustinMauroy · 2023-05-24T13:45:44Z

I'll fix conflict

mikeesto

Hi @AugustinMauroy . I'm not sure exactly where you are at with this. FYI, I've run the PR checks and there's a small issue with the tests.

This also looks like it is going to be impacted by #5425 ? (assuming it lands)

AugustinMauroy · 2023-06-14T08:03:55Z

Hey ! I will take a look to test.
But for impact of the other PR. Normally this has no impact, as the .scss style overrides prism.

.github/ISSUE_TEMPLATE/01-bug-report.yml

rodion-arr · 2023-06-20T09:01:14Z

components/Home/InstallTabs/LinuxPanel/index.tsx

+        <span className={styles.installTextNoSelect}>$</span>
+        <span className={styles.installTextCommand}>nvm</span> install --lts
+      </ShellBox>
+      {/* @TODO: Verify this link when we implement content */}


Do we have a process of handling todos in the code? I'm afraid this todo comment may stay here forever

I don't know but yeah todo is dangerous

@ovflowd Have you an idea to secure all todo ?

What is this TODO supposed to be?

rodion-arr · 2023-06-20T09:13:11Z

components/Home/InstallTabs/index.tsx

There is a strange "jumping" issue on long code line hover, I don't see this on old nodejs.dev site, could you please check it

Screen.Recording.2023-06-20.at.12.10.53.mov

I will check that but it's will change whit this pr

I would also argue that these two snippets (two different lines) should be only one Codebox, and not two 👀

components/Home/InstallTabs/LinuxPanel/index.tsx

Co-authored-by: Shanmughapriyan S <priyanshan03@gmail.com> Signed-off-by: Augustin Mauroy <augustin.mauroy@outlook.fr>

…/nodejs.org into feat(InstallTabs)

components/Home/InstallTabs/index.tsx

Co-authored-by: Shanmughapriyan S <priyanshan03@gmail.com> Signed-off-by: Augustin Mauroy <augustin.mauroy@outlook.fr>

ovflowd · 2023-06-28T11:13:29Z

Also, @AugustinMauroy too many unrelated changes within this PR, I'd ask if possible to recreate the branch 🙈

AugustinMauroy · 2023-06-28T11:20:43Z

@ovflowd why not

Harkunwar and others added 24 commits May 5, 2023 10:09

chore: no-unused-vars ignores pattern starting with _ (#5363)

c526a02

Contributing Guidelines Update - Add clarity to step 4 based on clone…

566f3d9

… method (#5369) Add clarity to step 4 based on clone method Signed-off-by: Vessy Shestorkina <46304479+Ve33y@users.noreply.github.com>

fix(test): dir name (#5354)

49efa04

feat(stability): migrate component (#5339)

a51457d

refactor(delete): duplicate test file (#5377)

a8fa762

refactor(test): Delete duplicate test file Co-authored-by: Claudio Wunder <cwunder@gnome.org>

Merge branch 'main' into major/website-redesign

51128c3

feat(installTabs): introduce component

ddeea23

feat(getNvmData): introduce

e011e9c

feat(InstallTabs): simplify

b04580f

add warning

9998356

Migrate: Source-link (#5364)

c254c60

* Migrate: Source-link * Fix: JSON key moved to the end of the file * Test: Storybook snapshot test --------- Signed-off-by: Claudio Wunder <cwunder@gnome.org> Co-authored-by: Claudio Wunder <cwunder@gnome.org>

update

0ba53e4

Merge branch 'major/website-redesign' into feat(InstallTabs)

e812e95

Signed-off-by: Claudio Wunder <cwunder@gnome.org>

Merge branch 'main' into major/website-redesign

d4a2c1f

chore: minor story updates (#5387)

8105e19

Merge branch 'major/website-redesign' into feat(InstallTabs)

0d0bf65

simplify logic

c1e2196

AugustinMauroy requested a review from a team as a code owner May 24, 2023 13:45

Merge remote-tracking branch 'upstream/main' into feat(InstallTabs)

e93c389

vercel bot temporarily deployed to Preview – nodejs-org-stories May 25, 2023 19:17 Inactive

vercel bot temporarily deployed to Preview – nodejs-org-stories June 7, 2023 15:29 Inactive

Merge remote-tracking branch 'upstream/main' into feat(InstallTabs)

accb813

vercel bot temporarily deployed to Preview – nodejs-org-stories June 7, 2023 15:30 Inactive

fix: rebase

ee0c691

vercel bot temporarily deployed to Preview – nodejs-org-stories June 7, 2023 15:39 Inactive

AugustinMauroy added 2 commits June 14, 2023 07:22

Merge remote-tracking branch 'upstream/main' into feat(InstallTabs)

d4e454c

code format + snapshot

6a3b47a

vercel bot temporarily deployed to Preview – nodejs-org-stories June 14, 2023 05:26 Inactive

mikeesto reviewed Jun 14, 2023

View reviewed changes

rodion-arr reviewed Jun 20, 2023

View reviewed changes

shanpriyan reviewed Jun 20, 2023

View reviewed changes

components/Home/InstallTabs/LinuxPanel/index.tsx Outdated Show resolved Hide resolved

components/Home/InstallTabs/LinuxPanel/index.tsx Show resolved Hide resolved

components/Home/InstallTabs/LinuxPanel/index.tsx Outdated Show resolved Hide resolved

AugustinMauroy and others added 2 commits June 20, 2023 17:20

Update components/Home/InstallTabs/LinuxPanel/index.tsx

f427635

Co-authored-by: Shanmughapriyan S <priyanshan03@gmail.com> Signed-off-by: Augustin Mauroy <augustin.mauroy@outlook.fr>

Merge branch 'main' into feat(InstallTabs)

13c0309

vercel bot temporarily deployed to Preview – nodejs-org-stories June 20, 2023 15:22 Inactive

Merge branch 'main' into feat(InstallTabs)

6869af8

vercel bot temporarily deployed to Preview – nodejs-org-stories June 22, 2023 08:16 Inactive

AugustinMauroy added 2 commits June 22, 2023 10:22

update

677b19a

Merge branch 'feat(InstallTabs)' of https://github.com/AugustinMauroy…

047b006

…/nodejs.org into feat(InstallTabs)

vercel bot temporarily deployed to Preview – nodejs-org-stories June 22, 2023 08:23 Inactive

shanpriyan reviewed Jun 25, 2023

View reviewed changes

components/Home/InstallTabs/index.tsx Outdated Show resolved Hide resolved

Update components/Home/InstallTabs/index.tsx

f84c2e9

Co-authored-by: Shanmughapriyan S <priyanshan03@gmail.com> Signed-off-by: Augustin Mauroy <augustin.mauroy@outlook.fr>

vercel bot temporarily deployed to Preview – nodejs-org-stories June 28, 2023 10:18 Inactive

vercel bot temporarily deployed to Preview – nodejs-org June 28, 2023 10:18 Inactive

ovflowd added website redesign Issue/PR part of the Node.js Website Redesign feature-request Requesting a new Technological Feature to be added to the Website labels Jul 2, 2023

AugustinMauroy marked this pull request as draft July 3, 2023 11:01

ovflowd closed this Jul 27, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat(install tabs): introduce #5400

Feat(install tabs): introduce #5400

AugustinMauroy commented May 24, 2023 •

edited

Loading

vercel bot commented May 24, 2023 •

edited

Loading

vercel bot commented May 24, 2023

AugustinMauroy commented May 24, 2023

mikeesto left a comment

AugustinMauroy commented Jun 14, 2023

rodion-arr Jun 20, 2023

AugustinMauroy Jun 20, 2023

AugustinMauroy Jun 20, 2023

ovflowd Jun 28, 2023

rodion-arr Jun 20, 2023

AugustinMauroy Jun 20, 2023

ovflowd Jun 28, 2023

ovflowd commented Jun 28, 2023

AugustinMauroy commented Jun 28, 2023

Feat(install tabs): introduce #5400

Feat(install tabs): introduce #5400

Conversation

AugustinMauroy commented May 24, 2023 • edited Loading

Description

Related Issues

Check List

vercel bot commented May 24, 2023 • edited Loading

vercel bot commented May 24, 2023

AugustinMauroy commented May 24, 2023

mikeesto left a comment

Choose a reason for hiding this comment

AugustinMauroy commented Jun 14, 2023

rodion-arr Jun 20, 2023

Choose a reason for hiding this comment

AugustinMauroy Jun 20, 2023

Choose a reason for hiding this comment

AugustinMauroy Jun 20, 2023

Choose a reason for hiding this comment

ovflowd Jun 28, 2023

Choose a reason for hiding this comment

rodion-arr Jun 20, 2023

Choose a reason for hiding this comment

AugustinMauroy Jun 20, 2023

Choose a reason for hiding this comment

ovflowd Jun 28, 2023

Choose a reason for hiding this comment

ovflowd commented Jun 28, 2023

AugustinMauroy commented Jun 28, 2023

AugustinMauroy commented May 24, 2023 •

edited

Loading

vercel bot commented May 24, 2023 •

edited

Loading