@ukic/codemod 1.0.0-alpha.7 → 1.1.0

package/data/data.js

@@ -0,0 +1,494 @@
+import {
+  appearanceDark,
+  appearanceDarkIncludesMonochrome,
+  appearanceLight,
+  appearanceDefault,
+  appearanceLightDeprecated,
+  appearanceLightNoMonochrome,
+  appearanceOutline,
+  appearanceOutlined,
+  sizeDefault,
+  sizeSmall,
+  sizeSmallAbsolute,
+  appearanceFilled,
+  appearanceDarkNoMonochrome,
+} from "./commonChanges.js";
+
+export const changes = {
+  //web-components
+  "ic-accordion-group": [
+    {
+      v2: "group-title",
+      v3: "label",
+      type: "prop",
+    },
+  ],
+  "ic-accordion": [sizeDefault],
+  "ic-badge": [
+    {
+      v2: "text-label",
+      v3: "label",
+      type: "prop",
+    },
+    sizeDefault,
+  ],
+  "ic-card": [
+    {
+      v2: "ic-card",
+      v3: "ic-card-vertical",
+      type: "web-component",
+    },
+  ],
+  "ic-data-entity": [
+    sizeDefault,
+    sizeSmall,
+    sizeSmallAbsolute,
+    {
+      v2: "ic-data-entity",
+      v3: "ic-data-list",
+      type: "web-component",
+    },
+  ],
+  "ic-data-row": [sizeDefault, sizeSmall, sizeSmallAbsolute],
+  "ic-empty-state": [
+    {
+      v2: "body-max-lines",
+      v3: "max-lines",
+      type: "prop",
+    },
+  ],
+  "ic-footer-link-group": [
+    {
+      v2: "group-title",
+      v3: "label",
+      type: "prop",
+    },
+  ],
+  "ic-menu-item": [
+    {
+      v2: "keyboard-shortcut",
+      v3: "keyboard-shortcut-label",
+      type: "prop",
+    },
+    {
+      v2: "toggle-checked",
+      v3: "checked",
+      type: "prop",
+    },
+  ],
+  "ic-pagination": [
+    {
+      v2: "adjacent-count",
+      v3: "adjacent-page-count",
+      type: "prop",
+    },
+    {
+      v2: "boundary-count",
+      v3: "boundary-page-count",
+      type: "prop",
+    },
+    appearanceDark,
+    appearanceLight,
+    appearanceDefault,
+  ],
+  "ic-search-bar": [
+    sizeDefault,
+    sizeSmall,
+    sizeSmallAbsolute,
+    {
+      v2: "disable-filter",
+      v3: "disable-auto-filtering",
+      type: "prop",
+    },
+    {
+      v2: "hint-text",
+      v3: "assistive-hint-text",
+      type: "prop",
+    },
+  ],
+  "ic-select": [
+    sizeSmall,
+    sizeDefault,
+    sizeSmallAbsolute,
+    {
+      v2: "disable-filter",
+      v3: "disable-auto-filtering",
+      type: "prop",
+    },
+  ],
+  "ic-select-with-multi": [
+    sizeDefault,
+    sizeSmall,
+    sizeSmallAbsolute,
+    {
+      v2: "ic-select-with-multi",
+      v3: "ic-select",
+      type: "web-component",
+    },
+  ],
+  "ic-side-navigation": [
+    {
+      v2: "side-nav-expanded",
+      v3: "ic-side-nav-expanded",
+      type: "prop",
+    },
+  ],
+  "ic-status-tag": [
+    sizeDefault,
+    sizeSmall,
+    sizeSmallAbsolute,
+    appearanceOutlined,
+    appearanceFilled,
+  ],
+  "ic-stepper": [appearanceLightNoMonochrome, appearanceDefault],
+  "ic-step": [
+    {
+      v2: "step-type",
+      v3: "type",
+      type: "prop",
+    },
+    {
+      v2: "step-title",
+      v3: "heading",
+      type: "prop",
+    },
+    {
+      v2: "step-subtitle",
+      v3: "subheading",
+      type: "prop",
+    },
+    {
+      v2: "step-status",
+      v3: "status",
+      type: "prop",
+    },
+  ],
+  "ic-switch": [sizeDefault, sizeSmall, sizeSmallAbsolute],
+  "ic-text-field": [
+    {
+      v2: "max-length",
+      v3: "max-characters",
+      type: "prop",
+    },
+  ],
+  "ic-toggle-button": [
+    {
+      v2: "toggle-checked",
+      v3: "checked",
+      type: "prop",
+    },
+    sizeDefault,
+    appearanceDark,
+    appearanceLight,
+    appearanceDefault,
+  ],
+  "ic-button": [
+    appearanceDarkIncludesMonochrome,
+    appearanceLight,
+    appearanceDefault,
+    sizeDefault,
+  ],
+  "ic-top-navigation": [
+    {
+      v2: "top-nav-resized",
+      v3: "ic-top-nav-resized",
+      type: "prop",
+    },
+  ],
+  "ic-breadcrumb-group": [appearanceDark, appearanceLight, appearanceDefault],
+  "ic-chip": [appearanceOutline, appearanceFilled, sizeDefault],
+  "ic-loading-indicator": [
+    appearanceDark,
+    appearanceLight,
+    sizeDefault,
+    appearanceDefault,
+  ],
+  "ic-skeleton": [
+    appearanceLightDeprecated,
+    appearanceDark,
+    appearanceLight,
+    appearanceDefault,
+  ],
+  "ic-tab-context": [appearanceDark, appearanceLight, appearanceDefault],
+  "ic-tree-view": [
+    sizeDefault,
+    appearanceDarkNoMonochrome,
+    appearanceLightNoMonochrome,
+    appearanceDefault,
+  ],
+  "ic-checkbox-group": [sizeDefault, sizeSmall, sizeSmallAbsolute],
+  "ic-checkbox": [sizeDefault, sizeSmall, sizeSmallAbsolute],
+  "ic-date-input": [sizeDefault],
+  "ic-date-picker": [sizeDefault],
+  "ic-hero": [sizeDefault, sizeSmall, sizeSmallAbsolute],
+  "ic-link": [appearanceDark, appearanceLight, appearanceDefault],
+  "ic-page-header": [sizeDefault, sizeSmall, sizeSmallAbsolute],
+  "ic-radio-group": [sizeDefault, sizeSmall, sizeSmallAbsolute],
+  "ic-dialog": [
+    {
+      v2: `buttons=[{]?["']true['"][}]?`,
+      v3: `hide-default-controls="false"`,
+      type: "absolute",
+    },
+    {
+      v2: `buttons=[{]?["']false['"][}]?`,
+      v3: `hide-default-controls="true"`,
+      type: "absolute",
+    },
+  ],
+  //react
+  IcAccordionGroup: [
+    {
+      v2: "groupTitle",
+      v3: "label",
+      type: "prop",
+    },
+  ],
+  IcBadge: [
+    {
+      v2: "textLabel",
+      v3: "label",
+      type: "prop",
+    },
+    sizeDefault,
+  ],
+  IcCard: [
+    {
+      v2: "IcCard",
+      v3: "IcCardVertical",
+      type: "component",
+    },
+  ],
+  IcDataEntity: [
+    sizeDefault,
+    sizeSmall,
+    sizeSmallAbsolute,
+    {
+      v2: "IcDataEntity",
+      v3: "IcDataList",
+      type: "component",
+    },
+  ],
+  IcDataRow: [sizeDefault, sizeSmall, sizeSmallAbsolute],
+  IcEmptyState: [
+    {
+      v2: "bodyMaxLines",
+      v3: "maxLines",
+      type: "prop",
+    },
+  ],
+  IcFooterLinkGroup: [
+    {
+      v2: "groupTitle",
+      v3: "label",
+      type: "prop",
+    },
+  ],
+  IcMenuItem: [
+    {
+      v2: "keyboardShortcut",
+      v3: "keyboardShortcutLabel",
+      type: "prop",
+    },
+    {
+      v2: "toggleChecked",
+      v3: "checked",
+      type: "prop",
+    },
+  ],
+  IcPagination: [
+    {
+      v2: "adjacentCount",
+      v3: "adjacentPageCount",
+      type: "prop",
+    },
+    {
+      v2: "boundaryCount",
+      v3: "boundaryPageCount",
+      type: "prop",
+    },
+    appearanceDark,
+    appearanceLight,
+    appearanceDefault,
+  ],
+  IcSearchBar: [
+    sizeDefault,
+    sizeSmall,
+    sizeSmallAbsolute,
+    {
+      v2: "disableFilter",
+      v3: "disableAutoFiltering",
+      type: "prop",
+    },
+    {
+      v2: "hintText",
+      v3: "assistiveHintText",
+      type: "prop",
+    },
+  ],
+  IcSelect: [
+    sizeDefault,
+    sizeSmall,
+    sizeSmallAbsolute,
+    {
+      v2: "disableFilter",
+      v3: "disableAutoFiltering",
+      type: "prop",
+    },
+  ],
+  IcSelectWithMulti: [
+    sizeDefault,
+    sizeSmall,
+    sizeSmallAbsolute,
+    {
+      v2: "IcSelectWithMulti",
+      v3: "IcSelect",
+      type: "component",
+    },
+  ],
+  IcSideNavigation: [
+    {
+      v2: "sideNavExpanded",
+      v3: "icSideNavExpanded",
+      type: "prop",
+    },
+    {
+      v2: "onSideNavExpanded",
+      v3: "onIcSideNavExpanded",
+      type: "prop",
+    },
+  ],
+  IcStatusTag: [
+    sizeDefault,
+    sizeSmall,
+    sizeSmallAbsolute,
+    appearanceOutlined,
+    appearanceFilled,
+  ],
+  IcStepper: [appearanceLightNoMonochrome, appearanceDefault],
+  IcStep: [
+    {
+      v2: "stepType",
+      v3: "type",
+      type: "prop",
+    },
+    {
+      v2: "stepTitle",
+      v3: "heading",
+      type: "prop",
+    },
+    {
+      v2: "stepSubtitle",
+      v3: "subheading",
+      type: "prop",
+    },
+    {
+      v2: "stepStatus",
+      v3: "status",
+      type: "prop",
+    },
+  ],
+  IcSwitch: [sizeDefault, sizeSmall, sizeSmallAbsolute],
+  IcTextField: [
+    sizeDefault,
+    sizeSmall,
+    sizeSmallAbsolute,
+    {
+      v2: "maxLength",
+      v3: "maxCharacters",
+      type: "prop",
+    },
+  ],
+  IcToggleButton: [
+    {
+      v2: "toggleChecked",
+      v3: "checked",
+      type: "prop",
+    },
+    sizeDefault,
+    appearanceDark,
+    appearanceLight,
+    appearanceDefault,
+  ],
+  IcButton: [
+    appearanceDarkIncludesMonochrome,
+    appearanceLight,
+    appearanceDefault,
+    sizeDefault,
+  ],
+  IcTopNavigation: [
+    {
+      v2: "topNavResized",
+      v3: "icTopNavResized",
+      type: "prop",
+    },
+    {
+      v2: "onTopNavResized",
+      v3: "onIcTopNavResized",
+      type: "prop",
+    },
+  ],
+  IcBreadcrumbGroup: [appearanceDark, appearanceLight, appearanceDefault],
+  IcChip: [appearanceOutline, appearanceFilled, sizeDefault],
+  IcLoadingIndicator: [
+    appearanceDark,
+    appearanceLight,
+    sizeDefault,
+    appearanceDefault,
+  ],
+  IcSkeleton: [
+    appearanceLightDeprecated,
+    appearanceDark,
+    appearanceLightNoMonochrome,
+    appearanceDefault,
+  ],
+  IcTabContext: [appearanceDark, appearanceLight, appearanceDefault],
+  IcTreeView: [
+    sizeDefault,
+    appearanceDarkNoMonochrome,
+    appearanceLightNoMonochrome,
+    appearanceDefault,
+  ],
+  IcCheckboxGroup: [sizeDefault, sizeSmall, sizeSmallAbsolute],
+  IcCheckbox: [sizeDefault, sizeSmall, sizeSmallAbsolute],
+  IcDateInput: [sizeDefault],
+  IcDatePicker: [sizeDefault],
+  IcHero: [sizeDefault, sizeSmall, sizeSmallAbsolute],
+  IcLink: [appearanceDark, appearanceLight, appearanceDefault],
+  IcPageHeader: [sizeDefault, sizeSmall, sizeSmallAbsolute],
+  IcRadioGroup: [sizeDefault, sizeSmall, sizeSmallAbsolute],
+  icDialog: [
+    {
+      v2: `buttons=[{]?["']true['"][}]?`,
+      v3: `hideDefaultControls="false"`,
+      type: "absolute",
+    },
+    {
+      v2: `buttons=[{]?["']false['"][}]?`,
+      v3: `hideDefaultControls="true"`,
+      type: "absolute",
+    },
+  ],
+  //types
+  HTMLIcDataEntityElement: [
+    {
+      v2: "HTMLIcDataEntityElement",
+      v3: "HTMLIcDataListElement",
+      type: "component",
+    },
+  ],
+  HTMLIcCardElement: [
+    {
+      v2: "HTMLIcCardElement",
+      v3: "HTMLIcCardVerticalElement",
+      type: "component",
+    },
+  ],
+  HTMLIcSelectWithMultiElement: [
+    {
+      v2: "HTMLIcSelectWithMultiElement",
+      v3: "HTMLIcSelectElement",
+      type: "component",
+    },
+  ],
+};

package/jest.config.mjs

@@ -0,0 +1,15 @@
+/**
+ * For a detailed explanation regarding each configuration property, visit:
+ * https://jestjs.io/docs/configuration
+ */
+
+/** @type {import('jest').Config} */
+const config = {
+  clearMocks: true,
+  collectCoverage: true,
+  coverageDirectory: "coverage",
+  transform: {},
+  transformIgnorePatterns: ["\\\\node_modules\\\\", "\\.pnp\\.[^\\\\]+$"],
+};
+
+export default config;

package/package.json

@@ -1,15 +1,16 @@
 {
   "name": "@ukic/codemod",
-  "version": "1.0.0-alpha.7",
+  "version": "1.1.0",
   "description": "Codemod tool to help assist users upgrading from v2 to v3 of the UKIC design system",
   "bin": "./codemod.js",
   "author": "mi6",
   "type": "module",
   "scripts": {
-    "test": "jest",
+    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
     "example:cli": "node --no-warnings ./codemod.js --dir src"
   },
   "dependencies": {
+    "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
     "yargs": "^17.7.2"
   },
@@ -19,5 +20,11 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "90dbbe821cb1ed1dd483f2960367f5e1b435ad8d"
+  "devDependencies": {
+    "@babel/cli": "^7.27.0",
+    "@babel/core": "^7.26.10",
+    "@babel/preset-env": "^7.26.9",
+    "babel-jest": "^29.7.0"
+  },
+  "gitHead": "6ddd470175efc6e34d94c67fe05db42304dd4e3c"
 }

package/sections/component-changes.js

@@ -1,50 +1,63 @@
 import { generateRegex } from "./generate-regex.js";
+import { changes } from "../data/data.js";
 
-/**
- *
- * @param {*} stringArray
- * @param {*} jsonData
- * @returns File string with changes made by comparing v2 and v3 names in predefined json file
- */
-export function compareComponent(stringArray, jsonData) {
+export function convertComponents(stringArray) {
   let fileString = stringArray;
-  const componentsAffected = new Set(
-    jsonData.map((entry) => entry.componentsAffected)
-  );
+  // loop round each component
+  Object.keys(changes).forEach((component) => {
+    // find component regex (e.g. <Component ... />)
+    const regex = generateRegex(component, "prop");
 
-  componentsAffected.forEach((component) => {
-    const regex = generateRegex(
-      component,
-      jsonData.filter((field) => field.componentsAffected === component)[0].type
-    );
+    // find if component exists in file
     const match = String(fileString).match(regex);
+
+    // if there are components
     if (match) {
-      const oldProps = jsonData.reduce((total, field) => {
-        if (field.componentsAffected === component) total.push(field.v2Name);
-        return total;
-      }, []);
-      match.forEach((component) => {
-        oldProps.filter((prop) => {
-          component.includes(prop);
-        });
-        let newComponent = component;
-        oldProps.forEach((prop) => {
-          const newProp = jsonData.find((field) => field.v2Name === prop);
-          if (newProp.type === "absolute") {
-            const regex = generateRegex(newProp.v2Name, "absolute-props");
-            const exactMatch = String(newComponent).match(regex);
-            if (exactMatch) {
+      //loop each of the found components
+      match.forEach((matchComponent) => {
+        // maintain the original component for comparison
+        let newComponent = matchComponent;
+        // loop through each of the changes for the component
+        changes[component].forEach((field) => {
+          // check type of change required
+          switch (field.type) {
+            /*
+             ** if only prop name changes (e.g. prop="old" -> newProp="old")
+             */
+            case "prop":
+              newComponent = newComponent.replace(field.v2, field.v3);
+              break;
+
+            /*
+             ** if change is both prop name and value changes (e.g. prop="old" -> newProp="new")
+             */
+            case "absolute":
               newComponent = newComponent.replace(
-                exactMatch[0],
-                newProp.v3Name
+                generateRegex(field.v2, "absolute"),
+                field.v3
               );
-            }
-          } else newComponent = newComponent.replace(prop, newProp.v3Name);
+              break;
+
+            /*
+             ** component name change (e.g. <oldComponent ... /> -> <newComponent ... />)
+             */
+            case "component":
+              fileString = fileString.replace(
+                generateRegex(field.v2, "component"),
+                field.v3
+              );
+              break;
+            case "web-component":
+              fileString = fileString.replace(
+                generateRegex(field.v2, "web-component"),
+                field.v3
+              );
+              break;
+          }
         });
-        fileString = fileString.replace(component, newComponent);
+        fileString = fileString.replace(matchComponent, newComponent);
       });
     }
   });
-
   return fileString;
 }

package/sections/generate-regex.js

@@ -1,25 +1,25 @@
+const webComponentImport = "@ukic/web-components";
+const reactImport = "@ukic/react";
+const canaryWebComponentsImport = "@ukic/canary-web-components";
+const canaryReactImport = "@ukic/canary-react";
+
 /**
  *
  * @param {*} component
  * @param {*} style
  * @returns correct regex expression for the change based of predefined types in json files
  */
-
-function generateRegex(component, style) {
+export function generateRegex(component, style) {
   switch (style) {
     case "prop":
       return new RegExp(`<${component}[^\/|<]+`, "gm");
     case "component":
-      return new RegExp(`${component}\\W`, "gm");
+      return new RegExp(`${component}\\b`, "gm");
     case "web-component":
-      return new RegExp(`${component}\\b[^-]`, "gm");
+      return new RegExp(`${component}\\b(?!-)`, "gm");
     case "absolute":
-      return new RegExp(`<${component}[^\/|<]+`, "gm");
-    case "absolute-props":
       return new RegExp(`${component}`, "gm");
     case "test-simple":
       return new RegExp(`[[.]${component}\\b`, "gm");
   }
 }
-
-export { generateRegex };