@salutejs/plasma-new-hope 0.143.0-canary.1430.10829478218.0 → 0.143.0-dev.0

package/styled-components/es/examples/plasma_b2c/components/Combobox/ComboboxOld/Combobox.stories.tsx

@@ -1,254 +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 { comboboxOldConfig } from '../../../../../components/Combobox';
-import { WithTheme, argTypesFromConfig } from '../../../../_helpers';
-import { IconDone } from '../../../../../components/_Icon';
-
-import { Combobox, ComboboxDivider, ComboboxItem } from './Combobox';
-import { config } from './Combobox.config';
-
-const placements: Array<string> = ['top', 'bottom', 'right', 'left', 'auto'];
-const enumerations: Array<string> = ['comma', 'chip'];
-
-type ComboboxPrimitiveValue = string | number | boolean;
-
-type StorySelectPropsCustom = {
-    skidding?: number;
-    distance?: number;
-};
-
-type StorySelectProps = ComponentProps<typeof Combobox> & StorySelectPropsCustom;
-
-const meta: Meta<StorySelectProps> = {
-    title: 'plasma_b2c/ComboboxOld',
-    decorators: [WithTheme],
-    component: Combobox,
-    argTypes: {
-        placement: {
-            options: placements,
-            control: {
-                type: 'select',
-            },
-        },
-        enumerationType: {
-            options: enumerations,
-            control: {
-                type: 'select',
-            },
-        },
-        ...argTypesFromConfig(mergeConfig(comboboxOldConfig, config)),
-    },
-    args: {
-        usePortal: false,
-        disabled: false,
-        readOnly: false,
-        label: 'Label',
-        placeholder: 'Placeholder',
-        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, placeholder, readOnly, disabled, size = 'm', view } = args;
-
-    const [value, setValue] = useState<ComboboxPrimitiveValue | undefined>('item_0');
-
-    const onChangeValue = (newValue?: ComboboxPrimitiveValue) => {
-        setValue(newValue);
-        onChangeAction(newValue);
-    };
-
-    return (
-        <div style={{ width: '50%' }}>
-            <Combobox
-                frame="theme-root"
-                usePortal={usePortal}
-                valueType="single"
-                value={value}
-                placement={placement}
-                label={label}
-                placeholder={placeholder}
-                size={size}
-                view={view}
-                disabled={disabled}
-                readOnly={readOnly}
-                onChangeValue={onChangeValue}
-            >
-                <ComboboxItem value={undefined} text="Clear" />
-                {getSelectItems('item', 6).map((item) => (
-                    <ComboboxItem
-                        key={item.value}
-                        contentLeft={
-                            item.value === value ? (
-                                <IconDone size={iconDoneToSelectSizeMap[size]} color="inherit" />
-                            ) : undefined
-                        }
-                        value={item.value}
-                        text={item.child}
-                    />
-                ))}
-            </Combobox>
-        </div>
-    );
-};
-
-export const Single: StoryObj<StorySelectProps> = {
-    render: (args) => <StorySingle {...args} />,
-};
-
-const StoryMultiple = (args: StorySelectProps) => {
-    const { usePortal, placement, label, placeholder, readOnly, disabled, enumerationType, size = 'm', view } = args;
-
-    const [value, setValue] = useState<Array<ComboboxPrimitiveValue> | undefined>(['item_2', 'item_3']);
-
-    const onChangeValue = (newValue?: Array<ComboboxPrimitiveValue>) => {
-        setValue(newValue);
-        onChangeAction(newValue);
-    };
-
-    return (
-        <div style={{ width: '50%' }}>
-            <Combobox
-                frame="theme-root"
-                usePortal={usePortal}
-                valueType="multiple"
-                enumerationType={enumerationType}
-                value={value}
-                placement={placement}
-                label={label}
-                placeholder={placeholder}
-                size={size}
-                view={view}
-                disabled={disabled}
-                readOnly={readOnly}
-                onChangeValue={onChangeValue}
-            >
-                <ComboboxItem value={undefined} text="Clear" />
-                {getSelectItems('item', 6).map((item) => (
-                    <ComboboxItem
-                        key={item.value}
-                        contentLeft={<Checkbox size={checkboxToSelectSizeMap[size]} />}
-                        value={item.value}
-                        text={item.child}
-                    />
-                ))}
-            </Combobox>
-        </div>
-    );
-};
-
-export const Multiple: StoryObj<StorySelectProps> = {
-    render: (args) => <StoryMultiple {...args} />,
-};
-
-const StoryAddCustomItem = (args: StorySelectProps) => {
-    const { usePortal, placement, label, placeholder, readOnly, disabled, size = 'm', view } = args;
-
-    const [opened, setOpened] = useState(false);
-    const [items, setItems] = useState(getSelectItems('item', 1));
-    const [value, setValue] = useState<ComboboxPrimitiveValue | undefined>('item_0');
-
-    const onChangeValue = (newValue?: ComboboxPrimitiveValue) => {
-        setValue(newValue);
-        onChangeAction(newValue);
-    };
-
-    const onToggle = (openValue: boolean) => setOpened(openValue);
-
-    const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-        const { code } = event;
-
-        if (code === 'Enter') {
-            const newValue = (event.target as HTMLInputElement).value;
-            const newItems = [...items];
-
-            if (newItems.find((item) => item.child === newValue)) {
-                return;
-            }
-
-            newItems.push({
-                value: `${newValue}_`,
-                child: (newValue || '').toString(),
-            });
-
-            setOpened(false);
-            setItems(newItems);
-        }
-    };
-
-    const filterFunction = () => true;
-
-    return (
-        <div style={{ width: '50%' }}>
-            <Combobox
-                frame="theme-root"
-                usePortal={usePortal}
-                valueType="single"
-                value={value}
-                placement={placement}
-                label={label}
-                placeholder={placeholder}
-                size={size}
-                view={view}
-                disabled={disabled}
-                readOnly={readOnly}
-                opened={opened}
-                onToggle={onToggle}
-                onChangeValue={onChangeValue}
-                onKeyDown={onKeyDown}
-                filterFunction={filterFunction}
-            >
-                <ComboboxItem value={undefined} text="Clear" />
-                <ComboboxDivider />
-                {items.map((item) => (
-                    <ComboboxItem
-                        key={item.value}
-                        contentLeft={
-                            item.value === value ? (
-                                <IconDone size={iconDoneToSelectSizeMap[size]} color="inherit" />
-                            ) : undefined
-                        }
-                        value={item.value}
-                        text={item.child}
-                    />
-                ))}
-            </Combobox>
-        </div>
-    );
-};
-
-export const AddCustomItem: StoryObj<StorySelectProps> = {
-    render: (args) => <StoryAddCustomItem {...args} />,
-};

package/styled-components/es/examples/plasma_b2c/components/Editable/Editable.config.js

@@ -1,16 +0,0 @@
-import { css } from 'styled-components';
-import { editableTokens } from '../../../../components/Editable';
-export var config = {
-  defaults: {
-    view: 'default',
-    size: 'm'
-  },
-  variations: {
-    view: {
-      "default": /*#__PURE__*/css(["", ":var(--background-primary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-accent);"], editableTokens.editButtonBackground, editableTokens.editButtonColor, editableTokens.editButtonColorHover, editableTokens.placeholderColor, editableTokens.caretColor)
-    },
-    size: {
-      m: /*#__PURE__*/css(["", ":1rem;", ":1rem;", ":-1rem;"], editableTokens.editButtonPaddingLeft, editableTokens.textBoxPaddingRight, editableTokens.textBoxMarginRight)
-    }
-  }
-};

package/styled-components/es/examples/plasma_b2c/components/Editable/Editable.js

@@ -1,16 +0,0 @@
-import { editableConfig } from '../../../../components/Editable';
-import { component, mergeConfig } from '../../../../engines';
-import { Body } from '../../../typograpy/components/Body/Body';
-import { Dspl } from '../../../typograpy/components/Dspl/Dspl';
-import { Heading } from '../../../typograpy/components/Heading/Heading';
-import { Text } from '../../../typograpy/components/Text/Text';
-import { config } from './Editable.config';
-export var typographyVariants = {
-  Body: Body,
-  Dspl: Dspl,
-  Heading: Heading,
-  Text: Text
-};
-var finalConfig = /*#__PURE__*/editableConfig(typographyVariants);
-var mergedConfig = /*#__PURE__*/mergeConfig(finalConfig, config);
-export var Editable = /*#__PURE__*/component(mergedConfig);

package/styled-components/es/examples/plasma_b2c/components/Editable/Editable.stories.tsx

@@ -1,81 +0,0 @@
-import React, { useState } from 'react';
-import type { ComponentProps } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { disableProps } from '@salutejs/plasma-sb-utils';
-
-import { IconDisclosureLeft } from '../../../../components/_Icon';
-import { WithTheme } from '../../../_helpers';
-
-import { Editable, typographyVariants } from './Editable';
-
-const iconSizes = ['s', 'xs'] as const;
-
-const meta: Meta<typeof Editable> = {
-    title: 'plasma_b2c/Editable',
-    decorators: [WithTheme],
-    component: Editable,
-    argTypes: {
-        ...disableProps([
-            'ref',
-            'theme',
-            'as',
-            'forwardedAs',
-            'textComponent',
-            'icon',
-            'onChange',
-            'onBlur',
-            'onPaste',
-            'value',
-            'view',
-            'size',
-        ]),
-    },
-};
-
-export default meta;
-
-type StoryPropsDefault = ComponentProps<typeof Editable> & {
-    iconSize: typeof iconSizes[number];
-    componentName: keyof typeof typographyVariants;
-    defaultValue: string;
-};
-
-const StoryDefault = ({ defaultValue, componentName, iconSize, ...rest }: StoryPropsDefault) => {
-    const [, setValue] = useState<string>(defaultValue);
-
-    const handleChange = (e) => {
-        setValue(e.target.textContent);
-    };
-
-    return (
-        <Editable
-            {...rest}
-            icon={<IconDisclosureLeft size={iconSize} color="inherit" />}
-            textComponent={typographyVariants[componentName]}
-            value={defaultValue}
-            onChange={handleChange}
-        />
-    );
-};
-
-export const Default: StoryObj<StoryPropsDefault> = {
-    argTypes: {
-        iconSize: {
-            options: iconSizes,
-            control: { type: 'select' },
-        },
-        componentName: {
-            options: Object.keys(typographyVariants),
-            control: { type: 'select' },
-        },
-    },
-    args: {
-        view: 'default',
-        size: 'm',
-        iconSize: 'xs',
-        componentName: 'Body',
-        defaultValue: 'Document 1',
-        placeholder: 'Компонент с возможностью редактирования текста',
-    },
-    render: (args) => <StoryDefault {...args} />,
-};