Add script that counts the number of styled-components imports compared with original number (#10616)

Author: gustavlrsn

package.json

@@ -188,6 +188,7 @@
     "start": "node dist/server",
     "start:ci": "nyc --silent --exclude \".next/**\" node server",
     "start:e2e": "cross-env TZ=UTC NODE_ENV=production OC_ENV=e2e node server",
+    "styled-components-migration-progress": "tsx scripts/styled-components-migration-progress.ts",
     "styleguide:build": "storybook build",
     "styleguide:dev": "storybook dev -p 6006",
     "test": "npm run test:jest",

scripts/styled-components-migration-progress.ts

@@ -0,0 +1,60 @@
+// This script counts the number of styled-components imports in the project and compares it to the number of imports before TailwindCSS was introduced.
+
+import * as fs from 'fs';
+import * as path from 'path';
+
+const SEARCH_DIR = path.resolve(__dirname, '..');
+const ORIGINAL_IMPORT_COUNT = 343;
+
+function countStyledComponentsImports(searchDir: string): number {
+  let count = 0;
+
+  function searchDirectory(directory: string) {
+    const files = fs.readdirSync(directory);
+
+    for (const file of files) {
+      const fullPath = path.join(directory, file);
+      let stat;
+      try {
+        stat = fs.statSync(fullPath);
+      } catch (error) {
+        continue; // skip entries that cannot be accessed
+      }
+
+      if (stat.isDirectory()) {
+        if (file !== 'node_modules' && file[0] !== '.') {
+          // skip node_modules and hidden directories
+          searchDirectory(fullPath);
+        }
+      } else if (
+        fullPath.endsWith('.js') ||
+        fullPath.endsWith('.jsx') ||
+        fullPath.endsWith('.ts') ||
+        fullPath.endsWith('.tsx')
+      ) {
+        const content = fs.readFileSync(fullPath, 'utf-8');
+        const lines = content.split('\n');
+
+        for (const line of lines) {
+          if (line.match(/import .* from 'styled-components'/) || line.match(/require\('styled-components'\)/)) {
+            count++;
+          }
+        }
+      }
+    }
+  }
+
+  searchDirectory(searchDir);
+  return count;
+}
+
+function calculateProgress(currentCount: number, originalCount: number): number {
+  return 100 - (currentCount / originalCount) * 100;
+}
+
+const currentCount = countStyledComponentsImports(SEARCH_DIR);
+const progress = calculateProgress(currentCount, ORIGINAL_IMPORT_COUNT);
+
+console.log(`Current number of styled-components imports: ${currentCount}`); // eslint-disable-line no-console
+console.log(`Original number of styled-components imports: ${ORIGINAL_IMPORT_COUNT}`); // eslint-disable-line no-console
+console.log(`Migration Progress: ${progress.toFixed(2)}%`); // eslint-disable-line no-console