@alfalab/core-components-pure-cell 4.3.2 → 4.4.1

package/src/component.tsx

@@ -0,0 +1,186 @@
+/* eslint-disable react/jsx-no-constructed-context-values */
+import React, {
+    AnchorHTMLAttributes,
+    ButtonHTMLAttributes,
+    ElementType,
+    forwardRef,
+    HTMLAttributes,
+    useRef,
+} from 'react';
+import mergeRefs from 'react-merge-refs';
+import cn from 'classnames';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { ButtonProps } from '@alfalab/core-components-button';
+import { Comment } from '@alfalab/core-components-comment';
+import { useFocus } from '@alfalab/hooks';
+
+import { Addon } from './components/addon';
+import { Amount } from './components/amount';
+import { AmountTitle } from './components/amount-title';
+import { Category } from './components/category';
+import { Content } from './components/content';
+import { Footer } from './components/footer';
+import { FooterButton } from './components/footer-button';
+import { FooterText } from './components/footer-text';
+import { Graphics } from './components/graphics';
+import { Main } from './components/main';
+import { Text } from './components/text';
+import { PureCellElement } from './components/types';
+
+import styles from './index.module.css';
+
+export type PureCellContext = {
+    /** Направление */
+    direction?: 'horizontal' | 'vertical';
+};
+
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export const PureCellContext = React.createContext<PureCellContext>({});
+
+export type PureCellProps = {
+    /**
+     * Направление
+     */
+    direction?: 'horizontal' | 'vertical';
+
+    /**
+     * Сss класс для стилизации общей обёртки
+     */
+    className?: string;
+
+    /**
+     * Выводит ссылку в виде ячейки
+     */
+    href?: string;
+
+    /**
+     * Вертикальные отступы
+     */
+    verticalPadding?: 'airy' | 'default' | 'compact' | 'tiny' | 'none';
+
+    /**
+     * Горизонтальные отступы
+     */
+    horizontalPadding?: 'left' | 'right' | 'both' | 'none';
+
+    /**
+     * Позволяет использовать кастомный компонент для кнопки (например Link из роутера)
+     */
+    tag?: ElementType;
+    /**
+     * Компоненты
+     */
+    children: PureCellElement;
+
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+type AnchorPureCellProps = PureCellProps & AnchorHTMLAttributes<HTMLAnchorElement>;
+type ButtonPureCellProps = PureCellProps & ButtonHTMLAttributes<HTMLButtonElement>;
+type ElementPureCellProps = PureCellProps & HTMLAttributes<HTMLElement>;
+type PureProps = Partial<AnchorPureCellProps | ButtonPureCellProps | ElementPureCellProps>;
+
+const PureCellComponent = forwardRef<HTMLElement, PureProps>(
+    (
+        {
+            className,
+            dataTestId,
+            onClick,
+            href,
+            tag: Component = (href && 'a') || (onClick && 'button') || 'section',
+            children,
+            horizontalPadding = 'none',
+            verticalPadding = 'none',
+            direction = 'horizontal',
+            ...restProps
+        },
+        ref,
+    ) => {
+        const cellRef = useRef<HTMLDivElement>(null);
+        const [focused] = useFocus(cellRef, 'keyboard');
+        const addClasses = {
+            [styles.component]: true,
+            [styles.focused]: focused,
+            [styles[direction]]: true,
+            [styles.defaultPadding]: verticalPadding === 'default',
+            [styles[verticalPadding]]: verticalPadding !== 'default',
+            [styles[horizontalPadding]]: true,
+        };
+
+        if (href) {
+            const { target } = restProps as AnchorHTMLAttributes<HTMLAnchorElement>;
+
+            // Для совместимости с react-router-dom, меняем href на to
+            const hrefProps = { [typeof Component === 'string' ? 'href' : 'to']: href };
+
+            return (
+                <Component
+                    rel={target === '_blank' ? 'noreferrer noopener' : undefined}
+                    {...(restProps as AnchorHTMLAttributes<HTMLAnchorElement>)}
+                    {...hrefProps}
+                    ref={mergeRefs([cellRef, ref])}
+                    className={cn(styles.link, addClasses, className)}
+                    data-test-id={dataTestId}
+                    onClick={onClick}
+                >
+                    <PureCellContext.Provider value={{ direction }}>
+                        {children}
+                    </PureCellContext.Provider>
+                </Component>
+            );
+        }
+
+        if (onClick) {
+            return (
+                <Component
+                    {...(restProps as AnchorHTMLAttributes<HTMLAnchorElement>)}
+                    ref={mergeRefs([cellRef, ref])}
+                    className={cn(styles.button, addClasses, className)}
+                    data-test-id={dataTestId}
+                    onClick={onClick}
+                >
+                    <PureCellContext.Provider value={{ direction }}>
+                        {children}
+                    </PureCellContext.Provider>
+                </Component>
+            );
+        }
+
+        return (
+            <Component
+                {...(restProps as AnchorHTMLAttributes<HTMLAnchorElement>)}
+                ref={ref}
+                tabIndex={0}
+                className={cn(addClasses, className)}
+                data-test-id={dataTestId}
+            >
+                <PureCellContext.Provider value={{ direction }}>
+                    {children}
+                </PureCellContext.Provider>
+            </Component>
+        );
+    },
+);
+
+/**
+ * Универсальный конструктор для сборки любой ячейки.
+ *
+ * [Макет](https://www.figma.com/file/KlFOLLkKO8rtvvQE3RXuhq/Click-Library?node-id=43525%3A240018)
+ */
+export const PureCell = Object.assign(PureCellComponent, {
+    Main,
+    Graphics,
+    Content,
+    Text,
+    Amount,
+    AmountTitle,
+    Addon,
+    Footer,
+    ExtraSubtitle: FooterText,
+    FooterButton,
+    Comment,
+    Category,
+});

package/src/components/addon/component.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import cn from 'classnames';
+
+import { getDataTestId } from '@alfalab/core-components-shared';
+
+import { AddonElement } from '../types';
+
+import styles from './index.module.css';
+
+type Props = {
+    /**
+     * Вертикальное выравнивание
+     */
+    verticalAlign?: 'auto' | 'top' | 'center' | 'bottom';
+
+    /**
+     * Горизонтальные отступы
+     */
+    addonPadding?: 'default' | 'none';
+
+    /**
+     * Компоненты
+     */
+    children: AddonElement;
+
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+
+export const Addon: React.FC<Props> = ({
+    children,
+    verticalAlign = 'top',
+    addonPadding = 'default',
+    dataTestId,
+}) => (
+    <section
+        className={cn(styles.component, styles[addonPadding], styles[verticalAlign])}
+        data-test-id={getDataTestId(dataTestId, 'addon')}
+    >
+        {children}
+    </section>
+);

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

@@ -0,0 +1,39 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.component {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+
+    & > * {
+        justify-content: flex-end;
+    }
+
+    &.none {
+        padding-left: 0;
+    }
+
+    &.default {
+        padding-left: var(--gap-m);
+    }
+
+    &.addonPadding {
+        padding-left: var(--gap-m);
+    }
+
+    &.auto {
+        align-self: auto;
+    }
+
+    &.top {
+        align-self: flex-start;
+    }
+
+    &.center {
+        align-self: center;
+    }
+
+    &.bottom {
+        align-self: flex-end;
+    }
+}

package/src/components/addon/index.ts

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

package/src/components/amount/component.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import cn from 'classnames';
+
+import { Amount as CoreAmount } from '@alfalab/core-components-amount';
+import { getDataTestId } from '@alfalab/core-components-shared';
+import { Color, Typography } from '@alfalab/core-components-typography';
+
+import { AmountProps as AmountType } from '../typesProps';
+
+import styles from './index.module.css';
+
+type Props = {
+    /**
+     * Начертание шрифта денежного значения
+     */
+    weight?: 'bold' | 'normal';
+
+    /**
+     * Размер денежного значения
+     */
+    textView?: 'component' | 'primary-small';
+
+    /**
+     * Цвет денежного значения
+     */
+    color?: Color;
+
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+} & AmountType;
+
+export const Amount: React.FC<Props> = ({
+    weight = 'normal',
+    textView = 'component',
+    color = 'primary',
+    minority,
+    minorUnits = 100,
+    dataTestId,
+    ...restProps
+}) => (
+    <Typography.Text
+        view={textView}
+        dataTestId={getDataTestId(dataTestId, 'amount-text')}
+        className={cn(styles.component)}
+        color={color}
+    >
+        <CoreAmount
+            minority={minority || minorUnits}
+            bold={weight === 'bold' ? 'full' : 'none'}
+            dataTestId={getDataTestId(dataTestId, 'amount')}
+            {...restProps}
+        />
+    </Typography.Text>
+);

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

@@ -0,0 +1,6 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.component {
+    padding: var(--gap-3xs) 0;
+    display: flex;
+}

package/src/components/amount/index.ts

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

package/src/components/amount-title/component.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import cn from 'classnames';
+
+import { Amount as CoreAmount } from '@alfalab/core-components-amount';
+import { getDataTestId } from '@alfalab/core-components-shared';
+import { Color, Typography } from '@alfalab/core-components-typography';
+
+import { AmountProps as AmountType } from '../typesProps';
+
+import styles from './index.module.css';
+
+type Props = {
+    /**
+     * Цвет денежного значения
+     */
+    color?: Color;
+} & AmountType;
+
+export const AmountTitle: React.FC<Props> = ({
+    minority,
+    minorUnits = 100,
+    className,
+    color = 'primary',
+    dataTestId,
+    ...restProps
+}) => (
+    <Typography.Title
+        tag='h4'
+        view='small'
+        dataTestId={getDataTestId(dataTestId, 'amount-title')}
+        className={styles.component}
+        color={color}
+    >
+        <CoreAmount
+            minority={minority || minorUnits}
+            className={cn(styles.weight, className)}
+            dataTestId={getDataTestId(dataTestId, 'core-amount-title')}
+            {...restProps}
+            bold='none'
+        />
+    </Typography.Title>
+);

package/src/components/amount-title/index.module.css

@@ -0,0 +1,9 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.component {
+    display: flex;
+}
+
+.weight {
+    font-weight: inherit;
+}

package/src/components/amount-title/index.ts

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

package/src/components/category/component.tsx

@@ -0,0 +1,65 @@
+import React, { ReactNode } from 'react';
+
+import { getDataTestId } from '@alfalab/core-components-shared';
+import { Typography } from '@alfalab/core-components-typography';
+
+import styles from './index.module.css';
+
+type Props = {
+    /**
+     * Наименование категории
+     */
+    categoryName: string;
+
+    /**
+     * Процент категории
+     */
+    categoryPercent?: number;
+
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
+
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+
+export const Category: React.FC<Props> = ({
+    categoryName,
+    categoryPercent,
+    rightAddons,
+    dataTestId,
+}) => (
+    <div className={styles.component} data-test-id='cell-pure-category'>
+        <Typography.Text
+            view='primary-small'
+            color='secondary'
+            dataTestId={getDataTestId(dataTestId, 'category-name')}
+            className={styles.categoryName}
+        >
+            {categoryName}
+        </Typography.Text>
+        {categoryPercent !== undefined && (
+            <Typography.Text
+                tag='div'
+                view='primary-small'
+                color='secondary'
+                className={styles.categoryPercent}
+                dataTestId={getDataTestId(dataTestId, 'category-percent')}
+            >
+                {categoryPercent}%
+            </Typography.Text>
+        )}
+        {rightAddons !== undefined && (
+            <div
+                className={styles.rightAddon}
+                data-test-id={getDataTestId(dataTestId, 'category-right-addon')}
+            >
+                {rightAddons}
+            </div>
+        )}
+    </div>
+);

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

@@ -0,0 +1,26 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.component {
+    display: flex;
+    overflow: hidden;
+    padding: var(--gap-3xs) 0;
+}
+
+.categoryName {
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    word-break: break-all;
+}
+
+.categoryPercent {
+    padding: 0 var(--gap-xs);
+    background-color: var(--color-light-bg-secondary);
+    border-radius: var(--border-radius-xl);
+    margin-left: var(--gap-2xs);
+}
+
+.rightAddon {
+    margin-left: var(--gap-2xs);
+}

package/src/components/category/index.ts

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

package/src/components/content/component.tsx

@@ -0,0 +1,34 @@
+import React, { useContext } from 'react';
+import cn from 'classnames';
+
+import { getDataTestId } from '@alfalab/core-components-shared';
+
+import { PureCellContext } from '../../component';
+import { ContentElement } from '../types';
+
+import styles from './index.module.css';
+
+type Props = {
+    /**
+     * Компоненты
+     */
+    children: ContentElement;
+
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+
+export const Content: React.FC<Props> = ({ children, dataTestId }) => {
+    const { direction } = useContext(PureCellContext);
+
+    return (
+        <section
+            className={cn(styles.component, { [styles.horizontal]: direction === 'horizontal' })}
+            data-test-id={getDataTestId(dataTestId, 'content')}
+        >
+            {children}
+        </section>
+    );
+};

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

@@ -0,0 +1,12 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.component {
+    flex-basis: 100%;
+    display: grid;
+    grid-template-columns: 1fr auto;
+
+    &.horizontal {
+        /* for button */
+        align-self: stretch;
+    }
+}

package/src/components/content/index.ts

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

package/src/components/footer/component.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import cn from 'classnames';
+
+import { getDataTestId } from '@alfalab/core-components-shared';
+
+import { FooterElement } from '../types';
+
+import styles from './index.module.css';
+
+type Props = {
+    /**
+     * Компоненты
+     */
+    children: FooterElement;
+
+    /**
+     * Вертикальные отступы
+     */
+    footerPadding?: 'default' | 'none';
+
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+
+export const Footer: React.FC<Props> = ({ children, footerPadding = 'default', dataTestId }) => (
+    <footer
+        className={cn(styles.component, styles[footerPadding])}
+        data-test-id={getDataTestId(dataTestId, 'footer')}
+    >
+        {children}
+    </footer>
+);

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

@@ -0,0 +1,15 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.component {
+    grid-column: 1/3;
+    display: grid;
+    grid-row-gap: var(--gap-xs);
+
+    &.none {
+        margin-top: 0;
+    }
+
+    &.default {
+        margin-top: var(--gap-xs);
+    }
+}

package/src/components/footer/index.ts

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

package/src/components/footer-button/component.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { Button, ButtonProps } from '@alfalab/core-components-button';
+import { getDataTestId } from '@alfalab/core-components-shared';
+
+import styles from './index.module.css';
+
+export const FooterButton: React.FC<ButtonProps> = ({ children, dataTestId, ...props }) => (
+    <Button
+        {...props}
+        size='xxs'
+        dataTestId={getDataTestId(dataTestId, 'button')}
+        className={styles.component}
+    >
+        {children}
+    </Button>
+);

package/src/components/footer-button/index.module.css

@@ -0,0 +1,5 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.component {
+    justify-self: start;
+}

package/src/components/footer-button/index.ts

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

package/src/components/footer-text/component.tsx

@@ -0,0 +1,31 @@
+import React, { ReactNode } from 'react';
+
+import { getDataTestId } from '@alfalab/core-components-shared';
+import { Color, Typography } from '@alfalab/core-components-typography';
+
+export type Props = {
+    /**
+     * Цвет текста
+     */
+    color?: Color;
+
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+};
+
+export const FooterText: React.FC<Props> = ({ children, color = 'secondary', dataTestId }) => (
+    <Typography.Text
+        view='primary-small'
+        color={color}
+        data-test-id={getDataTestId(dataTestId, 'footer-title')}
+    >
+        {children}
+    </Typography.Text>
+);

package/src/components/footer-text/index.ts

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