feat: create tabs component

[araujogui]

Description

Create Tabs component

Validation

Related Issues

Fixes #5817

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	Oct 13, 2023 0:15am

[github-actions]

Unit Test Coverage Report

Lines	Statements	Branches	Functions
	94.79% (273/288)	78.12% (50/64)	93.1% (54/58)

Unit Test Report

Tests	Skipped	Failures	Errors	Time
29	0 💤	0 ❌	0 🔥	7.196s ⏱️

[ovflowd]

LGTM! Looks good to me and it looks simple enough :)

(Gonna verify the UI changes now)

But I would also appreciate if you could add Unit Tests to verify that clicking on the Tabs changes the current tab

Also: PR needs to be rebased again

[ovflowd]

Based on the image above I feel that we need to support Tabs that instead of rendering a tab, they open an link/url. (External Link Tabs (which can also be internal links)

So you have two types of tabs:

type BaseTab = {
  name: string;
  label: React.ReactNode;
  align?: 'left' | 'right'; // Allow to align the tab on the right or the left of the Tab Container
}

type ContentTab = BaseTab & {
  content: React.ReactNode;
}

type LinkTab = BaseTab & {
  link: string;
}

type Tab = (ContentTab | LinkTab)[];

Note that when the link is used we wrap the link with a LocalizedLink and a link does not need to start with https://, it could be a path also.

Also when Link is used we render the "External Link" Icon as in the image.

[ovflowd]

wdyt @bmuenzenmeyer is my comment above a correct interpretation of the Figma?

[bmuenzenmeyer]

my understanding is that the More Options link is not a part of the Tabs component or this issue, but rather a feature of the Codebox that allows someone to navigate to another arbitrary location. See my notes about it within #5819

[ovflowd]

my understanding is that the More Options link is not a part of the Tabs component or this issue, but rather a feature of the Codebox that allows someone to navigate to another arbitrary location. See my notes about it within #5819

What I wonder how the Tabs panel and the button would coexist in the same place.

Because either that button is floating or I don't know, as genuinely the content of the tabs and the tabs itself occupy one single container, so if the size of the tabs is reduced I assume the content is too...

[ovflowd]

Issue is on package-lock.json this PR broke it.