feat(v11): add Carbon v11 support

.gitignore

@@ -5,3 +5,4 @@ dist
 out
 .DS_Store
 .yarn/install-state.gz
+.instructions

packages/component-list/package.json

@@ -19,15 +19,20 @@
   "dependencies": {
     "@carbon/colors": "^10.37.5",
     "@carbon/ibm-products": "^1.73.6",
+    "@carbon/ibm-products-v2": "npm:@carbon/ibm-products@^2.92.1",
     "@carbon/ibm-security": "^1.47.0",
     "@carbon/ibmdotcom-react": "^1.66.1",
     "@carbon/ibmdotcom-web-components": "^1.51.1",
+    "@carbon/ibmdotcom-web-components-v2": "npm:@carbon/ibmdotcom-web-components@^2.54.0",
     "@carbon/icons-react": "^10.49.6",
     "@carbon/import-once": "^10.7.2",
     "@carbon/layout": "^10.37.5",
     "@carbon/motion": "^10.29.5",
+    "@carbon/react": "^1.109.0",
     "@carbon/themes": "^10.55.6",
+    "@carbon/themes-v11": "npm:@carbon/themes@^11.75.0",
     "@carbon/type": "^10.45.6",
+    "@carbon/web-components": "^2.56.0",
     "carbon-components": "^10.59.2",
     "carbon-components-react": "^7.60.5",
     "carbon-icons": "^7.0.7",

packages/component-list/src/helpers.js

@@ -107,7 +107,10 @@ function buildReactComponentList(
         const candidates = [
           cleanupSelector(className, prefix),
           cleanupSelector(className, prefix, { includeModifiers: true }),
-        ].filter((candidate, index, arr) => candidate && arr.indexOf(candidate) === index);
+        ].filter(
+          (candidate, index, arr) =>
+            candidate && arr.indexOf(candidate) === index
+        );
 
         let matched = false;
 
@@ -125,7 +128,9 @@ function buildReactComponentList(
         }
 
         if (!matched) {
-          console.log(`${prefix}${compKey}: Failed to find a unique identifier.`);
+          console.log(
+            `${prefix}${compKey}: Failed to find a unique identifier.`
+          );
           fail();
         }
       } else {

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

@@ -0,0 +1,171 @@
+import * as componentList from '@carbon/react';
+import { buildReactComponentList } from '../helpers.js';
+
+const prefix = 'cds--';
+
+const mockedProps = {
+  pageSizes: [0],
+  items: [],
+};
+
+// Components that fail auto-detection and need manual selectors
+const ignoredComponents = [
+  'ActionableNotification',
+  'Breadcrumb',
+  'BreadcrumbItem',
+  'ComboBox',
+  'ContentSwitcher',
+  'DataTable',
+  'DatePicker',
+  'ExpandableSearch',
+  'ExpandableTile',
+  'FileUploader',
+  'FileUploaderSkeleton',
+  'FileUploaderItem',
+  'Form',
+  'FormItem',
+  'HeaderContainer',
+  'HeaderNavigation',
+  'Layer',
+  'Modal',
+  'ModalFooter',
+  'ModalHeader',
+  'MultiSelect',
+  'NumberInput',
+  'NumberInputSkeleton',
+  'OrderedList',
+  'OverflowMenu',
+  'PasswordInput',
+  'ProgressIndicator',
+  'RadioButtonGroup',
+  'RadioButtonSkeleton',
+  'Select',
+  'SelectSkeleton',
+  'SideNavLink',
+  'SideNavMenu',
+  'SkeletonIcon',
+  'SkeletonPlaceholder',
+  'Slider',
+  'SliderSkeleton',
+  'Stack',
+  'SwitcherDivider',
+  'Tab',
+  'TableBatchAction',
+  'TableBody',
+  'TableCell',
+  'TableHead',
+  'TableHeader',
+  'TableRow',
+  'TableSelectRow',
+  'TextArea',
+  'TextAreaSkeleton',
+  'TextInputSkeleton',
+  'Tile',
+  'TileAboveTheFoldContent',
+  'TileBelowTheFoldContent',
+  'TimePicker',
+  'TimePickerSelect',
+  'Toggle',
+  'ToggleSkeleton',
+  'TooltipDefinition',
+  'UnorderedList',
+];
+
+// v11 cds-- selectors for components that can't be auto-detected
+const manualComponentSelectors = {
+  ActionableNotification: '.cds--actionable-notification',
+  Breadcrumb: '.cds--breadcrumb',
+  BreadcrumbItem: '.cds--breadcrumb-item',
+  ComboBox: '.cds--combo-box',
+  ContentSwitcher: '.cds--content-switcher',
+  DataTable: 'table.cds--data-table',
+  DatePicker: '.cds--date-picker',
+  ExpandableSearch: '.cds--search--expandable',
+  ExpandableTile: '.cds--tile--expandable',
+  FileUploader: '.cds--file',
+  FileUploaderSkeleton: '.cds--file.cds--skeleton',
+  FileUploaderItem: '.cds--file__selected-file',
+  Form: '.cds--form',
+  FormItem: '.cds--form-item',
+  HeaderContainer: '.cds--header',
+  HeaderNavigation: '.cds--header__nav',
+  Layer: '.cds--layer',
+  Modal: '.cds--modal',
+  ModalFooter: '.cds--modal-footer',
+  ModalHeader: '.cds--modal-header',
+  MultiSelect: '.cds--multi-select',
+  NumberInput: '.cds--number',
+  NumberInputSkeleton: '.cds--number.cds--skeleton',
+  OrderedList: '.cds--list--ordered',
+  OverflowMenu: '.cds--overflow-menu',
+  PasswordInput: '.cds--text-input-wrapper--password',
+  ProgressIndicator: '.cds--progress',
+  RadioButtonGroup: '.cds--radio-button-group',
+  RadioButtonSkeleton: '.cds--radio-button.cds--skeleton',
+  Select: '.cds--select',
+  SelectSkeleton: '.cds--select.cds--skeleton',
+  SideNavLink: '.cds--side-nav__link',
+  SideNavMenu: '.cds--side-nav__menu',
+  SkeletonIcon: '.cds--skeleton__icon',
+  SkeletonPlaceholder: '.cds--skeleton__placeholder',
+  Slider: '.cds--slider',
+  SliderSkeleton: '.cds--slider.cds--skeleton',
+  Stack: '.cds--stack',
+  SwitcherDivider: '.cds--switcher__item',
+  Tab: '.cds--tabs',
+  TableBatchAction: '.cds--batch-actions__action',
+  TableBody: 'table.cds--data-table tbody',
+  TableCell: 'table.cds--data-table tbody td',
+  TableHead: 'table.cds--data-table thead',
+  TableHeader: 'table.cds--data-table thead th',
+  TableRow: 'table.cds--data-table tbody tr',
+  TableSelectRow: 'table.cds--data-table tbody tr .cds--checkbox',
+  TextArea: '.cds--text-area',
+  TextAreaSkeleton: '.cds--text-area--skeleton',
+  TextInputSkeleton: '.cds--text-input--skeleton',
+  Tile: '.cds--tile',
+  TileAboveTheFoldContent: '.cds--tile-content__above-the-fold',
+  TileBelowTheFoldContent: '.cds--tile-content__below-the-fold',
+  TimePicker: '.cds--time-picker',
+  TimePickerSelect: '.cds--time-picker__select',
+  Toggle: '.cds--toggle',
+  ToggleSkeleton: '.cds--toggle.cds--skeleton',
+  TooltipDefinition: '.cds--definition-tooltip',
+  UnorderedList: '.cds--list--unordered',
+};
+
+const filterByTheseComponents = [];
+
+const { _stats, ...components } = buildReactComponentList(
+  componentList,
+  prefix,
+  mockedProps,
+  [],
+  filterByTheseComponents,
+  ignoredComponents
+);
+
+const existingComponentNames = new Set(Object.values(components));
+let manualAddedCount = 0;
+
+Object.entries(manualComponentSelectors).forEach(([name, selector]) => {
+  if (!selector || existingComponentNames.has(name)) {
+    return;
+  }
+
+  components[selector] = name;
+  existingComponentNames.add(name);
+  manualAddedCount += 1;
+});
+
+_stats.success += manualAddedCount;
+_stats.total += manualAddedCount;
+
+const carbonReactV11 = {
+  name: 'Carbon v11',
+  version: 'v11',
+  components,
+  _stats,
+};
+
+export { carbonReactV11 };

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

@@ -0,0 +1,30 @@
+import fs from 'fs';
+import { carbonV11Prefix } from '../../../web-extension/src/globals/prefixSelectors.js';
+import { _initStats, camelCase } from '../helpers.js';
+
+const _carbonWebComponentsV11Dir =
+  '../../node_modules/@carbon/web-components/es/components';
+const { _stats, success } = new _initStats();
+const carbonWebComponentsV11 = {
+  name: 'Carbon web components',
+  version: 'v11',
+  components: {},
+  _stats,
+};
+
+try {
+  const components = fs.readdirSync(_carbonWebComponentsV11Dir);
+
+  components.forEach((file) => {
+    const name = camelCase(file.replace(/-/g, ' '));
+    // @carbon/web-components v2 uses `cds-` prefixed custom elements
+    const identifier = `${carbonV11Prefix}-${file}`;
+
+    carbonWebComponentsV11.components[identifier] = name;
+    success();
+  });
+} catch (e) {
+  console.log(e);
+}
+
+export { carbonWebComponentsV11 };

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

@@ -175,6 +175,7 @@ _stats.total += manualAddedCount;
 
 const carbonReact = {
   name: 'Carbon',
+  version: 'v10',
   components,
   _stats,
 };

packages/component-list/src/libraries/cloud-cognitive-v11.js

@@ -0,0 +1,36 @@
+import * as _CloudCognitiveV11 from '@carbon/ibm-products-v2';
+import { _initStats } from '../helpers.js';
+
+const { _stats, success } = new _initStats();
+
+let {
+  pkg: {
+    devtoolsAttribute: cloudCognitiveDevtoolsAttributeV11,
+    getDevtoolsId: getCloudCognitiveDevtoolsIdV11,
+  },
+  ...cloudCognitiveV11
+} = _CloudCognitiveV11;
+
+cloudCognitiveV11 = Object.values(cloudCognitiveV11).reduce(
+  (components, { displayName }) => {
+    components[
+      `[${cloudCognitiveDevtoolsAttributeV11}="${getCloudCognitiveDevtoolsIdV11(
+        displayName
+      )}"]`
+    ] = displayName;
+
+    success();
+
+    return components;
+  },
+  {}
+);
+
+cloudCognitiveV11 = {
+  name: 'Carbon for IBM Products',
+  version: 'v11',
+  components: cloudCognitiveV11,
+  _stats,
+};
+
+export { cloudCognitiveV11 };

packages/component-list/src/libraries/ibmdotcom-v11.js

@@ -0,0 +1,29 @@
+import fs from 'fs';
+import { dotcomPrefix } from '../../../web-extension/src/globals/prefixSelectors.js';
+import { _initStats, camelCase } from '../helpers.js';
+
+const _ibmdotcomWebComponentsV11Dir =
+  '../../node_modules/@carbon/ibmdotcom-web-components-v2/es/components';
+const { _stats, success } = new _initStats();
+const ibmdotcomV11 = {
+  name: 'Carbon for IBM.com',
+  version: 'v11',
+  components: {},
+  _stats,
+};
+
+try {
+  const components = fs.readdirSync(_ibmdotcomWebComponentsV11Dir);
+
+  components.forEach((file) => {
+    const name = camelCase(file.replace(/-/g, ' ')).replace('Cta', 'CTA');
+    const identifier = `[data-autoid="${dotcomPrefix}--${file}"]`;
+
+    ibmdotcomV11.components[identifier] = name;
+    success();
+  });
+} catch (e) {
+  console.log(e);
+}
+
+export { ibmdotcomV11 };

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

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

packages/component-list/webpack.js

@@ -17,8 +17,26 @@ module.exports = {
           loader: 'babel-loader',
         },
       },
+      // Allow ESM modules in node_modules (e.g. @carbon/react, @floating-ui)
+      // to be resolved without requiring fully-specified extensions.
+      {
+        test: /\.m?js/,
+        include: /node_modules/,
+        resolve: {
+          fullySpecified: false,
+        },
+      },
     ],
   },
+  resolve: {
+    extensions: ['.js', '.jsx', '.mjs'],
+    alias: {
+      // React 16 does not ship jsx-runtime; provide a compatibility shim path
+      'react/jsx-runtime': require.resolve('react/cjs/react.development.js'),
+      'react/jsx-dev-runtime':
+        require.resolve('react/cjs/react.development.js'),
+    },
+  },
   output: {
     filename: 'index.js',
     path: path.resolve(__dirname, 'dist'),

packages/web-extension/package.json

@@ -1,8 +1,8 @@
 {
-  "name": "carbon-devtools-v10",
-  "version": "2.8.6",
+  "name": "carbon-devtools",
+  "version": "3.0.0",
   "private": true,
-  "description": "A basic set of tools for teams building live Carbon pages for Carbon v10.",
+  "description": "A basic set of tools for teams building live Carbon pages for Carbon v10 and v11.",
   "main": "dist/manifest.json",
   "scripts": {
     "build": "webpack --config webpack.prod.js",
@@ -24,15 +24,20 @@
     "@carbon/devtools-component-list": "^2.8.4",
     "@carbon/grid": "^10.43.5",
     "@carbon/ibm-products": "^1.73.6",
+    "@carbon/ibm-products-v2": "npm:@carbon/ibm-products@^2.92.1",
     "@carbon/ibm-security": "^1.47.0",
     "@carbon/ibmdotcom-react": "^1.66.1",
     "@carbon/ibmdotcom-utilities": "^1.66.1",
+    "@carbon/ibmdotcom-web-components-v2": "npm:@carbon/ibmdotcom-web-components@^2.54.0",
     "@carbon/icons": "^10.48.6",
     "@carbon/import-once": "^10.7.2",
     "@carbon/layout": "^10.37.5",
     "@carbon/motion": "^10.29.5",
+    "@carbon/react": "^1.109.0",
     "@carbon/themes": "^10.55.6",
+    "@carbon/themes-v11": "npm:@carbon/themes@^11.75.0",
     "@carbon/type": "^10.45.6",
+    "@carbon/web-components": "^2.56.0",
     "carbon-components": "^10.59.2",
     "carbon-components-react": "^7.60.5",
     "carbon-icons": "^7.0.7",