@salutejs/plasma-new-hope 0.133.2-canary.1396.10611246152.0 → 0.134.0-canary.1352.10609199302.0

package/styled-components/cjs/examples/sds_engineer/components/Modal/Modal.stories.tsx

@@ -0,0 +1,208 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { SSRProvider } from '@salutejs/plasma-core';
+
+import { PopupProvider, popupClasses } from '../Popup/Popup';
+import { Button } from '../Button/Button';
+import { WithTheme } from '../../../_helpers';
+
+import { Modal, modalClasses } from './Modal';
+
+export default {
+    title: 'sds_engineer/Modal',
+    decorators: [WithTheme],
+    argTypes: {
+        placement: {
+            options: [
+                'center',
+                'top',
+                'bottom',
+                'right',
+                'left',
+                'top-right',
+                'top-left',
+                'bottom-right',
+                'bottom-left',
+            ],
+            control: {
+                type: 'select',
+            },
+            table: { defaultValue: { summary: 'center' } },
+        },
+        offsetX: {
+            control: {
+                type: 'number',
+            },
+            table: { defaultValue: { summary: 0 } },
+        },
+        offsetY: {
+            control: {
+                type: 'number',
+            },
+            table: { defaultValue: { summary: 0 } },
+        },
+        closeOnEsc: {
+            control: {
+                type: 'boolean',
+            },
+            table: { defaultValue: { summary: true } },
+        },
+        closeOnOverlayClick: {
+            control: {
+                type: 'boolean',
+            },
+            table: { defaultValue: { summary: true } },
+        },
+        withBlur: {
+            control: {
+                type: 'boolean',
+            },
+            table: { defaultValue: { summary: false } },
+        },
+    },
+} as Meta;
+
+type StoryModalProps = ComponentProps<typeof Modal> & {
+    placement: string;
+    offsetX: number;
+    offsetY: number;
+    closeOnEsc: boolean;
+    closeOnOverlayClick: boolean;
+    withBlur: boolean;
+};
+
+const StyledButton = styled(Button)`
+    margin-top: 1rem;
+    width: 15rem;
+`;
+
+const StyledWrapper = styled.div`
+    height: 1200px;
+`;
+
+const Content = styled.div`
+    background: var(--plasma-colors-surface-solid02);
+    padding: 1rem;
+`;
+
+const ButtonWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+`;
+
+const StyledModal = styled(Modal)`
+    && .${popupClasses.root}, .${modalClasses.overlay} {
+        animation: fadeIn 1s forwards;
+    }
+
+    &&.${popupClasses.endAnimation} .${popupClasses.root} {
+        animation: fadeOut 1s forwards;
+    }
+
+    &&.${popupClasses.endAnimation} .${modalClasses.overlay} {
+        animation: fadeOut 1s forwards;
+    }
+
+    @keyframes fadeIn {
+        from {
+            opacity: 0;
+        }
+
+        to {
+            opacity: 1;
+        }
+    }
+
+    @keyframes fadeOut {
+        from {
+            opacity: 1;
+        }
+
+        to {
+            opacity: 0;
+        }
+    }
+`;
+
+const StoryModalDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProps) => {
+    const [isOpenA, setIsOpenA] = useState(false);
+    const [isOpenB, setIsOpenB] = useState(false);
+    const [isOpenC, setIsOpenC] = useState(false);
+
+    return (
+        <SSRProvider>
+            <StyledWrapper>
+                <PopupProvider>
+                    <ButtonWrapper>
+                        <StyledButton text="Открыть A" onClick={() => setIsOpenA(true)} />
+                    </ButtonWrapper>
+                    <StyledModal
+                        id="modalA"
+                        frame="theme-root"
+                        withAnimation
+                        onClose={() => setIsOpenA(false)}
+                        opened={isOpenA}
+                        placement={placement}
+                        offset={[offsetX, offsetY]}
+                        {...rest}
+                    >
+                        <Content>
+                            <Button onClick={() => setIsOpenA(false)}>Close</Button>
+                            <ButtonWrapper>
+                                <StyledButton text="Открыть B" onClick={() => setIsOpenB(true)} />
+                            </ButtonWrapper>
+                            <Modal
+                                id="modalB"
+                                frame="theme-root"
+                                onClose={() => setIsOpenB(false)}
+                                opened={isOpenB}
+                                placement="left"
+                                offset={[offsetX, offsetY]}
+                                {...rest}
+                            >
+                                <Content>
+                                    <Button style={{ marginRight: '1rem' }} onClick={() => setIsOpenB(false)}>
+                                        Close
+                                    </Button>
+                                    <ButtonWrapper>
+                                        <StyledButton text="Открыть C" onClick={() => setIsOpenC(true)} />
+                                    </ButtonWrapper>
+                                    <Modal
+                                        id="modalC"
+                                        frame="theme-root"
+                                        onClose={() => setIsOpenC(false)}
+                                        opened={isOpenC}
+                                        placement="top"
+                                        offset={[offsetX, offsetY]}
+                                        {...rest}
+                                    >
+                                        <Content>
+                                            <Button style={{ marginRight: '1rem' }} onClick={() => setIsOpenC(false)}>
+                                                Close
+                                            </Button>
+                                            <>Content</>
+                                        </Content>
+                                    </Modal>
+                                </Content>
+                            </Modal>
+                        </Content>
+                    </StyledModal>
+                </PopupProvider>
+            </StyledWrapper>
+        </SSRProvider>
+    );
+};
+
+export const ModalDemo: StoryObj<StoryModalProps> = {
+    args: {
+        placement: 'center',
+        withBlur: false,
+        closeOnEsc: true,
+        closeOnOverlayClick: true,
+        offsetX: 0,
+        offsetY: 0,
+    },
+    render: (args) => <StoryModalDemo {...args} />,
+};

package/styled-components/cjs/examples/sds_engineer/components/Notification/Notification.config.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _Notification = /*#__PURE__*/require("../../../../components/Notification");
+var config = exports.config = {
+  defaults: {
+    view: 'default'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--surface-transparent-card);", ":0.75rem;", ":0.375rem;", ":0.125rem;", ":0.25rem;", ":0rem;", ":0.25rem;", ":0.25rem;", ":1rem;", ":0.1875rem;", ":0.125rem;", ":0.375rem;", ":0.125rem;", ":1.625rem;", ":0.25rem;", ":0.5rem;", ":0.5rem;", ":0.375rem;", ":1.5rem;", ":0.375rem;", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--text-tertiary);", ":var(--text-primary);", ":0.375rem;", ":0.75rem;", ":0.8125rem 0.5rem 0.8125rem 0.875rem;"], _Notification.notificationTokens.contentColor, _Notification.notificationTokens.background, _Notification.notificationTokens.borderRadius, _Notification.notificationTokens.padding, _Notification.notificationTokens.contentPaddingTop, _Notification.notificationTokens.contentPaddingRight, _Notification.notificationTokens.contentPaddingBottom, _Notification.notificationTokens.contentPaddingLeft, _Notification.notificationTokens.contentPaddingTopWithoutIcon, _Notification.notificationTokens.horizontalLayoutRightPaddingWithoutCloseIcon, _Notification.notificationTokens.textboxPaddingTop, _Notification.notificationTokens.textboxPaddingRight, _Notification.notificationTokens.textboxPaddingBottom, _Notification.notificationTokens.textboxPaddingLeft, _Notification.notificationTokens.textboxPaddingRightWithCloseIcon, _Notification.notificationTokens.textboxGap, _Notification.notificationTokens.closeIconTop, _Notification.notificationTokens.closeIconRight, _Notification.notificationTokens.buttonsMarginTop, _Notification.notificationTokens.contentLeftIconSize, _Notification.notificationTokens.contentLeftIconMargin, _Notification.notificationTokens.contentTopIconMargin, _Notification.notificationTokens.contentFontFamily, _Notification.notificationTokens.contentFontSize, _Notification.notificationTokens.contentFontStyle, _Notification.notificationTokens.contentFontWeight, _Notification.notificationTokens.contentFontLetterSpacing, _Notification.notificationTokens.contentFontLineHeight, _Notification.notificationTokens.titleFontFamily, _Notification.notificationTokens.titleFontSize, _Notification.notificationTokens.titleFontStyle, _Notification.notificationTokens.titleFontWeight, _Notification.notificationTokens.titleFontLetterSpacing, _Notification.notificationTokens.titleFontLineHeight, _Notification.notificationTokens.closeIconColor, _Notification.notificationTokens.closeIconColorOnHover, _Notification.notificationTokens.horizontalLayoutGap, _Notification.notificationTokens.horizontalLayoutLeftIconMargin, _Notification.notificationTokens.paddingOneLineTextbox)
+    },
+    layout: {
+      horizontal: /*#__PURE__*/(0, _styledComponents.css)(["", ":25rem;", ":1rem 0.5rem 1rem 0.875rem;"], _Notification.notificationTokens.width, _Notification.notificationTokens.horizontalLayoutPadding),
+      vertical: /*#__PURE__*/(0, _styledComponents.css)(["", ":15rem;", ":0.375rem;"], _Notification.notificationTokens.width, _Notification.notificationTokens.padding)
+    },
+    size: {
+      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":0.5rem;", ":0.375rem;", ":0rem;", ":0.125rem;", ":0.25rem;", ":0rem;", ":0.25rem;", ":0rem;"], _Notification.notificationTokens.closeIconTop, _Notification.notificationTokens.closeIconRight, _Notification.notificationTokens.padding, _Notification.notificationTokens.textboxPaddingTopWithTopIcon, _Notification.notificationTokens.contentPaddingTop, _Notification.notificationTokens.contentPaddingRight, _Notification.notificationTokens.contentPaddingBottom, _Notification.notificationTokens.contentPaddingLeft, _Notification.notificationTokens.buttonsMarginLeft)
+    }
+  }
+};

package/styled-components/cjs/examples/sds_engineer/components/Notification/Notification.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NotificationsProvider = exports.Notification = void 0;
+Object.defineProperty(exports, "modalClasses", {
+  enumerable: true,
+  get: function get() {
+    return _Modal.modalClasses;
+  }
+});
+var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
+var _Notification = /*#__PURE__*/require("../../../../components/Notification");
+var _engines = /*#__PURE__*/require("../../../../engines");
+var _Notification2 = /*#__PURE__*/require("./Notification.config");
+var _Modal = /*#__PURE__*/require("../../../../components/Modal");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Notification.noticationConfig, _Notification2.config);
+var Notification = exports.Notification = /*#__PURE__*/(0, _engines.component)(mergedConfig);
+var NotificationsProvider = exports.NotificationsProvider = function NotificationsProvider(_ref) {
+  var children = _ref.children,
+    _ref$frame = _ref.frame,
+    frame = _ref$frame === void 0 ? 'theme-root' : _ref$frame;
+  return /*#__PURE__*/_react["default"].createElement(_Notification.NotificationsProvider, {
+    config: mergedConfig,
+    frame: frame
+  }, children);
+};

package/styled-components/cjs/examples/sds_engineer/components/Notification/Notification.stories.tsx

@@ -0,0 +1,159 @@
+import React, { useCallback, useRef, useState } from 'react';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+
+import { Button } from '../Button/Button';
+import { Modal } from '../Modal/Modal';
+import {
+    NotificationIconPlacement,
+    NotificationLayout,
+    addNotification,
+} from '../../../../../src/components/Notification';
+import { WithTheme } from '../../../_helpers';
+import { PopupProvider } from '../Popup/Popup';
+import { NotificationProps } from '../../../../components/Notification';
+import { IconDisclosureRight } from '../../../../components/_Icon';
+
+import { Notification, NotificationsProvider } from './Notification';
+
+const titles = ['Выполнено', 'Внимание', 'Ошибка'];
+const texts = ['SSH ключ успешно скопирован', 'Нельзя скопировать SSH ключ', 'Не удалось скопировать SSH ключ'];
+const iconPlacement = ['top', '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],
+    iconPlacement: iconPlacement[i % 2] as NotificationIconPlacement,
+});
+
+const placements = ['top', 'left'];
+
+const meta: Meta<NotificationProps> = {
+    title: 'sds_engineer/Notification',
+    decorators: [WithTheme],
+};
+
+export default meta;
+
+interface StoryDefaultProps {
+    title: string;
+    children: string;
+    showCloseIcon: boolean;
+    showLeftIcon: boolean;
+    layout: NotificationLayout;
+    iconPlacement: NotificationIconPlacement;
+}
+
+const StoryDefault = ({ title, children, iconPlacement, layout, showLeftIcon, ...rest }: StoryDefaultProps) => {
+    return (
+        <Notification
+            title={title}
+            icon={showLeftIcon ? <IconDisclosureRight /> : ''}
+            iconPlacement={iconPlacement}
+            actions={<Button text="text" size="xs" stretch={layout === 'vertical'} />}
+            layout={layout}
+            {...rest}
+        >
+            {children}
+        </Notification>
+    );
+};
+
+export const Default: StoryObj<StoryDefaultProps> = {
+    argTypes: {
+        iconPlacement: {
+            options: placements,
+            control: {
+                type: 'select',
+            },
+        },
+        layout: {
+            options: ['vertical', 'horizontal'],
+            control: {
+                type: 'select',
+            },
+        },
+    },
+    args: {
+        title: 'Title',
+        children: longText,
+        showCloseIcon: true,
+        showLeftIcon: true,
+        iconPlacement: 'top',
+        layout: 'vertical',
+    },
+    render: (args) => <StoryDefault {...args} />,
+};
+
+type StoryLiveDemoProps = ComponentProps<typeof Notification> & {
+    timeout: number;
+    layout: NotificationLayout;
+    iconPlacement: NotificationIconPlacement;
+};
+
+const StoryLiveDemo = ({ timeout, ...rest }: StoryLiveDemoProps) => {
+    const count = useRef(0);
+    const handleClick = useCallback(() => {
+        addNotification({ icon: <IconDisclosureRight />, ...rest, ...getNotificationProps(count.current) }, timeout);
+        count.current++;
+    }, [count, rest]);
+
+    return (
+        <NotificationsProvider>
+            <Button text="Добавить уведомление" onClick={handleClick} />
+        </NotificationsProvider>
+    );
+};
+
+export const LiveDemo: StoryObj<StoryLiveDemoProps> = {
+    argTypes: {
+        layout: {
+            options: ['vertical', 'horizontal'],
+            control: {
+                type: 'select',
+            },
+        },
+    },
+    args: {
+        timeout: 3000,
+        role: 'alert',
+        layout: 'vertical',
+    },
+    render: (args) => <StoryLiveDemo {...args} />,
+};
+
+type StoryWithModalProps = ComponentProps<typeof Notification> & {
+    timeout: number;
+};
+
+const StoryWithModal = ({ timeout }: StoryWithModalProps) => {
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const count = useRef(0);
+    const handleClick = useCallback(() => {
+        addNotification(getNotificationProps(count.current), timeout);
+        count.current++;
+    }, [count]);
+
+    return (
+        <NotificationsProvider>
+            <PopupProvider>
+                <Button text="Open modal" onClick={() => setIsModalOpen(true)} />
+                <Modal frame="theme-root" opened={isModalOpen} onClose={() => setIsModalOpen(false)}>
+                    <div>Hello!</div>
+                    <Button view="primary" text="Add notification" onClick={handleClick} />
+                </Modal>
+            </PopupProvider>
+        </NotificationsProvider>
+    );
+};
+
+export const WithModal: StoryObj<StoryLiveDemoProps> = {
+    args: {
+        timeout: 3500,
+    },
+    render: (args) => <StoryWithModal {...args} />,
+};

package/styled-components/cjs/examples/sds_engineer/components/Overlay/Overlay.stories.tsx

@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { disableProps } from '@salutejs/plasma-sb-utils';
+
+import { Button } from '../Button/Button';
+import { WithTheme } from '../../../_helpers';
+import { Overlay } from '../../../../components/Overlay';
+
+const onOverlayClick = action('onOverlayClick');
+
+type StoryOverlayProps = ComponentProps<typeof Overlay>;
+
+const meta: Meta<StoryOverlayProps> = {
+    title: 'sds_engineer/Overlay',
+    decorators: [WithTheme],
+    argTypes: {
+        isClickable: {
+            control: {
+                type: 'boolean',
+            },
+            table: { defaultValue: { summary: true } },
+        },
+        withBlur: {
+            control: {
+                type: 'boolean',
+            },
+            table: { defaultValue: { summary: false } },
+        },
+        ...disableProps(['onOverlayClick', 'zIndex']),
+    },
+    component: Overlay,
+};
+
+export default meta;
+
+const StyledButton = styled(Button)`
+    margin: 1rem;
+    width: 15rem;
+`;
+
+const StyledCloseButton = styled(Button)`
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    z-index: 101;
+    transform: translate(-50%, -50%);
+    width: 15rem;
+`;
+
+const StoryDefault = (props: StoryOverlayProps) => {
+    const [isVisible, setIsVisible] = useState(false);
+
+    return (
+        <>
+            <StyledButton text="Показать overlay" onClick={() => setIsVisible(true)} />
+            {isVisible && (
+                <>
+                    <Overlay {...props} />
+                    <StyledCloseButton text=" Скрыть overlay" onClick={() => setIsVisible(false)} />
+                </>
+            )}
+        </>
+    );
+};
+
+export const Default: StoryObj<StoryOverlayProps> = {
+    args: {
+        zIndex: '100',
+        backgroundColorProperty: 'var(--overlay-soft)',
+        withBlur: false,
+        transparent: false,
+        isClickable: true,
+        onOverlayClick,
+    },
+    render: (args) => <StoryDefault {...args} />,
+};

package/styled-components/cjs/examples/sds_engineer/components/Panel/Panel.config.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _Panel = /*#__PURE__*/require("../../../../components/Panel");
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    size: 'm',
+    borderRadius: 'none'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-solid-card);", ":0 3.75rem 7rem -0.5rem rgba(0,0,0,0.08);", ":var(--surface-transparent-primary);"], _Panel.panelTokens.background, _Panel.panelTokens.shadow, _Panel.panelTokens.contentBackgroundColor)
+    },
+    size: {
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;"], _Panel.panelTokens.padding)
+    },
+    borderRadius: {
+      none: /*#__PURE__*/(0, _styledComponents.css)(["", ":0;"], _Panel.panelTokens.borderRadius),
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.625rem;"], _Panel.panelTokens.borderRadius)
+    }
+  }
+};

package/styled-components/cjs/examples/sds_engineer/components/Panel/Panel.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PanelHeader = exports.PanelFooter = exports.PanelContent = exports.Panel = void 0;
+var _Panel = /*#__PURE__*/require("../../../../components/Panel");
+var _Panel2 = /*#__PURE__*/require("../../../../components/Panel/Panel");
+var _engines = /*#__PURE__*/require("../../../../engines");
+var _Panel3 = /*#__PURE__*/require("./Panel.config");
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Panel2.panelConfig, _Panel3.config);
+var Panel = exports.Panel = /*#__PURE__*/(0, _engines.component)(mergedConfig);
+var mergedContentConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Panel.panelContentConfig);
+var PanelContent = exports.PanelContent = /*#__PURE__*/(0, _engines.component)(mergedContentConfig);
+var mergedHeaderConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Panel.panelHeaderConfig);
+var PanelHeader = exports.PanelHeader = /*#__PURE__*/(0, _engines.component)(mergedHeaderConfig);
+var mergedFooterConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Panel.panelFooterConfig);
+var PanelFooter = exports.PanelFooter = /*#__PURE__*/(0, _engines.component)(mergedFooterConfig);