@yandex/ui/codeshifts/v3.0.0/popup-direction.js

Yandex UI components

/**
 * @param fileInfo {import('jscodeshift').FileInfo}
 * @param api {import('jscodeshift').API}
 */
function transformer(fileInfo, api) {
    const j = api.jscodeshift;
    const root = j(fileInfo.source);
    updateDirection(root, j);
    return root.toSource();
}

const components = ['Popup', 'MessageBoxPopup', 'Tooltip', 'TooltipStateful', 'Dropdown'];

/**
 * @param root {import('jscodeshift').Collection}
 * @param j {import('jscodeshift').JSCodeshift}
 */
function updateDirection(root, j) {
    root.find(j.JSXOpeningElement).forEach((node) => {
        if (!components.includes(node.value.name.name)) {
            return;
        }

        for (const attr of node.value.attributes) {
            if (attr.name && (attr.name.name === 'direction' || attr.name.name === 'directions')) {
                // Update direction name.
                attr.name.name = 'direction';
                // Update single value.
                if (attr.value.type === 'Literal') {
                    attr.value.value = getNewDirection(attr.value.value);
                } else if (attr.value.expression && attr.value.expression.type === 'ArrayExpression') {
                    // Update array of values.
                    for (const element of attr.value.expression.elements) {
                        element.value = getNewDirection(element.value);
                    }
                }
            }
        }
    });
}

function getNewDirection(legacyDirection) {
    switch (legacyDirection) {
        case 'top-left':
            return 'top-start';
        case 'top-center':
            return 'top';
        case 'top-right':
            return 'top-end';
        case 'bottom-left':
            return 'bottom-start';
        case 'bottom-center':
            return 'bottom';
        case 'bottom-right':
            return 'bottom-end';
        case 'right-top':
            return 'right-start';
        case 'right-center':
            return 'right';
        case 'right-bottom':
            return 'right-end';
        case 'left-top':
            return 'left-start';
        case 'left-center':
            return 'left';
        case 'left-bottom':
            return 'left-end';
    }
}

module.exports = transformer;