@alfalab/core-components-tab-bar 1.0.0

package/src/components/tab/Component.tsx

@@ -0,0 +1,93 @@
+import React, { cloneElement, forwardRef, isValidElement, MouseEvent } from 'react';
+import cn from 'classnames';
+
+import { Badge } from '@alfalab/core-components-badge';
+import { Typography } from '@alfalab/core-components-typography';
+
+import { PrivateTabProps, TabProps } from '../../types';
+
+import styles from './index.module.css';
+
+const TabComponent = forwardRef(
+    (
+        {
+            showIndicator,
+            indicatorProps,
+            label,
+            icon,
+            id,
+            selected,
+            onChange,
+            onClick,
+            tabClassNames = {},
+            dataTestId,
+            className,
+            labelClassName,
+            selectedClassName,
+            iconClassName,
+            href,
+            Component = href ? 'a' : 'button',
+            ...restProps
+        }: PrivateTabProps & TabProps,
+        ref,
+    ) => {
+        const handleClick = (event: MouseEvent) => {
+            onChange?.(id);
+            onClick?.(event);
+        };
+
+        const {
+            className: commonClassName,
+            labelClassName: commonLabelClassName,
+            selectedClassName: commonSelectedClassName,
+            iconClassName: commonIconClassName,
+        } = tabClassNames;
+
+        return (
+            <Component
+                data-test-id={dataTestId}
+                tabIndex={0}
+                {...(Component === 'button' ? { type: 'button' } : null)}
+                {...restProps}
+                href={href}
+                id={id}
+                ref={ref}
+                className={cn(
+                    styles.component,
+                    commonClassName,
+                    className,
+                    selected && commonSelectedClassName,
+                    selected && selectedClassName,
+                    {
+                        [styles.selected]: selected,
+                    },
+                )}
+                onClick={handleClick}
+            >
+                <div className={cn(styles.icon, commonIconClassName, iconClassName)}>
+                    {isValidElement(icon) ? cloneElement(icon, { selected }) : icon}
+                </div>
+
+                <Typography.Text
+                    weight='medium'
+                    view='secondary-small'
+                    className={cn(styles.label, commonLabelClassName, labelClassName, {
+                        [styles.labelSelected]: selected,
+                    })}
+                >
+                    {isValidElement(label) ? cloneElement(label, { selected }) : label}
+                </Typography.Text>
+
+                {showIndicator && (
+                    <div className={styles.indicator}>
+                        <Badge visibleIconOutline={true} {...indicatorProps} view='count' />
+                    </div>
+                )}
+            </Component>
+        );
+    },
+);
+
+export const Tab = TabComponent as React.ForwardRefExoticComponent<
+    TabProps & React.RefAttributes<HTMLElement>
+>;

package/src/components/tab/index.module.css

@@ -0,0 +1,45 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.component {
+    @mixin button-reset;
+
+    position: relative;
+    display: inline-flex;
+    flex-direction: column;
+    flex: 1 0 0;
+    align-items: center;
+    padding: var(--gap-xs) 0;
+    color: var(--color-light-neutral-translucent-700);
+}
+
+.selected {
+    color: var(--color-light-accent-primary);
+}
+
+.icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-grow: 1;
+    width: 100%;
+}
+
+.label {
+    @mixin row_limit 1;
+    word-break: break-all;
+    flex-shrink: 0;
+
+    color: var(--color-light-text-secondary);
+}
+
+.labelSelected {
+    color: inherit;
+}
+
+.indicator {
+    position: absolute;
+    top: var(--gap-2xs);
+    left: calc(50% + var(--gap-2xs));
+    height: 16px;
+    min-width: 16px;
+}

package/src/components/tab/index.ts

@@ -0,0 +1 @@
+export * from './Component';

package/src/index.module.css

@@ -0,0 +1,16 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.component {
+    display: flex;
+    justify-content: center;
+    height: 64px;
+    max-height: 64px;
+    background-color: var(--color-light-base-bg-primary);
+    box-sizing: border-box;
+    overflow: hidden;
+    transition: box-shadow 0.2s ease;
+}
+
+.border {
+    box-shadow: 0 -1px 0 0 var(--color-light-neutral-300);
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { TabBar } from './Component';
+export { TabBarProps, TabProps } from './types';

package/src/types.ts

@@ -0,0 +1,139 @@
+import type {
+    AllHTMLAttributes,
+    ElementType,
+    ForwardRefExoticComponent,
+    HTMLAttributes,
+    ReactElement,
+    ReactNode,
+    RefAttributes,
+} from 'react';
+
+import type { BadgeProps } from '@alfalab/core-components-badge';
+
+type TabElementType = ReactElement<
+    TabProps,
+    ForwardRefExoticComponent<TabProps & RefAttributes<HTMLElement>>
+>;
+
+export interface TabBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+
+    /**
+     * Идентификатор для систем автоматизированного тестирования.
+     * Для таба используется модификатор -tab
+     */
+    dataTestId?: string;
+
+    /**
+     * Дополнительные классы для таба.
+     */
+    tabClassNames?: {
+        /**
+         *  Дополнительный класс таба
+         */
+        className?: string;
+
+        /**
+         * Дополнительный класс таба в выбранном состоянии
+         */
+        selectedClassName?: string;
+
+        /**
+         * Дополнительный класс подписи
+         */
+        labelClassName?: string;
+
+        /**
+         * Дополнительный класс враппера иконки
+         */
+        iconClassName?: string;
+    };
+
+    /**
+     * Список табов
+     */
+    children: TabElementType[];
+
+    /**
+     * Идентификатор выбранного таба
+     */
+    selectedId?: string;
+
+    /**
+     * Включает верхний бордер
+     */
+    border?: boolean;
+
+    /**
+     * Обработчик изменения выбранного таба
+     */
+    onChange?: (id: string) => void;
+}
+
+type AdditionalTabProps = Record<string, unknown>;
+
+export interface TabProps
+    extends Omit<AllHTMLAttributes<unknown>, 'onChange' | 'label'>,
+        AdditionalTabProps {
+    /**
+     * Кастомный компонент таба.
+     * @default button
+     */
+    Component?: ElementType;
+
+    /**
+     * Идентификатор таба
+     */
+    id: string;
+
+    /**
+     *  Лейбл
+     */
+    label: ReactNode;
+
+    /**
+     * Иконка
+     */
+    icon: ReactNode;
+
+    /**
+     * Показать индикатор
+     */
+    showIndicator?: boolean;
+
+    /**
+     * Свойства индикатора
+     */
+    indicatorProps?: Omit<
+        BadgeProps,
+        'view' | 'visibleColorOutline' | 'size' | 'iconColor' | 'iconUnderlayColor'
+    >;
+
+    /**
+     *  Дополнительный класс таба
+     */
+    className?: string;
+
+    /**
+     * Дополнительный класс таба в выбранном состоянии
+     */
+    selectedClassName?: string;
+
+    /**
+     * Дополнительный класс подписи
+     */
+    labelClassName?: string;
+
+    /**
+     * Дополнительный класс враппера иконки
+     */
+    iconClassName?: string;
+}
+
+export interface PrivateTabProps
+    extends Pick<TabBarProps, 'tabClassNames' | 'onChange' | 'dataTestId'> {
+    selected: boolean;
+}

package/types.d.ts

@@ -0,0 +1,99 @@
+import { AllHTMLAttributes, ElementType, ForwardRefExoticComponent, HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'react';
+import { BadgeProps } from "@alfalab/core-components-badge";
+type TabElementType = ReactElement<TabProps, ForwardRefExoticComponent<TabProps & RefAttributes<HTMLElement>>>;
+interface TabBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Идентификатор для систем автоматизированного тестирования.
+     * Для таба используется модификатор -tab
+     */
+    dataTestId?: string;
+    /**
+     * Дополнительные классы для таба.
+     */
+    tabClassNames?: {
+        /**
+         *  Дополнительный класс таба
+         */
+        className?: string;
+        /**
+         * Дополнительный класс таба в выбранном состоянии
+         */
+        selectedClassName?: string;
+        /**
+         * Дополнительный класс подписи
+         */
+        labelClassName?: string;
+        /**
+         * Дополнительный класс враппера иконки
+         */
+        iconClassName?: string;
+    };
+    /**
+     * Список табов
+     */
+    children: TabElementType[];
+    /**
+     * Идентификатор выбранного таба
+     */
+    selectedId?: string;
+    /**
+     * Включает верхний бордер
+     */
+    border?: boolean;
+    /**
+     * Обработчик изменения выбранного таба
+     */
+    onChange?: (id: string) => void;
+}
+type AdditionalTabProps = Record<string, unknown>;
+interface TabProps extends Omit<AllHTMLAttributes<unknown>, 'onChange' | 'label'>, AdditionalTabProps {
+    /**
+     * Кастомный компонент таба.
+     * @default button
+     */
+    Component?: ElementType;
+    /**
+     * Идентификатор таба
+     */
+    id: string;
+    /**
+     *  Лейбл
+     */
+    label: ReactNode;
+    /**
+     * Иконка
+     */
+    icon: ReactNode;
+    /**
+     * Показать индикатор
+     */
+    showIndicator?: boolean;
+    /**
+     * Свойства индикатора
+     */
+    indicatorProps?: Omit<BadgeProps, 'view' | 'visibleColorOutline' | 'size' | 'iconColor' | 'iconUnderlayColor'>;
+    /**
+     *  Дополнительный класс таба
+     */
+    className?: string;
+    /**
+     * Дополнительный класс таба в выбранном состоянии
+     */
+    selectedClassName?: string;
+    /**
+     * Дополнительный класс подписи
+     */
+    labelClassName?: string;
+    /**
+     * Дополнительный класс враппера иконки
+     */
+    iconClassName?: string;
+}
+interface PrivateTabProps extends Pick<TabBarProps, 'tabClassNames' | 'onChange' | 'dataTestId'> {
+    selected: boolean;
+}
+export { TabBarProps, TabProps, PrivateTabProps };

package/types.js

@@ -0,0 +1,2 @@
+'use strict';
+