GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-01 05:05:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

Automate codemod tests creation and update (#8506)

Browse Source 
Automate codemod tests creation and update
This commit is contained in:
Michael Shilman 2019-10-22 08:47:35 +08:00 committed by GitHub
commit 4984bf92ea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
57 changed files with 555 additions and 426 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
lib/codemod/package.json
View File

@ -27,13 +27,14 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@hypnosphi/jscodeshift": "^0.6.4",
"@mdx-js/mdx": "^1.0.0",
"@storybook/node-logger": "5.3.0-alpha.23",
"@storybook/router": "5.3.0-alpha.23",
"core-js": "^3.0.1",
"cross-spawn": "^7.0.0",
"globby": "^10.0.1",
"jscodeshift": "^0.6.3",
"jest-specific-snapshot": "^2.0.0",
"lodash": "^4.17.15",
"prettier": "^1.16.4",
"recast": "^0.16.1",

28
lib/codemod/src/transforms/__testfixtures__/add-component-parameters/add-component-parameters.output.js → lib/codemod/src/transforms/__testfixtures__/add-component-parameters/add-component-parameters.output.snapshot
View File

@ -1,4 +1,7 @@
/* eslint-disable */
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`add-component-parameters transforms correctly using "add-component-parameters.input.js" data 1`] = `
"/* eslint-disable */
import React from 'react';
import Button from './Button';
@ -7,15 +10,15 @@ import { action } from '@storybook/addon-actions';
storiesOf('Button', module).addParameters({
component: Button
}).add('basic', () => <Button label="The Button" />);
}).add('basic', () => <Button label=\\"The Button\\" />);
storiesOf('Button').addParameters({
component: Button
}).add('no module', () => <Button label="The Button" />);
}).add('no module', () => <Button label=\\"The Button\\" />);
storiesOf('Button', module).addParameters({
component: Button
}).add('with story parameters', () => <Button label="The Button" />, {
}).add('with story parameters', () => <Button label=\\"The Button\\" />, {
header: false,
inline: true,
});
@ -24,41 +27,42 @@ storiesOf('Button', module).addParameters({
component: Button
})
.addParameters({ foo: 1 })
.add('with kind parameters', () => <Button label="The Button" />);
.add('with kind parameters', () => <Button label=\\"The Button\\" />);
storiesOf('Button', module).addParameters({
component: Button
})
.addParameters({ component: Button })
.add('with existing component parameters', () => <Button label="The Button" />);
.add('with existing component parameters', () => <Button label=\\"The Button\\" />);
storiesOf('Button', module).addParameters({
component: Button
}).add('complex story', () => (
<div>
<Button label="The Button" onClick={action('onClick')} />
<Button label=\\"The Button\\" onClick={action('onClick')} />
<br />
</div>
));
storiesOf('Root|Some/Button', module).addParameters({
component: Button
}).add('with path', () => <Button label="The Button" />);
}).add('with path', () => <Button label=\\"The Button\\" />);
storiesOf('Some.Button', module).addParameters({
component: Button
}).add('with dot-path', () => <Button label="The Button" />);
}).add('with dot-path', () => <Button label=\\"The Button\\" />);
storiesOf('Some.Button', module).addParameters({
component: Button
})
.addDecorator(withKnobs)
.add('with decorator', () => <Button label="The Button" />);
.add('with decorator', () => <Button label=\\"The Button\\" />);
// This isn't a valid story, but it tests the `import { comp } from ...` case
// This isn't a valid story, but it tests the \`import { comp } from ...\` case
storiesOf('action', module).addParameters({
component: action
}).add('non-default component export', () => <action />);
// This shouldn't get modified since the story name doesn't match
storiesOf('something', module).add('non-matching story', () => <Button label="The Button" />);
storiesOf('something', module).add('non-matching story', () => <Button label=\\"The Button\\" />);"
`;

8
lib/codemod/src/transforms/__testfixtures__/csf-to-mdx/basic.output.js → lib/codemod/src/transforms/__testfixtures__/csf-to-mdx/basic.output.snapshot
View File

@ -1,4 +1,7 @@
import Button from './Button';
// 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/blocks';
@ -11,4 +14,5 @@ import { Meta, Story } from '@storybook/addon-docs/blocks';
<Story name='complex story'><div>
<Button label='The Button' onClick={action('onClick')} />
<br />
</div></Story>
</div></Story>"
`;

8
lib/codemod/src/transforms/__testfixtures__/csf-to-mdx/decorators.output.js → lib/codemod/src/transforms/__testfixtures__/csf-to-mdx/decorators.output.snapshot
View File

@ -1,8 +1,12 @@
import Button from './Button';
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`csf-to-mdx transforms correctly using "decorators.input.js" data 1`] = `
"import Button from './Button';
import { Meta, Story } from '@storybook/addon-docs/blocks';
<Meta
title='Some.Button'
decorators={[withKnobs, storyFn => <div className='foo'>{storyFn}</div>]} />
<Story name='with decorator' decorators={[withKnobs]}><Button label='The Button' /></Story>
<Story name='with decorator' decorators={[withKnobs]}><Button label='The Button' /></Story>"
`;

8
lib/codemod/src/transforms/__testfixtures__/csf-to-mdx/exclude-stories.output.js → lib/codemod/src/transforms/__testfixtures__/csf-to-mdx/exclude-stories.output.snapshot
View File

@ -1,4 +1,7 @@
import Button from './Button';
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`csf-to-mdx transforms correctly using "exclude-stories.input.js" data 1`] = `
"import Button from './Button';
import { action } from '@storybook/addon-actions';
import { Meta, Story } from '@storybook/addon-docs/blocks';
@ -15,4 +18,5 @@ export const rowData = {
<Story name='complex story'><div>
<Button label='The Button' onClick={action('onClick')} />
<br />
</div></Story>
</div></Story>"
`;

8
lib/codemod/src/transforms/__testfixtures__/csf-to-mdx/parameters.output.js → lib/codemod/src/transforms/__testfixtures__/csf-to-mdx/parameters.output.snapshot
View File

@ -1,4 +1,7 @@
import Button from './Button';
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`csf-to-mdx transforms correctly using "parameters.input.js" data 1`] = `
"import Button from './Button';
import { storiesOf } from '@storybook/react';
import { Meta, Story } from '@storybook/addon-docs/blocks';
@ -10,4 +13,5 @@ import { Meta, Story } from '@storybook/addon-docs/blocks';
bar: 2,
}} />
<Story name='with kind parameters'><Button label='The Button' /></Story>
<Story name='with kind parameters'><Button label='The Button' /></Story>"
`;

8
lib/codemod/src/transforms/__testfixtures__/csf-to-mdx/story-function.output.js → lib/codemod/src/transforms/__testfixtures__/csf-to-mdx/story-function.output.snapshot
View File

@ -1,4 +1,7 @@
import { document } from 'global';
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`csf-to-mdx transforms correctly using "story-function.input.js" data 1`] = `
"import { document } from 'global';
import { Meta, Story } from '@storybook/addon-docs/blocks';
<Meta title='Function' />
@ -8,4 +11,5 @@ import { Meta, Story } from '@storybook/addon-docs/blocks';
btn.innerHTML = 'Hello Button';
btn.addEventListener('click', action('Click'));
return btn;
}}</Story>
}}</Story>"
`;

8
lib/codemod/src/transforms/__testfixtures__/csf-to-mdx/story-parameters.output.js → lib/codemod/src/transforms/__testfixtures__/csf-to-mdx/story-parameters.output.snapshot
View File

@ -1,4 +1,7 @@
import Button from './Button';
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`csf-to-mdx transforms correctly using "story-parameters.input.js" data 1`] = `
"import Button from './Button';
import { storiesOf } from '@storybook/react';
import { Meta, Story } from '@storybook/addon-docs/blocks';
@ -15,4 +18,5 @@ import { Meta, Story } from '@storybook/addon-docs/blocks';
name='foo'
parameters={{
bar: 1,
}}><Button label='Foo' /></Story>
}}><Button label='Foo' /></Story>"
`;

31
lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/basic.output.js
View File

@ -1,31 +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 secondStory = () => <Button label="Story 2" onClick={action('click')} />;
secondStory.story = {
name: 'second story',
};
export const complexStory = () => (
<div>
<Button label="The Button" onClick={action('onClick')} />
<br />
</div>
);
complexStory.story = {
name: 'complex story',
};
export const wPunctuation = () => <Button label="w/punctuation" />;
wPunctuation.story = {
name: 'w/punctuation',
};

35
lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/basic.output.snapshot Normal file
View File

@ -0,0 +1,35 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`mdx-to-csf transforms correctly using "basic.input.js" data 1`] = `
"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 secondStory = () => <Button label=\\"Story 2\\" onClick={action('click')} />;
secondStory.story = {
name: 'second story',
};
export const complexStory = () => (
<div>
<Button label=\\"The Button\\" onClick={action('onClick')} />
<br />
</div>
);
complexStory.story = {
name: 'complex story',
};
export const wPunctuation = () => <Button label=\\"w/punctuation\\" />;
wPunctuation.story = {
name: 'w/punctuation',
};"
`;

14
lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/decorators.output.js
View File

@ -1,14 +0,0 @@
import React from 'react';
import Button from './Button';
export default {
title: 'Some.Button',
decorators: [withKnobs, storyFn => <div className="foo">{storyFn}</div>],
};
export const withDecorator = () => <Button label="The Button" />;
withDecorator.story = {
name: 'with decorator',
decorators: [withKnobs],
};

18
lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/decorators.output.snapshot Normal file
View File

@ -0,0 +1,18 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`mdx-to-csf transforms correctly using "decorators.input.js" data 1`] = `
"import React from 'react';
import Button from './Button';
export default {
title: 'Some.Button',
decorators: [withKnobs, storyFn => <div className=\\"foo\\">{storyFn}</div>],
};
export const withDecorator = () => <Button label=\\"The Button\\" />;
withDecorator.story = {
name: 'with decorator',
decorators: [withKnobs],
};"
`;

14
lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/exclude-stories.output.js → lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/exclude-stories.output.snapshot
View File

@ -1,4 +1,7 @@
import React from 'react';
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`mdx-to-csf transforms correctly using "exclude-stories.input.js" data 1`] = `
"import React from 'react';
import Button from './Button';
import { action } from '@storybook/addon-actions';
export const rowData = {
@ -11,8 +14,8 @@ export default {
includeStories: ['story1', 'secondStory', 'complexStory'],
};
export const story1 = () => <Button label="Story 1" />;
export const secondStory = () => <Button label="Story 2" onClick={action('click')} />;
export const story1 = () => <Button label=\\"Story 1\\" />;
export const secondStory = () => <Button label=\\"Story 2\\" onClick={action('click')} />;
secondStory.story = {
name: 'second story',
@ -20,11 +23,12 @@ secondStory.story = {
export const complexStory = () => (
<div>
<Button label="The Button" onClick={action('onClick')} />
<Button label=\\"The Button\\" onClick={action('onClick')} />
<br />
</div>
);
complexStory.story = {
name: 'complex story',
};
};"
`;

10
lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/parameters.output.js → lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/parameters.output.snapshot
View File

@ -1,4 +1,7 @@
import React from 'react';
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`mdx-to-csf transforms correctly using "parameters.input.js" data 1`] = `
"import React from 'react';
import Button from './Button';
import { storiesOf } from '@storybook/react';
@ -12,8 +15,9 @@ export default {
},
};
export const withKindParameters = () => <Button label="The Button" />;
export const withKindParameters = () => <Button label=\\"The Button\\" />;
withKindParameters.story = {
name: 'with kind parameters',
};
};"
`;

3
lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/plaintext.output.js
View File

@ -1,3 +0,0 @@
import React from 'react';
export default {};
export const plaintext = () => 'Plain text';

7
lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/plaintext.output.snapshot Normal file
View File

@ -0,0 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`mdx-to-csf transforms correctly using "plaintext.input.js" data 1`] = `
"import React from 'react';
export default {};
export const plaintext = () => 'Plain text';"
`;

8
lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/story-function.output.js → lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/story-function.output.snapshot
View File

@ -1,4 +1,7 @@
import React from 'react';
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`mdx-to-csf transforms correctly using "story-function.input.js" data 1`] = `
"import React from 'react';
export default {};
export const functionStory = () => {
@ -11,4 +14,5 @@ export const functionStory = () => {
functionStory.story = {
name: 'function',
height: '100px',
};
};"
`;

26
lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/story-parameters.output.js
View File

@ -1,26 +0,0 @@
import React from 'react';
import Button from './Button';
import { storiesOf } from '@storybook/react';
export default {
title: 'Button',
};
export const withStoryParameters = () => <Button label="The Button" />;
withStoryParameters.story = {
name: 'with story parameters',
parameters: {
header: false,
inline: true,
},
};
export const foo = () => <Button label="Foo" />;
foo.story = {
parameters: {
bar: 1,
},
};

30
lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/story-parameters.output.snapshot Normal file
View File

@ -0,0 +1,30 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`mdx-to-csf transforms correctly using "story-parameters.input.js" data 1`] = `
"import React from 'react';
import Button from './Button';
import { storiesOf } from '@storybook/react';
export default {
title: 'Button',
};
export const withStoryParameters = () => <Button label=\\"The Button\\" />;
withStoryParameters.story = {
name: 'with story parameters',
parameters: {
header: false,
inline: true,
},
};
export const foo = () => <Button label=\\"Foo\\" />;
foo.story = {
parameters: {
bar: 1,
},
};"
`;

8
lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/story-refs.output.js → lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/story-refs.output.snapshot
View File

@ -1,4 +1,7 @@
import React from 'react';
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`mdx-to-csf transforms correctly using "story-refs.input.js" data 1`] = `
"import React from 'react';
import { action } from '@storybook/addon-actions';
import { Button } from '@storybook/react/demo';
@ -27,4 +30,5 @@ export const soloStory = () => <Button onClick={action('clicked')}>solo</Button>
soloStory.story = {
name: 'solo story',
};
};"
`;

4
lib/codemod/src/transforms/__testfixtures__/move-buildin-addons/default.output.js
View File

@ -1,4 +0,0 @@
/* eslint-disable */
import { storyOf } from '@storybook/react';
import { linkTo } from '@storybook/addon-links';
import { action } from '@storybook/addon-actions';

8
lib/codemod/src/transforms/__testfixtures__/move-buildin-addons/default.output.snapshot Normal file
View File

@ -0,0 +1,8 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`move-buildin-addons transforms correctly using "default.input.js" data 1`] = `
"/* eslint-disable */
import { storyOf } from '@storybook/react';
import { linkTo } from '@storybook/addon-links';
import { action } from '@storybook/addon-actions';"
`;

3
lib/codemod/src/transforms/__testfixtures__/move-buildin-addons/with-no-change.output.js
View File

@ -1,3 +0,0 @@
/* eslint-disable */
import { action } from '@kadira/storybook-addons';
import { storyOf } from '@storybook/react';

7
lib/codemod/src/transforms/__testfixtures__/move-buildin-addons/with-no-change.output.snapshot Normal file
View File

@ -0,0 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`move-buildin-addons transforms correctly using "with-no-change.input.js" data 1`] = `
"/* eslint-disable */
import { action } from '@kadira/storybook-addons';
import { storyOf } from '@storybook/react';"
`;

41
lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/basic.output.js
View File

@ -1,41 +0,0 @@
/* eslint-disable */
import React from 'react';
import Button from './Button';
import { configure } from '@storybook/react';
import { action } from '@storybook/addon-actions';
export default {
title: 'Button',
};
export const story1 = () => <Button label="Story 1" />;
story1.story = {
name: 'story1',
};
export const secondStory = () => <Button label="Story 2" onClick={action('click')} />;
secondStory.story = {
name: 'second story',
};
export const complexStory = () => (
<div>
<Button label="The Button" onClick={action('onClick')} />
<br />
</div>
);
complexStory.story = {
name: 'complex story',
};
export const wPunctuation = () => <Button label="Story 2" onClick={action('click')} />;
wPunctuation.story = {
name: 'w/punctuation',
};
export const startCase = () => <Button label="Story 2" onClick={action('click')} />;

45
lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/basic.output.snapshot Normal file
View File

@ -0,0 +1,45 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`storiesof-to-csf transforms correctly using "basic.input.js" data 1`] = `
"/* eslint-disable */
import React from 'react';
import Button from './Button';
import { configure } from '@storybook/react';
import { action } from '@storybook/addon-actions';
export default {
title: 'Button',
};
export const story1 = () => <Button label=\\"Story 1\\" />;
story1.story = {
name: 'story1',
};
export const secondStory = () => <Button label=\\"Story 2\\" onClick={action('click')} />;
secondStory.story = {
name: 'second story',
};
export const complexStory = () => (
<div>
<Button label=\\"The Button\\" onClick={action('onClick')} />
<br />
</div>
);
complexStory.story = {
name: 'complex story',
};
export const wPunctuation = () => <Button label=\\"Story 2\\" onClick={action('click')} />;
wPunctuation.story = {
name: 'w/punctuation',
};
export const startCase = () => <Button label=\\"Story 2\\" onClick={action('click')} />;"
`;

8
lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/collision.output.js → lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/collision.output.snapshot
View File

@ -1,4 +1,7 @@
export const foo = 1;
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`storiesof-to-csf transforms correctly using "collision.input.js" data 1`] = `
"export const foo = 1;
const bar = 1;
const barStory = 1;
const baz = 1;
@ -31,4 +34,5 @@ export const bazStory2 = () => <button />;
bazStory2.story = {
name: 'baz',
};
};"
`;

9
lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/const.output.js
View File

@ -1,9 +0,0 @@
export default {
title: 'bar',
};
export const constStory = () => <button />;
constStory.story = {
name: 'const',
};

13
lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/const.output.snapshot Normal file
View File

@ -0,0 +1,13 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`storiesof-to-csf transforms correctly using "const.input.js" data 1`] = `
"export default {
title: 'bar',
};
export const constStory = () => <button />;
constStory.story = {
name: 'const',
};"
`;

14
lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/decorators.output.js
View File

@ -1,14 +0,0 @@
/* eslint-disable */
import React from 'react';
import Button from './Button';
export default {
title: 'Some.Button',
decorators: [withKnobs, storyFn => <div className="foo">{storyFn}</div>],
};
export const withDecorator = () => <Button label="The Button" />;
withDecorator.story = {
name: 'with decorator',
};

18
lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/decorators.output.snapshot Normal file
View File

@ -0,0 +1,18 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`storiesof-to-csf transforms correctly using "decorators.input.js" data 1`] = `
"/* eslint-disable */
import React from 'react';
import Button from './Button';
export default {
title: 'Some.Button',
decorators: [withKnobs, storyFn => <div className=\\"foo\\">{storyFn}</div>],
};
export const withDecorator = () => <Button label=\\"The Button\\" />;
withDecorator.story = {
name: 'with decorator',
};"
`;

13
lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/default.output.js
View File

@ -1,13 +0,0 @@
/* eslint-disable */
import React from 'react';
import Button from './Button';
export default {
title: 'Button',
};
export const defaultStory = () => <Button label="Story 1" />;
defaultStory.story = {
name: 'default',
};

17
lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/default.output.snapshot Normal file
View File

@ -0,0 +1,17 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`storiesof-to-csf transforms correctly using "default.input.js" data 1`] = `
"/* eslint-disable */
import React from 'react';
import Button from './Button';
export default {
title: 'Button',
};
export const defaultStory = () => <Button label=\\"Story 1\\" />;
defaultStory.story = {
name: 'default',
};"
`;

5
lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/digit.output.js
View File

@ -1,5 +0,0 @@
export default {
title: 'bar',
};
export const _1 = () => <button />;

9
lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/digit.output.snapshot Normal file
View File

@ -0,0 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`storiesof-to-csf transforms correctly using "digit.input.js" data 1`] = `
"export default {
title: 'bar',
};
export const _1 = () => <button />;"
`;

12
lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/exports.output.js
View File

@ -1,12 +0,0 @@
export const foo = 1;
export default {
title: 'bar',
excludeStories: ['foo'],
};
export const baz = () => <button />;
baz.story = {
name: 'baz',
};

16
lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/exports.output.snapshot Normal file
View File

@ -0,0 +1,16 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`storiesof-to-csf transforms correctly using "exports.input.js" data 1`] = `
"export const foo = 1;
export default {
title: 'bar',
excludeStories: ['foo'],
};
export const baz = () => <button />;
baz.story = {
name: 'baz',
};"
`;

12
lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/module.output.js
View File

@ -1,12 +0,0 @@
/* eslint-disable */
import React from 'react';
import Button from './Button';
import { storiesOf } from '@storybook/react';
export default {
title: 'foo',
};
const bar = 1;
storiesOf('foo', module).add('bar', () => <Button />);

16
lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/module.output.snapshot Normal file
View File

@ -0,0 +1,16 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`storiesof-to-csf transforms correctly using "module.input.js" data 1`] = `
"/* eslint-disable */
import React from 'react';
import Button from './Button';
import { storiesOf } from '@storybook/react';
export default {
title: 'foo',
};
const bar = 1;
storiesOf('foo', module).add('bar', () => <Button />);"
`;

35
lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/multi.output.js
View File

@ -1,35 +0,0 @@
/* eslint-disable */
import React from 'react';
import Button from './Button';
export default {
title: 'Button1',
};
export const story1 = () => <Button label="Button1.1" />;
story1.story = {
name: 'story1',
};
export const story2 = () => <Button label="Button1.2" />;
story2.story = {
name: 'story2',
};
export default {
title: 'Button2',
};
export const story1Story = () => <Button label="Button2.1" />;
story1Story.story = {
name: 'story1',
};
export const story2Story = () => <Button label="Button2.2" />;
story2Story.story = {
name: 'story2',
};

39
lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/multi.output.snapshot Normal file
View File

@ -0,0 +1,39 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`storiesof-to-csf transforms correctly using "multi.input.js" data 1`] = `
"/* eslint-disable */
import React from 'react';
import Button from './Button';
export default {
title: 'Button1',
};
export const story1 = () => <Button label=\\"Button1.1\\" />;
story1.story = {
name: 'story1',
};
export const story2 = () => <Button label=\\"Button1.2\\" />;
story2.story = {
name: 'story2',
};
export default {
title: 'Button2',
};
export const story1Story = () => <Button label=\\"Button2.1\\" />;
story1Story.story = {
name: 'story1',
};
export const story2Story = () => <Button label=\\"Button2.2\\" />;
story2Story.story = {
name: 'story2',
};"
`;

19
lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/parameters.output.js
View File

@ -1,19 +0,0 @@
/* eslint-disable */
import React from 'react';
import Button from './Button';
export default {
title: 'Button',
parameters: {
component: Button,
foo: 1,
bar: 2,
},
};
export const withKindParameters = () => <Button label="The Button" />;
withKindParameters.story = {
name: 'with kind parameters',
};

23
lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/parameters.output.snapshot Normal file
View File

@ -0,0 +1,23 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`storiesof-to-csf transforms correctly using "parameters.input.js" data 1`] = `
"/* eslint-disable */
import React from 'react';
import Button from './Button';
export default {
title: 'Button',
parameters: {
component: Button,
foo: 1,
bar: 2,
},
};
export const withKindParameters = () => <Button label=\\"The Button\\" />;
withKindParameters.story = {
name: 'with kind parameters',
};"
`;

14
lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/story-decorators.output.js → lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/story-decorators.output.snapshot
View File

@ -1,11 +1,14 @@
import React from 'react';
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`storiesof-to-csf transforms correctly using "story-decorators.input.js" data 1`] = `
"import React from 'react';
import Button from './Button';
export default {
title: 'Some.Button',
};
export const withStoryParamsAndDecorators = () => <Button label="The Button" />;
export const withStoryParamsAndDecorators = () => <Button label=\\"The Button\\" />;
withStoryParamsAndDecorators.story = {
name: 'with story params and decorators',
@ -14,12 +17,13 @@ withStoryParamsAndDecorators.story = {
bar: 1,
},
decorators: [withKnobs, storyFn => <div className="foo">{storyFn}</div>],
decorators: [withKnobs, storyFn => <div className=\\"foo\\">{storyFn}</div>],
};
export const withStoryDecorators = () => <Button label="The Button" />;
export const withStoryDecorators = () => <Button label=\\"The Button\\" />;
withStoryDecorators.story = {
name: 'with story decorators',
decorators: [withKnobs],
};
};"
`;

28
lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/story-parameters.output.js
View File

@ -1,28 +0,0 @@
/* eslint-disable */
import React from 'react';
import Button from './Button';
export default {
title: 'Button',
};
export const withStoryParameters = () => <Button label="The Button" />;
withStoryParameters.story = {
name: 'with story parameters',
parameters: {
header: false,
inline: true,
},
};
export const foo = () => <Button label="Foo" />;
foo.story = {
name: 'foo',
parameters: {
bar: 1,
},
};

32
lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/story-parameters.output.snapshot Normal file
View File

@ -0,0 +1,32 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`storiesof-to-csf transforms correctly using "story-parameters.input.js" data 1`] = `
"/* eslint-disable */
import React from 'react';
import Button from './Button';
export default {
title: 'Button',
};
export const withStoryParameters = () => <Button label=\\"The Button\\" />;
withStoryParameters.story = {
name: 'with story parameters',
parameters: {
header: false,
inline: true,
},
};
export const foo = () => <Button label=\\"Foo\\" />;
foo.story = {
name: 'foo',
parameters: {
bar: 1,
},
};"
`;

92
lib/codemod/src/transforms/__testfixtures__/update-addon-info/update-addon-info.output.js → lib/codemod/src/transforms/__testfixtures__/update-addon-info/update-addon-info.output.snapshot
View File

@ -1,11 +1,14 @@
/* eslint-disable */
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`update-addon-info transforms correctly using "update-addon-info.input.js" data 1`] = `
"/* eslint-disable */
import React from 'react'
import Button from './Button'
import { storiesOf } from '@storybook/react'
import { action } from '@storybook/addon-actions'
import { withInfo } from "@storybook/addon-info";
import { withInfo } from \\"@storybook/addon-info\\";
storiesOf(
'Button'
@ -13,54 +16,54 @@ storiesOf(
'This is the basic usage with the button with providing a label to show the text.'
)(() => (
<div>
<Button label="The Button" onClick={action('onClick')} />
<Button label=\\"The Button\\" onClick={action('onClick')} />
<br />
<p>
Click the "?" mark at top-right to view the info.
Click the \\"?\\" mark at top-right to view the info.
</p>
</div>
)))
storiesOf('Button').add('simple usage (inline info)', withInfo({
text: `
text: \`
This is the basic usage with the button with providing a label to show the text.
`,
\`,
inline: true
})(() => <Button label="The Button" onClick={action('onClick')} />))
})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />))
storiesOf('Button').add('simple usage (disable source)', withInfo({
text: `
text: \`
This is the basic usage with the button with providing a label to show the text.
`,
\`,
source: false,
inline: true
})(() => <Button label="The Button" onClick={action('onClick')} />))
})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />))
storiesOf('Button').add('simple usage (no header)', withInfo({
text: `
text: \`
This is the basic usage with the button with providing a label to show the text.
`,
\`,
header: false,
inline: true
})(() => <Button label="The Button" onClick={action('onClick')} />))
})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />))
storiesOf('Button').add('simple usage (no prop tables)', withInfo({
text: `
text: \`
This is the basic usage with the button with providing a label to show the text.
`,
\`,
propTables: false,
inline: true
})(() => <Button label="The Button" onClick={action('onClick')} />))
})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />))
storiesOf('Button').add('simple usage (custom propTables)', withInfo({
text: `
text: \`
This is the basic usage with the button with providing a label to show the text.
Since, the story source code is wrapped inside a div, info addon can't figure out propTypes on it's own.
So, we need to give relevant React component classes manually using \`propTypes\` option as shown below:
So, we need to give relevant React component classes manually using \\\\\`propTypes\\\\\` option as shown below:
~~~js
storiesOf('Button')
.addWithInfo(
@ -70,13 +73,13 @@ storiesOf('Button').add('simple usage (custom propTables)', withInfo({
{ inline: true, propTables: [Button]}
);
~~~
`,
\`,
inline: true,
propTables: [Button]
})(() => (
<div>
<Button label="The Button" onClick={action('onClick')} />
<Button label=\\"The Button\\" onClick={action('onClick')} />
<br />
</div>
)))
@ -90,19 +93,19 @@ storiesOf('Button').add('simple usage (JSX description)', withInfo(<div>
nulla.
</p>
<p>
<a href="https://github.com/storybookjs/react-storybook-addon-info">
<a href=\\"https://github.com/storybookjs/react-storybook-addon-info\\">
This is a link
</a>
</p>
<p>
<img src="http://placehold.it/350x150" />
<img src=\\"http://placehold.it/350x150\\" />
</p>
</div>)(() => (
<div>
<Button label="The Button" onClick={action('onClick')} />
<Button label=\\"The Button\\" onClick={action('onClick')} />
<br />
<p>
Click the "?" mark at top-right to view the info.
Click the \\"?\\" mark at top-right to view the info.
</p>
</div>
)))
@ -117,63 +120,63 @@ storiesOf('Button').add('simple usage (inline JSX description)', withInfo({
nulla.
</p>
<p>
<a href="https://github.com/storybookjs/react-storybook-addon-info">
<a href=\\"https://github.com/storybookjs/react-storybook-addon-info\\">
This is a link
</a>
</p>
<p>
<img src="http://placehold.it/350x150" />
<img src=\\"http://placehold.it/350x150\\" />
</p>
</div>,
inline: true
})(() => <Button label="The Button" onClick={action('onClick')} />))
})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />))
storiesOf('Button').add('simple usage (maxPropsInLine === 1)', withInfo({
text: `
text: \`
This is the basic usage with the button with providing a label to show the text.
`,
\`,
inline: true,
maxPropsIntoLine: 1
})(() => <Button label="The Button" onClick={action('onClick')} />))
})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />))
storiesOf('Button').add('simple usage (maxPropObjectKeys === 5)', withInfo({
text: `
text: \`
This is the basic usage with the button with providing a label to show the text.
`,
\`,
inline: true,
maxPropObjectKeys: 5
})(
() => <Button label="The Button" object={{ a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 }} />
() => <Button label=\\"The Button\\" object={{ a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 }} />
))
storiesOf('Button').add('simple usage (maxPropArrayLength === 8)', withInfo({
text: `
text: \`
This is the basic usage with the button with providing a label to show the text.
`,
\`,
inline: true,
maxPropArrayLength: 8
})(
() => <Button label="The Button" array={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]} />
() => <Button label=\\"The Button\\" array={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]} />
))
storiesOf('Button').add('simple usage (maxPropStringLength === 10)', withInfo({
text: `
text: \`
This is the basic usage with the button with providing a label to show the text.
`,
\`,
inline: true,
maxPropStringLength: 5
})(() => <Button label="The Button" string="1 2 3 4 5 6 7 8" />))
})(() => <Button label=\\"The Button\\" string=\\"1 2 3 4 5 6 7 8\\" />))
storiesOf('Button').add('with custom styles', withInfo({
text: `
text: \`
This is an example of how to customize the styles of the info components.
For the full styles available, see \`./src/components/Story.js\`
`,
For the full styles available, see \\\\\`./src/components/Story.js\\\\\`
\`,
inline: true,
@ -183,7 +186,7 @@ storiesOf('Button').add('with custom styles', withInfo({
}
return stylesheet
}
})(() => <Button label="The Button" onClick={action('onClick')} />))
})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />))
storiesOf('shared/ProgressBar', module)
.addDecorator(withKnobs)
@ -191,4 +194,5 @@ storiesOf('shared/ProgressBar', module)
<ProgressBar progress={number('progress', 25)}
delay={number('delay', 500)}
/>
)));
)));"
`;

8
lib/codemod/src/transforms/__testfixtures__/update-organisation-name/update-organisation-name.output.js → lib/codemod/src/transforms/__testfixtures__/update-organisation-name/update-organisation-name.output.snapshot
View File

@ -1,4 +1,7 @@
/* eslint-disable */
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`update-organisation-name transforms correctly using "update-organisation-name.input.js" data 1`] = `
"/* eslint-disable */
import '@storybook/addons';
import '@storybook/addon-comments';
import '@storybook/addon-centered';
@ -16,4 +19,5 @@ import '@storybook/cli';
import '@storybook/react';
import '@storybook/react-native';
import '@storybook/ui';
import { storiesOf } from '@storybook/react';
import { storiesOf } from '@storybook/react';"
`;

8
lib/codemod/src/transforms/__tests__/add-component-parameters.test.js
View File

@ -1,8 +0,0 @@
import { defineTest } from 'jscodeshift/dist/testUtils';
defineTest(
__dirname,
'add-component-parameters',
null,
'add-component-parameters/add-component-parameters'
);

14
lib/codemod/src/transforms/__tests__/csf-to-mdx.test.js
View File

@ -1,14 +0,0 @@
import { defineTest } from 'jscodeshift/dist/testUtils';
const testNames = [
'basic',
'decorators',
'parameters',
'story-parameters',
'exclude-stories',
'story-function',
];
testNames.forEach(testName => {
defineTest(__dirname, `csf-to-mdx`, null, `csf-to-mdx/${testName}`);
});

16
lib/codemod/src/transforms/__tests__/mdx-to-csf.test.js
View File

@ -1,16 +0,0 @@
import { defineTest } from 'jscodeshift/dist/testUtils';
const testNames = [
'basic',
'decorators',
'parameters',
'story-parameters',
'exclude-stories',
'story-refs',
'plaintext',
'story-function',
];
testNames.forEach(testName => {
defineTest(__dirname, `mdx-to-csf`, null, `mdx-to-csf/${testName}`);
});

4
lib/codemod/src/transforms/__tests__/move-buildin-addons.js
View File

@ -1,4 +0,0 @@
import { defineTest } from 'jscodeshift/dist/testUtils';
defineTest(__dirname, 'move-buildin-addons', null, 'move-buildin-addons/default');
defineTest(__dirname, 'move-buildin-addons', null, 'move-buildin-addons/with-no-change');

14
lib/codemod/src/transforms/__tests__/storiesof-to-csf.test.js
View File

@ -1,14 +0,0 @@
import fs from 'fs';
import path from 'path';
import { defineTest } from 'jscodeshift/dist/testUtils';
jest.mock('@storybook/node-logger');
fs.readdirSync(path.resolve(__dirname, '../__testfixtures__/storiesof-to-csf'))
.map(filename => filename.match(/^(.*)\.input\.js$/))
.filter(Boolean)
.map(match => match[1])
.forEach(testName => {
defineTest(__dirname, `storiesof-to-csf`, null, `storiesof-to-csf/${testName}`);
});

32
lib/codemod/src/transforms/__tests__/transforms.tests.js Normal file
View File

@ -0,0 +1,32 @@
import path from 'path';
import fs from 'fs';
import 'jest-specific-snapshot';
// TODO move back to original 'jscodeshift' package as soon as https://github.com/facebook/jscodeshift/pull/297 is released
import { applyTransform } from '@hypnosphi/jscodeshift/dist/testUtils';
jest.mock('@storybook/node-logger');
const inputRegExp = /\.input\.js$/;
const fixturesDir = path.resolve(__dirname, '../__testfixtures__');
fs.readdirSync(fixturesDir).forEach(transformName => {
const transformFixturesDir = path.join(fixturesDir, transformName);
// eslint-disable-next-line jest/valid-describe
describe(transformName, () =>
fs
.readdirSync(transformFixturesDir)
.filter(fileName => inputRegExp.test(fileName))
.forEach(fileName => {
const inputPath = path.join(transformFixturesDir, fileName);
it(`transforms correctly using "${fileName}" data`, () =>
expect(
applyTransform(
// eslint-disable-next-line global-require,import/no-dynamic-require
require(path.join(__dirname, '..', transformName)),
null,
{ path: inputPath, source: fs.readFileSync(inputPath, 'utf8') }
)
).toMatchSpecificSnapshot(inputPath.replace(inputRegExp, '.output.snapshot')));
})
);
});

3
lib/codemod/src/transforms/__tests__/update-addon-info.test.js
View File

@ -1,3 +0,0 @@
import { defineTest } from 'jscodeshift/dist/testUtils';
defineTest(__dirname, 'update-addon-info', null, 'update-addon-info/update-addon-info');

8
lib/codemod/src/transforms/__tests__/update-organisation-name.test.js
View File

@ -1,8 +0,0 @@
import { defineTest } from 'jscodeshift/dist/testUtils';
defineTest(
__dirname,
'update-organisation-name',
null,
'update-organisation-name/update-organisation-name'
);

39
yarn.lock
View File

@ -2298,6 +2298,30 @@
dependencies:
"@hapi/hoek" "8.x.x"
"@hypnosphi/jscodeshift@^0.6.4":
version "0.6.4"
resolved "https://registry.yarnpkg.com/@hypnosphi/jscodeshift/-/jscodeshift-0.6.4.tgz#49a3be6ac515af831f8a3e630380e3511c8c0fb7"
integrity sha512-Ir4KMO+LW+4CoB21OZm0gzbUjwNsZ2zBvOBm4r4GP+d+qyxj5iIJXZF/sJUYUAEJJ3LnlnHL0FzgfBge+7PfLQ==
dependencies:
"@babel/core" "^7.1.6"
"@babel/parser" "^7.1.6"
"@babel/plugin-proposal-class-properties" "^7.1.0"
"@babel/plugin-proposal-object-rest-spread" "^7.0.0"
"@babel/preset-env" "^7.1.6"
"@babel/preset-flow" "^7.0.0"
"@babel/preset-typescript" "^7.1.0"
"@babel/register" "^7.0.0"
babel-core "^7.0.0-bridge.0"
colors "^1.1.2"
flow-parser "0.*"
graceful-fs "^4.1.11"
micromatch "^3.1.10"
neo-async "^2.5.0"
node-dir "^0.1.17"
recast "^0.18.1"
temp "^0.8.1"
write-file-atomic "^2.3.0"
"@iarna/toml@^2.2.0":
version "2.2.3"
resolved "https://registry.yarnpkg.com/@iarna/toml/-/toml-2.2.3.tgz#f060bf6eaafae4d56a7dac618980838b0696e2ab"
@ -5465,6 +5489,11 @@ ast-types@0.12.4, ast-types@^0.12.2:
resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.12.4.tgz#71ce6383800f24efc9a1a3308f3a6e420a0974d1"
integrity sha512-ky/YVYCbtVAS8TdMIaTiPFHwEpRB5z1hctepJplTr3UW5q8TDrpIMCILyk8pmLxGtn2KCtC/lSn7zOsaI7nzDw==
ast-types@0.13.2:
version "0.13.2"
resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.13.2.tgz#df39b677a911a83f3a049644fb74fdded23cea48"
integrity sha512-uWMHxJxtfj/1oZClOxDEV1sQ1HCDkA4MG8Gr69KKeBjEVH0R84WlejZ0y2DcwyBlpAEMltmVYkVgqfLFb2oyiA==
ast-types@0.9.6:
version "0.9.6"
resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.9.6.tgz#102c9e9e9005d3e7e3829bf0c4fa24ee862ee9b9"
@ -25637,6 +25666,16 @@ recast@^0.17.3:
private "^0.1.8"
source-map "~0.6.1"
recast@^0.18.1:
version "0.18.5"
resolved "https://registry.yarnpkg.com/recast/-/recast-0.18.5.tgz#9d5adbc07983a3c8145f3034812374a493e0fe4d"
integrity sha512-sD1WJrpLQAkXGyQZyGzTM75WJvyAd98II5CHdK3IYbt/cZlU0UzCRVU11nUFNXX9fBVEt4E9ajkMjBlUlG+Oog==
dependencies:
ast-types "0.13.2"
esprima "~4.0.0"
private "^0.1.8"
source-map "~0.6.1"
rechoir@^0.6.2:
version "0.6.2"
resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"