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

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

@@ -1,197 +0,0 @@
-import React, { FC } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { sdds_serv__dark, sdds_serv__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-serv:light': getGroupedTokens(sdds_serv__light[0]),
-    'sdds-serv:dark': getGroupedTokens(sdds_serv__dark[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,94 +0,0 @@
-import React from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { sdds_serv__dark, sdds_serv__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-serv:light': getGroupedSpacingTokens(sdds_serv__light[0]),
-    'sdds-serv:dark': getGroupedSpacingTokens(sdds_serv__dark[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,94 +0,0 @@
-import React from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { sdds_serv__dark, sdds_serv__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-serv:light': getGroupedCornerRadiusTokens(sdds_serv__light[0]),
-    'sdds-serv:dark': getGroupedCornerRadiusTokens(sdds_serv__dark[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>
-    ),
-};

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

@@ -1,278 +0,0 @@
-import React, { Dispatch, FC, SetStateAction, useEffect, useState } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { sdds_serv__dark, sdds_serv__light } from '@salutejs/sdds-themes';
-import {
-    InSpacingDecorator,
-    getGroupedTypographyTokens,
-    typographyPangrams,
-    upperFirstLetter,
-    typographyToCssMap,
-} from '@salutejs/plasma-sb-utils';
-import type {
-    TypographyStructure,
-    Breakpoint,
-    TypographyProperties,
-    TypographyWeight,
-} from '@salutejs/plasma-sb-utils';
-
-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,
-    AccordionTypographyTitle,
-    BreakpointSwitcher,
-    FontFamily,
-    FontPropsSwitcher,
-    FontWeightSwitcher,
-    StyledAccordionItem,
-    StyledSegmentItem,
-    TokenInfo,
-    TokenInfoWrapper,
-    TokenPropName,
-    TokenProps,
-    TokenPropsWrapper,
-    TokenPropValue,
-    TokenShortName,
-    TokenText,
-    TypographyTokensWrapper,
-} from './Typography.styles';
-
-const meta: Meta = {
-    title: 'Tokens/Typography',
-    decorators: [InSpacingDecorator],
-};
-
-export default meta;
-
-const themes: Record<string, TypographyStructure> = {
-    'sdds-serv:light': getGroupedTypographyTokens(sdds_serv__light[0]),
-    'sdds-serv:dark': getGroupedTypographyTokens(sdds_serv__dark[0]),
-};
-
-type FontWeightControllerProps = {
-    fontWeights: Array<TypographyWeight>;
-    setFontWeight: Dispatch<SetStateAction<TypographyWeight>>;
-};
-
-type BreakpointControllerProps = {
-    breakpoints: Array<Breakpoint>;
-    setBreakPoint: Dispatch<SetStateAction<Breakpoint>>;
-};
-
-type FontControllerProps = {
-    controlledParams: FontWeightControllerProps['fontWeights'] | BreakpointControllerProps['breakpoints'];
-    setCurrentParam: FontWeightControllerProps['setFontWeight'] | BreakpointControllerProps['setBreakPoint'];
-};
-
-const FontController: FC<FontControllerProps> = ({ controlledParams, setCurrentParam }) => {
-    const { selectedSegmentItems } = useSegment();
-
-    useEffect(() => {
-        setCurrentParam(selectedSegmentItems[0] as TypographyWeight & Breakpoint);
-    }, [selectedSegmentItems]);
-
-    return (
-        <SegmentGroup view="clear" size="xs" hasBackground pilled>
-            {controlledParams.map((param) => (
-                <StyledSegmentItem
-                    key={`label_${param}`}
-                    value={param}
-                    label={upperFirstLetter(param)}
-                    view="default"
-                    pilled
-                />
-            ))}
-        </SegmentGroup>
-    );
-};
-
-const FontParamsSwitcher: FC<FontWeightControllerProps & BreakpointControllerProps> = ({
-    fontWeights,
-    setFontWeight,
-    breakpoints,
-    setBreakPoint,
-}) => {
-    return (
-        <FontPropsSwitcher>
-            <SegmentProvider defaultSelected={[fontWeights[0]]} singleSelectedRequired>
-                <FontWeightSwitcher>
-                    <FontController controlledParams={fontWeights} setCurrentParam={setFontWeight} />
-                </FontWeightSwitcher>
-            </SegmentProvider>
-            <SegmentProvider defaultSelected={[breakpoints[0]]} singleSelectedRequired>
-                <BreakpointSwitcher>
-                    <FontController controlledParams={breakpoints} setCurrentParam={setBreakPoint} />
-                </BreakpointSwitcher>
-            </SegmentProvider>
-        </FontPropsSwitcher>
-    );
-};
-
-type TokenDataProps = {
-    title: string;
-    token: string;
-    size: string;
-    fontFamily: string;
-    fontWeight: TypographyWeight;
-    data: TypographyProperties;
-    copyToClipboard: (value: string) => Promise<void>;
-};
-
-const getFontProps = (fontFamily: string, data: TypographyProperties) => {
-    return Object.entries(data).reduce((acc, [name, value]) => {
-        acc += `${typographyToCssMap[name]}: ${value};\n`;
-        return acc;
-    }, `font-family: ${fontFamily};\n`);
-};
-
-const getFontTokens = (fontFamily: string, title: string, token: string, size: string, isBold) => {
-    return Object.values(typographyToCssMap).reduce((acc, value) => {
-        const tokenName = title === 'header' ? '' : `${token}-`;
-        const boldPart = isBold && value === 'font-weight' ? 'bold-' : '';
-        const fullTokenName = `--plasma-typo-${tokenName}${size}-${boldPart}`;
-
-        acc += `${value}: var(${fullTokenName}${value});\n`;
-        return acc;
-    }, `font-family: ${fontFamily};\n`);
-};
-
-const TokenData: FC<TokenDataProps> = ({ title, token, size, fontFamily, fontWeight, data, copyToClipboard }) => {
-    const actualTitle = title === 'header' ? size : title + size.toLocaleUpperCase();
-    const isBold = fontWeight === 'bold';
-
-    const copyFontTokens = () => {
-        const fontTokens = getFontTokens(fontFamily, title, token, size, isBold);
-        copyToClipboard(fontTokens);
-    };
-
-    const copyFontProps = () => {
-        const fontProps = getFontProps(fontFamily, data);
-        copyToClipboard(fontProps);
-    };
-
-    return (
-        <AccordionInfo>
-            <TokenShortName onClick={copyFontTokens}>
-                {actualTitle} {fontWeight.charAt(0).toLocaleUpperCase()}
-            </TokenShortName>
-
-            <TokenInfo>
-                <TokenText {...data} isDisplay={token === 'dspl'}>
-                    {typographyPangrams[token]}
-                </TokenText>
-                <TokenPropsWrapper onClick={copyFontProps}>
-                    {Object.entries(data).map(([name, value]) => {
-                        const cleanValue =
-                            name === 'fontSize' || name === 'lineHeight'
-                                ? Number(value.replace('rem', '')) * 16
-                                : value;
-                        return (
-                            <TokenProps>
-                                <TokenPropValue>{cleanValue}</TokenPropValue>
-                                <TokenPropName>{name}</TokenPropName>
-                            </TokenProps>
-                        );
-                    })}
-                </TokenPropsWrapper>
-            </TokenInfo>
-        </AccordionInfo>
-    );
-};
-
-const StoryDemoTypography = ({ context }) => {
-    const groupedTokens = themes[context.globals.theme];
-
-    const actualFontWeights = Object.keys(groupedTokens) as Array<TypographyWeight>;
-    const [fontWeight, setFontWeight] = useState<TypographyWeight>(actualFontWeights[0]);
-
-    const actualBreakpoints = Object.keys(groupedTokens[fontWeight]) as Array<Breakpoint>;
-    const [breakpoint, setBreakpoint] = useState<Breakpoint>(actualBreakpoints[0]);
-
-    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) => {
-        try {
-            await navigator.clipboard.writeText(value);
-
-            showToast({
-                ...toastData,
-                text: 'Скопировано',
-            });
-        } catch (err) {
-            showToast({
-                ...toastData,
-                text: 'Ошибка при копировании текста',
-            });
-        }
-    };
-
-    if (!groupedTokens[fontWeight][breakpoint]) {
-        return null;
-    }
-
-    return (
-        <TypographyTokensWrapper>
-            <FontParamsSwitcher
-                fontWeights={actualFontWeights}
-                setFontWeight={setFontWeight}
-                breakpoints={actualBreakpoints}
-                setBreakPoint={setBreakpoint}
-            />
-            <Accordion view="clear" size="s" stretching="filled" defaultActiveEventKey={[0]}>
-                {Object.entries(groupedTokens[fontWeight][breakpoint]).map(([token, { fontFamily, sizes }], index) => {
-                    const title = token === 'dspl' ? 'display' : token;
-
-                    return (
-                        <StyledAccordionItem
-                            key={title + fontFamily}
-                            eventKey={index}
-                            type="arrow"
-                            title={
-                                <AccordionTypographyTitle>
-                                    {upperFirstLetter(title)} <FontFamily>{fontFamily}</FontFamily>
-                                </AccordionTypographyTitle>
-                            }
-                        >
-                            <TokenInfoWrapper>
-                                {Object.entries(sizes).map(([size, data]) => (
-                                    <TokenData
-                                        key={size + title}
-                                        title={title}
-                                        fontWeight={fontWeight}
-                                        fontFamily={fontFamily}
-                                        token={token}
-                                        size={size}
-                                        data={data}
-                                        copyToClipboard={copyToClipboard}
-                                    />
-                                ))}
-                            </TokenInfoWrapper>
-                        </StyledAccordionItem>
-                    );
-                })}
-            </Accordion>
-        </TypographyTokensWrapper>
-    );
-};
-
-export const Default: StoryObj = {
-    render: (_, context) => (
-        <ToastProvider>
-            <StoryDemoTypography context={context} />
-        </ToastProvider>
-    ),
-};