@ukic/codemod 1.0.0-alpha.8 → 1.2.0

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.2.0](https://github.com/mi6/ic-ui-kit/compare/@ukic/codemod@1.0.0-alpha.8...@ukic/codemod@1.2.0) (2025-05-14)
+
+### Features
+
+- **codemod:** minor feat for v3 ([52c30ea](https://github.com/mi6/ic-ui-kit/commit/52c30eaad0c7bfe3fbb5d9be9473a7f71ce850c3))
+
+### Performance Improvements
+
+- **codemod:** added additional changes and improved performance ([753a3f9](https://github.com/mi6/ic-ui-kit/commit/753a3f924cf618490cf8624051dfda39ce590aaa))
+
+# [1.1.0](https://github.com/mi6/ic-ui-kit/compare/@ukic/codemod@1.0.0-alpha.8...@ukic/codemod@1.1.0) (2025-04-30)
+
+### Features
+
+- **codemod:** minor feat for v3 ([d51f11a](https://github.com/mi6/ic-ui-kit/commit/d51f11aea7154ad0e3df53df7221ef4b29b98082))
+
+### Performance Improvements
+
+- **codemod:** added additional changes and improved performance ([724e777](https://github.com/mi6/ic-ui-kit/commit/724e7775753aa2c55c336e84bd7e32be37cf3f9c))
+
 # [1.0.0-alpha.8](https://github.com/mi6/ic-ui-kit/compare/@ukic/codemod@1.0.0-alpha.7...@ukic/codemod@1.0.0-alpha.8) (2025-04-28)
 
 **Note:** Version bump only for package @ukic/codemod

package/README.md

@@ -11,7 +11,7 @@ Given a directory, it will scan over files and find any relevant ICDS components
 ## How to run
 
 
-This package will be usable as an executable requiring a directory and optional test boolean argument to cover tests 
+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>

package/__tests__/component-change.spec.js

@@ -1,180 +1,112 @@
-import { compareComponent } from "../sections/component-changes.js";
+import { convertComponents } 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" />
+describe("React style changes", () => {
+  it("should replace component name change", () => {
+    const stringArray = `
+        <IcDataEntity prop="value" />
       `;
-      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" />'
-      );
-    });
+
+    const result = convertComponents(stringArray);
+    expect(result.trim()).toBe('<IcDataList prop="value" />');
   });
 
-  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" >
+  it("should replace old props with new prop name", () => {
+    const stringArray = `<IcEmptyState bodyMaxLines={50} />`;
+
+    const result = convertComponents(stringArray);
+    expect(result.trim()).toBe("<IcEmptyState maxLines={50} />");
+  });
+
+  it("should replace old props with new prop name and value", () => {
+    const stringArray = `<IcSelect size="default" />`;
+
+    const result = convertComponents(stringArray);
+    expect(result.trim()).toBe(`<IcSelect size="medium" />`);
+  });
+
+  it("should replace old props with new prop name and value single quotes", () => {
+    const stringArray = `<IcSearchBar size={'default'} />`;
+
+    const result = convertComponents(stringArray);
+    expect(result.trim()).toBe(`<IcSearchBar size="medium" />`);
+  });
+
+  it("should not replace props that are not part of component", () => {
+    const stringArray = `<IcStatusTag size="default" ><IcEmptyState /></IcStatusTag>`;
+
+    const result = convertComponents(stringArray);
+    expect(result).toBe(
+      `<IcStatusTag size="medium" ><IcEmptyState /></IcStatusTag>`
+    );
+  });
+
+  it("should replace old props with new prop name and value binary switch", () => {
+    const stringArray = `<icDialog buttons="true" />`;
+
+    const result = convertComponents(stringArray);
+    expect(result.trim()).toBe(`<icDialog hideDefaultControls="false" />`);
+  });
+});
+
+describe("web-component style changes", () => {
+  it("should replace component name change", () => {
+    const stringArray = `
+    <ic-data-entity prop="value" ></ic-data-entity>
+  `;
+
+    const result = convertComponents(stringArray);
+    expect(result.trim()).toBe('<ic-data-list prop="value" ></ic-data-list>');
+  });
+
+  it("should replace component name change and ignore similar name", () => {
+    const stringArray = `<ic-card heading="test"></ic-card>
+    <ic-card-horizontal heading="test"></ic-card-horizontal>
+  `;
+
+    const result = convertComponents(stringArray);
+    expect(result.trim())
+      .toBe(`<ic-card-vertical heading="test"></ic-card-vertical>
+    <ic-card-horizontal heading="test"></ic-card-horizontal>`);
+  });
+
+  it("should replace old props with new prop name", () => {
+    const stringArray = `<ic-empty-state body-max-lines="50" />`;
+
+    const result = convertComponents(stringArray);
+    expect(result.trim()).toBe(`<ic-empty-state max-lines="50" />`);
+  });
+
+  it("should replace old props with new props simple Component not self closing", () => {
+    const stringArray = `<ic-badge text-label="value1" >
         <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" >
+      </ic-badge>`;
+
+    const result = convertComponents(stringArray);
+    expect(result).toBe(
+      `<ic-badge label="value1" >
         <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" />'
-      );
-    });
+      </ic-badge>`
+    );
+  });
+
+  it("should replace old props with new prop name and value", () => {
+    const stringArray = `<ic-accordion size="default" />`;
+
+    const result = convertComponents(stringArray);
+    expect(result.trim()).toBe(`<ic-accordion size="medium" />`);
+  });
+
+  it("should replace old props with new prop name and value multiple", () => {
+    const stringArray = `<ic-button appearance="dark" />`;
+
+    const result = convertComponents(stringArray);
+    expect(result.trim()).toBe(`<ic-button theme="light" monochrome />`);
+  });
+
+  it("should replace old props with new prop name and value binary switch", () => {
+    const stringArray = `<ic-dialog buttons="true" />`;
+
+    const result = convertComponents(stringArray);
+    expect(result.trim()).toBe(`<ic-dialog hide-default-controls="false" />`);
   });
 });

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

@@ -1,4 +1,4 @@
-import { testComparison } from "../sections/test-comparison.js";
+import { simpleTestComparison } from "../sections/simple-test-comparison";
 
 describe("compareTest", () => {
   it("should replace old props with new props simple", () => {
@@ -8,22 +8,31 @@ const stepOne = container.querySelector(
 ) 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);
+    const result = simpleTestComparison(stringArray);
     expect(result).toBe(
       `
 const stepOne = container.querySelector(
-'ic-step[step-title="Choose coffee"]',
+'ic-step[heading="Choose coffee"]',
 ) as HTMLIcStepElement;
 expect(stepOne.type).toBe(stepStates.current);`.trim()
     );
   });
+
+  it("should replace old type with new type simple", () => {
+    const stringArray =
+      `const select = dialog?.children[2] as HTMLIcSelectWithMultiElement;`.trim();
+    const result = simpleTestComparison(stringArray);
+    expect(result).toBe(
+      `const select = dialog?.children[2] as HTMLIcSelectElement;`.trim()
+    );
+  });
+
+  it("should replace old component with new component simple", () => {
+    const stringArray =
+      `expect(container.querySelectorAll("ic-data-entity")).toHaveLength(1);`.trim();
+    const result = simpleTestComparison(stringArray);
+    expect(result).toBe(
+      `expect(container.querySelectorAll("ic-data-list")).toHaveLength(1);`.trim()
+    );
+  });
 });

package/codemod.js

@@ -2,10 +2,8 @@
 import fs from "fs";
 import yargs from "yargs";
 import { searchDirectory } from "./sections/directory-search.js";
-import { compareComponent } from "./sections/component-changes.js";
+import { convertComponents } 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";
 
 /**
  *
@@ -34,11 +32,11 @@ const main = async (path, test = false) => {
   const files = await searchDirectory(path);
   files.forEach((file) => {
     const linesArray = readFileLinesToArray(file);
+    /**
+     * if file contains .spec or .test, run simple test comparison
+     */
     if (test && (file.includes(".spec.") || file.includes(".test."))) {
-      const changedFile = simpleTestComparison(linesArray, [
-        ...htmlData,
-        ...reactData,
-      ]);
+      const changedFile = simpleTestComparison(linesArray);
       if (changedFile !== linesArray) {
         fs.writeFile(file, changedFile, (err) => {
           if (err) return console.log(err);
@@ -46,10 +44,10 @@ const main = async (path, test = false) => {
         });
       }
     } else {
-      const changedComponentFile = compareComponent(linesArray, [
-        ...htmlData,
-        ...reactData,
-      ]);
+      /**
+       * run file conversion for all other files
+       */
+      const changedComponentFile = convertComponents(linesArray);
       if (changedComponentFile !== linesArray) {
         fs.writeFile(file, String(changedComponentFile), (err) => {
           if (err) return console.log(err);

package/data/commonChanges.js

@@ -0,0 +1,90 @@
+const appearanceLight = {
+  v2: `appearance=[{]?["']light['"][}]?`,
+  v3: `theme="dark" monochrome`,
+  type: "absolute",
+};
+
+const appearanceDark = {
+  v2: `appearance=[{]?["']dark['"][}]?`,
+  v3: `monochrome`,
+  type: "absolute",
+};
+
+const appearanceDarkNoMonochrome = {
+  v2: `appearance=[{]?["']dark['"][}]?`,
+  v3: `theme="light"`,
+  type: "absolute",
+};
+const appearanceLightNoMonochrome = {
+  v2: `appearance=[{]?["']light['"][}]?`,
+  v3: `theme="dark"`,
+  type: "absolute",
+};
+
+const appearanceLightDeprecated = {
+  v2: `light\\b(?!'|")`,
+  v3: `theme="dark"`,
+  type: "absolute",
+};
+
+const appearanceDarkIncludesMonochrome = {
+  v2: `appearance=[{]?["']dark['"][}]?`,
+  v3: `theme="light" monochrome`,
+  type: "absolute",
+};
+const appearanceOutlined = {
+  v2: `appearance=[{]?["']outlined['"][}]?`,
+  v3: `variant="outlined"`,
+  type: "absolute",
+};
+
+const appearanceOutline = {
+  v2: `appearance=[{]?["']outline['"][}]?`,
+  v3: `variant="outlined"`,
+  type: "absolute",
+};
+
+const appearanceFilled = {
+  v2: `appearance=[{]?["']filled['"][}]?`,
+  v3: `variant="filled"`,
+  type: "absolute",
+};
+
+const appearanceDefault = {
+  v2: `appearance=[{]?["']default['"][}]?`,
+  v3: `theme="light"`,
+  type: "absolute",
+};
+
+const sizeDefault = {
+  v2: `size=[{]?["']default['"][}]?`,
+  v3: 'size="medium"',
+  type: "absolute",
+};
+
+const sizeSmall = {
+  v2: "small={true}",
+  v3: `size="small"`,
+  type: "prop",
+};
+const sizeSmallAbsolute = {
+  v2: `small\\b(?!'|"|=)`,
+  v3: `size="small"`,
+  type: "absolute",
+};
+
+export {
+  appearanceDark,
+  appearanceLight,
+  appearanceLightNoMonochrome,
+  appearanceDarkIncludesMonochrome,
+  appearanceDarkNoMonochrome,
+  appearanceLightDeprecated,
+  appearanceDefault,
+  appearanceOutlined,
+  appearanceOutline,
+  appearanceFilled,
+  sizeDefault,
+  sizeSmall,
+  sizeSmallAbsolute,
+};