Alfa Laboratory Core Components

The @alfalab/core-components library is a collection of React components designed for building web interfaces. Key features include:

• Tested Components: Up-to-date and verified components.
• Design System Alignment: Built to comply with the Alfa-Bank design system.
• TypeScript Support: Fully typed for better developer experience and safety.
• Themable: Easily customizable using CSS variables.
• Accessible: Designed to meet accessibility requirements.
• Maintained: Supported by a dedicated team.

The IntlPhoneInput component is a text field designed for entering international phone numbers. It uses the libphonenumber-js library (approx. 140KB) for phone number formatting.

Important Build Note: libphonenumber-js is bundled into a separate chunk. When building your project, ensure that this library is also collected into its own separate chunk to optimize performance. If you are using arui-scripts for your build process, ensure you are using version 9.7.0 or higher.

The chart component is built on top of the Recharts library (D3-based, MIT license). Currently, it supports three types of charts:

• bar
• line
• area

The @alfalab/core-components-typography package provides a set of components implementing a hybrid typography system. It includes specialized components for titles (standard, mobile-only, and responsive) and general text styling.

Key Rules:

• Font Family: Components do not set the font-family property unless the font='styrene' option is used. It is assumed that the font is already set on a parent element.
• Color: Use the color prop for static elements. For interactive elements that require color changes on hover, you should apply colors via CSS instead of using the color prop.

The CustomButton component is used when you need to display a button with a custom background color that is not covered by the standard Button component. It allows for arbitrary hex colors or linear gradients via the backgroundColor prop.

<CustomButton backgroundColor='#FF45C3'>Кнопка</CustomButton>

When using the Plate component to display information or content related to image downloads, ensure that the server response includes the header content-disposition: attachment. This ensures that browsers trigger a download rather than attempting to navigate to or display the image in the browser tab.

<Plate
    view='common'
    leftAddons={
        <Badge view='icon' iconColor='secondary' content={<InformationCircleMIcon />} />
    }
>
    <span>
        Чтобы скачивание изображений работало корректно, убедитесь, что в ответе от сервера
        выставлен заголовок <b>content-disposition: attachment</b>
    </span>
</Plate>

The @alfalab/core-components library uses a status system to communicate the maturity and readiness of a component for production use. Developers should check the status before deciding whether to implement a component in a critical product path.

If you provide children to the CircularProgressBar, the children will be rendered in the center of the progress bar. When children are present, the title and subtitle props are ignored.

<CircularProgressBar
    value={50}
    view="positive"
    size="l"
>
    <p>Hello</p>
</CircularProgressBar>

All component callback functions pass two arguments to the handler:

1. event: SyntheticEvent - The event object that triggered the call.
2. payload: {} - An object containing additional data. For example, a component might return { amount: 5000 }.

The Modal component provides a ModalContext that allows you to build custom headers, footers, and content areas while maintaining synchronization with the modal's internal state (like scroll position and presence of UI elements).

To create a custom header or footer that correctly informs the modal of its existence (to adjust padding/margins), you must call setHasHeader(true) or setHasFooter(true) within a useEffect hook inside your custom component.

const Header = () => {
    const { setHasHeader } = React.useContext(ModalContext);

    // Notify the modal that a header is being rendered
    React.useEffect(() => setHasHeader(true), [setHasHeader]);

    return (
        <div style={{ /* styles */ }}>
            Шапка
        </div>
    );
};