Test test

.github/workflows/blade-danger.yml

@@ -0,0 +1,68 @@
+name: Blade DangerJS
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+  push:
+    branches:
+      - master
+
+env:
+  GITHUB_ACCESS_TOKEN: ${{ secrets.CI_BOT_TOKEN }}
+
+jobs:
+  pr-bundle-size:
+    name: Bundle Size Report
+    runs-on: ubuntu-latest # nosemgrep: non-self-hosted-runner
+    if: ${{ github.event_name == 'pull_request' }}
+    steps:
+      - name: Checkout Codebase
+        uses: actions/checkout@v4
+      - name: Use Node v18
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18.12.1
+      - name: Setup Cache & Install Dependencies
+        uses: ./.github/actions/install-dependencies
+      - name: Build Blade React Production
+        run: yarn run-s build:clean build:generate-types build:react-prod
+        working-directory: packages/blade
+      - name: Update Bundle Size Data
+        run: yarn bundle-size
+        working-directory: packages/blade
+      - name: Danger
+        run: yarn danger ci
+        working-directory: packages/blade
+        env:
+          DANGER_GITHUB_API_TOKEN: ${{ env.GITHUB_ACCESS_TOKEN }}
+          DANGER_DISABLE_TRANSPILATION: 'true'
+
+  master-bundle-size:
+    name: Update Bundle Size Data
+    runs-on: ubuntu-latest # nosemgrep: non-self-hosted-runner
+    if: ${{ github.event_name == 'push' }}
+    steps:
+      - name: Checkout Codebase
+        uses: actions/checkout@v4
+      - name: Use Node v18
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18.12.1
+      - name: Setup Cache & Install Dependencies
+        uses: ./.github/actions/install-dependencies
+      - name: Build Blade React Production
+        run: yarn run-s build:clean build:generate-types build:react-prod
+        working-directory: packages/blade
+      - name: Update Bundle Size Data
+        run: yarn bundle-size
+        working-directory: packages/blade
+        env:
+          BUNDLE_SIZE_STATS_FILENAME: 'baseBundleSizeStats.json'
+      - name: Commit Updated Bundle Size Data
+        run: |
+          git config user.email "[email protected]"
+          git config user.name "rzpcibot"
+          git add baseBundleSizeStats.json
+          git commit -m "chore: update bundle size data [skip ci]"
+          git push
+        working-directory: packages/blade

.github/workflows/blade-validate.yml

@@ -26,9 +26,6 @@ jobs:
       - name: Run TypeScript Checks
         run: yarn typecheck
         working-directory: packages/blade
-      - name: Check Tree Shaking
-        run: yarn size-limit
-        working-directory: packages/blade
 
   test:
     name: Run Tests (${{ matrix.shard }})

package.json

@@ -34,8 +34,8 @@
     "@types/styled-components": "5.1.25",
     "@types/styled-components-react-native": "5.1.3",
     "@typescript-eslint/eslint-plugin": "5.59.6",
-    "@typescript-eslint/utils": "5.59.6",
     "@typescript-eslint/parser": "5.59.6",
+    "@typescript-eslint/utils": "5.59.6",
     "chalk": "4.1.1",
     "eslint": "8.40.0",
     "eslint-config-kentcdodds": "18.0.0",
@@ -45,11 +45,11 @@
     "eslint-plugin-import": "2.27.5",
     "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-mdx": "2.1.0",
+    "eslint-plugin-no-only-tests": "3.1.0",
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-react": "7.32.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-react-native-a11y": "3.3.0",
-    "eslint-plugin-no-only-tests": "3.1.0",
     "figures": "3.2.0",
     "husky": "4.2.3",
     "lerna": "4.0.0",

packages/blade/.gitignore

@@ -54,6 +54,7 @@ yarn-error.log
 
 # Bundle artifact
 *.jsbundle
+.size-limit.json
 
 # Ruby / CocoaPods
 /ios/Pods/

packages/blade/PRBundleSizeStats.json

@@ -0,0 +1,23 @@
+[
+  {
+    "name": "Button",
+    "passed": true,
+    "size": 25142,
+    "sizeLimit": 2000000,
+    "loading": 0.5496484375
+  },
+  {
+    "name": "Card",
+    "passed": true,
+    "size": 39142,
+    "sizeLimit": 2000000,
+    "loading": 0.5496484375
+  },
+  {
+    "name": "Link",
+    "passed": true,
+    "size": 20142,
+    "sizeLimit": 2000000,
+    "loading": 0.5496484375
+  }
+]

packages/blade/baseBundleSizeStats.json

@@ -0,0 +1 @@
+[{"name":"Accordion","passed":true,"size":22576,"sizeLimit":2000000,"loading":0.4409375},{"name":"AccordionItem","passed":true,"size":26498,"sizeLimit":2000000,"loading":0.5175390625},{"name":"ActionList","passed":true,"size":27286,"sizeLimit":2000000,"loading":0.5329296875},{"name":"ActionListItem","passed":true,"size":31294,"sizeLimit":2000000,"loading":0.6112109375},{"name":"ActionListItemBadge","passed":true,"size":22996,"sizeLimit":2000000,"loading":0.449140625},{"name":"ActionListItemBadgeGroup","passed":true,"size":22913,"sizeLimit":2000000,"loading":0.44751953125},{"name":"ActionListItemText","passed":true,"size":22193,"sizeLimit":2000000,"loading":0.43345703125},{"name":"ActionListSection","passed":true,"size":25181,"sizeLimit":2000000,"loading":0.49181640625},{"name":"Alert","passed":true,"size":33203,"sizeLimit":2000000,"loading":0.64849609375},{"name":"Amount","passed":true,"size":24706,"sizeLimit":2000000,"loading":0.4825390625},{"name":"Badge","passed":true,"size":22934,"sizeLimit":2000000,"loading":0.4479296875},{"name":"BottomSheet","passed":true,"size":31600,"sizeLimit":2000000,"loading":0.6171875},{"name":"BottomSheetBody","passed":true,"size":22817,"sizeLimit":2000000,"loading":0.44564453125},{"name":"BottomSheetFooter","passed":true,"size":23103,"sizeLimit":2000000,"loading":0.45123046875},{"name":"BottomSheetHeader","passed":true,"size":26712,"sizeLimit":2000000,"loading":0.52171875},{"name":"Box","passed":true,"size":22853,"sizeLimit":2000000,"loading":0.44634765625},{"name":"Button","passed":true,"size":27722,"sizeLimit":2000000,"loading":0.5414453125},{"name":"Card","passed":true,"size":24157,"sizeLimit":2000000,"loading":0.47181640625},{"name":"CardBody","passed":true,"size":22304,"sizeLimit":2000000,"loading":0.435625},{"name":"CardHeader","passed":true,"size":22851,"sizeLimit":2000000,"loading":0.44630859375},{"name":"CardHeaderLeading","passed":true,"size":22409,"sizeLimit":2000000,"loading":0.43767578125},{"name":"CardHeaderTrailing","passed":true,"size":22272,"sizeLimit":2000000,"loading":0.435},{"name":"CardFooter","passed":true,"size":23422,"sizeLimit":2000000,"loading":0.4574609375},{"name":"CardFooterLeading","passed":true,"size":22322,"sizeLimit":2000000,"loading":0.4359765625},{"name":"CardFooterTrailing","passed":true,"size":28462,"sizeLimit":2000000,"loading":0.5558984375},{"name":"Carousel","passed":true,"size":28081,"sizeLimit":2000000,"loading":0.54845703125},{"name":"CarouselItem","passed":true,"size":23217,"sizeLimit":2000000,"loading":0.45345703125},{"name":"Checkbox","passed":true,"size":27994,"sizeLimit":2000000,"loading":0.5467578125},{"name":"CheckboxGroup","passed":true,"size":26106,"sizeLimit":2000000,"loading":0.5098828125},{"name":"Chip","passed":true,"size":26398,"sizeLimit":2000000,"loading":0.5155859375},{"name":"ChipGroup","passed":true,"size":23519,"sizeLimit":2000000,"loading":0.45935546875},{"name":"Collapsible","passed":true,"size":22794,"sizeLimit":2000000,"loading":0.4451953125},{"name":"CollapsibleLink","passed":true,"size":25072,"sizeLimit":2000000,"loading":0.4896875},{"name":"CollapsibleButton","passed":true,"size":27509,"sizeLimit":2000000,"loading":0.53728515625},{"name":"CollapsibleBody","passed":true,"size":23513,"sizeLimit":2000000,"loading":0.45923828125},{"name":"Counter","passed":true,"size":22892,"sizeLimit":2000000,"loading":0.447109375},{"name":"Divider","passed":true,"size":22646,"sizeLimit":2000000,"loading":0.4423046875},{"name":"Dropdown","passed":true,"size":23654,"sizeLimit":2000000,"loading":0.4619921875},{"name":"DropdownOverlay","passed":true,"size":32297,"sizeLimit":2000000,"loading":0.63080078125},{"name":"DropdownButton","passed":true,"size":29990,"sizeLimit":2000000,"loading":0.5857421875},{"name":"DropdownLink","passed":true,"size":26434,"sizeLimit":2000000,"loading":0.5162890625},{"name":"DropdownFooter","passed":true,"size":25139,"sizeLimit":2000000,"loading":0.49099609375},{"name":"DropdownHeader","passed":true,"size":26172,"sizeLimit":2000000,"loading":0.511171875},{"name":"Indicator","passed":true,"size":23037,"sizeLimit":2000000,"loading":0.44994140625},{"name":"SelectInput","passed":true,"size":38479,"sizeLimit":2000000,"loading":0.75154296875},{"name":"AutoComplete","passed":true,"size":39072,"sizeLimit":2000000,"loading":0.763125},{"name":"OTPInput","passed":true,"size":33454,"sizeLimit":2000000,"loading":0.6533984375},{"name":"PasswordInput","passed":true,"size":35428,"sizeLimit":2000000,"loading":0.691953125},{"name":"TextArea","passed":true,"size":33814,"sizeLimit":2000000,"loading":0.6604296875},{"name":"TextInput","passed":true,"size":35381,"sizeLimit":2000000,"loading":0.69103515625},{"name":"Link","passed":true,"size":24182,"sizeLimit":2000000,"loading":0.4723046875},{"name":"List","passed":true,"size":22761,"sizeLimit":2000000,"loading":0.44455078125},{"name":"ListItem","passed":true,"size":24029,"sizeLimit":2000000,"loading":0.46931640625},{"name":"ListItemLink","passed":true,"size":24342,"sizeLimit":2000000,"loading":0.4754296875},{"name":"ListItemCode","passed":true,"size":22745,"sizeLimit":2000000,"loading":0.44423828125},{"name":"ListItemText","passed":true,"size":22215,"sizeLimit":2000000,"loading":0.43388671875},{"name":"Modal","passed":true,"size":34721,"sizeLimit":2000000,"loading":0.67814453125},{"name":"ModalBody","passed":true,"size":22315,"sizeLimit":2000000,"loading":0.43583984375},{"name":"ModalHeader","passed":true,"size":26253,"sizeLimit":2000000,"loading":0.51275390625},{"name":"ModalFooter","passed":true,"size":23470,"sizeLimit":2000000,"loading":0.4583984375},{"name":"Popover","passed":true,"size":42260,"sizeLimit":2000000,"loading":0.825390625},{"name":"PopoverInteractiveWrapper","passed":true,"size":22478,"sizeLimit":2000000,"loading":0.4390234375},{"name":"ProgressBar","passed":true,"size":23803,"sizeLimit":2000000,"loading":0.46490234375},{"name":"Radio","passed":true,"size":26804,"sizeLimit":2000000,"loading":0.523515625},{"name":"RadioGroup","passed":true,"size":26067,"sizeLimit":2000000,"loading":0.50912109375},{"name":"Skeleton","passed":true,"size":22864,"sizeLimit":2000000,"loading":0.4465625},{"name":"Spinner","passed":true,"size":24013,"sizeLimit":2000000,"loading":0.46900390625},{"name":"SpotlightPopoverTour","passed":true,"size":43963,"sizeLimit":2000000,"loading":0.85865234375},{"name":"SpotlightPopoverTourFooter","passed":true,"size":28710,"sizeLimit":2000000,"loading":0.5607421875},{"name":"SpotlightPopoverTourStep","passed":true,"size":22415,"sizeLimit":2000000,"loading":0.43779296875},{"name":"Switch","passed":true,"size":26656,"sizeLimit":2000000,"loading":0.520625},{"name":"Table","passed":true,"size":29004,"sizeLimit":2000000,"loading":0.566484375},{"name":"TableHeader","passed":true,"size":22392,"sizeLimit":2000000,"loading":0.43734375},{"name":"TableHeaderCell","passed":true,"size":23549,"sizeLimit":2000000,"loading":0.45994140625},{"name":"TableHeaderRow","passed":true,"size":29774,"sizeLimit":2000000,"loading":0.5815234375},{"name":"TableBody","passed":true,"size":23083,"sizeLimit":2000000,"loading":0.45083984375},{"name":"TableCell","passed":true,"size":23341,"sizeLimit":2000000,"loading":0.45587890625},{"name":"TableRow","passed":true,"size":30176,"sizeLimit":2000000,"loading":0.589375},{"name":"TableFooter","passed":true,"size":22457,"sizeLimit":2000000,"loading":0.43861328125},{"name":"TableFooterCell","passed":true,"size":22664,"sizeLimit":2000000,"loading":0.44265625},{"name":"TableFooterRow","passed":true,"size":22614,"sizeLimit":2000000,"loading":0.4416796875},{"name":"TablePagination","passed":true,"size":61174,"sizeLimit":2000000,"loading":1.1948046875},{"name":"TableToolbar","passed":true,"size":25421,"sizeLimit":2000000,"loading":0.49650390625},{"name":"TableToolbarActions","passed":true,"size":22358,"sizeLimit":2000000,"loading":0.4366796875},{"name":"Tabs","passed":true,"size":22764,"sizeLimit":2000000,"loading":0.444609375},{"name":"TabItem","passed":true,"size":24435,"sizeLimit":2000000,"loading":0.47724609375},{"name":"TabList","passed":true,"size":26216,"sizeLimit":2000000,"loading":0.51203125},{"name":"TabPanel","passed":true,"size":22497,"sizeLimit":2000000,"loading":0.43939453125},{"name":"Tag","passed":true,"size":25530,"sizeLimit":2000000,"loading":0.4986328125},{"name":"Tooltip","passed":true,"size":37228,"sizeLimit":2000000,"loading":0.727109375},{"name":"TooltipInteractiveWrapper","passed":true,"size":22368,"sizeLimit":2000000,"loading":0.436875},{"name":"Heading","passed":true,"size":22572,"sizeLimit":2000000,"loading":0.440859375},{"name":"Text","passed":true,"size":22086,"sizeLimit":2000000,"loading":0.4313671875},{"name":"Code","passed":true,"size":22713,"sizeLimit":2000000,"loading":0.44361328125},{"name":"Display","passed":true,"size":22608,"sizeLimit":2000000,"loading":0.4415625}]

packages/blade/dangerfile.js

@@ -0,0 +1,28 @@
+const { danger, markdown } = require('danger');
+const generateBundleDiff = require('./scripts/generateBundleDiff');
+
+const showBundleSizeDiff = async () => {
+  const { diffTable } = await generateBundleDiff(danger);
+
+  if (diffTable) {
+    markdown(`
+  ## Bundle Size Report
+
+  <details>
+  <summary> Updated Components </summary>
+
+  ${diffTable}
+
+  </details>
+
+  `);
+  } else {
+    markdown(`
+  ## Bundle Size Report
+
+  No bundle size changes detected.
+  `);
+  }
+};
+
+showBundleSizeDiff();

packages/blade/package.json

@@ -127,6 +127,7 @@
     "watch:test:react-native": "yarn test:react-native --watch --onlyChanged",
     "chromatic": "npx chromatic",
     "publish-npm": "node ./scripts/publishToNpm.js",
+    "bundle-size": "NODE_OPTIONS=--max_old_space_size=8096 node ./scripts/getBundleSize.js",
     "generate-github-npmrc": "node ./scripts/generateGitHubRegistryNpmrc.js",
     "postinstall": "patch-package"
   },
@@ -153,6 +154,8 @@
     "chromatic": "6.22.0",
     "@babel/cli": "7.23.0",
     "@babel/core": "7.20.2",
+    "@babel/parser": "7.23.6",
+    "@babel/traverse": "7.23.7",
     "@babel/plugin-transform-react-jsx": "7.16.5",
     "@babel/plugin-transform-runtime": "7.16.5",
     "@babel/preset-env": "7.20.2",
@@ -223,6 +226,7 @@
     "chalk": "4.1.1",
     "copyfiles": "2.4.1",
     "cross-env": "7.0.3",
+    "danger": "^11.3.1",
     "dedent": "0.7.0",
     "eslint-plugin-mdx": "1.16.0",
     "execa": "5.0.0",
@@ -299,56 +303,5 @@
     "react-dom": "18.2.0",
     "react": "18.2.0",
     "styled-components": "^5"
-  },
-  "bundlemon": {
-    "files": [
-      {
-        "friendlyName": "Web Components",
-        "path": "./build/components/index.production.web.js"
-      },
-      {
-        "friendlyName": "React Native Components",
-        "path": "./build/components/index.native.js"
-      },
-      {
-        "friendlyName": "Web Tokens",
-        "path": "./build/tokens/index.production.web.js"
-      },
-      {
-        "friendlyName": "React Native Tokens",
-        "path": "./build/tokens/index.native.js"
-      },
-      {
-        "friendlyName": "CSS Theme Tokens",
-        "path": "./build/css/*.css"
-      },
-      {
-        "friendlyName": "Web Utils",
-        "path": "./build/utils/index.production.web.js"
-      },
-      {
-        "friendlyName": "React Native Utils",
-        "path": "./build/utils/index.native.js"
-      }
-    ],
-    "reportOutput": [
-      "github"
-    ]
-  },
-  "size-limit": [
-    {
-      "name": "Import Button only",
-      "path": "./build/lib/web/production/components/index.js",
-      "import": "{ Button }",
-      "limit": "31 kb",
-      "running": false
-    },
-    {
-      "name": "Import Text only",
-      "path": "./build/lib/web/production/components/index.js",
-      "import": "{ Text }",
-      "limit": "25 kb",
-      "running": false
-    }
-  ]
+  }
 }

packages/blade/scripts/generateBundleDiff.js

@@ -0,0 +1,66 @@
+const generateBundleDiff = async () => {
+  let baseBundleSizeStats = [];
+  // Get the base bundle size report from the master branch
+  const baseBundleStatsURL =
+    process.env.BASE_BUNDLE_SIZE_STATS_URL ||
+    'https://raw.githubusercontent.com/razorpay/blade/master/packages/blade/baseBundleSizeStats.json';
+  const response = await fetch(baseBundleStatsURL);
+
+  if (response.status === 200) {
+    baseBundleSizeStats = await response.json();
+  }
+
+  // eslint-disable-next-line import/extensions
+  const currentBundleSizeStats = require('../PRBundleSizeStats.json');
+  let bundleDiff = currentBundleSizeStats;
+
+  if (baseBundleSizeStats.length > 0) {
+    bundleDiff = baseBundleSizeStats.filter(
+      ({ size: baseSize }) =>
+        !currentBundleSizeStats.some(({ size: currentSize }) => currentSize === baseSize),
+    );
+  }
+
+  if (bundleDiff.length === 0) {
+    return { diffTable: null };
+  }
+
+  bundleDiff.forEach((component) => {
+    const currentComponent = currentBundleSizeStats.find((stat) => stat.name === component.name);
+    const baseComponent = baseBundleSizeStats.find((stat) => stat.name === component.name);
+
+    if (baseComponent && !currentComponent) {
+      component.diffSize = -baseComponent.size / 1000;
+      component.baseSize = baseComponent.size / 1000;
+      component.prSize = 0;
+      component.isSizeIncreased = false;
+    } else if (!baseComponent && currentComponent) {
+      component.diffSize = currentComponent.size / 1000;
+      component.baseSize = 0;
+      component.prSize = currentComponent.size / 1000;
+      component.isSizeIncreased = true;
+    } else {
+      component.diffSize = (currentComponent.size - baseComponent.size) / 1000;
+      component.baseSize = baseComponent.size / 1000;
+      component.prSize = currentComponent.size / 1000;
+      component.isSizeIncreased = component.diffSize > 0;
+    }
+  });
+
+  const diffTable = `
+  | Status | Component | Base Size (kb) | Current Size (kb) | Diff |
+  | --- | --- | --- | --- | --- |
+  ${bundleDiff
+    .map(
+      ({ name, baseSize, prSize, diffSize, isSizeIncreased }) =>
+        `| ${isSizeIncreased ? '🚫' : '✅'} | ${name} | ${baseSize} | ${prSize} | ${
+          isSizeIncreased ? `+${diffSize}` : diffSize
+        } kb |`,
+    )
+    .join('\n')}
+  `;
+
+  return { diffTable };
+};
+
+module.exports = generateBundleDiff;