@ornikar/kitt-universal 27.5.1-canary.4d3ec9b2bbb3371c254ae88141f81bb445a59f73.0 → 27.5.1-canary.74b3661a3818b6b6b6cd66a9bf11ce3340651bb8.0

package/scripts/codemods/csf1-csf2.js

@@ -0,0 +1,323 @@
+'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() chains - look for any expression that contains storiesOf
+  const storiesOfStatements = root.find(j.ExpressionStatement).filter((path) => {
+    const expression = path.node.expression;
+    if (expression.type !== 'CallExpression') return false;
+
+    // Look for storiesOf anywhere in the call chain
+    function containsStoriesOf(node) {
+      if (node.type === 'CallExpression' && node.callee && node.callee.name === 'storiesOf') {
+        return true;
+      }
+      if (node.type === 'CallExpression' && node.callee && node.callee.type === 'MemberExpression') {
+        return containsStoriesOf(node.callee.object);
+      }
+      return false;
+    }
+
+    return containsStoriesOf(expression);
+  });
+
+  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;
+
+      // Parse the entire call chain to extract all stories, decorators, and parameters
+      function parseStoriesChain(node) {
+        const stories = [];
+        const decorators = [];
+        let globalParameters = null;
+        let storiesOfCall = null;
+
+        function walkChain(current) {
+          if (current.type === 'CallExpression' && current.callee) {
+            if (current.callee.name === 'storiesOf') {
+              // Found the root storiesOf call
+              storiesOfCall = current;
+            } else if (current.callee.type === 'MemberExpression') {
+              const methodName = current.callee.property.name;
+
+              if (methodName === 'add') {
+                // Extract story information
+                const storyName = current.arguments[0].value;
+                const componentFunction = current.arguments[1];
+                const storyParameters = current.arguments[2]; // Third argument contains parameters
+
+                stories.push({
+                  name: storyName,
+                  component: componentFunction,
+                  parameters: storyParameters,
+                });
+              } else if (methodName === 'addDecorator') {
+                let decorator = current.arguments[0];
+                // Remove 'as any' type assertions from decorators
+                if (decorator.type === 'TSAsExpression' && decorator.typeAnnotation.type === 'TSAnyKeyword') {
+                  decorator = decorator.expression;
+                }
+                decorators.push(decorator); // Collect decorators in order
+              } else if (methodName === 'addParameters') {
+                globalParameters = current.arguments[0];
+              }
+
+              // Continue walking up the chain
+              walkChain(current.callee.object);
+            }
+          }
+        }
+
+        walkChain(node);
+
+        return {
+          stories: stories.reverse(), // Reverse to get correct order
+          decorators: decorators.reverse(), // Reverse to get correct order
+          globalParameters,
+          storiesOfCall,
+        };
+      }
+
+      const { stories, decorators, globalParameters, storiesOfCall } = parseStoriesChain(expression);
+
+      if (!storiesOfCall || stories.length === 0) return;
+
+      let storyTitle = storiesOfCall.arguments[0].value;
+
+      // Normalize titles and story names
+      if (storyTitle === 'Learner Native App/Authentication/Pages/WelcomePageView') {
+        storyTitle = 'LNA/authentication/pages';
+      }
+
+      // Extract component name from the first story's 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;
+      }
+
+      function extractComponentName(componentFunction) {
+        if (componentFunction.type === 'ArrowFunctionExpression') {
+          if (componentFunction.body.type === 'JSXElement') {
+            return 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) {
+              return findComponentInJSX(returnStatement.argument);
+            }
+          }
+        } else if (componentFunction.type === 'FunctionExpression') {
+          // Similar logic for function expressions if needed
+        }
+        return 'Component';
+      }
+
+      // Use the first story to determine the main component
+      if (stories.length > 0) {
+        componentName = extractComponentName(stories[0].component);
+      }
+
+      // 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 (globalParameters) {
+        props.push(j.property('init', j.identifier('parameters'), globalParameters));
+      }
+
+      const objExpression = j.objectExpression(props);
+
+      const defaultExport = j.exportDefaultDeclaration(
+        j.tsSatisfiesExpression(
+          objExpression,
+          j.tsTypeReference(
+            j.identifier('ComponentMeta'),
+            j.tsTypeParameterInstantiation([j.tsTypeQuery(j.identifier(componentName))]),
+          ),
+        ),
+      );
+
+      // Add the default export first
+      newExports.push(defaultExport);
+
+      // Process each story
+      stories.forEach((story) => {
+        let storyName = story.name;
+
+        // Normalize story names
+        if (storyName === 'WelcomePageView') {
+          storyName = 'WelcomePage';
+        }
+
+        // Create named export for the story with TypeScript type annotation
+        // Sanitize story name to create valid JavaScript identifier
+        function sanitizeStoryName(name) {
+          // Special case: remove "(default)" suffix as it's redundant in CSF2
+          let sanitized = name.replace(/\s*\(default\)\s*$/i, '');
+
+          // Remove special characters and normalize spacing while preserving word boundaries
+          return sanitized
+            .replace(/[^a-zA-Z0-9\s]/g, '') // Remove special characters
+            .split(/\s+/) // Split on whitespace
+            .filter((word) => word.length > 0) // Remove empty parts
+            .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+            .join('');
+        }
+
+        const storyExportName = sanitizeStoryName(storyName) + '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, story.component)]),
+        );
+
+        // Create storyName assignment
+        const storyNameAssignment = j.expressionStatement(
+          j.assignmentExpression(
+            '=',
+            j.memberExpression(j.identifier(storyExportName), j.identifier('storyName')),
+            j.literal(storyName),
+          ),
+        );
+
+        newExports.push(namedExport, storyNameAssignment);
+
+        // Add parameters if the story has them
+        if (story.parameters) {
+          const parametersAssignment = j.expressionStatement(
+            j.assignmentExpression(
+              '=',
+              j.memberExpression(j.identifier(storyExportName), j.identifier('parameters')),
+              story.parameters,
+            ),
+          );
+          newExports.push(parametersAssignment);
+        }
+      });
+
+      // 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,
+  });
+};

package/scripts/codemods/navigation-modal.js

@@ -0,0 +1,155 @@
+'use strict';
+
+/**
+ * Transforms NavigationModal 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 NavigationModal JSX elements
+  root
+    .find(j.JSXElement, {
+      openingElement: {
+        name: {
+          name: 'NavigationModal',
+        },
+      },
+    })
+    .forEach((path) => {
+      const element = path.value;
+      const openingElement = element.openingElement;
+
+      // Check if this NavigationModal 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 NavigationModal.Body - if so, keep the element
+          if (
+            expression.type === 'JSXElement' &&
+            expression.openingElement.name.type === 'JSXMemberExpression' &&
+            expression.openingElement.name.object.name === 'NavigationModal' &&
+            expression.openingElement.name.property.name === 'Body'
+          ) {
+            // Return the NavigationModal.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 === 'NavigationModal' &&
+            prop.value.openingElement.name.property.name === 'Body'
+          ) {
+            // Direct NavigationModal.Body element - return the element itself
+            return [prop.value];
+          } else {
+            // For other direct JSX elements (like NavigationModal.Header, NavigationModal.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('NavigationModal'));
+        }
+        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/{run-transformers.js → run-codemods.js}

@@ -16,12 +16,12 @@ const [targetPath] = args;
 // Check for --dry argument to enable dry run mode
 const isDryRun = args.includes('--dry');
 
-// Check for --only argument to run a specific transformer
+// Check for --only argument to run a specific codemod
 const onlyArg = args.find((arg) => arg.startsWith('--only='));
-const transformerName = onlyArg ? onlyArg.split('=')[1] : null;
+const codemodName = onlyArg ? onlyArg.split('=')[1] : null;
 
 if (!targetPath) {
-  console.error('❌ Usage: node scripts/run-transformers.js <targetPath> [--dry] [--only=<transformerName>]');
+  console.error('❌ Usage: node scripts/run-codemods.js <targetPath> [--dry] [--only=<codemodName>]');
   process.exit(1);
 }
 
@@ -30,17 +30,17 @@ if (!fs.existsSync(targetPath)) {
   process.exit(1);
 }
 
-const transformsDir = path.join(__dirname, 'transformers');
+const transformsDir = path.join(__dirname, 'codemods');
 const transformFiles = fs
   .readdirSync(transformsDir)
-  .filter((file) => file.endsWith('.js') && (!transformerName || file === `${transformerName}.js`));
+  .filter((file) => file.endsWith('.js') && (!codemodName || file === `${codemodName}.js`));
 
 if (transformFiles.length === 0) {
-  console.log('✅ No transformers to apply.');
+  console.log('✅ No codemods to apply.');
   process.exit(0);
 }
 
-console.log(`🛠  Found ${transformFiles.length} transformer(s) to apply to: ${targetPath}`);
+console.log(`🛠  Found ${transformFiles.length} codemod(s) to apply to: ${targetPath}`);
 
 // Utility to recursively collect all .ts/.tsx files
 function getAllFiles(dir) {
@@ -60,17 +60,17 @@ function getAllFiles(dir) {
 const filesToTransform = fs.statSync(targetPath).isDirectory() ? getAllFiles(targetPath) : [targetPath];
 const updatedFiles = new Set();
 
-// Execute each transformer
+// Execute each codemod
 for (const transformFile of transformFiles) {
   const transformPath = path.join(transformsDir, transformFile);
-  const transformer = require(transformPath);
-  console.log(`➡️  Running transformer: ${transformFile}`);
+  const codemod = require(transformPath);
+  console.log(`➡️  Running codemod: ${transformFile}`);
 
   for (const filePath of filesToTransform) {
     const source = fs.readFileSync(filePath, 'utf8');
 
     try {
-      transformer(
+      codemod(
         { path: filePath, source },
         { jscodeshift: jscodeshift.withParser('tsx') },
         { printOptions: { quote: 'single', trailingComma: true } },
@@ -107,5 +107,5 @@ if (isDryRun) {
   console.log(`🚧 Dry run complete. ${updatedFiles.size} file(s) would be modified.`);
   console.log('Run without --dry to apply changes.');
 } else {
-  console.log(`🏁 All transformers done. ${updatedFiles.size} file(s) modified.`);
+  console.log(`🏁 All codemods done. ${updatedFiles.size} file(s) modified.`);
 }