feat(plasma-new-hope): temp commit, vertical tabs blueprint

packages/plasma-new-hope/src/components/Tabs/TabItem.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { TabItemComponentVariation, TabItemProps } from './TabItem.types';
+
+export const boundTabItem = ({
+    horizontal: HorizontalTabItem,
+    vertical: VerticalTabItem,
+}: TabItemComponentVariation) => (rest: TabItemProps) => {
+    if (rest.orientation === 'vertical') {
+        return <VerticalTabItem {...rest} />;
+    }
+
+    return <HorizontalTabItem {...rest} />;
+};

packages/plasma-new-hope/src/components/Tabs/ui/TabItem/TabItem.types.ts → packages/plasma-new-hope/src/components/Tabs/TabItem.types.ts

@@ -1,13 +1,13 @@
-import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import type { ButtonHTMLAttributes, ReactNode, FC } from 'react';
 
-import { AsProps } from '../../../../types';
+import type { AsProps } from '../../types';
 
-export type CustomTabItemProps = {
+export interface BaseTabItemProps extends ButtonHTMLAttributes<HTMLButtonElement>, AsProps {
     /**
-     * Активен ли TabItem
-     * @deprecated Используйте свойство `selected`
+     * Табы горизонтальные или вертикальные
+     * @default 'horizontal'
      */
-    isActive?: boolean;
+    orientation?: 'horizontal' | 'vertical';
     /**
      * Выбран ли TabItem
      */
@@ -17,20 +17,6 @@ export type CustomTabItemProps = {
      * @default false
      */
     disabled?: boolean;
-    /**
-     * TabItem c округлым border-radius
-     * @default false
-     */
-    pilled?: boolean;
-    /**
-     * Фон TabItem меняется с анимацией
-     * @default true
-     */
-    animated?: boolean;
-    /**
-     * Контент слева
-     */
-    contentLeft?: ReactNode;
     /**
      * Контент справа
      */
@@ -51,6 +37,37 @@ export type CustomTabItemProps = {
      * Вид TabItem
      */
     view?: string;
+    /**
+     * Активен ли TabItem
+     * @deprecated Используйте свойство `selected`
+     */
+    isActive?: boolean;
+}
+
+export type CustomHorizontalTabItemProps = {
+    /**
+     * TabItem c округлым border-radius
+     * @default false
+     */
+    pilled?: boolean;
+    /**
+     * Контент слева
+     */
+    contentLeft?: ReactNode;
+    /**
+     * Фон TabItem меняется с анимацией
+     * @default true
+     */
+    animated?: boolean;
+};
+
+export type HorizontalTabItemProps = BaseTabItemProps & CustomHorizontalTabItemProps;
+
+export type VerticalTabItemProps = BaseTabItemProps;
+
+export type TabItemComponentVariation = {
+    horizontal: FC<HorizontalTabItemProps>;
+    vertical: FC<VerticalTabItemProps>;
 };
 
-export type TabItemProps = ButtonHTMLAttributes<HTMLButtonElement> & AsProps & CustomTabItemProps;
+export type TabItemProps = HorizontalTabItemProps | VerticalTabItemProps;

packages/plasma-new-hope/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { TabsComponentVariation, TabsProps } from './Tabs.types';
+
+export const boundTabs = ({ horizontal: HorizontalTabs, vertical: VerticalTabs }: TabsComponentVariation) => (
+    rest: TabsProps,
+) => {
+    if (rest.orientation === 'vertical') {
+        return <VerticalTabs {...rest} />;
+    }
+
+    return <HorizontalTabs {...rest} />;
+};

packages/plasma-new-hope/src/components/Tabs/ui/Tabs/Tabs.types.ts → packages/plasma-new-hope/src/components/Tabs/Tabs.types.ts

@@ -1,8 +1,13 @@
-import type { HTMLAttributes } from 'react';
+import type { HTMLAttributes, FC, ReactNode } from 'react';
 
-import type { AsProps } from '../../../../types';
+import type { AsProps } from '../../types';
 
-export type CustomTabsProps = {
+export interface BaseTabsProps extends HTMLAttributes<HTMLDivElement>, AsProps {
+    /**
+     * Табы горизонтальные или вертикальные
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
     /**
      * Как ведет себя компонент при ограничении ширины
      * @default 'scroll'
@@ -21,11 +26,6 @@ export type CustomTabsProps = {
      * @default false
      */
     stretch?: boolean;
-    /**
-     * Табы c округлым border-radius
-     * @default false
-     */
-    pilled?: boolean;
     /**
      * Размер табов
      */
@@ -38,11 +38,35 @@ export type CustomTabsProps = {
      * Индекс активного элемента, необходим для клавиатурной навигации
      */
     index?: number;
+}
+
+export type CustomHorizontalTabsProps = {
+    /**
+     * Табы c округлым border-radius
+     * @default false
+     */
+    pilled?: boolean;
     /**
      * Уберет скругление с выбранной стороны и подвинет контейнер
      * @deprecated
      */
     outsideScroll?: boolean | { left?: string; right?: string };
 };
 
-export type TabsProps = HTMLAttributes<HTMLDivElement> & AsProps & CustomTabsProps;
+export type CustomVerticalTabsProps = {
+    /**
+     * Контент слева, общий для всех TabItem
+     */
+    tabItemContentLeft?: ReactNode;
+};
+
+export type HorizontalTabsProps = BaseTabsProps & CustomHorizontalTabsProps;
+
+export type VerticalTabsProps = BaseTabsProps & CustomVerticalTabsProps;
+
+export type TabsComponentVariation = {
+    horizontal: FC<HorizontalTabsProps>;
+    vertical: FC<VerticalTabsProps>;
+};
+
+export type TabsProps = HorizontalTabsProps | VerticalTabsProps;

packages/plasma-new-hope/src/components/Tabs/index.ts

@@ -1,8 +1,8 @@
-export { tabsRoot, tabsConfig } from './ui/Tabs/Tabs';
-export { tabItemRoot, tabItemConfig } from './ui/TabItem/TabItem';
+export { tabsRoot, tabsConfig } from './ui/HorizontalTabs/HorizontalTabs';
+export { tabItemRoot, tabItemConfig } from './ui/HorizontalTabItem/HorizontalTabItem';
 export { tokens as tabsTokens } from './tokens';
 export { TabItemRefs, TabsContext } from './TabsContext';
 export { createTabsController } from './createTabsController';
 export type { TabsControllerProps } from './createTabsController';
-export type { TabsProps } from './ui/Tabs/Tabs.types';
-export type { TabItemProps } from './ui/TabItem/TabItem.types';
+export type { TabsProps } from './ui/HorizontalTabs/Tabs.types';
+export type { TabItemProps } from './ui/HorizontalTabItem/TabItem.types';

packages/plasma-new-hope/src/components/Tabs/ui/TabItem/TabItem.tsx → packages/plasma-new-hope/src/components/Tabs/ui/HorizontalTabItem/HorizontalTabItem.tsx

@@ -11,7 +11,7 @@ import { base as sizeCSS } from './variations/_size/base';
 import { base as pilledCSS } from './variations/_pilled/base';
 import { base as disabledCSS } from './variations/_disabled/base';
 import { TabItemProps } from './TabItem.types';
-import { LeftContent, RightContent, StyledContent, base } from './TabItem.styles';
+import { LeftContent, RightContent, StyledContent, base } from './HorizontalTabItem.styles';
 
 export const tabItemRoot = (Root: RootProps<HTMLDivElement, TabItemProps>) =>
     forwardRef<HTMLDivElement, TabItemProps>((props, outerRef) => {

packages/plasma-new-hope/src/components/Tabs/ui/TabItem/variations/_view/base.ts → packages/plasma-new-hope/src/components/Tabs/ui/HorizontalTabItem/variations/_view/base.ts

@@ -1,7 +1,7 @@
 import { css } from '@linaria/core';
 
 import { classes, tokens } from '../../../../tokens';
-import { RightContent } from '../../TabItem.styles';
+import { RightContent } from '../../HorizontalTabItem.styles';
 
 export const base = css`
     color: var(${tokens.itemColor});

packages/plasma-new-hope/src/components/Tabs/ui/Tabs/Tabs.tsx → packages/plasma-new-hope/src/components/Tabs/ui/HorizontalTabs/HorizontalTabs.tsx

@@ -13,7 +13,7 @@ import { base as viewCSS } from './variations/_view/base';
 import { base as disabledCSS } from './variations/_disabled/base';
 import { base as pilledCSS } from './variations/_pilled/base';
 import { base as stretchCSS } from './variations/_stretch/base';
-import { StyledArrow, StyledContent, StyledContentWrapper, base } from './Tabs.styles';
+import { StyledArrow, StyledContent, StyledContentWrapper, base } from './HorizontalTabs.styles';
 import type { TabsProps } from './Tabs.types';
 
 enum Keys {

packages/plasma-new-hope/src/components/Tabs/ui/Tabs/variations/_stretch/base.ts → packages/plasma-new-hope/src/components/Tabs/ui/HorizontalTabs/variations/_stretch/base.ts

@@ -1,7 +1,7 @@
 import { css } from '@linaria/core';
 
 import { classes } from '../../../../tokens';
-import { StyledContent, StyledContentWrapper } from '../../Tabs.styles';
+import { StyledContent, StyledContentWrapper } from '../../HorizontalTabs.styles';
 
 export const base = css`
     &.${classes.tabsStretch} {

packages/plasma-new-hope/src/components/Tabs/ui/VerticalTabItem/VerticalTabItem.styles.ts

@@ -0,0 +1 @@
+// to be implemented

packages/plasma-new-hope/src/components/Tabs/ui/VerticalTabItem/VerticalTabItem.tsx

@@ -0,0 +1 @@
+// to be implemented

packages/plasma-new-hope/src/components/Tabs/ui/VerticalTabs/VerticalTabs.styles.ts

@@ -0,0 +1 @@
+// to be implemented

packages/plasma-new-hope/src/components/Tabs/ui/VerticalTabs/VerticalTabs.tsx

@@ -0,0 +1 @@
+// to be implemented