@salutejs/sdds-cs 0.318.1-canary.2030.15819491481.0 → 0.318.1-canary.2030.15843645408.0

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

@@ -1,277 +0,0 @@
-import React, { Dispatch, FC, SetStateAction, useEffect, useState } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { sdds_cs__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-srvc:light': getGroupedTypographyTokens(sdds_cs__light[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>
-    ),
-};

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

@@ -1,64 +0,0 @@
-import React from 'react';
-import type { ComponentProps } from 'react';
-import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
-import type { StoryObj, Meta } from '@storybook/react';
-import { IconEdit } from '@salutejs/plasma-icons';
-
-import { Button } from '../Button';
-
-import { Toolbar, ToolbarDivider } from './Toolbar';
-
-const orientations: Array<string> = ['vertical', 'horizontal'];
-const size: Array<string> = ['s'];
-
-const ToolbarWrapper = (props: ComponentProps<typeof Toolbar>) => {
-    return (
-        <Toolbar {...props}>
-            <Button square size={props.size} view="clear" contentLeft={<IconEdit />} />
-            <Button square size={props.size} view="clear" contentLeft={<IconEdit />} />
-            <Button square size={props.size} view="clear" contentLeft={<IconEdit />} />
-            <ToolbarDivider />
-            <Button square size={props.size} view="clear" contentLeft={<IconEdit />} />
-            <Button square size={props.size} view="clear" contentLeft={<IconEdit />} />
-        </Toolbar>
-    );
-};
-
-const meta: Meta<typeof Toolbar> = {
-    title: 'Overlay/Toolbar',
-    component: ToolbarWrapper,
-    decorators: [InSpacingDecorator],
-    argTypes: {
-        orientation: {
-            options: orientations,
-            control: {
-                type: 'select',
-            },
-        },
-        hasShadow: {
-            control: {
-                type: 'boolean',
-            },
-        },
-        size: {
-            options: size,
-            control: {
-                type: 'select',
-            },
-        },
-        ...disableProps(['view', 'size']),
-    },
-    args: {
-        orientation: 'vertical',
-        hasShadow: true,
-        size: 's',
-    },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Toolbar>;
-
-export const Default: Story = {
-    args: {},
-};

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

@@ -1,152 +0,0 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import { IconPlasma } from '@salutejs/plasma-icons';
-import type { StoryObj, Meta } from '@storybook/react';
-import { InSpacingDecorator, disableProps } from '@salutejs/plasma-sb-utils';
-
-import { Button } from '../Button/Button';
-
-import { Tooltip } from '.';
-import type { TooltipProps } from '.';
-
-const placements: Array<string> = [
-    'top',
-    'top-start',
-    'top-end',
-
-    'bottom',
-    'bottom-start',
-    'bottom-end',
-
-    'left',
-    'left-start',
-    'left-end',
-
-    'right',
-    'right-start',
-    'right-end',
-
-    'auto',
-];
-
-const disabledProps = [
-    'target',
-    'children',
-    'text',
-    'opened',
-    'isOpen',
-    'isVisible',
-    'offset',
-    'frame',
-    'view',
-    'zIndex',
-    'minWidth',
-    'maxWidth',
-    'contentLeft',
-    'onDismiss',
-    'size',
-];
-const meta: Meta<TooltipProps> = {
-    title: 'Overlay/Tooltip',
-    decorators: [InSpacingDecorator],
-    component: Tooltip,
-};
-
-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 = (props: Pick<TooltipProps, 'hasArrow' | 'size' | 'usePortal'>) => {
-    return (
-        <StyledGrid>
-            <Tooltip
-                target={<Tooltip target={<Button>Btn</Button>} placement="left" opened text="left" {...props} />}
-                placement="top-start"
-                opened
-                text="top-start"
-                view="default"
-                {...props}
-            />
-            <Tooltip target={<Button>Btn</Button>} placement="top" opened text="top" {...props} />
-            <Tooltip
-                target={<Tooltip target={<Button>Btn</Button>} placement="right" opened text="right" {...props} />}
-                placement="top-end"
-                opened
-                text="top-end"
-                {...props}
-            />
-            <Tooltip target={<Button>Btn</Button>} placement="bottom-start" opened text="bottom-start" {...props} />
-            <Tooltip target={<Button>Btn</Button>} placement="bottom" opened text="bottom" {...props} />
-            <Tooltip target={<Button>Btn</Button>} placement="bottom-end" opened text="bottom-end" {...props} />
-        </StyledGrid>
-    );
-};
-
-export const Default: StoryObj<TooltipProps> = {
-    argTypes: {
-        ...disableProps([...disabledProps, 'placement']),
-    },
-    args: {
-        maxWidth: 10,
-        minWidth: 3,
-        hasArrow: true,
-        usePortal: false,
-        animated: true,
-        size: 's',
-    },
-    render: (args) => <StoryDefault {...args} />,
-};
-
-const StyledRow = styled.div`
-    display: flex;
-    width: 150vw;
-    height: 150vh;
-    padding: 10rem;
-`;
-
-const StoryLive = (args: TooltipProps) => {
-    const [isOpen, setIsOpen] = useState(false);
-
-    return (
-        <>
-            <StyledRow>
-                <Tooltip
-                    target={<Button onClick={() => setIsOpen(!isOpen)}>Show tooltip</Button>}
-                    contentLeft={<IconPlasma size="xs" />}
-                    {...args}
-                    id="example-tooltip-firstname"
-                    text="Tooltip text"
-                    opened={isOpen}
-                />
-            </StyledRow>
-        </>
-    );
-};
-
-export const Live: StoryObj<TooltipProps> = {
-    argTypes: {
-        placement: {
-            options: placements,
-            control: {
-                type: 'select',
-            },
-            mapping: placements,
-        },
-        ...disableProps(disabledProps),
-    },
-    args: {
-        placement: 'bottom',
-        maxWidth: 10,
-        minWidth: 3,
-        hasArrow: true,
-        usePortal: false,
-        animated: true,
-        size: 's',
-    },
-    render: (args) => <StoryLive {...args} />,
-};

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

@@ -1,146 +0,0 @@
-import * as React from 'react';
-import type { ComponentProps } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { InSpacingDecorator } from '@salutejs/plasma-sb-utils';
-import { IconBlankTxtOutline, IconLock, IconTrash } from '@salutejs/plasma-icons';
-
-import { Tree } from './Tree';
-
-type StoryTreeProps = ComponentProps<typeof Tree>;
-
-const size = ['s'];
-const arrowPlacements = ['left', 'right'];
-
-const meta: Meta<StoryTreeProps> = {
-    title: 'Data Entry/Tree',
-    decorators: [InSpacingDecorator],
-    component: Tree,
-    argTypes: {
-        size: {
-            control: 'select',
-            options: size,
-        },
-        checkable: {
-            control: 'boolean',
-        },
-        multiple: {
-            control: 'boolean',
-        },
-        arrowPlacement: {
-            options: arrowPlacements,
-            control: {
-                type: 'inline-radio',
-            },
-        },
-        defaultExpandAll: {
-            control: 'boolean',
-        },
-        fullWidthItemSelection: {
-            control: 'boolean',
-        },
-        height: {
-            control: 'number',
-        },
-        hasIcon: {
-            control: 'boolean',
-        },
-    },
-    args: {
-        size: 's',
-        fullWidthItemSelection: false,
-        checkable: false,
-        multiple: false,
-        arrowPlacement: 'left',
-        defaultExpandAll: true,
-        height: undefined,
-        hasIcon: true,
-    },
-    parameters: {
-        controls: {
-            include: [
-                'size',
-                'fullWidthItemSelection',
-                'checkable',
-                'multiple',
-                'arrowPlacement',
-                'defaultExpandAll',
-                'height',
-                'hasIcon',
-            ],
-        },
-    },
-};
-
-export default meta;
-
-const StoryDefault = (args: StoryTreeProps) => {
-    const treeData: any[] = [
-        {
-            title: 'Основной каталог',
-            key: '0-0',
-            contentRight: <IconTrash size={args.size === 'xs' ? 'xs' : 's'} color="var(--text-secondary)" />,
-            children: [
-                {
-                    title: 'Документы',
-                    key: '0-0-0',
-                    children: [
-                        {
-                            title: 'Отчёты',
-                            key: '0-0-0-0',
-                            contentRight: (
-                                <IconLock size={args.size === 'xs' ? 'xs' : 's'} color="var(--text-secondary)" />
-                            ),
-                            disabled: true,
-                        },
-                        {
-                            title: 'Проекты',
-                            key: '0-0-0-1',
-                            children: [
-                                {
-                                    title: 'Проект Альфа',
-                                    key: '0-0-0-0-0',
-                                    icon: (
-                                        <IconBlankTxtOutline size={args.size === 'xs' ? 'xs' : 's'} color="inherit" />
-                                    ),
-                                },
-                                {
-                                    title: 'Проект Бета',
-                                    key: '0-0-0-0-1',
-                                    icon: (
-                                        <IconBlankTxtOutline size={args.size === 'xs' ? 'xs' : 's'} color="inherit" />
-                                    ),
-                                },
-                            ],
-                        },
-                    ],
-                },
-                {
-                    title: 'Медиа',
-                    key: '0-0-1',
-                    children: [
-                        {
-                            title: 'Фотографии',
-                            key: '0-0-1-0',
-                        },
-                    ],
-                },
-            ],
-        },
-        {
-            title: 'Корзина',
-            key: '0-1',
-            children: [
-                {
-                    title: 'Удалённые файлы',
-                    key: '0-1-0',
-                },
-            ],
-        },
-    ];
-
-    return <Tree {...args} items={treeData} />;
-};
-
-export const Default: StoryObj<StoryTreeProps> = {
-    render: (args) => <StoryDefault {...args} />,
-};