From 3738f8c42194e977befa2d19142c2495bcd39d1d Mon Sep 17 00:00:00 2001
From: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
Date: Thu, 28 Nov 2024 15:07:34 +0200
Subject: [PATCH] Introduce component usage stats

---
 .gitignore              |   1 +
 package.json            |   2 +
 react-scanner.config.js |  27 ++++++++
 yarn.lock               | 147 +++++++++++++++++++++++++++++++++++++++-
 4 files changed, 175 insertions(+), 2 deletions(-)
 create mode 100644 react-scanner.config.js

diff --git a/.gitignore b/.gitignore
index 30d6a1d0f16529..4cc0cc58d1c71a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,6 +28,7 @@ test-results*.xml
 /client/chart.json
 /client/style.json
 *xunit_*.xml
+/results
 /vendor
 checkstyle.xml
 /apps/notifications/stats.json
diff --git a/package.json b/package.json
index 356095c04099d1..9799c3c443bddd 100644
--- a/package.json
+++ b/package.json
@@ -87,6 +87,7 @@
 		"clean:packages": "yarn workspaces foreach --all --parallel --verbose --exclude 'wp-calypso' run clean",
 		"clean:public": "rm -rf public",
 		"clean:translations": "rm -rf build/strings calypso-strings.pot chunks-map.*.json || true",
+		"component-usage-stats": "node ./node_modules/react-scanner/bin/react-scanner -c ./react-scanner.config.js",
 		"components:storybook:start": "echo 'Storybook in Calypso moved into the root directory. Run `yarn storybook:start` instead.'",
 		"composite-checkout:storybook:start": "echo 'Deprecated, run `yarn workspace @automattic/composite-checkout run storybook` instead'",
 		"distclean": "yarn run clean && rm -rf **/node_modules **/.cache .yarn/install-state.gz || true",
@@ -303,6 +304,7 @@
 		"postcss-custom-properties": "^11.0.0",
 		"prettier": "npm:wp-prettier@3.0.3",
 		"react-refresh": "^0.14.0",
+		"react-scanner": "1.2.0",
 		"readline-sync": "^1.4.10",
 		"recursive-copy": "^2.0.14",
 		"replace": "^1.1.5",
diff --git a/react-scanner.config.js b/react-scanner.config.js
new file mode 100644
index 00000000000000..6a38632729e176
--- /dev/null
+++ b/react-scanner.config.js
@@ -0,0 +1,27 @@
+module.exports = {
+	// Crawl the entire repo
+	crawlFrom: './',
+	// Needed for properly reporting components with dot notation
+	includeSubComponents: true,
+	// Exclude any vendor or docs directories
+	exclude: [
+		'bin',
+		'build',
+		'build-tools',
+		'config',
+		'docs',
+		'node_modules',
+		'public',
+		'results',
+		'test',
+		'tools',
+		'typings',
+		'vendor',
+	],
+	/*
+	 * Filter out any non-component React elements and consider only imports of
+	 * `@wordpress/components` outside of the package.
+	 */
+	importedFrom: '@wordpress/components',
+	processors: [ [ 'raw-report', { outputTo: './results/calypso.json' } ] ],
+};
diff --git a/yarn.lock b/yarn.lock
index 86b841544e5c1b..f465ec043bb558 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8098,6 +8098,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/estree@npm:^0.0.45":
+  version: 0.0.45
+  resolution: "@types/estree@npm:0.0.45"
+  checksum: dce1fb977d9aab2492cfc831e76abdc7c0944e42974bf7b907d02d28b9356e38c7534ade5a6b7f4f2dd12347f02d78051a4e0f4685bf8b7d60ebf85263a48bf9
+  languageName: node
+  linkType: hard
+
 "@types/estree@npm:^0.0.51":
   version: 0.0.51
   resolution: "@types/estree@npm:0.0.51"
@@ -9177,6 +9184,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/types@npm:8.8.0":
+  version: 8.8.0
+  resolution: "@typescript-eslint/types@npm:8.8.0"
+  checksum: cd168fafcaf77641b023c4405ea3a8c30fbad1737abb5aec9fce67fe2ae20224b624b5a2e3e84900ba81dc7dd33343add3653763703a225326cc81356b182d09
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/typescript-estree@npm:5.62.0":
   version: 5.62.0
   resolution: "@typescript-eslint/typescript-estree@npm:5.62.0"
@@ -9232,6 +9246,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/typescript-estree@npm:8.8.0":
+  version: 8.8.0
+  resolution: "@typescript-eslint/typescript-estree@npm:8.8.0"
+  dependencies:
+    "@typescript-eslint/types": "npm:8.8.0"
+    "@typescript-eslint/visitor-keys": "npm:8.8.0"
+    debug: "npm:^4.3.4"
+    fast-glob: "npm:^3.3.2"
+    is-glob: "npm:^4.0.3"
+    minimatch: "npm:^9.0.4"
+    semver: "npm:^7.6.0"
+    ts-api-utils: "npm:^1.3.0"
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 9b9e849f6b2d4e250840ef8e05f55a97d6598adaf48c1e6df83084b94c30feca6a3e7916ee1c235178188d0db6364a877cbf8fe218c36d5f8d5acb50767f3273
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/utils@npm:5.62.0, @typescript-eslint/utils@npm:^5.10.0, @typescript-eslint/utils@npm:^5.62.0":
   version: 5.62.0
   resolution: "@typescript-eslint/utils@npm:5.62.0"
@@ -9297,6 +9330,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/visitor-keys@npm:8.8.0":
+  version: 8.8.0
+  resolution: "@typescript-eslint/visitor-keys@npm:8.8.0"
+  dependencies:
+    "@typescript-eslint/types": "npm:8.8.0"
+    eslint-visitor-keys: "npm:^3.4.3"
+  checksum: 580ce74c9b09b9e6a6f3f0ac2d2f0c6a6b983a78ce3b2544822ee08107c57142858d674897f61ff32a9a5e8fca00c916545c159bb75d134f4380884642542d38
+  languageName: node
+  linkType: hard
+
 "@ungap/structured-clone@npm:^1.0.0, @ungap/structured-clone@npm:^1.2.0":
   version: 1.2.0
   resolution: "@ungap/structured-clone@npm:1.2.0"
@@ -11814,6 +11857,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"astray@npm:1.1.1":
+  version: 1.1.1
+  resolution: "astray@npm:1.1.1"
+  dependencies:
+    "@types/estree": "npm:^0.0.45"
+  dependenciesMeta:
+    "@types/estree":
+      optional: true
+  checksum: 50d9df02ab4d64192dd46fffa18eccdfd014d1df17fb2fdf5279dbafbeec76fb61ba8c1ee739f66a93e5be48899e0454ef8006c45233836b7211743dc516e93b
+  languageName: node
+  linkType: hard
+
 "async-exit-hook@npm:^2.0.1":
   version: 2.0.1
   resolution: "async-exit-hook@npm:2.0.1"
@@ -15881,6 +15936,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dlv@npm:1.1.3":
+  version: 1.1.3
+  resolution: "dlv@npm:1.1.3"
+  checksum: 03eb4e769f19a027fd5b43b59e8a05e3fd2100ac239ebb0bf9a745de35d449e2f25cfaf3aa3934664551d72856f4ae8b7822016ce5c42c2d27c18ae79429ec42
+  languageName: node
+  linkType: hard
+
 "dmg-builder@npm:23.0.3":
   version: 23.0.3
   resolution: "dmg-builder@npm:23.0.3"
@@ -16243,6 +16305,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dset@npm:3.1.4":
+  version: 3.1.4
+  resolution: "dset@npm:3.1.4"
+  checksum: b67bbd28dd8a539e90c15ffb61100eb64ef995c5270a124d4f99bbb53f4d82f55a051b731ba81f3215dd9dce2b4c8d69927dc20b3be1c5fc88bab159467aa438
+  languageName: node
+  linkType: hard
+
 "dtrace-provider@npm:~0.8":
   version: 0.8.8
   resolution: "dtrace-provider@npm:0.8.8"
@@ -18196,6 +18265,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fdir@npm:5.2.0":
+  version: 5.2.0
+  resolution: "fdir@npm:5.2.0"
+  checksum: 1b8997beb551bf7f919ecc62442ef48936f5cdd45ff1a4160fa64f37c6aae8be2bb061862edd669cff3033d09ceb435081505a3f2604edb3fdae983615e2ae11
+  languageName: node
+  linkType: hard
+
 "fdir@npm:6.1.1":
   version: 6.1.1
   resolution: "fdir@npm:6.1.1"
@@ -24794,6 +24870,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"minimatch@npm:^9.0.4":
+  version: 9.0.5
+  resolution: "minimatch@npm:9.0.5"
+  dependencies:
+    brace-expansion: "npm:^2.0.1"
+  checksum: de96cf5e35bdf0eab3e2c853522f98ffbe9a36c37797778d2665231ec1f20a9447a7e567cb640901f89e4daaa95ae5d70c65a9e8aa2bb0019b6facbc3c0575ed
+  languageName: node
+  linkType: hard
+
 "minimist-options@npm:4.1.0, minimist-options@npm:^4.0.2":
   version: 4.1.0
   resolution: "minimist-options@npm:4.1.0"
@@ -26615,7 +26700,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.2, picomatch@npm:^2.2.3, picomatch@npm:^2.3.0, picomatch@npm:^2.3.1":
+"picomatch@npm:2.3.1, picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.2, picomatch@npm:^2.2.3, picomatch@npm:^2.3.0, picomatch@npm:^2.3.1":
   version: 2.3.1
   resolution: "picomatch@npm:2.3.1"
   checksum: 26c02b8d06f03206fc2ab8d16f19960f2ff9e81a658f831ecb656d8f17d9edc799e8364b1f4a7873e89d9702dff96204be0fa26fe4181f6843f040f819dac4be
@@ -28312,6 +28397,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-scanner@npm:1.2.0":
+  version: 1.2.0
+  resolution: "react-scanner@npm:1.2.0"
+  dependencies:
+    "@typescript-eslint/typescript-estree": "npm:8.8.0"
+    astray: "npm:1.1.1"
+    dlv: "npm:1.1.3"
+    dset: "npm:3.1.4"
+    fdir: "npm:5.2.0"
+    is-plain-object: "npm:5.0.0"
+    picomatch: "npm:2.3.1"
+    sade: "npm:1.8.1"
+    typescript: "npm:5.6.2"
+  bin:
+    react-scanner: bin/react-scanner
+  checksum: 0daee0cf0612cac6f77526ca97460c636addf46b7af6ca850fa8673c05a5e309c9977e0fe4f65571d4c12fca3e865d9b6f2da34a451bb111d1a704766635b4cc
+  languageName: node
+  linkType: hard
+
 "react-shallow-renderer@npm:^16.15.0":
   version: 16.15.0
   resolution: "react-shallow-renderer@npm:16.15.0"
@@ -30081,7 +30185,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sade@npm:^1.7.3":
+"sade@npm:1.8.1, sade@npm:^1.7.3":
   version: 1.8.1
   resolution: "sade@npm:1.8.1"
   dependencies:
@@ -30384,6 +30488,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"semver@npm:^7.6.0":
+  version: 7.6.3
+  resolution: "semver@npm:7.6.3"
+  bin:
+    semver: bin/semver.js
+  checksum: 88f33e148b210c153873cb08cfe1e281d518aaa9a666d4d148add6560db5cd3c582f3a08ccb91f38d5f379ead256da9931234ed122057f40bb5766e65e58adaf
+  languageName: node
+  linkType: hard
+
 "send@npm:0.19.0":
   version: 0.19.0
   resolution: "send@npm:0.19.0"
@@ -32622,6 +32735,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ts-api-utils@npm:^1.3.0":
+  version: 1.4.2
+  resolution: "ts-api-utils@npm:1.4.2"
+  peerDependencies:
+    typescript: ">=4.2.0"
+  checksum: b9d82922af42cefa14650397f5ff42a1ff8c8a1b4fac3590fa3e2daeeb3666fbe260a324f55dc748d9653dce30c2a21a148fba928511b2022bedda66423695bf
+  languageName: node
+  linkType: hard
+
 "ts-dedent@npm:^2.0.0":
   version: 2.0.0
   resolution: "ts-dedent@npm:2.0.0"
@@ -32964,6 +33086,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typescript@npm:5.6.2":
+  version: 5.6.2
+  resolution: "typescript@npm:5.6.2"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 3ed8297a8c7c56b7fec282532503d1ac795239d06e7c4966b42d4330c6cf433a170b53bcf93a130a7f14ccc5235de5560df4f1045eb7f3550b46ebed16d3c5e5
+  languageName: node
+  linkType: hard
+
 "typescript@npm:^5.3.3":
   version: 5.3.3
   resolution: "typescript@npm:5.3.3"
@@ -32974,6 +33106,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typescript@patch:typescript@npm%3A5.6.2#optional!builtin<compat/typescript>":
+  version: 5.6.2
+  resolution: "typescript@patch:typescript@npm%3A5.6.2#optional!builtin<compat/typescript>::version=5.6.2&hash=e012d7"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: e6c1662e4852e22fe4bbdca471dca3e3edc74f6f1df043135c44a18a7902037023ccb0abdfb754595ca9028df8920f2f8492c00fc3cbb4309079aae8b7de71cd
+  languageName: node
+  linkType: hard
+
 "typescript@patch:typescript@npm%3A^5.3.3#optional!builtin<compat/typescript>":
   version: 5.3.3
   resolution: "typescript@patch:typescript@npm%3A5.3.3#optional!builtin<compat/typescript>::version=5.3.3&hash=e012d7"
@@ -34708,6 +34850,7 @@ __metadata:
     react-intersection-observer: "npm:^9.4.3"
     react-modal: "npm:^3.16.1"
     react-refresh: "npm:^0.14.0"
+    react-scanner: "npm:1.2.0"
     readline-sync: "npm:^1.4.10"
     recursive-copy: "npm:^2.0.14"
     redux: "npm:^5.0.1"