@salutejs/sdds-serv 0.314.0-canary.1973.15850054289.0 → 0.314.0-canary.2010.15679377511.0

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

@@ -0,0 +1,246 @@
+import React, { useCallback, useRef, useState } from 'react';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { IconDisclosureRight } from '@salutejs/plasma-icons';
+import { 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 views = ['default', 'negative', 'positive', 'warning', 'info'];
+
+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 ? <IconDisclosureRight color={iconColor || 'inherit'} /> : ''}
+            iconPlacement={iconPlacement}
+            actions={
+                <Button
+                    text="text"
+                    size={layout === 'horizontal' ? 'xs' : size}
+                    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',
+            },
+        },
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        textColor: {
+            control: 'color',
+        },
+        titleColor: {
+            control: 'color',
+        },
+        iconColor: {
+            control: 'color',
+        },
+        backgroundColor: {
+            control: 'color',
+        },
+    },
+    args: {
+        title: 'Title',
+        children: longText,
+        showCloseIcon: true,
+        showLeftIcon: true,
+        iconPlacement: 'top',
+        layout: 'vertical',
+        view: 'default',
+        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" 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: 'l',
+        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';