@storybook/codemod 7.0.0-beta.9 → 7.0.0-rc.0

package/src/transforms/mdx-to-csf.ts

@@ -0,0 +1,342 @@
+/* eslint-disable no-param-reassign,@typescript-eslint/no-shadow,consistent-return */
+import type { FileInfo } from 'jscodeshift';
+import { babelParse, babelParseExpression } from '@storybook/csf-tools';
+import { remark } from 'remark';
+import type { Root } from 'remark-mdx';
+import remarkMdx from 'remark-mdx';
+import { SKIP, visit } from 'unist-util-visit';
+import { is } from 'unist-util-is';
+import type {
+  MdxJsxAttribute,
+  MdxJsxExpressionAttribute,
+  MdxJsxFlowElement,
+  MdxJsxTextElement,
+} from 'mdast-util-mdx-jsx';
+import type { MdxjsEsm } from 'mdast-util-mdxjs-esm';
+import * as t from '@babel/types';
+import type { BabelFile } from '@babel/core';
+import * as babel from '@babel/core';
+import * as recast from 'recast';
+import * as path from 'node:path';
+import prettier from 'prettier';
+import * as fs from 'node:fs';
+import camelCase from 'lodash/camelCase';
+import type { MdxFlowExpression } from 'mdast-util-mdx-expression';
+
+const mdxProcessor = remark().use(remarkMdx) as ReturnType<typeof remark>;
+
+export default function jscodeshift(info: FileInfo) {
+  const parsed = path.parse(info.path);
+
+  let baseName = path.join(
+    parsed.dir,
+    parsed.name.replace('.mdx', '').replace('.stories', '').replace('.story', '')
+  );
+
+  // make sure the new csf file we are going to create exists
+  while (fs.existsSync(`${baseName}.stories.js`)) {
+    baseName += '_';
+  }
+
+  const result = transform(info.source, path.basename(baseName));
+
+  if (result == null) {
+    // We can not make a valid migration.
+    return;
+  }
+
+  const [mdx, csf] = result;
+
+  fs.writeFileSync(`${baseName}.stories.js`, csf);
+
+  return mdx;
+}
+
+export function transform(source: string, baseName: string): [mdx: string, csf: string] {
+  const root = mdxProcessor.parse(source);
+  const storyNamespaceName = nameToValidExport(`${baseName}Stories`);
+
+  const metaAttributes: Array<MdxJsxAttribute | MdxJsxExpressionAttribute> = [];
+  const storiesMap = new Map<
+    string,
+    | {
+        type: 'value';
+        attributes: Array<MdxJsxAttribute | MdxJsxExpressionAttribute>;
+        children: (MdxJsxFlowElement | MdxJsxTextElement)['children'];
+      }
+    | {
+        type: 'reference';
+      }
+    | {
+        type: 'id';
+      }
+  >();
+
+  // rewrite addon docs import
+  visit(root, ['mdxjsEsm'], (node: MdxjsEsm) => {
+    node.value = node.value
+      .replaceAll('@storybook/addon-docs/blocks', '@storybook/blocks')
+      .replaceAll('@storybook/addon-docs', '@storybook/blocks');
+  });
+
+  const file = getEsmAst(root);
+  addStoriesImport(root, baseName, storyNamespaceName);
+
+  visit(
+    root,
+    ['mdxJsxFlowElement', 'mdxJsxTextElement'],
+    (node: MdxJsxFlowElement | MdxJsxTextElement, index, parent) => {
+      if (is(node, { name: 'Meta' })) {
+        metaAttributes.push(...node.attributes);
+        node.attributes = [
+          {
+            type: 'mdxJsxAttribute',
+            name: 'of',
+            value: {
+              type: 'mdxJsxAttributeValueExpression',
+              value: storyNamespaceName,
+            },
+          },
+        ];
+      }
+      if (is(node, { name: 'Story' })) {
+        const nameAttribute = node.attributes.find(
+          (it) => it.type === 'mdxJsxAttribute' && it.name === 'name'
+        );
+        const idAttribute = node.attributes.find(
+          (it) => it.type === 'mdxJsxAttribute' && it.name === 'id'
+        );
+        const storyAttribute = node.attributes.find(
+          (it) => it.type === 'mdxJsxAttribute' && it.name === 'story'
+        );
+        if (typeof nameAttribute?.value === 'string') {
+          let name = nameToValidExport(nameAttribute.value);
+          while (variableNameExists(name)) name += '_';
+
+          storiesMap.set(name, {
+            type: 'value',
+            attributes: node.attributes,
+            children: node.children,
+          });
+          node.attributes = [
+            {
+              type: 'mdxJsxAttribute',
+              name: 'of',
+              value: {
+                type: 'mdxJsxAttributeValueExpression',
+                value: `${storyNamespaceName}.${name}`,
+              },
+            },
+          ];
+          node.children = [];
+        } else if (idAttribute?.value) {
+          // e.g. <Story id="button--primary" />
+          // should be migrated manually as it is very hard to find out where the definition of such a string id is located
+          const nodeString = mdxProcessor.stringify({ type: 'root', children: [node] }).trim();
+          const newNode: MdxFlowExpression = {
+            type: 'mdxFlowExpression',
+            value: `/* ${nodeString} is deprecated, please migrate it to <Story of={referenceToStory} /> */`,
+          };
+          storiesMap.set(idAttribute.value as string, { type: 'id' });
+          parent.children.splice(index, 0, newNode);
+          // current index is the new comment, and index + 1 is current node
+          // SKIP traversing current node, and continue with the node after that
+          return [SKIP, index + 2];
+        } else if (
+          storyAttribute?.type === 'mdxJsxAttribute' &&
+          typeof storyAttribute.value === 'object' &&
+          storyAttribute.value.type === 'mdxJsxAttributeValueExpression'
+        ) {
+          // e.g. <Story story={Primary} />
+
+          const name = storyAttribute.value.value;
+          node.attributes = [
+            {
+              type: 'mdxJsxAttribute',
+              name: 'of',
+              value: {
+                type: 'mdxJsxAttributeValueExpression',
+                value: `${storyNamespaceName}.${name}`,
+              },
+            },
+          ];
+          node.children = [];
+
+          storiesMap.set(name, { type: 'reference' });
+        } else {
+          parent.children.splice(index, 1);
+          // Do not traverse `node`, continue at the node *now* at `index`.
+          return [SKIP, index];
+        }
+      }
+      return undefined;
+    }
+  );
+
+  const metaProperties = metaAttributes.flatMap((attribute) => {
+    if (attribute.type === 'mdxJsxAttribute') {
+      if (typeof attribute.value === 'string') {
+        return [t.objectProperty(t.identifier(attribute.name), t.stringLiteral(attribute.value))];
+      }
+      return [
+        t.objectProperty(
+          t.identifier(attribute.name),
+          babelParseExpression(attribute.value.value) as any as t.Expression
+        ),
+      ];
+    }
+    return [];
+  });
+
+  file.path.traverse({
+    // remove mdx imports from csf
+    ImportDeclaration(path) {
+      if (path.node.source.value === '@storybook/blocks') {
+        path.remove();
+      }
+    },
+    // remove exports from csf file
+    ExportNamedDeclaration(path) {
+      path.replaceWith(path.node.declaration);
+    },
+  });
+
+  if (storiesMap.size === 0) {
+    // A CSF file must have at least one story, so skip migrating if this is the case.
+    return null;
+  }
+
+  const newStatements: t.Statement[] = [
+    t.exportDefaultDeclaration(t.objectExpression(metaProperties)),
+  ];
+
+  function mapChildrenToRender(children: (MdxJsxFlowElement | MdxJsxTextElement)['children']) {
+    const child = children[0];
+
+    if (!child) return undefined;
+
+    if (child.type === 'text') {
+      return t.arrowFunctionExpression([], t.stringLiteral(child.value));
+    }
+    if (child.type === 'mdxFlowExpression' || child.type === 'mdxTextExpression') {
+      const expression = babelParseExpression(child.value) as any as t.Expression;
+
+      // Recreating those lines: https://github.com/storybookjs/mdx1-csf/blob/f408fc97e9a63097ca1ee577df9315a3cccca975/src/sb-mdx-plugin.ts#L185-L198
+      const BIND_REGEX = /\.bind\(.*\)/;
+      if (BIND_REGEX.test(child.value)) {
+        return expression;
+      }
+      if (t.isIdentifier(expression)) {
+        return expression;
+      }
+      if (t.isArrowFunctionExpression(expression)) {
+        return expression;
+      }
+      return t.arrowFunctionExpression([], expression);
+    }
+
+    const expression = babelParseExpression(
+      mdxProcessor.stringify({ type: 'root', children: [child] })
+    ) as any as t.Expression;
+    return t.arrowFunctionExpression([], expression);
+  }
+
+  function variableNameExists(name: string) {
+    let found = false;
+    file.path.traverse({
+      VariableDeclarator: (path) => {
+        const lVal = path.node.id;
+        if (t.isIdentifier(lVal) && lVal.name === name) found = true;
+      },
+    });
+    return found;
+  }
+
+  newStatements.push(
+    ...[...storiesMap].flatMap(([key, value]) => {
+      if (value.type === 'id') return [];
+      if (value.type === 'reference') {
+        return [
+          t.exportNamedDeclaration(null, [t.exportSpecifier(t.identifier(key), t.identifier(key))]),
+        ];
+      }
+      const renderProperty = mapChildrenToRender(value.children);
+      const newObject = t.objectExpression([
+        ...(renderProperty
+          ? [t.objectProperty(t.identifier('render'), mapChildrenToRender(value.children))]
+          : []),
+        ...value.attributes.flatMap((attribute) => {
+          if (attribute.type === 'mdxJsxAttribute') {
+            if (typeof attribute.value === 'string') {
+              return [
+                t.objectProperty(t.identifier(attribute.name), t.stringLiteral(attribute.value)),
+              ];
+            }
+            return [
+              t.objectProperty(
+                t.identifier(attribute.name),
+                babelParseExpression(attribute.value.value) as any as t.Expression
+              ),
+            ];
+          }
+          return [];
+        }),
+      ]);
+
+      return [
+        t.exportNamedDeclaration(
+          t.variableDeclaration('const', [t.variableDeclarator(t.identifier(key), newObject)])
+        ),
+      ];
+    })
+  );
+
+  file.path.node.body = [...file.path.node.body, ...newStatements];
+
+  const newMdx = mdxProcessor.stringify(root);
+  let output = recast.print(file.path.node).code;
+
+  const prettierConfig = prettier.resolveConfig.sync('.', { editorconfig: true }) || {
+    printWidth: 100,
+    tabWidth: 2,
+    bracketSpacing: true,
+    trailingComma: 'es5',
+    singleQuote: true,
+  };
+
+  output = prettier.format(output, { ...prettierConfig, filepath: `file.jsx` });
+
+  return [newMdx, output];
+}
+
+function getEsmAst(root: Root) {
+  const esm: string[] = [];
+  visit(root, ['mdxjsEsm'], (node: MdxjsEsm) => {
+    esm.push(node.value);
+  });
+  const esmSource = `${esm.join('\n\n')}`;
+
+  // @ts-expect-error File is not yet exposed, see https://github.com/babel/babel/issues/11350#issuecomment-644118606
+  const file: BabelFile = new babel.File(
+    { filename: 'info.path' },
+    { code: esmSource, ast: babelParse(esmSource) }
+  );
+  return file;
+}
+
+function addStoriesImport(root: Root, baseName: string, storyNamespaceName: string): void {
+  let found = false;
+
+  visit(root, ['mdxjsEsm'], (node: MdxjsEsm) => {
+    if (!found) {
+      node.value += `\nimport * as ${storyNamespaceName} from './${baseName}.stories';`;
+      found = true;
+    }
+  });
+}
+
+export function nameToValidExport(name: string) {
+  const [first, ...rest] = Array.from(camelCase(name));
+
+  return `${first.match(/[a-zA-Z_$]/) ? first.toUpperCase() : `$${first}`}${rest.join('')}`;
+}

package/src/transforms/upgrade-deprecated-types.ts

@@ -0,0 +1,142 @@
+/* eslint-disable no-underscore-dangle */
+import prettier from 'prettier';
+import type { API, FileInfo } from 'jscodeshift';
+import type { BabelFile, NodePath } from '@babel/core';
+import * as babel from '@babel/core';
+import { loadCsf } from '@storybook/csf-tools';
+import * as recast from 'recast';
+import * as t from '@babel/types';
+
+const logger = console;
+
+const deprecatedTypes = [
+  'ComponentStory',
+  'ComponentStoryFn',
+  'ComponentStoryObj',
+  'ComponentMeta',
+  'Story',
+];
+
+function migrateType(oldType: string) {
+  if (oldType === 'Story' || oldType === 'ComponentStory') return 'StoryFn';
+  return oldType.replace('Component', '');
+}
+
+export default function transform(info: FileInfo, api: API, options: { parser?: string }) {
+  // TODO what do I need to with the title?
+  const fileNode = loadCsf(info.source, { makeTitle: (title) => title })._ast;
+  // @ts-expect-error File is not yet exposed, see https://github.com/babel/babel/issues/11350#issuecomment-644118606
+  const file: BabelFile = new babel.File(
+    { filename: info.path },
+    { code: info.source, ast: fileNode }
+  );
+
+  upgradeDeprecatedTypes(file);
+
+  let output = recast.print(file.path.node).code;
+
+  try {
+    const prettierConfig = prettier.resolveConfig.sync('.', { editorconfig: true }) || {
+      printWidth: 100,
+      tabWidth: 2,
+      bracketSpacing: true,
+      trailingComma: 'es5',
+      singleQuote: true,
+    };
+
+    output = prettier.format(output, { ...prettierConfig, filepath: info.path });
+  } catch (e) {
+    logger.log(`Failed applying prettier to ${info.path}.`);
+  }
+
+  return output;
+}
+
+export const parser = 'tsx';
+
+export function upgradeDeprecatedTypes(file: BabelFile) {
+  const importedNamespaces: Set<string> = new Set();
+  const typeReferencesToUpdate: Set<string> = new Set();
+  const existingImports: { name: string; isAlias: boolean; path: NodePath }[] = [];
+
+  file.path.traverse({
+    ImportDeclaration: (path) => {
+      existingImports.push(
+        ...path.get('specifiers').map((specifier) => ({
+          name: specifier.node.local.name,
+          isAlias: !(
+            specifier.isImportSpecifier() &&
+            t.isIdentifier(specifier.node.imported) &&
+            specifier.node.local.name === specifier.node.imported.name
+          ),
+          path: specifier,
+        }))
+      );
+
+      const source = path.node.source.value;
+      if (!source.startsWith('@storybook')) return;
+
+      path.get('specifiers').forEach((specifier) => {
+        if (specifier.isImportNamespaceSpecifier()) {
+          importedNamespaces.add(specifier.node.local.name);
+        }
+        if (!specifier.isImportSpecifier()) return;
+        const imported = specifier.get('imported');
+        if (!imported.isIdentifier()) return;
+
+        // if we find a deprecated import
+        if (deprecatedTypes.includes(imported.node.name)) {
+          // we don't have to rewrite type references for aliased imports
+          if (imported.node.name === specifier.node.local.name) {
+            typeReferencesToUpdate.add(specifier.node.local.name);
+          }
+
+          const newType = migrateType(imported.node.name);
+
+          // replace the deprecated import type when the new type isn't yet imported
+          // note that we don't replace the local name of the specifier
+          if (!existingImports.some((it) => it.name === newType)) {
+            imported.replaceWith(t.identifier(newType));
+            existingImports.push({ name: newType, isAlias: false, path: specifier });
+          } else {
+            // if the existing import has the same local name but is an alias we throw
+            // we could have imported the type with an alias, but seems to much effort
+            const existingImport = existingImports.find((it) => it.name === newType && it.isAlias);
+            if (existingImport) {
+              throw existingImport.path.buildCodeFrameError(
+                'This codemod does not support local imports that are called the same as a storybook import.\n' +
+                  'Rename this local import and try again.'
+              );
+            } else {
+              // if the type already exists, without being aliased
+              // we can safely remove the deprecated import now
+              specifier.remove();
+            }
+          }
+        }
+      });
+    },
+  });
+
+  file.path.traverse({
+    TSTypeReference: (path) => {
+      const typeName = path.get('typeName');
+      if (typeName.isIdentifier()) {
+        if (typeReferencesToUpdate.has(typeName.node.name)) {
+          typeName.replaceWith(t.identifier(migrateType(typeName.node.name)));
+        }
+      } else if (typeName.isTSQualifiedName()) {
+        // For example SB.StoryObj
+        const namespace = typeName.get('left');
+        if (namespace.isIdentifier()) {
+          if (importedNamespaces.has(namespace.node.name)) {
+            const right = typeName.get('right');
+            if (deprecatedTypes.includes(right.node.name)) {
+              right.replaceWith(t.identifier(migrateType(right.node.name)));
+            }
+          }
+        }
+      }
+    },
+  });
+}

package/dist/chunk-3OPQTROG.mjs

@@ -1 +0,0 @@
-var packageNames={"@kadira/react-storybook-decorator-centered":"@storybook/addon-centered","@kadira/storybook-addons":"@storybook/preview-api","@kadira/storybook-addon-actions":"@storybook/addon-actions","@kadira/storybook-addon-comments":"@storybook/addon-comments","@kadira/storybook-addon-graphql":"@storybook/addon-graphql","@kadira/storybook-addon-info":"@storybook/addon-info","@kadira/storybook-addon-knobs":"@storybook/addon-knobs","@kadira/storybook-addon-links":"@storybook/addon-links","@kadira/storybook-addon-notes":"@storybook/addon-notes","@kadira/storybook-addon-options":"@storybook/addon-options","@kadira/storybook-channels":"@storybook/channels","@kadira/storybook-channel-postmsg":"@storybook/channel-postmessage","@kadira/storybook-channel-websocket":"@storybook/channel-websocket","@kadira/storybook-ui":"@storybook/manager","@kadira/react-native-storybook":"@storybook/react-native","@kadira/react-storybook":"@storybook/react","@kadira/getstorybook":"@storybook/cli","@kadira/storybook":"@storybook/react",storyshots:"@storybook/addon-storyshots",getstorybook:"@storybook/cli"};function transformer(file,api){let j=api.jscodeshift,packageNamesKeys=Object.keys(packageNames),getMatch=oldpart=>packageNamesKeys.find(newpart=>oldpart.match(newpart)),getNewPackageName=oldPackageName=>{let match=getMatch(oldPackageName);if(match){let replacement=packageNames[match];return oldPackageName.replace(match,replacement)}return oldPackageName},updatePackageName=declaration=>(declaration.node.source.value=getNewPackageName(declaration.node.source.value),declaration.node);return j(file.source).find(j.ImportDeclaration).replaceWith(updatePackageName).toSource({quote:"single"})}export{packageNames,transformer};

package/dist/chunk-B5FMQ3BX.mjs

@@ -1 +0,0 @@
-function transformer(file,api){let j=api.jscodeshift,root=j(file.source),getOptions=args=>args[3]===void 0?args[2]===void 0?[args[0]]:[args[1]]:[j.objectExpression([j.property("init",j.identifier("text"),args[1]),...args[3].properties])],withInfo=addWithInfoExpression=>{let{node}=addWithInfoExpression,args=node.arguments,storyComponent=args[2]?args[2]:args[1];return node.callee.property.name="add",node.arguments=[args[0],j.callExpression(j.callExpression(j.identifier("withInfo"),getOptions(args)),[storyComponent])],node},checkWithInfoImport=()=>{root.find(j.ImportDeclaration).filter(imp=>imp.node.source.value==="@storybook/addon-info").size()||root.find(j.ImportDeclaration).at(-1).insertAfter(j.importDeclaration([j.importSpecifier(j.identifier("withInfo"))],j.literal("@storybook/addon-info")))},addWithInfoExpressions=root.find(j.CallExpression,{callee:{property:{name:"addWithInfo"}}});return addWithInfoExpressions.size()&&(checkWithInfoImport(),addWithInfoExpressions.replaceWith(withInfo)),root.toSource()}export{transformer};

package/dist/chunk-CO6EPEMB.mjs

@@ -1 +0,0 @@
-import camelCase from"lodash/camelCase";import upperFirst from"lodash/upperFirst";var sanitizeName=name=>{let key=upperFirst(camelCase(name));return/^\d/.test(key)&&(key=`_${key}`),/^\d/.test(key)&&(key=`_${key}`),key};function jscodeshiftToPrettierParser(parser){let parserMap={babylon:"babel",flow:"flow",ts:"typescript",tsx:"typescript"};return parser&&parserMap[parser]||"babel"}export{sanitizeName,jscodeshiftToPrettierParser};

package/dist/index.mjs

@@ -1 +0,0 @@
-import{packageNames,transformer}from"./chunk-3OPQTROG.mjs";import{jscodeshiftToPrettierParser}from"./chunk-CO6EPEMB.mjs";import{transformer as transformer2}from"./chunk-B5FMQ3BX.mjs";import fs from"fs";import path from"path";import{promisify}from"util";import globby from"globby";import{sync as spawnSync}from"cross-spawn";var TRANSFORM_DIR=`${__dirname}/transforms`;function listCodemods(){return fs.readdirSync(TRANSFORM_DIR).filter(fname=>fname.endsWith(".js")).map(fname=>fname.slice(0,-3))}var renameAsync=promisify(fs.rename);async function renameFile(file,from,to,{logger}){let newFile=file.replace(from,to);return logger.log(`Rename: ${file} ${newFile}`),renameAsync(file,newFile)}async function runCodemod(codemod,{glob,logger,dryRun,rename,parser}){if(!listCodemods().includes(codemod))throw new Error(`Unknown codemod ${codemod}. Run --list for options.`);let renameParts=null;if(rename&&(renameParts=rename.split(":"),renameParts.length!==2))throw new Error(`Codemod rename: expected format "from:to", got "${rename}"`);let inferredParser=parser;if(!parser){let extension=path.extname(glob).slice(1);jscodeshiftToPrettierParser(extension)!=="babel"&&(inferredParser=extension)}let files=await globby([glob,"!**/node_modules","!**/dist"]);if(logger.log(`=> Applying ${codemod}: ${files.length} files`),!dryRun){let parserArgs=inferredParser?["--parser",inferredParser]:[];spawnSync("npx",["jscodeshift","-t",`${TRANSFORM_DIR}/${codemod}.js`,...parserArgs,...files],{stdio:"inherit",shell:!0})}if(renameParts){let[from,to]=renameParts;logger.log(`=> Renaming ${rename}: ${files.length} files`),await Promise.all(files.map(file=>renameFile(file,new RegExp(`${from}$`),to,{logger})))}}export{listCodemods,packageNames,runCodemod,transformer2 as updateAddonInfo,transformer as updateOrganisationName};

package/dist/transforms/add-component-parameters.mjs

@@ -1 +0,0 @@
-function transformer(file,api){let j=api.jscodeshift,root=j(file.source),importMap={};root.find(j.ImportDeclaration).forEach(imp=>imp.node.specifiers.forEach(spec=>{importMap[spec.local.name]=!0}));function getLeafName(string){let parts=string.split(/\/|\.|\|/);return parts[parts.length-1]}function addComponentParameter(call){let{node}=call,leafName=getLeafName(node.arguments[0].value);return j.callExpression(j.memberExpression(node,j.identifier("addParameters")),[j.objectExpression([j.property("init",j.identifier("component"),j.identifier(leafName))])])}return root.find(j.CallExpression).filter(call=>call.node.callee.name==="storiesOf").filter(call=>call.node.arguments.length>0&&call.node.arguments[0].type==="Literal").filter(call=>{let leafName=getLeafName(call.node.arguments[0].value);return importMap[leafName]}).replaceWith(addComponentParameter),root.toSource()}export{transformer as default};

package/dist/transforms/csf-2-to-3.mjs

@@ -1 +0,0 @@
-import{jscodeshiftToPrettierParser}from"../chunk-CO6EPEMB.mjs";import prettier from"prettier";import*as t from"@babel/types";import{formatCsf,loadCsf}from"@storybook/csf-tools";var logger=console,renameAnnotation=annotation=>annotation==="storyName"?"name":annotation,getTemplateBindVariable=init=>t.isCallExpression(init)&&t.isMemberExpression(init.callee)&&t.isIdentifier(init.callee.object)&&t.isIdentifier(init.callee.property)&&init.callee.property.name==="bind"&&(init.arguments.length===0||init.arguments.length===1&&t.isObjectExpression(init.arguments[0])&&init.arguments[0].properties.length===0)?init.callee.object.name:null,isStoryAnnotation=(stmt,objectExports)=>t.isExpressionStatement(stmt)&&t.isAssignmentExpression(stmt.expression)&&t.isMemberExpression(stmt.expression.left)&&t.isIdentifier(stmt.expression.left.object)&&objectExports[stmt.expression.left.object.name],isTemplateDeclaration=(stmt,templates)=>t.isVariableDeclaration(stmt)&&stmt.declarations.length===1&&t.isIdentifier(stmt.declarations[0].id)&&templates[stmt.declarations[0].id.name],getNewExport=(stmt,objectExports)=>{if(t.isExportNamedDeclaration(stmt)&&t.isVariableDeclaration(stmt.declaration)&&stmt.declaration.declarations.length===1){let decl=stmt.declaration.declarations[0];if(t.isVariableDeclarator(decl)&&t.isIdentifier(decl.id))return objectExports[decl.id.name]}return null},isReactGlobalRenderFn=(csf,storyFn)=>{if(csf._meta?.component&&t.isArrowFunctionExpression(storyFn)&&storyFn.params.length===1&&t.isJSXElement(storyFn.body)){let{openingElement}=storyFn.body;if(openingElement.selfClosing&&t.isJSXIdentifier(openingElement.name)&&openingElement.attributes.length===1){let attr=openingElement.attributes[0],param=storyFn.params[0];if(t.isJSXSpreadAttribute(attr)&&t.isIdentifier(attr.argument)&&t.isIdentifier(param)&&param.name===attr.argument.name&&csf._meta.component===openingElement.name.name)return!0}}return!1},isSimpleCSFStory=(init,annotations)=>annotations.length===0&&t.isArrowFunctionExpression(init)&&init.params.length===0;function transform({source},api,options){let csf=loadCsf(source,{makeTitle:userTitle=>userTitle||"FIXME"});try{csf.parse()}catch(err){return logger.log(`Error ${err}, skipping`),source}let objectExports={};Object.entries(csf._storyExports).forEach(([key,decl])=>{let annotations=Object.entries(csf._storyAnnotations[key]).map(([annotation,val])=>t.objectProperty(t.identifier(renameAnnotation(annotation)),val));if(t.isVariableDeclarator(decl)){let{init,id}=decl,template=getTemplateBindVariable(init);if(!t.isArrowFunctionExpression(init)&&!template||isSimpleCSFStory(init,annotations))return;let storyFn=template&&csf._templates[template];storyFn||(storyFn=init);let keyId=t.identifier(key),{typeAnnotation}=id;typeAnnotation&&(keyId.typeAnnotation=typeAnnotation);let renderAnnotation=isReactGlobalRenderFn(csf,storyFn)?[]:[t.objectProperty(t.identifier("render"),storyFn)];objectExports[key]=t.exportNamedDeclaration(t.variableDeclaration("const",[t.variableDeclarator(keyId,t.objectExpression([...renderAnnotation,...annotations]))]))}});let updatedBody=csf._ast.program.body.reduce((acc,stmt)=>{if(isStoryAnnotation(stmt,objectExports)||isTemplateDeclaration(stmt,csf._templates))return acc;let newExport=getNewExport(stmt,objectExports);return newExport?(acc.push(newExport),acc):(acc.push(stmt),acc)},[]);csf._ast.program.body=updatedBody;let output=formatCsf(csf),prettierConfig=prettier.resolveConfig.sync(".",{editorconfig:!0})||{printWidth:100,tabWidth:2,bracketSpacing:!0,trailingComma:"es5",singleQuote:!0};return prettier.format(output,{...prettierConfig,parser:jscodeshiftToPrettierParser(options?.parser)})}var csf_2_to_3_default=transform;export{csf_2_to_3_default as default};

package/dist/transforms/csf-hoist-story-annotations.mjs

@@ -1 +0,0 @@
-var getContainingStatement=n=>n.node.type.endsWith("Statement")?n:getContainingStatement(n.parent);function transformer(file,api){let j=api.jscodeshift,root=j(file.source),renameKey=exp=>exp.type==="Identifier"&&exp.name==="name"?j.identifier("storyName"):exp;if(root.find(j.ExportDefaultDeclaration).filter(def=>def.node.declaration.type==="ObjectExpression"&&def.node.declaration.properties.map(p=>p.key.name).includes("title")).size()===0)return root.toSource();let storyAssignments=root.find(j.AssignmentExpression).filter(exp=>{let{left,right}=exp.node;return left.type==="MemberExpression"&&left.object.type==="Identifier"&&left.property.type==="Identifier"&&left.property.name==="story"&&right.type==="ObjectExpression"});return storyAssignments.forEach(exp=>{let{left,right}=exp.node;right.properties.forEach(prop=>{getContainingStatement(exp).insertBefore(j.assignmentStatement("=",j.memberExpression(left.object,renameKey(prop.key)),prop.value))})}),storyAssignments.remove(),root.find(j.AssignmentExpression).filter(exp=>{let{left}=exp.node;return left.type==="MemberExpression"&&left.object.type==="MemberExpression"&&left.object.property.type==="Identifier"&&left.object.property.name==="story"&&left.property.type==="Identifier"}).replaceWith(exp=>{let{left,right}=exp.node;return j.assignmentExpression("=",j.memberExpression(left.object.object,renameKey(left.property)),right)}),root.toSource({quote:"single"})}export{transformer as default};

package/dist/transforms/csf-to-mdx.d.ts

@@ -1,29 +0,0 @@
-/**
- * Convert a component's module story file into an MDX file
- *
- * For example:
- *
- * ```
- * input { Button } from './Button';
- * export default {
- *   title: 'Button'
- * }
- * export const story = () => <Button label="The Button" />;
- * ```
- *
- * Becomes:
- *
- * ```
- * import { Meta, Story } from '@storybook/addon-docs';
- * input { Button } from './Button';
- *
- * <Meta title='Button' />
- *
- * <Story name='story'>
- *   <Button label="The Button" />
- * </Story>
- * ```
- */
-declare function transformer(file: any, api: any): any;
-
-export { transformer as default };

package/dist/transforms/csf-to-mdx.js

@@ -1,3 +0,0 @@
-var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var csf_to_mdx_exports={};__export(csf_to_mdx_exports,{default:()=>transformer});module.exports=__toCommonJS(csf_to_mdx_exports);var import_recast=require("recast"),import_csf=require("@storybook/csf");function exportMdx(root,options){return root.__paths[0].node.program.body.map(n=>{let{code}=(0,import_recast.prettyPrint)(n,options);return n.type==="JSXElement"?`${code}
-`:code}).join(`
-`)}function parseIncludeExclude(prop){let{code}=(0,import_recast.prettyPrint)(prop,{});return(0,eval)(code)}function transformer(file,api){let j=api.jscodeshift,root=j(file.source),storyKeyToStory={},meta={};function makeAttr(key,val){return j.jsxAttribute(j.jsxIdentifier(key),val.type==="Literal"?val:j.jsxExpressionContainer(val))}function getStoryContents(node){return node.type==="ArrowFunctionExpression"&&node.body.type==="JSXElement"?node.body:j.jsxExpressionContainer(node)}function getName(storyKey){let story=storyKeyToStory[storyKey];if(story){let name=story.properties.find(prop=>prop.key.name==="name");if(name&&name.value.type==="Literal")return name.value.value}return storyKey}function getStoryAttrs(storyKey){let attrs=[],story=storyKeyToStory[storyKey];return story&&story.properties.forEach(prop=>{let{key,value}=prop;key.name!=="name"&&attrs.push(makeAttr(key.name,value))}),attrs}let defaultExportWithTitle=root.find(j.ExportDefaultDeclaration).filter(def=>def.node.declaration.properties.map(p=>p.key.name).includes("title"));if(defaultExportWithTitle.size()===0)return root.toSource();root.find(j.ImportDeclaration).at(-1).insertAfter(j.emptyStatement()).insertAfter(j.importDeclaration([j.importSpecifier(j.identifier("Meta")),j.importSpecifier(j.identifier("Story"))],j.literal("@storybook/addon-docs"))),root.find(j.ImportDeclaration).filter(decl=>decl.node.source.value==="react").remove(),defaultExportWithTitle.forEach(exp=>{exp.node.declaration.properties.forEach(p=>{["includeStories","excludeStories"].includes(p.key.name)&&(meta[p.key.name]=parseIncludeExclude(p.value))})});let namedExports=root.find(j.ExportNamedDeclaration);namedExports.forEach(exp=>{let storyKey=exp.node.declaration.declarations[0].id.name;(0,import_csf.isExportStory)(storyKey,meta)&&(storyKeyToStory[storyKey]=null)});let storyAssignments=root.find(j.AssignmentExpression).filter(exp=>{let{left}=exp.node;return left.type==="MemberExpression"&&left.object.type==="Identifier"&&left.object.name in storyKeyToStory&&left.property.type==="Identifier"&&left.property.name==="story"});return storyAssignments.forEach(exp=>{let{left,right}=exp.node;storyKeyToStory[left.object.name]=right}),storyAssignments.remove(),defaultExportWithTitle.replaceWith(exp=>{let jsxId=j.jsxIdentifier("Meta"),attrs=[];exp.node.declaration.properties.forEach(prop=>{let{key,value}=prop;["includeStories","excludeStories"].includes(key.name)||attrs.push(makeAttr(key.name,value))});let opening=j.jsxOpeningElement(jsxId,attrs);return opening.selfClosing=!0,j.jsxElement(opening)}),namedExports.replaceWith(exp=>{let storyKey=exp.node.declaration.declarations[0].id.name;if(!(0,import_csf.isExportStory)(storyKey,meta))return exp.node;let jsxId=j.jsxIdentifier("Story"),name=getName(storyKey),attributes=[makeAttr("name",j.literal(name)),...getStoryAttrs(storyKey)],opening=j.jsxOpeningElement(jsxId,attributes),closing=j.jsxClosingElement(jsxId),children=[getStoryContents(exp.node.declaration.declarations[0].init)];return j.jsxElement(opening,closing,children)}),exportMdx(root,{quote:"single",trailingComma:"true",tabWidth:2})}0&&(module.exports={});

package/dist/transforms/csf-to-mdx.mjs

@@ -1,3 +0,0 @@
-import{prettyPrint}from"recast";import{isExportStory}from"@storybook/csf";function exportMdx(root,options){return root.__paths[0].node.program.body.map(n=>{let{code}=prettyPrint(n,options);return n.type==="JSXElement"?`${code}
-`:code}).join(`
-`)}function parseIncludeExclude(prop){let{code}=prettyPrint(prop,{});return(0,eval)(code)}function transformer(file,api){let j=api.jscodeshift,root=j(file.source),storyKeyToStory={},meta={};function makeAttr(key,val){return j.jsxAttribute(j.jsxIdentifier(key),val.type==="Literal"?val:j.jsxExpressionContainer(val))}function getStoryContents(node){return node.type==="ArrowFunctionExpression"&&node.body.type==="JSXElement"?node.body:j.jsxExpressionContainer(node)}function getName(storyKey){let story=storyKeyToStory[storyKey];if(story){let name=story.properties.find(prop=>prop.key.name==="name");if(name&&name.value.type==="Literal")return name.value.value}return storyKey}function getStoryAttrs(storyKey){let attrs=[],story=storyKeyToStory[storyKey];return story&&story.properties.forEach(prop=>{let{key,value}=prop;key.name!=="name"&&attrs.push(makeAttr(key.name,value))}),attrs}let defaultExportWithTitle=root.find(j.ExportDefaultDeclaration).filter(def=>def.node.declaration.properties.map(p=>p.key.name).includes("title"));if(defaultExportWithTitle.size()===0)return root.toSource();root.find(j.ImportDeclaration).at(-1).insertAfter(j.emptyStatement()).insertAfter(j.importDeclaration([j.importSpecifier(j.identifier("Meta")),j.importSpecifier(j.identifier("Story"))],j.literal("@storybook/addon-docs"))),root.find(j.ImportDeclaration).filter(decl=>decl.node.source.value==="react").remove(),defaultExportWithTitle.forEach(exp=>{exp.node.declaration.properties.forEach(p=>{["includeStories","excludeStories"].includes(p.key.name)&&(meta[p.key.name]=parseIncludeExclude(p.value))})});let namedExports=root.find(j.ExportNamedDeclaration);namedExports.forEach(exp=>{let storyKey=exp.node.declaration.declarations[0].id.name;isExportStory(storyKey,meta)&&(storyKeyToStory[storyKey]=null)});let storyAssignments=root.find(j.AssignmentExpression).filter(exp=>{let{left}=exp.node;return left.type==="MemberExpression"&&left.object.type==="Identifier"&&left.object.name in storyKeyToStory&&left.property.type==="Identifier"&&left.property.name==="story"});return storyAssignments.forEach(exp=>{let{left,right}=exp.node;storyKeyToStory[left.object.name]=right}),storyAssignments.remove(),defaultExportWithTitle.replaceWith(exp=>{let jsxId=j.jsxIdentifier("Meta"),attrs=[];exp.node.declaration.properties.forEach(prop=>{let{key,value}=prop;["includeStories","excludeStories"].includes(key.name)||attrs.push(makeAttr(key.name,value))});let opening=j.jsxOpeningElement(jsxId,attrs);return opening.selfClosing=!0,j.jsxElement(opening)}),namedExports.replaceWith(exp=>{let storyKey=exp.node.declaration.declarations[0].id.name;if(!isExportStory(storyKey,meta))return exp.node;let jsxId=j.jsxIdentifier("Story"),name=getName(storyKey),attributes=[makeAttr("name",j.literal(name)),...getStoryAttrs(storyKey)],opening=j.jsxOpeningElement(jsxId,attributes),closing=j.jsxClosingElement(jsxId),children=[getStoryContents(exp.node.declaration.declarations[0].init)];return j.jsxElement(opening,closing,children)}),exportMdx(root,{quote:"single",trailingComma:"true",tabWidth:2})}export{transformer as default};

package/dist/transforms/move-builtin-addons.mjs

@@ -1 +0,0 @@
-function transformer(file,api){let j=api.jscodeshift,createImportDeclaration=(specifiers,source)=>j.importDeclaration(specifiers.map(s=>j.importSpecifier(j.identifier(s))),j.literal(source)),deprecates={action:[["action"],"@storybook/addon-actions"],linkTo:[["linkTo"],"@storybook/addon-links"]};return j(file.source).find(j.ImportDeclaration).filter(i=>i.value.source.value==="@storybook/react").forEach(i=>{let importStatement=i.value;importStatement.specifiers=importStatement.specifiers.filter(specifier=>{let item=deprecates[specifier.local.name];if(item){let[specifiers,moduleName]=item;return i.insertAfter(createImportDeclaration(specifiers,moduleName)),!1}return specifier})}).toSource({quote:"single"})}export{transformer as default};

package/dist/transforms/storiesof-to-csf.mjs

@@ -1 +0,0 @@
-import{jscodeshiftToPrettierParser,sanitizeName}from"../chunk-CO6EPEMB.mjs";import prettier from"prettier";import{logger}from"@storybook/node-logger";import{storyNameFromExport}from"@storybook/csf";function transformer(file,api,options){let LITERAL=["ts","tsx"].includes(options.parser)?"StringLiteral":"Literal",j=api.jscodeshift,root=j(file.source);function extractDecorators(parameters){if(!parameters)return{};if(!parameters.properties)return{storyParams:parameters};let storyDecorators=parameters.properties.find(p=>p.key.name==="decorators");if(!storyDecorators)return{storyParams:parameters};storyDecorators=storyDecorators.value;let storyParams={...parameters};return storyParams.properties=storyParams.properties.filter(p=>p.key.name!=="decorators"),storyParams.properties.length===0?{storyDecorators}:{storyParams,storyDecorators}}function convertToModuleExports(path,originalExports2){let base=j(path),statements=[],extraExports=[],decorators=[];base.find(j.CallExpression).filter(call=>call.node.callee.property&&call.node.callee.property.name==="addDecorator").forEach(add=>{let decorator=add.node.arguments[0];decorators.push(decorator)}),decorators.length>0&&(decorators.reverse(),extraExports.push(j.property("init",j.identifier("decorators"),j.arrayExpression(decorators))));let parameters=[];base.find(j.CallExpression).filter(call=>call.node.callee.property&&call.node.callee.property.name==="addParameters").forEach(add=>{let params=[...add.node.arguments[0].properties];params.reverse(),params.forEach(prop=>parameters.push(prop))}),parameters.length>0&&(parameters.reverse(),extraExports.push(j.property("init",j.identifier("parameters"),j.objectExpression(parameters)))),originalExports2.length>0&&extraExports.push(j.property("init",j.identifier("excludeStories"),j.arrayExpression(originalExports2.map(exp=>j.literal(exp))))),base.find(j.CallExpression).filter(call=>call.node.callee.name==="storiesOf").filter(call=>call.node.arguments.length>0&&call.node.arguments[0].type===LITERAL).forEach(storiesOf=>{let title=storiesOf.node.arguments[0].value;statements.push(j.exportDefaultDeclaration(j.objectExpression([j.property("init",j.identifier("title"),j.literal(title)),...extraExports])))});let adds=[];base.find(j.CallExpression).filter(add=>add.node.callee.property&&add.node.callee.property.name==="add").filter(add=>add.node.arguments.length>=2&&add.node.arguments[0].type===LITERAL).forEach(add=>adds.push(add)),adds.reverse(),adds.push(path);let identifiers=new Set;root.find(j.Identifier).forEach(({value})=>identifiers.add(value.name)),adds.forEach(add=>{let name=add.node.arguments[0].value,key=sanitizeName(name);for(;identifiers.has(key);)key=`_${key}`;identifiers.add(key),storyNameFromExport(key)===name&&(name=null);let val=add.node.arguments[1];statements.push(j.exportDeclaration(!1,j.variableDeclaration("const",[j.variableDeclarator(j.identifier(key),val)])));let storyAnnotations=[];if(name&&storyAnnotations.push(j.property("init",j.identifier("name"),j.literal(name))),add.node.arguments.length>2){let originalStoryParams=add.node.arguments[2],{storyParams,storyDecorators}=extractDecorators(originalStoryParams);storyParams&&storyAnnotations.push(j.property("init",j.identifier("parameters"),storyParams)),storyDecorators&&storyAnnotations.push(j.property("init",j.identifier("decorators"),storyDecorators))}storyAnnotations.length>0&&statements.push(j.assignmentStatement("=",j.memberExpression(j.identifier(key),j.identifier("story")),j.objectExpression(storyAnnotations)))});let stmt=path.parent.node.type==="VariableDeclarator"?path.parent.parent:path.parent;statements.reverse(),statements.forEach(s=>stmt.insertAfter(s)),j(stmt).remove()}let initialStoriesOf=root.find(j.CallExpression).filter(call=>call.node.callee.name==="storiesOf");if(root.find(j.ExportDefaultDeclaration).size()>0)return initialStoriesOf.size()>0&&logger.warn(`Found ${initialStoriesOf.size()} 'storiesOf' calls but existing default export, SKIPPING: '${file.path}'`),root.toSource();let originalExports=[];root.find(j.ExportNamedDeclaration).forEach(exp=>{let{declaration,specifiers}=exp.node;if(declaration){let{id,declarations}=declaration;declarations?declarations.forEach(decl=>{let{name,properties}=decl.id;name?originalExports.push(name):properties&&properties.forEach(prop=>originalExports.push(prop.key.name))}):id&&originalExports.push(id.name)}else specifiers&&specifiers.forEach(spec=>originalExports.push(spec.exported.name))}),root.find(j.CallExpression).filter(add=>add.node.callee.property&&add.node.callee.property.name==="add").filter(add=>add.node.arguments.length>=2&&add.node.arguments[0].type===LITERAL).filter(add=>["ExpressionStatement","VariableDeclarator"].includes(add.parentPath.node.type)).forEach(path=>convertToModuleExports(path,originalExports)),root.find(j.ImportSpecifier).filter(spec=>spec.node.imported.name==="storiesOf"&&spec.parent.node.source.value.startsWith("@storybook/")).forEach(spec=>{let toRemove=spec.parent.node.specifiers.length>1?spec:spec.parent;j(toRemove).remove()});let source=root.toSource({trailingComma:!0,quote:"single",tabWidth:2});if(initialStoriesOf.size()>1)return logger.warn(`Found ${initialStoriesOf.size()} 'storiesOf' calls, PLEASE FIX BY HAND: '${file.path}'`),source;let prettierConfig=prettier.resolveConfig.sync(".",{editorconfig:!0})||{printWidth:100,tabWidth:2,bracketSpacing:!0,trailingComma:"es5",singleQuote:!0};return prettier.format(source,{...prettierConfig,parser:jscodeshiftToPrettierParser(options.parser)})}export{transformer as default};

package/dist/transforms/update-addon-info.mjs

@@ -1 +0,0 @@
-import{transformer}from"../chunk-B5FMQ3BX.mjs";export{transformer as default};

package/dist/transforms/update-organisation-name.mjs

@@ -1 +0,0 @@
-import{packageNames,transformer}from"../chunk-3OPQTROG.mjs";export{transformer as default,packageNames};

package/dist/transforms/upgrade-hierarchy-separators.mjs

@@ -1 +0,0 @@
-function upgradeSeparator(path){return path.replace(/[|.]/g,"/")}function transformer(file,api,options){let j=api.jscodeshift,root=j(file.source);return root.find(j.CallExpression).filter(call=>call.node.callee.name==="storiesOf").filter(call=>call.node.arguments.length>0&&["Literal","StringLiteral"].includes(call.node.arguments[0].type)).forEach(call=>{let arg0=call.node.arguments[0];arg0.value=upgradeSeparator(arg0.value)}),root.find(j.ExportDefaultDeclaration).filter(def=>def.node.declaration.properties.map(p=>p.key.name).includes("title")).forEach(def=>{def.node.declaration&&def.node.declaration.properties&&def.node.declaration.properties.forEach(p=>{p.key.name==="title"&&(p.value.value=upgradeSeparator(p.value.value))})}),root.toSource({quote:"single"})}export{transformer as default};

package/src/transforms/__testfixtures__/csf-to-mdx/basic.input.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import Button from './Button';
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: 'Button',
-};
-
-export const story1 = () => <Button label="Story 1" />;
-
-export const story2 = () => <Button label="Story 2" onClick={action('click')} />;
-story2.story = { name: 'second story' };
-
-export const story3 = () => (
-  <div>
-    <Button label="The Button" onClick={action('onClick')} />
-    <br />
-  </div>
-);
-story3.story = { name: 'complex story' };

package/src/transforms/__testfixtures__/csf-to-mdx/basic.output.snapshot

@@ -1,18 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`csf-to-mdx transforms correctly using "basic.input.js" data 1`] = `
-"import Button from './Button';
-import { action } from '@storybook/addon-actions';
-import { Meta, Story } from '@storybook/addon-docs';
-
-<Meta title='Button' />
-
-<Story name='story1'><Button label='Story 1' /></Story>
-
-<Story name='second story'><Button label='Story 2' onClick={action('click')} /></Story>
-
-<Story name='complex story'><div>
-    <Button label='The Button' onClick={action('onClick')} />
-    <br />
-  </div></Story>"
-`;