### Development Setup

Source: https://github.com/alfa-laboratory/core-components/blob/master/README.md

Commands to clone the repository, install dependencies, and start the development server.

```bash
$ git clone git@github.com:alfa-laboratory/core-components.git
$ cd core-components
$ yarn install
$ yarn start
```

--------------------------------

### Install Specific Component

Source: https://github.com/alfa-laboratory/core-components/blob/master/README.md

Install individual components to reduce project size. This example shows installing the button component.

```bash
yarn add @alfalab/core-components-button
```

--------------------------------

### Install All Core Components

Source: https://github.com/alfa-laboratory/core-components/blob/master/README.md

Use this command to install the entire core-components library.

```bash
yarn add @alfalab/core-components
```

--------------------------------

### TabsMobile Example

Source: https://github.com/alfa-laboratory/core-components/blob/master/packages/tabs/src/docs/description.mdx

Demonstrates the basic usage of the TabsMobile component with multiple tabs. Use this for mobile interfaces.

```tsx
render(() => {
    const [selectedId, setSelectedId] = React.useState('tab-1');

    const handleChange = (event, { selectedId }) => setSelectedId(selectedId);

    return (
        <TabsMobile selectedId={selectedId} onChange={handleChange}>
            <Tab title='Таб 1' id='tab-1'>
                Таб 1
            </Tab>
            <Tab title='Таб 2' id='tab-2'>
                Таб 2
            </Tab>
            <Tab title='Таб 3' id='tab-3'>
                Таб 3
            </Tab>
            <Tab title='Таб 4' id='tab-4'>
                Таб 4
            </Tab>
            <Tab title='Таб 5' id='tab-5'>
                Таб 5
            </Tab>
        </TabsMobile>
    );
});
```

--------------------------------

### TabsDesktop Example

Source: https://github.com/alfa-laboratory/core-components/blob/master/packages/tabs/src/docs/description.mdx

Demonstrates the basic usage of the TabsDesktop component with multiple tabs. Use this for standard desktop interfaces.

```tsx
render(() => {
    const [selectedId, setSelectedId] = React.useState('tab-1');

    const handleChange = (event, { selectedId }) => setSelectedId(selectedId);

    return (
        <TabsDesktop selectedId={selectedId} onChange={handleChange}>
            <Tab title='Таб 1' id='tab-1'>
                Таб 1
            </Tab>
            <Tab title='Таб 2' id='tab-2'>
                Таб 2
            </Tab>
            <Tab title='Таб 3' id='tab-3'>
                Таб 3
            </Tab>
            <Tab title='Таб 4' id='tab-4'>
                Таб 4
            </Tab>
            <Tab title='Таб 5' id='tab-5'>
                Таб 5
            </Tab>
        </TabsDesktop>
    );
});
```

--------------------------------

### Line Chart Example

Source: https://github.com/alfa-laboratory/core-components/blob/master/packages/chart/src/docs/description.mdx

Example of a line chart configuration. It includes options for hiding the chart, legend, or tooltip, setting zIndex, chart type, icon, and various properties for the line and its dots.

```javascript
{
    /*
    * Скрыть график
    */
    hide?: false,

    /*
    * Скрыть график в легенде
    */
    hideLegend?: false,

    /*
    * Скрыть график в тултипe
    */
    hideTooltip?: false,

    /*
    * Z-index графика
    */
    zIndex,

    /*
    * Тип графика
    */
    chart: 'line',

    /*
    * Тип иконки для графика
    */
    icon,

    /*
    * Параметры графика
    */
    properties: {

        /*
         * Название графика (отображается в легендах и тултипе)
         */
        name,

        /*
         * Ключ данных
         */
        dataKey,

        /*
         * Цвет линии графика
         */
        stroke?: '#3182bd',

        /*
         * Отображение точек на графике
         */
        dot?,

        /*
         * Параметры для точек грфика (если dot: true)
         */
        dotSettings: [{

            /*
             * Значение media query
             */
            media,

            /*
             * Значение маштаба при ховере
             */
            scale,

            /*
             * Начальный значения маштаба
             */
            initScale,

            /*
             * Ширина точки
             */
            width,

            /*
             * Высота точки
             */
            height,
        }],

        /*
         * Наследование цвета
         */
        inheritStroke?: false,

        /*
         * Форматирование значения графика для тултипа
         */
        formatter?,

        /*
         * Тип линии
         */
        type? 'linear',

        /*
         * Толщина линии
         */
        strokeWidth?: 1,

        /*
         * Прерывистость линии
         */
        strokeDasharray?,
    },

    /*
     *  Массив данных для отрисовки
     */
    data: [

        /**
         * Метка
         */
        label,

        /**
         * Значение
         */
        value,
    ],
}
```

--------------------------------

### TabsResponsive Example

Source: https://github.com/alfa-laboratory/core-components/blob/master/packages/tabs/src/docs/description.mdx

Demonstrates the TabsResponsive component, which adapts its layout at 768px. Use this for interfaces that need to work across different screen sizes.

```tsx
render(() => {
    const [selectedId, setSelectedId] = React.useState('tab-1');

    const handleChange = (event, { selectedId }) => setSelectedId(selectedId);

    return (
        <TabsResponsive selectedId={selectedId} onChange={handleChange}>
            <Tab title='Таб 1' id='tab-1'>
                Таб 1
            </Tab>
            <Tab title='Таб 2' id='tab-2'>
                Таб 2
            </Tab>
            <Tab title='Таб 3' id='tab-3'>
                Таб 3
            </Tab>
            <Tab title='Таб 4' id='tab-4'>
                Таб 4
            </Tab>
            <Tab title='Таб 5' id='tab-5'>
                Таб 5
            </Tab>
        </TabsResponsive>
    );
});
```

--------------------------------

### Confirmation Component Live Example

Source: https://github.com/alfa-laboratory/core-components/blob/master/packages/confirmation/src/docs/description.mdx

Demonstrates the Confirmation component with different states and scenarios, including success, error, fatal error, attempts left, and temporary blocking. Use this to visualize the component's behavior in various conditions.

```tsx
render(() => {
    const variants = [
        { key: 'success', content: 'Успешный сценарий' },
        { key: 'error', content: 'Сценарий с ошибкой' },
        { key: 'fatal', content: 'Сценарий с критичной ошибкой' },
        {
            key: 'attempts-left',
            content: 'Сценарий, когда кончились попытки запроса смс',
        },
        {
            key: 'temp-block',
            content: 'Сценарий, когда форма временно заблокирована',
        },
    ];

    const [variant, setVariant] = React.useState({ key: 'success', content: 'Успешный сценарий' });

    const {
        confirmationState,
        confirmationScreen,
        confirmationBlockSmsRetry,
        setConfirmationState,
        setConfirmationScreen,
        setConfirmationBlockSmsRetry,
    } = useConfirmation();

    const handleInputFinished = () => {
        setTimeout(() => {
            switch (variant.key) {
                case 'success':
                    setConfirmationState('INITIAL');
                    break;
                case 'error':
                    setConfirmationState('CODE_ERROR');
                    break;
                case 'fatal':
                    setConfirmationScreen('FATAL_ERROR');
                    break;
                case 'attempts-left':
                    setConfirmationState('CODE_ERROR');
                    break;
                case 'temp-block':
                    setConfirmationScreen('TEMP_BLOCK');
                    break;
                default:
                    break;
            }
        }, 1000);
    };

    const handleSmsRetryClick = () => {
        setTimeout(() => {
            if (variant.key === 'attempts-left') {
                setConfirmationBlockSmsRetry(true);
            }
            setConfirmationState('INITIAL');
        }, 1000);
    };

    const handleTempBlockFinished = () => {
        setConfirmationScreen('INITIAL');
        setConfirmationState('CODE_SENDING');
    };

    return (
        <div>
            <Select
                options={variants}
                onChange={({ selected }) => {
                    setConfirmationState('INITIAL');
                    setConfirmationScreen('INITIAL');
                    setConfirmationBlockSmsRetry(false);
                    setVariant(selected);
                }}
                selected={variant.key}
            />
            <div
                key={variant.key}
                style={{ 
                    display: 'flex',
                    width: '500px',
                    margin: '16px 0 0',
                    padding: '16px',
                    boxShadow: '0 0 0 1px #eeeff1',
                    boxSizing: 'border-box',
                }}
            >
                <Confirmation
                    screen={confirmationScreen}
                    state={confirmationState}
                    alignContent='center'
                    blockSmsRetry={confirmationBlockSmsRetry}
                    countdownDuration={10000}
                    onChangeState={setConfirmationState}
                    onChangeScreen={setConfirmationScreen}
                    onInputFinished={handleInputFinished}
                    onSmsRetryClick={handleSmsRetryClick}
                    onTempBlockFinished={handleTempBlockFinished}
                    phone='+7 ··· ··· 07-24'
                />
            </div>
        </div>
    );
});
```

--------------------------------

### IntlPhoneInput with Autocomplete Functionality

Source: https://github.com/alfa-laboratory/core-components/blob/master/packages/intl-phone-input/src/docs/description.mdx

Shows how to implement autocomplete suggestions for phone numbers using the `options` and `matchOption` props. This example requires `libphonenumber-js` to be properly bundled.

```tsx
render(() => {
    const options = [
        { key: '+7 921 681 53 98' },
        { key: '+7 921 681 52 97' },
        { key: '+7 921 681 52 96' },
        { key: '+7 921 681 52 95' },
        { key: '+7 921 681 52 94' },
    ];

    const matchOption = (option, inputValue) =>
        option.key.toLowerCase().includes((inputValue || '').toLowerCase());

    const [value, setValue] = React.useState('+7');
    const [selectedCountry, setSelectedCountry] = React.useState('RU');

    const handleChange = React.useCallback(
        newValue => {
            setValue(newValue);
        },
        [setValue],
    );

    const handleCountryChange = React.useCallback(countryCode => {
        setSelectedCountry(countryCode);
    });

    const handleClear = React.useCallback(() => setValue(''));

    const filteredOptions = options.filter(option => matchOption(option, value));

    return (
        <div style={{ width: '320px' }}>
            <IntlPhoneInput
                value={value}
                onChange={handleChange}
                options={filteredOptions}
                block={true}
                label='Номер телефона'
                defaultCountryIso2='RU'
                readOnly={boolean('readOnly', false)}
                onCountryChange={handleCountryChange}
            />
            <br />
            Код выбранной страны: <strong>{selectedCountry}</strong>
        </div>
    );
});
```

--------------------------------

### Import Button Component

Source: https://github.com/alfa-laboratory/core-components/blob/master/README.md

Example of how to import the Button component into your React application.

```jsx
import { Button } from '@alfalab/core-components/button';
```

--------------------------------

### Basic Link Example

Source: https://github.com/alfa-laboratory/core-components/blob/master/packages/link/src/docs/description.mdx

Demonstrates a basic link to an external resource, typically used for navigation. Ensure the 'href' attribute is correctly set for the target URL.

```tsx
<Typography.Text view='primary-medium'>
    <Link
        view='default'
        rel='noopener'
        target='_blank'
        href='https://alfabank.ru/get-money/credit-cards/100-days/'
    >
        Заказать карту
    </Link>
</Typography.Text>
```

--------------------------------

### Basic Bottom Sheet Example

Source: https://github.com/alfa-laboratory/core-components/blob/master/packages/bottom-sheet/src/docs/description.mdx

Demonstrates a standard Bottom Sheet with a title, action button, and content. Use this for typical modal-like interactions.

```tsx
render(() => {
    const [open, setOpen] = React.useState(false);

    return (
        <>
            <Button view='primary' onClick={() => setOpen(true)}>Пример</Button>

            <BottomSheet
                open={open}
                title='Заголовок'
                actionButton={
                    <Button view='primary' block={true} size='s' onClick={() => setOpen(false)}>
                        Понятно
                    </Button>
                }
                onClose={() => setOpen(false)}
            >
                <div style={{ lineHeight: '24px' }}>
                    Сейчас много говорят об отказах банков в проведении операций, блокировках интернет-банка. Это связано с тем, что Центральный банк РФ обязывает банки выявлять операции своих клиентов, потенциально нарушающие требования Федерального закона «О противодействии легализации (отмыванию) доходов, полученных преступным путем, и финансированию терроризма» — 115-ФЗ
                    Сейчас много говорят об отказах банков в проведении операций, блокировках интернет-банка. Это связано с тем, что Центральный банк РФ обязывает банки выявлять операции своих клиентов, потенциально нарушающие требования Федерального закона «О противодействии легализации (отмыванию) доходов, полученных преступным путем, и финансированию терроризма» — 115-ФЗ
                    Сейчас много говорят об отказах банков в проведении операций, блокировках интернет-банка. Это связано с тем, что Центральный банк РФ обязывает банки выявлять операции своих клиентов, потенциально нарушающие требования Федерального закона «О противодействии легализации (отмыванию) доходов, полученных преступным путем, и финансированию терроризма» — 115-ФЗ
                    Сейчас много говорят об отказах банков в проведении операций, блокировках интернет-банка. Это связано с тем, что Центральный банк РФ обязывает банки выявлять операции своих клиентов, потенциально нарушающие требования Федерального закона «О противодействии легализации (отмыванию) доходов, полученных преступным путем, и финансированию терроризма» — 115-ФЗ
                </div>
            </BottomSheet>
        </>
    );
});
```

--------------------------------

### Pseudo-Link Examples

Source: https://github.com/alfa-laboratory/core-components/blob/master/packages/link/src/docs/description.mdx

Illustrates how to use the 'pseudo' prop to make a link trigger an informational layer (collapse, dropdown, popup) instead of navigating. This is useful for interactive elements within the current view.

```tsx
<Space>
    <Link view='primary' pseudo={true}>
        Primary
    </Link>
    <Link view='secondary' pseudo={true}>
        Secondary
    </Link>
    <Link view='default' pseudo={true}>
        Default
    </Link>
</Space>
```

--------------------------------

### Toast Component Example

Source: https://github.com/alfa-laboratory/core-components/blob/master/packages/toast/src/docs/component.stories.mdx

Demonstrates the usage of the Toast component with various configurable options. It includes two instances: one for a copy action and another for a delete action with a restore button. Use this snippet to understand how to control toast visibility, position, content, and actions.

```tsx
import { Meta, Story, Props } from '@storybook/addon-docs';
import { text, select, boolean, number } from '@storybook/addon-knobs';
import { Button } from '@alfalab/core-components-button';
import { CssVars, ComponentHeader, Tabs } from 'storybook/blocks';

import { Toast } from '../';
import { name, version } from '../../package.json';
import Description from './description.mdx';
import Changelog from '../../CHANGELOG.md';
import styles from '!!raw-loader!../index.module.css';


<Meta
    title='Компоненты/Toast'
    component={Toast}
/>

<!-- Canvas -->

export function ToastExample() {
    const POSITION_OPTIONS = [
        'top',
        'top-start',
        'top-end',
        'bottom',
        'bottom-start',
        'bottom-end',
        'right',
        'right-start',
        'right-end',
        'left',
        'left-start',
        'left-end',
    ];
    const [anchorToastOpen, setAnchorToastOpen] = React.useState(false);
    const [fixedToastOpen, setFixedToastOpen] = React.useState(false);
    const [buttonElement, setButtonElement] = React.useState(null);
    const handleButtonRef = node => {
        setButtonElement(node);
    };
    const containerRef = React.useRef();
    return (
        <div
            style={{
                width: '100vw',
                height: '100vh',
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                boxSizing: 'border-box',
            }}
        >
            <div
                ref={containerRef}
                style={{
                    position: 'relative',
                    padding: '100px',
                    border: '1px dashed black',
                }}
            >
                <Toast
                    open={anchorToastOpen}
                    position={select('position', POSITION_OPTIONS, 'left')}
                    offset={[number('offset[0]', 0), number('offset[1]', 8)]}
                    badge={select(
                        'badge',
                        ['negative', 'positive', 'attention', undefined],
                        'positive',
                    )}
                    title={text('title', 'Скопировано')}
                    hasCloser={boolean('hasCloser', true)}
                    block={boolean('block', false)}
                    onClose={() => {
                        setAnchorToastOpen(false);
                    }}
                    autoCloseDelay={number('autoCloseDelay', 3000)}
                />
                <Toast
                    open={fixedToastOpen}
                    badge={select(
                        'badge',
                        ['negative', 'positive', 'attention', undefined],
                        'positive',
                    )}
                    title='Ваша карта удалена'
                    hasCloser={boolean('hasCloser', true)}
                    onClose={() => {
                        setFixedToastOpen(false);
                    }}
                    autoCloseDelay={number('autoCloseDelay', 3000)}
                    actionButton={
                        <Button
                            size='s'
                            view='ghost'
                            onClick={() => {
                                setFixedToastOpen(false);
                            }}
                        >
                            Восстановить
                        </Button>
                    }
                    position='bottom-start'
                    offset={[0, 16]}
                    block={true}
                />
                <Button
                    ref={handleButtonRef}
                    onClick={() => {
                        setAnchorToastOpen(true);
                    }}
                >
                    Скопировать
                </Button>
                <Button
                    onClick={() => {
                        setFixedToastOpen(true);
                    }}
                    style={{ marginLeft: '20px' }}
                >
                    Удалить
                </Button>
            </div>
        </div>
    );
}

<Story name='Toast'>
    <ToastExample />
</Story>


<!-- Docs -->

<ComponentHeader
    name='Toast'
    version={version}
    package={name}
    stage={2}
/>

```tsx
import { Toast } from '@alfalab/core-components/toast';
```

<Tabs
    description={<Description />}
    changelog={<Changelog />}
    props={<Props of={Toast} />}
    cssVars={<CssVars css={styles} />}
/>
```

--------------------------------

### Table with Pagination Example

Source: https://github.com/alfa-laboratory/core-components/blob/master/packages/table/src/docs/description.mdx

Demonstrates how to integrate the Table.Pagination component to manage data display across multiple pages. It includes state management for current page and items per page, and calculates the total number of pages.

```tsx
const data = [
    {
        id: 28,
        date: '30.06.2022',
        title: 'ООО "КОРПУС-ИТ"',
        sum: 21000000,
    },
    {
        id: 12,
        date: '30.06.2022',
        title: 'ОБЩЕСТВО С ОГРАНИЧЕННОЙ ОТВЕТСТВЕННОСТЬЮ "МОБИЛСТИЛ"',
        subtitle:
            'Оказание услуг по договору № 26/09 на основании акта № 1450 от 30 июня 2020 года, в т.ч. НДС 18%',
        sum: 10002030,
    },
    {
        id: 5,
        date: '30.06.2022',
        title: 'ИП Жуков Валерий Сергеевич',
        subtitle: 'Услуги по ремонту за июнь, НДС не облагается',
        sum: 3000069,
    },
    {
        id: 4,
        date: '30.06.2022',
        title: 'ООО "Берест"',
        sum: 84300,
    },
    {
        id: 1,
        date: '30.06.2022',
        title:
            'УФК по Свердловской области (Государственное учреждение - Свердловское региональное отделение Фонда социального страхования Российской Федерации)',
        sum: 15900,
    },
    {
        id: 27,
        date: '21.10.2021',
        title: 'MasterBrok',
        sum: 106000,
    },
    {
        id: 26,
        date: '20.10.2021',
        title: 'MR ANTON TAGUNOV',
        sum: 189800,
    },
];

Array(100)
    .fill('')
    .forEach((_, i) =>
        data.push({
            id: (i + 1) * 100,
            date: '20.10.2021',
            title: `Контрагент #${i + 1}`,
            sum: 1000000 + (i + 1) * 10000,
        }),
    );

render(() => {
    const [perPage, setPerPage] = React.useState(5);
    const [page, setPage] = React.useState(0);

    const handlePerPageChange = value => {
        setPage(0);
        setPerPage(value);
    };

    const handlePageChange = pageIndex => setPage(pageIndex);

    const pagesCount = Math.ceil(data.length / perPage);

    const currentPageData = React.useMemo(() => {
        return data.slice(page * perPage).slice(0, perPage);
    }, [data, page, perPage]);

    return (
        <div style={{ margin: '24px 0 40px' }}>
            <Table
                pagination={
                    <Table.Pagination
                        perPage={perPage}
                        currentPageIndex={page}
                        pagesCount={pagesCount}
                        onPageChange={handlePageChange}
                        onPerPageChange={handlePerPageChange}
                    />
                }
            >
                <Table.THead>
                    <Table.THeadCell title='Дата' width='120px'>
                        Дата
                    </Table.THeadCell>

                    <Table.THeadCell title='Контрагент'>Контрагент</Table.THeadCell>

                    <Table.THeadCell title='Сумма' textAlign='right' width={268}>
                        Сумма
                    </Table.THeadCell>
                </Table.THead>
                <Table.TBody>
                    {currentPageData.map(row => (
                        <Table.TRow key={row.id}>
                            <Table.TCell>
                                <Typography.Text view='primary-small' tag='div'>
                                    {row.date}
                                </Typography.Text>
                            </Table.TCell>

                            <Table.TCell>
                                <Typography.Text view='primary-small' tag='div'>
                                    {row.title}
                                </Typography.Text>
                            </Table.TCell>

                            <Table.TCell>
                                <Amount
                                    value={row.sum}
                                    currency='RUR'
                                    minority={100}
                                    view='withZeroMinorPart'
                                />
                            </Table.TCell>
                        </Table.TRow>
                    ))}
                </Table.TBody>
            </Table>
        </div>
    );
});
```

--------------------------------

### Area Chart Example

Source: https://github.com/alfa-laboratory/core-components/blob/master/packages/chart/src/docs/description.mdx

Configuration for an area chart. This includes basic chart properties, offset for gradient, and detailed gradient point settings with color and opacity.

```javascript
{
    /*
     * Скрыть график
     */
    hide?: false,

    /*
     * Скрыть график в легенде
     */
    hideLegend?: false,

    /*
     * Скрыть график в тултипe
     */
    hideTooltip?: false,

    /*
     * Z-index графика
     */
    zIndex,

    /*
     * Тип графика
     */
    chart: 'ara',

    /*
     * Тип иконки для графика
     */
    icon,

    /*
     * Оффсет для градиента (только для типа area)
     */
    offset,

    /**
     * Параметры градиента
     */
    gradient: {

        /**
         * Индефикатор градиента
         */
        gid,

        /**
         * Параметра точек для градиента
         */
        points: [

            /**
             * Отступ
             */
            offset: number,

            /**
             * Цвет
             */
            stopColor: string,

            /**
             * Прозрачность
             */
            stopOpacity: number,
        ]
    }
}
```

--------------------------------

### Scrollable TabsDesktop Example

Source: https://github.com/alfa-laboratory/core-components/blob/master/packages/tabs/src/docs/description.mdx

Demonstrates the `scrollable` prop for the TabsDesktop component, enabling horizontal scrolling for tabs with long titles. Use this when you have many tabs or very long tab titles.

```tsx
render(() => {
    const [selectedId, setSelectedId] = React.useState('tab-1');

    const handleChange = (event, { selectedId }) => setSelectedId(selectedId);

    return (
        <TabsDesktop selectedId={selectedId} onChange={handleChange} scrollable={true}>
            <Tab title='Первый таб с длинным заголовком' id='tab-1'>
                Таб 1
            </Tab>
            <Tab title='Второй таб с длинным заголовком' id='tab-2'>
                Таб 2
            </Tab>
            <Tab title='Третий таб с длинным заголовком' id='tab-3'>
                Таб 3
            </Tab>
            <Tab title='Четвёртый таб с длинным заголовком' id='tab-4'>
                Таб 4
            </Tab>
            <Tab title='Пятый таб с длинным заголовком' id='tab-5'>
                Таб 5
            </Tab>
            <Tab title='Шестой таб с длинным заголовком' id='tab-6'>
                Таб 6
            </Tab>
            <Tab title='Седьмой таб с длинным заголовком' id='tab-7'>
                Таб 7
            </Tab>
            <Tab title='Восьмой таб с длинным заголовком' id='tab-8'>
                Таб 8
            </Tab>
            <Tab title='Девятый таб с длинным заголовком' id='tab-9'>
                Таб 9
            </Tab>
            <Tab title='Десятый таб с длинным заголовком' id='tab-10'>
                Таб 10
            </Tab>
        </TabsDesktop>
    );
});
```

--------------------------------

### Bottom Sheet Without Header Example

Source: https://github.com/alfa-laboratory/core-components/blob/master/packages/bottom-sheet/src/docs/description.mdx

Shows a Bottom Sheet with its header hidden using the `hideHeader` prop. Useful when only content is needed without a title or close button in the header.

```tsx
render(() => {
    const [open, setOpen] = React.useState(false);

    return (
        <>
            <Button view='primary' onClick={() => setOpen(true)}>Пример</Button>

            <BottomSheet
                open={open}
                title='Заголовок'
                onClose={() => setOpen(false)}
                hideHeader
            >
                <div style={{ lineHeight: '24px' }}>
                    Сейчас много говорят об отказах банков в проведении операций, блокировках интернет-банка. Это связано с тем, что Центральный банк РФ обязывает банки выявлять операции своих клиентов, потенциально нарушающие требования Федерального закона «О противодействии легализации (отмыванию) доходов, полученных преступным путем, и финансированию терроризма» — 115-ФЗ
                    Сейчас много говорят об отказах банков в проведении операций, блокировках интернет-банка. Это связано с тем, что Центральный банк РФ обязывает банки выявлять операции своих клиентов, потенциально нарушающие требования Федерального закона «О противодействии легализации (отмыванию) доходов, полученных преступным путем, и финансированию терроризма» — 115-ФЗ
                    Сейчас много говорят об отказах банков в проведении операций, блокировках интернет-банка. Это связано с тем, что Центральный банк РФ обязывает банки выявлять операции своих клиентов, потенциально нарушающие требования Федерального закона «О противодействии легализации (отмыванию) доходов, полученных преступным путем, и финансированию терроризма» — 115-ФЗ
                    Сейчас много говорят об отказах банков в проведении операций, блокировках интернет-банка. Это связано с тем, что Центральный банк РФ обязывает банки выявлять операции своих клиентов, потенциально нарушающие требования Федерального закона «О противодействии легализации (отмыванию) доходов, полученных преступным путем, и финансированию терроризма» — 115-ФЗ
                </div>
            </BottomSheet>
        </>
    );
});
```

--------------------------------

### Build Components for Beta Release

Source: https://github.com/alfa-laboratory/core-components/blob/master/README.md

Steps to build the components and prepare for a beta release. This involves building the project and versioning the package.

```bash
$ yarn build
$ cd dist
$ npm version 2.0.0-beta.0 // подставить нужную версию
npm publish --tag beta
```

--------------------------------

### Pre-configured List for Webview

Source: https://github.com/alfa-laboratory/core-components/blob/master/packages/list/src/docs/description.mdx

Shows how to create a pre-configured List component for Webview integration by extending the base List component. This approach helps in avoiding duplication and simplifying usage.

```tsx
// import { Space } from '@alfalab/core-components/space';
// import { Typography, typographyPresets } from '@alfalab/core-components/typography';
// import { listPres } from '@alfalab/core-components/list';
 
<List {...listPresets.mobile}>
    <Space size={2}>
        <Typography.Text {...typographyPresets.mobile.list.text.primary}>
            Накопительные счета
        </Typography.Text>
        <Typography.Text {...typographyPresets.mobile.list.text.secondary}>
            Индивидуальное обслуживание в любом отделении в России
        </Typography.Text>
    </Space>

    <Space size={2}>
        <Typography.Text  {...typographyPresets.mobile.list.text.primary}>
            Депозиты
        </Typography.Text>
        <Typography.Text {...typographyPresets.mobile.list.text.secondary}>
            Повышенные % ставки по депозитам
        </Typography.Text>
    </Space>
</List>
```

--------------------------------

### Basic Drawer Usage

Source: https://github.com/alfa-laboratory/core-components/blob/master/packages/drawer/src/docs/description.mdx

Demonstrates the fundamental implementation of the Drawer component. Use this for standard side panel functionality.

```tsx
function Content() {
    const { contentRef } = React.useContext(DrawerContext);
    const [showMore, setShowMore] = React.useState(false);
    const Text = () => (
        <p>
            Сейчас много говорят об отказах банков в проведении операций, блокировках
            интернет-банка. Это связано с тем, что Центральный банк РФ обязывает банки выявлять
            операции своих клиентов, потенциально нарушающие требования Федерального закона «О
            противодействии легализации (отмыванию) доходов, полученных преступным путем, и
            финансированию терроризма» — 115-ФЗ
        </p>
    );
    return (
        <div style={{ padding: '16px 32px' }} ref={contentRef}>
            <Text />
            {showMore && (
                <>
                    <Text />
                    <Text />
                    <Text />
                </>
            )}
            <Button size='xs' type='button' onClick={() => setShowMore(!showMore)}>
                {showMore ? 'Скрыть' : 'Показать еще'}
            </Button>
        </div>
    );
}

render(() => {
    const [open, setOpen] = React.useState(false);

    const handleModalOpen = () => setOpen(!open);

    return (
        <React.Fragment>
            <Button size='xs' onClick={handleModalOpen}>
                Открыть Drawer
            </Button>
            <Drawer open={open} onClose={handleModalOpen}>
                <Content />
            </Drawer>
        </React.Fragment>
    );
});
```

--------------------------------

### Line Chart Configuration and Rendering

Source: https://github.com/alfa-laboratory/core-components/blob/master/packages/chart/src/docs/Component.stories.mdx

This snippet shows the configuration for a line chart, including data points, chart options, and how to render it using the Chart component. It also displays the stringified options in a preformatted block.

```javascript
const labelsLineChart = {
            labelFormatter: (value) => {
                return new Date(value).toLocaleDateString('en-US', {
                    month: 'short',
                    day: 'numeric',
                });
            },
            valueFormatter: (value) => {
                return value;
            },
        };

        const lineChartOptions = {
            id: 'line-chart',
            composeChart,
            responsiveContainer,
            cartesianGrid,
            xAxis,
            yAxis,
            tooltip,
            legend,
            brush,
            labels: labelsLineChart,
            series: [areaChart]
        };

        return (
            <div style={{ display: 'flex' }}>
                <div style={{ marginBottom: '20px', top: 25, width: '1050px', height: '600px' }}>
                    <Chart
                        id={ 'line-chart' }
                        composeChart={ composeChart }
                        responsiveContainer={ responsiveContainer }
                        cartesianGrid={ cartesianGrid }
                        xAxis={ xAxis }
                        yAxis={ yAxis }
                        tooltip={ tooltip }
                        legend={ legend }
                        brush={ brush }
                        labels={ labelsLineChart }
                        series={ [lineChart, areaChart] }
                    />
                </div>
                <div style={{ width: '500px', height: '600px', overflow: 'auto' }}>
                    <pre>
                        { JSON.stringify(clearData(lineChartOptions), null, 2) }
                    </pre>
                </div>
            </div>
        )
```

--------------------------------

### Basic Modal Usage

Source: https://github.com/alfa-laboratory/core-components/blob/master/packages/modal/src/docs/description.mdx

Demonstrates how to open and close a modal with content. Requires React state management for the open/close state and the ModalDesktop component with its sub-components.

```tsx
import { Typography } from '@alfalab/core-components/typography';

render(() => {
    const [open, setOpen] = React.useState(false);

    const handleModalOpen = () => setOpen(!open);

    return (
        <React.Fragment>
            <Button type='button' size='xs' onClick={handleModalOpen}>
                Открыть модалку
            </Button>
            <ModalDesktop open={open} onClose={handleModalOpen} size='m'>
                <ModalDesktop.Header hasCloser={true} />
                <ModalDesktop.Content>
                    <Typography.Title tag='div' view='small'>
                        Почему банк проверяет мои операции?
                    </Typography.Title>
                    <br />
                    <Typography.Text tag='p'>
                        Сейчас много говорят об отказах банков в проведении операций, блокировках
                        интернет-банка. Это связано с тем, что Центральный банк РФ обязывает банки
                        выявлять операции своих клиентов, потенциально нарушающие требования
                        Федерального закона 115-ФЗ «О противодействии легализации (отмыванию) доходов,
                        полученных преступным путем, и финансированию терроризма». 
                    </Typography.Text>
                    <br />
                    <Typography.Text tag='p'>
                        Ознакомиться с требованиями ЦБ РФ можно на официальном сайте. Банки обязаны
                        предотвращать проведение таких операций и поэтому могут запросить
                        дополнительную информацию и документы, ограничить доступ к платежам через
                        интернет-банк или даже отказать в исполнении платежа.
                    </Typography.Text>
                </ModalDesktop.Content>
                <ModalDesktop.Footer>
                    <Button view='primary' size='s' onClick={handleModalOpen}>
                        Понятно
                    </Button>
                </ModalDesktop.Footer>
            </ModalDesktop>
        </React.Fragment>
    );
});

```

--------------------------------

### Release Major Version

Source: https://github.com/alfa-laboratory/core-components/blob/master/README.md

Command to build and release a major version of the components.

```bash
yarn pub:major # соберет и выпустит major-версию
```

--------------------------------

### Link Customization with Slots

Source: https://github.com/alfa-laboratory/core-components/blob/master/packages/link/src/docs/description.mdx

Demonstrates how to use 'leftAddons' and 'rightAddons' slots to include custom content, such as icons, within the link. This enhances link visibility and provides additional context.

```tsx
<Space>
    <Link view='primary' leftAddons={<StarMIcon />}>
        Ссылка с иконкой слева
    </Link>
    <Link view='secondary' pseudo={true} rightAddons={<StarMIcon />}>
        Ссылка с иконкой справа
    </Link>
</Space>
```

--------------------------------

### Release Minor Version

Source: https://github.com/alfa-laboratory/core-components/blob/master/README.md

Command to build and release a minor version of the components.

```bash
yarn pub:minor # соберет и выпустит minor-версию
```

--------------------------------

### Basic List Usage

Source: https://github.com/alfa-laboratory/core-components/blob/master/packages/list/src/docs/description.mdx

Demonstrates the basic usage of the List component with different tags (ul, ol) and markers. This is useful for creating unordered and ordered lists with custom content.

```tsx
<Space>
    <List tag='ul'>
        <Typography.Text view='primary-medium'>Накопительные счета</Typography.Text>
        <Typography.Text view='primary-medium'>Депозиты</Typography.Text>
        <Typography.Text view='primary-medium'>Кредиты</Typography.Text>
    </List>

    <List tag='ul' marker='•'>
        <Typography.Text view='primary-medium'>
            Индивидуальное обслуживание в любом отделении в России
        </Typography.Text>
        <Typography.Text view='primary-medium'>Повышенные % ставки по депозитам</Typography.Text>
        <Typography.Text view='primary-medium'>Льготная конвертация валют.</Typography.Text>
    </List>

    <List tag='ol'>
        <Typography.Text view='primary-medium'>Ипотечный кредит</Typography.Text>
        <Typography.Text view='primary-medium'>Потребительский кредит</Typography.Text>
        <Typography.Text view='primary-medium'>Бесплатные сервисы для накоплений</Typography.Text>
    </List>
</Space>
```

--------------------------------

### Amount Comparison: Default vs. With Zero Minor Part

Source: https://github.com/alfa-laboratory/core-components/blob/master/packages/amount/src/docs/description.mdx

Compares the default view of the Amount component with the 'withZeroMinorPart' view, showing how zero minor parts are handled differently.

```tsx
import { Container, Row, Col } from '@alfalab/core-components/container';
import { Amount } from '@alfalab/core-components/amount';

<Container>
    <Row>
        <Col>
            <Row>Значение</Row>
            <Row>1234500</Row>
            <Row>1234567</Row>
        </Col>
        <Col>
            <Row>view="default"</Row>
            <Row>
                <Amount value={1234500} currency='RUR' minority={100} />
            </Row>
            <Row>
                <Amount value={1234567} currency='RUR' minority={100} />
            </Row>
        </Col>
        <Col>
            <Row>view="withZeroMinorPart"</Row>
            <Row>
                <Amount view='withZeroMinorPart' value={1234500} currency='RUR' minority={100} />
            </Row>
            <Row>
                <Amount view='withZeroMinorPart' value={1234567} currency='RUR' minority={100} />
            </Row>
        </Col>
    </Row>
</Container>
```

--------------------------------

### Import Toast Component

Source: https://github.com/alfa-laboratory/core-components/blob/master/packages/toast/src/docs/component.stories.mdx

Shows the necessary import statement for using the Toast component in your project.

```tsx
import { Toast } from '@alfalab/core-components/toast';
```

--------------------------------

### Import ES5 Button Component with CSS Modules

Source: https://github.com/alfa-laboratory/core-components/blob/master/README.md

Importing the Button component using the ES5 distribution with CSS Modules enabled.

```tsx
import { Button } from '@alfalab/core-components/button/cssm';
// или
import { Button } from '@alfalab/core-components-button/dist/cssm';
```