#53731 Создал все кнопки со всеми необходимыми пропсами и добавил перевод/локализация ( библиотека i18n )

В задаче Реализовано:

Создал базовый компонент для кнопки BaseButton-

const BaseButton = ({
                        type,
                        text,
                        size,
                        icon,
                        iconSide,
                        callback,
                        notification = 0,
                        isPending = false,
                        disabled = false
                    }: Props) => {

    const {t} = useTranslation()

    const parseNotification = (notification: number) => {
        if (!!notification && notification > 0) {
            return notification <= 9 ? notification : '9+'
        }
        return ''
    }

Добавил все варианты кнопок в сторибук -

const meta: Meta<typeof BaseButton> = {
    title: 'Components/Button',
    component: BaseButton,
    tags: ['autodocs'],
    argTypes: {
        size: {
            control: 'radio',
            options: [ButtonSize.large, ButtonSize.medium],
        },
        text: {
            control: 'text',
        },
        notification: {
            control: 'number',
            description: 'Уведомления отображаются только если у кнопкм нет имени и есть иконка'
        },
        isPending: {
            control: 'boolean',
        },
        type: {
            control: 'select',
            options: [
                ButtonColor.primary,
                ButtonColor.tertiary,
                ButtonColor.ghost,
                ButtonColor.danger,
                ButtonColor.ghostDanger,
            ],
        },

Добавил переводы/локализацию ( библтотека i18n ) -

import i18n from 'i18next';
import Backend from "i18next-http-backend";
import LanguageDetector from 'i18next-browser-languagedetector';
import { initReactI18next } from 'react-i18next';

i18n
    .use(Backend)
    .use(LanguageDetector)
    .use(initReactI18next)
    .init({
        fallbackLng: 'ru',
        interpolation: {
            escapeValue: false,
        },
        react: {
            useSuspense: false,
        },
    })

export default i18n;

Добавил все цвета и стилизацию для каждой кнопки -

export enum Color {
    Blue_900 = "#02305A",
    Blue_800 = "#003B6F",
    Blue_700 = "#19466E",
    Blue_600 = "#365775",
    Blue_500 = "#00567E",
    Blue_400 = "#7FB6D8",
    Blue_300 = "#9FCBE7",
    Blue_200 = "#B4D2E5",
    Blue_100 = "#F2F4F4",

    Grey_900 = "#191E1F",
    Grey_600 = "#5F696A",
    Grey_400 = "#B5BCBD",
    Grey_300 = "#D0D7D8",
    Grey_100 = "#F2F4F4",

    Red_900 = "#B80800",
    Red_800 = "#CF2F27",
    Red_700 = "#EF3028",
    Red_400 = "#FBA7A7",
    Red_200 = "#FFDFDF",
    Red_100 = "#FFF1F1",

    Yellow = "#FCE705",

    Green_700 = "#00A442",

    White = "#FFF"
}

export const Theme: DefaultTheme = {
    button: {
        size: {
            large: '0 24px',
            medium: '0 12px',
            withIcon: {
                large: '0 18px',
                medium: '0 14px',
            },
            onlyIcon: {
              large: '14px',
              medium: '10px',
            }
        },
        Primary: {
            default: {
                bgColor: Color.Blue_700,
                border: 'none',
                text: 'white',
                opacity: '1',
                radius: '5px',
            },
            hover: {
                bgColor: Color.Blue_500,
                border: 'none',
                text: 'white',
                opacity: '1',
            },
            active: {
                bgColor: Color.Blue_900,
                border: 'none',
                text: 'white',
                opacity: '1',
            },
            disable: {
                bgColor: Color.Blue_700,
                border: 'none',
                text: 'white',
                opacity: '44%',
            },
        },