@blumintinc/eslint-plugin-blumint 1.16.2 → 1.17.0

package/lib/rules/prefer-sx-prop-over-system-props.js

@@ -0,0 +1,401 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.preferSxPropOverSystemProps = void 0;
+const utils_1 = require("@typescript-eslint/utils");
+const createRule_1 = require("../utils/createRule");
+/**
+ * The canonical set of MUI system props that are deprecated in favor of `sx`.
+ * These are all props that MUI resolves via its system/styled engine and will
+ * remove in the next major release. Deliberately excludes props that serve a
+ * dual role as real component API (e.g. `spacing`, `direction` on Stack,
+ * Grid breakpoint props).
+ */
+const MUI_SYSTEM_PROPS = new Set([
+    // Spacing — margin
+    'm',
+    'mt',
+    'mr',
+    'mb',
+    'ml',
+    'mx',
+    'my',
+    // Spacing — padding
+    'p',
+    'pt',
+    'pr',
+    'pb',
+    'pl',
+    'px',
+    'py',
+    // Sizing
+    'width',
+    'height',
+    'minWidth',
+    'maxWidth',
+    'minHeight',
+    'maxHeight',
+    'boxSizing',
+    // Display / overflow / visibility
+    'display',
+    'displayPrint',
+    'overflow',
+    'textOverflow',
+    'visibility',
+    'whiteSpace',
+    // Flexbox
+    'flexDirection',
+    'flexWrap',
+    'justifyContent',
+    'justifyItems',
+    'justifySelf',
+    'alignItems',
+    'alignContent',
+    'alignSelf',
+    'order',
+    'flex',
+    'flexGrow',
+    'flexShrink',
+    'flexBasis',
+    // CSS Grid
+    'gap',
+    'rowGap',
+    'columnGap',
+    'gridColumn',
+    'gridRow',
+    'gridArea',
+    'gridAutoFlow',
+    'gridAutoColumns',
+    'gridAutoRows',
+    'gridTemplateColumns',
+    'gridTemplateRows',
+    'gridTemplateAreas',
+    // Positioning
+    'position',
+    'top',
+    'right',
+    'bottom',
+    'left',
+    'zIndex',
+    // Color / background
+    'color',
+    'bgcolor',
+    // Borders
+    'border',
+    'borderTop',
+    'borderRight',
+    'borderBottom',
+    'borderLeft',
+    'borderColor',
+    'borderTopColor',
+    'borderRightColor',
+    'borderBottomColor',
+    'borderLeftColor',
+    'borderRadius',
+    // Shadows
+    'boxShadow',
+    // Typography
+    'typography',
+    'fontFamily',
+    'fontSize',
+    'fontStyle',
+    'fontWeight',
+    'letterSpacing',
+    'lineHeight',
+    'textAlign',
+    'textTransform',
+]);
+/**
+ * Default MUI component names to check. The user can extend this via options.
+ */
+const DEFAULT_MUI_COMPONENTS = new Set([
+    'Box',
+    'Stack',
+    'Typography',
+    'Grid',
+    'Paper',
+    'Container',
+    'Card',
+    'CardContent',
+    'CardActions',
+    'Button',
+    'IconButton',
+    'Chip',
+    'Avatar',
+    'Badge',
+    'Divider',
+    'List',
+    'ListItem',
+    'ListItemText',
+    'ListItemIcon',
+    'Menu',
+    'MenuItem',
+    'Drawer',
+    'Dialog',
+    'DialogTitle',
+    'DialogContent',
+    'DialogActions',
+    'Tabs',
+    'Tab',
+    'AppBar',
+    'Toolbar',
+]);
+/**
+ * Props that must never be moved to `sx` because they are genuine component
+ * API props, not MUI system styling shorthands. `direction` and `spacing` are
+ * the most critical — they control Stack's layout via MUI internals.
+ */
+const DEFAULT_ALLOWED_PROPS = new Set([
+    'direction',
+    'spacing',
+    'container',
+    'item',
+    'xs',
+    'sm',
+    'md',
+    'lg',
+    'xl',
+    'variant',
+    'component',
+    'ref',
+    'key',
+    'children',
+    'id',
+    'className',
+    'style',
+    'divider',
+    'useFlexGap',
+    'columns',
+    'wrap',
+    'rowSpacing',
+    'columnSpacing',
+    'zeroMinWidth',
+    'offset',
+    'size', // Grid size (MUI v6+)
+]);
+/** Get the component name from a JSX opening element (handles namespaced like Mui.Box). */
+function getComponentName(node) {
+    const { name } = node;
+    if (name.type === utils_1.AST_NODE_TYPES.JSXIdentifier) {
+        return name.name;
+    }
+    if (name.type === utils_1.AST_NODE_TYPES.JSXMemberExpression) {
+        if (name.property.type === utils_1.AST_NODE_TYPES.JSXIdentifier) {
+            return name.property.name;
+        }
+    }
+    return null;
+}
+/** True when the first character is uppercase (i.e. a React/MUI component). */
+function isUpperCase(name) {
+    return (name.length > 0 &&
+        name[0] === name[0].toUpperCase() &&
+        name[0] !== name[0].toLowerCase());
+}
+/**
+ * Convert a string value to a single-quoted JS string literal.
+ * Used when building sx property values from JSX string attributes.
+ */
+function toSingleQuoted(value) {
+    const str = String(value);
+    const escaped = str.replace(/\\/g, '\\\\').replace(/'/g, "\\'");
+    return `'${escaped}'`;
+}
+/** Serialize a JSX attribute value node back to source text for use inside sx={{ ... }}. */
+function attrValueToSxValue(attr, sourceCode) {
+    const { value } = attr;
+    if (value === null) {
+        // Boolean shorthand — value is `true`
+        return 'true';
+    }
+    if (value.type === utils_1.AST_NODE_TYPES.Literal) {
+        // String literal attribute: display="flex" → 'flex'
+        return toSingleQuoted(value.value);
+    }
+    if (value.type === utils_1.AST_NODE_TYPES.JSXExpressionContainer) {
+        if (value.expression.type === utils_1.AST_NODE_TYPES.JSXEmptyExpression) {
+            return 'undefined';
+        }
+        // Numeric, expression, object, array, etc. — preserve raw source
+        return sourceCode.getText(value.expression);
+    }
+    return sourceCode.getText(value);
+}
+exports.preferSxPropOverSystemProps = (0, createRule_1.createRule)({
+    name: 'prefer-sx-prop-over-system-props',
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description: 'Enforce using the MUI `sx` prop instead of deprecated system props (e.g. `mt`, `display`, `flexDirection`) on MUI components.',
+            recommended: 'error',
+        },
+        fixable: 'code',
+        schema: [
+            {
+                type: 'object',
+                properties: {
+                    components: {
+                        type: 'array',
+                        items: { type: 'string' },
+                    },
+                    allowedProps: {
+                        type: 'array',
+                        items: { type: 'string' },
+                    },
+                },
+                additionalProperties: false,
+            },
+        ],
+        messages: {
+            preferSxProp: 'MUI system prop "{{prop}}" is deprecated. Move it into the `sx` prop instead.',
+        },
+    },
+    defaultOptions: [{}],
+    create(context, [options]) {
+        const componentSet = options.components
+            ? new Set(options.components)
+            : DEFAULT_MUI_COMPONENTS;
+        const extraAllowed = options.allowedProps
+            ? new Set(options.allowedProps)
+            : new Set();
+        function isAllowedProp(name) {
+            if (DEFAULT_ALLOWED_PROPS.has(name))
+                return true;
+            if (extraAllowed.has(name))
+                return true;
+            if (/^on[A-Z]/.test(name))
+                return true;
+            if (name.startsWith('aria-') || name.startsWith('data-'))
+                return true;
+            return false;
+        }
+        function isSystemProp(name) {
+            return MUI_SYSTEM_PROPS.has(name) && !isAllowedProp(name);
+        }
+        return {
+            JSXOpeningElement(node) {
+                const componentName = getComponentName(node);
+                if (!componentName)
+                    return;
+                if (!isUpperCase(componentName))
+                    return;
+                if (!componentSet.has(componentName))
+                    return;
+                const systemPropAttrs = [];
+                let sxAttr = null;
+                for (const attr of node.attributes) {
+                    if (attr.type !== utils_1.AST_NODE_TYPES.JSXAttribute)
+                        continue;
+                    if (attr.name.type !== utils_1.AST_NODE_TYPES.JSXIdentifier)
+                        continue;
+                    const name = attr.name.name;
+                    if (name === 'sx') {
+                        sxAttr = attr;
+                    }
+                    else if (isSystemProp(name)) {
+                        systemPropAttrs.push(attr);
+                    }
+                }
+                if (systemPropAttrs.length === 0)
+                    return;
+                const sourceCode = context.getSourceCode();
+                const fullSource = sourceCode.getText();
+                /**
+                 * Remove an attribute AND the whitespace that precedes it so the
+                 * output does not accumulate extra spaces between attributes.
+                 */
+                function removeAttrWithLeadingSpace(fixer, attr) {
+                    const range = attr.range ?? [0, 0];
+                    const [start, end] = range;
+                    // Walk backwards from the attribute start to consume any whitespace
+                    let wsStart = start;
+                    while (wsStart > 0 && /\s/.test(fullSource[wsStart - 1])) {
+                        wsStart--;
+                    }
+                    return fixer.removeRange([wsStart, end]);
+                }
+                // Report each system prop. Only the first carries the fixer to avoid
+                // overlapping fix ranges on the same element.
+                systemPropAttrs.forEach((attr, index) => {
+                    const propName = attr.name.type === utils_1.AST_NODE_TYPES.JSXIdentifier
+                        ? attr.name.name
+                        : '';
+                    context.report({
+                        node: attr,
+                        messageId: 'preferSxProp',
+                        data: { prop: propName },
+                        fix: index === 0
+                            ? (fixer) => {
+                                const sc = sourceCode;
+                                const newEntries = systemPropAttrs
+                                    .map((a) => {
+                                    const key = a.name.type === utils_1.AST_NODE_TYPES.JSXIdentifier
+                                        ? a.name.name
+                                        : sc.getText(a.name);
+                                    const val = attrValueToSxValue(a, sc);
+                                    return `${key}: ${val}`;
+                                })
+                                    .join(', ');
+                                const fixes = [];
+                                if (sxAttr === null) {
+                                    // No existing sx — replace the first system prop with sx={{...}}
+                                    // and delete the rest (including their leading whitespace).
+                                    fixes.push(fixer.replaceText(systemPropAttrs[0], `sx={{ ${newEntries} }}`));
+                                    for (let i = 1; i < systemPropAttrs.length; i++) {
+                                        fixes.push(removeAttrWithLeadingSpace(fixer, systemPropAttrs[i]));
+                                    }
+                                }
+                                else if (sxAttr.value?.type ===
+                                    utils_1.AST_NODE_TYPES.JSXExpressionContainer &&
+                                    sxAttr.value.expression.type ===
+                                        utils_1.AST_NODE_TYPES.ObjectExpression) {
+                                    // Existing sx={{ ... }} — merge system props at the front.
+                                    const existingObj = sxAttr.value.expression;
+                                    const existingProps = existingObj.properties;
+                                    if (existingProps.length === 0) {
+                                        fixes.push(fixer.replaceText(existingObj, `{ ${newEntries} }`));
+                                    }
+                                    else {
+                                        fixes.push(fixer.insertTextBefore(existingProps[0], `${newEntries}, `));
+                                    }
+                                    for (const a of systemPropAttrs) {
+                                        fixes.push(removeAttrWithLeadingSpace(fixer, a));
+                                    }
+                                }
+                                else if (sxAttr.value?.type ===
+                                    utils_1.AST_NODE_TYPES.JSXExpressionContainer &&
+                                    sxAttr.value.expression.type ===
+                                        utils_1.AST_NODE_TYPES.ArrayExpression) {
+                                    // sx={[...]} — prepend a new object as the first array element.
+                                    const arr = sxAttr.value.expression;
+                                    if (arr.elements.length === 0) {
+                                        fixes.push(fixer.replaceText(arr, `[{ ${newEntries} }]`));
+                                    }
+                                    else {
+                                        fixes.push(fixer.insertTextBefore(arr.elements[0], `{ ${newEntries} }, `));
+                                    }
+                                    for (const a of systemPropAttrs) {
+                                        fixes.push(removeAttrWithLeadingSpace(fixer, a));
+                                    }
+                                }
+                                else if (sxAttr.value !== null) {
+                                    // sx is a variable/expression — spread it: sx={{ entries, ...expr }}
+                                    const innerExpr = sxAttr.value.type ===
+                                        utils_1.AST_NODE_TYPES.JSXExpressionContainer
+                                        ? sc.getText(sxAttr.value
+                                            .expression)
+                                        : sc.getText(sxAttr.value);
+                                    fixes.push(fixer.replaceText(sxAttr, `sx={{ ${newEntries}, ...${innerExpr} }}`));
+                                    for (const a of systemPropAttrs) {
+                                        fixes.push(removeAttrWithLeadingSpace(fixer, a));
+                                    }
+                                }
+                                return fixes;
+                            }
+                            : null,
+                    });
+                });
+            },
+        };
+    },
+});
+//# sourceMappingURL=prefer-sx-prop-over-system-props.js.map

package/lib/rules/prefer-use-base62-id.d.ts

@@ -0,0 +1,8 @@
+type Options = [
+    {
+        targetPaths?: string[];
+    }
+];
+type MessageIds = 'preferUseBase62IdHook' | 'preferUseBase62IdTopLevel' | 'preferUseBase62IdUseMemo';
+export declare const preferUseBase62Id: import("@typescript-eslint/utils/dist/ts-eslint/Rule").RuleModule<MessageIds, Options, import("@typescript-eslint/utils/dist/ts-eslint/Rule").RuleListener>;
+export {};