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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ornikar/kitt-universal",
-  "version": "27.4.0",
+  "version": "27.5.1-canary.eac3fc19869888632e3a59913cf9f700a72b0dad.0",
   "license": "MIT",
   "repository": {
     "directory": "@ornikar/kitt-universal",

package/scripts/transformers/__testfixtures__/card-modal/basic.input.js

@@ -0,0 +1,19 @@
+function Test() {
+  return (
+    <CardModal
+      header={<CardModal.Header title="With Header and Body" />}
+      body={
+        <CardModal.Body>
+          <LoremIpsum />
+        </CardModal.Body>
+      }
+      footer={
+        <CardModal.Footer shouldHandleBottomNotch={false}>
+          <Button stretch type="primary">
+            With Body and Footer
+          </Button>
+        </CardModal.Footer>
+      }
+    />
+  );
+}

package/scripts/transformers/__testfixtures__/card-modal/basic.output.js

@@ -0,0 +1,15 @@
+function Test() {
+  return (
+    <CardModal>
+      <CardModal.Header title="With Header and Body" />
+      <CardModal.Body>
+        <LoremIpsum />
+      </CardModal.Body>
+      <CardModal.Footer shouldHandleBottomNotch={false}>
+        <Button stretch type="primary">
+          With Body and Footer
+        </Button>
+      </CardModal.Footer>
+    </CardModal>
+  );
+}

package/scripts/transformers/__testfixtures__/card-modal/withExpressions.input.js

@@ -0,0 +1,23 @@
+function Test() {
+  return (
+    <CardModal
+      header={shouldDisplayHeader ? <CardModal.Header title="With Header and Body" /> : null}
+      body={
+        shouldDisplayBody ? (
+          <View>
+            <LoremIpsum />
+          </View>
+        ) : null
+      }
+      footer={
+        shouldDisplayFooter ? (
+          <CardModal.Footer shouldHandleBottomNotch={false}>
+            <Button stretch type="primary">
+              With Body and Footer
+            </Button>
+          </CardModal.Footer>
+        ) : null
+      }
+    />
+  );
+}

package/scripts/transformers/__testfixtures__/card-modal/withExpressions.output.js

@@ -0,0 +1,19 @@
+function Test() {
+  return (
+    <CardModal>
+      {shouldDisplayHeader ? <CardModal.Header title="With Header and Body" /> : null}
+      {shouldDisplayBody ? (
+        <View>
+          <LoremIpsum />
+        </View>
+      ) : null}
+      {shouldDisplayFooter ? (
+        <CardModal.Footer shouldHandleBottomNotch={false}>
+          <Button stretch type="primary">
+            With Body and Footer
+          </Button>
+        </CardModal.Footer>
+      ) : null}
+    </CardModal>
+  );
+}

package/scripts/transformers/__testfixtures__/card-modal/wrongOrder.input.js

@@ -0,0 +1,19 @@
+function Test() {
+  return (
+    <CardModal
+      footer={
+        <CardModal.Footer shouldHandleBottomNotch={false}>
+          <Button stretch type="primary">
+            With Body and Footer
+          </Button>
+        </CardModal.Footer>
+      }
+      header={<CardModal.Header title="With Header and Body" />}
+      body={
+        <CardModal.Body>
+          <LoremIpsum />
+        </CardModal.Body>
+      }
+    />
+  );
+}

package/scripts/transformers/__testfixtures__/card-modal/wrongOrder.output.js

@@ -0,0 +1,15 @@
+function Test() {
+  return (
+    <CardModal>
+      <CardModal.Header title="With Header and Body" />
+      <CardModal.Body>
+        <LoremIpsum />
+      </CardModal.Body>
+      <CardModal.Footer shouldHandleBottomNotch={false}>
+        <Button stretch type="primary">
+          With Body and Footer
+        </Button>
+      </CardModal.Footer>
+    </CardModal>
+  );
+}

package/scripts/transformers/__testfixtures__/fullscreen-modal/basic.input.js

@@ -0,0 +1,19 @@
+function Test() {
+  return (
+    <FullscreenModal
+      header={<FullscreenModal.Header title="With Header and Body" />}
+      body={
+        <FullscreenModal.Body>
+          <LoremIpsum />
+        </FullscreenModal.Body>
+      }
+      footer={
+        <FullscreenModal.Footer shouldHandleBottomNotch={false}>
+          <Button stretch type="primary">
+            With Body and Footer
+          </Button>
+        </FullscreenModal.Footer>
+      }
+    />
+  );
+}

package/scripts/transformers/__testfixtures__/fullscreen-modal/basic.output.js

@@ -0,0 +1,15 @@
+function Test() {
+  return (
+    <FullscreenModal>
+      <FullscreenModal.Header title="With Header and Body" />
+      <FullscreenModal.Body>
+        <LoremIpsum />
+      </FullscreenModal.Body>
+      <FullscreenModal.Footer shouldHandleBottomNotch={false}>
+        <Button stretch type="primary">
+          With Body and Footer
+        </Button>
+      </FullscreenModal.Footer>
+    </FullscreenModal>
+  );
+}

package/scripts/transformers/__testfixtures__/fullscreen-modal/withExpressions.input.js

@@ -0,0 +1,23 @@
+function Test() {
+  return (
+    <FullscreenModal
+      header={shouldDisplayHeader ? <FullscreenModal.Header title="With Header and Body" /> : null}
+      body={
+        shouldDisplayBody ? (
+          <View>
+            <LoremIpsum />
+          </View>
+        ) : null
+      }
+      footer={
+        shouldDisplayFooter ? (
+          <FullscreenModal.Footer shouldHandleBottomNotch={false}>
+            <Button stretch type="primary">
+              With Body and Footer
+            </Button>
+          </FullscreenModal.Footer>
+        ) : null
+      }
+    />
+  );
+}

package/scripts/transformers/__testfixtures__/fullscreen-modal/withExpressions.output.js

@@ -0,0 +1,19 @@
+function Test() {
+  return (
+    <FullscreenModal>
+      {shouldDisplayHeader ? <FullscreenModal.Header title="With Header and Body" /> : null}
+      {shouldDisplayBody ? (
+        <View>
+          <LoremIpsum />
+        </View>
+      ) : null}
+      {shouldDisplayFooter ? (
+        <FullscreenModal.Footer shouldHandleBottomNotch={false}>
+          <Button stretch type="primary">
+            With Body and Footer
+          </Button>
+        </FullscreenModal.Footer>
+      ) : null}
+    </FullscreenModal>
+  );
+}

package/scripts/transformers/__testfixtures__/fullscreen-modal/wrongOrder.input.js

@@ -0,0 +1,19 @@
+function Test() {
+  return (
+    <FullscreenModal
+      footer={
+        <FullscreenModal.Footer shouldHandleBottomNotch={false}>
+          <Button stretch type="primary">
+            With Body and Footer
+          </Button>
+        </FullscreenModal.Footer>
+      }
+      header={<FullscreenModal.Header title="With Header and Body" />}
+      body={
+        <FullscreenModal.Body>
+          <LoremIpsum />
+        </FullscreenModal.Body>
+      }
+    />
+  );
+}

package/scripts/transformers/__testfixtures__/fullscreen-modal/wrongOrder.output.js

@@ -0,0 +1,15 @@
+function Test() {
+  return (
+    <FullscreenModal>
+      <FullscreenModal.Header title="With Header and Body" />
+      <FullscreenModal.Body>
+        <LoremIpsum />
+      </FullscreenModal.Body>
+      <FullscreenModal.Footer shouldHandleBottomNotch={false}>
+        <Button stretch type="primary">
+          With Body and Footer
+        </Button>
+      </FullscreenModal.Footer>
+    </FullscreenModal>
+  );
+}

package/scripts/transformers/__testfixtures__/navigation-modal/basic.input.js

@@ -0,0 +1,19 @@
+function Test() {
+  return (
+    <NavigationModal
+      header={<NavigationModal.Header title="With Header and Body" />}
+      body={
+        <NavigationModal.Body>
+          <LoremIpsum />
+        </NavigationModal.Body>
+      }
+      footer={
+        <NavigationModal.Footer shouldHandleBottomNotch={false}>
+          <Button stretch type="primary">
+            With Body and Footer
+          </Button>
+        </NavigationModal.Footer>
+      }
+    />
+  );
+}

package/scripts/transformers/__testfixtures__/navigation-modal/basic.output.js

@@ -0,0 +1,15 @@
+function Test() {
+  return (
+    <NavigationModal>
+      <NavigationModal.Header title="With Header and Body" />
+      <NavigationModal.Body>
+        <LoremIpsum />
+      </NavigationModal.Body>
+      <NavigationModal.Footer shouldHandleBottomNotch={false}>
+        <Button stretch type="primary">
+          With Body and Footer
+        </Button>
+      </NavigationModal.Footer>
+    </NavigationModal>
+  );
+}

package/scripts/transformers/__testfixtures__/navigation-modal/withExpressions.input.js

@@ -0,0 +1,23 @@
+function Test() {
+  return (
+    <NavigationModal
+      header={shouldDisplayHeader ? <NavigationModal.Header title="With Header and Body" /> : null}
+      body={
+        shouldDisplayBody ? (
+          <View>
+            <LoremIpsum />
+          </View>
+        ) : null
+      }
+      footer={
+        shouldDisplayFooter ? (
+          <NavigationModal.Footer shouldHandleBottomNotch={false}>
+            <Button stretch type="primary">
+              With Body and Footer
+            </Button>
+          </NavigationModal.Footer>
+        ) : null
+      }
+    />
+  );
+}

package/scripts/transformers/__testfixtures__/navigation-modal/withExpressions.output.js

@@ -0,0 +1,19 @@
+function Test() {
+  return (
+    <NavigationModal>
+      {shouldDisplayHeader ? <NavigationModal.Header title="With Header and Body" /> : null}
+      {shouldDisplayBody ? (
+        <View>
+          <LoremIpsum />
+        </View>
+      ) : null}
+      {shouldDisplayFooter ? (
+        <NavigationModal.Footer shouldHandleBottomNotch={false}>
+          <Button stretch type="primary">
+            With Body and Footer
+          </Button>
+        </NavigationModal.Footer>
+      ) : null}
+    </NavigationModal>
+  );
+}

package/scripts/transformers/__testfixtures__/navigation-modal/wrongOrder.input.js

@@ -0,0 +1,19 @@
+function Test() {
+  return (
+    <NavigationModal
+      footer={
+        <NavigationModal.Footer shouldHandleBottomNotch={false}>
+          <Button stretch type="primary">
+            With Body and Footer
+          </Button>
+        </NavigationModal.Footer>
+      }
+      header={<NavigationModal.Header title="With Header and Body" />}
+      body={
+        <NavigationModal.Body>
+          <LoremIpsum />
+        </NavigationModal.Body>
+      }
+    />
+  );
+}

package/scripts/transformers/__testfixtures__/navigation-modal/wrongOrder.output.js

@@ -0,0 +1,15 @@
+function Test() {
+  return (
+    <NavigationModal>
+      <NavigationModal.Header title="With Header and Body" />
+      <NavigationModal.Body>
+        <LoremIpsum />
+      </NavigationModal.Body>
+      <NavigationModal.Footer shouldHandleBottomNotch={false}>
+        <Button stretch type="primary">
+          With Body and Footer
+        </Button>
+      </NavigationModal.Footer>
+    </NavigationModal>
+  );
+}

package/scripts/transformers/__tests__/card-modal.test.js

@@ -0,0 +1,10 @@
+'use strict';
+
+jest.autoMockOff();
+const { defineTest } = require('jscodeshift/dist/testUtils');
+
+const tests = ['basic', 'withExpressions', 'wrongOrder'];
+
+describe('CardModal', () => {
+  tests.forEach((test) => defineTest(__dirname, 'card-modal', null, `card-modal/${test}`));
+});

package/scripts/transformers/__tests__/fullscreen-modal.test.js

@@ -0,0 +1,10 @@
+'use strict';
+
+jest.autoMockOff();
+const { defineTest } = require('jscodeshift/dist/testUtils');
+
+const tests = ['basic', 'withExpressions', 'wrongOrder'];
+
+describe('FullscreenModal', () => {
+  tests.forEach((test) => defineTest(__dirname, 'fullscreen-modal', null, `fullscreen-modal/${test}`));
+});

package/scripts/transformers/__tests__/navigation-modal.test.js

@@ -0,0 +1,10 @@
+'use strict';
+
+jest.autoMockOff();
+const { defineTest } = require('jscodeshift/dist/testUtils');
+
+const tests = ['basic', 'withExpressions', 'wrongOrder'];
+
+describe('NavigationModal', () => {
+  tests.forEach((test) => defineTest(__dirname, 'navigation-modal', null, `navigation-modal/${test}`));
+});

package/scripts/transformers/card-modal.js

@@ -0,0 +1,101 @@
+'use strict';
+
+// Transform CardModal 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 CardModal JSX elements
+  root
+    .find(j.JSXElement, {
+      openingElement: {
+        name: {
+          name: 'CardModal',
+        },
+      },
+    })
+    .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('CardModal'));
+          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/fullscreen-modal.js

@@ -0,0 +1,101 @@
+'use strict';
+
+// Transform FullscreenModal 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 FullscreenModal JSX elements
+  root
+    .find(j.JSXElement, {
+      openingElement: {
+        name: {
+          name: 'FullscreenModal',
+        },
+      },
+    })
+    .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('FullscreenModal'));
+          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,
+  });
+};