@salutejs/sdds-cs 0.318.1-canary.2030.15843645408.0 → 0.318.1-canary.2036.15817315131.0

package/emotion/es/components/Notification/Notification.stories.tsx

@@ -0,0 +1,221 @@
+import React, { useCallback, useRef, useState } from 'react';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { IconDisclosureRight, IconSber } from '@salutejs/plasma-icons';
+import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+import { action } from '@storybook/addon-actions';
+import { addNotification } from '@salutejs/plasma-new-hope';
+import type { NotificationIconPlacement, NotificationLayout } from '@salutejs/plasma-new-hope';
+
+import { Button } from '../Button/Button';
+import { Modal } from '../Modal/Modal';
+import { PopupProvider } from '../Popup';
+
+import { Notification, NotificationsProvider, NotificationPlacement } from './Notification';
+
+const titles = ['Выполнено', 'Внимание', 'Ошибка'];
+const texts = ['SSH ключ успешно скопирован', 'Нельзя скопировать SSH ключ', 'Не удалось скопировать SSH ключ'];
+const size = ['xs', 'xxs'];
+const iconPlacement = ['top', 'left'];
+const notificationsPlacements = [
+    'center',
+    'top',
+    'bottom',
+    'right',
+    'left',
+    'top-right',
+    'top-left',
+    'bottom-right',
+    'bottom-left',
+];
+
+const longText = `JavaScript frameworks are an essential part of modern front-end web development,
+providing developers with proven tools for building scalable, interactive web applications.
+`;
+
+const getNotificationProps = (i: number) => ({
+    title: titles[i % 3],
+    children: texts[i % 3],
+    size: size[i % 2],
+    iconPlacement: iconPlacement[i % 2] as NotificationIconPlacement,
+    onTimeoutClose: () => {
+        action('onTimeoutClose')('Callback, вызываемый при автоматическом закрытии по timeout.');
+    },
+});
+
+const placements = ['top', 'left'];
+
+const meta: Meta<typeof Notification> = {
+    title: 'Overlay/Notification',
+    decorators: [InSpacingDecorator],
+};
+
+export default meta;
+
+interface StoryDefaultProps {
+    title: string;
+    children: string;
+    iconColor?: string;
+    showCloseIcon: boolean;
+    showLeftIcon: boolean;
+    layout: NotificationLayout;
+    size: 'xs' | 'xxs';
+    iconPlacement: NotificationIconPlacement;
+    placement?: NotificationPlacement;
+}
+
+const StoryDefault = ({
+    title,
+    children,
+    iconPlacement,
+    size,
+    layout,
+    showLeftIcon,
+    iconColor,
+    ...rest
+}: StoryDefaultProps) => {
+    return (
+        <Notification
+            title={title}
+            icon={showLeftIcon ? <IconSber /> : ''}
+            iconPlacement={iconPlacement}
+            actions={<Button text="text" size="s" stretch={layout === 'vertical' && size === 'xs'} />}
+            size={size}
+            layout={layout}
+            {...rest}
+        >
+            {children}
+        </Notification>
+    );
+};
+
+export const Default: StoryObj<StoryDefaultProps> = {
+    argTypes: {
+        iconPlacement: {
+            options: placements,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: ['xs', 'xxs'],
+            control: {
+                type: 'select',
+            },
+        },
+        layout: {
+            options: ['vertical', 'horizontal'],
+            control: {
+                type: 'select',
+            },
+        },
+        ...disableProps(['view']),
+    },
+    args: {
+        title: 'Title',
+        children: longText,
+        showCloseIcon: true,
+        showLeftIcon: true,
+        iconPlacement: 'top',
+        layout: 'vertical',
+        size: 'xs',
+    },
+    render: (args) => <StoryDefault {...args} />,
+};
+
+type StoryLiveDemoProps = ComponentProps<typeof Notification> & {
+    timeout: number;
+    layout: NotificationLayout;
+    size: 'xs' | 'xxs';
+    iconPlacement: NotificationIconPlacement;
+    placement?: NotificationPlacement;
+};
+
+const StoryLiveDemo = ({ timeout, placement, ...rest }: StoryLiveDemoProps) => {
+    const count = useRef(0);
+    const handleClick = useCallback(() => {
+        addNotification(
+            {
+                icon: <IconDisclosureRight color="inherit" />,
+                ...rest,
+                ...getNotificationProps(count.current),
+            },
+            timeout,
+        );
+        count.current++;
+    }, [count, rest]);
+
+    return (
+        <NotificationsProvider placement={placement}>
+            <Button text="Добавить уведомление" onClick={handleClick} />
+        </NotificationsProvider>
+    );
+};
+
+export const LiveDemo: StoryObj<StoryLiveDemoProps> = {
+    argTypes: {
+        layout: {
+            options: ['vertical', 'horizontal'],
+            control: {
+                type: 'select',
+            },
+        },
+        placement: {
+            options: notificationsPlacements,
+            control: {
+                type: 'select',
+            },
+        },
+    },
+    args: {
+        timeout: 3000,
+        role: 'alert',
+        layout: 'vertical',
+        placement: 'bottom-right',
+        width: '',
+        maxWidth: '',
+    },
+    render: (args) => <StoryLiveDemo {...args} />,
+};
+
+type StoryWithModalProps = ComponentProps<typeof Notification> & {
+    timeout: number;
+    placement?: NotificationPlacement;
+};
+
+const StoryWithModal = ({ timeout, placement }: StoryWithModalProps) => {
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const count = useRef(0);
+    const handleClick = useCallback(() => {
+        addNotification(getNotificationProps(count.current), timeout);
+        count.current++;
+    }, [count]);
+
+    return (
+        <NotificationsProvider placement={placement}>
+            <PopupProvider>
+                <Button text="Open modal" onClick={() => setIsModalOpen(true)} />
+                <Modal opened={isModalOpen} onClose={() => setIsModalOpen(false)}>
+                    <div>Hello!</div>
+                    <Button view="default" size="s" text="Add notification" onClick={handleClick} />
+                </Modal>
+            </PopupProvider>
+        </NotificationsProvider>
+    );
+};
+
+export const WithModal: StoryObj<StoryLiveDemoProps> = {
+    args: {
+        timeout: 3500,
+        placement: 'bottom-right',
+    },
+    argTypes: {
+        placement: {
+            options: notificationsPlacements,
+            control: {
+                type: 'select',
+            },
+        },
+    },
+    render: (args) => <StoryWithModal {...args} />,
+};

package/emotion/es/components/Notification/index.js

@@ -1,2 +1,2 @@
 export { NotificationsProvider, Notification } from './Notification';
-export { addNotification, closeNotification } from '@salutejs/plasma-new-hope/emotion';
+export { addNotification, closeNotification } from '@salutejs/plasma-new-hope/emotion';

package/emotion/es/components/NumberFormat/NumberFormat.js

@@ -1,3 +1,11 @@
 import { composeNumberFormat } from '@salutejs/plasma-new-hope/emotion';
 import { TextField } from '../TextField/TextField';
-export var NumberFormat = composeNumberFormat(TextField);
+
+/**
+ * Note: проблема связанная с выводом типов
+ * Выводимому типу "NumberFormat" невозможно присвоить имя без ссылки
+ * на "@salutejs/plasma-new-hope/node_modules/react-number-format".
+ * Вероятно, оно не является переносимым. Требуется заметка с типом.
+ */
+
+export var NumberFormat = /*#__PURE__*/composeNumberFormat(TextField);

package/emotion/es/components/NumberFormat/NumberFormat.stories.tsx

@@ -0,0 +1,186 @@
+import React, { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { getConfigVariations, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+
+import { config } from '../TextField/TextField.config';
+
+import { NumberFormat } from './NumberFormat';
+
+const onChange = action('onChange');
+const onFocus = action('onFocus');
+const onBlur = action('onBlur');
+const onSearch = action('onSearch');
+
+const { views, sizes } = getConfigVariations(config);
+
+const labelPlacements = ['outer', 'inner'];
+const thousandsGroupStyles = ['thousand', 'lakh', 'wan', 'none'];
+
+const meta: Meta = {
+    title: 'Data Entry/NumberFormat',
+    component: NumberFormat,
+    decorators: [InSpacingDecorator],
+    argTypes: {
+        thousandsGroupStyle: {
+            options: thousandsGroupStyles,
+            control: {
+                type: 'select',
+            },
+        },
+        requiredPlacement: {
+            options: ['left', 'right'],
+            control: {
+                type: 'select',
+            },
+        },
+        required: {
+            control: {
+                type: 'boolean',
+            },
+            if: {
+                arg: 'optional',
+                truthy: false,
+            },
+        },
+        optional: {
+            control: {
+                type: 'boolean',
+            },
+            if: {
+                arg: 'required',
+                truthy: false,
+            },
+        },
+        hasDivider: {
+            control: {
+                type: 'boolean',
+            },
+            if: {
+                arg: 'clear',
+                truthy: true,
+            },
+        },
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        labelPlacement: {
+            options: labelPlacements,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        keepPlaceholder: {
+            control: {
+                type: 'boolean',
+            },
+            if: {
+                arg: 'labelPlacement',
+                eq: 'inner',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        titleCaption: {
+            control: { type: 'text' },
+        },
+        leftHelper: {
+            control: { type: 'text' },
+        },
+    },
+};
+
+export default meta;
+
+type StoryPropsDefault = Omit<
+    ComponentProps<typeof NumberFormat>,
+    | 'helperBlock'
+    | 'contentLeft'
+    | 'htmlSize'
+    | 'contentRight'
+    | 'type'
+    | 'name'
+    | 'onFocus'
+    | 'onBlur'
+    | 'onChange'
+    | 'checked'
+    | 'maxLength'
+    | 'minLength'
+    | 'required'
+    | 'enumerationType'
+    | 'chips'
+    | 'chipView'
+    | 'chipValidator'
+    | 'onChangeChips'
+    | 'hintText'
+    | 'hintView'
+    | 'hintSize'
+    | 'hintTargetIcon'
+    | 'hintPlacement'
+    | 'hintTargetPlacement'
+    | 'hintHasArrow'
+    | 'hintOffset'
+    | 'hintWidth'
+    | 'hintContentLeft'
+    | 'hintTrigger'
+>;
+
+const StoryDemo = ({ ...rest }: StoryPropsDefault) => {
+    return (
+        <div
+            style={{
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '2rem',
+                width: '70%',
+                margin: '0 auto',
+            }}
+        >
+            <NumberFormat
+                {...rest}
+                enumerationType="plain"
+                onChange={onChange}
+                onFocus={onFocus}
+                onBlur={onBlur}
+                onSearch={onSearch}
+            />
+        </div>
+    );
+};
+
+export const Default: StoryObj<StoryPropsDefault> = {
+    args: {
+        thousandSeparator: ' ',
+        decimalScale: 3,
+        decimalSeparator: '.',
+        thousandsGroupStyle: 'thousand',
+        fixedDecimalScale: false,
+        allowNegative: true,
+        allowLeadingZeros: false,
+        size: 's',
+        view: 'default',
+        label: 'Лейбл',
+        labelPlacement: 'outer',
+        keepPlaceholder: false,
+        titleCaption: 'Подпись к полю',
+        textBefore: '',
+        textAfter: '₽',
+        placeholder: 'Заполните поле',
+        leftHelper: 'Подсказка к полю',
+        disabled: false,
+        readOnly: false,
+        optional: false,
+        required: false,
+        requiredPlacement: 'right',
+        clear: false,
+        hasDivider: false,
+    },
+    render: (args) => <StoryDemo {...args} />,
+};

package/emotion/es/components/NumberFormat/index.js

@@ -1 +1 @@
-export { NumberFormat } from './NumberFormat';
+export { NumberFormat } from './NumberFormat';

package/emotion/es/components/NumberInput/NumberInput.config.js

@@ -1,149 +1,33 @@
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--text-accent);\n                ",
-        ": var(--text-negative);\n\n                ",
-        ": var(--text-primary);\n                ",
-        ": var(--text-tertiary);\n                ",
-        ": var(--surface-solid-card);\n                ",
-        ": var(--outline-solid-primary);\n                ",
-        ": var(--outline-accent);\n\n                ",
-        ": var(--text-accent);\n                ",
-        ": var(--surface-solid-card);\n                ",
-        ": #1A9E32;\n                ",
-        ": var(--text-accent-active);\n\n                ",
-        ": 0.4;\n\n                ",
-        ": inherit;\n                ",
-        ": inherit;\n            "
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 8.75rem;\n                ",
-        ": 2.625rem;\n                ",
-        ": 2.625rem;\n                ",
-        ": 1rem;\n                ",
-        ": var(--plasma-typo-body-s-font-family);\n                ",
-        ": var(--plasma-typo-body-s-font-size);\n                ",
-        ": var(--plasma-typo-body-s-font-style);\n                ",
-        ": var(--plasma-typo-body-s-bold-font-weight);\n                ",
-        ": var(--plasma-typo-body-s-letter-spacing);\n                ",
-        ": var(--plasma-typo-body-s-line-height);\n\n                ",
-        ": 0.625rem;\n                ",
-        ": 0.25rem;\n\n                ",
-        ": 0 0.125rem;\n                ",
-        ": 0.625rem;\n                ",
-        ": 2.625rem;\n                ",
-        ": 0.688rem 0.875rem;\n                ",
-        ": 0.125rem;\n\n                ",
-        ": var(--plasma-typo-body-s-font-family);\n                ",
-        ": var(--plasma-typo-body-s-font-size);\n                ",
-        ": var(--plasma-typo-body-s-font-style);\n                ",
-        ": var(--plasma-typo-body-s-font-weight);\n                ",
-        ": var(--plasma-typo-body-s-letter-spacing);\n                ",
-        ": var(--plasma-typo-body-s-line-height);\n\n                ",
-        ": 0.25rem;\n                ",
-        ": 0.25rem;\n\n                ",
-        ": 1.375rem;\n            "
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        ""
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 50%;\n            "
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject4() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": transparent;\n                ",
-        ": transparent;\n            "
-    ]);
-    _templateObject4 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject5() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 0;\n            "
-    ]);
-    _templateObject5 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject6() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": 0.4;\n            "
-    ]);
-    _templateObject6 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { css, numberInputTokens as tokens } from '@salutejs/plasma-new-hope/emotion';
 export var config = {
-    defaults: {
-        view: 'default',
-        size: 's',
-        segmentation: 'solid',
-        shape: 'cornered',
-        inputBackgroundType: 'clear'
+  defaults: {
+    view: 'default',
+    size: 's',
+    segmentation: 'solid',
+    shape: 'cornered',
+    inputBackgroundType: 'clear'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--text-accent);\n                ", ": var(--text-negative);\n\n                ", ": var(--text-primary);\n                ", ": var(--text-tertiary);\n                ", ": var(--surface-solid-card);\n                ", ": var(--outline-solid-primary);\n                ", ": var(--outline-accent);\n\n                ", ": var(--text-accent);\n                ", ": var(--surface-solid-card);\n                ", ": #1A9E32;\n                ", ": var(--text-accent-active);\n\n                ", ": 0.4;\n\n                ", ": inherit;\n                ", ": inherit;\n            "])), tokens.caretColor, tokens.errorColor, tokens.colorSolid, tokens.additionalTextColorSolid, tokens.backgroundColorSolid, tokens.wrapperBorderColor, tokens.wrapperBorderColorFocus, tokens.iconButtonColor, tokens.iconButtonBackgroundColor, tokens.iconButtonColorSolidHover, tokens.iconButtonColorSolidActive, tokens.actionButtonDisabledOpacity, tokens.loaderSpinnerColor, tokens.loaderSpinnerColorSolid)
+    },
+    size: {
+      s: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 8.75rem;\n                ", ": 2.625rem;\n                ", ": 2.625rem;\n                ", ": 1rem;\n                ", ": var(--plasma-typo-body-s-font-family);\n                ", ": var(--plasma-typo-body-s-font-size);\n                ", ": var(--plasma-typo-body-s-font-style);\n                ", ": var(--plasma-typo-body-s-bold-font-weight);\n                ", ": var(--plasma-typo-body-s-letter-spacing);\n                ", ": var(--plasma-typo-body-s-line-height);\n\n                ", ": 0.625rem;\n                ", ": 0.25rem;\n\n                ", ": 0 0.125rem;\n                ", ": 0.625rem;\n                ", ": 2.625rem;\n                ", ": 0.688rem 0.875rem;\n                ", ": 0.125rem;\n\n                ", ": var(--plasma-typo-body-s-font-family);\n                ", ": var(--plasma-typo-body-s-font-size);\n                ", ": var(--plasma-typo-body-s-font-style);\n                ", ": var(--plasma-typo-body-s-font-weight);\n                ", ": var(--plasma-typo-body-s-letter-spacing);\n                ", ": var(--plasma-typo-body-s-line-height);\n\n                ", ": 0.25rem;\n                ", ": 0.25rem;\n\n                ", ": 1.375rem;\n            "])), tokens.rootMinWidth, tokens.iconButtonHeight, tokens.iconButtonWidth, tokens.iconButtonPadding, tokens.iconButtonFontFamily, tokens.iconButtonFontSize, tokens.iconButtonFontStyle, tokens.iconButtonFontWeight, tokens.iconButtonLetterSpacing, tokens.iconButtonLineHeight, tokens.iconButtonRadius, tokens.iconButtonSegmentationRadius, tokens.inputWrapperMargin, tokens.inputWrapperBorderRadius, tokens.textWrapperHeight, tokens.textWrapperPadding, tokens.rootBorderWidth, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.textBeforeMarginRight, tokens.textAfterMarginLeft, tokens.loaderSpinnerSize)
+    },
+    shape: {
+      cornered: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral([""]))),
+      pilled: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 50%;\n            "])), tokens.iconButtonRadius)
+    },
+    inputBackgroundType: {
+      clear: /*#__PURE__*/css(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": transparent;\n                ", ": transparent;\n            "])), tokens.backgroundColor, tokens.backgroundColorHover)
+    },
+    segmentation: {
+      solid: /*#__PURE__*/css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0;\n            "])), tokens.iconButtonSegmentationRadius)
     },
-    variations: {
-        view: {
-            default: css(_templateObject(), tokens.caretColor, tokens.errorColor, tokens.colorSolid, tokens.additionalTextColorSolid, tokens.backgroundColorSolid, tokens.wrapperBorderColor, tokens.wrapperBorderColorFocus, tokens.iconButtonColor, tokens.iconButtonBackgroundColor, tokens.iconButtonColorSolidHover, tokens.iconButtonColorSolidActive, tokens.actionButtonDisabledOpacity, tokens.loaderSpinnerColor, tokens.loaderSpinnerColorSolid)
-        },
-        size: {
-            s: css(_templateObject1(), tokens.rootMinWidth, tokens.iconButtonHeight, tokens.iconButtonWidth, tokens.iconButtonPadding, tokens.iconButtonFontFamily, tokens.iconButtonFontSize, tokens.iconButtonFontStyle, tokens.iconButtonFontWeight, tokens.iconButtonLetterSpacing, tokens.iconButtonLineHeight, tokens.iconButtonRadius, tokens.iconButtonSegmentationRadius, tokens.inputWrapperMargin, tokens.inputWrapperBorderRadius, tokens.textWrapperHeight, tokens.textWrapperPadding, tokens.rootBorderWidth, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.textBeforeMarginRight, tokens.textAfterMarginLeft, tokens.loaderSpinnerSize)
-        },
-        shape: {
-            cornered: css(_templateObject2()),
-            pilled: css(_templateObject3(), tokens.iconButtonRadius)
-        },
-        inputBackgroundType: {
-            clear: css(_templateObject4(), tokens.backgroundColor, tokens.backgroundColorHover)
-        },
-        segmentation: {
-            solid: css(_templateObject5(), tokens.iconButtonSegmentationRadius)
-        },
-        disabled: {
-            true: css(_templateObject6(), tokens.disabledOpacity)
-        }
+    disabled: {
+      "true": /*#__PURE__*/css(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.4;\n            "])), tokens.disabledOpacity)
     }
-};
+  }
+};

package/emotion/es/components/NumberInput/NumberInput.js

@@ -1,4 +1,4 @@
 import { numberInputConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/emotion';
 import { config } from './NumberInput.config';
-var mergedConfig = mergeConfig(numberInputConfig, config);
-export var NumberInput = component(mergedConfig);
+var mergedConfig = /*#__PURE__*/mergeConfig(numberInputConfig, config);
+export var NumberInput = /*#__PURE__*/component(mergedConfig);