@salutejs/sdds-cs 0.319.0-canary.2021.15821149221.0 → 0.319.0-canary.2021.15824070198.0

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

@@ -1,87 +0,0 @@
-import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
-import React, { ComponentProps } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { IconDone } from '@salutejs/plasma-icons';
-
-import { Button } from '../Button';
-
-import { ToastContainer, showToast } from './ToastNew';
-
-const views = ['default'];
-const sizes = ['s'];
-const positions = ['top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'];
-
-const meta: Meta<typeof ToastContainer> = {
-    title: 'Overlay/Toast',
-    component: ToastContainer,
-    decorators: [InSpacingDecorator],
-    argTypes: {
-        view: {
-            options: views,
-            control: {
-                type: 'select',
-            },
-        },
-        size: {
-            options: sizes,
-            control: {
-                type: 'select',
-            },
-        },
-        pilled: {
-            control: { type: 'boolean' },
-        },
-        hasClose: {
-            control: { type: 'boolean' },
-        },
-        enableContentLeft: {
-            control: { type: 'boolean' },
-        },
-        width: {
-            control: { type: 'text' },
-        },
-        textColor: {
-            control: { type: 'text' },
-        },
-        duration: {
-            control: { type: 'number' },
-        },
-        position: {
-            options: positions,
-            control: {
-                type: 'select',
-            },
-        },
-    },
-};
-
-export default meta;
-
-type StoryPropsDefault = ComponentProps<typeof ToastContainer> & {
-    enableContentLeft?: boolean;
-};
-
-const StoryDefault = (args: StoryPropsDefault) => {
-    const handleShowToast = () => {
-        showToast('Текст всплывающего уведомления');
-    };
-
-    return (
-        <div>
-            <ToastContainer {...args} contentLeft={args.enableContentLeft && <IconDone size="s" color="inherit" />} />
-
-            <Button onClick={handleShowToast}>Показать тост</Button>
-        </div>
-    );
-};
-
-export const Default: StoryObj<StoryPropsDefault> = {
-    args: {
-        view: 'default',
-        size: 's',
-        pilled: false,
-        hasClose: true,
-        enableContentLeft: true,
-    },
-    render: StoryDefault,
-};

package/emotion/cjs/components/Tokens/Colors/Colors.stories.tsx

@@ -1,196 +0,0 @@
-import React, { FC } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { sdds_cs__light } from '@salutejs/sdds-themes/es/themes';
-import { InSpacingDecorator, getGroupedTokens, upperFirstLetter } from '@salutejs/plasma-sb-utils';
-import type { GroupedTokens, TokenData } from '@salutejs/plasma-sb-utils';
-import { cx } from '@salutejs/plasma-new-hope';
-
-import { Accordion } from '../../Accordion/Accordion';
-import { ToastProvider, useToast } from '../../Toast/Toast';
-import { SegmentGroup } from '../../Segment/Segment';
-import type { ShowToastArgs } from '../../Toast';
-import { SegmentProvider, useSegment } from '../../Segment';
-
-import {
-    AccordionInfo,
-    ColorCircle,
-    ColorTokensWrapper,
-    ColumnTitle,
-    StyledAccordionItem,
-    StyledSegmentItem,
-    Subcategory,
-    SubthemeSwitcher,
-    TokenInfoWrapper,
-    ColorTokenDataWrapper,
-    StateDataWrapper,
-    TokenInfo,
-    OpacityPart,
-} from './Colors.styles';
-
-type ColorTokenDataProps = {
-    token: string;
-    tokenData: Omit<TokenData, 'states'>;
-    copyToClipboard: (value: string, opacity?: string | null) => Promise<void>;
-    className?: string;
-    initialTokenName?: string;
-};
-
-const meta: Meta = {
-    title: 'Tokens/Colors',
-    decorators: [InSpacingDecorator],
-};
-
-export default meta;
-
-const themes: Record<string, GroupedTokens> = {
-    'sdds-srvc:light': getGroupedTokens(sdds_cs__light[0]),
-};
-
-const ColorTokenData: FC<ColorTokenDataProps> = ({
-    token,
-    tokenData,
-    copyToClipboard,
-    className,
-    initialTokenName,
-}) => {
-    const { value, opacity, tone, colorName } = tokenData;
-
-    return (
-        <AccordionInfo>
-            <TokenInfo className={cx('copy', className)} onClick={() => copyToClipboard(initialTokenName || token)}>
-                {token}
-            </TokenInfo>
-            <TokenInfo
-                className={cx('color', colorName && 'copy')}
-                onClick={() => Boolean(colorName) && copyToClipboard(value, opacity?.alpha)}
-            >
-                <ColorCircle background={value + (opacity?.alpha || '')} />
-                <div>{value.includes('gradient') ? 'Градиент' : colorName || ''}</div>
-            </TokenInfo>
-            <TokenInfo className="no-interaction">{tone !== 'none' && tone}</TokenInfo>
-            <TokenInfo className="no-interaction">{opacity?.parsedAlpha}</TokenInfo>
-            <TokenInfo className="color copy hex" onClick={() => copyToClipboard(value, opacity?.alpha)}>
-                <div>
-                    {value.includes('gradient') ? '' : value}
-                    {opacity && <OpacityPart>{opacity.alpha}</OpacityPart>}
-                </div>
-            </TokenInfo>
-        </AccordionInfo>
-    );
-};
-
-const StoryDemoColor = ({ context }) => {
-    const groupedTokens = themes[context.globals.theme];
-    const { showToast } = useToast();
-    const { selectedSegmentItems } = useSegment();
-    const toastData = {
-        view: 'default',
-        size: 'm',
-        hasClose: true,
-        fade: false,
-        position: 'bottom',
-        offset: 0,
-        timeout: 3000,
-        role: 'alert',
-    } as ShowToastArgs;
-
-    const copyToClipboard = async (value: string, opacity?: string | null) => {
-        try {
-            await navigator.clipboard.writeText(value + (opacity || ''));
-
-            showToast({
-                ...toastData,
-                text: 'Скопировано',
-            });
-        } catch (err) {
-            showToast({
-                ...toastData,
-                text: 'Ошибка при копировании текста',
-            });
-        }
-    };
-
-    if (!groupedTokens || !groupedTokens[selectedSegmentItems[0]]) {
-        return null;
-    }
-
-    const subcategories = groupedTokens[selectedSegmentItems[0]];
-
-    return (
-        <ColorTokensWrapper>
-            <SubthemeSwitcher>
-                <SegmentGroup view="clear" size="xs" hasBackground pilled>
-                    {Object.entries(groupedTokens).map(([category]) => (
-                        <StyledSegmentItem key={`label_${category}`} value={category} view="default" pilled>
-                            {category}
-                        </StyledSegmentItem>
-                    ))}
-                </SegmentGroup>
-            </SubthemeSwitcher>
-            <Accordion view="clear" size="s" stretching="filled" defaultActiveEventKey={[0]}>
-                {Object.entries(subcategories).map(([subcategory, subcategoryTokens], index) => (
-                    <StyledAccordionItem
-                        key={subcategory}
-                        eventKey={index}
-                        type="arrow"
-                        title={
-                            <AccordionInfo>
-                                <Subcategory>{subcategory}/</Subcategory>
-                                <ColumnTitle className="color">
-                                    <ColorCircle disableShadow />
-                                    Color
-                                </ColumnTitle>
-                                <ColumnTitle>Tone</ColumnTitle>
-                                <ColumnTitle>Opacity</ColumnTitle>
-                                <ColumnTitle className="hex">Hex</ColumnTitle>
-                            </AccordionInfo>
-                        }
-                    >
-                        <TokenInfoWrapper>
-                            {Object.entries(subcategoryTokens).map(([_, { states, ...tokenData }]) => {
-                                return (
-                                    tokenData.value !== 'undefined' && (
-                                        <ColorTokenDataWrapper>
-                                            <ColorTokenData
-                                                key={tokenData.fullTokenName}
-                                                token={tokenData.fullTokenName}
-                                                tokenData={tokenData}
-                                                copyToClipboard={copyToClipboard}
-                                            />
-                                            {states && Object.keys(states).length > 0 && (
-                                                <StateDataWrapper>
-                                                    {Object.entries(states).map(([state, stateTokenData]) => (
-                                                        <ColorTokenData
-                                                            key={state}
-                                                            token={state}
-                                                            tokenData={stateTokenData}
-                                                            copyToClipboard={copyToClipboard}
-                                                            className="state"
-                                                            initialTokenName={
-                                                                tokenData.fullTokenName + upperFirstLetter(state)
-                                                            }
-                                                        />
-                                                    ))}
-                                                </StateDataWrapper>
-                                            )}
-                                        </ColorTokenDataWrapper>
-                                    )
-                                );
-                            })}
-                        </TokenInfoWrapper>
-                    </StyledAccordionItem>
-                ))}
-            </Accordion>
-        </ColorTokensWrapper>
-    );
-};
-
-export const Default: StoryObj = {
-    render: (_, context) => (
-        <ToastProvider>
-            <SegmentProvider defaultSelected={['Default']} singleSelectedRequired>
-                <StoryDemoColor context={context} />
-            </SegmentProvider>
-        </ToastProvider>
-    ),
-};

package/emotion/cjs/components/Tokens/NumberTokens/CornerRadius.stories.tsx

@@ -1,93 +0,0 @@
-import React from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { sdds_cs__light } from '@salutejs/sdds-themes/es/themes';
-import { InSpacingDecorator, getGroupedSpacingTokens } from '@salutejs/plasma-sb-utils';
-import type { GroupedNumberTokens } from '@salutejs/plasma-sb-utils';
-
-import { ToastProvider, useToast } from '../../Toast/Toast';
-import type { ShowToastArgs } from '../../Toast';
-
-import {
-    TokenData,
-    TokenDataHeader,
-    TokenInfo,
-    TokensDataWrapper,
-    TokensTitle,
-    TokensWrapper,
-} from './NumberTokens.styles';
-
-const meta: Meta = {
-    title: 'Tokens/Spacing',
-    decorators: [InSpacingDecorator],
-};
-
-export default meta;
-
-const themes: Record<string, GroupedNumberTokens> = {
-    'sdds-srvc:light': getGroupedSpacingTokens(sdds_cs__light[0]),
-};
-
-const StoryDemo = ({ context }) => {
-    const groupedTokens = themes[context.globals.theme];
-    const { showToast } = useToast();
-    const toastData = {
-        view: 'default',
-        size: 'm',
-        hasClose: true,
-        fade: false,
-        position: 'bottom',
-        offset: 0,
-        timeout: 3000,
-        role: 'alert',
-    } as ShowToastArgs;
-
-    const copyToClipboard = async (value: string, opacity?: string | null) => {
-        try {
-            await navigator.clipboard.writeText(value + (opacity || ''));
-
-            showToast({
-                ...toastData,
-                text: 'Скопировано',
-            });
-        } catch (err) {
-            showToast({
-                ...toastData,
-                text: 'Ошибка при копировании текста',
-            });
-        }
-    };
-
-    if (!groupedTokens) {
-        return null;
-    }
-
-    return (
-        <TokensWrapper>
-            <TokensTitle>Spacing</TokensTitle>
-            <TokensDataWrapper>
-                <TokenDataHeader>
-                    <TokenInfo>Token/</TokenInfo>
-                    <TokenInfo className="value">px</TokenInfo>
-                </TokenDataHeader>
-                <TokenData>
-                    {Object.entries(groupedTokens).map(([tokenName, tokenValue]) => (
-                        <>
-                            <TokenInfo onClick={() => copyToClipboard(tokenName)}>{tokenName}</TokenInfo>
-                            <TokenInfo className="value" onClick={() => copyToClipboard(tokenValue)}>
-                                {tokenValue}
-                            </TokenInfo>
-                        </>
-                    ))}
-                </TokenData>
-            </TokensDataWrapper>
-        </TokensWrapper>
-    );
-};
-
-export const Default: StoryObj = {
-    render: (_, context) => (
-        <ToastProvider>
-            <StoryDemo context={context} />
-        </ToastProvider>
-    ),
-};

package/emotion/cjs/components/Tokens/NumberTokens/Spacing.stories.tsx

@@ -1,93 +0,0 @@
-import React from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { sdds_cs__light } from '@salutejs/sdds-themes/es/themes';
-import { InSpacingDecorator, getGroupedCornerRadiusTokens } from '@salutejs/plasma-sb-utils';
-import type { GroupedNumberTokens } from '@salutejs/plasma-sb-utils';
-
-import { ToastProvider, useToast } from '../../Toast/Toast';
-import type { ShowToastArgs } from '../../Toast';
-
-import {
-    TokenData,
-    TokenDataHeader,
-    TokenInfo,
-    TokensDataWrapper,
-    TokensTitle,
-    TokensWrapper,
-} from './NumberTokens.styles';
-
-const meta: Meta = {
-    title: 'Tokens/Corner Radius',
-    decorators: [InSpacingDecorator],
-};
-
-export default meta;
-
-const themes: Record<string, GroupedNumberTokens> = {
-    'sdds-srvc:light': getGroupedCornerRadiusTokens(sdds_cs__light[0]),
-};
-
-const StoryDemo = ({ context }) => {
-    const groupedTokens = themes[context.globals.theme];
-    const { showToast } = useToast();
-    const toastData = {
-        view: 'default',
-        size: 'm',
-        hasClose: true,
-        fade: false,
-        position: 'bottom',
-        offset: 0,
-        timeout: 3000,
-        role: 'alert',
-    } as ShowToastArgs;
-
-    const copyToClipboard = async (value: string, opacity?: string | null) => {
-        try {
-            await navigator.clipboard.writeText(value + (opacity || ''));
-
-            showToast({
-                ...toastData,
-                text: 'Скопировано',
-            });
-        } catch (err) {
-            showToast({
-                ...toastData,
-                text: 'Ошибка при копировании текста',
-            });
-        }
-    };
-
-    if (!groupedTokens) {
-        return null;
-    }
-
-    return (
-        <TokensWrapper>
-            <TokensTitle>CornerRadius</TokensTitle>
-            <TokensDataWrapper>
-                <TokenDataHeader>
-                    <TokenInfo>Token/</TokenInfo>
-                    <TokenInfo className="value">px</TokenInfo>
-                </TokenDataHeader>
-                <TokenData>
-                    {Object.entries(groupedTokens).map(([tokenName, tokenValue]) => (
-                        <>
-                            <TokenInfo onClick={() => copyToClipboard(tokenName)}>{tokenName}</TokenInfo>
-                            <TokenInfo className="value" onClick={() => copyToClipboard(tokenValue)}>
-                                {tokenValue}
-                            </TokenInfo>
-                        </>
-                    ))}
-                </TokenData>
-            </TokensDataWrapper>
-        </TokensWrapper>
-    );
-};
-
-export const Default: StoryObj = {
-    render: (_, context) => (
-        <ToastProvider>
-            <StoryDemo context={context} />
-        </ToastProvider>
-    ),
-};