@ornikar/kitt-universal 27.4.0 → 27.5.1-canary.eac3fc19869888632e3a59913cf9f700a72b0dad.0

package/scripts/transformers/navigation-modal.js

@@ -0,0 +1,101 @@
+'use strict';
+
+// Transform NavigationModal from props-based API to children-based API
+// Converts header, body, footer props to nested children in the correct order
+
+// Use local jscodeshift instance directly
+const jscodeshift = require('jscodeshift');
+const prettier = require('prettier');
+
+module.exports = async function transformer(fileInfo, api) {
+  // Use the jscodeshift API to parse the file
+  const j = api.jscodeshift || jscodeshift;
+
+  // Parse the source code of the file
+  const root = j(fileInfo.source);
+
+  // ----------- Start of transformer logic
+
+  // Find all NavigationModal JSX elements
+  root
+    .find(j.JSXElement, {
+      openingElement: {
+        name: {
+          name: 'NavigationModal',
+        },
+      },
+    })
+    .forEach((path) => {
+      const element = path.value;
+      const { openingElement } = element;
+
+      // Extract header, body, and footer props
+      const getAttributeByName = (attributes, name) => {
+        return attributes.find((attr) => attr.type === 'JSXAttribute' && attr.name.name === name);
+      };
+
+      const headerProp = getAttributeByName(openingElement.attributes, 'header');
+      const bodyProp = getAttributeByName(openingElement.attributes, 'body');
+      const footerProp = getAttributeByName(openingElement.attributes, 'footer');
+
+      // If we found any of these props, transform the element
+      if (headerProp || bodyProp || footerProp) {
+        // Remove the header, body, and footer attributes
+        openingElement.attributes = openingElement.attributes.filter((attr) => {
+          if (attr.type !== 'JSXAttribute') return true;
+          return !['header', 'body', 'footer'].includes(attr.name.name);
+        });
+
+        // Create children array in the correct order: header, body, footer
+        const children = [];
+
+        // Helper function to extract child from prop value
+        const extractChild = (propValue) => {
+          if (propValue.type === 'JSXExpressionContainer') {
+            // Check if the expression is a simple JSX element (not a conditional/complex expression)
+            if (propValue.expression.type === 'JSXElement') {
+              // For simple JSX elements, use them directly as children
+              return propValue.expression;
+            }
+            // For complex expressions (conditionals, etc.), keep as expression container
+            return propValue;
+          }
+          return propValue;
+        };
+
+        // Add header if it exists
+        if (headerProp && headerProp.value) {
+          children.push(extractChild(headerProp.value));
+        }
+
+        // Add body if it exists
+        if (bodyProp && bodyProp.value) {
+          children.push(extractChild(bodyProp.value));
+        }
+
+        // Add footer if it exists
+        if (footerProp && footerProp.value) {
+          children.push(extractChild(footerProp.value));
+        }
+
+        // Update the element to have children instead of being self-closing
+        if (children.length > 0) {
+          element.children = children;
+          element.closingElement = j.jsxClosingElement(j.jsxIdentifier('NavigationModal'));
+          openingElement.selfClosing = false;
+        }
+      }
+    });
+
+  // ----------- End of transformer logic
+
+  // Return the modified source code after transformation
+  const output = root.toSource({ quote: 'single' });
+
+  const prettierConfig = await prettier.resolveConfig(fileInfo.path);
+
+  return prettier.format(output, {
+    ...prettierConfig,
+    filepath: fileInfo.path,
+  });
+};

package/scripts/transformers/modals.js

@@ -1,102 +0,0 @@
-'use strict';
-
-/* eslint-disable prefer-destructuring */
-/* eslint-disable unicorn/no-array-method-this-argument */
-
-// Use local jscodeshift instance directly
-const jscodeshift = require('jscodeshift');
-
-// List of modal component names we want to transform
-const MODAL_COMPONENTS = ['FullscreenModal', 'CardModal', 'NavigationModal'];
-
-module.exports = function transformer(fileInfo, api) {
-  // Use the jscodeshift API to parse the file
-  const j = api.jscodeshift || jscodeshift;
-
-  // Parse the source code of the file
-  const root = j(fileInfo.source);
-
-  // Iterate over each modal component found in the source code
-  MODAL_COMPONENTS.forEach((componentName) => {
-    // Find instances of the modal component
-    root
-      .find(j.JSXElement, {
-        openingElement: {
-          name: { type: 'JSXIdentifier', name: componentName },
-        },
-      })
-      .forEach((path) => {
-        // Get the node (the JSXElement) from the path
-        const node = path.node;
-
-        // Check if the modal component already has children or if it is self-closing
-        const hasChildren = Array.isArray(node.children) && node.children.length > 0;
-        if (!node.openingElement.selfClosing && hasChildren) {
-          // If it already has children, do nothing and skip transformation
-          return;
-        }
-
-        // Extract the attributes from the JSX element (like `header`, `body`, `footer`)
-        const attributes = node.openingElement.attributes;
-
-        // Initialize a map to hold potential new children: header, body, footer
-        const newChildrenMap = {
-          header: null,
-          body: null,
-          footer: null,
-        };
-
-        // An array to keep attributes that are not `header`, `body`, or `footer`
-        const keptAttributes = [];
-
-        // Loop over the attributes to check if any match `header`, `body`, or `footer`
-        attributes.forEach((attr) => {
-          if (
-            attr.type === 'JSXAttribute' &&
-            attr.name &&
-            Object.prototype.hasOwnProperty.call(newChildrenMap, attr.name.name)
-          ) {
-            const key = attr.name.name;
-            const value = attr.value;
-
-            // Check if the value of the attribute is an expression (like a ternary)
-            if (value?.type === 'JSXExpressionContainer') {
-              const expression = value.expression;
-
-              // If it's a JSXElement or JSXFragment, keep it as it is
-              if (j.JSXElement.check(expression) || j.JSXFragment.check(expression)) {
-                newChildrenMap[key] = expression;
-              } else {
-                // Otherwise, wrap it in an expression container to handle non-JSX expressions
-                newChildrenMap[key] = j.jsxExpressionContainer(expression);
-              }
-            }
-          } else {
-            // Keep any other attributes (that are not header/body/footer)
-            keptAttributes.push(attr);
-          }
-        });
-
-        // If no new children were found (no `header`, `body`, or `footer`), do nothing
-        if (Object.values(newChildrenMap).every((v) => v === null)) {
-          return;
-        }
-
-        // If the modal component was self-closing, convert it to a regular JSX element with children
-        if (node.openingElement.selfClosing) {
-          node.openingElement.selfClosing = false;
-          node.closingElement = j.jsxClosingElement(j.jsxIdentifier(node.openingElement.name.name));
-        }
-
-        // Retain all the other attributes and set the new ones
-        node.openingElement.attributes = keptAttributes;
-
-        // Force the order of children: header → body → footer
-        const orderedChildren = Object.values(newChildrenMap).filter(Boolean);
-        node.children = orderedChildren;
-      });
-  });
-
-  // Return the modified source code after transformation
-  return root.toSource({ quote: 'single' });
-};