@ornikar/kitt-universal 29.4.1-canary.ee3a5de11ca14467578621a40a921148838ee329.0 → 29.4.2-canary.0e4f130cb45a177a7fdd9a15817918e986eb8cd4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ornikar/kitt-universal",
-  "version": "29.4.1-canary.ee3a5de11ca14467578621a40a921148838ee329.0",
+  "version": "29.4.2-canary.0e4f130cb45a177a7fdd9a15817918e986eb8cd4.0",
   "license": "MIT",
   "repository": {
     "directory": "@ornikar/kitt-universal",

package/scripts/codemods/__testfixtures__/illustration-imports/illustration-imports.input.tsx

@@ -0,0 +1,11 @@
+import { Illustration, MeetingPoint } from '@ornikar/illustration-images';
+
+export function Component() {
+  return (
+    <Illustration
+      image={<MeetingPoint />}
+      width="app.shop.page.discoverIntructorsActionCard.illustration.size"
+      height="app.shop.page.discoverIntructorsActionCard.illustration.size"
+    />
+  );
+}

package/scripts/codemods/__testfixtures__/illustration-imports/illustration-imports.output.tsx

@@ -0,0 +1,13 @@
+import { Illustration } from '@ornikar/illustration-images';
+
+import MeetingPointIllustration from '@ornikar/illustration-images/assets/meeting-point.png';
+
+export function Component() {
+  return (
+    <Illustration
+      source={MeetingPointIllustration}
+      width="app.shop.page.discoverIntructorsActionCard.illustration.size"
+      height="app.shop.page.discoverIntructorsActionCard.illustration.size"
+    />
+  );
+}

package/scripts/codemods/__tests__/illustration-imports.test.js

@@ -0,0 +1,12 @@
+'use strict';
+
+jest.autoMockOff();
+const { defineTest } = require('jscodeshift/dist/testUtils');
+
+const tests = ['illustration-imports'];
+
+describe('IllustrationImports', () => {
+  tests.forEach((test) =>
+    defineTest(__dirname, 'illustration-imports', null, `illustration-imports/${test}`, { parser: 'tsx' }),
+  );
+});

package/scripts/codemods/illustration-imports.js

@@ -0,0 +1,184 @@
+// Codemod to migrate all illustration component imports to direct PNG asset imports and update JSX usage
+'use strict';
+
+const jscodeshift = require('jscodeshift');
+const prettier = require('prettier');
+
+// List of all illustration names and their asset filenames
+const illustrations = [
+  'AppCode',
+  'Calendar',
+  'CalendarError',
+  'CalendarSuccess',
+  'CalendarWarning',
+  'CarBackFoundations',
+  'CarBackSchoolOrnikar',
+  'CarSchool',
+  'CarSchoolOrnikar',
+  'CardCpf',
+  'ChatDots',
+  'ChatQuestion',
+  'Earth',
+  'ErrorImage',
+  'Error404',
+  'Fingerprint',
+  'FingerprintDanger',
+  'FingerprintSuccess',
+  'FingerprintWarning',
+  'Fire',
+  'Flags',
+  'Gaz',
+  'InsuranceCar',
+  'KeyCar',
+  'KeyCarAac',
+  'KeyCarApprentice',
+  'LicenceCard',
+  'LicenceCardSuccess',
+  'LicenceDanger',
+  'LicenceWarning',
+  'Lightbulb',
+  'Lock',
+  'MeetingPoint',
+  'MobileAppOrnikar',
+  'MobileLive',
+  'MobilePromo',
+  'NumberPlate',
+  'PaperDanger',
+  'PaperInformation',
+  'PaperSuccess',
+  'PaperWarning',
+  'PedestrianLight',
+  'PiggyBank',
+  'RCode',
+  'RConduite',
+  'Road',
+  'RoadAbove',
+  'RoadHorizon',
+  'RoadSign',
+  'SatisfiedOrRefilled',
+  'SeatBelt',
+  'Shield',
+  'SignArrow',
+  'SirenDanger',
+  'SirenNotification',
+  'SteeringWheelGreen',
+  'SteeringWheelRed',
+  'SteeringWheelWarning',
+  'TokenAac',
+  'TokenApprentice',
+  'TokenCheckSuccess',
+  'TokenCheckWarning',
+  'TokenDanger',
+  'TokenPause',
+  'TokenPromo',
+  'TokenQuestion',
+  'TokenRedCross',
+  'TokenWarning',
+  'Trophy',
+  'UserFrame',
+  'UserInvitation',
+  'UserPicture',
+  'UserStars',
+  'UserSupports',
+  'WorkInProgress',
+  'Wrench',
+  'Zoom',
+];
+
+function toAssetFilename(name) {
+  // Convert PascalCase to kebab-case and special cases
+  return (
+    name
+      .replace(/([a-z])([A-Z])/g, '$1-$2')
+      .replace(/([A-Z])([A-Z][a-z])/g, '$1-$2')
+      .toLowerCase() + '.png'
+  );
+}
+
+module.exports = async function transformer(fileInfo, api) {
+  const j = api.jscodeshift || jscodeshift;
+  const root = j(fileInfo.source);
+
+  // ----------- Start of transformer logic
+  // Find import { Illustration, ... } from '@ornikar/illustration-images';
+  const illustrationImport = root.find(j.ImportDeclaration, {
+    source: { value: '@ornikar/illustration-images' },
+  });
+
+  let importedIllustrations = [];
+
+  illustrationImport.forEach((path) => {
+    const specifiers = path.node.specifiers;
+    for (let i = specifiers.length - 1; i >= 0; i--) {
+      const s = specifiers[i];
+      if (s.type === 'ImportSpecifier' && illustrations.includes(s.imported.name)) {
+        importedIllustrations.push(s.imported.name);
+        // Remove from import
+        specifiers.splice(i, 1);
+      }
+    }
+  });
+
+  // Add asset imports for each illustration
+  if (importedIllustrations.length > 0) {
+    const newImports = importedIllustrations.map((name) =>
+      j.importDeclaration(
+        [j.importDefaultSpecifier(j.identifier(name + 'Illustration'))],
+        j.literal(`@ornikar/illustration-images/assets/${toAssetFilename(name)}`),
+      ),
+    );
+    let illustrationImportPath = null;
+    illustrationImport.forEach((path) => {
+      illustrationImportPath = path;
+      if (path.node.specifiers.length === 0) {
+        j(path).remove();
+        illustrationImportPath = null;
+      }
+    });
+    if (illustrationImportPath) {
+      j(illustrationImportPath).insertAfter(newImports);
+    } else {
+      // Insert asset imports at the top
+      const firstImport = root.find(j.ImportDeclaration).at(0);
+      if (firstImport.size() > 0) {
+        firstImport.insertBefore(newImports);
+      } else {
+        root.get().node.program.body.unshift(...newImports);
+      }
+    }
+  }
+
+  // Replace JSX <Illustration image={<Name />} ... /> with <Illustration source={NameIllustration} ... />
+  root
+    .find(j.JSXElement, {
+      openingElement: { name: { name: 'Illustration' } },
+    })
+    .forEach((path) => {
+      const attrs = path.node.openingElement.attributes;
+      for (let i = 0; i < attrs.length; i++) {
+        const attr = attrs[i];
+        if (
+          attr.type === 'JSXAttribute' &&
+          attr.name.name === 'image' &&
+          attr.value &&
+          attr.value.type === 'JSXExpressionContainer' &&
+          attr.value.expression.type === 'JSXElement' &&
+          illustrations.includes(attr.value.expression.openingElement.name.name)
+        ) {
+          const name = attr.value.expression.openingElement.name.name;
+          attrs[i] = j.jsxAttribute(
+            j.jsxIdentifier('source'),
+            j.jsxExpressionContainer(j.identifier(name + 'Illustration')),
+          );
+        }
+      }
+    });
+  // ----------- End of transformer logic
+
+  const output = root.toSource({ quote: 'single' });
+  const prettierConfig = await prettier.resolveConfig(fileInfo.path);
+  return prettier.format(output, {
+    ...prettierConfig,
+    filepath: fileInfo.path,
+  });
+};