@salutejs/plasma-new-hope 0.88.0-canary.1225.9450426570.0 → 0.88.0-canary.1233.9437372350.0

package/styled-components/es/examples/plasma_web/components/Select/Select.stories.tsx

@@ -1,272 +0,0 @@
-import React, { useState } from 'react';
-import type { ComponentProps } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-
-import { mergeConfig } from '../../../../engines';
-import { Checkbox } from '../Checkbox/Checkbox';
-import { Button } from '../Button/Button';
-import { SelectPrimitiveValue, selectConfig } from '../../../../components/Select';
-import { WithTheme, argTypesFromConfig } from '../../../_helpers';
-import { IconDone, IconClose } from '../../../../components/_Icon';
-
-import { Select, SelectDivider, SelectItem } from './Select';
-import { config } from './Select.config';
-
-const placements: Array<string> = ['top', 'bottom', 'right', 'left', 'auto'];
-const enumerations: Array<string> = ['comma', 'chip'];
-
-type StorySelectPropsCustom = {
-    skidding?: number;
-    distance?: number;
-};
-
-type StorySelectProps = ComponentProps<typeof Select> & StorySelectPropsCustom;
-
-const meta: Meta<StorySelectProps> = {
-    title: 'plasma_web/Select',
-    decorators: [WithTheme],
-    component: Select,
-    argTypes: {
-        placement: {
-            options: placements,
-            control: {
-                type: 'select',
-            },
-        },
-        enumerationType: {
-            options: enumerations,
-            control: {
-                type: 'select',
-            },
-        },
-        ...argTypesFromConfig(mergeConfig(selectConfig, config)),
-    },
-    args: {
-        usePortal: false,
-        disabled: false,
-        readOnly: false,
-        label: 'Label',
-        target: 'button-like',
-        enumerationType: 'comma',
-        size: 'm',
-        view: 'default',
-        placement: 'bottom',
-    },
-};
-
-export default meta;
-
-const onChangeAction = action('onChange');
-
-const iconDoneToSelectSizeMap: Record<string, 'xs' | 's'> = {
-    xs: 'xs',
-    s: 's',
-    m: 's',
-    l: 's',
-};
-
-const checkboxToSelectSizeMap: Record<string, 's' | 'm'> = {
-    xs: 's',
-    s: 'm',
-    m: 'm',
-    l: 'm',
-};
-
-const getSelectItems = (slug: string, elemCount: number) =>
-    [...Array(elemCount).keys()].map((num) => ({
-        value: `${slug}_${num}`,
-        child: `${slug} ${num}`,
-    }));
-
-const StorySingle = (args: StorySelectProps) => {
-    const { usePortal, placement, label, readOnly, disabled, size = 'm', view, target } = args;
-
-    const [value, setValue] = useState<SelectPrimitiveValue | undefined>('item_0');
-
-    const onChangeValue = (newValue?: SelectPrimitiveValue) => {
-        setValue(newValue);
-        onChangeAction(newValue);
-    };
-
-    return (
-        <div style={{ width: '50%' }} id="portal-test">
-            <Select
-                frame="theme-root"
-                usePortal={usePortal}
-                valueType="single"
-                value={value}
-                placement={placement}
-                label={label}
-                size={size}
-                view={view}
-                target={target}
-                disabled={disabled}
-                readOnly={readOnly}
-                onChangeValue={onChangeValue}
-            >
-                <SelectItem value={undefined} text="Clear" />
-                {getSelectItems('item', 6).map((item) => (
-                    <SelectItem
-                        key={item.value}
-                        contentLeft={
-                            item.value === value ? <IconDone size={iconDoneToSelectSizeMap[size]} /> : undefined
-                        }
-                        value={item.value}
-                        text={item.child}
-                    />
-                ))}
-            </Select>
-        </div>
-    );
-};
-
-export const Single: StoryObj<StorySelectProps> = {
-    render: (args) => <StorySingle {...args} />,
-};
-
-const StoryMultiple = (args: StorySelectProps) => {
-    const { usePortal, placement, label, readOnly, disabled, enumerationType, size = 'm', view, target } = args;
-
-    const [value, setValue] = useState<Array<SelectPrimitiveValue> | undefined>(['item_2', 'item_3']);
-
-    const onChangeValue = (newValue?: Array<SelectPrimitiveValue>) => {
-        setValue(newValue);
-        onChangeAction(newValue);
-    };
-
-    return (
-        <div style={{ width: '50%' }}>
-            <Select
-                frame="theme-root"
-                usePortal={usePortal}
-                valueType="multiple"
-                value={value}
-                placement={placement}
-                label={label}
-                size={size}
-                view={view}
-                target={target}
-                enumerationType={enumerationType}
-                disabled={disabled}
-                readOnly={readOnly}
-                onChangeValue={onChangeValue}
-            >
-                {getSelectItems('item', 6).map((item) => (
-                    <SelectItem
-                        key={item.value}
-                        contentLeft={<Checkbox size={checkboxToSelectSizeMap[size]} />}
-                        value={item.value}
-                        text={item.child}
-                    />
-                ))}
-            </Select>
-        </div>
-    );
-};
-
-export const Multiple: StoryObj<StorySelectProps> = {
-    render: (args) => <StoryMultiple {...args} />,
-};
-
-const StoryNative = (args: StorySelectProps) => {
-    const { usePortal, placement, label, readOnly, disabled, size = 'm', view, target } = args;
-
-    const [value, setValue] = useState<SelectPrimitiveValue | undefined>('item_0');
-
-    const onChangeValue = (newValue?: SelectPrimitiveValue) => {
-        setValue(newValue);
-        onChangeAction(newValue);
-    };
-
-    return (
-        <div style={{ width: '50%' }}>
-            <Select
-                frame="theme-root"
-                usePortal={usePortal}
-                valueType="native"
-                value={value}
-                placement={placement}
-                label={label}
-                size={size}
-                view={view}
-                target={target}
-                disabled={disabled}
-                readOnly={readOnly}
-                onChangeValue={onChangeValue}
-            >
-                {getSelectItems('item', 6).map((item) => (
-                    <option key={item.value} value={item.value}>
-                        {item.child}
-                    </option>
-                ))}
-            </Select>
-        </div>
-    );
-};
-
-export const Native: StoryObj<StorySelectProps> = {
-    render: (args) => <StoryNative {...args} />,
-};
-
-const StoryControlledOpen = (args: StorySelectProps) => {
-    const { usePortal, placement, label, readOnly, disabled, size = 'm', view, target } = args;
-
-    const [opened, setOpened] = useState(true);
-    const [iconColor, setIconColor] = useState('green');
-    const [value, setV] = useState<string | number | boolean | undefined>('item_0');
-
-    const onChangeValue = (newValue?: SelectPrimitiveValue) => {
-        setV(newValue);
-        onChangeAction(newValue);
-    };
-    const onToggle = (openValue: boolean) => setOpened(openValue);
-    const onOpen = () => setOpened((v) => !v);
-    const onMouseEnter = () => setIconColor('red');
-    const onMouseLeave = () => setIconColor('green');
-
-    return (
-        <>
-            <Button onClick={onOpen}>Open select</Button>
-            <div style={{ width: '50%' }}>
-                <Select
-                    frame="theme-root"
-                    usePortal={usePortal}
-                    value={value}
-                    opened={opened}
-                    onToggle={onToggle}
-                    placement={placement}
-                    label={label}
-                    size={size}
-                    view={view}
-                    target={target}
-                    disabled={disabled}
-                    readOnly={readOnly}
-                    onChangeValue={onChangeValue}
-                >
-                    {getSelectItems('item', 6).map((item) => (
-                        <SelectItem
-                            key={item.value}
-                            contentLeft={
-                                item.value === value ? <IconDone size={iconDoneToSelectSizeMap[size]} /> : undefined
-                            }
-                            value={item.value}
-                            text={item.child}
-                        />
-                    ))}
-                    <SelectDivider />
-                    <SelectItem value="custom">
-                        <div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
-                            <IconClose color={iconColor} />
-                        </div>
-                        <div>Custom item element</div>
-                    </SelectItem>
-                </Select>
-            </div>
-        </>
-    );
-};
-
-export const ControlledOpen: StoryObj<StorySelectProps> = {
-    render: (args) => <StoryControlledOpen {...args} />,
-};

package/styled-components/es/examples/plasma_web/components/Sheet/Sheet.config.js

@@ -1,12 +0,0 @@
-import { css } from 'styled-components';
-import { sheetTokens } from '../../../../components/Sheet';
-export var config = {
-  defaults: {
-    view: 'default'
-  },
-  variations: {
-    view: {
-      "default": /*#__PURE__*/css(["", ":var(--overlay-soft);", ":var(--overlay-blur);", ":var(--surface-solid-card);", ":var(--surface-solid-tertiary);"], sheetTokens.sheetOverlayColor, sheetTokens.sheetOverlayWithBlurColor, sheetTokens.contentBackgroundColor, sheetTokens.handleColor)
-    }
-  }
-};

package/styled-components/es/examples/plasma_web/components/Sheet/Sheet.js

@@ -1,6 +0,0 @@
-import { sheetConfig } from '../../../../components/Sheet';
-import { component, mergeConfig } from '../../../../engines';
-import { config } from './Sheet.config';
-export { sheetClasses } from '../../../../components/Sheet';
-var mergedConfig = /*#__PURE__*/mergeConfig(sheetConfig, config);
-export var Sheet = /*#__PURE__*/component(mergedConfig);

package/styled-components/es/examples/plasma_web/components/Sheet/Sheet.stories.tsx

@@ -1,334 +0,0 @@
-import React, { useState } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import type { ComponentProps } from 'react';
-import { Body1 } from '@salutejs/plasma-core';
-import styled from 'styled-components';
-
-import { Button } from '../Button/Button';
-import { WithTheme } from '../../../_helpers';
-
-import { Sheet } from './Sheet';
-
-const meta: Meta<typeof Sheet> = {
-    title: 'plasma_web/Sheet',
-    decorators: [WithTheme],
-    parameters: { viewport: { defaultViewport: '860' } },
-};
-
-export default meta;
-
-type StorySheetProps = ComponentProps<typeof Sheet> & {
-    hasHeader: boolean;
-    hasFooter: boolean;
-};
-
-const StyledBody = styled(Body1)`
-    padding-bottom: 300px;
-`;
-
-const StoryDefault = ({
-    withOverlay,
-    withTransition,
-    hasFooter,
-    isFooterFixed,
-    hasHeader,
-    isHeaderFixed,
-    hasHandle,
-    withBlur,
-}: StorySheetProps) => {
-    const [isOpen, setIsOpen] = useState(false);
-
-    return (
-        <>
-            <Button onClick={() => setIsOpen(true)}>Открыть</Button>
-            <Sheet
-                isOpen={isOpen}
-                withOverlay={withOverlay}
-                withTransition={withTransition}
-                onClose={() => setIsOpen(false)}
-                hasHandle={hasHandle}
-                withBlur={withBlur}
-                contentHeader={
-                    hasHeader ? (
-                        <div>
-                            <h4>header</h4>
-                        </div>
-                    ) : undefined
-                }
-                isHeaderFixed={isHeaderFixed}
-                contentFooter={
-                    hasFooter ? (
-                        <div>
-                            <p>footer</p>
-                        </div>
-                    ) : undefined
-                }
-                isFooterFixed={isFooterFixed}
-            >
-                <StyledBody>body</StyledBody>
-            </Sheet>
-        </>
-    );
-};
-
-export const Default: StoryObj<StorySheetProps> = {
-    args: {
-        hasHeader: true,
-        hasFooter: true,
-    },
-    render: (args) => <StoryDefault {...args} />,
-};
-
-const StoryWithoutOverlay = () => {
-    const [isOpen, setIsOpen] = useState(false);
-
-    return (
-        <>
-            <Button onClick={() => setIsOpen(true)}>Открыть</Button>
-            <Sheet isOpen={isOpen} withOverlay={false} onClose={() => setIsOpen(false)}>
-                <StyledBody>
-                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
-                    consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel illum ea
-                    fugit molestiae dolorem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos nostrum
-                    placeat, neque repudiandae consectetur voluptates soluta et sint eum obcaecati nesciunt ullam,
-                    dolorem labore quaerat vero maxime ab ipsa nihil.
-                </StyledBody>
-            </Sheet>
-        </>
-    );
-};
-
-export const WithoutOverlay: StoryObj = {
-    render: () => <StoryWithoutOverlay />,
-};
-
-const StoryWithScroll = ({
-    withOverlay,
-    withTransition,
-    hasFooter,
-    isFooterFixed,
-    hasHeader,
-    isHeaderFixed,
-    hasHandle,
-    withBlur,
-}: StorySheetProps) => {
-    const [isOpen, setIsOpen] = useState(false);
-
-    return (
-        <>
-            <Button onClick={() => setIsOpen(true)}>Открыть</Button>
-            <Sheet
-                isOpen={isOpen}
-                withOverlay={withOverlay}
-                withTransition={withTransition}
-                onClose={() => setIsOpen(false)}
-                hasHandle={hasHandle}
-                withBlur={withBlur}
-                contentHeader={
-                    hasHeader ? (
-                        <div>
-                            <h4>header</h4>
-                        </div>
-                    ) : undefined
-                }
-                isHeaderFixed={isHeaderFixed}
-                contentFooter={
-                    hasFooter ? (
-                        <div>
-                            <p>footer</p>
-                        </div>
-                    ) : undefined
-                }
-                isFooterFixed={isFooterFixed}
-            >
-                <Body1>
-                    <Button onClick={() => setIsOpen(false)}>Закрыть</Button>
-                    <p>
-                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
-                        consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel
-                        illum ea fugit molestiae dolorem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos
-                        nostrum placeat, neque repudiandae consectetur voluptates soluta et sint eum obcaecati nesciunt
-                        ullam, dolorem labore quaerat vero maxime ab ipsa nihil.
-                    </p>
-                    <Button onClick={() => setIsOpen(false)}>Закрыть</Button>
-                    <p>
-                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
-                        consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel
-                        illum ea fugit molestiae dolorem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos
-                        nostrum placeat, neque repudiandae consectetur voluptates soluta et sint eum obcaecati nesciunt
-                        ullam, dolorem labore quaerat vero maxime ab ipsa nihil.
-                    </p>
-                </Body1>
-            </Sheet>
-        </>
-    );
-};
-
-export const WithScroll: StoryObj<StorySheetProps> = {
-    args: {
-        hasHeader: true,
-        hasFooter: true,
-    },
-    render: (args) => <StoryWithScroll {...args} />,
-};
-
-const StoryWithInsideScroll = ({
-    withOverlay,
-    withTransition,
-    hasFooter,
-    isFooterFixed,
-    hasHeader,
-    isHeaderFixed,
-    hasHandle,
-    withBlur,
-}: StorySheetProps) => {
-    const [isOpen, setIsOpen] = useState(false);
-
-    return (
-        <>
-            <Button onClick={() => setIsOpen(true)}>Открыть</Button>
-            <Sheet
-                isOpen={isOpen}
-                withOverlay={withOverlay}
-                withTransition={withTransition}
-                onClose={() => setIsOpen(false)}
-                hasHandle={hasHandle}
-                withBlur={withBlur}
-                contentHeader={
-                    hasHeader ? (
-                        <div>
-                            <h4>header</h4>
-                        </div>
-                    ) : undefined
-                }
-                isHeaderFixed={isHeaderFixed}
-                contentFooter={
-                    hasFooter ? (
-                        <div>
-                            <p>footer</p>
-                        </div>
-                    ) : undefined
-                }
-                isFooterFixed={isFooterFixed}
-            >
-                <p>Вложенные кнопки</p>
-                <div
-                    style={{
-                        height: '150px',
-                        overflow: 'scroll',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        gap: '1rem',
-                    }}
-                >
-                    <Button>Кнопка 1</Button>
-                    <Button>Кнопка 2</Button>
-                    <Button>Кнопка 3</Button>
-                    <Button>Кнопка 4</Button>
-                    <Button>Кнопка 5</Button>
-                    <Button>Кнопка 6</Button>
-                    <Button>Кнопка 7</Button>
-                    <Button>Кнопка 8</Button>
-                </div>
-                <Body1>Lorem ipsum dolor sit amet consectetur adipisicing elit.</Body1>
-            </Sheet>
-        </>
-    );
-};
-
-export const WithInsideScroll: StoryObj<StorySheetProps> = {
-    args: {
-        hasHeader: true,
-        hasFooter: true,
-    },
-    render: (args) => <StoryWithInsideScroll {...args} />,
-};
-
-const StoryWithDoubleScroll = ({
-    withOverlay,
-    withTransition,
-    hasFooter,
-    isFooterFixed,
-    hasHeader,
-    isHeaderFixed,
-    hasHandle,
-    withBlur,
-}: StorySheetProps) => {
-    const [isOpen, setIsOpen] = useState(false);
-
-    return (
-        <>
-            <Button onClick={() => setIsOpen(true)}>Открыть</Button>
-            <Sheet
-                isOpen={isOpen}
-                withOverlay={withOverlay}
-                withTransition={withTransition}
-                onClose={() => setIsOpen(false)}
-                hasHandle={hasHandle}
-                withBlur={withBlur}
-                contentHeader={
-                    hasHeader ? (
-                        <div>
-                            <h4>header</h4>
-                        </div>
-                    ) : undefined
-                }
-                isHeaderFixed={isHeaderFixed}
-                contentFooter={
-                    hasFooter ? (
-                        <div>
-                            <p>footer</p>
-                        </div>
-                    ) : undefined
-                }
-                isFooterFixed={isFooterFixed}
-            >
-                <Body1>
-                    <Button onClick={() => setIsOpen(false)}>Закрыть</Button>
-                    <p>Вложенные кнопки</p>
-                    <div
-                        style={{
-                            height: '150px',
-                            overflow: 'scroll',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            gap: '1rem',
-                        }}
-                    >
-                        <Button>Кнопка 1</Button>
-                        <Button>Кнопка 2</Button>
-                        <Button>Кнопка 3</Button>
-                        <Button>Кнопка 4</Button>
-                        <Button>Кнопка 5</Button>
-                        <Button>Кнопка 6</Button>
-                        <Button>Кнопка 7</Button>
-                        <Button>Кнопка 8</Button>
-                    </div>
-                    <p>
-                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
-                        consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel
-                        illum ea fugit molestiae dolorem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos
-                        nostrum placeat, neque repudiandae consectetur voluptates soluta et sint eum obcaecati nesciunt
-                        ullam, dolorem labore quaerat vero maxime ab ipsa nihil.
-                    </p>
-                    <Button onClick={() => setIsOpen(false)}>Закрыть</Button>
-                    <p>
-                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tempore vitae porro laboriosam
-                        consectetur fugiat assumenda, earum nesciunt. Distinctio minima nesciunt dicta rem quae vel
-                        illum ea fugit molestiae dolorem? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos
-                        nostrum placeat, neque repudiandae consectetur voluptates soluta et sint eum obcaecati nesciunt
-                        ullam, dolorem labore quaerat vero maxime ab ipsa nihil.
-                    </p>
-                </Body1>
-            </Sheet>
-        </>
-    );
-};
-
-export const WithDoubleScroll: StoryObj<StorySheetProps> = {
-    args: {
-        hasHeader: true,
-        hasFooter: true,
-    },
-    render: (args) => <StoryWithDoubleScroll {...args} />,
-};

package/types/components/Select/hooks/index.d.ts

@@ -1,2 +0,0 @@
-export { useKeyNavigation } from './useKeyNavigation';
-//# sourceMappingURL=index.d.ts.map

package/types/components/Select/hooks/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC"}

package/types/components/Select/hooks/useKeyNavigation.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useKeyNavigation.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/hooks/useKeyNavigation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAoC,MAAM,OAAO,CAAC;AAExE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAE7D,eAAO,MAAM,IAAI;;;;;;;;;;;;CAYhB,CAAC;AAEF,eAAO,MAAM,gBAAgB,+KAU1B,qBAAqB;sCAoBR,cAAc,iBAAiB,GAAG,gBAAgB,CAAC;sCAuFnD,cAAc,cAAc,CAAC;CAqH5C,CAAC"}

package/types/components/Select/ui/SelectChip/SelectChip.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import type { SelectChipProps } from './SelectChip.types';
-/**
- * Чип, отображающий выбранный элемент
- */
-export declare const SelectChip: React.ForwardRefExoticComponent<SelectChipProps & React.RefAttributes<HTMLButtonElement>>;
-//# sourceMappingURL=SelectChip.d.ts.map

package/types/components/Select/ui/SelectChip/SelectChip.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SelectChip.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/ui/SelectChip/SelectChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAGvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D;;GAEG;AACH,eAAO,MAAM,UAAU,2FA0BtB,CAAC"}

package/types/components/Select/ui/SelectChip/SelectChip.styles.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-export declare const StyledChip: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("../../../../engines/types").PropsType<import("../../../../engines/types").Variants> & import("../../../Chip").ChipProps & import("react").RefAttributes<HTMLButtonElement>>;
-//# sourceMappingURL=SelectChip.styles.d.ts.map

package/types/components/Select/ui/SelectChip/SelectChip.styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SelectChip.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/ui/SelectChip/SelectChip.styles.ts"],"names":[],"mappings":";AAYA,eAAO,MAAM,UAAU,6PAwCtB,CAAC"}