@hero-design/snowflake-guard 1.2.4 → 1.3.0

package/lib/src/reports/mobile/reportInlineStyle.js

@@ -0,0 +1,214 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.INLINE_STYLE_PROPERTIES = void 0;
+const recast = __importStar(require("recast"));
+const constants_1 = require("./constants");
+const BLACKLIST_PROPERTIES = {
+    style: constants_1.MOBILE_RULESET_MAP,
+    barStyle: constants_1.BAR_STYLE_RULESET_MAP,
+    containerStyle: constants_1.CONTAINER_STYLE_RULESET_MAP,
+    textStyle: constants_1.TEXT_STYLE_RULESET_MAP,
+};
+exports.INLINE_STYLE_PROPERTIES = [
+    'style',
+    'barStyle',
+    'containerStyle',
+    'textStyle',
+];
+const addViolatingAttribute = (prop, styleObjName, componentName, loc, violatingAttributes) => {
+    if (prop.key.type !== 'Identifier') {
+        return;
+    }
+    violatingAttributes.push({
+        attributeName: prop.key.name,
+        attributeValue: recast.print(prop.value).code,
+        inlineStyleProps: styleObjName,
+        componentName,
+        loc,
+    });
+};
+const reportInlineStyle = (ast, attributes, componentName) => {
+    const locs = {};
+    const violatingAttributes = [];
+    let hasCustomStyle = false;
+    let styleObjName;
+    attributes.forEach((attr) => {
+        var _a;
+        if (attr.type !== 'JSXAttribute') {
+            return;
+        }
+        if (typeof attr.name.name !== 'string') {
+            return;
+        }
+        if (((_a = attr.value) === null || _a === void 0 ? void 0 : _a.type) !== 'JSXExpressionContainer') {
+            return;
+        }
+        if (exports.INLINE_STYLE_PROPERTIES.includes(attr.name.name)) {
+            styleObjName = attr.name.name;
+            const PROHIBITED_PROPERTIES = BLACKLIST_PROPERTIES[styleObjName][componentName] || [];
+            const { expression } = attr.value;
+            if (expression.type === 'ObjectExpression') {
+                expression.properties.forEach((prop) => {
+                    var _a;
+                    // Case 1: Use direct object, e.g. <Button style={{ backgroundColor: 'red' }} />
+                    if (prop.type === 'ObjectProperty' &&
+                        prop.key.type === 'Identifier' &&
+                        PROHIBITED_PROPERTIES.includes(prop.key.name)) {
+                        hasCustomStyle = true;
+                        addViolatingAttribute(prop, styleObjName, componentName, (_a = attr.loc) === null || _a === void 0 ? void 0 : _a.start.line, violatingAttributes);
+                    }
+                    // Case 2: Use spread operator, e.g. <Button style={{ ...customStyle }} />
+                    if (prop.type === 'SpreadElement' &&
+                        prop.argument.type === 'Identifier') {
+                        const variableName = prop.argument.name;
+                        recast.visit(ast, {
+                            visitVariableDeclaration(path) {
+                                var _a;
+                                this.traverse(path);
+                                const declaration = path.value
+                                    .declarations[0];
+                                if (declaration.id.type === 'Identifier' &&
+                                    declaration.id.name === variableName &&
+                                    ((_a = declaration.init) === null || _a === void 0 ? void 0 : _a.type) === 'ObjectExpression') {
+                                    declaration.init.properties.forEach((deProp) => {
+                                        var _a;
+                                        if (deProp.type === 'ObjectProperty' &&
+                                            deProp.key.type === 'Identifier' &&
+                                            PROHIBITED_PROPERTIES.includes(deProp.key.name)) {
+                                            hasCustomStyle = true;
+                                            addViolatingAttribute(deProp, styleObjName, componentName, (_a = attr.loc) === null || _a === void 0 ? void 0 : _a.start.line, violatingAttributes);
+                                        }
+                                    });
+                                }
+                            },
+                        });
+                    }
+                    // Case 3: Use spread operator with variable's property, e.g. <Button style={{ ...customStyle.button }} />
+                    if (prop.type === 'SpreadElement' &&
+                        prop.argument.type === 'MemberExpression' &&
+                        prop.argument.object.type === 'Identifier' &&
+                        prop.argument.property.type === 'Identifier') {
+                        const variableName = prop.argument.object.name;
+                        const propName = prop.argument.property.name;
+                        recast.visit(ast, {
+                            visitVariableDeclaration(path) {
+                                var _a;
+                                this.traverse(path);
+                                const declaration = path.value
+                                    .declarations[0];
+                                if (declaration.id.type === 'Identifier' &&
+                                    declaration.id.name === variableName &&
+                                    ((_a = declaration.init) === null || _a === void 0 ? void 0 : _a.type) === 'ObjectExpression') {
+                                    declaration.init.properties.forEach((deProp) => {
+                                        if (deProp.type === 'ObjectProperty' &&
+                                            deProp.key.type === 'Identifier' &&
+                                            deProp.key.name === propName &&
+                                            deProp.value.type === 'ObjectExpression') {
+                                            deProp.value.properties.forEach((p) => {
+                                                var _a;
+                                                if (p.type === 'ObjectProperty' &&
+                                                    p.key.type === 'Identifier' &&
+                                                    PROHIBITED_PROPERTIES.includes(p.key.name)) {
+                                                    hasCustomStyle = true;
+                                                    addViolatingAttribute(p, styleObjName, componentName, (_a = attr.loc) === null || _a === void 0 ? void 0 : _a.start.line, violatingAttributes);
+                                                }
+                                            });
+                                        }
+                                    });
+                                }
+                            },
+                        });
+                    }
+                });
+            }
+            // Case 4: Use variable, e.g. <Button style={customStyle} />
+            if (expression.type === 'Identifier') {
+                const variableName = expression.name;
+                recast.visit(ast, {
+                    visitVariableDeclaration(path) {
+                        var _a;
+                        this.traverse(path);
+                        const declaration = path.value
+                            .declarations[0];
+                        if (declaration.id.type === 'Identifier' &&
+                            declaration.id.name === variableName &&
+                            ((_a = declaration.init) === null || _a === void 0 ? void 0 : _a.type) === 'ObjectExpression') {
+                            declaration.init.properties.forEach((prop) => {
+                                var _a;
+                                if (prop.type === 'ObjectProperty' &&
+                                    prop.key.type === 'Identifier' &&
+                                    PROHIBITED_PROPERTIES.includes(prop.key.name)) {
+                                    hasCustomStyle = true;
+                                    addViolatingAttribute(prop, styleObjName, componentName, (_a = attr.loc) === null || _a === void 0 ? void 0 : _a.start.line, violatingAttributes);
+                                }
+                            });
+                        }
+                    },
+                });
+            }
+            // Case 5: Use variable's property, e.g. <Button style={customStyle.button} />
+            if (expression.type === 'MemberExpression' &&
+                expression.object.type === 'Identifier' &&
+                expression.property.type === 'Identifier') {
+                const objectName = expression.object.name;
+                const propName = expression.property.name;
+                recast.visit(ast, {
+                    visitVariableDeclaration(path) {
+                        var _a;
+                        this.traverse(path);
+                        const declaration = path.value
+                            .declarations[0];
+                        if (declaration.id.type === 'Identifier' &&
+                            declaration.id.name === objectName &&
+                            ((_a = declaration.init) === null || _a === void 0 ? void 0 : _a.type) === 'ObjectExpression') {
+                            declaration.init.properties.forEach((prop) => {
+                                if (prop.type === 'ObjectProperty' &&
+                                    prop.key.type === 'Identifier' &&
+                                    prop.key.name === propName &&
+                                    prop.value.type === 'ObjectExpression') {
+                                    prop.value.properties.forEach((p) => {
+                                        var _a;
+                                        if (p.type === 'ObjectProperty' &&
+                                            p.key.type === 'Identifier' &&
+                                            PROHIBITED_PROPERTIES.includes(p.key.name)) {
+                                            hasCustomStyle = true;
+                                            addViolatingAttribute(p, styleObjName, componentName, (_a = attr.loc) === null || _a === void 0 ? void 0 : _a.start.line, violatingAttributes);
+                                        }
+                                    });
+                                }
+                            });
+                        }
+                    },
+                });
+            }
+            if (hasCustomStyle && attr.loc) {
+                locs[styleObjName] = attr.loc.start.line;
+            }
+        }
+    });
+    return { locs, violatingAttributes };
+};
+exports.default = reportInlineStyle;

package/lib/src/reports/mobile/reportStyledComponents.d.ts

@@ -1,6 +1,6 @@
 import * as recast from 'recast';
 import type { MobileComponentName } from './types';
 declare const reportStyledComponents: (ast: recast.types.ASTNode, componentList: {
-    [k: string]: "Alert" | "Badge" | "Button" | "Card" | "Carousel" | "Checkbox" | "Chip" | "Collapse" | "DatePicker" | "Divider" | "Empty" | "Icon" | "Portal" | "Progress" | "Radio" | "Rate" | "Select" | "Slider" | "Spinner" | "Switch" | "Tabs" | "Tag" | "TimePicker" | "Typography" | "Error" | "Image" | "Accordion" | "Attachment" | "Avatar" | "BottomNavigation" | "BottomSheet" | "Box" | "Calendar" | "ContentNavigator" | "Drawer" | "FAB" | "HeroDesignProvider" | "MapPin" | "List" | "PinInput" | "Swipeable" | "SectionHeading" | "Skeleton" | "Success" | "TextInput" | "Toast" | "Toolbar" | "RefreshControl" | "RichTextEditor" | "PageControl" | "ScrollViewWithFAB" | "SectionListWithFAB" | "FlatListWithFAB" | "Search" | "FloatingIsland";
+    [k: string]: "Accordion" | "Alert" | "Attachment" | "Avatar" | "Badge" | "BottomNavigation" | "BottomSheet" | "Box" | "Button" | "Calendar" | "Carousel" | "Card" | "Chip" | "Collapse" | "Checkbox" | "ContentNavigator" | "DatePicker" | "Divider" | "Drawer" | "Empty" | "Error" | "FAB" | "HeroDesignProvider" | "MapPin" | "Icon" | "Image" | "List" | "PinInput" | "Progress" | "Slider" | "Spinner" | "Swipeable" | "Radio" | "SectionHeading" | "Select" | "Skeleton" | "Success" | "Switch" | "Tabs" | "Tag" | "TextInput" | "TimePicker" | "Toast" | "Toolbar" | "Typography" | "Rate" | "RefreshControl" | "RichTextEditor" | "PageControl" | "Portal" | "ScrollViewWithFAB" | "SectionListWithFAB" | "FlatListWithFAB" | "Search" | "FloatingIsland";
 }, styledAliasName: string) => number[];
 export default reportStyledComponents;

package/lib/src/reports/mobile/reportStyledComponents.js

@@ -39,13 +39,13 @@ const reportStyledComponents = (ast, componentList, styledAliasName) => {
                     tag.callee.type === 'Identifier' &&
                     tag.callee.name === styledAliasName) {
                     const arg = tag.arguments[0];
-                    // Case 1: Custom default component, e.g. styled(Card)
+                    // Case 1: Custom default component, e.g. styled(Button)
                     if (arg.type === 'Identifier' &&
                         localComponentList.includes(arg.name) &&
                         tag.loc) {
                         locs.push(tag.loc.start.line);
                     }
-                    // Case 2: Custom compound component, e.g. styled(Card.Header)
+                    // Case 2: Custom compound component, e.g. styled(Button.Icon)
                     if (arg.type === 'MemberExpression' &&
                         arg.object.type === 'Identifier' &&
                         localComponentList.includes(arg.object.name) &&
@@ -54,7 +54,7 @@ const reportStyledComponents = (ast, componentList, styledAliasName) => {
                     }
                 }
             }
-            // Case 3: Custom compound component with spead operator. e.g. const { Header } = Card, then styled(Header)
+            // Case 3: Custom compound component with spead operator. e.g. const { Icon } = Button, then styled(Icon)
             if (declaration.init &&
                 declaration.init.type === 'Identifier' &&
                 localComponentList.includes(declaration.init.name)) {

package/lib/src/reports/mobile/testUtils.d.ts

@@ -1 +1,2 @@
 export declare const parseTypeScript: (source: string) => any;
+export declare const parseFlow: (source: string) => any;

package/lib/src/reports/mobile/testUtils.js

@@ -23,10 +23,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.parseTypeScript = void 0;
+exports.parseFlow = exports.parseTypeScript = void 0;
 const recast = __importStar(require("recast"));
 const tsParser = __importStar(require("../../parsers/typescript"));
+const flowParser = __importStar(require("../../parsers/flow"));
 const parseTypeScript = (source) => {
     return recast.parse(source, { parser: tsParser });
 };
 exports.parseTypeScript = parseTypeScript;
+const parseFlow = (source) => {
+    return recast.parse(source, { parser: flowParser });
+};
+exports.parseFlow = parseFlow;

package/lib/src/reports/reportCustomStyleProperties.d.ts

@@ -2,7 +2,7 @@ import * as recast from 'recast';
 import { AdditionalProp, InlineStyleProps } from './reportInlineStyle';
 import type { ComponentName, CompoundComponentName } from './types';
 declare const reportCustomProperties: (ast: recast.types.ASTNode, componentList: {
-    [k: string]: "Alert" | "Badge" | "Banner" | "Breadcrumb" | "Button" | "Card" | "Carousel" | "Chart" | "Checkbox" | "Chip" | "Collapse" | "Comment" | "ContextPanel" | "DatePicker" | "Divider" | "Dropdown" | "Empty" | "File" | "Filters" | "Form" | "Grid" | "Icon" | "InPageNavigation" | "Input" | "MediaQuery" | "Menu" | "Modal" | "Notification" | "PageHeader" | "Pagination" | "Portal" | "Portlet" | "Progress" | "Radio" | "Rate" | "Result" | "Select" | "SelectButton" | "SideBar" | "Slider" | "Spinner" | "Statistic" | "Steps" | "Switch" | "Table" | "Tabs" | "Tag" | "TagInput" | "TimePicker" | "Timeline" | "Tooltip" | "Typography" | "Widget";
+    [k: string]: "Alert" | "Badge" | "Button" | "Carousel" | "Card" | "Chip" | "Collapse" | "Checkbox" | "DatePicker" | "Divider" | "Empty" | "Icon" | "Progress" | "Slider" | "Spinner" | "Radio" | "Select" | "Switch" | "Tabs" | "Tag" | "TimePicker" | "Typography" | "Rate" | "Portal" | "Banner" | "Breadcrumb" | "Chart" | "Comment" | "ContextPanel" | "Dropdown" | "File" | "Filters" | "Form" | "Grid" | "InPageNavigation" | "Input" | "MediaQuery" | "Menu" | "Modal" | "Notification" | "PageHeader" | "Pagination" | "Portlet" | "Result" | "SelectButton" | "SideBar" | "Statistic" | "Steps" | "Table" | "TagInput" | "Timeline" | "Tooltip" | "Widget";
 }, commentList: {
     classNameCmts: number[];
     styleCmts: {

package/lib/src/reports/reportStyledComponents.d.ts

@@ -1,6 +1,6 @@
 import * as recast from 'recast';
 import type { ComponentName } from './types';
 declare const reportStyledComponents: (ast: recast.types.ASTNode, componentList: {
-    [k: string]: "Alert" | "Badge" | "Banner" | "Breadcrumb" | "Button" | "Card" | "Carousel" | "Chart" | "Checkbox" | "Chip" | "Collapse" | "Comment" | "ContextPanel" | "DatePicker" | "Divider" | "Dropdown" | "Empty" | "File" | "Filters" | "Form" | "Grid" | "Icon" | "InPageNavigation" | "Input" | "MediaQuery" | "Menu" | "Modal" | "Notification" | "PageHeader" | "Pagination" | "Portal" | "Portlet" | "Progress" | "Radio" | "Rate" | "Result" | "Select" | "SelectButton" | "SideBar" | "Slider" | "Spinner" | "Statistic" | "Steps" | "Switch" | "Table" | "Tabs" | "Tag" | "TagInput" | "TimePicker" | "Timeline" | "Tooltip" | "Typography" | "Widget";
+    [k: string]: "Alert" | "Badge" | "Button" | "Carousel" | "Card" | "Chip" | "Collapse" | "Checkbox" | "DatePicker" | "Divider" | "Empty" | "Icon" | "Progress" | "Slider" | "Spinner" | "Radio" | "Select" | "Switch" | "Tabs" | "Tag" | "TimePicker" | "Typography" | "Rate" | "Portal" | "Banner" | "Breadcrumb" | "Chart" | "Comment" | "ContextPanel" | "Dropdown" | "File" | "Filters" | "Form" | "Grid" | "InPageNavigation" | "Input" | "MediaQuery" | "Menu" | "Modal" | "Notification" | "PageHeader" | "Pagination" | "Portlet" | "Result" | "SelectButton" | "SideBar" | "Statistic" | "Steps" | "Table" | "TagInput" | "Timeline" | "Tooltip" | "Widget";
 }, styledAliasName: string) => number[];
 export default reportStyledComponents;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/snowflake-guard",
-  "version": "1.2.4",
+  "version": "1.3.0",
   "description": "A hero-design bot detecting snowflake usage",
   "author": "Hau Dao",
   "license": "ISC",