@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
@@ -1 +1 @@
1
- var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var b=(e,t)=>{for(var o in t)c(e,o,{get:t[o],enumerable:!0})},v=(e,t,o,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of d(t))!k.call(e,r)&&r!==o&&c(e,r,{get:()=>t[r],enumerable:!(i=p(t,r))||i.enumerable});return e};var y=e=>v(c({},"__esModule",{value:!0}),e);var D={};b(D,{default:()=>f});module.exports=y(D);function f(e,t){let o=t.jscodeshift,i=(n,a)=>o.importDeclaration(n.map(s=>o.importSpecifier(o.identifier(s))),o.literal(a)),r={action:[["action"],"@storybook/addon-actions"],linkTo:[["linkTo"],"@storybook/addon-links"]};return o(e.source).find(o.ImportDeclaration).filter(n=>n.value.source.value==="@storybook/react").forEach(n=>{let a=n.value;a.specifiers=a.specifiers.filter(s=>{let l=r[s.local.name];if(l){let[m,u]=l;return n.insertAfter(i(m,u)),!1}return 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 move_builtin_addons_exports={};__export(move_builtin_addons_exports,{default:()=>transformer});module.exports=__toCommonJS(move_builtin_addons_exports);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"})}0&&(module.exports={});
@@ -1 +1 @@
1
- var M=Object.create;var v=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var q=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,G=Object.prototype.hasOwnProperty;var H=(o,n)=>{for(var l in n)v(o,l,{get:n[l],enumerable:!0})},$=(o,n,l,h)=>{if(n&&typeof n=="object"||typeof n=="function")for(let e of q(n))!G.call(o,e)&&e!==l&&v(o,e,{get:()=>n[e],enumerable:!(h=V(n,e))||h.enumerable});return o};var D=(o,n,l)=>(l=o!=null?M(B(o)):{},$(n||!o||!o.__esModule?v(l,"default",{value:o,enumerable:!0}):l,o)),K=o=>$(v({},"__esModule",{value:!0}),o);var Q={};H(Q,{default:()=>F});module.exports=K(Q);var P=D(require("prettier")),S=require("@storybook/node-logger"),A=require("@storybook/csf");var w=D(require("lodash/camelCase")),I=D(require("lodash/upperFirst")),N=o=>{let n=(0,I.default)((0,w.default)(o));return/^\d/.test(n)&&(n=`_${n}`),/^\d/.test(n)&&(n=`_${n}`),n};function O(o){let n={babylon:"babel",flow:"flow",ts:"typescript",tsx:"typescript"};return o&&n[o]||"babel"}function F(o,n,l){let h=["ts","tsx"].includes(l.parser)?"StringLiteral":"Literal",e=n.jscodeshift,c=e(o.source);function L(t){if(!t)return{};if(!t.properties)return{storyParams:t};let s=t.properties.find(i=>i.key.name==="decorators");if(!s)return{storyParams:t};s=s.value;let a={...t};return a.properties=a.properties.filter(i=>i.key.name!=="decorators"),a.properties.length===0?{storyDecorators:s}:{storyParams:a,storyDecorators:s}}function T(t,s){let a=e(t),i=[],d=[],y=[];a.find(e.CallExpression).filter(r=>r.node.callee.property&&r.node.callee.property.name==="addDecorator").forEach(r=>{let p=r.node.arguments[0];y.push(p)}),y.length>0&&(y.reverse(),d.push(e.property("init",e.identifier("decorators"),e.arrayExpression(y))));let u=[];a.find(e.CallExpression).filter(r=>r.node.callee.property&&r.node.callee.property.name==="addParameters").forEach(r=>{let p=[...r.node.arguments[0].properties];p.reverse(),p.forEach(f=>u.push(f))}),u.length>0&&(u.reverse(),d.push(e.property("init",e.identifier("parameters"),e.objectExpression(u)))),s.length>0&&d.push(e.property("init",e.identifier("excludeStories"),e.arrayExpression(s.map(r=>e.literal(r))))),a.find(e.CallExpression).filter(r=>r.node.callee.name==="storiesOf").filter(r=>r.node.arguments.length>0&&r.node.arguments[0].type===h).forEach(r=>{let p=r.node.arguments[0].value;i.push(e.exportDefaultDeclaration(e.objectExpression([e.property("init",e.identifier("title"),e.literal(p)),...d])))});let m=[];a.find(e.CallExpression).filter(r=>r.node.callee.property&&r.node.callee.property.name==="add").filter(r=>r.node.arguments.length>=2&&r.node.arguments[0].type===h).forEach(r=>m.push(r)),m.reverse(),m.push(t);let E=new Set;c.find(e.Identifier).forEach(({value:r})=>E.add(r.name)),m.forEach(r=>{let p=r.node.arguments[0].value,f=N(p);for(;E.has(f);)f=`_${f}`;E.add(f),(0,A.storyNameFromExport)(f)===p&&(p=null);let R=r.node.arguments[1];i.push(e.exportDeclaration(!1,e.variableDeclaration("const",[e.variableDeclarator(e.identifier(f),R)])));let x=[];if(p&&x.push(e.property("init",e.identifier("name"),e.literal(p))),r.node.arguments.length>2){let _=r.node.arguments[2],{storyParams:k,storyDecorators:z}=L(_);k&&x.push(e.property("init",e.identifier("parameters"),k)),z&&x.push(e.property("init",e.identifier("decorators"),z))}x.length>0&&i.push(e.assignmentStatement("=",e.memberExpression(e.identifier(f),e.identifier("story")),e.objectExpression(x)))});let j=t.parent.node.type==="VariableDeclarator"?t.parent.parent:t.parent;i.reverse(),i.forEach(r=>j.insertAfter(r)),e(j).remove()}let b=c.find(e.CallExpression).filter(t=>t.node.callee.name==="storiesOf");if(c.find(e.ExportDefaultDeclaration).size()>0)return b.size()>0&&S.logger.warn(`Found ${b.size()} 'storiesOf' calls but existing default export, SKIPPING: '${o.path}'`),c.toSource();let g=[];c.find(e.ExportNamedDeclaration).forEach(t=>{let{declaration:s,specifiers:a}=t.node;if(s){let{id:i,declarations:d}=s;d?d.forEach(y=>{let{name:u,properties:m}=y.id;u?g.push(u):m&&m.forEach(E=>g.push(E.key.name))}):i&&g.push(i.name)}else a&&a.forEach(i=>g.push(i.exported.name))}),c.find(e.CallExpression).filter(t=>t.node.callee.property&&t.node.callee.property.name==="add").filter(t=>t.node.arguments.length>=2&&t.node.arguments[0].type===h).filter(t=>["ExpressionStatement","VariableDeclarator"].includes(t.parentPath.node.type)).forEach(t=>T(t,g)),c.find(e.ImportSpecifier).filter(t=>t.node.imported.name==="storiesOf"&&t.parent.node.source.value.startsWith("@storybook/")).forEach(t=>{let s=t.parent.node.specifiers.length>1?t:t.parent;e(s).remove()});let C=c.toSource({trailingComma:!0,quote:"single",tabWidth:2});if(b.size()>1)return S.logger.warn(`Found ${b.size()} 'storiesOf' calls, PLEASE FIX BY HAND: '${o.path}'`),C;let W=P.default.resolveConfig.sync(".",{editorconfig:!0})||{printWidth:100,tabWidth:2,bracketSpacing:!0,trailingComma:"es5",singleQuote:!0};return P.default.format(C,{...W,parser:O(l.parser)})}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 storiesof_to_csf_exports={};__export(storiesof_to_csf_exports,{default:()=>transformer});module.exports=__toCommonJS(storiesof_to_csf_exports);var import_prettier=__toESM(require("prettier")),import_node_logger=require("@storybook/node-logger"),import_csf=require("@storybook/csf");var import_camelCase=__toESM(require("lodash/camelCase.js")),import_upperFirst=__toESM(require("lodash/upperFirst.js")),sanitizeName=name=>{let key=(0,import_upperFirst.default)((0,import_camelCase.default)(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"}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),(0,import_csf.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&&import_node_logger.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 import_node_logger.logger.warn(`Found ${initialStoriesOf.size()} 'storiesOf' calls, PLEASE FIX BY HAND: '${file.path}'`),source;let prettierConfig=import_prettier.default.resolveConfig.sync(".",{editorconfig:!0})||{printWidth:100,tabWidth:2,bracketSpacing:!0,trailingComma:"es5",singleQuote:!0};return import_prettier.default.format(source,{...prettierConfig,parser:jscodeshiftToPrettierParser(options.parser)})}0&&(module.exports={});
@@ -1 +1 @@
1
- var f=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var I=(o,e)=>{for(var t in e)f(o,t,{get:e[t],enumerable:!0})},E=(o,e,t,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of h(e))!x.call(o,r)&&r!==t&&f(o,r,{get:()=>e[r],enumerable:!(i=m(e,r))||i.enumerable});return o};var y=o=>E(f({},"__esModule",{value:!0}),o);var W={};I(W,{default:()=>d});module.exports=y(W);function d(o,e){let t=e.jscodeshift,i=t(o.source),r=n=>n[3]===void 0?n[2]===void 0?[n[0]]:[n[1]]:[t.objectExpression([t.property("init",t.identifier("text"),n[1]),...n[3].properties])],a=n=>{let{node:s}=n,c=s.arguments,u=c[2]?c[2]:c[1];return s.callee.property.name="add",s.arguments=[c[0],t.callExpression(t.callExpression(t.identifier("withInfo"),r(c)),[u])],s},l=()=>{i.find(t.ImportDeclaration).filter(s=>s.node.source.value==="@storybook/addon-info").size()||i.find(t.ImportDeclaration).at(-1).insertAfter(t.importDeclaration([t.importSpecifier(t.identifier("withInfo"))],t.literal("@storybook/addon-info")))},p=i.find(t.CallExpression,{callee:{property:{name:"addWithInfo"}}});return p.size()&&(l(),p.replaceWith(a)),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 update_addon_info_exports={};__export(update_addon_info_exports,{default:()=>transformer});module.exports=__toCommonJS(update_addon_info_exports);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()}0&&(module.exports={});
@@ -1 +1 @@
1
- var k=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var u=(t,o)=>{for(var r in o)k(t,r,{get:o[r],enumerable:!0})},m=(t,o,r,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of l(o))!h.call(t,s)&&s!==r&&k(t,s,{get:()=>o[s],enumerable:!(n=p(o,s))||n.enumerable});return t};var g=t=>m(k({},"__esModule",{value:!0}),t);var f={};u(f,{default:()=>c,packageNames:()=>d});module.exports=g(f);var d={"@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 c(t,o){let r=o.jscodeshift,n=Object.keys(d),s=a=>n.find(e=>a.match(e)),b=a=>{let e=s(a);if(e){let i=d[e];return a.replace(e,i)}return a},y=a=>(a.node.source.value=b(a.node.source.value),a.node);return r(t.source).find(r.ImportDeclaration).replaceWith(y).toSource({quote:"single"})}0&&(module.exports={packageNames});
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 update_organisation_name_exports={};__export(update_organisation_name_exports,{default:()=>transformer,packageNames:()=>packageNames});module.exports=__toCommonJS(update_organisation_name_exports);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"})}0&&(module.exports={packageNames});
@@ -0,0 +1,10 @@
1
+ import { FileInfo, API } from 'jscodeshift';
2
+ import { BabelFile } from '@babel/core';
3
+
4
+ declare function transform(info: FileInfo, api: API, options: {
5
+ parser?: string;
6
+ }): string;
7
+ declare const parser = "tsx";
8
+ declare function upgradeDeprecatedTypes(file: BabelFile): void;
9
+
10
+ export { transform as default, parser, upgradeDeprecatedTypes };
@@ -0,0 +1,2 @@
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 upgrade_deprecated_types_exports={};__export(upgrade_deprecated_types_exports,{default:()=>transform,parser:()=>parser,upgradeDeprecatedTypes:()=>upgradeDeprecatedTypes});module.exports=__toCommonJS(upgrade_deprecated_types_exports);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")),logger=console,deprecatedTypes=["ComponentStory","ComponentStoryFn","ComponentStoryObj","ComponentMeta","Story"];function migrateType(oldType){return oldType==="Story"||oldType==="ComponentStory"?"StoryFn":oldType.replace("Component","")}function transform(info,api,options){let fileNode=(0,import_csf_tools.loadCsf)(info.source,{makeTitle:title=>title})._ast,file=new babel.File({filename:info.path},{code:info.source,ast:fileNode});upgradeDeprecatedTypes(file);let output=recast.print(file.path.node).code;try{let prettierConfig=import_prettier.default.resolveConfig.sync(".",{editorconfig:!0})||{printWidth:100,tabWidth:2,bracketSpacing:!0,trailingComma:"es5",singleQuote:!0};output=import_prettier.default.format(output,{...prettierConfig,filepath:info.path})}catch{logger.log(`Failed applying prettier to ${info.path}.`)}return output}var parser="tsx";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)))}}}})}0&&(module.exports={parser,upgradeDeprecatedTypes});
@@ -1 +1 @@
1
- var l=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var p=(r,t)=>{for(var i in t)l(r,i,{get:t[i],enumerable:!0})},g=(r,t,i,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of d(t))!f.call(r,o)&&o!==i&&l(r,o,{get:()=>t[o],enumerable:!(a=c(t,o))||a.enumerable});return r};var m=r=>g(l({},"__esModule",{value:!0}),r);var v={};p(v,{default:()=>u});module.exports=m(v);function s(r){return r.replace(/[|.]/g,"/")}function u(r,t,i){let a=t.jscodeshift,o=a(r.source);return o.find(a.CallExpression).filter(e=>e.node.callee.name==="storiesOf").filter(e=>e.node.arguments.length>0&&["Literal","StringLiteral"].includes(e.node.arguments[0].type)).forEach(e=>{let n=e.node.arguments[0];n.value=s(n.value)}),o.find(a.ExportDefaultDeclaration).filter(e=>e.node.declaration.properties.map(n=>n.key.name).includes("title")).forEach(e=>{e.node.declaration&&e.node.declaration.properties&&e.node.declaration.properties.forEach(n=>{n.key.name==="title"&&(n.value.value=s(n.value.value))})}),o.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 upgrade_hierarchy_separators_exports={};__export(upgrade_hierarchy_separators_exports,{default:()=>transformer});module.exports=__toCommonJS(upgrade_hierarchy_separators_exports);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"})}0&&(module.exports={});
package/jest.config.js CHANGED
@@ -1,7 +1,9 @@
1
1
  const path = require('path');
2
2
  const baseConfig = require('../../jest.config.node');
3
3
 
4
+ /** @type {import('jest').Config} */
4
5
  module.exports = {
5
6
  ...baseConfig,
6
7
  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
8
+ resetMocks: true,
7
9
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@storybook/codemod",
3
- "version": "7.0.0-beta.8",
3
+ "version": "7.0.0-rc.0",
4
4
  "description": "A collection of codemod scripts written with JSCodeshift",
5
5
  "keywords": [
6
6
  "storybook"
@@ -22,64 +22,80 @@
22
22
  "sideEffects": false,
23
23
  "exports": {
24
24
  ".": {
25
+ "node": "./dist/index.js",
25
26
  "require": "./dist/index.js",
26
- "import": "./dist/index.mjs",
27
27
  "types": "./dist/index.d.ts"
28
28
  },
29
29
  "./dist/transforms/add-component-parameters.js": "./dist/transforms/add-component-parameters.js",
30
30
  "./dist/transforms/csf-2-to-3.js": "./dist/transforms/csf-2-to-3.js",
31
31
  "./dist/transforms/csf-hoist-story-annotations.js": "./dist/transforms/csf-hoist-story-annotations.js",
32
- "./dist/transforms/csf-to-mdx.js": "./dist/transforms/csf-to-mdx.js",
33
32
  "./dist/transforms/move-builtin-addons.js": "./dist/transforms/move-builtin-addons.js",
33
+ "./dist/transforms/mdx-to-csf.js": "./dist/transforms/mdx-to-csf.js",
34
34
  "./dist/transforms/storiesof-to-csf.js": "./dist/transforms/storiesof-to-csf.js",
35
35
  "./dist/transforms/update-addon-info.js": "./dist/transforms/update-addon-info.js",
36
36
  "./dist/transforms/update-organisation-name.js": "./dist/transforms/update-organisation-name.js",
37
+ "./dist/transforms/upgrade-deprecated-types.js": "./dist/transforms/upgrade-deprecated-types.js",
37
38
  "./dist/transforms/upgrade-hierarchy-separators.js": "./dist/transforms/upgrade-hierarchy-separators.js",
38
39
  "./package.json": "./package.json"
39
40
  },
40
41
  "main": "dist/index.js",
41
- "module": "dist/index.mjs",
42
42
  "types": "dist/index.d.ts",
43
43
  "scripts": {
44
44
  "check": "../../../scripts/node_modules/.bin/tsc --noEmit",
45
45
  "prep": "../../../scripts/prepare/bundle.ts"
46
46
  },
47
47
  "dependencies": {
48
- "@babel/types": "^7.20.2",
48
+ "@babel/core": "~7.21.0",
49
+ "@babel/preset-env": "~7.20.2",
50
+ "@babel/types": "~7.21.2",
49
51
  "@storybook/csf": "next",
50
- "@storybook/csf-tools": "7.0.0-beta.8",
51
- "@storybook/node-logger": "7.0.0-beta.8",
52
- "@storybook/types": "7.0.0-beta.8",
52
+ "@storybook/csf-tools": "7.0.0-rc.0",
53
+ "@storybook/node-logger": "7.0.0-rc.0",
54
+ "@storybook/types": "7.0.0-rc.0",
53
55
  "cross-spawn": "^7.0.3",
54
56
  "globby": "^11.0.2",
55
- "jscodeshift": "^0.13.1",
57
+ "jscodeshift": "^0.14.0",
56
58
  "lodash": "^4.17.21",
57
59
  "prettier": "^2.8.0",
58
- "recast": "^0.19.0",
59
- "util": "^0.12.4"
60
+ "recast": "^0.23.1"
60
61
  },
61
62
  "devDependencies": {
63
+ "@types/jscodeshift": "^0.11.6",
64
+ "ansi-regex": "^5.0.1",
62
65
  "jest": "^29.3.1",
63
66
  "jest-specific-snapshot": "^7.0.0",
64
- "typescript": "~4.9.3"
67
+ "mdast-util-mdx-jsx": "^2.1.2",
68
+ "mdast-util-mdxjs-esm": "^1.3.1",
69
+ "remark": "^14.0.2",
70
+ "remark-mdx": "^2.2.1",
71
+ "ts-dedent": "^2.2.0",
72
+ "typescript": "~4.9.3",
73
+ "unist-util-is": "^5.2.0",
74
+ "unist-util-select": "^4.0.3",
75
+ "unist-util-visit": "^4.1.2",
76
+ "util": "^0.12.4",
77
+ "vfile": "^5.3.7"
65
78
  },
66
79
  "publishConfig": {
67
80
  "access": "public"
68
81
  },
69
82
  "bundler": {
70
- "platform": "node",
71
83
  "entries": [
72
84
  "./src/index.js",
73
85
  "./src/transforms/add-component-parameters.js",
74
86
  "./src/transforms/csf-2-to-3.ts",
75
87
  "./src/transforms/csf-hoist-story-annotations.js",
76
- "./src/transforms/csf-to-mdx.js",
88
+ "./src/transforms/mdx-to-csf.ts",
77
89
  "./src/transforms/move-builtin-addons.js",
78
90
  "./src/transforms/storiesof-to-csf.js",
79
91
  "./src/transforms/update-addon-info.js",
80
92
  "./src/transforms/update-organisation-name.js",
93
+ "./src/transforms/upgrade-deprecated-types.ts",
81
94
  "./src/transforms/upgrade-hierarchy-separators.js"
95
+ ],
96
+ "formats": [
97
+ "cjs"
82
98
  ]
83
99
  },
84
- "gitHead": "5340574d89a799ec10959edc16ca140852cf355c"
100
+ "gitHead": "6d1bcb2579203a3075467a2ba83738d854545053"
85
101
  }
package/project.json ADDED
@@ -0,0 +1,6 @@
1
+ {
2
+ "name": "@storybook/codemod",
3
+ "$schema": "../../node_modules/nx/schemas/project-schema.json",
4
+ "implicitDependencies": [],
5
+ "type": "library"
6
+ }
package/src/index.js CHANGED
@@ -1,3 +1,4 @@
1
+ /* eslint-disable no-param-reassign */
1
2
  /* eslint import/prefer-default-export: "off" */
2
3
  import fs from 'fs';
3
4
  import path from 'path';
@@ -55,16 +56,41 @@ export async function runCodemod(codemod, { glob, logger, dryRun, rename, parser
55
56
 
56
57
  const files = await globby([glob, '!**/node_modules', '!**/dist']);
57
58
  logger.log(`=> Applying ${codemod}: ${files.length} files`);
58
- if (!dryRun) {
59
+ if (files.length === 0) {
60
+ logger.log(`=> No matching files for glob: ${glob}`);
61
+ return;
62
+ }
63
+
64
+ if (!dryRun && files.length > 0) {
59
65
  const parserArgs = inferredParser ? ['--parser', inferredParser] : [];
60
- spawnSync(
61
- 'npx',
62
- ['jscodeshift', '-t', `${TRANSFORM_DIR}/${codemod}.js`, ...parserArgs, ...files],
66
+ const result = spawnSync(
67
+ 'node',
68
+ [
69
+ require.resolve('jscodeshift/bin/jscodeshift'),
70
+ // this makes sure codeshift doesn't transform our own source code with babel
71
+ // which is faster, and also makes sure the user won't see babel messages such as:
72
+ // [BABEL] Note: The code generator has deoptimised the styling of repo/node_modules/prettier/index.js as it exceeds the max of 500KB.
73
+ '--no-babel',
74
+ '--fail-on-error',
75
+ '-t',
76
+ `${TRANSFORM_DIR}/${codemod}.js`,
77
+ ...parserArgs,
78
+ ...files,
79
+ ],
63
80
  {
64
81
  stdio: 'inherit',
65
82
  shell: true,
66
83
  }
67
84
  );
85
+ if (result.status === 1) {
86
+ logger.log('Skipped renaming because of errors.');
87
+ return;
88
+ }
89
+ }
90
+
91
+ if (!renameParts && codemod === 'mdx-to-csf') {
92
+ renameParts = ['.stories.mdx', '.mdx'];
93
+ rename = '.stories.mdx:.mdx;';
68
94
  }
69
95
 
70
96
  if (renameParts) {
package/src/lib/utils.ts CHANGED
@@ -1,5 +1,5 @@
1
- import camelCase from 'lodash/camelCase';
2
- import upperFirst from 'lodash/upperFirst';
1
+ import camelCase from 'lodash/camelCase.js';
2
+ import upperFirst from 'lodash/upperFirst.js';
3
3
 
4
4
  export const sanitizeName = (name: string) => {
5
5
  let key = upperFirst(camelCase(name));
@@ -5,5 +5,5 @@ import Button from './Button';
5
5
  // This isn't a valid story, but it tests the `import { comp } from ...` case
6
6
  storiesOf('Some.Button', module)
7
7
  .addDecorator(withKnobs)
8
- .addDecorator(storyFn => <div className="foo">{storyFn}</div>)
8
+ .addDecorator((storyFn) => <div className="foo">{storyFn}</div>)
9
9
  .add('with decorator', () => <Button label="The Button" />);
@@ -8,5 +8,5 @@ export function someHelper() {
8
8
  }
9
9
 
10
10
  storiesOf('ComponentItem', module)
11
- .addDecorator(storyFn => <div style={{ margin: '1rem' }}>{storyFn()}</div>)
11
+ .addDecorator((storyFn) => <div style={{ margin: '1rem' }}>{storyFn()}</div>)
12
12
  .add('loading', () => <ComponentItem loading />);
@@ -4,7 +4,7 @@ import Button from './Button';
4
4
  storiesOf('Some.Button', module)
5
5
  .add('with story params and decorators', () => <Button label="The Button" />, {
6
6
  bar: 1,
7
- decorators: [withKnobs, storyFn => <div className="foo">{storyFn}</div>],
7
+ decorators: [withKnobs, (storyFn) => <div className="foo">{storyFn}</div>],
8
8
  })
9
9
  .add('with story decorators', () => <Button label="The Button" />, {
10
10
  decorators: [withKnobs],
@@ -1,25 +1,21 @@
1
1
  /* eslint-disable */
2
- import React from 'react'
3
- import Button from './Button'
2
+ import React from 'react';
3
+ import Button from './Button';
4
4
 
5
- import { storiesOf } from '@storybook/react'
6
- import { action } from '@storybook/addon-actions'
5
+ import { storiesOf } from '@storybook/react';
6
+ import { action } from '@storybook/addon-actions';
7
7
 
8
- storiesOf(
9
- 'Button'
10
- ).addWithInfo(
8
+ storiesOf('Button').addWithInfo(
11
9
  'simple usage',
12
10
  'This is the basic usage with the button with providing a label to show the text.',
13
11
  () => (
14
12
  <div>
15
13
  <Button label="The Button" onClick={action('onClick')} />
16
14
  <br />
17
- <p>
18
- Click the "?" mark at top-right to view the info.
19
- </p>
15
+ <p>Click the "?" mark at top-right to view the info.</p>
20
16
  </div>
21
17
  )
22
- )
18
+ );
23
19
 
24
20
  storiesOf('Button').addWithInfo(
25
21
  'simple usage (inline info)',
@@ -28,7 +24,7 @@ storiesOf('Button').addWithInfo(
28
24
  `,
29
25
  () => <Button label="The Button" onClick={action('onClick')} />,
30
26
  { inline: true }
31
- )
27
+ );
32
28
 
33
29
  storiesOf('Button').addWithInfo(
34
30
  'simple usage (disable source)',
@@ -37,7 +33,7 @@ storiesOf('Button').addWithInfo(
37
33
  `,
38
34
  () => <Button label="The Button" onClick={action('onClick')} />,
39
35
  { source: false, inline: true }
40
- )
36
+ );
41
37
 
42
38
  storiesOf('Button').addWithInfo(
43
39
  'simple usage (no header)',
@@ -46,7 +42,7 @@ storiesOf('Button').addWithInfo(
46
42
  `,
47
43
  () => <Button label="The Button" onClick={action('onClick')} />,
48
44
  { header: false, inline: true }
49
- )
45
+ );
50
46
 
51
47
  storiesOf('Button').addWithInfo(
52
48
  'simple usage (no prop tables)',
@@ -55,7 +51,7 @@ storiesOf('Button').addWithInfo(
55
51
  `,
56
52
  () => <Button label="The Button" onClick={action('onClick')} />,
57
53
  { propTables: false, inline: true }
58
- )
54
+ );
59
55
 
60
56
  storiesOf('Button').addWithInfo(
61
57
  'simple usage (custom propTables)',
@@ -80,22 +76,19 @@ storiesOf('Button').addWithInfo(
80
76
  </div>
81
77
  ),
82
78
  { inline: true, propTables: [Button] }
83
- )
79
+ );
84
80
 
85
81
  storiesOf('Button').addWithInfo(
86
82
  'simple usage (JSX description)',
87
83
  <div>
88
84
  <h2>This is a JSX info section</h2>
89
85
  <p>
90
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
91
- Sed ornare massa rutrum metus commodo, a mattis velit dignissim.
92
- Fusce vestibulum turpis sed massa egestas pharetra. Sed at libero
93
- nulla.
86
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare massa rutrum metus
87
+ commodo, a mattis velit dignissim. Fusce vestibulum turpis sed massa egestas pharetra. Sed at
88
+ libero nulla.
94
89
  </p>
95
90
  <p>
96
- <a href="https://github.com/storybookjs/react-storybook-addon-info">
97
- This is a link
98
- </a>
91
+ <a href="https://github.com/storybookjs/react-storybook-addon-info">This is a link</a>
99
92
  </p>
100
93
  <p>
101
94
  <img src="https://storybook.js.org/images/placeholders/350x150.png" />
@@ -105,27 +98,22 @@ storiesOf('Button').addWithInfo(
105
98
  <div>
106
99
  <Button label="The Button" onClick={action('onClick')} />
107
100
  <br />
108
- <p>
109
- Click the "?" mark at top-right to view the info.
110
- </p>
101
+ <p>Click the "?" mark at top-right to view the info.</p>
111
102
  </div>
112
103
  )
113
- )
104
+ );
114
105
 
115
106
  storiesOf('Button').addWithInfo(
116
107
  'simple usage (inline JSX description)',
117
108
  <div>
118
109
  <h2>This is a JSX info section</h2>
119
110
  <p>
120
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
121
- Sed ornare massa rutrum metus commodo, a mattis velit dignissim.
122
- Fusce vestibulum turpis sed massa egestas pharetra. Sed at libero
123
- nulla.
111
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare massa rutrum metus
112
+ commodo, a mattis velit dignissim. Fusce vestibulum turpis sed massa egestas pharetra. Sed at
113
+ libero nulla.
124
114
  </p>
125
115
  <p>
126
- <a href="https://github.com/storybookjs/react-storybook-addon-info">
127
- This is a link
128
- </a>
116
+ <a href="https://github.com/storybookjs/react-storybook-addon-info">This is a link</a>
129
117
  </p>
130
118
  <p>
131
119
  <img src="https://storybook.js.org/images/placeholders/350x150.png" />
@@ -133,7 +121,7 @@ storiesOf('Button').addWithInfo(
133
121
  </div>,
134
122
  () => <Button label="The Button" onClick={action('onClick')} />,
135
123
  { inline: true }
136
- )
124
+ );
137
125
 
138
126
  storiesOf('Button').addWithInfo(
139
127
  'simple usage (maxPropsInLine === 1)',
@@ -142,7 +130,7 @@ storiesOf('Button').addWithInfo(
142
130
  `,
143
131
  () => <Button label="The Button" onClick={action('onClick')} />,
144
132
  { inline: true, maxPropsIntoLine: 1 }
145
- )
133
+ );
146
134
 
147
135
  storiesOf('Button').addWithInfo(
148
136
  'simple usage (maxPropObjectKeys === 5)',
@@ -151,7 +139,7 @@ storiesOf('Button').addWithInfo(
151
139
  `,
152
140
  () => <Button label="The Button" object={{ a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 }} />,
153
141
  { inline: true, maxPropObjectKeys: 5 }
154
- )
142
+ );
155
143
 
156
144
  storiesOf('Button').addWithInfo(
157
145
  'simple usage (maxPropArrayLength === 8)',
@@ -160,7 +148,7 @@ storiesOf('Button').addWithInfo(
160
148
  `,
161
149
  () => <Button label="The Button" array={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]} />,
162
150
  { inline: true, maxPropArrayLength: 8 }
163
- )
151
+ );
164
152
 
165
153
  storiesOf('Button').addWithInfo(
166
154
  'simple usage (maxPropStringLength === 10)',
@@ -169,7 +157,7 @@ storiesOf('Button').addWithInfo(
169
157
  `,
170
158
  () => <Button label="The Button" string="1 2 3 4 5 6 7 8" />,
171
159
  { inline: true, maxPropStringLength: 5 }
172
- )
160
+ );
173
161
 
174
162
  storiesOf('Button').addWithInfo(
175
163
  'with custom styles',
@@ -180,19 +168,17 @@ storiesOf('Button').addWithInfo(
180
168
  () => <Button label="The Button" onClick={action('onClick')} />,
181
169
  {
182
170
  inline: true,
183
- styles: stylesheet => {
171
+ styles: (stylesheet) => {
184
172
  stylesheet.infoPage = {
185
- backgroundColor: '#ccc'
186
- }
187
- return stylesheet
188
- }
173
+ backgroundColor: '#ccc',
174
+ };
175
+ return stylesheet;
176
+ },
189
177
  }
190
- )
178
+ );
191
179
 
192
180
  storiesOf('shared/ProgressBar', module)
193
181
  .addDecorator(withKnobs)
194
182
  .addWithInfo('default style', () => (
195
- <ProgressBar progress={number('progress', 25)}
196
- delay={number('delay', 500)}
197
- />
183
+ <ProgressBar progress={number('progress', 25)} delay={number('delay', 500)} />
198
184
  ));