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

package/styled-components/cjs/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/cjs/examples/plasma_web/components/Sheet/Sheet.config.js

@@ -1,18 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.config = void 0;
-var _styledComponents = /*#__PURE__*/require("styled-components");
-var _Sheet = /*#__PURE__*/require("../../../../components/Sheet");
-var config = exports.config = {
-  defaults: {
-    view: 'default'
-  },
-  variations: {
-    view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--overlay-soft);", ":var(--overlay-blur);", ":var(--surface-solid-card);", ":var(--surface-solid-tertiary);"], _Sheet.sheetTokens.sheetOverlayColor, _Sheet.sheetTokens.sheetOverlayWithBlurColor, _Sheet.sheetTokens.contentBackgroundColor, _Sheet.sheetTokens.handleColor)
-    }
-  }
-};

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

@@ -1,17 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Sheet = void 0;
-Object.defineProperty(exports, "sheetClasses", {
-  enumerable: true,
-  get: function get() {
-    return _Sheet.sheetClasses;
-  }
-});
-var _Sheet = /*#__PURE__*/require("../../../../components/Sheet");
-var _engines = /*#__PURE__*/require("../../../../engines");
-var _Sheet2 = /*#__PURE__*/require("./Sheet.config");
-var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Sheet.sheetConfig, _Sheet2.config);
-var Sheet = exports.Sheet = /*#__PURE__*/(0, _engines.component)(mergedConfig);

package/styled-components/cjs/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} />,
-};