How to use @magento/peregrine - 10 common examples

const classes = mergeClasses(defaultClasses, props.classes);
    const toggleClass = isOpen ? classes.dropdown_active : classes.dropdown;

    const handleKebabClick = useCallback(() => {
        setIsOpen(!isOpen);
    }, [isOpen]);
    const handleOutsideKebabClick = useCallback(event => {
        // Ensure we're truly outside of the kebab.
        if (!kebabRef.current.contains(event.target)) {
            setIsOpen(false);
        }
    }, []);

    useEventListener(document, 'mousedown', handleOutsideKebabClick);
    useEventListener(document, 'touchend', handleOutsideKebabClick);

    return (
        <div>
            <button>
                
            </button>
            <ul>{children}</ul>
        </div>
    );
};

const [isOpen, setIsOpen] = useState(false);

    const classes = mergeClasses(defaultClasses, props.classes);
    const toggleClass = isOpen ? classes.dropdown_active : classes.dropdown;

    const handleKebabClick = useCallback(() => {
        setIsOpen(!isOpen);
    }, [isOpen]);
    const handleOutsideKebabClick = useCallback(event => {
        // Ensure we're truly outside of the kebab.
        if (!kebabRef.current.contains(event.target)) {
            setIsOpen(false);
        }
    }, []);

    useEventListener(document, 'mousedown', handleOutsideKebabClick);
    useEventListener(document, 'touchend', handleOutsideKebabClick);

    return (
        <div>
            <button>
                
            </button>
            <ul>{children}</ul>
        </div>
    );
};

useEffect(() => {
        for (const { error, id, loc } of errors) {
            const errorToastProps = {
                icon: ErrorIcon,
                message: `${ERROR_MESSAGE}\nDebug: ${id} ${loc}`,
                onDismiss: remove => {
                    getErrorDismisser(error, handleDismiss)();
                    remove();
                },
                timeout: 15000,
                type: 'error'
            };
            // Only add a toast for new errors. Without this condition we would
            // re-add toasts when one error is removed even if there were two
            // added at the same time.
            const errorToastId = getToastId(errorToastProps);
            if (!toasts.get(errorToastId)) {
                addToast(errorToastProps);
            }
        }
    }, [errors, handleDismiss]); // eslint-disable-line

const CategoryTile = props => {
    const talonProps = useCategoryTile({
        item: props.item
    });

    const { image, item } = talonProps;

    const imagePath = resourceUrl(image.url, {
        type: image.type,
        width: image.width
    });

    // interpolation doesn't work inside `url()` for legacy reasons
    // so a custom property should wrap its value in `url()`
    const imageUrl = imagePath ? `url(${imagePath})` : 'none';
    const imageWrapperStyle = { '--venia-image': imageUrl };

    const classes = mergeClasses(defaultClasses, props.classes);

test('renders a PaymentsForm component', () => {
    const component = createTestInstance();

    expect(component.toJSON()).toMatchSnapshot();
});

test('renders the ThumbnailList component correctly', () => {
    const component = createTestInstance(
        
            
        
    );

    expect(component.toJSON()).toMatchSnapshot();
});

test('Confirm Order button is disabled if submitting', () => {
    const props = {
        ...defaultProps,
        submitting: true
    };
    const component = createTestInstance();
    expect(component.toJSON()).toMatchSnapshot();
});

test('submit address form calls action with type and values', () => {
    const props = {
        ...defaultProps,
        editing: 'address'
    };
    const component = createTestInstance();
    const formValues = {
        foo: 'bar'
    };
    act(() => {
        component.root.findByType(AddressForm).props.onSubmit(formValues);
    });

    expect(mockSubmitShippingAddress).toHaveBeenCalledWith({
        formValues
    });
});

test('renders the Carousel component correctly w/ sorted images', () => {
    const component = createTestInstance(
        
            
        
    );

    expect(component.toJSON()).toMatchSnapshot();
});

test('clicking payment form edit sets `editing` state value to "paymentMethod"', () => {
    const component = createTestInstance();

    act(() => {
        component.root.findAllByType(Section)[1].props.onClick();
    });

    expect(mockSetEditing).toHaveBeenCalledWith('paymentMethod');
});