@ukic/codemod 1.0.0-alpha.2

package/CHANGELOG.md

@@ -0,0 +1,14 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [1.0.0-alpha.2](https://github.com/mi6/ic-ui-kit/compare/@ukic/codemod@1.0.0-alpha.1...@ukic/codemod@1.0.0-alpha.2) (2025-01-24)
+
+**Note:** Version bump only for package @ukic/codemod
+
+# 1.0.0-alpha.1 (2025-01-22)
+
+### Features
+
+- **codemod:** codemod for v2 to v3 ([d313066](https://github.com/mi6/ic-ui-kit/commit/d313066c8dd198d206797d12bcdbc14e2fa3801f))

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 The Secret Intelligence Service (MI6)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,72 @@
+# Codemod
+
+This script is used to modify files which use ICDS components to upgrade from v2 to v3 of the ICDS library.
+
+## What is this used for
+
+This codemod has been developed to help users migrate from v2 of ICDS components to v3. 
+
+Given a directory, it will scan over files and find any relevant ICDS components that require a change either by component name or props used.
+
+## How to run
+
+
+This package will be usable as an executable requiring a directory and optional test boolean argument to cover tests 
+
+```console
+- npx @ukic/codemod <dir> <test>
+```
+
+### Options:
+
+```console
+  --dir     Directory your project is located in using ICDS components
+    [string]
+```
+```console
+  --test   By default testing is false (with exception of types)
+    [boolean]: true | false                                            
+```
+
+### Examples:
+```console
+- npx @ukic/codemod --dir ./#path/app/src/components --test true
+```
+
+or run locally via 
+
+```console
+- npm @ukic/codemod 
+- cd to codemod files
+- node ./codemod --dir ./#path/app/src/components --test false
+```  
+
+## Contributing
+
+We have a couple of resources to help you with contributing.
+
+- To find out more about the different types of contributions, the criteria, raising issues or our release roadmap, read [how to contribute to the Design System and UI Kit](https://design.sis.gov.uk/community/contribute).
+- Make sure to also read our [coding standards and technical instructions](https://github.com/mi6/ic-ui-kit/blob/main/CONTRIBUTING.md).
+- [IC Design System guidance site repository](https://github.com/mi6/ic-design-system) contains the code and content for the Design System guidance site.
+- [IC UI Kit repository](https://github.com/mi6/ic-ui-kit) contains the code and content for the web components.
+
+### Security
+
+If you've found a vulnerability, we want to know so that we can fix it. [Our security policy](https://github.com/mi6/ic-ui-kit/blob/main/SECURITY.md) tells you how to do this.
+
+## Questions about the departments
+
+The team is only able to talk about the projects we've put on GitHub 🕵️. We unfortunately can't talk about the work of our departments 😢.
+
+Visit our websites to learn more about:
+
+- The [Secret Intelligence Service (MI6)](https://www.sis.gov.uk).
+- The [Government Communications Headquarters (GCHQ)](https://www.gchq.gov.uk).
+- The [Security Service (MI5)](https://www.mi5.gov.uk).
+
+
+## License
+
+Unless stated otherwise, the codebase is released under the [MIT License](https://opensource.org/licenses/MIT). This covers both the codebase and any sample code in the documentation. The documentation is and available under the terms of the [Open Government License v3.0](https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/).
+
+© Crown copyright 2022

package/__tests__/component-change.spec.js

@@ -0,0 +1,180 @@
+import { compareComponent } from "../sections/component-changes.js";
+
+describe("compareComponent", () => {
+  describe("React style changes", () => {
+    it("should replace old props with new props simple", () => {
+      const stringArray = `
+        <ExampleComponent oldProp1="value1" oldProp2="value2" />
+      `;
+      const jsonData = [
+        {
+          componentsAffected: "ExampleComponent",
+          type: "prop",
+          v2Name: "oldProp1",
+          v3Name: "newProp1",
+        },
+        {
+          componentsAffected: "ExampleComponent",
+          type: "prop",
+          v2Name: "oldProp2",
+          v3Name: "newProp2",
+        },
+      ];
+
+      const result = compareComponent(stringArray, jsonData);
+      expect(result).toContain('newProp1="value1"');
+      expect(result).toContain('newProp2="value2"');
+    });
+
+    it("should replace old props with new props absolute varient", () => {
+      const stringArray = `<ExampleComponent oldProp1 oldProp2="oldProp1" />`;
+      const jsonData = [
+        {
+          componentsAffected: "ExampleComponent",
+          type: "absolute",
+          v2Name: "oldProp1",
+          v3Name: "newProp1",
+        },
+      ];
+
+      const result = compareComponent(stringArray, jsonData);
+      expect(result).toBe('<ExampleComponent newProp1 oldProp2="oldProp1" />');
+    });
+
+    it("should replace old props with new props simple Component", () => {
+      const stringArray = `<ExampleComponent oldProp1="value1" oldProp2="value2" />`;
+      const jsonData = [
+        {
+          componentsAffected: "ExampleComponent",
+          type: "component",
+          v2Name: "ExampleComponent",
+          v3Name: "ExampleComponentNew",
+        },
+      ];
+
+      const result = compareComponent(stringArray, jsonData);
+      expect(result).toBe(
+        '<ExampleComponentNew oldProp1="value1" oldProp2="value2" />'
+      );
+    });
+
+    it("should replace old props with new props simple Component not self closing", () => {
+      const stringArray = `<ExampleComponent oldProp1="value1" oldProp2="value2" >
+        <div>Test</div>
+      </ExampleComponent>`;
+      const jsonData = [
+        {
+          componentsAffected: "ExampleComponent",
+          type: "component",
+          v2Name: "ExampleComponent",
+          v3Name: "ExampleComponentNew",
+        },
+      ];
+
+      const result = compareComponent(stringArray, jsonData);
+      expect(result).toBe(
+        `<ExampleComponentNew oldProp1="value1" oldProp2="value2" >
+        <div>Test</div>
+      </ExampleComponentNew>`
+      );
+    });
+
+    it("should not replace old props with new props simple Component", () => {
+      const stringArray = `<ExampleComponentDifferent oldProp1="value1" oldProp2="value2" />`;
+      const jsonData = [
+        {
+          componentsAffected: "ExampleComponent",
+          type: "component",
+          v2Name: "ExampleComponent",
+          v3Name: "ExampleComponentNew",
+        },
+      ];
+
+      const result = compareComponent(stringArray, jsonData);
+      expect(result).toBe(
+        '<ExampleComponentDifferent oldProp1="value1" oldProp2="value2" />'
+      );
+    });
+  });
+
+  describe("web-component style changes", () => {
+    it("should replace old props with new props simple", () => {
+      const stringArray = `
+        <example-component oldProp1="value1" oldProp2="value2" />
+      `;
+      const jsonData = [
+        {
+          componentsAffected: "example-component",
+          type: "prop",
+          v2Name: "oldProp1",
+          v3Name: "newProp1",
+        },
+        {
+          componentsAffected: "example-component",
+          type: "prop",
+          v2Name: "oldProp2",
+          v3Name: "newProp2",
+        },
+      ];
+
+      const result = compareComponent(stringArray, jsonData);
+      expect(result).toContain('newProp1="value1"');
+      expect(result).toContain('newProp2="value2"');
+    });
+
+    it("should replace old props with new props simple Component", () => {
+      const stringArray = `<example-component oldProp1="value1" oldProp2="value2" />`;
+      const jsonData = [
+        {
+          componentsAffected: "example-component",
+          type: "web-component",
+          v2Name: "example-component",
+          v3Name: "example-component-new",
+        },
+      ];
+
+      const result = compareComponent(stringArray, jsonData);
+      expect(result).toBe(
+        '<example-component-new oldProp1="value1" oldProp2="value2" />'
+      );
+    });
+
+    it("should replace old props with new props simple Component not self closing", () => {
+      const stringArray = `<example-component oldProp1="value1" oldProp2="value2" >
+        <div>Test</div>
+      </example-component>`;
+      const jsonData = [
+        {
+          componentsAffected: "example-component",
+          type: "web-component",
+          v2Name: "example-component",
+          v3Name: "example-component-new",
+        },
+      ];
+
+      const result = compareComponent(stringArray, jsonData);
+      expect(result).toBe(
+        `<example-component-new oldProp1="value1" oldProp2="value2" >
+        <div>Test</div>
+      </example-component-new>`
+      );
+    });
+
+    it("should not replace old props with new props simple Component", () => {
+      const stringArray = `<example-component-different oldProp1="value1" oldProp2="value2" />`;
+      const jsonData = [
+        {
+          componentsAffected: "example-component",
+          type: "web-component",
+          v2Name: "example-component",
+          v3Name: "example-component-new",
+        },
+      ];
+
+      const result = compareComponent(stringArray, jsonData);
+      expect(result).toBe(
+        '<example-component-different oldProp1="value1" oldProp2="value2" />'
+      );
+    });
+  });
+});

package/__tests__/test-file-change.spec.js

@@ -0,0 +1,29 @@
+import { testComparison } from "../sections/test-comparison.js";
+
+describe("compareTest", () => {
+  it("should replace old props with new props simple", () => {
+    const stringArray = `
+const stepOne = container.querySelector(
+'ic-step[step-title="Choose coffee"]',
+) as HTMLIcStepElement;
+expect(stepOne.stepType).toBe(stepStates.current);
+      `.trim();
+    const jsonData = [
+      {
+        componentsAffected: "ic-step",
+        type: "prop",
+        v2Name: "stepType",
+        v3Name: "type",
+      },
+    ];
+
+    const result = testComparison(stringArray, jsonData);
+    expect(result).toBe(
+      `
+const stepOne = container.querySelector(
+'ic-step[step-title="Choose coffee"]',
+) as HTMLIcStepElement;
+expect(stepOne.type).toBe(stepStates.current);`.trim()
+    );
+  });
+});

package/codemod.js

@@ -0,0 +1,103 @@
+#!/usr/bin/env node
+import fs from "fs";
+import yargs from "yargs";
+import { searchDirectory } from "./sections/directory-search.js";
+import { compareComponent } from "./sections/component-changes.js";
+import { simpleTestComparison } from "./sections/simple-test-comparison.js";
+import htmlData from "./data/changes.js";
+import reactData from "./data/reactChanges.js";
+
+/**
+ *
+ * @param {*} filePath
+ * @returns list of files in the directory as strings
+ *
+ */
+function readFileLinesToArray(filePath) {
+  try {
+    const data = fs.readFileSync(filePath, "utf8");
+    return data;
+  } catch (err) {
+    console.error("Error reading file:", err);
+    return [];
+  }
+}
+
+/**
+ *
+ * @param {*} path
+ * @param {*} type
+ *
+ * main function for code mod, will convert v2 file format to v3 file format
+ */
+const main = async (path, test = false) => {
+  const files = await searchDirectory(path);
+  files.forEach((file) => {
+    const linesArray = readFileLinesToArray(file);
+    const isReact = file.includes(".tsx") || file.includes(".jsx");
+    if (test && (file.includes(".spec.") || file.includes(".test."))) {
+      const changedFile = simpleTestComparison(linesArray, [
+        ...htmlData,
+        ...reactData,
+      ]);
+      if (changedFile !== linesArray) {
+        fs.writeFile(file, changedFile, (err) => {
+          if (err) return console.log(err);
+          console.log(`${file.split("\\").slice(-1)} modified successfully`);
+        });
+      }
+    }
+    if (file.includes(`.cy.`)) {
+      const changedFile = compareComponent(linesArray, htmlData);
+      if (changedFile !== linesArray) {
+        fs.writeFile(file, changedFile, (err) => {
+          if (err) return console.log(err);
+          console.log(`${file.split("\\").slice(-1)} modified successfully`);
+        });
+      }
+    } else {
+      const changedComponentFile = compareComponent(
+        linesArray,
+        isReact ? reactData : htmlData
+      );
+      if (changedComponentFile !== linesArray) {
+        fs.writeFile(file, String(changedComponentFile), (err) => {
+          if (err) return console.log(err);
+          console.log(`${file.split("\\").slice(-1)} modified successfully`);
+        });
+      }
+    }
+  });
+};
+
+const cli = yargs(process.argv.slice(2));
+cli
+  .usage("Usage: node ./$0 [options]")
+  .example("node ./$0 --dir ./src", "execute codemod in src directory")
+  .option("dir", {
+    alias: "d",
+    describe: "Directory to migrate",
+    nargs: 1,
+    demandOption: "Directory to migrate required",
+    type: "string",
+  })
+  .option("test", {
+    alias: "t",
+    describe: "Run codemod on directory provided, if false, skip migration",
+    type: "boolean",
+    default: false,
+  })
+  .help("h")
+  .alias("h", "help")
+  .alias("v", "version")
+  .epilog("Created by ICDS ♥")
+  .parse();
+
+const { dir, test } = cli.argv;
+
+if (!dir) {
+  console.error("Please provide a directory path to the codemod");
+  process.exit(1);
+}
+
+await main(dir, test);

package/data/changes.js

@@ -0,0 +1,182 @@
+export default [
+  {
+    v2Name: "small=true",
+    v3Name: 'size="small"',
+    componentsAffected: "ic-select",
+    type: "prop",
+  },
+  {
+    v2Name: "small",
+    v3Name: 'size="small"',
+    componentsAffected: "ic-select",
+    type: "absolute",
+  },
+  {
+    v2Name: 'size="default"',
+    v3Name: 'size="medium"',
+    componentsAffected: "ic-status-tag",
+    type: "prop",
+  },
+  {
+    v2Name: 'size="default"',
+    v3Name: 'size="medium"',
+    componentsAffected: "ic-switch",
+    type: "prop",
+  },
+  {
+    v2Name: "group-title",
+    v3Name: "label",
+    componentsAffected: "ic-accordion-group",
+    type: "prop",
+  },
+  {
+    v2Name: "group-title",
+    v3Name: "label",
+    componentsAffected: "ic-footer-link-group",
+    type: "prop",
+  },
+  {
+    v2Name: "text-label",
+    v3Name: "label",
+    componentsAffected: "ic-badge",
+    type: "prop",
+  },
+  {
+    v2Name: "body-max-lines",
+    v3Name: "max-lines",
+    componentsAffected: "ic-empty-state",
+    type: "prop",
+  },
+  {
+    v2Name: "theme",
+    v3Name: "brand",
+    componentsAffected: "ic-theme",
+    type: "prop",
+  },
+  {
+    v2Name: "step-type",
+    v3Name: "type",
+    componentsAffected: "ic-step",
+    type: "prop",
+  },
+  {
+    v2Name: "step-title",
+    v3Name: "heading",
+    componentsAffected: "ic-step",
+    type: "prop",
+  },
+  {
+    v2Name: "step-subtitle",
+    v3Name: "subheading",
+    componentsAffected: "ic-step",
+    type: "prop",
+  },
+  {
+    v2Name: "step-status",
+    v3Name: "status",
+    componentsAffected: "ic-step",
+    type: "prop",
+  },
+  {
+    v2Name: "adjacent-count",
+    v3Name: "adjacent-page-count",
+    componentsAffected: "ic-pagination",
+    type: "prop",
+  },
+  {
+    v2Name: "boundary-count",
+    v3Name: "boundary-page-count",
+    componentsAffected: "ic-pagination",
+    type: "prop",
+  },
+  {
+    v2Name: "keyboard-shortcut",
+    v3Name: "keyboard-shortcut-label",
+    componentsAffected: "ic-menu-item",
+    type: "prop",
+  },
+  {
+    v2Name: "disable-filter",
+    v3Name: "disable-auto-filtering",
+    componentsAffected: "ic-search-bar",
+    type: "prop",
+  },
+  {
+    v2Name: "disable-filter",
+    v3Name: "disable-auto-filtering",
+    componentsAffected: "ic-select",
+    type: "prop",
+  },
+  {
+    v2Name: "max-length",
+    v3Name: "max-characters",
+    componentsAffected: "ic-text-field",
+    type: "prop",
+  },
+  {
+    v2Name: "toggle-checked",
+    v3Name: "checked",
+    componentsAffected: "ic-menu-item",
+    type: "prop",
+  },
+  {
+    v2Name: "toggle-checked",
+    v3Name: "checked",
+    componentsAffected: "ic-toggle-button",
+    type: "prop",
+  },
+  {
+    v2Name: "hint-text",
+    v3Name: "assistive-hint-text",
+    componentsAffected: "ic-search-bar",
+    type: "prop",
+  },
+  {
+    v2Name: "side-nav-expanded",
+    v3Name: "ic-side-nav-expanded",
+    componentsAffected: "ic-side-navigation",
+    type: "prop",
+  },
+  {
+    v2Name: "top-nav-resized",
+    v3Name: "ic-top-nav-resized",
+    componentsAffected: "ic-top-navigation",
+    type: "prop",
+  },
+  {
+    v2Name: "ic-data-entity",
+    v3Name: "ic-data-list",
+    componentsAffected: "ic-data-entity",
+    type: "web-component",
+  },
+  {
+    v2Name: "HTMLIcDataEntityElement",
+    v3Name: "HTMLIcDataListElement",
+    componentsAffected: "HTMLIcDataEntityElement",
+    type: "component",
+  },
+  {
+    v2Name: "ic-card",
+    v3Name: "ic-card-vertical",
+    componentsAffected: "ic-card",
+    type: "web-component",
+  },
+  {
+    v2Name: "HTMLIcCardElement",
+    v3Name: "HTMLIcCardVerticalElement",
+    componentsAffected: "HTMLIcCardElement",
+    type: "component",
+  },
+  {
+    v2Name: "ic-select-with-multi",
+    v3Name: "ic-select",
+    componentsAffected: "ic-select-with-multi",
+    type: "web-component",
+  },
+  {
+    v2Name: "HTMLIcSelectWithMultiElement",
+    v3Name: "HTMLIcSelectElement",
+    componentsAffected: "HTMLIcSelectWithMultiElement",
+    type: "component",
+  },
+];

package/data/ignoreList.js

@@ -0,0 +1,14 @@
+export default [
+  "node_modules",
+  ".json",
+  ".sh",
+  ".lock",
+  ".md",
+  "dist",
+  ".git",
+  ".cjs",
+  ".config",
+  ".png",
+  "LICENSE",
+  ".css",
+];

package/data/reactChanges.js

@@ -0,0 +1,200 @@
+export default [
+  {
+    v2Name: "small={true}",
+    v3Name: "size={'small'}",
+    componentsAffected: "IcSelect",
+    type: "prop",
+  },
+  {
+    v2Name: "small",
+    v3Name: "size={'small'}",
+    componentsAffected: "IcSelect",
+    type: "absolute",
+  },
+  {
+    v2Name: "small={true}",
+    v3Name: "size={'small'}",
+    componentsAffected: "IcSelect",
+    type: "prop",
+  },
+  {
+    v2Name: "size={'default'}",
+    v3Name: "size={'medium'}",
+    componentsAffected: "IcStatusTag",
+    type: "prop",
+  },
+  {
+    v2Name: "size={'default'}",
+    v3Name: "size={'medium'}",
+    componentsAffected: "IcSwitch",
+    type: "prop",
+  },
+  {
+    v2Name: "groupTitle",
+    v3Name: "label",
+    componentsAffected: "IcAccordionGroup",
+    type: "prop",
+  },
+  {
+    v2Name: "groupTitle",
+    v3Name: "label",
+    componentsAffected: "IcFooterLinkGroup",
+    type: "prop",
+  },
+  {
+    v2Name: "textLabel",
+    v3Name: "label",
+    componentsAffected: "IcBadge",
+    type: "prop",
+  },
+  {
+    v2Name: "bodyMaxLines",
+    v3Name: "maxLines",
+    componentsAffected: "IcEmptyState",
+    type: "prop",
+  },
+  {
+    v2Name: "color",
+    v3Name: "brandColor",
+    componentsAffected: "IcTheme",
+    type: "prop",
+  },
+  {
+    v2Name: "stepType",
+    v3Name: "type",
+    componentsAffected: "IcStep",
+    type: "prop",
+  },
+  {
+    v2Name: "stepTitle",
+    v3Name: "heading",
+    componentsAffected: "IcStep",
+    type: "prop",
+  },
+  {
+    v2Name: "stepSubtitle",
+    v3Name: "subheading",
+    componentsAffected: "IcStep",
+    type: "prop",
+  },
+  {
+    v2Name: "stepStatus",
+    v3Name: "status",
+    componentsAffected: "IcStep",
+    type: "prop",
+  },
+  {
+    v2Name: "adjacentCount",
+    v3Name: "adjacentPageCount",
+    componentsAffected: "IcPagination",
+    type: "prop",
+  },
+  {
+    v2Name: "boundaryCount",
+    v3Name: "boundaryPageCount",
+    componentsAffected: "IcPagination",
+    type: "prop",
+  },
+  {
+    v2Name: "keyboardShortcut",
+    v3Name: "keyboardShortcutLabel",
+    componentsAffected: "IcMenuItem",
+    type: "prop",
+  },
+  {
+    v2Name: "disableFilter",
+    v3Name: "disableAutoFiltering",
+    componentsAffected: "IcSearchBar",
+    type: "prop",
+  },
+  {
+    v2Name: "disableFilter",
+    v3Name: "disableAutoFiltering",
+    componentsAffected: "IcSelect",
+    type: "prop",
+  },
+  {
+    v2Name: "maxLength",
+    v3Name: "maxCharacters",
+    componentsAffected: "IcTextField",
+    type: "prop",
+  },
+  {
+    v2Name: "toggleChecked",
+    v3Name: "checked",
+    componentsAffected: "IcMenuItem",
+    type: "prop",
+  },
+  {
+    v2Name: "toggleChecked",
+    v3Name: "checked",
+    componentsAffected: "IcToggleButton",
+    type: "prop",
+  },
+  {
+    v2Name: "hintText",
+    v3Name: "assistiveHintText",
+    componentsAffected: "IcSearchBar",
+    type: "prop",
+  },
+  {
+    v2Name: "sideNavExpanded",
+    v3Name: "icSideNavExpanded",
+    componentsAffected: "IcSideNavigation",
+    type: "prop",
+  },
+  {
+    v2Name: "onSideNavExpanded",
+    v3Name: "onIcSideNavExpanded",
+    componentsAffected: "IcSideNavigation",
+    type: "prop",
+  },
+  {
+    v2Name: "topNavResized",
+    v3Name: "icTopNavResized",
+    componentsAffected: "IcTopNavigation",
+    type: "prop",
+  },
+  {
+    v2Name: "onTopNavResized",
+    v3Name: "onIcTopNavResized",
+    componentsAffected: "IcTopNavigation",
+    type: "prop",
+  },
+  {
+    v2Name: "IcDataEntity",
+    v3Name: "IcDataList",
+    componentsAffected: "IcDataEntity",
+    type: "component",
+  },
+  {
+    v2Name: "HTMLIcDataEntityElement",
+    v3Name: "HTMLIcDataListElement",
+    componentsAffected: "HTMLIcDataEntityElement",
+    type: "component",
+  },
+  {
+    v2Name: "IcCard",
+    v3Name: "IcCardVertical",
+    componentsAffected: "IcCard",
+    type: "component",
+  },
+  {
+    v2Name: "HTMLIcCardElement",
+    v3Name: "HTMLIcCardVerticalElement",
+    componentsAffected: "HTMLIcCardElement",
+    type: "component",
+  },
+  {
+    v2Name: "IcSelectWithMulti",
+    v3Name: "IcSelect",
+    componentsAffected: "IcSelectWithMulti",
+    type: "component",
+  },
+  {
+    v2Name: "HTMLIcSelectWithMultiElement",
+    v3Name: "HTMLIcSelectElement",
+    componentsAffected: "HTMLIcSelectWithMultiElement",
+    type: "component",
+  },
+];

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@ukic/codemod",
+  "version": "1.0.0-alpha.2",
+  "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",
+    "example:cli": "node --no-warnings ./codemod.js --dir src"
+  },
+  "dependencies": {
+    "jest-cli": "^29.7.0",
+    "yargs": "^17.7.2"
+  },
+  "license": "MIT",
+  "private": false,
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "gitHead": "aadff337c20cb1dee5e221f7e88179dc8242789e"
+}

package/sections/component-changes.js

@@ -0,0 +1,46 @@
+import { generateRegex } from "./generate-regex.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) {
+  let fileString = stringArray;
+  const componentsAffected = new Set(
+    jsonData.map((entry) => entry.componentsAffected)
+  );
+
+  componentsAffected.forEach((component) => {
+    const regex = generateRegex(
+      component,
+      jsonData.filter((field) => field.componentsAffected === component)[0].type
+    );
+    const match = String(fileString).match(regex);
+    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)
+              newComponent = newComponent.replace(prop, newProp.v3Name);
+          } else newComponent = newComponent.replace(prop, newProp.v3Name);
+        });
+        fileString = fileString.replace(component, newComponent);
+      });
+    }
+  });
+
+  return fileString;
+}

package/sections/directory-search.js

@@ -0,0 +1,36 @@
+import fs from "fs";
+import path from "path";
+import ignoreData from "../data/ignoreList.js";
+/**
+ *
+ * @param {*} directoryPath
+ * @returns a list of files relevant to the code mod changes from a given directory
+ */
+export async function searchDirectory(directoryPath) {
+  let foundFiles = [];
+  async function search(directoryPath) {
+    try {
+      const files = await fs.promises.readdir(directoryPath);
+      for (const file of files) {
+        const filePath = path.join(directoryPath, file);
+        const stats = await fs.promises.stat(filePath);
+
+        const ignored = ignoreData.reduce((acc, curr) => {
+          if (filePath.includes(curr)) {
+            return true;
+          }
+          return acc;
+        }, false);
+
+        if (stats.isDirectory() && !ignored) {
+          await search(filePath);
+        } else if (!ignored) foundFiles.push(filePath);
+      }
+    } catch (err) {
+      console.error(`Error reading directory: ${err.message}`);
+    }
+  }
+
+  await search(directoryPath);
+  return foundFiles;
+}

package/sections/generate-regex.js

@@ -0,0 +1,25 @@
+/**
+ *
+ * @param {*} component
+ * @param {*} style
+ * @returns correct regex expression for the change based of predefined types in json files
+ */
+
+function generateRegex(component, style) {
+  switch (style) {
+    case "prop":
+      return new RegExp(`<${component}([^>]+)>`, "gm");
+    case "component":
+      return new RegExp(`${component}\\W`, "gm");
+    case "web-component":
+      return new RegExp(`${component}\\b[^-]`, "gm");
+    case "absolute":
+      return new RegExp(`<${component}([^>]+)>`, "gm");
+    case "absolute-props":
+      return new RegExp(`${component}\\b[^'"]`, "gm");
+    case "test-simple":
+      return new RegExp(`[[.]${component}\\b`, "gm");
+  }
+}
+
+export { generateRegex };

package/sections/simple-test-comparison.js

@@ -0,0 +1,26 @@
+import { generateRegex } from "./generate-regex.js";
+
+/**
+ *
+ * @param {*} stringArray
+ * @param {*} jsonData
+ * @returns file string with changes made by comparing v2 and v3 names in predefined json file
+ */
+export function simpleTestComparison(stringArray, jsonData) {
+  let fileString = stringArray;
+
+  const componentsToChange = new Set(jsonData.map((entry) => entry.v2Name));
+
+  componentsToChange.forEach((component) => {
+    const regex = generateRegex(component, "test-simple");
+    const match = fileString.match(regex);
+    if (match) {
+      const newProp = jsonData.find((field) => match[0].includes(field.v2Name));
+      if (newProp) {
+        fileString = fileString.replaceAll(component, newProp.v3Name);
+      }
+    }
+  });
+
+  return fileString;
+}

package/sections/test-comparison.js

@@ -0,0 +1,56 @@
+/**
+ *
+ * @param {*} stringArray
+ * @param {*} jsonData
+ * @param {*} jsonData
+ * @returns File string with changes
+ *
+ * This function is used to compare prop name changes for components and if they are required to change in the file
+ *
+ * This is currently not in use, it will be kept here for future use as can be refactored to work with styled components if the need arises
+ */
+export function testComparison(stringArray, jsonData) {
+  let fileString = stringArray;
+
+  const componentsAffected = new Set(
+    jsonData.map((entry) => entry.componentsAffected)
+  );
+
+  componentsAffected.forEach((component) => {
+    const regex = new RegExp(
+      `const .*=.*querySelector[(]([^'"]+?).*${component}.*'`,
+      "gm"
+    );
+    const match = fileString.match(regex);
+    if (match !== null) {
+      const variableNames = match.map((line) => {
+        const split = line.split("=");
+        const variableName = split[0].replace("const", "").trim();
+        return variableName;
+      });
+
+      const variableNamesArray = Array.from(new Set(variableNames));
+      variableNamesArray.forEach((variable) => {
+        const regex = new RegExp(`${variable}[.].*?[)]`, "gm");
+        const match = fileString.match(regex);
+        if (match !== null) {
+          match.map((line) => {
+            const split = line.split(".");
+            const prop = split[1].replace(")", "");
+            const newProp = jsonData.find(
+              (field) => field.v2Name === prop
+            ).v3Name;
+
+            const newFile = fileString.replaceAll(
+              `${variable}.${prop}`,
+              `${variable}.${newProp}`
+            );
+            fileString = newFile;
+          });
+        }
+      });
+    }
+  });
+
+  return fileString;
+}