@salutejs/sdds-serv 0.314.0-canary.2021.15821149221.0 → 0.314.0-canary.2021.15824070198.0

package/emotion/cjs/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/cjs/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/cjs/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/cjs/components/Progress/Progress.stories.tsx

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

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

@@ -1,141 +0,0 @@
-import React, { useState } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { disableProps, InSpacingDecorator, getConfigVariations } from '@salutejs/plasma-sb-utils';
-
-import { config } from './Radiobox.config';
-
-import { Radiobox, RadioboxProps } from '.';
-
-const onChange = action('onChange');
-const onFocus = action('onFocus');
-const onBlur = action('onBlur');
-
-const { sizes } = getConfigVariations(config);
-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: 'inline-radio',
-            },
-        },
-        ...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: 'm',
-        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: 'm',
-        view: 'accent',
-        singleLine: false,
-        focused: true,
-    },
-    render: (args) => <StoryLive {...args} />,
-};