@hero-design/snowflake-guard 1.0.11 → 1.0.12

package/src/reports/reportClassName.ts

@@ -1,20 +0,0 @@
-import { types } from 'recast';
-
-const reportClassName = (attributes: types.namedTypes.JSXAttribute[]) => {
-  const locs: number[] = [];
-
-  attributes.forEach((attr) => {
-    if (
-      attr.type === 'JSXAttribute' &&
-      attr.name.type === 'JSXIdentifier' &&
-      attr.name.name === 'className' &&
-      attr.loc
-    ) {
-      locs.push(attr.loc.start.line);
-    }
-  });
-
-  return locs;
-};
-
-export default reportClassName;

package/src/reports/reportCustomStyleProperties.ts

@@ -1,125 +0,0 @@
-import * as recast from 'recast';
-import reportClassName from './reportClassName';
-import reportInlineStyle from './reportInlineStyle';
-import type { ComponentName, CompoundComponentName } from './types';
-
-const reportCustomProperties = (
-  ast: recast.types.ASTNode,
-  componentList: { [k: string]: ComponentName }
-) => {
-  const locs: {
-    className: number[];
-    style: number[];
-    sx: number[];
-  } = {
-    className: [],
-    style: [],
-    sx: [],
-  };
-  const localComponentList = Object.keys(componentList);
-
-  recast.visit(ast, {
-    visitJSXOpeningElement(path) {
-      this.traverse(path);
-
-      // Case 1: Custom default component, e.g. <Card />
-      if (
-        path.value.name.type === 'JSXIdentifier' &&
-        localComponentList.includes(path.value.name.name)
-      ) {
-        const attributes = path.value
-          .attributes as recast.types.namedTypes.JSXAttribute[];
-        const styleObjectLocs = reportInlineStyle(
-          ast,
-          attributes,
-          componentList[path.value.name.name] as CompoundComponentName
-        );
-
-        locs.className = [...locs.className, ...reportClassName(attributes)];
-        locs.style = [...locs.style, ...styleObjectLocs.style];
-        locs.sx = [...locs.sx, ...styleObjectLocs.sx];
-      }
-
-      // Case 2: Custom compound component, e.g. <Card.Header />
-      if (
-        path.value.name.type === 'JSXMemberExpression' &&
-        localComponentList.includes(path.value.name.object.name)
-      ) {
-        const compoundComponentName = [
-          componentList[path.value.name.object.name],
-          path.value.name.property.name,
-        ].join('.') as CompoundComponentName;
-        const attributes = path.value
-          .attributes as recast.types.namedTypes.JSXAttribute[];
-        const styleObjectLocs = reportInlineStyle(
-          ast,
-          attributes,
-          compoundComponentName
-        );
-
-        locs.className = [...locs.className, ...reportClassName(attributes)];
-        locs.style = [...locs.style, ...styleObjectLocs.style];
-        locs.sx = [...locs.sx, ...styleObjectLocs.sx];
-      }
-    },
-
-    // Case 3: Custom compound component with spead operator. e.g. const { Header } = Card, then <Header />
-    visitVariableDeclaration(path) {
-      this.traverse(path);
-
-      const declaration = path.value
-        .declarations[0] as recast.types.namedTypes.VariableDeclarator;
-      if (
-        declaration.init &&
-        declaration.init.type === 'Identifier' &&
-        localComponentList.includes(declaration.init.name)
-      ) {
-        const componentName = declaration.init.name;
-        const { id } = declaration;
-
-        if (id.type === 'ObjectPattern') {
-          const compoundComponentNames = id.properties
-            .map((prop) =>
-              prop.type === 'ObjectProperty' && prop.key.type === 'Identifier'
-                ? prop.key.name
-                : null
-            )
-            .filter((name): name is string => name !== null);
-
-          recast.visit(ast, {
-            visitJSXOpeningElement(openPath) {
-              this.traverse(openPath);
-
-              if (
-                openPath.value.name.type === 'JSXIdentifier' &&
-                compoundComponentNames.includes(openPath.value.name.name)
-              ) {
-                const compoundComponentName = [
-                  componentList[componentName],
-                  openPath.value.name.name,
-                ].join('.') as CompoundComponentName;
-                const { attributes } = openPath.value;
-                const styleObjectLocs = reportInlineStyle(
-                  ast,
-                  attributes,
-                  compoundComponentName
-                );
-
-                locs.className = [
-                  ...locs.className,
-                  ...reportClassName(attributes),
-                ];
-                locs.style = [...locs.style, ...styleObjectLocs.style];
-                locs.sx = [...locs.sx, ...styleObjectLocs.sx];
-              }
-            },
-          });
-        }
-      }
-    },
-  });
-
-  return locs;
-};
-
-export default reportCustomProperties;

package/src/reports/reportInlineStyle.ts

@@ -1,221 +0,0 @@
-import * as recast from 'recast';
-import { RULESET_MAP, SX_RULESET_MAP } from './constants';
-import type { CompoundComponentName } from './types';
-
-type InlineStyleProps = 'style' | 'sx';
-
-const BLACKLIST_PROPERTIES = {
-  style: RULESET_MAP,
-  sx: SX_RULESET_MAP,
-};
-
-const INLINE_STYLE_PROPERTIES = ['style', 'sx'];
-
-const reportInlineStyle = (
-  ast: recast.types.ASTNode,
-  attributes: recast.types.namedTypes.JSXAttribute[],
-  componentName: CompoundComponentName
-) => {
-  const locs: { style: number[]; sx: number[] } = {
-    style: [],
-    sx: [],
-  };
-
-  let hasCustomStyle = false;
-  let styleObjName: InlineStyleProps;
-
-  attributes.forEach((attr) => {
-    if (
-      attr.type === 'JSXAttribute' &&
-      typeof attr.name.name === 'string' &&
-      INLINE_STYLE_PROPERTIES.includes(attr.name.name) &&
-      attr.value?.type === 'JSXExpressionContainer'
-    ) {
-      styleObjName = attr.name.name as InlineStyleProps;
-
-      const { expression } = attr.value;
-
-      if (expression.type === 'ObjectExpression') {
-        expression.properties.forEach((prop) => {
-          // Case 1: Use direct object, e.g. <Card style={{ color: 'red' }} />
-          if (
-            prop.type === 'ObjectProperty' &&
-            prop.key.type === 'Identifier' &&
-            BLACKLIST_PROPERTIES[styleObjName][componentName].includes(
-              prop.key.name
-            )
-          ) {
-            hasCustomStyle = true;
-          }
-
-          // Case 2: Use spread operator, e.g. <Card style={{ ...customStyle }} />
-          if (
-            prop.type === 'SpreadElement' &&
-            prop.argument.type === 'Identifier'
-          ) {
-            const variableName = prop.argument.name;
-
-            recast.visit(ast, {
-              visitVariableDeclaration(path) {
-                this.traverse(path);
-
-                const declaration = path.value
-                  .declarations[0] as recast.types.namedTypes.VariableDeclarator;
-
-                if (
-                  declaration.id.type === 'Identifier' &&
-                  declaration.id.name === variableName &&
-                  declaration.init?.type === 'ObjectExpression'
-                ) {
-                  declaration.init.properties.forEach((deProp) => {
-                    if (
-                      deProp.type === 'ObjectProperty' &&
-                      deProp.key.type === 'Identifier' &&
-                      BLACKLIST_PROPERTIES[styleObjName][
-                        componentName
-                      ].includes(deProp.key.name)
-                    ) {
-                      hasCustomStyle = true;
-                    }
-                  });
-                }
-              },
-            });
-          }
-
-          // Case 3: Use spread operator with variable's property, e.g. <Card style={{ ...customStyle.tileCard }} />
-          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) {
-                this.traverse(path);
-
-                const declaration = path.value
-                  .declarations[0] as recast.types.namedTypes.VariableDeclarator;
-
-                if (
-                  declaration.id.type === 'Identifier' &&
-                  declaration.id.name === variableName &&
-                  declaration.init?.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) => {
-                        if (
-                          p.type === 'ObjectProperty' &&
-                          p.key.type === 'Identifier' &&
-                          BLACKLIST_PROPERTIES[styleObjName][
-                            componentName
-                          ].includes(p.key.name)
-                        ) {
-                          hasCustomStyle = true;
-                        }
-                      });
-                    }
-                  });
-                }
-              },
-            });
-          }
-        });
-      }
-
-      // Case 4: Use variable, e.g. <Card style={customStyle} />
-      if (expression.type === 'Identifier') {
-        const variableName = expression.name;
-        recast.visit(ast, {
-          visitVariableDeclaration(path) {
-            this.traverse(path);
-
-            const declaration = path.value
-              .declarations[0] as recast.types.namedTypes.VariableDeclarator;
-
-            if (
-              declaration.id.type === 'Identifier' &&
-              declaration.id.name === variableName &&
-              declaration.init?.type === 'ObjectExpression'
-            ) {
-              declaration.init.properties.forEach((prop) => {
-                if (
-                  prop.type === 'ObjectProperty' &&
-                  prop.key.type === 'Identifier' &&
-                  BLACKLIST_PROPERTIES[styleObjName][componentName].includes(
-                    prop.key.name
-                  )
-                ) {
-                  hasCustomStyle = true;
-                }
-              });
-            }
-          },
-        });
-      }
-
-      // Case 5: Use variable's property, e.g. <Card style={customStyle.tileCard} />
-      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) {
-            this.traverse(path);
-
-            const declaration = path.value
-              .declarations[0] as recast.types.namedTypes.VariableDeclarator;
-
-            if (
-              declaration.id.type === 'Identifier' &&
-              declaration.id.name === objectName &&
-              declaration.init?.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) => {
-                    if (
-                      p.type === 'ObjectProperty' &&
-                      p.key.type === 'Identifier' &&
-                      BLACKLIST_PROPERTIES[styleObjName][
-                        componentName
-                      ].includes(p.key.name)
-                    ) {
-                      hasCustomStyle = true;
-                    }
-                  });
-                }
-              });
-            }
-          },
-        });
-      }
-
-      if (hasCustomStyle && attr.loc) {
-        locs[styleObjName].push(attr.loc.start.line);
-      }
-    }
-  });
-
-  return locs;
-};
-
-export default reportInlineStyle;

package/src/reports/reportStyledComponents.ts

@@ -1,109 +0,0 @@
-import * as recast from 'recast';
-import type { ComponentName } from './types';
-
-const reportStyledComponents = (
-  ast: recast.types.ASTNode,
-  componentList: { [k: string]: ComponentName },
-  styledAliasName: string
-) => {
-  const locs: number[] = [];
-  const localComponentList = Object.keys(componentList);
-
-  recast.visit(ast, {
-    visitVariableDeclaration(path) {
-      this.traverse(path);
-
-      const declaration = path.value
-        .declarations[0] as recast.types.namedTypes.VariableDeclarator;
-
-      if (
-        declaration.init &&
-        declaration.init.type === 'TaggedTemplateExpression'
-      ) {
-        const { tag } = declaration.init;
-
-        if (
-          tag.type === 'CallExpression' &&
-          tag.callee.type === 'Identifier' &&
-          tag.callee.name === styledAliasName
-        ) {
-          const arg = tag.arguments[0];
-
-          // Case 1: Custom default component, e.g. styled(Card)
-          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)
-          if (
-            arg.type === 'MemberExpression' &&
-            arg.object.type === 'Identifier' &&
-            localComponentList.includes(arg.object.name) &&
-            tag.loc
-          ) {
-            locs.push(tag.loc.start.line);
-          }
-        }
-      }
-
-      // Case 3: Custom compound component with spead operator. e.g. const { Header } = Card, then styled(Header)
-      if (
-        declaration.init &&
-        declaration.init.type === 'Identifier' &&
-        localComponentList.includes(declaration.init.name)
-      ) {
-        const { id } = declaration;
-
-        if (id.type === 'ObjectPattern') {
-          const compoundComponentNames = id.properties
-            .map((prop) =>
-              prop.type === 'ObjectProperty' && prop.key.type === 'Identifier'
-                ? prop.key.name
-                : null
-            )
-            .filter((name): name is string => name !== null);
-
-          recast.visit(ast, {
-            visitVariableDeclaration(spreadPath) {
-              this.traverse(spreadPath);
-
-              const spreadDeclaration = spreadPath.value
-                .declarations[0] as recast.types.namedTypes.VariableDeclarator;
-
-              if (
-                spreadDeclaration.init &&
-                spreadDeclaration.init.type === 'TaggedTemplateExpression'
-              ) {
-                const { tag } = spreadDeclaration.init;
-
-                if (
-                  tag.type === 'CallExpression' &&
-                  tag.callee.type === 'Identifier' &&
-                  tag.callee.name === styledAliasName
-                ) {
-                  const arg = tag.arguments[0];
-
-                  if (
-                    arg.type === 'Identifier' &&
-                    compoundComponentNames.includes(arg.name) &&
-                    tag.loc
-                  ) {
-                    locs.push(tag.loc.start.line);
-                  }
-                }
-              }
-            },
-          });
-        }
-      }
-    },
-  });
-
-  return locs;
-};
-
-export default reportStyledComponents;

package/src/reports/types.ts

@@ -1,5 +0,0 @@
-import { HD_COMPONENTS, RULESET_MAP } from './constants';
-
-export type ComponentName = typeof HD_COMPONENTS[number];
-
-export type CompoundComponentName = keyof typeof RULESET_MAP;

package/src/utils/__tests__/getDiffLocs.spec.ts

@@ -1,40 +0,0 @@
-import { getDiffLocs } from '../getDiffLocs';
-
-describe('getDiffLocs', () => {
-  it('returns diff locations from patches', () => {
-    const filePatch =
-      "@@ -4,8 +4,6 @@ import { Button, Typography, Box, ButtonProps } from '@hero-design/react';\n" +
-      ' \n' +
-      " import emptyBanner from './assets/empty-banner.png';\n" +
-      ' \n' +
-      "-console.log('test');\n" +
-      '-\n' +
-      ' const EmptyImg = styled.img`\n' +
-      '   height: 172px;\n' +
-      `   margin-bottom: \${({ theme }) => theme.space.small}px;\n` +
-      '@@ -28,7 +26,8 @@ const EmptyTableView = ({\n' +
-      '     <EmptyImg src={emptyBanner} alt="Empty" />\n' +
-      '     <Typography.Text\n' +
-      '       fontSize={14}\n' +
-      "-      sx={{ color: 'bodyText', mb: 'xxlarge', whiteSpace: 'pre-wrap' }} // @snowflake-guard/snowflake-approved-by-andromeda\n" +
-      "+      sx={{ color: 'bodyText', mb: 'xxlarge', whiteSpace: 'pre-wrap', backgroundColour: 'lightPrimary' }} // @snowflake-guard/snowflake-approved-by-andromeda\n" +
-      '+      aria-label="Empty table message"\n' +
-      '     >\n' +
-      '       {message}\n' +
-      '     </Typography.Text>\n' +
-      '@@ -39,6 +38,7 @@ const EmptyTableView = ({\n' +
-      '       text={buttonText}\n' +
-      '     />\n' +
-      '   </Box>\n' +
-      '+\n' +
-      ' );\n' +
-      ' \n' +
-      ' export default EmptyTableView;';
-
-    expect(getDiffLocs(filePatch)).toEqual([
-      [7, 6],
-      [29, 30],
-      [41, 41],
-    ]);
-  });
-});

package/src/utils/getDiffLocs.ts

@@ -1,44 +0,0 @@
-export type DiffLocs = [number, number][];
-
-const DIFF_LOCS_REGEX = /@@(.*)@@/g;
-
-const getDiffLocs = (filePatch: string) => {
-  const locs: DiffLocs = [];
-  const patches: { [key: string]: string[] } = {};
-
-  // Split file patch into lines
-  const splitPatch = filePatch.split('\n');
-
-  // Get patches
-  // Example: @@ -1,2 +1,3 @@
-  let tempPatch = '';
-  splitPatch.forEach((linePatch) => {
-    const matchPatch = linePatch.match(DIFF_LOCS_REGEX);
-    if (matchPatch) {
-      [tempPatch] = matchPatch[0].split('+')[1].split(' ');
-      patches[tempPatch] = [];
-    } else {
-      patches[tempPatch].push(linePatch);
-    }
-  });
-
-  // Get diff locations from patches
-  Object.entries(patches).forEach(([loc, lines]) => {
-    const [startLoc, numberOfLines] = loc
-      .split(',')
-      .map((l) => parseInt(l, 10));
-    const endLoc = startLoc + numberOfLines - 1;
-    const firstDiffLineIdx = lines.findIndex(
-      (l) => l.startsWith('+') || l.startsWith('-')
-    );
-    const lastDiffLineIdx = lines
-      .reverse()
-      .findIndex((l) => l.startsWith('+') || l.startsWith('-'));
-
-    locs.push([startLoc + firstDiffLineIdx, endLoc - lastDiffLineIdx]);
-  });
-
-  return locs;
-};
-
-export { getDiffLocs };

package/tsconfig.json

@@ -1,14 +0,0 @@
-{
-  "extends": "config-tsconfig/base.json",
-  "compilerOptions": {
-    "module": "commonjs",
-    "outDir": "./lib",
-    "noImplicitReturns": true,
-    "pretty": false,
-    "skipLibCheck": true,
-    "types": ["node", "jest"]
-  },
-  "include": ["src", "netlify"],
-  "exclude": ["node_modules", "src/__mocks__/**/*"],
-  "compileOnSave": false
-}