modsen-doggy-ui v0.1.4

Modsen Doggy Components library

Общие данные

Библиотека UI компонентов из приложения Doggy.

Компоненты:

• CatalogCard: карточка товара
• SignUp: форма для подписки на новости
• PageHeader: заголовок страницы
• Navigation: навигация на сайте
• ContactsForm: форма обратной связи
• Payment: форма оплаты
• Location: интерактивная карта

Установка

npm install modsen-doggy-ui

При работе с TypeScript необходимо создать файл .d.ts, и поместить в него:

declare module 'modsen-doggy-ui';

Использование

Компонент CatalogCard

Принимает 4 обязательных props:

• image: картинка товара;
• title: название товара;
• category: категория товара;
• price: цена;

Компонент PageHeader

Принимает 2 обязательных props:

• title: заголовок;
• subtitle: подзаголовок;

Компонент Payment

Принимает 2 обязательных props:

• values: объект, вида:
• функцию onInputChange, которая изменяет состояние;

Пример работоспособности компонента Payment:

    import { useReducer } from "react";
    import { Payment } from 'modsen-doggy-ui';

    const PAYMENT = {
        cardNumber: "",
        cardCVV: "",
        cardExpiry: "",
        cardHolder: "",
    };

    function paymentReducer(state, action) {
        switch (action.type) {
            case "SET_CARD_NUMBER":
            return { ...state, cardNumber: action.payload };
            case "SET_CARD_EXPIRY":
            return { ...state, cardExpiry: action.payload };
            case "SET_CARD_CVV":
            return { ...state, cardCVV: action.payload };
            case "SET_CARD_HOLDER":
            return { ...state, cardHolder: action.payload };
            default:
            return state;
        }
    }

    function PaymentComponent () {
        const [payment, dispatch] = useReducer(paymentReducer, PAYMENT);

        const onInputChange = (action: string) => (e: React.ChangeEvent<HTMLInputElement>) => {
            dispatch({ type: action, payload: e.target.value });
        };

        return (
            <div>
                <Payment values={payment} onInputChange={onInputChange}/>
            </div>
        );
    }

Компонент SignUp

Не принимает props.

Компонент Navigation

Не принимает props.

Компонент Location

Не принимает props.

Компонент ContactsForm

Не принимает props.

Предостережение

Важно: для корректного отображения ContactsForm и Payment рекомендуется обернуть эти компоненты родительским элементом, имеющим width и/или padding-left/right.