@storybook/codemod 7.0.0-beta.5 → 7.0.0-beta.50

Sign up to get free protection for your applications and to get access to all the features.
Files changed (52) hide show
  1. package/README.md +0 -39
  2. package/dist/chunk-HBPKIMKE.mjs +1 -0
  3. package/dist/chunk-YH46OF24.mjs +2 -0
  4. package/dist/index.js +1 -1
  5. package/dist/index.mjs +1 -1
  6. package/dist/transforms/add-component-parameters.js +1 -1
  7. package/dist/transforms/csf-2-to-3.d.ts +5 -4
  8. package/dist/transforms/csf-2-to-3.js +3 -1
  9. package/dist/transforms/csf-2-to-3.mjs +2 -1
  10. package/dist/transforms/csf-hoist-story-annotations.js +1 -1
  11. package/dist/transforms/move-builtin-addons.js +1 -1
  12. package/dist/transforms/storiesof-to-csf.js +1 -1
  13. package/dist/transforms/storiesof-to-csf.mjs +1 -1
  14. package/dist/transforms/update-addon-info.js +1 -1
  15. package/dist/transforms/update-organisation-name.js +1 -1
  16. package/dist/transforms/upgrade-deprecated-types.d.ts +10 -0
  17. package/dist/transforms/upgrade-deprecated-types.js +2 -0
  18. package/dist/transforms/upgrade-deprecated-types.mjs +1 -0
  19. package/dist/transforms/upgrade-hierarchy-separators.js +1 -1
  20. package/jest.config.js +1 -0
  21. package/package.json +15 -10
  22. package/project.json +6 -0
  23. package/src/index.js +11 -1
  24. package/src/lib/utils.ts +2 -2
  25. package/src/transforms/__testfixtures__/storiesof-to-csf/decorators.input.js +1 -1
  26. package/src/transforms/__testfixtures__/storiesof-to-csf/export-function.input.js +1 -1
  27. package/src/transforms/__testfixtures__/storiesof-to-csf/story-decorators.input.js +1 -1
  28. package/src/transforms/__testfixtures__/update-addon-info/update-addon-info.input.js +34 -48
  29. package/src/transforms/__testfixtures__/update-addon-info/update-addon-info.output.snapshot +33 -47
  30. package/src/transforms/__tests__/csf-2-to-3.test.ts +175 -57
  31. package/src/transforms/__tests__/upgrade-deprecated-types.test.ts +170 -0
  32. package/src/transforms/csf-2-to-3.ts +161 -33
  33. package/src/transforms/upgrade-deprecated-types.ts +142 -0
  34. package/dist/chunk-CO6EPEMB.mjs +0 -1
  35. package/dist/transforms/csf-to-mdx.d.ts +0 -29
  36. package/dist/transforms/csf-to-mdx.js +0 -3
  37. package/dist/transforms/csf-to-mdx.mjs +0 -3
  38. package/src/transforms/__testfixtures__/csf-to-mdx/basic.input.js +0 -20
  39. package/src/transforms/__testfixtures__/csf-to-mdx/basic.output.snapshot +0 -18
  40. package/src/transforms/__testfixtures__/csf-to-mdx/component-id.input.js +0 -9
  41. package/src/transforms/__testfixtures__/csf-to-mdx/component-id.output.snapshot +0 -10
  42. package/src/transforms/__testfixtures__/csf-to-mdx/decorators.input.js +0 -13
  43. package/src/transforms/__testfixtures__/csf-to-mdx/decorators.output.snapshot +0 -12
  44. package/src/transforms/__testfixtures__/csf-to-mdx/exclude-stories.input.js +0 -23
  45. package/src/transforms/__testfixtures__/csf-to-mdx/exclude-stories.output.snapshot +0 -22
  46. package/src/transforms/__testfixtures__/csf-to-mdx/parameters.input.js +0 -16
  47. package/src/transforms/__testfixtures__/csf-to-mdx/parameters.output.snapshot +0 -17
  48. package/src/transforms/__testfixtures__/csf-to-mdx/story-function.input.js +0 -19
  49. package/src/transforms/__testfixtures__/csf-to-mdx/story-function.output.snapshot +0 -18
  50. package/src/transforms/__testfixtures__/csf-to-mdx/story-parameters.input.js +0 -24
  51. package/src/transforms/__testfixtures__/csf-to-mdx/story-parameters.output.snapshot +0 -22
  52. package/src/transforms/csf-to-mdx.js +0 -190
@@ -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
  ));
@@ -2,27 +2,23 @@
2
2
 
3
3
  exports[`update-addon-info transforms correctly using "update-addon-info.input.js" data 1`] = `
4
4
  "/* eslint-disable */
5
- import React from 'react'
6
- import Button from './Button'
5
+ import React from 'react';
6
+ import Button from './Button';
7
7
 
8
- import { storiesOf } from '@storybook/react'
9
- import { action } from '@storybook/addon-actions'
8
+ import { storiesOf } from '@storybook/react';
9
+ import { action } from '@storybook/addon-actions';
10
10
 
11
11
  import { withInfo } from \\"@storybook/addon-info\\";
12
12
 
13
- storiesOf(
14
- 'Button'
15
- ).add('simple usage', withInfo(
13
+ storiesOf('Button').add('simple usage', withInfo(
16
14
  'This is the basic usage with the button with providing a label to show the text.'
17
15
  )(() => (
18
16
  <div>
19
17
  <Button label=\\"The Button\\" onClick={action('onClick')} />
20
18
  <br />
21
- <p>
22
- Click the \\"?\\" mark at top-right to view the info.
23
- </p>
19
+ <p>Click the \\"?\\" mark at top-right to view the info.</p>
24
20
  </div>
25
- )))
21
+ )));
26
22
 
27
23
  storiesOf('Button').add('simple usage (inline info)', withInfo({
28
24
  text: \`
@@ -30,7 +26,7 @@ storiesOf('Button').add('simple usage (inline info)', withInfo({
30
26
  \`,
31
27
 
32
28
  inline: true
33
- })(() => <Button label=\\"The Button\\" onClick={action('onClick')} />))
29
+ })(() => <Button label=\\"The Button\\" onClick={action('onClick')} />));
34
30
 
35
31
  storiesOf('Button').add('simple usage (disable source)', withInfo({
36
32
  text: \`
@@ -39,7 +35,7 @@ storiesOf('Button').add('simple usage (disable source)', withInfo({
39
35
 
40
36
  source: false,
41
37
  inline: true
42
- })(() => <Button label=\\"The Button\\" onClick={action('onClick')} />))
38
+ })(() => <Button label=\\"The Button\\" onClick={action('onClick')} />));
43
39
 
44
40
  storiesOf('Button').add('simple usage (no header)', withInfo({
45
41
  text: \`
@@ -48,7 +44,7 @@ storiesOf('Button').add('simple usage (no header)', withInfo({
48
44
 
49
45
  header: false,
50
46
  inline: true
51
- })(() => <Button label=\\"The Button\\" onClick={action('onClick')} />))
47
+ })(() => <Button label=\\"The Button\\" onClick={action('onClick')} />));
52
48
 
53
49
  storiesOf('Button').add('simple usage (no prop tables)', withInfo({
54
50
  text: \`
@@ -57,7 +53,7 @@ storiesOf('Button').add('simple usage (no prop tables)', withInfo({
57
53
 
58
54
  propTables: false,
59
55
  inline: true
60
- })(() => <Button label=\\"The Button\\" onClick={action('onClick')} />))
56
+ })(() => <Button label=\\"The Button\\" onClick={action('onClick')} />));
61
57
 
62
58
  storiesOf('Button').add('simple usage (custom propTables)', withInfo({
63
59
  text: \`
@@ -82,20 +78,17 @@ storiesOf('Button').add('simple usage (custom propTables)', withInfo({
82
78
  <Button label=\\"The Button\\" onClick={action('onClick')} />
83
79
  <br />
84
80
  </div>
85
- )))
81
+ )));
86
82
 
87
83
  storiesOf('Button').add('simple usage (JSX description)', withInfo(<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\\" />
@@ -104,25 +97,20 @@ storiesOf('Button').add('simple usage (JSX description)', withInfo(<div>
104
97
  <div>
105
98
  <Button label=\\"The Button\\" onClick={action('onClick')} />
106
99
  <br />
107
- <p>
108
- Click the \\"?\\" mark at top-right to view the info.
109
- </p>
100
+ <p>Click the \\"?\\" mark at top-right to view the info.</p>
110
101
  </div>
111
- )))
102
+ )));
112
103
 
113
104
  storiesOf('Button').add('simple usage (inline JSX description)', withInfo({
114
105
  text: <div>
115
106
  <h2>This is a JSX info section</h2>
116
107
  <p>
117
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
118
- Sed ornare massa rutrum metus commodo, a mattis velit dignissim.
119
- Fusce vestibulum turpis sed massa egestas pharetra. Sed at libero
120
- nulla.
108
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare massa rutrum metus
109
+ commodo, a mattis velit dignissim. Fusce vestibulum turpis sed massa egestas pharetra. Sed at
110
+ libero nulla.
121
111
  </p>
122
112
  <p>
123
- <a href=\\"https://github.com/storybookjs/react-storybook-addon-info\\">
124
- This is a link
125
- </a>
113
+ <a href=\\"https://github.com/storybookjs/react-storybook-addon-info\\">This is a link</a>
126
114
  </p>
127
115
  <p>
128
116
  <img src=\\"https://storybook.js.org/images/placeholders/350x150.png\\" />
@@ -130,7 +118,7 @@ storiesOf('Button').add('simple usage (inline JSX description)', withInfo({
130
118
  </div>,
131
119
 
132
120
  inline: true
133
- })(() => <Button label=\\"The Button\\" onClick={action('onClick')} />))
121
+ })(() => <Button label=\\"The Button\\" onClick={action('onClick')} />));
134
122
 
135
123
  storiesOf('Button').add('simple usage (maxPropsInLine === 1)', withInfo({
136
124
  text: \`
@@ -139,7 +127,7 @@ storiesOf('Button').add('simple usage (maxPropsInLine === 1)', withInfo({
139
127
 
140
128
  inline: true,
141
129
  maxPropsIntoLine: 1
142
- })(() => <Button label=\\"The Button\\" onClick={action('onClick')} />))
130
+ })(() => <Button label=\\"The Button\\" onClick={action('onClick')} />));
143
131
 
144
132
  storiesOf('Button').add('simple usage (maxPropObjectKeys === 5)', withInfo({
145
133
  text: \`
@@ -150,7 +138,7 @@ storiesOf('Button').add('simple usage (maxPropObjectKeys === 5)', withInfo({
150
138
  maxPropObjectKeys: 5
151
139
  })(
152
140
  () => <Button label=\\"The Button\\" object={{ a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 }} />
153
- ))
141
+ ));
154
142
 
155
143
  storiesOf('Button').add('simple usage (maxPropArrayLength === 8)', withInfo({
156
144
  text: \`
@@ -161,7 +149,7 @@ storiesOf('Button').add('simple usage (maxPropArrayLength === 8)', withInfo({
161
149
  maxPropArrayLength: 8
162
150
  })(
163
151
  () => <Button label=\\"The Button\\" array={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]} />
164
- ))
152
+ ));
165
153
 
166
154
  storiesOf('Button').add('simple usage (maxPropStringLength === 10)', withInfo({
167
155
  text: \`
@@ -170,7 +158,7 @@ storiesOf('Button').add('simple usage (maxPropStringLength === 10)', withInfo({
170
158
 
171
159
  inline: true,
172
160
  maxPropStringLength: 5
173
- })(() => <Button label=\\"The Button\\" string=\\"1 2 3 4 5 6 7 8\\" />))
161
+ })(() => <Button label=\\"The Button\\" string=\\"1 2 3 4 5 6 7 8\\" />));
174
162
 
175
163
  storiesOf('Button').add('with custom styles', withInfo({
176
164
  text: \`
@@ -180,19 +168,17 @@ storiesOf('Button').add('with custom styles', withInfo({
180
168
 
181
169
  inline: true,
182
170
 
183
- styles: stylesheet => {
171
+ styles: (stylesheet) => {
184
172
  stylesheet.infoPage = {
185
- backgroundColor: '#ccc'
186
- }
187
- return stylesheet
173
+ backgroundColor: '#ccc',
174
+ };
175
+ return stylesheet;
188
176
  }
189
- })(() => <Button label=\\"The Button\\" onClick={action('onClick')} />))
177
+ })(() => <Button label=\\"The Button\\" onClick={action('onClick')} />));
190
178
 
191
179
  storiesOf('shared/ProgressBar', module)
192
180
  .addDecorator(withKnobs)
193
181
  .add('default style', withInfo('default style')(() => (
194
- <ProgressBar progress={number('progress', 25)}
195
- delay={number('delay', 500)}
196
- />
182
+ <ProgressBar progress={number('progress', 25)} delay={number('delay', 500)} />
197
183
  )));"
198
184
  `;