@salutejs/plasma-new-hope 0.134.0-canary.1404.10612716409.0 → 0.134.0-canary.1405.10615646161.0

package/styled-components/es/examples/sds_engineer/components/Toast/Toast.stories.tsx

@@ -1,223 +0,0 @@
-import React, { ComponentProps, useCallback, useRef, useState } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import styled from 'styled-components';
-import { disableProps } from '@salutejs/plasma-sb-utils';
-
-import { toastConfig } from '../../../../components/Toast';
-import { mergeConfig } from '../../../../engines';
-import { WithTheme, argTypesFromConfig } from '../../../_helpers';
-import { Button } from '../Button/Button';
-import { PopupProvider } from '../Popup/Popup';
-import { addNotification } from '../../../../../src/components/Notification';
-import { NotificationsProvider } from '../Notification/Notification';
-import { Modal } from '../Modal/Modal';
-
-import { config } from './Toast.config';
-import { Toast, ToastController, ToastProvider, useToast } from './Toast';
-
-const meta: Meta<typeof ToastController> = {
-    title: 'sds_engineer/Toast',
-    decorators: [WithTheme],
-};
-
-export default meta;
-
-type StoryComponentProps = ComponentProps<typeof Toast> & {
-    enableContentLeft?: boolean;
-};
-type StoryComponent = StoryObj<StoryComponentProps>;
-
-type StoryProps = ComponentProps<typeof ToastController> & {
-    text: string;
-    timeout?: number;
-    enableContentLeft?: boolean;
-};
-type Story = StoryObj<StoryProps>;
-
-const BellIcon = (props) => (
-    <svg width="100%" viewBox="0 0 24 24" fill="none" {...props}>
-        <path
-            d="M11.501 21.28c1.088 0 1.978-.889 1.978-1.977H9.524c0 1.088.88 1.978 1.977 1.978zm5.933-5.932v-4.944c0-3.035-1.622-5.576-4.45-6.248v-.673c0-.82-.662-1.483-1.483-1.483-.82 0-1.483.662-1.483 1.483v.672c-2.838.673-4.45 3.204-4.45 6.25v4.943l-1.275 1.276c-.623.623-.188 1.69.692 1.69h13.022c.88 0 1.325-1.067.702-1.69l-1.275-1.276z"
-            fill="currentColor"
-        />
-    </svg>
-);
-
-const ToastContainer = styled.div`
-    position: fixed;
-    transform: translateX(50%);
-`;
-
-const Container = styled.div`
-    display: flex;
-    gap: 0.5rem;
-`;
-
-export const ToastComponent: StoryComponent = {
-    args: {
-        text: 'Текст всплывающего уведомления',
-        view: 'default',
-        size: 'm',
-        hasClose: true,
-        enableContentLeft: true,
-        pilled: false,
-    },
-    render: ({ enableContentLeft, ...args }) => (
-        <ToastContainer>
-            <Toast contentLeft={enableContentLeft && <BellIcon width="1rem" height="1rem" />} {...args} />
-        </ToastContainer>
-    ),
-};
-
-const StoryLiveDemo = ({
-    text,
-    position,
-    timeout,
-    fade,
-    offset,
-    pilled,
-    view,
-    size,
-    hasClose,
-    enableContentLeft,
-}: StoryProps) => {
-    const { showToast, hideToast } = useToast();
-    const contentLeft = enableContentLeft && <BellIcon width="1rem" height="1rem" />;
-
-    return (
-        <Container>
-            <Button onClick={hideToast}>Скрыть уведомление</Button>
-            <Button
-                onClick={() => {
-                    showToast({
-                        text,
-                        position,
-                        offset,
-                        timeout,
-                        fade,
-                        contentLeft,
-                        pilled,
-                        view,
-                        size,
-                        hasClose,
-                        onHide: action('onHide'),
-                        onShow: action('onShow'),
-                    });
-                }}
-            >
-                Показать уведомление
-            </Button>
-        </Container>
-    );
-};
-
-export const LiveDemo: Story = {
-    args: {
-        ...ToastComponent.args,
-        position: 'bottom',
-        fade: true,
-        offset: 0,
-        timeout: 3000,
-        role: 'alert',
-    },
-    argTypes: {
-        position: {
-            options: ['top', 'bottom'],
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        ...argTypesFromConfig(mergeConfig(toastConfig, config)),
-        ...disableProps(['role', 'onShow', 'onHide', 'contentLeft']),
-    },
-    parameters: {
-        chromatic: {
-            disable: true,
-        },
-    },
-    render: (args) => (
-        <ToastProvider>
-            <StoryLiveDemo {...args} />
-        </ToastProvider>
-    ),
-};
-
-const StoryComplex = ({
-    text,
-    position,
-    timeout,
-    fade,
-    offset,
-    pilled,
-    view,
-    size,
-    hasClose,
-    enableContentLeft,
-}: StoryProps) => {
-    const [isModalOpen, setIsModalOpen] = useState(false);
-
-    const { showToast } = useToast();
-    const contentLeft = enableContentLeft && <BellIcon width="1rem" height="1rem" />;
-
-    const handleShowToast = () => {
-        showToast({
-            text,
-            position,
-            offset,
-            timeout,
-            fade,
-            contentLeft,
-            pilled,
-            view,
-            size,
-            hasClose,
-            onHide: action('onHide'),
-            onShow: action('onShow'),
-        });
-    };
-
-    const count = useRef(0);
-    const handleShowNotification = useCallback(() => {
-        addNotification(
-            {
-                title: 'Добавить Toast',
-                size: 'xs',
-                actions: <Button text="Добавить" size="xs" stretch onClick={handleShowToast} />,
-            },
-            5000,
-        );
-        count.current++;
-    }, [count]);
-
-    return (
-        <NotificationsProvider>
-            <PopupProvider>
-                <Button text="Открыть модальное окно" onClick={() => setIsModalOpen(true)} />
-                <Modal frame="theme-root" opened={isModalOpen} onClose={() => setIsModalOpen(false)}>
-                    <div>Hello!</div>
-                    <Button view="default" text="Add notification" onClick={handleShowNotification} />
-                </Modal>
-            </PopupProvider>
-        </NotificationsProvider>
-    );
-};
-
-export const Complex: Story = {
-    args: {
-        ...LiveDemo.args,
-    },
-    argTypes: {
-        ...LiveDemo.argTypes,
-    },
-    parameters: {
-        chromatic: {
-            disable: true,
-        },
-    },
-    render: (args) => (
-        <ToastProvider>
-            <StoryComplex {...args} />
-        </ToastProvider>
-    ),
-};

package/styled-components/es/examples/sds_engineer/components/Toolbar/Toolbar.config.js

@@ -1,19 +0,0 @@
-import { css } from 'styled-components';
-import { toolbarTokens } from '../../../../components/Toolbar';
-export var config = {
-  defaults: {
-    view: 'default',
-    size: 'm'
-  },
-  variations: {
-    view: {
-      "default": /*#__PURE__*/css(["", ":var(--shadow-down-soft-s);", ":var(--surface-solid-card);", ":var(--surface-transparent-tertiary);"], toolbarTokens.boxShadow, toolbarTokens.background, toolbarTokens.dividerColor)
-    },
-    size: {
-      xs: /*#__PURE__*/css(["", ":2.5rem;", ":0.25rem;", ":0.75rem;", ":1.25rem;", ":0.5rem;", ":0.0625rem;"], toolbarTokens.size, toolbarTokens.padding, toolbarTokens.borderRadius, toolbarTokens.dividerSize, toolbarTokens.dividerOffset, toolbarTokens.dividerBorderRadius),
-      s: /*#__PURE__*/css(["", ":3rem;", ":0.25rem;", ":0.875rem;", ":1.5rem;", ":0.5rem;", ":0.0625rem;"], toolbarTokens.size, toolbarTokens.padding, toolbarTokens.borderRadius, toolbarTokens.dividerSize, toolbarTokens.dividerOffset, toolbarTokens.dividerBorderRadius),
-      m: /*#__PURE__*/css(["", ":3.75rem;", ":0.375rem;", ":1rem;", ":1.75rem;", ":0.625rem;", ":0.0625rem;"], toolbarTokens.size, toolbarTokens.padding, toolbarTokens.borderRadius, toolbarTokens.dividerSize, toolbarTokens.dividerOffset, toolbarTokens.dividerBorderRadius),
-      l: /*#__PURE__*/css(["", ":4.5rem;", ":0.5rem;", ":1.25rem;", ":2rem;", ":0.75rem;", ":0.0625rem;"], toolbarTokens.size, toolbarTokens.padding, toolbarTokens.borderRadius, toolbarTokens.dividerSize, toolbarTokens.dividerOffset, toolbarTokens.dividerBorderRadius)
-    }
-  }
-};

package/styled-components/es/examples/sds_engineer/components/Toolbar/Toolbar.js

@@ -1,11 +0,0 @@
-import { component, mergeConfig } from '../../../../engines';
-import { toolbarConfig, toolbarDividerConfig } from '../../../../components/Toolbar';
-import { config } from './Toolbar.config';
-var mergedConfig = /*#__PURE__*/mergeConfig(toolbarConfig, config);
-
-/**
- * Компонент Toolbar.
- */
-export var Toolbar = /*#__PURE__*/component(mergedConfig);
-var mergedDividerConfig = /*#__PURE__*/mergeConfig(toolbarDividerConfig);
-export var ToolbarDivider = /*#__PURE__*/component(mergedDividerConfig);

package/styled-components/es/examples/sds_engineer/components/Toolbar/Toolbar.stories.tsx

@@ -1,64 +0,0 @@
-import React from 'react';
-import type { ComponentProps } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-
-import { IconDone } from '../../../../components/_Icon';
-import { Button } from '../Button/Button';
-import { WithTheme } from '../../../_helpers';
-
-import { Toolbar, ToolbarDivider } from './Toolbar';
-
-const orientations: Array<string> = ['vertical', 'horizontal'];
-const size: Array<string> = ['xs', 's', 'm', 'l'];
-
-const ToolbarWrapper = (props: ComponentProps<typeof Toolbar>) => {
-    return (
-        <Toolbar {...props}>
-            <Button square size={props.size} view="clear" contentLeft={<IconDone />} />
-            <Button square size={props.size} view="clear" contentLeft={<IconDone />} />
-            <Button square size={props.size} view="clear" contentLeft={<IconDone />} />
-            <ToolbarDivider />
-            <Button square size={props.size} view="clear" contentLeft={<IconDone />} />
-            <Button square size={props.size} view="clear" contentLeft={<IconDone />} />
-        </Toolbar>
-    );
-};
-
-const meta: Meta<typeof Toolbar> = {
-    title: 'sds_engineer/Toolbar',
-    component: ToolbarWrapper,
-    decorators: [WithTheme],
-    argTypes: {
-        orientation: {
-            options: orientations,
-            control: {
-                type: 'select',
-            },
-        },
-        hasShadow: {
-            control: {
-                type: 'boolean',
-            },
-        },
-        size: {
-            options: size,
-            control: {
-                type: 'select',
-            },
-        },
-    },
-    args: {
-        orientation: 'vertical',
-        hasShadow: true,
-        size: 'm',
-        view: 'default',
-    },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Toolbar>;
-
-export const Default: Story = {
-    args: {},
-};

package/styled-components/es/examples/sds_engineer/components/Tooltip/Tooltip.config.js

@@ -1,16 +0,0 @@
-import { css } from 'styled-components';
-import { tooltipTokens } from '../../../../components/Tooltip';
-export var config = {
-  defaults: {
-    view: 'default',
-    size: 'm'
-  },
-  variations: {
-    size: {
-      m: /*#__PURE__*/css(["", ":0.25rem;", ":0.5rem;", ":0.25rem;", ":0.5rem;", ":1.5rem;", ":0.25rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":500;", ":0px;", ":1rem;", ":0.25rem;", ":1rem;", ":1rem;", ":url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0ibTgsMTUuNzhsLTIuMjQsLTQuMzRjLTAuOTIsLTEuNzkgLTEuMzgsLTIuNjggLTIuMTUsLTMuMTdjLTAuNzcsLTAuNDkgLTEuNzIsLTAuNDkgLTMuNjEsLTAuNDlsMTYsMGMtMS44OSwwIC0yLjgzLDAgLTMuNiwwLjQ5Yy0wLjc4LDAuNDkgLTEuMjQsMS4zOCAtMi4xNiwzLjE2bC0yLjI0LDQuMzV6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLW9wYWNpdHk9IjEiIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9InBvaW50ZXIiLz4KPC9zdmc+\");", ":0.5rem;", ":0.625rem;", ":#475056;"], tooltipTokens.paddingTop, tooltipTokens.paddingRight, tooltipTokens.paddingBottom, tooltipTokens.paddingLeft, tooltipTokens.minHeight, tooltipTokens.borderRadius, tooltipTokens.textFontFamily, tooltipTokens.textFontSize, tooltipTokens.textFontStyle, tooltipTokens.textFontWeight, tooltipTokens.textFontLetterSpacing, tooltipTokens.textFontLineHeight, tooltipTokens.contentLeftMargin, tooltipTokens.arrowMaskWidth, tooltipTokens.arrowMaskHeight, tooltipTokens.arrowMaskImage, tooltipTokens.arrowHeight, tooltipTokens.arrowEdgeMargin, tooltipTokens.arrowBackground)
-    },
-    view: {
-      "default": /*#__PURE__*/css(["", ":#475056;", ":0px 1px 2px 0px rgba(2,13,76,0.15),0px 3.6px 7.1px 0px rgba(2,13,76,0.12),0px 16px 32px 0px rgba(2,13,76,0.2);", ":var(--on-dark-text-primary);"], tooltipTokens.backgroundColor, tooltipTokens.boxShadow, tooltipTokens.color)
-    }
-  }
-};

package/styled-components/es/examples/sds_engineer/components/Tooltip/Tooltip.js

@@ -1,5 +0,0 @@
-import { tooltipConfig } from '../../../../components/Tooltip';
-import { component, mergeConfig } from '../../../../engines';
-import { config } from './Tooltip.config';
-var mergedConfig = /*#__PURE__*/mergeConfig(tooltipConfig, config);
-export var Tooltip = /*#__PURE__*/component(mergedConfig);

package/styled-components/es/examples/sds_engineer/components/Tooltip/Tooltip.stories.tsx

@@ -1,205 +0,0 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import type { StoryObj, Meta } from '@storybook/react';
-
-import { WithTheme } from '../../../_helpers';
-import { Button } from '../Button/Button';
-import { PopoverPlacement } from '../Popover/Popover';
-import { IconDisclosureRight } from '../../../../components/_Icon';
-
-import { Tooltip } from './Tooltip';
-import type { TooltipProps } from './Tooltip';
-
-const placements: Array<PopoverPlacement> = [
-    'top',
-    'top-start',
-    'top-end',
-
-    'bottom',
-    'bottom-start',
-    'bottom-end',
-
-    'left',
-    'left-start',
-    'left-end',
-
-    'right',
-    'right-start',
-    'right-end',
-
-    'auto',
-];
-
-const meta: Meta<TooltipProps> = {
-    title: 'sds_engineer/Tooltip',
-    decorators: [WithTheme],
-    component: Tooltip,
-    parameters: {
-        docs: { story: { inline: false, iframeHeight: '20rem' } },
-    },
-};
-
-export default meta;
-
-const StyledGrid = styled.div`
-    display: grid;
-    grid-template-columns: repeat(3, max-content);
-    grid-gap: 1rem 3.5rem;
-    padding: 3.5rem;
-`;
-
-const StoryDefault = ({ size }: TooltipProps) => {
-    return (
-        <StyledGrid>
-            <Tooltip
-                target={
-                    <Tooltip
-                        target={<Button>Btn</Button>}
-                        placement="left"
-                        size={size}
-                        opened
-                        hasArrow
-                        text="left"
-                        frame="theme-root"
-                    />
-                }
-                placement="top-start"
-                size={size}
-                opened
-                hasArrow
-                text="top-start"
-                frame="theme-root"
-            />
-            <Tooltip
-                target={<Button>Btn</Button>}
-                placement="top"
-                size={size}
-                opened
-                hasArrow
-                text="top"
-                frame="theme-root"
-            />
-            <Tooltip
-                target={
-                    <Tooltip
-                        target={<Button>Btn</Button>}
-                        placement="right"
-                        size={size}
-                        opened
-                        hasArrow
-                        text="right"
-                        frame="theme-root"
-                    />
-                }
-                placement="top-end"
-                size={size}
-                opened
-                hasArrow
-                text="top-end"
-                frame="theme-root"
-            />
-            <Tooltip
-                target={<Button>Btn</Button>}
-                placement="bottom-start"
-                size={size}
-                opened
-                hasArrow
-                text="bottom-start"
-                frame="theme-root"
-            />
-            <Tooltip
-                target={<Button>Btn</Button>}
-                placement="bottom"
-                size={size}
-                opened
-                hasArrow
-                text="bottom"
-                frame="theme-root"
-            />
-            <Tooltip
-                target={<Button>Btn</Button>}
-                placement="bottom-end"
-                size={size}
-                opened
-                hasArrow
-                text="bottom-end"
-                frame="theme-root"
-            />
-        </StyledGrid>
-    );
-};
-
-export const Default: StoryObj<TooltipProps> = {
-    argTypes: {
-        size: {
-            options: ['m', 's'],
-            control: {
-                type: 'select',
-            },
-        },
-    },
-    args: {
-        size: 'm',
-    },
-    render: (args) => <StoryDefault {...args} />,
-};
-
-const StyledRow = styled.div`
-    display: flex;
-    width: 150vw;
-    height: 150vh;
-    padding: 10rem;
-`;
-
-const StoryLive = (args: TooltipProps) => {
-    const [text, setText] = useState('Type here');
-
-    return (
-        <>
-            <StyledRow>
-                <Tooltip
-                    target={
-                        <input
-                            name="Имя"
-                            value={text}
-                            onChange={(e) => setText(e.target.value)}
-                            aria-describedby="example-tooltip-firstname"
-                        />
-                    }
-                    contentLeft={<IconDisclosureRight size="xs" />}
-                    {...args}
-                    id="example-tooltip-firstname"
-                    text={text}
-                    opened
-                    frame="theme-root"
-                />
-            </StyledRow>
-        </>
-    );
-};
-
-export const Live: StoryObj<TooltipProps> = {
-    argTypes: {
-        placement: {
-            options: placements,
-            control: {
-                type: 'select',
-            },
-            mapping: placements,
-        },
-        size: {
-            options: ['m', 's'],
-            control: {
-                type: 'select',
-            },
-        },
-    },
-    args: {
-        placement: 'bottom',
-        maxWidth: 10,
-        minWidth: 3,
-        hasArrow: true,
-        size: 'm',
-    },
-    render: (args) => <StoryLive {...args} />,
-};