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

Sign up to get free protection for your applications and to get access to all the features.
Files changed (61) hide show
  1. package/README.md +0 -39
  2. package/dist/index.js +1 -1
  3. package/dist/transforms/add-component-parameters.js +1 -1
  4. package/dist/transforms/csf-2-to-3.d.ts +5 -4
  5. package/dist/transforms/csf-2-to-3.js +3 -1
  6. package/dist/transforms/csf-hoist-story-annotations.js +1 -1
  7. package/dist/transforms/mdx-to-csf.d.ts +7 -0
  8. package/dist/transforms/mdx-to-csf.js +55 -0
  9. package/dist/transforms/move-builtin-addons.js +1 -1
  10. package/dist/transforms/storiesof-to-csf.js +1 -1
  11. package/dist/transforms/update-addon-info.js +1 -1
  12. package/dist/transforms/update-organisation-name.js +1 -1
  13. package/dist/transforms/upgrade-deprecated-types.d.ts +10 -0
  14. package/dist/transforms/upgrade-deprecated-types.js +2 -0
  15. package/dist/transforms/upgrade-hierarchy-separators.js +1 -1
  16. package/jest.config.js +2 -0
  17. package/package.json +31 -15
  18. package/project.json +6 -0
  19. package/src/index.js +30 -4
  20. package/src/lib/utils.ts +2 -2
  21. package/src/transforms/__testfixtures__/storiesof-to-csf/decorators.input.js +1 -1
  22. package/src/transforms/__testfixtures__/storiesof-to-csf/export-function.input.js +1 -1
  23. package/src/transforms/__testfixtures__/storiesof-to-csf/story-decorators.input.js +1 -1
  24. package/src/transforms/__testfixtures__/update-addon-info/update-addon-info.input.js +34 -48
  25. package/src/transforms/__testfixtures__/update-addon-info/update-addon-info.output.snapshot +33 -47
  26. package/src/transforms/__tests__/csf-2-to-3.test.ts +170 -57
  27. package/src/transforms/__tests__/mdx-to-csf.test.ts +611 -0
  28. package/src/transforms/__tests__/upgrade-deprecated-types.test.ts +170 -0
  29. package/src/transforms/csf-2-to-3.ts +173 -37
  30. package/src/transforms/mdx-to-csf.ts +342 -0
  31. package/src/transforms/upgrade-deprecated-types.ts +142 -0
  32. package/dist/chunk-3OPQTROG.mjs +0 -1
  33. package/dist/chunk-B5FMQ3BX.mjs +0 -1
  34. package/dist/chunk-CO6EPEMB.mjs +0 -1
  35. package/dist/index.mjs +0 -1
  36. package/dist/transforms/add-component-parameters.mjs +0 -1
  37. package/dist/transforms/csf-2-to-3.mjs +0 -1
  38. package/dist/transforms/csf-hoist-story-annotations.mjs +0 -1
  39. package/dist/transforms/csf-to-mdx.d.ts +0 -29
  40. package/dist/transforms/csf-to-mdx.js +0 -3
  41. package/dist/transforms/csf-to-mdx.mjs +0 -3
  42. package/dist/transforms/move-builtin-addons.mjs +0 -1
  43. package/dist/transforms/storiesof-to-csf.mjs +0 -1
  44. package/dist/transforms/update-addon-info.mjs +0 -1
  45. package/dist/transforms/update-organisation-name.mjs +0 -1
  46. package/dist/transforms/upgrade-hierarchy-separators.mjs +0 -1
  47. package/src/transforms/__testfixtures__/csf-to-mdx/basic.input.js +0 -20
  48. package/src/transforms/__testfixtures__/csf-to-mdx/basic.output.snapshot +0 -18
  49. package/src/transforms/__testfixtures__/csf-to-mdx/component-id.input.js +0 -9
  50. package/src/transforms/__testfixtures__/csf-to-mdx/component-id.output.snapshot +0 -10
  51. package/src/transforms/__testfixtures__/csf-to-mdx/decorators.input.js +0 -13
  52. package/src/transforms/__testfixtures__/csf-to-mdx/decorators.output.snapshot +0 -12
  53. package/src/transforms/__testfixtures__/csf-to-mdx/exclude-stories.input.js +0 -23
  54. package/src/transforms/__testfixtures__/csf-to-mdx/exclude-stories.output.snapshot +0 -22
  55. package/src/transforms/__testfixtures__/csf-to-mdx/parameters.input.js +0 -16
  56. package/src/transforms/__testfixtures__/csf-to-mdx/parameters.output.snapshot +0 -17
  57. package/src/transforms/__testfixtures__/csf-to-mdx/story-function.input.js +0 -19
  58. package/src/transforms/__testfixtures__/csf-to-mdx/story-function.output.snapshot +0 -18
  59. package/src/transforms/__testfixtures__/csf-to-mdx/story-parameters.input.js +0 -24
  60. package/src/transforms/__testfixtures__/csf-to-mdx/story-parameters.output.snapshot +0 -22
  61. package/src/transforms/csf-to-mdx.js +0 -190
package/README.md CHANGED
@@ -201,45 +201,6 @@ Heuristics:
201
201
  - If a file has any default export, it will be skipped
202
202
  - If a file has multiple `storiesOf` declarations, it will convert each one separately. This generates invalid ES6, but you can edit the file by hand to split it into multiple files (or whatever is appropriate).
203
203
 
204
- ### csf-to-mdx
205
-
206
- This converts all of your CSF Component Stories into MDX syntax, which integrates story examples and long-form documentation.
207
-
208
- > NOTE: The output of this transformation may require manual editing after running the transformation. MDX is finnicky about the top-level statements it allows. For example, [variables should be defined with exports](https://mdxjs.com/getting-started/#defining-variables-with-exports), meaning `const foo = 5;` should be rewritten as `export const foo = 5;`. We don't do this transformation automatically, since you may prefer to refactor your stories.
209
-
210
- ```sh
211
- ./node_modules/.bin/jscodeshift -t ./node_modules/@storybook/codemod/dist/transforms/csf-to-mdx.js . --ignore-pattern "node_modules|dist"
212
- ```
213
-
214
- For example:
215
-
216
- ```js
217
- export default {
218
- title: 'Button',
219
- };
220
-
221
- export const story = () => <Button label="Story 1" />;
222
-
223
- export const story2 = () => <Button label="Story 2" onClick={action('click')} />;
224
- story2.story = { name: 'second story' };
225
- ```
226
-
227
- Becomes:
228
-
229
- ```md
230
- import { Meta, Story } from '@storybook/addon-docs';
231
-
232
- # Button
233
-
234
- <Meta title='Button'>
235
-
236
- <Story name='story'><Button label="Story 1" /></Story>
237
-
238
- <Story name='second story'>
239
- <Button label="Story 2" onClick={action('click')} />
240
- </Story>
241
- ```
242
-
243
204
  ### upgrade-hierarchy-separators
244
205
 
245
206
  Starting in 5.3, Storybook is moving to using a single path separator, `/`, to specify the story hierarchy. It previously defaulted to `|` for story "roots" (optional) and either `/` or `.` for denoting paths. This codemod updates the old default to the new default.
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- var R=Object.create;var l=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var S=(o,r)=>{for(var t in r)l(o,t,{get:r[t],enumerable:!0})},h=(o,r,t,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of v(r))!C.call(o,n)&&n!==t&&l(o,n,{get:()=>r[n],enumerable:!(a=N(r,n))||a.enumerable});return o};var p=(o,r,t)=>(t=o!=null?R(A(o)):{},h(r||!o||!o.__esModule?l(t,"default",{value:o,enumerable:!0}):t,o)),W=o=>h(l({},"__esModule",{value:!0}),o);var z={};S(z,{listCodemods:()=>E,packageNames:()=>m,runCodemod:()=>q,updateAddonInfo:()=>b,updateOrganisationName:()=>y});module.exports=W(z);var u=p(require("fs")),x=p(require("path")),w=require("util"),$=p(require("globby")),I=require("cross-spawn");var _=p(require("lodash/camelCase")),D=p(require("lodash/upperFirst"));function g(o){let r={babylon:"babel",flow:"flow",ts:"typescript",tsx:"typescript"};return o&&r[o]||"babel"}var m={"@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 y(o,r){let t=r.jscodeshift,a=Object.keys(m),n=s=>a.find(e=>s.match(e)),c=s=>{let e=n(s);if(e){let i=m[e];return s.replace(e,i)}return s},f=s=>(s.node.source.value=c(s.node.source.value),s.node);return t(o.source).find(t.ImportDeclaration).replaceWith(f).toSource({quote:"single"})}function b(o,r){let t=r.jscodeshift,a=t(o.source),n=e=>e[3]===void 0?e[2]===void 0?[e[0]]:[e[1]]:[t.objectExpression([t.property("init",t.identifier("text"),e[1]),...e[3].properties])],c=e=>{let{node:i}=e,d=i.arguments,k=d[2]?d[2]:d[1];return i.callee.property.name="add",i.arguments=[d[0],t.callExpression(t.callExpression(t.identifier("withInfo"),n(d)),[k])],i},f=()=>{a.find(t.ImportDeclaration).filter(i=>i.node.source.value==="@storybook/addon-info").size()||a.find(t.ImportDeclaration).at(-1).insertAfter(t.importDeclaration([t.importSpecifier(t.identifier("withInfo"))],t.literal("@storybook/addon-info")))},s=a.find(t.CallExpression,{callee:{property:{name:"addWithInfo"}}});return s.size()&&(f(),s.replaceWith(c)),a.toSource()}var j=`${__dirname}/transforms`;function E(){return u.default.readdirSync(j).filter(o=>o.endsWith(".js")).map(o=>o.slice(0,-3))}var F=(0,w.promisify)(u.default.rename);async function O(o,r,t,{logger:a}){let n=o.replace(r,t);return a.log(`Rename: ${o} ${n}`),F(o,n)}async function q(o,{glob:r,logger:t,dryRun:a,rename:n,parser:c}){if(!E().includes(o))throw new Error(`Unknown codemod ${o}. Run --list for options.`);let s=null;if(n&&(s=n.split(":"),s.length!==2))throw new Error(`Codemod rename: expected format "from:to", got "${n}"`);let e=c;if(!c){let d=x.default.extname(r).slice(1);g(d)!=="babel"&&(e=d)}let i=await(0,$.default)([r,"!**/node_modules","!**/dist"]);if(t.log(`=> Applying ${o}: ${i.length} files`),!a){let d=e?["--parser",e]:[];(0,I.sync)("npx",["jscodeshift","-t",`${j}/${o}.js`,...d,...i],{stdio:"inherit",shell:!0})}if(s){let[d,k]=s;t.log(`=> Renaming ${n}: ${i.length} files`),await Promise.all(i.map(P=>O(P,new RegExp(`${d}$`),k,{logger:t})))}}0&&(module.exports={listCodemods,packageNames,runCodemod,updateAddonInfo,updateOrganisationName});
1
+ var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__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 __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};__export(src_exports,{listCodemods:()=>listCodemods,packageNames:()=>packageNames,runCodemod:()=>runCodemod,updateAddonInfo:()=>transformer2,updateOrganisationName:()=>transformer});module.exports=__toCommonJS(src_exports);var import_fs=__toESM(require("fs")),import_path=__toESM(require("path")),import_util=require("util"),import_globby=__toESM(require("globby")),import_cross_spawn=require("cross-spawn");var import_camelCase=__toESM(require("lodash/camelCase.js")),import_upperFirst=__toESM(require("lodash/upperFirst.js"));function jscodeshiftToPrettierParser(parser){let parserMap={babylon:"babel",flow:"flow",ts:"typescript",tsx:"typescript"};return parser&&parserMap[parser]||"babel"}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"})}function transformer2(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()}var TRANSFORM_DIR=`${__dirname}/transforms`;function listCodemods(){return import_fs.default.readdirSync(TRANSFORM_DIR).filter(fname=>fname.endsWith(".js")).map(fname=>fname.slice(0,-3))}var renameAsync=(0,import_util.promisify)(import_fs.default.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=import_path.default.extname(glob).slice(1);jscodeshiftToPrettierParser(extension)!=="babel"&&(inferredParser=extension)}let files=await(0,import_globby.default)([glob,"!**/node_modules","!**/dist"]);if(logger.log(`=> Applying ${codemod}: ${files.length} files`),files.length===0){logger.log(`=> No matching files for glob: ${glob}`);return}if(!dryRun&&files.length>0){let parserArgs=inferredParser?["--parser",inferredParser]:[];if((0,import_cross_spawn.sync)("node",[require.resolve("jscodeshift/bin/jscodeshift"),"--no-babel","--fail-on-error","-t",`${TRANSFORM_DIR}/${codemod}.js`,...parserArgs,...files],{stdio:"inherit",shell:!0}).status===1){logger.log("Skipped renaming because of errors.");return}}if(!renameParts&&codemod==="mdx-to-csf"&&(renameParts=[".stories.mdx",".mdx"],rename=".stories.mdx:.mdx;"),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})))}}0&&(module.exports={listCodemods,packageNames,runCodemod,updateAddonInfo,updateOrganisationName});
@@ -1 +1 @@
1
- var s=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var g=(r,n)=>{for(var e in n)s(r,e,{get:n[e],enumerable:!0})},h=(r,n,e,i)=>{if(n&&typeof n=="object"||typeof n=="function")for(let a of p(n))!u.call(r,a)&&a!==e&&s(r,a,{get:()=>n[a],enumerable:!(i=d(n,a))||i.enumerable});return r};var E=r=>h(s({},"__esModule",{value:!0}),r);var x={};g(x,{default:()=>f});module.exports=E(x);function f(r,n){let e=n.jscodeshift,i=e(r.source),a={};i.find(e.ImportDeclaration).forEach(t=>t.node.specifiers.forEach(o=>{a[o.local.name]=!0}));function c(t){let o=t.split(/\/|\.|\|/);return o[o.length-1]}function l(t){let{node:o}=t,m=c(o.arguments[0].value);return e.callExpression(e.memberExpression(o,e.identifier("addParameters")),[e.objectExpression([e.property("init",e.identifier("component"),e.identifier(m))])])}return i.find(e.CallExpression).filter(t=>t.node.callee.name==="storiesOf").filter(t=>t.node.arguments.length>0&&t.node.arguments[0].type==="Literal").filter(t=>{let o=c(t.node.arguments[0].value);return a[o]}).replaceWith(l),i.toSource()}0&&(module.exports={});
1
+ 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 add_component_parameters_exports={};__export(add_component_parameters_exports,{default:()=>transformer});module.exports=__toCommonJS(add_component_parameters_exports);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()}0&&(module.exports={});
@@ -1,7 +1,8 @@
1
- declare function transform({ source }: {
2
- source: string;
3
- }, api: any, options: {
1
+ import { FileInfo, API } from 'jscodeshift';
2
+
3
+ declare function transform(info: FileInfo, api: API, options: {
4
4
  parser?: string;
5
5
  }): string;
6
+ declare const parser = "tsx";
6
7
 
7
- export { transform as default };
8
+ export { transform as default, parser };
@@ -1 +1,3 @@
1
- var _=Object.create;var f=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var F=(e,r)=>{for(var n in r)f(e,n,{get:r[n],enumerable:!0})},h=(e,r,n,s)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of w(r))!R.call(e,o)&&o!==n&&f(e,o,{get:()=>r[o],enumerable:!(s=D(r,o))||s.enumerable});return e};var d=(e,r,n)=>(n=e!=null?_(P(e)):{},h(r||!e||!e.__esModule?f(n,"default",{value:e,enumerable:!0}):n,e)),T=e=>h(f({},"__esModule",{value:!0}),e);var G={};F(G,{default:()=>z});module.exports=T(G);var x=d(require("prettier")),t=d(require("@babel/types")),u=require("@storybook/csf-tools");var k=d(require("lodash/camelCase")),N=d(require("lodash/upperFirst"));function j(e){let r={babylon:"babel",flow:"flow",ts:"typescript",tsx:"typescript"};return e&&r[e]||"babel"}var V=console,M=e=>e==="storyName"?"name":e,O=e=>t.isCallExpression(e)&&t.isMemberExpression(e.callee)&&t.isIdentifier(e.callee.object)&&t.isIdentifier(e.callee.property)&&e.callee.property.name==="bind"&&(e.arguments.length===0||e.arguments.length===1&&t.isObjectExpression(e.arguments[0])&&e.arguments[0].properties.length===0)?e.callee.object.name:null,X=(e,r)=>t.isExpressionStatement(e)&&t.isAssignmentExpression(e.expression)&&t.isMemberExpression(e.expression.left)&&t.isIdentifier(e.expression.left.object)&&r[e.expression.left.object.name],v=(e,r)=>t.isVariableDeclaration(e)&&e.declarations.length===1&&t.isIdentifier(e.declarations[0].id)&&r[e.declarations[0].id.name],J=(e,r)=>{if(t.isExportNamedDeclaration(e)&&t.isVariableDeclaration(e.declaration)&&e.declaration.declarations.length===1){let n=e.declaration.declarations[0];if(t.isVariableDeclarator(n)&&t.isIdentifier(n.id))return r[n.id.name]}return null},$=(e,r)=>{var n;if(((n=e._meta)==null?void 0:n.component)&&t.isArrowFunctionExpression(r)&&r.params.length===1&&t.isJSXElement(r.body)){let{openingElement:s}=r.body;if(s.selfClosing&&t.isJSXIdentifier(s.name)&&s.attributes.length===1){let o=s.attributes[0],l=r.params[0];if(t.isJSXSpreadAttribute(o)&&t.isIdentifier(o.argument)&&t.isIdentifier(l)&&l.name===o.argument.name&&e._meta.component===s.name.name)return!0}}return!1},B=(e,r)=>r.length===0&&t.isArrowFunctionExpression(e)&&e.params.length===0;function W({source:e},r,n){let o=(0,u.loadCsf)(e,{makeTitle:i=>i||"FIXME"});try{o.parse()}catch(i){return V.log(`Error ${i}, skipping`),e}let l={};Object.entries(o._storyExports).forEach(([i,a])=>{let p=Object.entries(o._storyAnnotations[i]).map(([c,g])=>t.objectProperty(t.identifier(M(c)),g));if(t.isVariableDeclarator(a)){let{init:c,id:g}=a,b=O(c);if(!t.isArrowFunctionExpression(c)&&!b||B(c,p))return;let m=b&&o._templates[b];m||(m=c);let y=t.identifier(i),{typeAnnotation:E}=g;E&&(y.typeAnnotation=E);let I=$(o,m)?[]:[t.objectProperty(t.identifier("render"),m)];l[i]=t.exportNamedDeclaration(t.variableDeclaration("const",[t.variableDeclarator(y,t.objectExpression([...I,...p]))]))}});let S=o._ast.program.body.reduce((i,a)=>{if(X(a,l)||v(a,o._templates))return i;let p=J(a,l);return p?(i.push(p),i):(i.push(a),i)},[]);o._ast.program.body=S;let A=(0,u.formatCsf)(o),C=x.default.resolveConfig.sync(".",{editorconfig:!0})||{printWidth:100,tabWidth:2,bracketSpacing:!0,trailingComma:"es5",singleQuote:!0};return x.default.format(A,{...C,parser:j(n==null?void 0:n.parser)})}var z=W;0&&(module.exports={});
1
+ var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__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 __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var csf_2_to_3_exports={};__export(csf_2_to_3_exports,{default:()=>transform,parser:()=>parser});module.exports=__toCommonJS(csf_2_to_3_exports);var import_prettier2=__toESM(require("prettier")),t2=__toESM(require("@babel/types")),import_types=require("@babel/types"),import_csf_tools2=require("@storybook/csf-tools"),babel2=__toESM(require("@babel/core")),recast2=__toESM(require("recast"));var import_prettier=__toESM(require("prettier")),babel=__toESM(require("@babel/core")),import_csf_tools=require("@storybook/csf-tools"),recast=__toESM(require("recast")),t=__toESM(require("@babel/types"));var deprecatedTypes=["ComponentStory","ComponentStoryFn","ComponentStoryObj","ComponentMeta","Story"];function migrateType(oldType){return oldType==="Story"||oldType==="ComponentStory"?"StoryFn":oldType.replace("Component","")}function upgradeDeprecatedTypes(file){let importedNamespaces=new Set,typeReferencesToUpdate=new Set,existingImports=[];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}))),path.node.source.value.startsWith("@storybook")&&path.get("specifiers").forEach(specifier=>{if(specifier.isImportNamespaceSpecifier()&&importedNamespaces.add(specifier.node.local.name),!specifier.isImportSpecifier())return;let imported=specifier.get("imported");if(imported.isIdentifier()&&deprecatedTypes.includes(imported.node.name)){imported.node.name===specifier.node.local.name&&typeReferencesToUpdate.add(specifier.node.local.name);let newType=migrateType(imported.node.name);if(!existingImports.some(it=>it.name===newType))imported.replaceWith(t.identifier(newType)),existingImports.push({name:newType,isAlias:!1,path:specifier});else{let 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.
2
+ Rename this local import and try again.`);specifier.remove()}}})}}),file.path.traverse({TSTypeReference:path=>{let typeName=path.get("typeName");if(typeName.isIdentifier())typeReferencesToUpdate.has(typeName.node.name)&&typeName.replaceWith(t.identifier(migrateType(typeName.node.name)));else if(typeName.isTSQualifiedName()){let namespace=typeName.get("left");if(namespace.isIdentifier()&&importedNamespaces.has(namespace.node.name)){let right=typeName.get("right");deprecatedTypes.includes(right.node.name)&&right.replaceWith(t.identifier(migrateType(right.node.name)))}}}})}var logger=console,renameAnnotation=annotation=>annotation==="storyName"?"name":annotation,getTemplateBindVariable=init=>t2.isCallExpression(init)&&t2.isMemberExpression(init.callee)&&t2.isIdentifier(init.callee.object)&&t2.isIdentifier(init.callee.property)&&init.callee.property.name==="bind"&&(init.arguments.length===0||init.arguments.length===1&&t2.isObjectExpression(init.arguments[0])&&init.arguments[0].properties.length===0)?init.callee.object.name:null,isStoryAnnotation=(stmt,objectExports)=>t2.isExpressionStatement(stmt)&&t2.isAssignmentExpression(stmt.expression)&&t2.isMemberExpression(stmt.expression.left)&&t2.isIdentifier(stmt.expression.left.object)&&objectExports[stmt.expression.left.object.name],isTemplateDeclaration=(stmt,templates)=>t2.isVariableDeclaration(stmt)&&stmt.declarations.length===1&&t2.isIdentifier(stmt.declarations[0].id)&&templates[stmt.declarations[0].id.name],getNewExport=(stmt,objectExports)=>{if(t2.isExportNamedDeclaration(stmt)&&t2.isVariableDeclaration(stmt.declaration)&&stmt.declaration.declarations.length===1){let decl=stmt.declaration.declarations[0];if(t2.isVariableDeclarator(decl)&&t2.isIdentifier(decl.id))return objectExports[decl.id.name]}return null},isReactGlobalRenderFn=(csf,storyFn)=>{var _a;if((_a=csf._meta)!=null&&_a.component&&t2.isArrowFunctionExpression(storyFn)&&storyFn.params.length===1&&t2.isJSXElement(storyFn.body)){let{openingElement}=storyFn.body;if(openingElement.selfClosing&&t2.isJSXIdentifier(openingElement.name)&&openingElement.attributes.length===1){let attr=openingElement.attributes[0],param=storyFn.params[0];if(t2.isJSXSpreadAttribute(attr)&&t2.isIdentifier(attr.argument)&&t2.isIdentifier(param)&&param.name===attr.argument.name&&csf._meta.component===openingElement.name.name)return!0}}return!1},isSimpleCSFStory=(init,annotations)=>annotations.length===0&&t2.isArrowFunctionExpression(init)&&init.params.length===0;function transform(info,api,options){let makeTitle=userTitle=>userTitle||"FIXME",csf=(0,import_csf_tools2.loadCsf)(info.source,{makeTitle});try{csf.parse()}catch(err){return logger.log(`Error ${err}, skipping`),info.source}let file=new babel2.File({filename:info.path},{code:info.source,ast:csf._ast}),importHelper=new StorybookImportHelper(file,info),objectExports={};Object.entries(csf._storyExports).forEach(([key,decl])=>{let annotations=Object.entries(csf._storyAnnotations[key]).map(([annotation,val])=>t2.objectProperty(t2.identifier(renameAnnotation(annotation)),val));if(t2.isVariableDeclarator(decl)){let{init,id}=decl,template=getTemplateBindVariable(init);if(!t2.isArrowFunctionExpression(init)&&!template)return;if(isSimpleCSFStory(init,annotations)){objectExports[key]=t2.exportNamedDeclaration(t2.variableDeclaration("const",[t2.variableDeclarator(importHelper.updateTypeTo(id,"StoryFn"),init)]));return}let storyFn=template&&csf._templates[template];storyFn||(storyFn=init);let renderAnnotation=isReactGlobalRenderFn(csf,storyFn)?[]:[t2.objectProperty(t2.identifier("render"),storyFn)];objectExports[key]=t2.exportNamedDeclaration(t2.variableDeclaration("const",[t2.variableDeclarator(importHelper.updateTypeTo(id,"StoryObj"),t2.objectExpression([...renderAnnotation,...annotations]))]))}}),importHelper.removeDeprecatedStoryImport(),csf._ast.program.body=csf._ast.program.body.reduce((acc,stmt)=>{let statement=stmt;if(isStoryAnnotation(statement,objectExports)||isTemplateDeclaration(statement,csf._templates))return acc;let newExport=getNewExport(statement,objectExports);return newExport?(acc.push(newExport),acc):(acc.push(statement),acc)},[]),upgradeDeprecatedTypes(file);let output=recast2.print(csf._ast,{}).code;try{let prettierConfig=import_prettier2.default.resolveConfig.sync(".",{editorconfig:!0})||{printWidth:100,tabWidth:2,bracketSpacing:!0,trailingComma:"es5",singleQuote:!0};output=import_prettier2.default.format(output,{...prettierConfig,filepath:info.path})}catch{logger.log(`Failed applying prettier to ${info.path}.`)}return output}var StorybookImportHelper=class{constructor(file,info){this.getAllSbImportDeclarations=file=>{let found=[];return file.path.traverse({ImportDeclaration:path=>{let source=path.node.source.value;if(source.startsWith("@storybook/csf")||!source.startsWith("@storybook"))return;path.get("specifiers").some(specifier=>{if(specifier.isImportNamespaceSpecifier())throw new Error(`This codemod does not support namespace imports for a ${path.node.source.value} package.
3
+ Replace the namespace import with named imports and try again.`);if(!specifier.isImportSpecifier())return!1;let imported=specifier.get("imported");return imported.isIdentifier()?["Story","StoryFn","StoryObj","Meta","ComponentStory","ComponentStoryFn","ComponentStoryObj","ComponentMeta"].includes(imported.node.name):!1})&&found.push(path)}}),found};this.getOrAddImport=type=>{let sbImport=this.sbImportDeclarations.find(path=>path.node.importKind==="type")??this.sbImportDeclarations[0];if(sbImport==null)return;let specifiers=sbImport.get("specifiers"),importSpecifier2=specifiers.find(specifier=>{if(!specifier.isImportSpecifier())return!1;let imported=specifier.get("imported");return imported.isIdentifier()?imported.node.name===type:!1});return importSpecifier2?importSpecifier2.node.local.name:(specifiers[0].insertBefore(t2.importSpecifier(t2.identifier(type),t2.identifier(type))),type)};this.removeDeprecatedStoryImport=()=>{this.sbImportDeclarations.flatMap(it=>it.get("specifiers")).filter(specifier=>{if(!specifier.isImportSpecifier())return!1;let imported=specifier.get("imported");return imported.isIdentifier()?imported.node.name==="Story":!1}).forEach(path=>path.remove())};this.getAllLocalImports=()=>this.sbImportDeclarations.flatMap(it=>it.get("specifiers")).map(it=>it.node.local.name);this.updateTypeTo=(id,type)=>{if((0,import_types.isIdentifier)(id)&&(0,import_types.isTSTypeAnnotation)(id.typeAnnotation)&&(0,import_types.isTSTypeReference)(id.typeAnnotation.typeAnnotation)&&(0,import_types.isIdentifier)(id.typeAnnotation.typeAnnotation.typeName)){let{name}=id.typeAnnotation.typeAnnotation.typeName;if(this.getAllLocalImports().includes(name)){let localTypeImport=this.getOrAddImport(type);return{...id,typeAnnotation:t2.tsTypeAnnotation(t2.tsTypeReference(t2.identifier(localTypeImport),id.typeAnnotation.typeAnnotation.typeParameters))}}}return id};this.sbImportDeclarations=this.getAllSbImportDeclarations(file)}},parser="tsx";0&&(module.exports={parser});
@@ -1 +1 @@
1
- var c=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var E=(n,o)=>{for(var r in o)c(n,r,{get:o[r],enumerable:!0})},b=(n,o,r,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of l(o))!u.call(n,i)&&i!==r&&c(n,i,{get:()=>o[i],enumerable:!(s=d(o,i))||s.enumerable});return n};var g=n=>b(c({},"__esModule",{value:!0}),n);var j={};E(j,{default:()=>y});module.exports=g(j);var m=n=>n.node.type.endsWith("Statement")?n:m(n.parent);function y(n,o){let r=o.jscodeshift,s=r(n.source),i=t=>t.type==="Identifier"&&t.name==="name"?r.identifier("storyName"):t;if(s.find(r.ExportDefaultDeclaration).filter(t=>t.node.declaration.type==="ObjectExpression"&&t.node.declaration.properties.map(e=>e.key.name).includes("title")).size()===0)return s.toSource();let a=s.find(r.AssignmentExpression).filter(t=>{let{left:e,right:p}=t.node;return e.type==="MemberExpression"&&e.object.type==="Identifier"&&e.property.type==="Identifier"&&e.property.name==="story"&&p.type==="ObjectExpression"});return a.forEach(t=>{let{left:e,right:p}=t.node;p.properties.forEach(f=>{m(t).insertBefore(r.assignmentStatement("=",r.memberExpression(e.object,i(f.key)),f.value))})}),a.remove(),s.find(r.AssignmentExpression).filter(t=>{let{left:e}=t.node;return e.type==="MemberExpression"&&e.object.type==="MemberExpression"&&e.object.property.type==="Identifier"&&e.object.property.name==="story"&&e.property.type==="Identifier"}).replaceWith(t=>{let{left:e,right:p}=t.node;return r.assignmentExpression("=",r.memberExpression(e.object.object,i(e.property)),p)}),s.toSource({quote:"single"})}0&&(module.exports={});
1
+ 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_hoist_story_annotations_exports={};__export(csf_hoist_story_annotations_exports,{default:()=>transformer});module.exports=__toCommonJS(csf_hoist_story_annotations_exports);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"})}0&&(module.exports={});
@@ -0,0 +1,7 @@
1
+ import { FileInfo } from 'jscodeshift';
2
+
3
+ declare function jscodeshift(info: FileInfo): string;
4
+ declare function transform(source: string, baseName: string): [mdx: string, csf: string];
5
+ declare function nameToValidExport(name: string): string;
6
+
7
+ export { jscodeshift as default, nameToValidExport, transform };