@hero-design/snowflake-guard 1.4.7 → 1.4.8

package/README.md

@@ -1,16 +1,27 @@
 # @hero-design/snowflake-guard
 
-> A GitHub App built with [Probot](https://github.com/probot/probot) that analyzes PR changes and reports snowflake usage of Hero Design components.
+## Overview
 
-## Setup
+A GitHub App built with [Probot](https://github.com/probot/probot) that analyzes PR changes and reports snowflake usage of Hero Design components. The bot detects when components are customized using inline styles, styled-components, sx props, or className attributes that may violate design system guidelines.
 
-1. Copy `.env.example` to `.env` and asks Andromeda team for variable details.
+## Prerequisites
+
+- Node.js >= 10.13.0
+- Yarn package manager
+- Access to [internal-tool-integrations service](https://github.com/Thinkei/internal-tool-integrations) for storing reports
+- GitHub App installation permissions for the repository
+
+## Development
+
+### Setup
+
+1. Copy `.env.example` to `.env` and ask Andromeda team for variable details.
 
 ```sh
 cp .env.example .env
 ```
 
-For React Native projects, include your repo name in the `MOBILE_REPO_NAMES` env.
+For React Native projects, include your repo name in the `MOBILE_REPO_NAMES` env variable.
 
 2. Set up [internal-tool-integrations service](https://github.com/Thinkei/internal-tool-integrations) for the bot to store report.
 
@@ -32,8 +43,60 @@ yarn install
 # Run the bot
 yarn start
 ```
+
 6. Open or update a pull request to trigger webhook events.
 
-## Note
+### Scripts
+
+- `yarn build` - Compile TypeScript to JavaScript
+- `yarn start` - Build and run the bot with Probot
+- `yarn test` - Run tests with Jest
+- `yarn lint` - Run ESLint
+- `yarn type-check` - Type check without emitting files
+- `yarn deploy` - Deploy to Netlify
+- `yarn publish:npm` - Publish package to npm
+
+## Project Structure
+
+```
+apps/snowflake-guard/
+├── src/
+│   ├── index.ts              # Main entry point, Probot app setup
+│   ├── parseSource.ts        # Web source code parser
+│   ├── parseMobileSource.ts  # Mobile source code parser
+│   ├── parsers/              # TypeScript and Flow parsers
+│   ├── reports/              # Snowflake detection logic
+│   │   ├── constants.ts      # Report constants and configurations
+│   │   ├── mobile/           # Mobile-specific report generators
+│   │   └── ...               # Web report generators
+│   ├── graphql/              # GraphQL queries for report storage
+│   └── utils/                # Utility functions
+├── netlify/                  # Netlify serverless functions
+├── lib/                      # Compiled JavaScript output
+└── package.json
+```
+
+## Deployment
+
+The app is deployed to Netlify as a serverless function. Deployment is automated via GitHub Actions when a new version is published.
+
+To deploy manually:
+
+```sh
+yarn deploy
+```
+
+This requires the `NETLIFY_AUTH_TOKEN` environment variable to be set.
+
+## Contributing
 
 This bot does not support hot-reload yet, please restart the app once you make any changes to the code.
+
+To contribute:
+
+1. Make changes to the source code in `src/`
+2. Test locally with `yarn start`
+3. Ensure tests pass with `yarn test`
+4. Submit a pull request
+
+Note: The bot analyzes PR diffs and comments on potential snowflake usage violations. Approved patterns can be marked with special comments like `@snowflake-guard/approved-inline-style` or `@snowflake-guard/approved-classname`.

package/lib/src/graphql/types.d.ts

@@ -1,4 +1,4 @@
-export type Report = {
+type Report = {
     id: string;
     repoName: string;
     prNumber: number;
@@ -15,3 +15,4 @@ export type FetchReportResponse = {
         fetchHdSnowflakeGuardReport: Pick<Report, 'id' | 'originalCount' | 'latestCount' | 'approvedCount'>;
     };
 };
+export {};

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

@@ -1,23 +1,6 @@
 import * as recast from 'recast';
-import type { InlineStyleProps, ViolatingAttribute } from './reportInlineStyle';
+import type { InlineStyleProps } from './reportInlineStyle';
 import type { CompoundMobileComponentName, MobileComponentName } from './types';
-export declare const getNonApprovedInlineLocs: (reportedLocs: {
-    style?: number;
-    barStyle?: number;
-    containerStyle?: number;
-    textStyle?: number;
-}, violatingAttributes: ViolatingAttribute[], approvedCmts: {
-    loc: number;
-    comment: string;
-}[], elementLoc: number) => {
-    reportedLocs: {
-        style?: number;
-        barStyle?: number;
-        containerStyle?: number;
-        textStyle?: number;
-    };
-    noneApprovedAttributes: ViolatingAttribute[];
-};
 declare const reportCustomProperties: (ast: recast.types.ASTNode, componentList: {
     [k: string]: MobileComponentName;
 }, commentList: {

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

@@ -36,7 +36,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getNonApprovedInlineLocs = void 0;
 const recast = __importStar(require("recast"));
 const reportInlineStyle_1 = __importDefault(require("./reportInlineStyle"));
 const mapViolatingAttributesAndAdditionalProps = (violatingAttributes) => {
@@ -73,7 +72,6 @@ const getNonApprovedInlineLocs = (reportedLocs, violatingAttributes, approvedCmt
     }
     return { reportedLocs, noneApprovedAttributes: violatingAttributes };
 };
-exports.getNonApprovedInlineLocs = getNonApprovedInlineLocs;
 const reportCustomProperties = (ast, componentList, commentList) => {
     const report = {
         style: [],
@@ -92,7 +90,7 @@ const reportCustomProperties = (ast, componentList, commentList) => {
                 const attributes = path.value
                     .attributes;
                 const { locs: styleObjectLocs, violatingAttributes } = (0, reportInlineStyle_1.default)(ast, attributes, componentList[path.value.name.name]);
-                const { reportedLocs, noneApprovedAttributes } = (0, exports.getNonApprovedInlineLocs)(styleObjectLocs, violatingAttributes, commentList.styleCmts, path.value.loc.start.line);
+                const { reportedLocs, noneApprovedAttributes } = getNonApprovedInlineLocs(styleObjectLocs, violatingAttributes, commentList.styleCmts, path.value.loc.start.line);
                 if (reportedLocs.style) {
                     report.style.push(reportedLocs.style);
                 }
@@ -120,7 +118,7 @@ const reportCustomProperties = (ast, componentList, commentList) => {
                 const attributes = path.value
                     .attributes;
                 const { locs: styleObjectLocs, violatingAttributes } = (0, reportInlineStyle_1.default)(ast, attributes, compoundComponentName);
-                const { reportedLocs, noneApprovedAttributes } = (0, exports.getNonApprovedInlineLocs)(styleObjectLocs, violatingAttributes, commentList.styleCmts, path.value.loc.start.line);
+                const { reportedLocs, noneApprovedAttributes } = getNonApprovedInlineLocs(styleObjectLocs, violatingAttributes, commentList.styleCmts, path.value.loc.start.line);
                 if (reportedLocs.style) {
                     report.style.push(reportedLocs.style);
                 }
@@ -166,7 +164,7 @@ const reportCustomProperties = (ast, componentList, commentList) => {
                                 ].join('.');
                                 const { attributes } = openPath.value;
                                 const { locs: styleObjectLocs, violatingAttributes } = (0, reportInlineStyle_1.default)(ast, attributes, compoundComponentName);
-                                const { reportedLocs, noneApprovedAttributes } = (0, exports.getNonApprovedInlineLocs)(styleObjectLocs, violatingAttributes, commentList.styleCmts, openPath.value.loc.start.line);
+                                const { reportedLocs, noneApprovedAttributes } = getNonApprovedInlineLocs(styleObjectLocs, violatingAttributes, commentList.styleCmts, openPath.value.loc.start.line);
                                 if (reportedLocs.style) {
                                     report.style.push(reportedLocs.style);
                                 }

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

@@ -1,7 +1,6 @@
 import * as recast from 'recast';
 import type { CompoundMobileComponentName } from './types';
 export type InlineStyleProps = 'style' | 'barStyle' | 'containerStyle' | 'textStyle';
-export declare const INLINE_STYLE_PROPERTIES: string[];
 export type ViolatingAttribute = {
     attributeName: string;
     attributeValue: string | null;

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

@@ -33,7 +33,6 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 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 = {
@@ -42,7 +41,7 @@ const BLACKLIST_PROPERTIES = {
     containerStyle: constants_1.CONTAINER_STYLE_RULESET_MAP,
     textStyle: constants_1.TEXT_STYLE_RULESET_MAP,
 };
-exports.INLINE_STYLE_PROPERTIES = [
+const INLINE_STYLE_PROPERTIES = [
     'style',
     'barStyle',
     'containerStyle',
@@ -76,7 +75,7 @@ const reportInlineStyle = (ast, attributes, componentName) => {
         if (((_a = attr.value) === null || _a === void 0 ? void 0 : _a.type) !== 'JSXExpressionContainer') {
             return;
         }
-        if (exports.INLINE_STYLE_PROPERTIES.includes(attr.name.name)) {
+        if (INLINE_STYLE_PROPERTIES.includes(attr.name.name)) {
             styleObjName = attr.name.name;
             const PROHIBITED_PROPERTIES = BLACKLIST_PROPERTIES[styleObjName][componentName] || [];
             const { expression } = attr.value;

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

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

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

@@ -33,15 +33,10 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.parseFlow = exports.parseTypeScript = void 0;
+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/reportInlineStyle.d.ts

@@ -1,8 +1,6 @@
 import * as recast from 'recast';
 import type { CompoundComponentName } from './types';
 export type InlineStyleProps = 'style' | 'sx';
-export declare const INLINE_STYLE_PROPERTIES: string[];
-export declare const ADDITIONAL_PROPERTIES: string[];
 export type ViolatingAttribute = {
     attributeName: string;
     attributeValue: string | null;

package/lib/src/reports/reportInlineStyle.js

@@ -33,15 +33,14 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ADDITIONAL_PROPERTIES = exports.INLINE_STYLE_PROPERTIES = void 0;
 const recast = __importStar(require("recast"));
 const constants_1 = require("./constants");
 const BLACKLIST_PROPERTIES = {
     style: constants_1.RULESET_MAP,
     sx: constants_1.SX_RULESET_MAP,
 };
-exports.INLINE_STYLE_PROPERTIES = ['style', 'sx'];
-exports.ADDITIONAL_PROPERTIES = ['variant']; // Add any additional props you want to track
+const INLINE_STYLE_PROPERTIES = ['style', 'sx'];
+const ADDITIONAL_PROPERTIES = ['variant']; // Add any additional props you want to track
 const addViolatingAttribute = (prop, styleObjName, componentName, loc, violatingAttributes) => {
     if (prop.key.type !== 'Identifier') {
         return;
@@ -82,7 +81,7 @@ const reportInlineStyle = (ast, attributes, componentName) => {
         if (typeof attr.name.name !== 'string') {
             return;
         }
-        if (exports.ADDITIONAL_PROPERTIES.includes(attr.name.name)) {
+        if (ADDITIONAL_PROPERTIES.includes(attr.name.name)) {
             // Handle expression container like `style={{ ... }}`
             additionalProps.push({
                 propName: attr.name.name,
@@ -92,7 +91,7 @@ const reportInlineStyle = (ast, attributes, componentName) => {
         if (((_a = attr.value) === null || _a === void 0 ? void 0 : _a.type) !== 'JSXExpressionContainer') {
             return;
         }
-        if (exports.INLINE_STYLE_PROPERTIES.includes(attr.name.name)) {
+        if (INLINE_STYLE_PROPERTIES.includes(attr.name.name)) {
             styleObjName = attr.name.name;
             const { expression } = attr.value;
             if (expression.type === 'ObjectExpression') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/snowflake-guard",
-  "version": "1.4.7",
+  "version": "1.4.8",
   "description": "A hero-design bot detecting snowflake usage",
   "author": "Hau Dao",
   "license": "ISC",
@@ -20,6 +20,7 @@
     "start": "yarn build && probot run ./lib/src/index.js",
     "type-check": "tsc --noEmit",
     "test": "jest --passWithNoTests",
+    "test:ci": "jest --passWithNoTests",
     "lint": "eslint src --quiet",
     "deploy": "netlify deploy --site snowflake-guard.netlify.app --prod --auth $NETLIFY_AUTH_TOKEN",
     "publish:npm": "yarn publish --access public"
@@ -35,24 +36,13 @@
     "@eslint/eslintrc": "^3.1.0",
     "@types/jest": "^29.0.0",
     "@types/node": "^20.14.8",
-    "@typescript-eslint/eslint-plugin": "^5.12.1",
-    "@typescript-eslint/parser": "^5.12.1",
-    "config-tsconfig": "8.42.5",
     "eslint": "^8.56.0",
-    "eslint-config-airbnb": "^19.0.4",
     "eslint-config-hd": "8.42.5",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-import-resolver-typescript": "^3.5.2",
-    "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^4.3.0",
     "jest": "^29.0.0",
     "nock": "^13.0.5",
-    "prettier": "^2.5.1",
     "prettier-config-hd": "8.42.4",
     "smee-client": "^1.2.2",
+    "ts-config-hd": "8.42.5",
     "ts-jest": "^29.0.0",
     "typescript": "^5.7.3"
   },