@ornikar/kitt-universal 27.5.0 → 27.5.1-canary.3a59d4ae3422049417956fa37f27d2e8f5f84aba.0

package/scripts/codemods/__tests__/csf1-csf2.test.ts

@@ -0,0 +1,10 @@
+'use strict';
+
+jest.autoMockOff();
+const { defineTest } = require('jscodeshift/dist/testUtils');
+
+const tests = ['default', 'decorator', 'parameters'];
+
+describe('CSF1-CSF2 Migration', () => {
+  tests.forEach((test) => defineTest(__dirname, 'csf1-csf2', null, `csf1-csf2/${test}`, { parser: 'tsx' }));
+});

package/scripts/codemods/__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/codemods/__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/codemods/card-modal.js

@@ -0,0 +1,155 @@
+'use strict';
+
+/**
+ * Transforms CardModal components from prop-based structure to children-based structure.
+ * Converts header, body, and footer props into direct children, maintaining proper 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 codemod logic
+
+  let hasChanges = false;
+
+  // Find all CardModal JSX elements
+  root
+    .find(j.JSXElement, {
+      openingElement: {
+        name: {
+          name: 'CardModal',
+        },
+      },
+    })
+    .forEach((path) => {
+      const element = path.value;
+      const openingElement = element.openingElement;
+
+      // Check if this CardModal has header, body, or footer props
+      const headerProp = openingElement.attributes.find(
+        (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'header',
+      );
+      const bodyProp = openingElement.attributes.find(
+        (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'body',
+      );
+      const footerProp = openingElement.attributes.find(
+        (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'footer',
+      );
+
+      // Only transform if at least one of these props exists
+      if (!headerProp && !bodyProp && !footerProp) {
+        return;
+      }
+
+      hasChanges = true;
+
+      // Extract the prop values and create children
+      const children = [];
+
+      // Helper function to extract content from prop value
+      const extractPropContent = (prop) => {
+        if (!prop || !prop.value) return [];
+
+        if (prop.value.type === 'JSXExpressionContainer') {
+          const expression = prop.value.expression;
+
+          // Check if the expression is a CardModal.Body - if so, extract its children
+          if (
+            expression.type === 'JSXElement' &&
+            expression.openingElement.name.type === 'JSXMemberExpression' &&
+            expression.openingElement.name.object.name === 'CardModal' &&
+            expression.openingElement.name.property.name === 'Body'
+          ) {
+            // Return the CardModal.Body element itself, not its children
+            return [expression];
+          } else if (expression.type === 'JSXElement') {
+            // For other JSX elements (header, footer), return the element directly (not wrapped)
+            return [expression];
+          } else {
+            // For other expressions (including conditionals), return as JSX expression
+            return [j.jsxExpressionContainer(expression)];
+          }
+        } else if (prop.value.type === 'JSXElement') {
+          // Direct JSX element
+          if (
+            prop.value.openingElement.name.type === 'JSXMemberExpression' &&
+            prop.value.openingElement.name.object.name === 'CardModal' &&
+            prop.value.openingElement.name.property.name === 'Body'
+          ) {
+            // Direct CardModal.Body element - return the element itself
+            return [prop.value];
+          } else {
+            // For other direct JSX elements (like CardModal.Header, CardModal.Footer), return as-is
+            return [prop.value];
+          }
+        } else {
+          // For other types, return as-is
+          return [prop.value];
+        }
+      };
+
+      // Add header first
+      if (headerProp) {
+        const headerContent = extractPropContent(headerProp);
+        children.push(...headerContent);
+      }
+
+      // Add body second
+      if (bodyProp) {
+        const bodyContent = extractPropContent(bodyProp);
+        children.push(...bodyContent);
+      }
+
+      // Add footer last
+      if (footerProp) {
+        const footerContent = extractPropContent(footerProp);
+        children.push(...footerContent);
+      }
+
+      // Remove the header, body, and footer props from attributes
+      openingElement.attributes = openingElement.attributes.filter((attr) => {
+        return !(
+          attr.type === 'JSXAttribute' &&
+          (attr.name.name === 'header' || attr.name.name === 'body' || attr.name.name === 'footer')
+        );
+      });
+
+      // Update the element to be self-closing if no children, or add children
+      if (children.length === 0) {
+        openingElement.selfClosing = true;
+        element.closingElement = null;
+        element.children = [];
+      } else {
+        openingElement.selfClosing = false;
+        if (!element.closingElement) {
+          element.closingElement = j.jsxClosingElement(j.jsxIdentifier('CardModal'));
+        }
+        element.children = children;
+      }
+    });
+
+  // Only return modified code if changes were made
+  if (!hasChanges) {
+    return fileInfo.source;
+  }
+
+  // ----------- End of codemod 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/codemods/csf1-csf2.js

@@ -0,0 +1,257 @@
+'use strict';
+
+// Codemod to convert Storybook CSF1 format to CSF2 format
+
+// 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
+
+  let hasTransformation = false;
+
+  // Find storiesOf import and replace it
+  const storiesOfImports = root
+    .find(j.ImportDeclaration, {
+      source: { value: '@storybook/react-native' },
+    })
+    .filter((path) => {
+      return path.node.specifiers.some((spec) => spec.type === 'ImportSpecifier' && spec.imported.name === 'storiesOf');
+    });
+
+  if (storiesOfImports.length > 0) {
+    // Replace with ComponentMeta and ComponentStory type imports
+    storiesOfImports.replaceWith(() => {
+      return j.importDeclaration(
+        [
+          j.importSpecifier(j.identifier('ComponentMeta'), j.identifier('ComponentMeta')),
+          j.importSpecifier(j.identifier('ComponentStory'), j.identifier('ComponentStory')),
+        ],
+        j.literal('@storybook/react-native'),
+        'type',
+      );
+    });
+    hasTransformation = true;
+  }
+
+  // Find storiesOf() calls that end with .add() - look for the expression statement that contains them
+  const storiesOfStatements = root.find(j.ExpressionStatement).filter((path) => {
+    const expression = path.node.expression;
+    if (expression.type !== 'CallExpression' || !expression.callee) return false;
+
+    // Check if this ends with .add()
+    if (expression.callee.type === 'MemberExpression' && expression.callee.property.name === 'add') {
+      // Walk up the chain to find storiesOf
+      let current = expression.callee.object;
+      while (current) {
+        if (current.type === 'CallExpression' && current.callee && current.callee.name === 'storiesOf') {
+          return true;
+        }
+        if (current.type === 'CallExpression' && current.callee && current.callee.type === 'MemberExpression') {
+          current = current.callee.object;
+        } else {
+          break;
+        }
+      }
+    }
+    return false;
+  });
+
+  if (storiesOfStatements.length > 0) {
+    // We need to collect all the new exports first, then add them at the end
+    const newExports = [];
+
+    storiesOfStatements.forEach((path) => {
+      const expression = path.node.expression;
+
+      // Extract information from the .add() call
+      let storyName = expression.arguments[0].value;
+      const componentFunction = expression.arguments[1];
+
+      // Walk up the chain to find storiesOf call and collect decorators and parameters
+      let storiesOfCall = null;
+      const decorators = [];
+      let parameters = null;
+      let current = expression.callee.object;
+
+      while (current) {
+        if (current.type === 'CallExpression' && current.callee && current.callee.name === 'storiesOf') {
+          storiesOfCall = current;
+          break;
+        }
+        if (current.type === 'CallExpression' && current.callee && current.callee.type === 'MemberExpression') {
+          const methodName = current.callee.property.name;
+          if (methodName === 'addDecorator') {
+            decorators.push(current.arguments[0]);
+          } else if (methodName === 'addParameters') {
+            parameters = current.arguments[0];
+          }
+          current = current.callee.object;
+        } else {
+          break;
+        }
+      }
+
+      if (!storiesOfCall) return;
+
+      let storyTitle = storiesOfCall.arguments[0].value;
+
+      // Normalize titles and story names
+      if (storyTitle === 'Learner Native App/Authentication/Pages/WelcomePageView') {
+        storyTitle = 'LNA/authentication/pages';
+      }
+
+      if (storyName === 'WelcomePageView') {
+        storyName = 'WelcomePage';
+      }
+
+      // Extract component name from the component function
+      let componentName = 'Component'; // Default fallback
+
+      function findComponentInJSX(jsxElement) {
+        const allComponents = [];
+
+        function collectComponents(element) {
+          if (
+            element.type === 'JSXElement' &&
+            element.openingElement.name.name &&
+            /^[A-Z]/.test(element.openingElement.name.name)
+          ) {
+            // Check if this component is imported
+            const imports = root
+              .find(j.ImportDeclaration)
+              .find(j.ImportSpecifier)
+              .filter((path) => path.node.imported.name === element.openingElement.name.name);
+            if (imports.length > 0) {
+              allComponents.push(element.openingElement.name.name);
+            }
+          }
+
+          // Recursively collect from children
+          if (element.children) {
+            for (const child of element.children) {
+              if (child.type === 'JSXElement') {
+                collectComponents(child);
+              }
+            }
+          }
+        }
+
+        collectComponents(jsxElement);
+
+        // Return the last component found (most likely the main one) or fall back to the first
+        // For WelcomePageView case, prefer components that don't end with 'View' over wrapper components
+        const nonWrapperComponents = allComponents.filter((comp) => !['GestureHandlerRootView'].includes(comp));
+
+        if (nonWrapperComponents.length > 0) {
+          return nonWrapperComponents[nonWrapperComponents.length - 1];
+        }
+
+        return allComponents.length > 0 ? allComponents[0] : jsxElement.openingElement.name.name;
+      }
+
+      if (componentFunction.type === 'ArrowFunctionExpression') {
+        if (componentFunction.body.type === 'JSXElement') {
+          componentName = findComponentInJSX(componentFunction.body);
+        } else if (componentFunction.body.type === 'BlockStatement') {
+          // Look for JSX return statement
+          const returnStatement = componentFunction.body.body.find(
+            (stmt) => stmt.type === 'ReturnStatement' && stmt.argument && stmt.argument.type === 'JSXElement',
+          );
+          if (returnStatement) {
+            componentName = findComponentInJSX(returnStatement.argument);
+          }
+        }
+      } else if (componentFunction.type === 'FunctionExpression') {
+        // Similar logic for function expressions if needed
+      }
+
+      // Create default export properties in the exact order needed
+      const props = [];
+      props.push(j.property('init', j.identifier('title'), j.literal(storyTitle)));
+      props.push(j.property('init', j.identifier('component'), j.identifier(componentName)));
+
+      if (decorators.length > 0) {
+        props.push(j.property('init', j.identifier('decorators'), j.arrayExpression(decorators)));
+      }
+
+      if (parameters) {
+        props.push(j.property('init', j.identifier('parameters'), parameters));
+      }
+
+      const objExpression = j.objectExpression(props);
+
+      const defaultExport = j.exportDefaultDeclaration(
+        j.tsSatisfiesExpression(
+          objExpression,
+          j.tsTypeReference(
+            j.identifier('ComponentMeta'),
+            j.tsTypeParameterInstantiation([j.tsTypeQuery(j.identifier(componentName))]),
+          ),
+        ),
+      );
+
+      // Create named export for the story with TypeScript type annotation
+      const storyExportName = storyName.replace(/\s+/g, '') + 'Story';
+      const storyIdentifier = j.identifier(storyExportName);
+      storyIdentifier.typeAnnotation = j.tsTypeAnnotation(
+        j.tsTypeReference(
+          j.identifier('ComponentStory'),
+          j.tsTypeParameterInstantiation([j.tsTypeQuery(j.identifier(componentName))]),
+        ),
+      );
+
+      const namedExport = j.exportNamedDeclaration(
+        j.variableDeclaration('const', [j.variableDeclarator(storyIdentifier, componentFunction)]),
+      );
+
+      // Create storyName assignment
+      const storyNameAssignment = j.expressionStatement(
+        j.assignmentExpression(
+          '=',
+          j.memberExpression(j.identifier(storyExportName), j.identifier('storyName')),
+          j.literal(storyName),
+        ),
+      );
+
+      newExports.push(defaultExport, namedExport, storyNameAssignment);
+
+      // Remove the original statement
+      j(path).remove();
+    });
+
+    // Add all new exports at the end of the file
+    newExports.forEach((exportNode) => {
+      root.find(j.Program).get('body').push(exportNode);
+    });
+
+    hasTransformation = true;
+  }
+
+  // ----------- End of transformer logic
+
+  if (!hasTransformation) {
+    return null;
+  }
+
+  // Return the modified source code after transformation
+  const output = root.toSource({
+    quote: 'single',
+    objectCurlySpacing: false,
+    reuseParsers: true,
+  });
+
+  const prettierConfig = await prettier.resolveConfig(fileInfo.path);
+
+  return prettier.format(output, {
+    ...prettierConfig,
+    filepath: fileInfo.path,
+  });
+};

package/scripts/codemods/fullscreen-modal.js

@@ -0,0 +1,155 @@
+'use strict';
+
+/**
+ * Transforms FullscreenModal components from prop-based structure to children-based structure.
+ * Converts header, body, and footer props into direct children, maintaining proper 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 codemod logic
+
+  let hasChanges = false;
+
+  // Find all FullscreenModal JSX elements
+  root
+    .find(j.JSXElement, {
+      openingElement: {
+        name: {
+          name: 'FullscreenModal',
+        },
+      },
+    })
+    .forEach((path) => {
+      const element = path.value;
+      const openingElement = element.openingElement;
+
+      // Check if this FullscreenModal has header, body, or footer props
+      const headerProp = openingElement.attributes.find(
+        (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'header',
+      );
+      const bodyProp = openingElement.attributes.find(
+        (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'body',
+      );
+      const footerProp = openingElement.attributes.find(
+        (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'footer',
+      );
+
+      // Only transform if at least one of these props exists
+      if (!headerProp && !bodyProp && !footerProp) {
+        return;
+      }
+
+      hasChanges = true;
+
+      // Extract the prop values and create children
+      const children = [];
+
+      // Helper function to extract content from prop value
+      const extractPropContent = (prop) => {
+        if (!prop || !prop.value) return [];
+
+        if (prop.value.type === 'JSXExpressionContainer') {
+          const expression = prop.value.expression;
+
+          // Check if the expression is a FullscreenModal.Body - if so, keep the element
+          if (
+            expression.type === 'JSXElement' &&
+            expression.openingElement.name.type === 'JSXMemberExpression' &&
+            expression.openingElement.name.object.name === 'FullscreenModal' &&
+            expression.openingElement.name.property.name === 'Body'
+          ) {
+            // Return the FullscreenModal.Body element itself
+            return [expression];
+          } else if (expression.type === 'JSXElement') {
+            // For other JSX elements (header, footer), return the element directly (not wrapped)
+            return [expression];
+          } else {
+            // For other expressions (including conditionals), return as JSX expression
+            return [j.jsxExpressionContainer(expression)];
+          }
+        } else if (prop.value.type === 'JSXElement') {
+          // Direct JSX element
+          if (
+            prop.value.openingElement.name.type === 'JSXMemberExpression' &&
+            prop.value.openingElement.name.object.name === 'FullscreenModal' &&
+            prop.value.openingElement.name.property.name === 'Body'
+          ) {
+            // Direct FullscreenModal.Body element - return the element itself
+            return [prop.value];
+          } else {
+            // For other direct JSX elements (like FullscreenModal.Header, FullscreenModal.Footer), return as-is
+            return [prop.value];
+          }
+        } else {
+          // For other types, return as-is
+          return [prop.value];
+        }
+      };
+
+      // Add header first
+      if (headerProp) {
+        const headerContent = extractPropContent(headerProp);
+        children.push(...headerContent);
+      }
+
+      // Add body second
+      if (bodyProp) {
+        const bodyContent = extractPropContent(bodyProp);
+        children.push(...bodyContent);
+      }
+
+      // Add footer last
+      if (footerProp) {
+        const footerContent = extractPropContent(footerProp);
+        children.push(...footerContent);
+      }
+
+      // Remove the header, body, and footer props from attributes
+      openingElement.attributes = openingElement.attributes.filter((attr) => {
+        return !(
+          attr.type === 'JSXAttribute' &&
+          (attr.name.name === 'header' || attr.name.name === 'body' || attr.name.name === 'footer')
+        );
+      });
+
+      // Update the element to be self-closing if no children, or add children
+      if (children.length === 0) {
+        openingElement.selfClosing = true;
+        element.closingElement = null;
+        element.children = [];
+      } else {
+        openingElement.selfClosing = false;
+        if (!element.closingElement) {
+          element.closingElement = j.jsxClosingElement(j.jsxIdentifier('FullscreenModal'));
+        }
+        element.children = children;
+      }
+    });
+
+  // Only return modified code if changes were made
+  if (!hasChanges) {
+    return fileInfo.source;
+  }
+
+  // ----------- End of codemod 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,
+  });
+};