@salutejs/sdds-cs 0.319.0-canary.2017.15583893358.0 → 0.319.0-canary.2020.15824629894.0

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

@@ -1,139 +0,0 @@
-import React, { useState, useCallback } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
-import { action } from '@storybook/addon-actions';
-
-import { Button } from '../Button';
-
-import { Pagination } from './Pagination';
-
-const meta: Meta<typeof Pagination> = {
-    title: 'Navigation/Pagination',
-    decorators: [InSpacingDecorator],
-    argTypes: {
-        size: {
-            options: ['s'],
-            control: {
-                type: 'select',
-            },
-        },
-        type: {
-            options: ['default', 'compact'],
-            control: {
-                type: 'select',
-            },
-        },
-        view: {
-            options: ['default'],
-            control: {
-                type: 'select',
-            },
-        },
-        slots: {
-            control: {
-                type: 'range',
-                min: 7,
-                max: 15,
-            },
-        },
-        viewCurrentPage: {
-            options: ['default'],
-            control: {
-                type: 'select',
-            },
-        },
-        ...disableProps(['contentLeft', 'contentRight', 'size', 'view', 'viewCurrentPage']),
-    },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Pagination>;
-
-export const Default: Story = {
-    args: {
-        count: 2000,
-        value: 1,
-        slots: 9,
-        perPage: 20,
-        type: 'default',
-        view: 'default',
-        viewCurrentPage: 'default',
-        size: 's',
-        hasQuickJump: true,
-        disabledPages: ['2'],
-        hasPerPage: true,
-        pilled: false,
-        square: true,
-    },
-    render: (args) => <Pagination {...args} />,
-};
-
-const PaginationContent = (args) => {
-    const [pageValue, setPageValue] = useState(args.value);
-    const [perPageValue, setPerPageValue] = useState(args.perPage);
-
-    const handleChangePage = useCallback(
-        (page: number) => {
-            setPageValue(page);
-            action('onChangePageValue')(page);
-        },
-        [pageValue, setPageValue],
-    );
-
-    const handleChangePerpage = useCallback(
-        (perPage: number) => {
-            setPerPageValue(perPage);
-            action('onChangePerPageValue')(perPage);
-        },
-        [perPageValue, setPerPageValue],
-    );
-
-    return (
-        <>
-            <Pagination
-                {...args}
-                value={pageValue}
-                perPage={perPageValue}
-                leftContent={
-                    <Button
-                        onClick={() => {
-                            setPageValue(pageValue - 1);
-                        }}
-                    >
-                        Prev
-                    </Button>
-                }
-                rightContent={
-                    <Button
-                        onClick={() => {
-                            setPageValue(pageValue + 1);
-                        }}
-                    >
-                        Next
-                    </Button>
-                }
-                onChangePageValue={handleChangePage}
-                onChangePerPageValue={handleChangePerpage}
-            />
-        </>
-    );
-};
-
-export const Content: Story = {
-    args: {
-        count: 2000,
-        value: 1,
-        slots: 9,
-        perPage: 20,
-        type: 'default',
-        view: 'default',
-        viewCurrentPage: 'default',
-        size: 's',
-        hasQuickJump: true,
-        hasPerPage: true,
-        pilled: false,
-        square: true,
-    },
-    render: (args) => <PaginationContent {...args} />,
-};

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

@@ -1,127 +0,0 @@
-import React, { useState } from 'react';
-import type { ComponentProps } from 'react';
-import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
-import styled from 'styled-components';
-import type { StoryObj, Meta } from '@storybook/react';
-
-import { Button } from '../Button/Button';
-
-import { Popover } from './Popover';
-
-import './style.css';
-
-const meta: Meta<typeof Popover> = {
-    title: 'Overlay/Popover',
-    decorators: [InSpacingDecorator],
-    component: Popover,
-    argTypes: {
-        placement: {
-            options: ['top', 'bottom', 'right', 'left', 'auto'],
-            control: {
-                type: 'select',
-            },
-            table: { defaultValue: { summary: 'bottom' } },
-            mapping: {
-                top: 'top',
-                bottom: 'bottom',
-                right: 'right',
-                left: 'left',
-                auto: 'auto',
-            },
-        },
-        trigger: {
-            options: ['click', 'hover'],
-            control: {
-                type: 'select',
-            },
-            table: { defaultValue: { summary: 'click' } },
-        },
-        closeOnOverlayClick: {
-            control: {
-                type: 'boolean',
-            },
-            table: { defaultValue: { summary: true } },
-        },
-        closeOnEsc: {
-            control: {
-                type: 'boolean',
-            },
-            table: { defaultValue: { summary: true } },
-        },
-        isFocusTrapped: {
-            control: {
-                type: 'boolean',
-            },
-            table: { defaultValue: { summary: true } },
-        },
-        skidding: {
-            control: {
-                type: 'number',
-            },
-            table: { defaultValue: { summary: 0 } },
-        },
-        distance: {
-            control: {
-                type: 'number',
-            },
-            table: { defaultValue: { summary: 6 } },
-        },
-        ...disableProps(['view']),
-    },
-    args: {
-        placement: 'bottom',
-        trigger: 'click',
-        closeOnOverlayClick: true,
-        closeOnEsc: true,
-        isFocusTrapped: true,
-        skidding: 0,
-        distance: 6,
-        animated: true,
-    },
-};
-
-export default meta;
-
-type StoryPopoverProps = ComponentProps<typeof Popover> & {
-    skidding?: number;
-    distance?: number;
-};
-
-const StyledContent = styled.div`
-    background: var(--surface-solid-card);
-    padding: 1rem;
-    border-radius: var(--popover-border-radius);
-
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-`;
-
-const StoryDefault = (args: StoryPopoverProps) => {
-    const { skidding = 0, distance = 6 } = args;
-
-    const [isOpen, setIsOpen] = useState(false);
-
-    return (
-        <Popover
-            opened={isOpen}
-            onToggle={(is) => setIsOpen(is)}
-            usePortal={false}
-            role="presentation"
-            id="popover"
-            target={<Button>Target</Button>}
-            hasArrow
-            offset={[skidding, distance]}
-            {...args}
-        >
-            <StyledContent>
-                <>Content</>
-                <Button onClick={() => setIsOpen(false)}>Close</Button>
-            </StyledContent>
-        </Popover>
-    );
-};
-
-export const Default: StoryObj<StoryPopoverProps> = {
-    render: (args) => <StoryDefault {...args} />,
-};

package/emotion/es/components/Popover/style.css

@@ -1,4 +0,0 @@
-.popover-root {
-    --popover-border-radius: 0.5rem;
-    border-radius: var(--popover-border-radius);
-}

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

@@ -1,171 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import type { StoryObj, Meta } from '@storybook/react';
-import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
-
-import { SSRProvider } from '../SSRProvider';
-import { Button } from '../Button';
-
-import { Popup, popupClasses, PopupProvider } from '.';
-import type { PopupProps } from '.';
-
-const meta: Meta<PopupProps> = {
-    title: 'Overlay/Popup',
-    component: Popup,
-    decorators: [InSpacingDecorator],
-    parameters: {
-        docs: { story: { inline: false, iframeHeight: '30rem' } },
-    },
-    argTypes: {
-        placement: {
-            options: [
-                'center',
-                'top',
-                'bottom',
-                'right',
-                'left',
-                'top-right',
-                'top-left',
-                'bottom-right',
-                'bottom-left',
-            ],
-            control: {
-                type: 'select',
-            },
-        },
-    },
-};
-
-export default meta;
-
-type StoryPopupProps = { placement: string; offsetX: number; offsetY: number };
-
-const StyledButton = styled(Button)`
-    margin-top: 1rem;
-    width: 15rem;
-`;
-
-const StyledWrapper = styled.div`
-    height: 1200px;
-`;
-
-const OtherContent = styled.div`
-    margin-top: 1rem;
-    width: 400px;
-    height: 500px;
-    background: var(--surface-solid-tertiary);
-    position: absolute;
-
-    display: flex;
-    align-items: flex-start;
-    justify-content: center;
-    padding: 1rem;
-
-    top: 0;
-    right: 0;
-`;
-
-const Content = styled.div`
-    background: var(--surface-solid-secondary);
-    padding: 1rem;
-`;
-
-const StyledPopupAnimation = styled(Popup)`
-    && .${popupClasses.root} {
-        animation: fadeIn 1s forwards;
-    }
-
-    &&.${popupClasses.endAnimation} .${popupClasses.root} {
-        animation: fadeOut 1s forwards;
-    }
-
-    @keyframes fadeIn {
-        from {
-            opacity: 0;
-        }
-
-        to {
-            opacity: 1;
-        }
-    }
-
-    @keyframes fadeOut {
-        from {
-            opacity: 1;
-        }
-
-        to {
-            opacity: 0;
-        }
-    }
-`;
-
-const StyledPopupTransition = styled(Popup)`
-    && .${popupClasses.root} {
-        opacity: 1;
-        transition: opacity 0.5s 0.1s;
-    }
-
-    &&.${popupClasses.endTransition} .${popupClasses.root} {
-        opacity: 0;
-        transition: opacity 0.5s 0.1s;
-    }
-`;
-
-const StoryPopup = ({ placement, offsetX, offsetY }: StoryPopupProps) => {
-    const [isOpenA, setIsOpenA] = React.useState(false);
-    const [isOpenB, setIsOpenB] = React.useState(false);
-
-    const ref = React.useRef<HTMLDivElement>(null);
-
-    return (
-        <SSRProvider>
-            <StyledWrapper>
-                <PopupProvider>
-                    <div style={{ display: 'flex', flexDirection: 'column' }}>
-                        <StyledButton text="Открыть в document" onClick={() => setIsOpenB(true)} />
-                        <StyledButton text="Открыть во Frame" onClick={() => setIsOpenA(true)} />
-                    </div>
-                    <StyledPopupAnimation
-                        id="popupA"
-                        withAnimation
-                        frame={ref}
-                        opened={isOpenA}
-                        placement={placement}
-                        offset={[offsetX, offsetY]}
-                    >
-                        <Content>
-                            <Button onClick={() => setIsOpenA(false)}>Close</Button>
-                            <>Content</>
-                        </Content>
-                    </StyledPopupAnimation>
-                    <OtherContent ref={ref}>
-                        <>Frame</>
-                    </OtherContent>
-                    <StyledPopupTransition
-                        id="popupB"
-                        withAnimation
-                        frame="document"
-                        opened={isOpenB}
-                        placement={placement}
-                        offset={[offsetX, offsetY]}
-                    >
-                        <Content>
-                            <Button onClick={() => setIsOpenB(false)}>Close</Button>
-                            <>Content</>
-                        </Content>
-                    </StyledPopupTransition>
-                </PopupProvider>
-            </StyledWrapper>
-        </SSRProvider>
-    );
-};
-
-export const PopupDemo: StoryObj<StoryPopupProps> = {
-    args: {
-        placement: 'center',
-        offsetX: 0,
-        offsetY: 0,
-    },
-    render: (args) => <StoryPopup {...args} />,
-};

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

@@ -1,57 +0,0 @@
-import React, { useState, useRef } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
-import type { ComponentProps } from 'react';
-import styled from 'styled-components';
-
-import { Button } from '../Button/Button';
-import { BodyM } from '../Typography';
-
-import { Portal } from '.';
-
-const meta: Meta<typeof Portal> = {
-    title: 'Data Entry/Portal',
-    decorators: [InSpacingDecorator],
-    args: {
-        disabled: false,
-    },
-};
-
-export default meta;
-
-type StoryPortalProps = ComponentProps<typeof Portal>;
-
-const StyledWrapper = styled.div`
-    padding: 1.25rem;
-    margin-bottom: 0.625rem;
-    margin-top: 0.625rem;
-
-    border: 1px solid;
-`;
-
-const StoryDefault = ({ disabled }: StoryPortalProps) => {
-    const [show, setShow] = useState(false);
-    const containerRef = useRef<HTMLDivElement>(null);
-
-    return (
-        <>
-            <Button onClick={() => setShow(!show)}>{show ? 'Скрыть' : 'Показать'}</Button>
-            <StyledWrapper>
-                <BodyM style={{ marginBottom: '1.25rem' }}>Содержимое портала появится в нижнем блоке.</BodyM>
-                <BodyM style={{ marginBottom: '1.25rem' }}>
-                    Если портал выключен (disabled), то содержимое появится в данном блоке.
-                </BodyM>
-                {show && containerRef.current && (
-                    <Portal disabled={disabled} container={containerRef.current}>
-                        <BodyM bold>Содержимое портала</BodyM>
-                    </Portal>
-                )}
-            </StyledWrapper>
-            <StyledWrapper ref={containerRef} />
-        </>
-    );
-};
-
-export const Default: StoryObj<StoryPortalProps> = {
-    render: (args) => <StoryDefault {...args} />,
-};

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

@@ -1,34 +0,0 @@
-import React, { ComponentProps } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
-
-import { Price } from '.';
-
-const meta: Meta<typeof Price> = {
-    title: 'Data Display/Price',
-    decorators: [InSpacingDecorator],
-    argTypes: {
-        currency: {
-            options: ['rub', 'usd', 'eur', 'inr'],
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        ...disableProps(['children', 'theme', 'as', 'forwardedAs']),
-    },
-};
-
-export default meta;
-
-type StoryPriceProps = ComponentProps<typeof Price> & { priceLabel: number };
-
-export const Default: StoryObj<StoryPriceProps> = {
-    args: {
-        locale: 'ru',
-        currency: 'rub',
-        stroked: false,
-        minimumFractionDigits: 0,
-        priceLabel: 12345.67,
-    },
-    render: ({ priceLabel, ...rest }) => <Price {...rest}>{priceLabel}</Price>,
-};

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

@@ -1,32 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import { InSpacingDecorator, disableProps } from '@salutejs/plasma-sb-utils';
-
-import { Progress } from '.';
-import type { ProgressProps } from '.';
-
-const views = ['default', 'accent', 'positive', 'negative'];
-
-const meta: Meta<typeof Progress> = {
-    title: 'Overlay/Progress',
-    component: Progress,
-    decorators: [InSpacingDecorator],
-    argTypes: {
-        view: {
-            options: views,
-            control: {
-                type: 'select',
-            },
-        },
-        ...disableProps(['status', 'size']),
-    },
-};
-
-export default meta;
-
-export const Default: StoryObj<ProgressProps> = {
-    args: {
-        value: 25,
-        view: 'default',
-        displayValue: true,
-    },
-};

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

@@ -1,139 +0,0 @@
-import React, { useState } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
-
-import { Radiobox, RadioboxProps } from '.';
-
-const onChange = action('onChange');
-const onFocus = action('onFocus');
-const onBlur = action('onBlur');
-
-const sizes = ['s'];
-const views = ['accent'];
-
-const meta: Meta<RadioboxProps> = {
-    title: 'Data Entry/Radiobox',
-    component: Radiobox,
-    decorators: [InSpacingDecorator],
-    argTypes: {
-        size: {
-            options: sizes,
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        view: {
-            options: views,
-            control: {
-                type: 'select',
-            },
-        },
-        ...disableProps(['view']),
-    },
-};
-
-export default meta;
-
-type Story = StoryObj<RadioboxProps>;
-
-const cDescription = (
-    <div>
-        A general-purpose, procedural computer programming{' '}
-        <a href="https://en.wikipedia.org/wiki/C_(programming_language)">language</a>{' '}
-    </div>
-);
-
-const langName = 'language';
-
-const items = [
-    {
-        langName,
-        value: 'c',
-        label: 'C',
-        disabled: false,
-        description: cDescription,
-    },
-    { langName, value: 'cpp', label: 'C++', disabled: false },
-    { langName, value: 'assembly', label: 'Assembly', disabled: false },
-    { langName, value: 'elixir', label: 'Elixir', disabled: true },
-];
-
-const StoryDefault = ({ name, label, description, disabled, singleLine, size, view }: RadioboxProps) => {
-    const value = 0;
-    const [checked, setChecked] = React.useState(true);
-
-    return (
-        <Radiobox
-            name={name}
-            value={value}
-            label={label}
-            description={description}
-            disabled={disabled}
-            checked={checked}
-            singleLine={singleLine}
-            size={size}
-            view={view}
-            onChange={(event) => {
-                event.persist();
-
-                setChecked(event.target.checked);
-                onChange(event);
-            }}
-            onFocus={onFocus}
-            onBlur={onBlur}
-        />
-    );
-};
-
-export const Default: Story = {
-    args: {
-        name: 'Radiobox',
-        label: 'Label',
-        description: 'Description',
-        disabled: false,
-        singleLine: false,
-        size: 's',
-        view: 'accent',
-    },
-    render: (args) => <StoryDefault {...args} />,
-};
-
-const StoryLive = (props: RadioboxProps) => {
-    const [value, setValue] = useState('c');
-
-    return (
-        <>
-            {items.map((item) => (
-                <Radiobox
-                    key={item.value}
-                    name={item.langName}
-                    value={item.value}
-                    label={item.label}
-                    disabled={item.disabled}
-                    checked={value[item.value]}
-                    description={item.description}
-                    onChange={(event) => {
-                        event.persist();
-
-                        setValue(item.value);
-                        onChange(event);
-                    }}
-                    onFocus={onFocus}
-                    onBlur={onBlur}
-                    {...props}
-                />
-            ))}
-        </>
-    );
-};
-
-export const Live: Story = {
-    args: {
-        size: 's',
-        view: 'accent',
-        singleLine: false,
-        focused: true,
-    },
-    render: (args) => <StoryLive {...args} />,
-};