@hero-design/snowflake-guard 1.0.7-alpha0

package/src/__mocks__/sourceSample.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Button, Empty, Card, Badge } from '@hero-design/react';
+import styled from 'styled-components';
+
+// Snowflakes using styled-components
+const StyledButton = styled(Button)`
+  padding: 10px;
+`;
+
+const StyledLinkButton = styled(Button.Link)`
+  color: red;
+`;
+
+const { Link } = Button;
+const StyledLink = styled(Link)`
+  color: red;
+`;
+
+const customBtnStyles = {
+  padding: 30,
+};
+
+const badgeStyles = {
+  pt: 10,
+};
+
+const styles = {
+  btn: {
+    padding: 30,
+  },
+  badge: {
+    pt: 10,
+  },
+};
+
+const Sample = () => {
+  <>
+    <StyledButton />
+    <StyledLinkButton />
+    <StyledLink />
+    {/* Snowflakes using classname */}
+    <Button className="custom-class" />
+    <Button.Link className="custom-class" />
+    <Link className="custom-class" />
+    {/* Snowflakes using style prop */}
+    <Button style={{ width: 200 }} /> {/* acceptable */}
+    <Empty style={{ width: 200 }} />
+    <Card style={{ width: 200 }} /> {/* acceptable */}
+    <Card.Header style={{ width: 200 }} />
+    <Button style={customBtnStyles} />
+    <Button style={{ ...customBtnStyles }} />
+    <Button style={styles.btn} />
+    <Button style={{ ...styles.btn }} />
+    <Link style={{ padding: 20 }} />
+    <Link style={{ padding: 20 }} /> {/* @snowflake-guard/snowflake-approved-by-andromeda */}
+    {/* Snowflakes using sx prop */}
+    <Badge sx={{ mt: 10 }} /> {/* acceptable */}
+    <Badge.Count sx={{ mt: 10 }} />
+    <Badge sx={badgeStyles} />
+    <Badge sx={{ ...badgeStyles }} />
+    <Badge sx={styles.badge} />
+    <Badge sx={{ ...styles.badge }} />
+    <Link sx={{ padding: 20 }} />
+  </>;
+};
+
+export default Sample;

package/src/__tests__/parseSource.spec.ts

@@ -0,0 +1,15 @@
+import * as fs from 'fs';
+import parseSource from '../parseSource';
+
+describe('parseSource', () => {
+  it('reports correct snowflakes', () => {
+    const source = fs.readFileSync('./src/__mocks__/sourceSample.tsx', 'utf-8');
+
+    expect(parseSource(source)).toEqual({
+      classNameLocs: [44, 42, 43],
+      styleLocs: [54, 47, 49, 50, 51, 52, 53],
+      sxLocs: [63, 58, 59, 60, 61, 62],
+      styledComponentLocs: [6, 10, 15],
+    });
+  });
+});

package/src/index.ts

@@ -0,0 +1,201 @@
+import { Probot, ProbotOctokit } from 'probot';
+import parseSource from './parseSource';
+
+type DiffLocs = [number, number][];
+
+type Comment = {
+  path: string;
+  body: string;
+  line: number;
+};
+
+const TSX_REGEX = /\.tsx$/;
+const TEST_REGEX = /__tests__/;
+const DIFF_LOCS_REGEX = /@@(.*)@@/g;
+
+const SNOWFLAKE_COMMENTS = {
+  style:
+    'Snowflake detected! A component is customized using inline styles. Make sure to not use [prohibited CSS properties](https://docs.google.com/spreadsheets/d/1Dj8vqLdFaf-CSaSVoYqyYZIkGqF6OoyP7K4G1_9L62U/edit?usp=sharing).',
+  sx: 'Snowflake detected! A component is customized via sx prop. Make sure to not use [prohibited CSS properties](https://docs.google.com/spreadsheets/d/1Dj8vqLdFaf-CSaSVoYqyYZIkGqF6OoyP7K4G1_9L62U/edit?usp=sharing).',
+  'styled-component':
+    'Please do not use styled-component to customize this component, use sx prop or inline style instead.',
+  className:
+    'Please make sure that this className is not used as a CSS classname for component customization purposes, use sx prop or inline style instead.',
+};
+
+const getDiffLocs = (diffStrs: string[]) => {
+  const locs: DiffLocs = [];
+  diffStrs.forEach((diffStr) => {
+    const [startLocStr, numberOfLinesStr] = diffStr
+      .split('+')[1]
+      .split(' ')[0]
+      .split(',');
+
+    const startLoc = Number(startLocStr);
+    const numberOfLines = Number(numberOfLinesStr);
+    locs.push([startLoc, numberOfLines]);
+  });
+
+  return locs;
+};
+
+const checkIfDetectedSnowflakesInDiff = (
+  diffLocs: DiffLocs,
+  locToComment: number
+) => {
+  const locIdx = diffLocs.findIndex(([start, numberOfLines]) => {
+    return locToComment >= start && locToComment < start + numberOfLines;
+  });
+
+  return locIdx !== -1;
+};
+
+export = (app: Probot) => {
+  app.on(
+    ['pull_request.opened', 'pull_request.synchronize'],
+    async (context) => {
+      // Get PR info
+      const prNumber = context.payload.number;
+      const repoInfo = {
+        repo: context.payload.repository.name,
+        owner: context.payload.repository.owner.login,
+      };
+      const prBranch = context.payload.pull_request.head.ref;
+
+      // List all changed files
+      const prFiles = await context.octokit.pulls.listFiles({
+        ...repoInfo,
+        pull_number: prNumber,
+      });
+      const tsxFiles = prFiles.data.filter(
+        (file) =>
+          TSX_REGEX.test(file.filename) &&
+          !TEST_REGEX.test(file.filename) &&
+          file.status !== 'removed'
+      );
+
+      // Saving file patches to get diff locations
+      const prFilePatches = tsxFiles.reduce((acc, file) => {
+        acc[file.filename] = file.patch || '';
+        return acc;
+      }, {} as { [key: string]: string });
+
+      // Get file contents
+      const prFileContentPromises = tsxFiles.map((file) =>
+        context.octokit.repos.getContent({
+          ...repoInfo,
+          path: file.filename,
+          ref: prBranch,
+        })
+      );
+      const prFileContents = await Promise.all(prFileContentPromises);
+
+      const styleComments: Comment[] = [];
+      const sxComments: Comment[] = [];
+      const styledComponentComments: Comment[] = [];
+      const classNameComments: Comment[] = [];
+
+      prFileContents.forEach(async (file) => {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        const filePath = file.data.path;
+        const diffLocs = getDiffLocs(
+          prFilePatches[filePath].match(DIFF_LOCS_REGEX) || []
+        );
+
+        const stringContent = Buffer.from(
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          file.data.content,
+          'base64'
+        ).toString();
+
+        // Parse file content to check for snowflakes
+        const snowflakeReport = parseSource(stringContent);
+
+        snowflakeReport.styleLocs.forEach((loc) => {
+          if (checkIfDetectedSnowflakesInDiff(diffLocs, loc)) {
+            styleComments.push({
+              path: filePath,
+              body: SNOWFLAKE_COMMENTS['style'],
+              line: loc,
+            });
+          }
+        });
+
+        snowflakeReport.sxLocs.forEach((loc) => {
+          if (checkIfDetectedSnowflakesInDiff(diffLocs, loc)) {
+            sxComments.push({
+              path: filePath,
+              body: SNOWFLAKE_COMMENTS['sx'],
+              line: loc,
+            });
+          }
+        });
+
+        snowflakeReport.styledComponentLocs.forEach((loc) => {
+          if (checkIfDetectedSnowflakesInDiff(diffLocs, loc)) {
+            styledComponentComments.push({
+              path: filePath,
+              body: SNOWFLAKE_COMMENTS['styled-component'],
+              line: loc,
+            });
+          }
+        });
+
+        snowflakeReport.classNameLocs.forEach((loc) => {
+          if (checkIfDetectedSnowflakesInDiff(diffLocs, loc)) {
+            classNameComments.push({
+              path: filePath,
+              body: SNOWFLAKE_COMMENTS['className'],
+              line: loc,
+            });
+          }
+        });
+      });
+
+      const personalOctokit = new ProbotOctokit({
+        auth: { token: process.env.EH_BOT_GITHUB_TOKEN },
+      });
+
+      // No snowflakes detected or only potential snowflakes using classname
+      if (
+        styleComments.length === 0 &&
+        sxComments.length === 0 &&
+        styledComponentComments.length === 0
+      ) {
+        const reviewBody =
+          classNameComments.length > 0
+            ? {
+                body: '[WARNING] Potential snowflakes detected in this PR using classnames. Please review the following comments.',
+                comments: classNameComments,
+              }
+            : {
+                body: 'No snowflakes detected in this PR.',
+              };
+
+        return personalOctokit.pulls.createReview({
+          ...repoInfo,
+          pull_number: prNumber,
+          commit_id: context.payload.pull_request.head.sha,
+          event: 'APPROVE',
+          ...reviewBody,
+        });
+      }
+
+      return personalOctokit.pulls.createReview({
+        ...repoInfo,
+        pull_number: prNumber,
+        commit_id: context.payload.pull_request.head.sha,
+        event: 'REQUEST_CHANGES',
+        body: 'Snowflake Guard Bot has detected some snowflakes in this PR. Please review the following comments.',
+        comments: [
+          ...styleComments,
+          ...sxComments,
+          ...styledComponentComments,
+          ...classNameComments,
+        ],
+      });
+    }
+  );
+};

package/src/parseSource.ts

@@ -0,0 +1,97 @@
+import * as recast from 'recast';
+import * as tsParser from './parsers/typescript';
+import reportCustomProperties from './reports/reportCustomStyleProperties';
+import reportStyledComponents from './reports/reportStyledComponents';
+import { HD_COMPONENTS, APPROVED_COMMENT } from './reports/constants';
+import type { ComponentName } from './reports/types';
+
+const parseSource = (source: string) => {
+  let hasHeroDesignImport = false;
+  let hasStyledComponentsImport = false;
+
+  const componentList: { [k: string]: ComponentName } = {};
+  let styledAliasName = 'styled';
+
+  let styledComponentLocs: number[] = [];
+  let classNameLocs: number[] = [];
+  let styleLocs: number[] = [];
+  let sxLocs: number[] = [];
+  const approvedCmtLocs: number[] = [];
+
+  const ast = recast.parse(source, { parser: tsParser });
+
+  recast.visit(ast, {
+    visitImportDeclaration(path) {
+      this.traverse(path);
+
+      const importedFrom = path.value.source.value as string;
+
+      // Check if file imports components from '@hero-design/react'
+      if (importedFrom === '@hero-design/react') {
+        recast.visit(path.node, {
+          visitImportSpecifier(importPath) {
+            this.traverse(importPath);
+
+            if (HD_COMPONENTS.includes(importPath.value.imported.name)) {
+              componentList[importPath.value.local.name] =
+                importPath.value.imported.name;
+              hasHeroDesignImport = true;
+            }
+          },
+        });
+      }
+
+      // Check if file imports from 'styled-components'
+      if (importedFrom === 'styled-components') {
+        recast.visit(path.node, {
+          visitImportDefaultSpecifier(importPath) {
+            this.traverse(importPath);
+
+            styledAliasName = importPath.value.local.name;
+            hasStyledComponentsImport = true;
+          },
+        });
+      }
+    },
+
+    visitComment(path) {
+      this.traverse(path);
+
+      const comment = path.value.value as string;
+      if (comment.toLowerCase().includes(APPROVED_COMMENT.toLowerCase())) {
+        approvedCmtLocs.push(path.value.loc.start.line);
+      }
+    },
+  });
+
+  const isNotApprovedSnowflakes = (loc: number) =>
+    !approvedCmtLocs.includes(loc);
+
+  if (hasHeroDesignImport) {
+    // Case 1: Using className to customise components
+    // Case 2: Using style object to customise components
+    // Case 3: Using sx object to customise components
+    const customPropLocs = reportCustomProperties(ast, componentList);
+    classNameLocs = customPropLocs.className.filter(isNotApprovedSnowflakes);
+    styleLocs = customPropLocs.style.filter(isNotApprovedSnowflakes);
+    sxLocs = customPropLocs.sx.filter(isNotApprovedSnowflakes);
+
+    // Case 4: Using styled-components to customise components
+    if (hasStyledComponentsImport) {
+      styledComponentLocs = reportStyledComponents(
+        ast,
+        componentList,
+        styledAliasName
+      ).filter(isNotApprovedSnowflakes);
+    }
+  }
+
+  return {
+    classNameLocs,
+    styleLocs,
+    sxLocs,
+    styledComponentLocs,
+  };
+};
+
+export default parseSource;

package/src/parsers/typescript.ts

@@ -0,0 +1,8 @@
+import * as babelParser from '@babel/parser';
+import getBabelOptions, { Overrides } from 'recast/parsers/_babel_options';
+
+export const parse = (source: string, options?: Overrides) => {
+  const babelOptions = getBabelOptions(options);
+  babelOptions.plugins.push('jsx', 'typescript');
+  return babelParser.parse(source, babelOptions);
+};