@alfalab/core-components-pure-cell 4.11.6 → 4.12.1

package/moderncssm/component-8c83a9ca.d.ts

@@ -0,0 +1,125 @@
+/// <reference types="react" />
+import React from 'react';
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, HTMLAttributes } from "react";
+import { ButtonProps } from "@alfalab/core-components-button";
+import { FooterTextProps } from "./components/footer-text/index";
+import { PureCellElement } from "./components/types";
+type PureCellContext = {
+    /** Направление */
+    direction?: 'horizontal' | 'vertical';
+    dataTestId?: string;
+    setMainHover?: () => void;
+    unsetMainHover?: () => void;
+};
+declare const PureCellContext: React.Context<PureCellContext>;
+type BasePureCellProps = {
+    /**
+     * Направление
+     */
+    direction?: 'horizontal' | 'vertical';
+    /**
+     * Сss класс для стилизации общей обёртки
+     */
+    className?: string;
+    /**
+     * Выводит ссылку в виде ячейки
+     */
+    href?: string;
+    /**
+     * Вертикальные отступы
+     */
+    verticalPadding?: 'airy' | 'default' | 'compact' | 'tiny' | 'none' | {
+        /**
+         * Вертикальный отступ сверху
+         */
+        top?: 'airy' | 'default' | 'compact' | 'tiny' | 'none';
+        /**
+         * Вертикальный отступ снизу
+         */
+        bottom?: 'airy' | 'default' | 'compact' | 'tiny' | 'none';
+    };
+    /**
+     * Горизонтальные отступы
+     */
+    horizontalPadding?: 'left' | 'right' | 'both' | 'none';
+    /**
+     * Позволяет использовать кастомный компонент для кнопки (например Link из роутера)
+     */
+    tag?: ElementType;
+    /**
+     * Компоненты
+     */
+    children: PureCellElement;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+type AnchorPureCellProps = BasePureCellProps & AnchorHTMLAttributes<HTMLAnchorElement>;
+type ButtonPureCellProps = BasePureCellProps & ButtonHTMLAttributes<HTMLButtonElement>;
+type ElementPureCellProps = BasePureCellProps & HTMLAttributes<HTMLElement>;
+type PureCellProps = Partial<AnchorPureCellProps | ButtonPureCellProps | ElementPureCellProps>;
+/**
+ * Универсальный конструктор для сборки любой ячейки.
+ *
+ * [Макет](https://www.figma.com/file/KlFOLLkKO8rtvvQE3RXuhq/Click-Library?node-id=43525%3A240018)
+ */
+declare const PureCell: React.ForwardRefExoticComponent<PureCellProps & React.RefAttributes<HTMLElement>> & {
+    Main: React.FC<{
+        children: import("./components/types").MainElement;
+        isReverse?: boolean | undefined;
+        className?: string | undefined;
+        dataTestId?: string | undefined;
+        onClick?: (() => void) | undefined;
+    }>;
+    Graphics: React.FC<import("./components/graphics/index").Props>;
+    Content: React.FC<{
+        children: import("./components/types").ContentElement;
+        dataTestId?: string | undefined;
+    }>;
+    Text: React.FC<{
+        children?: React.ReactNode;
+        rowLimit?: 1 | 2 | undefined;
+        view?: "component" | "primary-large" | "primary-medium" | "primary-small" | "secondary-large" | "component-primary" | undefined;
+        titleWeight?: "bold" | "regular" | undefined;
+        titleColor: "link" | "accent" | "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "tertiary" | "tertiary-inverted" | "attention" | "positive" | "negative" | "static-accent" | "disabled" | "static-primary-light" | "static-secondary-light" | "static-tertiary-light" | "static-primary-dark" | "static-secondary-dark" | "static-tertiary-dark";
+        value?: React.ReactNode;
+        valueColor?: "link" | "accent" | "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "tertiary" | "tertiary-inverted" | "attention" | "positive" | "negative" | "static-accent" | "disabled" | "static-primary-light" | "static-secondary-light" | "static-tertiary-light" | "static-primary-dark" | "static-secondary-dark" | "static-tertiary-dark" | undefined;
+        dataTestId?: string | undefined;
+    }>;
+    Amount: React.FC<{
+        weight?: "bold" | "normal" | undefined;
+        textView?: "component" | "primary-small" | undefined;
+        color?: "link" | "accent" | "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "tertiary" | "tertiary-inverted" | "attention" | "positive" | "negative" | "static-accent" | "disabled" | "static-primary-light" | "static-secondary-light" | "static-tertiary-light" | "static-primary-dark" | "static-secondary-dark" | "static-tertiary-dark" | undefined;
+        dataTestId?: string | undefined;
+    } & Omit<import("./components/typesProps").AmountProps, "dataTestId">>;
+    AmountTitle: React.FC<{
+        color?: "link" | "accent" | "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "tertiary" | "tertiary-inverted" | "attention" | "positive" | "negative" | "static-accent" | "disabled" | "static-primary-light" | "static-secondary-light" | "static-tertiary-light" | "static-primary-dark" | "static-secondary-dark" | "static-tertiary-dark" | undefined;
+        titleProps?: import("@alfalab/core-components-typography").TitleProps | undefined;
+        dataTestId?: string | undefined;
+    } & Omit<import("./components/typesProps").AmountProps, "dataTestId">>;
+    Addon: React.FC<{
+        verticalAlign?: "center" | "auto" | "top" | "bottom" | undefined;
+        addonPadding?: "none" | "default" | undefined;
+        children: import("./components/types").AddonElement;
+        dataTestId?: string | undefined;
+        onClick?: (() => void) | undefined;
+    }>;
+    Footer: React.FC<{
+        children: import("./components/types").FooterElement;
+        footerPadding?: "none" | "default" | undefined;
+        dataTestId?: string | undefined;
+    }>;
+    ExtraSubtitle: React.FC<FooterTextProps>;
+    FooterButton: React.ForwardRefExoticComponent<(Omit<ButtonProps, "dataTestId"> & {
+        dataTestId?: string | undefined;
+    } & Partial<React.AnchorHTMLAttributes<HTMLAnchorElement> | React.ButtonHTMLAttributes<HTMLButtonElement>>) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+    Comment: React.FC<import("@alfalab/core-components-comment").CommentProps>;
+    Category: React.FC<{
+        categoryName: string;
+        categoryPercent?: number | undefined;
+        rightAddons?: React.ReactNode;
+        dataTestId?: string | undefined;
+    }>;
+};
+export { PureCellContext, PureCellProps, PureCell };

package/moderncssm/component.js

@@ -0,0 +1,7 @@
+import 'react';
+import 'react-merge-refs';
+import 'classnames';
+import '@alfalab/core-components-comment/moderncssm';
+import '@alfalab/hooks';
+export { P as PureCell, f as PureCellContext } from './component-511ba1c0.js';
+import './index.module.css';

package/moderncssm/components/addon/component.js

@@ -0,0 +1,5 @@
+import 'react';
+import 'classnames';
+import '@alfalab/core-components-shared/moderncssm';
+export { A as Addon } from '../../component-511ba1c0.js';
+import './index.module.css';

package/moderncssm/components/addon/index.d.ts

@@ -0,0 +1 @@
+export * from "../../component-511ba1c0";

package/moderncssm/components/addon/index.js

@@ -0,0 +1 @@
+export { A as Addon } from '../../component-511ba1c0.js';

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

@@ -0,0 +1,72 @@
+/* */
+
+:root {
+    --pure-cell-clickable-area-hover-opacity: 1;
+    --pure-cell-clickable-area-active-opacity: 1;
+}
+
+.component {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end
+}
+
+.component > * {
+        justify-content: flex-end;
+    }
+
+.component.none {
+        padding-left: var(--gap-0);
+    }
+
+.component.default {
+        padding-left: var(--gap-16);
+    }
+
+.component.addonPadding {
+        padding-left: var(--gap-16);
+    }
+
+.component.auto {
+        align-self: auto;
+    }
+
+.component.top {
+        align-self: flex-start;
+    }
+
+.component.center {
+        align-self: center;
+    }
+
+.component.bottom {
+        align-self: flex-end;
+    }
+
+.button {
+    box-sizing: border-box;
+    background-color: transparent;
+    -webkit-tap-highlight-color: transparent;
+    outline: none;
+    border: 0;
+    margin: var(--gap-0);
+    box-shadow: none;
+    border-radius: 0;
+    -webkit-user-select: none;
+            user-select: none;
+    vertical-align: middle;
+    appearance: none;
+    text-decoration: none;
+    min-width: 0;
+    cursor: pointer;
+    padding: var(--gap-0);
+    transition: opacity 0.15s ease-in-out
+}
+
+.button:hover {
+        opacity: var(--pure-cell-clickable-area-hover-opacity);
+    }
+
+.button:active {
+        opacity: var(--pure-cell-clickable-area-active-opacity);
+    }

package/moderncssm/components/amount/component.js

@@ -0,0 +1,7 @@
+import 'react';
+import 'classnames';
+import '@alfalab/core-components-amount/moderncssm';
+import '@alfalab/core-components-shared/moderncssm';
+import '@alfalab/core-components-typography/moderncssm';
+export { a as Amount } from '../../component-511ba1c0.js';
+import './index.module.css';

package/moderncssm/components/amount/index.d.ts

@@ -0,0 +1 @@
+export * from "../../component-511ba1c0";

package/moderncssm/components/amount/index.js

@@ -0,0 +1 @@
+export { a as Amount } from '../../component-511ba1c0.js';

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

@@ -0,0 +1,6 @@
+/* */
+
+.component {
+    padding: var(--gap-2) var(--gap-0);
+    display: flex;
+}

package/moderncssm/components/amount-title/component.js

@@ -0,0 +1,7 @@
+import 'react';
+import 'classnames';
+import '@alfalab/core-components-amount/moderncssm';
+import '@alfalab/core-components-shared/moderncssm';
+import '@alfalab/core-components-typography/moderncssm';
+export { b as AmountTitle } from '../../component-511ba1c0.js';
+import './index.module.css';

package/moderncssm/components/amount-title/index.d.ts

@@ -0,0 +1 @@
+export * from "../../component-511ba1c0";

package/moderncssm/components/amount-title/index.js

@@ -0,0 +1 @@
+export { b as AmountTitle } from '../../component-511ba1c0.js';

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

@@ -0,0 +1,9 @@
+/* */
+
+.component {
+    display: flex;
+}
+
+.weight {
+    font-weight: inherit;
+}

package/moderncssm/components/category/component.js

@@ -0,0 +1,5 @@
+import 'react';
+import '@alfalab/core-components-shared/moderncssm';
+import '@alfalab/core-components-typography/moderncssm';
+export { C as Category } from '../../component-511ba1c0.js';
+import './index.module.css';

package/moderncssm/components/category/index.d.ts

@@ -0,0 +1 @@
+export * from "../../component-511ba1c0";

package/moderncssm/components/category/index.js

@@ -0,0 +1 @@
+export { C as Category } from '../../component-511ba1c0.js';

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

@@ -0,0 +1,26 @@
+/* */
+
+.component {
+    display: flex;
+    overflow: hidden;
+    padding: var(--gap-2) var(--gap-0);
+}
+
+.categoryName {
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    word-break: break-all;
+}
+
+.categoryPercent {
+    padding: var(--gap-0) var(--gap-8);
+    background-color: var(--color-light-base-bg-secondary);
+    border-radius: var(--border-radius-16);
+    margin-left: var(--gap-4);
+}
+
+.rightAddon {
+    margin-left: var(--gap-4);
+}

package/moderncssm/components/content/component.js

@@ -0,0 +1,5 @@
+import 'react';
+import 'classnames';
+import '@alfalab/core-components-shared/moderncssm';
+export { c as Content } from '../../component-511ba1c0.js';
+import './index.module.css';

package/moderncssm/components/content/index.d.ts

@@ -0,0 +1 @@
+export * from "../../component-511ba1c0";

package/moderncssm/components/content/index.js

@@ -0,0 +1 @@
+export { c as Content } from '../../component-511ba1c0.js';

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

@@ -0,0 +1,12 @@
+/* */
+
+.component {
+    flex-basis: 100%;
+    display: grid;
+    grid-template-columns: 1fr auto
+}
+
+.component.horizontal {
+        /* for button */
+        align-self: stretch;
+    }

package/moderncssm/components/footer/component.js

@@ -0,0 +1,5 @@
+import 'react';
+import 'classnames';
+import '@alfalab/core-components-shared/moderncssm';
+export { F as Footer } from '../../component-511ba1c0.js';
+import './index.module.css';

package/moderncssm/components/footer/index.d.ts

@@ -0,0 +1 @@
+export * from "../../component-511ba1c0";

package/moderncssm/components/footer/index.js

@@ -0,0 +1 @@
+export { F as Footer } from '../../component-511ba1c0.js';

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

@@ -0,0 +1,15 @@
+/* */
+
+.component {
+    grid-column: 1/3;
+    display: grid;
+    grid-row-gap: var(--gap-8)
+}
+
+.component.none {
+        margin-top: var(--gap-0);
+    }
+
+.component.default {
+        margin-top: var(--gap-8);
+    }

package/moderncssm/components/footer-button/component.js

@@ -0,0 +1,5 @@
+import 'react';
+import '@alfalab/core-components-button/moderncssm';
+import '@alfalab/core-components-shared/moderncssm';
+export { d as FooterButton } from '../../component-511ba1c0.js';
+import './index.module.css';

package/moderncssm/components/footer-button/index.d.ts

@@ -0,0 +1 @@
+export * from "../../component-511ba1c0";

package/moderncssm/components/footer-button/index.js

@@ -0,0 +1 @@
+export { d as FooterButton } from '../../component-511ba1c0.js';

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

@@ -0,0 +1,5 @@
+/* */
+
+.component {
+    justify-self: start;
+}

package/moderncssm/components/footer-text/component.js

@@ -0,0 +1,4 @@
+import 'react';
+import '@alfalab/core-components-shared/moderncssm';
+import '@alfalab/core-components-typography/moderncssm';
+export { e as FooterText } from '../../component-511ba1c0.js';

package/moderncssm/components/footer-text/index.d.ts

@@ -0,0 +1 @@
+export * from "../../component-511ba1c0";

package/moderncssm/components/footer-text/index.js

@@ -0,0 +1 @@
+export { e as FooterText } from '../../component-511ba1c0.js';

package/moderncssm/components/graphics/component.js

@@ -0,0 +1,5 @@
+import 'react';
+import 'classnames';
+import '@alfalab/core-components-shared/moderncssm';
+export { G as Graphics } from '../../component-511ba1c0.js';
+import './index.module.css';

package/moderncssm/components/graphics/index.d.ts

@@ -0,0 +1 @@
+export * from "../../component-511ba1c0";

package/moderncssm/components/graphics/index.js

@@ -0,0 +1 @@
+export { G as Graphics } from '../../component-511ba1c0.js';

package/moderncssm/components/graphics/index.module.css

@@ -0,0 +1,92 @@
+/* */
+
+:root {
+    --pure-cell-clickable-area-hover-opacity: 1;
+    --pure-cell-clickable-area-active-opacity: 1;
+}
+
+.component {
+    display: inline-flex;
+    flex-basis: auto;
+}
+
+.top {
+    align-self: flex-start;
+}
+
+.center {
+    align-self: center;
+}
+
+.bottom {
+    align-self: flex-end;
+}
+
+.horizontal:not(:last-child).none {
+        margin-right: var(--gap-0);
+    }
+
+.horizontal:not(:last-child).airy {
+        margin-right: var(--gap-16);
+    }
+
+.horizontal:not(:last-child).default {
+        margin-right: var(--gap-12);
+    }
+
+.horizontal:not(:last-child).compact {
+        margin-right: var(--gap-8);
+    }
+
+.horizontal:not(:last-child).tiny {
+        margin-right: var(--gap-4);
+    }
+
+.vertical:not(:last-child).none {
+        margin-bottom: var(--gap-0);
+    }
+
+.vertical:not(:last-child).airy {
+        margin-bottom: var(--gap-16);
+    }
+
+.vertical:not(:last-child).default {
+        margin-bottom: var(--gap-12);
+    }
+
+.vertical:not(:last-child).compact {
+        margin-bottom: var(--gap-8);
+    }
+
+.vertical:not(:last-child).tiny {
+        margin-bottom: var(--gap-4);
+    }
+
+.button {
+    box-sizing: border-box;
+    background-color: transparent;
+    -webkit-tap-highlight-color: transparent;
+    outline: none;
+    border: 0;
+    margin: var(--gap-0);
+    box-shadow: none;
+    border-radius: 0;
+    -webkit-user-select: none;
+            user-select: none;
+    vertical-align: middle;
+    appearance: none;
+    text-decoration: none;
+    min-width: 0;
+    cursor: pointer;
+    padding: var(--gap-0);
+    transition: opacity 0.15s ease-in-out;
+    min-width: auto
+}
+
+.button:hover {
+        opacity: var(--pure-cell-clickable-area-hover-opacity);
+    }
+
+.button:active {
+        opacity: var(--pure-cell-clickable-area-active-opacity);
+    }

package/moderncssm/components/main/component.js

@@ -0,0 +1,5 @@
+import 'react';
+import 'classnames';
+import '@alfalab/core-components-shared/moderncssm';
+export { M as Main } from '../../component-511ba1c0.js';
+import './index.module.css';

package/moderncssm/components/main/index.d.ts

@@ -0,0 +1 @@
+export * from "../../component-511ba1c0";

package/moderncssm/components/main/index.js

@@ -0,0 +1 @@
+export { M as Main } from '../../component-511ba1c0.js';

package/moderncssm/components/main/index.module.css

@@ -0,0 +1,57 @@
+/* */
+
+:root {
+    --pure-cell-clickable-area-hover-opacity: 1;
+    --pure-cell-clickable-area-active-opacity: 1;
+}
+
+.component {
+    display: flex;
+    flex-direction: column;
+    align-self: center;
+
+    /* can use /r/n */
+    white-space: pre-line
+}
+
+.component.vertical {
+        grid-row-gap: var(--gap-2);
+        justify-content: center;
+        align-items: center;
+
+        /* for button */
+        text-align: center;
+    }
+
+.component.reverse {
+        flex-direction: column-reverse;
+    }
+
+.component.button {
+        box-sizing: border-box;
+        background-color: transparent;
+        -webkit-tap-highlight-color: transparent;
+        outline: none;
+        border: 0;
+        margin: var(--gap-0);
+        box-shadow: none;
+        border-radius: 0;
+        -webkit-user-select: none;
+                user-select: none;
+        vertical-align: middle;
+        appearance: none;
+        text-decoration: none;
+        min-width: 0;
+        cursor: pointer;
+        padding: var(--gap-0);
+        transition: opacity 0.15s ease-in-out;
+        min-width: auto
+    }
+
+.component.button:hover {
+            opacity: var(--pure-cell-clickable-area-hover-opacity);
+        }
+
+.component.button:active {
+            opacity: var(--pure-cell-clickable-area-active-opacity);
+        }

package/moderncssm/components/text/component.js

@@ -0,0 +1,6 @@
+import 'react';
+import 'classnames';
+import '@alfalab/core-components-shared/moderncssm';
+import '@alfalab/core-components-typography/moderncssm';
+export { T as Text } from '../../component-511ba1c0.js';
+import './index.module.css';

package/moderncssm/components/text/index.d.ts

@@ -0,0 +1 @@
+export * from "../../component-511ba1c0";

package/moderncssm/components/text/index.js

@@ -0,0 +1 @@
+export { T as Text } from '../../component-511ba1c0.js';