chore(v3): Update devtools to carbon v11 & rebuild on vite

packages/component-list/README.md

@@ -27,7 +27,7 @@ and submit a pull request.
 
 > 💡 Thinking about maintenance, it's best to find a way to build this data from
 > your component library. See how
-> [cloud-cognitive](https://github.com/carbon-design-system/devtools/tree/base/packages/component-list/src/library/cloud-cognitive.js)
+> [ibm-products](https://github.com/carbon-design-system/devtools/tree/base/packages/component-list/src/library/ibm-products.js)
 > set up their components to scale.
 
 5. Add your new library file to the build file

packages/component-list/package.json

@@ -17,13 +17,12 @@
     "test": "yarn format && yarn lint"
   },
   "dependencies": {
-    "@carbon/ibm-products": "^1.2.4",
-    "@carbon/ibm-security": "^1.31.0",
-    "@carbon/ibmdotcom-react": "^1.27.0",
-    "@carbon/ibmdotcom-web-components": "^1.12.0",
-    "carbon-components": "^10.41.0",
-    "carbon-components-react": "^7.45.0",
-    "carbon-web-components": "^1.16.2"
+    "@carbon/ibm-products": "^2.48.0",
+    "@carbon/ibm-security": "^2.15.0",
+    "@carbon/ibmdotcom-utilities": "^2.12.0",
+    "@carbon/ibmdotcom-web-components": "^2.12.0",
+    "@carbon/react": "^1.65.0",
+    "@carbon/web-components": "^2.12.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

packages/component-list/src/libraries/carbon-web-components.js

@@ -1,9 +1,9 @@
 import fs from 'fs';
-import { carbonPrefix } from '../../../web-extension/src/globals/prefixSelectors.js';
 import { _initStats, camelCase } from '../helpers.js';
 
+const carbonPrefix = 'cds';
 const _carbonWebComponentsDir =
-  '../../node_modules/carbon-web-components/es/components';
+  '../../node_modules/@carbon/web-components/es/components';
 const { _stats, success } = new _initStats();
 const carbonWebComponents = {
   name: 'Carbon web components',

packages/component-list/src/libraries/carbon.js

@@ -1,8 +1,7 @@
-import * as componentList from 'carbon-components-react';
-import { carbonPrefix } from '../../../web-extension/src/globals/prefixSelectors.js';
+import * as componentList from '@carbon/react';
 import { buildReactComponentList } from '../helpers.js';
 
-const prefix = carbonPrefix + '--';
+const prefix = 'cds--';
 
 const mockedProps = {
   pageSizes: [0],

packages/component-list/src/libraries/ibm-products.js

@@ -0,0 +1,31 @@
+import fs from 'fs';
+import { pkg } from '@carbon/ibm-products';
+import { _initStats } from '../helpers.js';
+
+const { _stats, success } = new _initStats();
+const productsDir = '../../node_modules/@carbon/ibm-products/es/components';
+const products = {
+  name: 'Carbon for IBM Products',
+  components: {},
+  _stats,
+};
+const { getDevtoolsId, devtoolsAttribute } = pkg;
+
+try {
+  const components = fs.readdirSync(productsDir);
+
+  components.forEach((file) => {
+    if (file === '_Canary' || file === 'index.d.ts') {
+      return;
+    }
+
+    const identifier = `[${devtoolsAttribute}="${getDevtoolsId(file)}]`;
+
+    products.components[identifier] = file;
+    success();
+  });
+} catch (e) {
+  console.log(e);
+}
+
+export { products };

packages/component-list/src/libraries/index.js

@@ -1,6 +1,6 @@
 export * from './carbon';
 export * from './carbon-web-components';
 export * from './ibmdotcom';
-export * from './cloud-cognitive';
+export * from './ibm-products';
 export * from './security';
 export * from './cloud-pal';

packages/component-list/src/libraries/security.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import * as securityComponentList from '@carbon/ibm-security';
-import * as carbonComponentList from 'carbon-components-react';
+import * as carbonComponentList from '@carbon/react';
 import { getSecurityPrefix } from '../../../web-extension/src/globals/prefixSelectors.js';
 import { buildReactComponentList } from '../helpers.js';
 

packages/utilities/package.json

@@ -32,7 +32,7 @@
   },
   "homepage": "https://github.com/carbon-design-system/devtools#readme",
   "dependencies": {
-    "@carbon/layout": "^10.29.0"
+    "@carbon/layout": "^11.26.0"
   },
   "devDependencies": {
     "eslint": "^9.9.0",

packages/utilities/src/activeTab.js

@@ -1,11 +1,11 @@
 function activeTab(callback) {
-  chrome.tabs.query({ currentWindow: true, active: true }, (tabs) =>
+  chrome.tabs.query({ active: true }, (tabs) =>
     callback(tabs[0])
   );
 }
 
 async function activeTabAsync() {
-  const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
+  const tabs = await chrome.tabs.query({ active: true });
   return tabs[0];
 }
 

packages/web-extension/package.json

@@ -20,20 +20,12 @@
     "launch:firefox:dev": "web-ext run --start-url \"about:debugging#/runtime/this-firefox\" --source-dir ./dist/"
   },
   "dependencies": {
-    "@carbon/colors": "^10.30.0",
-    "@carbon/devtools-component-list": "^2.7.7",
-    "@carbon/grid": "^10.33.0",
-    "@carbon/ibm-products": "^1.2.4",
-    "@carbon/ibm-security": "^1.31.0",
-    "@carbon/ibmdotcom-react": "^1.27.0",
-    "@carbon/ibmdotcom-utilities": "^1.27.0",
-    "@carbon/icons": "^10.37.0",
-    "@carbon/layout": "^10.29.0",
-    "@carbon/motion": "^10.22.0",
-    "@carbon/themes": "^10.40.0",
-    "@carbon/type": "^10.33.0",
-    "carbon-components": "^10.41.0",
-    "carbon-components-react": "^7.41.0",
+    "@carbon/ibm-products": "^2.48.0",
+    "@carbon/ibm-security": "^2.15.0",
+    "@carbon/ibmdotcom-utilities": "^2.12.0",
+    "@carbon/ibmdotcom-web-components": "^2.12.0",
+    "@carbon/react": "^1.65.0",
+    "@carbon/web-components": "^2.12.0",
     "color": "^4.2.3",
     "node-fetch": "^3.3.2",
     "url": "^0.11.4"
@@ -64,11 +56,11 @@
     "prettier": "^2.8.8",
     "prettier-config-carbon": "^0.11.0",
     "prop-types": "^15.8.1",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-svg-loader": "^3.0.3",
     "rimraf": "^6.0.1",
-    "sass": "1.77.8",
+    "sass": "^1.78.0",
     "sass-loader": "^16.0.0",
     "style-loader": "^4.0.0",
     "stylelint": "^15.0.0",

packages/web-extension/src/globals/options.js

@@ -1,7 +1,9 @@
-import AlignHorizontalLeft from '@carbon/icons/svg/32/align--horizontal-left.svg';
-import AlignHorizontalCenter from '@carbon/icons/svg/32/align--horizontal-center.svg';
-import AlignHorizontalRight from '@carbon/icons/svg/32/align--horizontal-right.svg';
-import FitToWidth from '@carbon/icons/svg/32/fit-to-width.svg';
+import {
+  AlignHorizontalLeft,
+  AlignHorizontalCenter,
+  AlignHorizontalRight,
+  FitToWidth,
+} from '@carbon/icons-react';
 
 const positions = {
   'Full width': FitToWidth,

packages/web-extension/src/globals/prefixSelectors.js

@@ -1,7 +1,7 @@
 import pkg from '@carbon/ibm-products/es/global/js/package-settings';
 import dotcomSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings';
 import { getComponentNamespace as getSecurityPrefix } from '@carbon/ibm-security/es/globals/namespace';
-import carbonSettings from 'carbon-components/es/globals/js/settings';
+import carbonSettings from '@carbon/web-components/es/globals/settings';
 
 const {
   devtoolsAttribute: cloudCognitiveDevtoolsAttribute,

packages/web-extension/src/globals/setPrefix.js

@@ -1,3 +1,4 @@
-import settings from 'carbon-components/es/globals/js/settings';
+/* eslint-disable no-import-assign */
+import * as settings from '@carbon/web-components/es/globals/settings.js';
 settings.carbonPrefix = settings.prefix;
-settings.prefix = 'bx-dev';
+settings.prefix = `${settings.prefix}-dev`;

packages/web-extension/src/inject/components/BreakpointLabel/index.js

@@ -1,4 +1,4 @@
-import settings from 'carbon-components/es/globals/js/settings';
+import * as settings from '@carbon/web-components/es/globals/settings.js';
 import { getStorage } from '@carbon/devtools-utilities/src/getStorage';
 import { storageItemChanged } from '@carbon/devtools-utilities/src/storageItemChanged';
 // import { defaults } from '../../../globals/defaults';

packages/web-extension/src/inject/components/BreakpointLabel/index.scss

@@ -1,8 +1,17 @@
 /* stylelint-disable a11y/media-prefers-reduced-motion */
+@use 'sass:map';
+@use 'sass:math';
+@use '@carbon/react/scss/breakpoint';
+@use '@carbon/react/scss/grid';
+@use '@carbon/react/scss/spacing';
+@use '@carbon/react/scss/theme';
+@use '@carbon/react/scss/type';
+@use '../../vars.scss' as *;
+
 @mixin label-maker($breakpoints) {
   &::after {
     @each $breakpoint in map-keys($breakpoints) {
-      @include carbon--breakpoint($breakpoint) {
+      @include breakpoint.breakpoint($breakpoint) {
         content: 'breakpoint: #{$breakpoint}';
       }
     }
@@ -11,28 +20,28 @@
 
 @mixin breakpoint-label--theme {
   // breakpoint label theme
-  $border-style: 1px solid $ui-03;
+  $border-style: 1px solid theme.$border-subtle-01;
 
   border-top: $border-style;
   border-left: $border-style;
-  background: $ui-01;
-  color: $text-01;
+  background: theme.$layer-01;
+  color: theme.$text-primary;
 }
 
 .#{$prefix}--devtools {
-  @include label-maker($carbon--grid-breakpoints);
+  @include label-maker(grid.$grid-breakpoints);
 
   // breakpoint label
   &::after {
-    @include carbon--type-style('code-01');
-    @include carbon--font-family('mono');
+    @include type.type-style('code-01');
+    @include type.font-family('mono');
     @include breakpoint-label--theme;
 
     position: fixed;
     z-index: 4;
     right: 0;
     bottom: -33px;
-    padding: carbon--mini-units(1) ($carbon--grid-gutter / 2);
+    padding: spacing.$spacing-05 math.div(grid.$grid-gutter, 2);
     border-bottom: 0;
     transition: bottom $transition-in;
 

packages/web-extension/src/inject/components/Grid/2x/index.js

@@ -1,4 +1,4 @@
-import settings from 'carbon-components/es/globals/js/settings';
+import * as settings from '@carbon/web-components/es/globals/settings.js';
 import { getStorage } from '@carbon/devtools-utilities/src/getStorage';
 import { storageItemChanged } from '@carbon/devtools-utilities/src/storageItemChanged';
 import { positions } from '../../../../globals/options';

packages/web-extension/src/inject/components/Grid/index.js

@@ -1,4 +1,4 @@
-import settings from 'carbon-components/es/globals/js/settings';
+import * as settings from '@carbon/web-components/es/globals/settings.js';
 import { storageItemChanged } from '@carbon/devtools-utilities/src/storageItemChanged';
 import { getStorage } from '@carbon/devtools-utilities/src/getStorage';
 import { gridVersions } from '../../../globals/options';