feat(tabs): add new tabs components

CODEOWNERS

@@ -51,7 +51,7 @@
 /src/components/Stories @DarkGenius
 /src/components/Switch @zamkovskaya
 /src/components/Table @Raubzeug
-/src/components/Tabs @sofiushko
+/src/components/tabs @sofiushko
 /src/components/Text @IsaevAlexandr
 /src/components/TreeList @IsaevAlexandr
 /src/components/TreeSelect @IsaevAlexandr

package.json

@@ -85,6 +85,11 @@
                 "default": "./build/cjs/unstable.js"
             }
         },
+        "./deprecated": {
+            "types": "./build/esm/deprecated.d.ts",
+            "require": "./build/cjs/deprecated.js",
+            "import": "./build/esm/deprecated.js"
+        },
         "./server": {
             "import": {
                 "types": "./build/esm/server.d.ts",

src/components/index.ts

@@ -51,7 +51,7 @@ export * from './Spin';
 export * from './Switch';
 export * from './Table';
 export * from './TableColumnSetup';
-export * from './Tabs';
+export * from './tabs';
 export * from './Text';
 export * from './Toaster';
 export * from './Toc';

src/components/Tabs/README.md → src/components/lab/Tabs/README.md

@@ -5,7 +5,7 @@
 <!--/GITHUB_BLOCK-->
 
 ```tsx
-import {Tabs} from '@gravity-ui/uikit';
+import {deprecated_Tabs as Tabs} from '@gravity-ui/uikit/deprecated';
 ```
 
 The `Tabs` component is used to explore and organize content, as well as to switch across various views.

src/components/Tabs/Tabs.scss → src/components/lab/Tabs/Tabs.scss

@@ -1,5 +1,5 @@
-@use '../variables';
-@use '../../../styles/mixins';
+@use '../../variables';
+@use '../../../../styles/mixins';
 
 $block: '.#{variables.$ns}tabs';
 

src/components/Tabs/Tabs.tsx → src/components/lab/Tabs/Tabs.tsx

@@ -2,9 +2,9 @@
 
 import * as React from 'react';
 
-import type {AriaLabelingProps, QAProps} from '../types';
-import {block} from '../utils/cn';
-import {filterDOMProps} from '../utils/filterDOMProps';
+import type {AriaLabelingProps, QAProps} from '../../types';
+import {block} from '../../utils/cn';
+import {filterDOMProps} from '../../utils/filterDOMProps';
 
 import {TabsContext} from './TabsContext';
 import {TabsItem} from './TabsItem';

src/components/Tabs/TabsItem.tsx → src/components/lab/Tabs/TabsItem.tsx

@@ -2,10 +2,10 @@
 
 import * as React from 'react';
 
-import {Label} from '../Label';
-import type {LabelProps} from '../Label';
-import type {QAProps} from '../types';
-import {block} from '../utils/cn';
+import {Label} from '../../Label';
+import type {LabelProps} from '../../Label';
+import type {QAProps} from '../../types';
+import {block} from '../../utils/cn';
 
 import {TabsContext} from './TabsContext';
 

src/components/Tabs/__stories__/Tabs.stories.tsx → src/components/lab/Tabs/__stories__/Tabs.stories.tsx

@@ -10,7 +10,7 @@ import {getTabsMock} from './getTabsMock';
 import type {StoryParams} from './types';
 
 const meta: Meta<typeof Tabs> = {
-    title: 'Components/Navigation/Tabs',
+    title: 'Deprecated/Tabs',
     component: Tabs,
     args: {
         direction: TabsDirection.Horizontal,

src/components/Tabs/__tests__/Tabs.test.tsx → src/components/lab/Tabs/__tests__/Tabs.test.tsx

@@ -2,7 +2,7 @@ import type * as React from 'react';
 
 import userEvent from '@testing-library/user-event';
 
-import {render, screen} from '../../../../test-utils/utils';
+import {render, screen} from '../../../../../test-utils/utils';
 import {Tabs, TabsDirection} from '../Tabs';
 import type {TabsItemProps, TabsSize} from '../Tabs';
 

src/components/Tabs/__tests__/Tabs.visual.test.tsx → src/components/lab/Tabs/__tests__/Tabs.visual.test.tsx

@@ -1,6 +1,6 @@
 import {smokeTest, test} from '~playwright/core';
 
-import {createSmokeScenarios} from '../../../stories/tests-factory/create-smoke-scenarios';
+import {createSmokeScenarios} from '../../../../stories/tests-factory/create-smoke-scenarios';
 import type {TabsProps} from '../Tabs';
 
 import {directionCases, sizeCases} from './cases';

src/components/Tabs/__tests__/TabsItem.test.tsx → src/components/lab/Tabs/__tests__/TabsItem.test.tsx

@@ -1,7 +1,7 @@
 import {Flame} from '@gravity-ui/icons';
 import userEvent from '@testing-library/user-event';
 
-import {render, screen} from '../../../../test-utils/utils';
+import {render, screen} from '../../../../../test-utils/utils';
 import {TabsItem} from '../TabsItem';
 
 const tabId = 'tab-id';

src/components/Tabs/__tests__/cases.tsx → src/components/lab/Tabs/__tests__/cases.tsx

@@ -1,4 +1,4 @@
-import type {Cases} from '../../../stories/tests-factory/models';
+import type {Cases} from '../../../../stories/tests-factory/models';
 import type {TabsProps} from '../Tabs';
 import {TabsDirection} from '../Tabs';