😀 😎 👍 💯
diff --git a/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/ext.js b/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/ext.js
new file mode 100644
index 00000000000..df0f646a519
--- /dev/null
+++ b/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/ext.js
@@ -0,0 +1,12 @@
+import PropTypes from 'prop-types';
+
+export const PRESET_SHAPE = {
+ text: PropTypes.string.isRequired,
+ startDate: PropTypes.object.isRequired,
+ endDate: PropTypes.object.isRequired,
+};
+
+export const SOME_PROP_TYPES = {
+ ext1: PropTypes.string,
+ ext2: PropTypes.number,
+};
diff --git a/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/prop-types.js b/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/prop-types.js
index bcd6246ad96..71cbc5841cb 100644
--- a/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/prop-types.js
+++ b/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/prop-types.js
@@ -1,6 +1,8 @@
+/* eslint-disable react/require-default-props */
/* eslint-disable react/no-unused-prop-types */
import React from 'react';
import PropTypes, { string, shape } from 'prop-types';
+import { PRESET_SHAPE, SOME_PROP_TYPES } from './ext';
const NAMED_OBJECT = {
text: PropTypes.string.isRequired,
@@ -159,6 +161,7 @@ PropTypesProps.propTypes = {
),
})
),
+ arrayExternalShape: PropTypes.arrayOf(PropTypes.shape(PRESET_SHAPE)),
/**
* A simple `objectOf` propType.
*/
@@ -257,6 +260,7 @@ PropTypesProps.propTypes = {
requiredString: PropTypes.string.isRequired,
nullDefaultValue: PropTypes.string,
undefinedDefaultValue: PropTypes.string,
+ ...SOME_PROP_TYPES,
};
PropTypesProps.defaultProps = {
diff --git a/examples/cra-ts-kitchen-sink/src/stories/props-sort.stories.mdx b/examples/cra-ts-kitchen-sink/src/stories/props-sort.stories.mdx
index 5c1cadf7ebf..9e234655586 100644
--- a/examples/cra-ts-kitchen-sink/src/stories/props-sort.stories.mdx
+++ b/examples/cra-ts-kitchen-sink/src/stories/props-sort.stories.mdx
@@ -3,4 +3,5 @@ import { Props } from '@storybook/addon-docs/blocks';
Testing the a11y addon `;
export const Disabled = () => hbs`Testing the a11y addon `;
-export const invalidContrast = () =>
+export const InvalidContrast = () =>
hbs`Testing the a11y addon `;
-invalidContrast.story = {
+InvalidContrast.story = {
name: 'Invalid contrast',
};
diff --git a/examples/ember-cli/stories/addon-actions.stories.js b/examples/ember-cli/stories/addon-actions.stories.js
index aab9fd86f06..60b66a0377d 100644
--- a/examples/ember-cli/stories/addon-actions.stories.js
+++ b/examples/ember-cli/stories/addon-actions.stories.js
@@ -11,7 +11,7 @@ export default {
},
};
-export const button = () => ({
+export const Button = () => ({
template: hbs`Click Me `,
context: {
onClick: action('clicked'),
diff --git a/examples/ember-cli/stories/addon-backgrounds.stories.js b/examples/ember-cli/stories/addon-backgrounds.stories.js
index 0f8ab7df34b..7f17ebeea6c 100644
--- a/examples/ember-cli/stories/addon-backgrounds.stories.js
+++ b/examples/ember-cli/stories/addon-backgrounds.stories.js
@@ -11,18 +11,18 @@ export default {
},
};
-export const story1 = () => ({
+export const Story1 = () => ({
template: hbs`You should be able to switch backgrounds for this story `,
});
-story1.story = {
+Story1.story = {
name: 'story 1',
};
-export const story2 = () => ({
+export const Story2 = () => ({
template: hbs`This one too! `,
});
-story2.story = {
+Story2.story = {
name: 'story 2',
};
diff --git a/examples/ember-cli/stories/addon-centered.stories.js b/examples/ember-cli/stories/addon-centered.stories.js
index 797e882feda..2382a0b83b8 100644
--- a/examples/ember-cli/stories/addon-centered.stories.js
+++ b/examples/ember-cli/stories/addon-centered.stories.js
@@ -10,6 +10,6 @@ export default {
},
};
-export const button = () => ({
+export const Button = () => ({
template: hbs`A Button `,
});
diff --git a/examples/ember-cli/stories/addon-knobs.stories.js b/examples/ember-cli/stories/addon-knobs.stories.js
index 7cc3806665d..a379a495814 100644
--- a/examples/ember-cli/stories/addon-knobs.stories.js
+++ b/examples/ember-cli/stories/addon-knobs.stories.js
@@ -11,7 +11,7 @@ export default {
},
};
-export const withText = () => ({
+export const WithText = () => ({
template: hbs`
{{welcome-banner
style=(if hidden "display: none")
@@ -34,6 +34,6 @@ export const withText = () => ({
},
});
-withText.story = {
+WithText.story = {
name: 'with text',
};
diff --git a/examples/ember-cli/stories/addon-links.stories.js b/examples/ember-cli/stories/addon-links.stories.js
index 8aba44e7002..539a821fe43 100644
--- a/examples/ember-cli/stories/addon-links.stories.js
+++ b/examples/ember-cli/stories/addon-links.stories.js
@@ -5,13 +5,13 @@ export default {
title: 'Addon/Links',
};
-export const goToWelcome = () => ({
+export const GoToWelcome = () => ({
template: hbs`This button brings you to welcome `,
context: {
onClick: linkTo('Welcome'),
},
});
-goToWelcome.story = {
+GoToWelcome.story = {
name: 'Go to welcome',
};
diff --git a/examples/ember-cli/stories/addon-notes.stories.js b/examples/ember-cli/stories/addon-notes.stories.js
index 25ebe7cf591..a2b963b58da 100644
--- a/examples/ember-cli/stories/addon-notes.stories.js
+++ b/examples/ember-cli/stories/addon-notes.stories.js
@@ -4,20 +4,20 @@ export default {
title: 'Addon/Notes',
};
-export const simpleNote = () => ({
+export const SimpleNote = () => ({
template: hbs`Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.
`,
});
-simpleNote.story = {
+SimpleNote.story = {
name: 'Simple note',
parameters: { notes: 'My notes on some bold text' },
};
-export const noteWithHtml = () => ({
+export const NoteWithHtml = () => ({
template: hbs`🤔😳😯😮
`,
});
-noteWithHtml.story = {
+NoteWithHtml.story = {
name: 'Note with HTML',
parameters: {
diff --git a/examples/ember-cli/stories/index.stories.js b/examples/ember-cli/stories/index.stories.js
index 4c194a8a2dd..8b3f32fce52 100644
--- a/examples/ember-cli/stories/index.stories.js
+++ b/examples/ember-cli/stories/index.stories.js
@@ -8,7 +8,7 @@ export default {
},
};
-export const basic = () => ({
+export const Basic = () => ({
template: hbs`
{{welcome-page}}
`,
diff --git a/examples/ember-cli/stories/welcome-banner.stories.js b/examples/ember-cli/stories/welcome-banner.stories.js
index 3a914a80b41..6b5f3d0bbf8 100644
--- a/examples/ember-cli/stories/welcome-banner.stories.js
+++ b/examples/ember-cli/stories/welcome-banner.stories.js
@@ -5,7 +5,7 @@ export default {
title: 'welcome-banner',
};
-export const basic = () => ({
+export const Basic = () => ({
template: hbs`
{{welcome-banner
backgroundColor=backgroundColor
diff --git a/examples/html-kitchen-sink/package.json b/examples/html-kitchen-sink/package.json
index 393424c2a88..aefc568476a 100644
--- a/examples/html-kitchen-sink/package.json
+++ b/examples/html-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "html-kitchen-sink",
- "version": "5.3.0-beta.1",
+ "version": "5.3.0-beta.3",
"private": true,
"description": "",
"keywords": [],
@@ -13,26 +13,26 @@
"storybook": "start-storybook -p 9006"
},
"devDependencies": {
- "@storybook/addon-a11y": "5.3.0-beta.1",
- "@storybook/addon-actions": "5.3.0-beta.1",
- "@storybook/addon-backgrounds": "5.3.0-beta.1",
- "@storybook/addon-centered": "5.3.0-beta.1",
- "@storybook/addon-docs": "5.3.0-beta.1",
- "@storybook/addon-events": "5.3.0-beta.1",
- "@storybook/addon-jest": "5.3.0-beta.1",
- "@storybook/addon-knobs": "5.3.0-beta.1",
- "@storybook/addon-links": "5.3.0-beta.1",
- "@storybook/addon-notes": "5.3.0-beta.1",
- "@storybook/addon-options": "5.3.0-beta.1",
- "@storybook/addon-storyshots": "5.3.0-beta.1",
- "@storybook/addon-storysource": "5.3.0-beta.1",
- "@storybook/addon-viewport": "5.3.0-beta.1",
- "@storybook/addons": "5.3.0-beta.1",
- "@storybook/client-api": "5.3.0-beta.1",
- "@storybook/core": "5.3.0-beta.1",
- "@storybook/core-events": "5.3.0-beta.1",
- "@storybook/html": "5.3.0-beta.1",
- "@storybook/source-loader": "5.3.0-beta.1",
+ "@storybook/addon-a11y": "5.3.0-beta.3",
+ "@storybook/addon-actions": "5.3.0-beta.3",
+ "@storybook/addon-backgrounds": "5.3.0-beta.3",
+ "@storybook/addon-centered": "5.3.0-beta.3",
+ "@storybook/addon-docs": "5.3.0-beta.3",
+ "@storybook/addon-events": "5.3.0-beta.3",
+ "@storybook/addon-jest": "5.3.0-beta.3",
+ "@storybook/addon-knobs": "5.3.0-beta.3",
+ "@storybook/addon-links": "5.3.0-beta.3",
+ "@storybook/addon-notes": "5.3.0-beta.3",
+ "@storybook/addon-options": "5.3.0-beta.3",
+ "@storybook/addon-storyshots": "5.3.0-beta.3",
+ "@storybook/addon-storysource": "5.3.0-beta.3",
+ "@storybook/addon-viewport": "5.3.0-beta.3",
+ "@storybook/addons": "5.3.0-beta.3",
+ "@storybook/client-api": "5.3.0-beta.3",
+ "@storybook/core": "5.3.0-beta.3",
+ "@storybook/core-events": "5.3.0-beta.3",
+ "@storybook/html": "5.3.0-beta.3",
+ "@storybook/source-loader": "5.3.0-beta.3",
"eventemitter3": "^4.0.0",
"format-json": "^1.0.3",
"global": "^4.3.2",
diff --git a/examples/html-kitchen-sink/stories/addon-a11y.stories.js b/examples/html-kitchen-sink/stories/addon-a11y.stories.js
index 89942adb7cf..a811c0cee73 100644
--- a/examples/html-kitchen-sink/stories/addon-a11y.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-a11y.stories.js
@@ -14,15 +14,15 @@ export default {
export const Default = () => `${text} `;
export const Disabled = () => `${text} `;
-export const story4 = () =>
+export const Story4 = () =>
`${text} `;
-story4.story = { name: 'Invalid contrast' };
+Story4.story = { name: 'Invalid contrast' };
-export const story5 = () => {
+export const Story5 = () => {
const div = document.createElement('div');
setTimeout(() => {
div.innerHTML = `This button has a delayed render of 1s `;
}, 1000);
return div;
};
-story5.story = { name: 'Delayed render' };
+Story5.story = { name: 'Delayed render' };
diff --git a/examples/html-kitchen-sink/stories/addon-actions.stories.js b/examples/html-kitchen-sink/stories/addon-actions.stories.js
index 4b7f110b639..40ec7cb6eba 100644
--- a/examples/html-kitchen-sink/stories/addon-actions.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-actions.stories.js
@@ -8,19 +8,19 @@ export default {
title: 'Addons/Actions',
};
-export const story1 = () => withActions('click')(button);
-story1.story = { name: 'Hello World' };
-export const story2 = () => withActions('click', 'contextmenu')(button);
-story2.story = { name: 'Multiple actions' };
+export const Story1 = () => withActions('click')(button);
+Story1.story = { name: 'Hello World' };
+export const Story2 = () => withActions('click', 'contextmenu')(button);
+Story2.story = { name: 'Multiple actions' };
-export const story3 = () =>
+export const Story3 = () =>
withActions('click', 'contextmenu', { clearOnStoryChange: false })(button);
-story3.story = { name: 'Multiple actions + config' };
+Story3.story = { name: 'Multiple actions + config' };
-export const story4 = () => withActions({ click: 'clicked', contextmenu: 'right clicked' })(button);
-story4.story = { name: 'Multiple actions, object' };
+export const Story4 = () => withActions({ click: 'clicked', contextmenu: 'right clicked' })(button);
+Story4.story = { name: 'Multiple actions, object' };
-export const story5 = () =>
+export const Story5 = () =>
withActions({ 'click .btn': 'clicked', contextmenu: 'right clicked' })(
() => `
@@ -28,18 +28,18 @@ export const story5 = () =>
`
);
-story5.story = { name: 'Multiple actions, selector' };
+Story5.story = { name: 'Multiple actions, selector' };
-export const story6 = () =>
+export const Story6 = () =>
withActions(
{ click: 'clicked', contextmenu: 'right clicked' },
{ clearOnStoryChange: false }
)(button);
-story6.story = { name: 'Multiple actions, object + config' };
+Story6.story = { name: 'Multiple actions, object + config' };
-export const story7 = () => pickTarget.withActions('click', 'contextmenu')(button);
-story7.story = { name: 'Decorated actions' };
+export const Story7 = () => pickTarget.withActions('click', 'contextmenu')(button);
+Story7.story = { name: 'Decorated actions' };
-export const story8 = () =>
+export const Story8 = () =>
pickTarget.withActions('click', 'contextmenu', { clearOnStoryChange: false })(button);
-story8.story = { name: 'Decorated actions + config' };
+Story8.story = { name: 'Decorated actions + config' };
diff --git a/examples/html-kitchen-sink/stories/addon-backgrounds.stories.js b/examples/html-kitchen-sink/stories/addon-backgrounds.stories.js
index 6a2d799ac4c..fdfdb6b9954 100644
--- a/examples/html-kitchen-sink/stories/addon-backgrounds.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-backgrounds.stories.js
@@ -8,9 +8,9 @@ export default {
},
};
-export const story1 = () =>
+export const Story1 = () =>
'You should be able to switch backgrounds for this story ';
-story1.story = { name: 'story 1' };
+Story1.story = { name: 'story 1' };
-export const story2 = () => 'This one too! ';
-story2.story = { name: 'story 2' };
+export const Story2 = () => 'This one too! ';
+Story2.story = { name: 'story 2' };
diff --git a/examples/html-kitchen-sink/stories/addon-centered.stories.js b/examples/html-kitchen-sink/stories/addon-centered.stories.js
index 858709b9a32..611afd93433 100644
--- a/examples/html-kitchen-sink/stories/addon-centered.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-centered.stories.js
@@ -5,5 +5,5 @@ export default {
decorators: [centered],
};
-export const story1 = () => 'I am a Button ! ';
-story1.story = { name: 'button in center' };
+export const Story1 = () => 'I am a Button ! ';
+Story1.story = { name: 'button in center' };
diff --git a/examples/html-kitchen-sink/stories/addon-jest.stories.js b/examples/html-kitchen-sink/stories/addon-jest.stories.js
index f2dee19b523..eb80009be86 100644
--- a/examples/html-kitchen-sink/stories/addon-jest.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-jest.stories.js
@@ -6,5 +6,5 @@ export default {
decorators: [wt({ results })],
};
-export const withTests = () => 'This story shows test results';
-withTests.parameters = { jest: 'addon-jest' };
+export const WithTests = () => 'This story shows test results';
+WithTests.parameters = { jest: 'addon-jest' };
diff --git a/examples/html-kitchen-sink/stories/addon-knobs.stories.js b/examples/html-kitchen-sink/stories/addon-knobs.stories.js
index e97a4608cdc..7b529a6c410 100644
--- a/examples/html-kitchen-sink/stories/addon-knobs.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-knobs.stories.js
@@ -34,7 +34,7 @@ export const DOM = () => {
return container;
};
-export const story3 = () => {
+export const Story3 = () => {
const name = text('Name', 'John Doe');
const textColor = color('Text color', 'orangered');
cachedContainer.textContent = name;
@@ -42,9 +42,9 @@ export const story3 = () => {
cachedContainer.style.color = textColor;
return cachedContainer;
};
-story3.story = { name: 'CSS transitions' };
+Story3.story = { name: 'CSS transitions' };
-export const story4 = () => {
+export const Story4 = () => {
const name = text('Name', 'Jane');
const stock = number('Stock', 20, {
range: true,
@@ -85,7 +85,7 @@ export const story4 = () => {
`;
};
-story4.story = { name: 'All knobs' };
+Story4.story = { name: 'All knobs' };
-export const story5 = () => text('Rendered string', '
This is a fragment of HTML
`;
-story1.story = {
+Story1.story = {
name: 'Simple note',
parameters: {
notes: 'My notes on some bold text',
diff --git a/examples/html-kitchen-sink/stories/button.stories.js b/examples/html-kitchen-sink/stories/button.stories.js
index 72627d513e5..bf4c9ea5f99 100644
--- a/examples/html-kitchen-sink/stories/button.stories.js
+++ b/examples/html-kitchen-sink/stories/button.stories.js
@@ -6,18 +6,18 @@ export default {
title: 'Demo',
};
-export const heading = () => 'Hello World ';
-export const headings = () =>
+export const Heading = () => 'Hello World ';
+export const Headings = () =>
'Hello World Hello World Hello World Hello World ';
-export const button = () => {
+export const Button = () => {
const btn = document.createElement('button');
btn.innerHTML = 'Hello Button';
btn.addEventListener('click', action('Click'));
return btn;
};
-export const effect = () => {
+export const Effect = () => {
useEffect(() => {
document.getElementById('button').style.backgroundColor = 'yellow';
});
diff --git a/examples/marko-cli/package.json b/examples/marko-cli/package.json
index 57ca8f73acf..19d6be161a8 100644
--- a/examples/marko-cli/package.json
+++ b/examples/marko-cli/package.json
@@ -1,6 +1,6 @@
{
"name": "marko-cli",
- "version": "5.3.0-beta.1",
+ "version": "5.3.0-beta.3",
"private": true,
"description": "Demo of how to build an app using marko-starter",
"repository": {
@@ -23,14 +23,14 @@
"marko-starter": "^2.0.4"
},
"devDependencies": {
- "@storybook/addon-a11y": "5.3.0-beta.1",
- "@storybook/addon-actions": "5.3.0-beta.1",
- "@storybook/addon-knobs": "5.3.0-beta.1",
- "@storybook/addon-options": "5.3.0-beta.1",
- "@storybook/addon-storysource": "5.3.0-beta.1",
- "@storybook/addons": "5.3.0-beta.1",
- "@storybook/marko": "5.3.0-beta.1",
- "@storybook/source-loader": "5.3.0-beta.1",
+ "@storybook/addon-a11y": "5.3.0-beta.3",
+ "@storybook/addon-actions": "5.3.0-beta.3",
+ "@storybook/addon-knobs": "5.3.0-beta.3",
+ "@storybook/addon-options": "5.3.0-beta.3",
+ "@storybook/addon-storysource": "5.3.0-beta.3",
+ "@storybook/addons": "5.3.0-beta.3",
+ "@storybook/marko": "5.3.0-beta.3",
+ "@storybook/source-loader": "5.3.0-beta.3",
"prettier": "^1.16.4",
"webpack": "^4.33.0"
}
diff --git a/examples/marko-cli/src/stories/hello.stories.js b/examples/marko-cli/src/stories/hello.stories.js
index 4c9e74866c6..a6a717560ad 100644
--- a/examples/marko-cli/src/stories/hello.stories.js
+++ b/examples/marko-cli/src/stories/hello.stories.js
@@ -8,5 +8,5 @@ export default {
};
export const Simple = () => ({ input: { name: 'abc', age: 20 } });
-export const story2 = () => 'NOT A MARKO RENDER_RESULT';
-story2.story = { name: 'with ERROR!' };
+export const Story2 = () => 'NOT A MARKO RENDER_RESULT';
+Story2.story = { name: 'with ERROR!' };
diff --git a/examples/mithril-kitchen-sink/package.json b/examples/mithril-kitchen-sink/package.json
index 231ed830664..8fcff6ef645 100644
--- a/examples/mithril-kitchen-sink/package.json
+++ b/examples/mithril-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "mithril-example",
- "version": "5.3.0-beta.1",
+ "version": "5.3.0-beta.3",
"private": true,
"scripts": {
"build-storybook": "build-storybook",
@@ -10,20 +10,20 @@
"mithril": "^1.1.6"
},
"devDependencies": {
- "@storybook/addon-a11y": "5.3.0-beta.1",
- "@storybook/addon-actions": "5.3.0-beta.1",
- "@storybook/addon-backgrounds": "5.3.0-beta.1",
- "@storybook/addon-centered": "5.3.0-beta.1",
- "@storybook/addon-knobs": "5.3.0-beta.1",
- "@storybook/addon-links": "5.3.0-beta.1",
- "@storybook/addon-notes": "5.3.0-beta.1",
- "@storybook/addon-options": "5.3.0-beta.1",
- "@storybook/addon-storyshots": "5.3.0-beta.1",
- "@storybook/addon-storysource": "5.3.0-beta.1",
- "@storybook/addon-viewport": "5.3.0-beta.1",
- "@storybook/addons": "5.3.0-beta.1",
- "@storybook/mithril": "5.3.0-beta.1",
- "@storybook/source-loader": "5.3.0-beta.1",
+ "@storybook/addon-a11y": "5.3.0-beta.3",
+ "@storybook/addon-actions": "5.3.0-beta.3",
+ "@storybook/addon-backgrounds": "5.3.0-beta.3",
+ "@storybook/addon-centered": "5.3.0-beta.3",
+ "@storybook/addon-knobs": "5.3.0-beta.3",
+ "@storybook/addon-links": "5.3.0-beta.3",
+ "@storybook/addon-notes": "5.3.0-beta.3",
+ "@storybook/addon-options": "5.3.0-beta.3",
+ "@storybook/addon-storyshots": "5.3.0-beta.3",
+ "@storybook/addon-storysource": "5.3.0-beta.3",
+ "@storybook/addon-viewport": "5.3.0-beta.3",
+ "@storybook/addons": "5.3.0-beta.3",
+ "@storybook/mithril": "5.3.0-beta.3",
+ "@storybook/source-loader": "5.3.0-beta.3",
"webpack": "^4.33.0"
}
}
diff --git a/examples/mithril-kitchen-sink/src/stories/addon-actions.stories.js b/examples/mithril-kitchen-sink/src/stories/addon-actions.stories.js
index 193629f7ef8..aa033b382be 100644
--- a/examples/mithril-kitchen-sink/src/stories/addon-actions.stories.js
+++ b/examples/mithril-kitchen-sink/src/stories/addon-actions.stories.js
@@ -8,28 +8,28 @@ export default {
title: 'Addons/Actions',
};
-export const story1 = () => ({
+export const Story1 = () => ({
view: () => Click me to log the action ,
});
-story1.story = { name: 'Action only' };
+Story1.story = { name: 'Action only' };
-export const story2 = () => ({
+export const Story2 = () => ({
view: () => (
(Double) click me to log the action
),
});
-story2.story = { name: 'Multiple actions' };
+Story2.story = { name: 'Multiple actions' };
-export const story3 = () => ({
+export const Story3 = () => ({
view: () => (
(Double) click me to log the action
),
});
-story3.story = { name: 'Multiple actions, object' };
+Story3.story = { name: 'Multiple actions, object' };
-export const story4 = () => ({
+export const Story4 = () => ({
view: () => (
{
@@ -41,4 +41,4 @@ export const story4 = () => ({
),
});
-story4.story = { name: 'Action and method' };
+Story4.story = { name: 'Action and method' };
diff --git a/examples/mithril-kitchen-sink/src/stories/addon-backgrounds.stories.js b/examples/mithril-kitchen-sink/src/stories/addon-backgrounds.stories.js
index 7423669b09a..48c15869195 100644
--- a/examples/mithril-kitchen-sink/src/stories/addon-backgrounds.stories.js
+++ b/examples/mithril-kitchen-sink/src/stories/addon-backgrounds.stories.js
@@ -13,12 +13,12 @@ export default {
},
};
-export const story1 = () => ({
+export const Story1 = () => ({
view: () => This buttons links to Welcome ,
});
-story1.story = { name: 'Go to welcome' };
+Story1.story = { name: 'Go to welcome' };
diff --git a/examples/mithril-kitchen-sink/src/stories/addon-notes.stories.js b/examples/mithril-kitchen-sink/src/stories/addon-notes.stories.js
index 6801d66fcec..26a9b8a401d 100644
--- a/examples/mithril-kitchen-sink/src/stories/addon-notes.stories.js
+++ b/examples/mithril-kitchen-sink/src/stories/addon-notes.stories.js
@@ -6,7 +6,7 @@ export default {
title: 'Addons/Notes',
};
-export const story1 = () => ({
+export const Story1 = () => ({
view: () => (
@@ -21,12 +21,12 @@ export const story1 = () => ({
),
});
-story1.story = {
+Story1.story = {
name: 'Simple note',
parameters: { notes: 'My notes on some bold text' },
};
-export const story2 = () => ({
+export const Story2 = () => ({
view: () => (
🤔😳😯😮
@@ -38,7 +38,7 @@ export const story2 = () => ({
),
});
-story2.story = {
+Story2.story = {
name: 'Note with HTML',
parameters: {
notes: `
diff --git a/examples/mithril-kitchen-sink/src/stories/button.stories.js b/examples/mithril-kitchen-sink/src/stories/button.stories.js
index ef051b16dec..f172c6abe7f 100644
--- a/examples/mithril-kitchen-sink/src/stories/button.stories.js
+++ b/examples/mithril-kitchen-sink/src/stories/button.stories.js
@@ -12,12 +12,12 @@ export default {
},
};
-export const story1 = () => ({
+export const Story1 = () => ({
view: () => m(Button, { onclick: action('clicked') }, 'Hello Button'),
});
-story1.story = { name: 'with text' };
+Story1.story = { name: 'with text' };
-export const story2 = () => ({
+export const Story2 = () => ({
view: () =>
m(
Button,
@@ -25,4 +25,4 @@ export const story2 = () => ({
m('span', { role: 'img', ariaLabel: 'so cool' }, '😀 😎 👍 💯')
),
});
-story2.story = { name: 'with some emoji' };
+Story2.story = { name: 'with some emoji' };
diff --git a/examples/mithril-kitchen-sink/src/stories/welcome.stories.js b/examples/mithril-kitchen-sink/src/stories/welcome.stories.js
index 60ead95a694..c30203e117c 100644
--- a/examples/mithril-kitchen-sink/src/stories/welcome.stories.js
+++ b/examples/mithril-kitchen-sink/src/stories/welcome.stories.js
@@ -7,7 +7,7 @@ export default {
component: Welcome,
};
-export const story1 = () => ({
+export const Story1 = () => ({
view: () => m(Welcome, { showApp: linkTo('Button') }),
});
-story1.story = { name: 'to Storybook' };
+Story1.story = { name: 'to Storybook' };
diff --git a/examples/official-storybook/components/ButtonGroup.js b/examples/official-storybook/components/ButtonGroup.js
new file mode 100644
index 00000000000..01953ea10d9
--- /dev/null
+++ b/examples/official-storybook/components/ButtonGroup.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/** ButtonGroup component description from docgen */
+export const ButtonGroup = ({ background, children }) => (
+
{children}
+);
+
+ButtonGroup.defaultProps = {
+ background: '#ff0',
+ children: null,
+};
+
+ButtonGroup.propTypes = {
+ background: PropTypes.string,
+ children: PropTypes.arrayOf(PropTypes.element),
+};
diff --git a/examples/official-storybook/main.js b/examples/official-storybook/main.js
index ebd5bdbf7d7..74dadf2bd33 100644
--- a/examples/official-storybook/main.js
+++ b/examples/official-storybook/main.js
@@ -1,9 +1,9 @@
module.exports = {
presets: ['@storybook/addon-docs/preset'],
stories: [
- '../../lib/ui/src/**/*.stories./(js|tsx|mdx)',
+ '../../lib/ui/src/**/*.stories.(js|tsx|mdx)',
'../../lib/components/src/**/*.stories.(js|tsx|mdx)',
- './stories/*.stories.(js|tsx|mdx)',
+ './stories/**/*.stories.(js|tsx|mdx)',
],
addons: [
'@storybook/addon-storysource/register',
diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json
index 9020903ecf8..dc24b347e49 100644
--- a/examples/official-storybook/package.json
+++ b/examples/official-storybook/package.json
@@ -1,6 +1,6 @@
{
"name": "official-storybook",
- "version": "5.3.0-beta.1",
+ "version": "5.3.0-beta.3",
"private": true,
"scripts": {
"build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook -c ./",
@@ -13,34 +13,34 @@
},
"devDependencies": {
"@packtracker/webpack-plugin": "^2.0.1",
- "@storybook/addon-a11y": "5.3.0-beta.1",
- "@storybook/addon-actions": "5.3.0-beta.1",
- "@storybook/addon-backgrounds": "5.3.0-beta.1",
- "@storybook/addon-centered": "5.3.0-beta.1",
- "@storybook/addon-contexts": "5.3.0-beta.1",
- "@storybook/addon-cssresources": "5.3.0-beta.1",
- "@storybook/addon-design-assets": "5.3.0-beta.1",
- "@storybook/addon-docs": "5.3.0-beta.1",
- "@storybook/addon-events": "5.3.0-beta.1",
- "@storybook/addon-graphql": "5.3.0-beta.1",
- "@storybook/addon-info": "5.3.0-beta.1",
- "@storybook/addon-jest": "5.3.0-beta.1",
- "@storybook/addon-knobs": "5.3.0-beta.1",
- "@storybook/addon-links": "5.3.0-beta.1",
- "@storybook/addon-notes": "5.3.0-beta.1",
- "@storybook/addon-options": "5.3.0-beta.1",
- "@storybook/addon-queryparams": "5.3.0-beta.1",
- "@storybook/addon-storyshots": "5.3.0-beta.1",
- "@storybook/addon-storyshots-puppeteer": "5.3.0-beta.1",
- "@storybook/addon-storysource": "5.3.0-beta.1",
- "@storybook/addon-viewport": "5.3.0-beta.1",
- "@storybook/addons": "5.3.0-beta.1",
- "@storybook/components": "5.3.0-beta.1",
- "@storybook/core-events": "5.3.0-beta.1",
- "@storybook/node-logger": "5.3.0-beta.1",
- "@storybook/react": "5.3.0-beta.1",
- "@storybook/source-loader": "5.3.0-beta.1",
- "@storybook/theming": "5.3.0-beta.1",
+ "@storybook/addon-a11y": "5.3.0-beta.3",
+ "@storybook/addon-actions": "5.3.0-beta.3",
+ "@storybook/addon-backgrounds": "5.3.0-beta.3",
+ "@storybook/addon-centered": "5.3.0-beta.3",
+ "@storybook/addon-contexts": "5.3.0-beta.3",
+ "@storybook/addon-cssresources": "5.3.0-beta.3",
+ "@storybook/addon-design-assets": "5.3.0-beta.3",
+ "@storybook/addon-docs": "5.3.0-beta.3",
+ "@storybook/addon-events": "5.3.0-beta.3",
+ "@storybook/addon-graphql": "5.3.0-beta.3",
+ "@storybook/addon-info": "5.3.0-beta.3",
+ "@storybook/addon-jest": "5.3.0-beta.3",
+ "@storybook/addon-knobs": "5.3.0-beta.3",
+ "@storybook/addon-links": "5.3.0-beta.3",
+ "@storybook/addon-notes": "5.3.0-beta.3",
+ "@storybook/addon-options": "5.3.0-beta.3",
+ "@storybook/addon-queryparams": "5.3.0-beta.3",
+ "@storybook/addon-storyshots": "5.3.0-beta.3",
+ "@storybook/addon-storyshots-puppeteer": "5.3.0-beta.3",
+ "@storybook/addon-storysource": "5.3.0-beta.3",
+ "@storybook/addon-viewport": "5.3.0-beta.3",
+ "@storybook/addons": "5.3.0-beta.3",
+ "@storybook/components": "5.3.0-beta.3",
+ "@storybook/core-events": "5.3.0-beta.3",
+ "@storybook/node-logger": "5.3.0-beta.3",
+ "@storybook/react": "5.3.0-beta.3",
+ "@storybook/source-loader": "5.3.0-beta.3",
+ "@storybook/theming": "5.3.0-beta.3",
"cors": "^2.8.5",
"cross-env": "^6.0.3",
"enzyme-to-json": "^3.4.1",
diff --git a/examples/official-storybook/preview.js b/examples/official-storybook/preview.js
index b4cacdbb4f3..f536535ede7 100644
--- a/examples/official-storybook/preview.js
+++ b/examples/official-storybook/preview.js
@@ -56,12 +56,6 @@ addParameters({
{ name: 'dark', value: '#222222' },
],
docs: {
- // eslint-disable-next-line react/prop-types
- page: ({ context }) => (
- `Subtitle: ${selectedKind}`}
- />
- ),
+ page: () => `Subtitle: ${selectedKind}`} />,
},
});
diff --git a/examples/official-storybook/stories/addon-a11y/base-button.stories.js b/examples/official-storybook/stories/addon-a11y/base-button.stories.js
index cfdac38ea8b..64f1aded15c 100644
--- a/examples/official-storybook/stories/addon-a11y/base-button.stories.js
+++ b/examples/official-storybook/stories/addon-a11y/base-button.stories.js
@@ -16,11 +16,11 @@ export const Default = () =>
);
-withoutLabel.story = {
+WithoutLabel.story = {
name: 'Without Label',
};
-export const withLabel = () => (
+export const WithLabel = () => (
);
-withLabel.story = {
+WithLabel.story = {
name: 'With label',
};
-export const withPlaceholder = () => (
+export const WithPlaceholder = () => (
);
-withPlaceholder.story = {
+WithPlaceholder.story = {
name: 'With placeholder',
};
diff --git a/examples/official-storybook/stories/addon-a11y/image.stories.js b/examples/official-storybook/stories/addon-a11y/image.stories.js
index 7b516b0c7cd..9a124605cf1 100644
--- a/examples/official-storybook/stories/addon-a11y/image.stories.js
+++ b/examples/official-storybook/stories/addon-a11y/image.stories.js
@@ -11,13 +11,13 @@ export default {
},
};
-export const withoutAlt = () =>
;
+export const EmptyParagraph = () =>
;
-emptyParagraph.story = {
+EmptyParagraph.story = {
name: 'Empty Paragraph',
};
-export const emptyLink = () => {`${text}...`} ;
+export const LinkWithoutHref = () => {`${text}...`} ;
-linkWithoutHref.story = {
+LinkWithoutHref.story = {
name: 'Link without href',
};
diff --git a/examples/official-storybook/stories/addon-actions.stories.js b/examples/official-storybook/stories/addon-actions.stories.js
index 66ae37eadea..f28d05bd18d 100644
--- a/examples/official-storybook/stories/addon-actions.stories.js
+++ b/examples/official-storybook/stories/addon-actions.stories.js
@@ -23,39 +23,39 @@ export default {
},
};
-export const basicExample = () => Hello World ;
+export const BasicExample = () => Hello World ;
-basicExample.story = {
+BasicExample.story = {
name: 'Basic example',
};
-export const multipleActions = () => (
+export const MultipleActions = () => (
Hello World
);
-multipleActions.story = {
+MultipleActions.story = {
name: 'Multiple actions',
};
-export const multipleActionsConfig = () => (
+export const MultipleActionsConfig = () => (
Moving away from this story will persist the action logger
);
-multipleActionsConfig.story = {
+MultipleActionsConfig.story = {
name: 'Multiple actions + config',
};
-export const multipleActionsAsObject = () => (
+export const MultipleActionsAsObject = () => (
Hello World
);
-multipleActionsAsObject.story = {
+MultipleActionsAsObject.story = {
name: 'Multiple actions as object',
};
-export const multipleActionsObjectConfig = () => (
+export const MultipleActionsObjectConfig = () => (
@@ -63,63 +63,63 @@ export const multipleActionsObjectConfig = () => (
);
-multipleActionsObjectConfig.story = {
+MultipleActionsObjectConfig.story = {
name: 'Multiple actions, object + config',
};
-export const decoratedAction = () => (
+export const DecoratedAction = () => (
Native Event
);
-decoratedAction.story = {
+DecoratedAction.story = {
name: 'Decorated action',
};
-export const decoratedActionConfig = () => (
+export const DecoratedActionConfig = () => (
Moving away from this story will persist the action logger
);
-decoratedActionConfig.story = {
+DecoratedActionConfig.story = {
name: 'Decorated action + config',
};
-export const decoratedActions = () => (
+export const DecoratedActions = () => (
Native Event
);
-decoratedActions.story = {
+DecoratedActions.story = {
name: 'Decorated actions',
};
-export const decoratedActionsConfig = () => (
+export const DecoratedActionsConfig = () => (
Moving away from this story will persist the action logger
);
-decoratedActionsConfig.story = {
+DecoratedActionsConfig.story = {
name: 'Decorated actions + config',
};
-export const circularPayload = () => {
+export const CircularPayload = () => {
const circular = { foo: {} };
circular.foo.circular = circular;
return action('circular')(circular)}>Circular Payload ;
};
-circularPayload.story = {
+CircularPayload.story = {
name: 'Circular Payload',
};
-export const reservedKeywordAsName = () => Delete ;
+export const ReservedKeywordAsName = () => Delete ;
-reservedKeywordAsName.story = {
+ReservedKeywordAsName.story = {
name: 'Reserved keyword as name',
};
-export const allTypes = () => {
+export const AllTypes = () => {
function A() {}
function B() {}
@@ -185,11 +185,11 @@ export const allTypes = () => {
);
};
-allTypes.story = {
+AllTypes.story = {
name: 'All types',
};
-export const configureActionsDepth = () => {
+export const ConfigureActionsDepth = () => {
configureActions({
depth: 2,
});
@@ -201,7 +201,7 @@ export const configureActionsDepth = () => {
);
};
-export const persistingTheActionLogger = () => (
+export const PersistingTheActionLogger = () => (
Moving away from this story will persist the action logger
@@ -210,11 +210,11 @@ export const persistingTheActionLogger = () => (
);
-persistingTheActionLogger.story = {
+PersistingTheActionLogger.story = {
name: 'Persisting the action logger',
};
-export const limitActionOutput = () => {
+export const LimitActionOutput = () => {
configureActions({
limit: 2,
});
@@ -226,6 +226,6 @@ export const limitActionOutput = () => {
);
};
-limitActionOutput.story = {
+LimitActionOutput.story = {
name: 'Limit Action Output',
};
diff --git a/examples/official-storybook/stories/addon-backgrounds.stories.js b/examples/official-storybook/stories/addon-backgrounds.stories.js
index 17ef4de2626..738f174bc2d 100644
--- a/examples/official-storybook/stories/addon-backgrounds.stories.js
+++ b/examples/official-storybook/stories/addon-backgrounds.stories.js
@@ -16,23 +16,23 @@ export default {
},
};
-export const story1 = () => (
+export const Story1 = () => (
Primary Large Button
);
-primaryLargeButton.story = {
+PrimaryLargeButton.story = {
name: 'Primary Large Button',
parameters: {
cssresources: [
@@ -30,8 +30,8 @@ primaryLargeButton.story = {
},
};
-export const cameraIcon = () => Camera Icon ;
-cameraIcon.story = {
+export const CameraIcon = () => Camera Icon ;
+CameraIcon.story = {
name: 'Camera Icon',
parameters: {
cssresources: [
diff --git a/examples/official-storybook/stories/addon-design-assets.stories.js b/examples/official-storybook/stories/addon-design-assets.stories.js
index b0f928195c9..6d858132d68 100644
--- a/examples/official-storybook/stories/addon-design-assets.stories.js
+++ b/examples/official-storybook/stories/addon-design-assets.stories.js
@@ -10,9 +10,9 @@ export default {
},
};
-export const singleImage = () => This story should a single image in the assets panel
;
+export const SingleImage = () => This story should a single image in the assets panel
;
-singleImage.story = {
+SingleImage.story = {
name: 'single image',
parameters: {
@@ -20,9 +20,9 @@ singleImage.story = {
},
};
-export const singleWebpage = () => This story should a single image in the assets panel
;
+export const SingleWebpage = () => This story should a single image in the assets panel
;
-singleWebpage.story = {
+SingleWebpage.story = {
name: 'single webpage',
parameters: {
@@ -30,9 +30,9 @@ singleWebpage.story = {
},
};
-export const youtubeVideo = () => This story should a single image in the assets panel
;
+export const YoutubeVideo = () => This story should a single image in the assets panel
;
-youtubeVideo.story = {
+YoutubeVideo.story = {
name: 'youtube video',
parameters: {
@@ -40,11 +40,11 @@ youtubeVideo.story = {
},
};
-export const multipleImages = () => (
+export const MultipleImages = () => (
This story should a multiple images in the assets panel
);
-multipleImages.story = {
+MultipleImages.story = {
name: 'multiple images',
parameters: {
@@ -55,9 +55,9 @@ multipleImages.story = {
},
};
-export const namedAssets = () => This story should a single image in the assets panel
;
+export const NamedAssets = () => This story should a single image in the assets panel
;
-namedAssets.story = {
+NamedAssets.story = {
name: 'named assets',
parameters: {
@@ -74,11 +74,11 @@ namedAssets.story = {
},
};
-export const urlReplacement = () => (
+export const UrlReplacement = () => (
This story should have a webpge, with within it's url the storyId
);
-urlReplacement.story = {
+UrlReplacement.story = {
name: 'url replacement',
parameters: {
diff --git a/examples/official-storybook/stories/addon-docs/addon-docs-blocks.stories.js b/examples/official-storybook/stories/addon-docs/addon-docs-blocks.stories.js
new file mode 100644
index 00000000000..1f614050bb0
--- /dev/null
+++ b/examples/official-storybook/stories/addon-docs/addon-docs-blocks.stories.js
@@ -0,0 +1,176 @@
+import React from 'react';
+import {
+ Title,
+ Subtitle,
+ Description,
+ Primary,
+ Props,
+ Stories,
+} from '@storybook/addon-docs/blocks';
+import { DocgenButton } from '../../components/DocgenButton';
+import BaseButton from '../../components/BaseButton';
+import { ButtonGroup } from '../../components/ButtonGroup';
+
+export default {
+ title: 'Addons/Docs/stories docs bocks',
+ component: DocgenButton,
+ parameters: {
+ docs: {
+ page: () => (
+ <>
+ Default docs page
;
+
+export const smallDocsPage = () => Just primary story,
;
+smallDocsPage.story = {
+ parameters: {
+ docs: {
+ page: () => (
+ <>
+ Primary props displayed with a check box
;
+checkBoxProps.story = {
+ parameters: {
+ docs: {
+ page: () => {
+ const [showProps, setShowProps] = React.useState(false);
+ return (
+ <>
+
+ display props
+
+ {showProps && Display custom title, Subtitle, Description
;
+customLabels.story = {
+ parameters: {
+ docs: {
+ page: () => (
+ <>
+ Custom title
+ Custom sub title
+ Custom description
+ Displays ALL stories (not excluding first one)
;
+customStoriesFilter.story = {
+ parameters: {
+ docs: {
+ page: () => (
+ <>
+ stories} />
+
+ ),
+ },
+ },
+};
+
+export const descriptionSlot = () => Adds markdown to the description
;
+descriptionSlot.story = {
+ parameters: {
+ docs: {
+ page: () => (
+ <>
+ `${description} `} />
+
+ ),
+ },
+ },
+};
+
+export const multipleComponents = () => (
+
+
+);
+
+multipleComponents.story = {
+ name: 'Many Components',
+ parameters: {
+ component: ButtonGroup,
+ subcomponents: {
+ 'Docgen Button': DocgenButton,
+ 'Base Button': BaseButton,
+ },
+ docs: {
+ page: () => (
+ <>
+ stories.find(story => story.story === 'Many Components')} />
+ Display multiple prop tables in tabs
;
+componentsProps.story = {
+ subcomponents: {
+ 'Docgen Button': DocgenButton,
+ 'Base Button': BaseButton,
+ },
+ parameters: {
+ docs: {
+ page: () => (
+ <>
+ Multiple prop tables
+
+ Here's what happens when your component has some related components
+
+ Click docs tab to see basic docs
;
+export const Basic = () => Click docs tab to see basic docs
;
-export const noDocs = () => Click docs tab to see no docs error
;
-noDocs.story = {
+export const NoDocs = () => Click docs tab to see no docs error
;
+NoDocs.story = {
name: 'no docs',
parameters: { docs: { page: null } },
};
-export const withNotes = () => Click docs tab to see DocsPage docs
;
-withNotes.story = {
+export const WithNotes = () => Click docs tab to see DocsPage docs
;
+WithNotes.story = {
name: 'with notes',
parameters: { notes },
};
-export const withInfo = () => Click docs tab to see DocsPage docs
;
-withInfo.story = {
+export const WithInfo = () => Click docs tab to see DocsPage docs
;
+WithInfo.story = {
name: 'with info',
parameters: {
info: 'some user info string',
},
};
-export const mdxOverride = () => Click docs tab to see MDX-overridden docs
;
-mdxOverride.story = {
+export const MdxOverride = () => Click docs tab to see MDX-overridden docs
;
+MdxOverride.story = {
name: 'mdx override',
parameters: {
docs: { page: mdxNotes },
},
};
-export const jsxOverride = () => Click docs tab to see JSX-overridden docs
;
-jsxOverride.story = {
+export const JsxOverride = () => Click docs tab to see JSX-overridden docs
;
+JsxOverride.story = {
name: 'jsx override',
parameters: {
docs: { page: () => Hello docs
},
},
};
-export const docsDisable = () => This story shouldn't show up in DocsPage
;
-docsDisable.story = {
+export const DocsDisable = () => This story shouldn't show up in DocsPage
;
+DocsDisable.story = {
parameters: {
docs: { disable: true },
},
};
-export const largerThanPreview = () => HUGE
;
+export const LargerThanPreview = () => HUGE
;
diff --git a/examples/official-storybook/stories/addon-docs/mdx.stories.js b/examples/official-storybook/stories/addon-docs/mdx.stories.js
index c4cab584e45..e2563d4825f 100644
--- a/examples/official-storybook/stories/addon-docs/mdx.stories.js
+++ b/examples/official-storybook/stories/addon-docs/mdx.stories.js
@@ -8,7 +8,7 @@ export default {
};
// This renders the contents of the docs panel into story content
-export const typography = () => {
+export const Typography = () => {
const Docs = markdown.parameters.docs.page;
return hello
;
+export const GetPikachu = () => hello
;
-getPikachu.story = {
+GetPikachu.story = {
name: 'get Pikachu',
parameters: {
graphiql: {
diff --git a/examples/official-storybook/stories/addon-info/decorators.stories.js b/examples/official-storybook/stories/addon-info/decorators.stories.js
index 0d3774ffdcc..780fb3a0b6d 100644
--- a/examples/official-storybook/stories/addon-info/decorators.stories.js
+++ b/examples/official-storybook/stories/addon-info/decorators.stories.js
@@ -7,5 +7,5 @@ export default {
decorators: [withInfo('Info can take options via the global or local decorator as well.')],
};
-export const useInfo = () =>
);
-excludeComponentFromPropTables.story = {
+ExcludeComponentFromPropTables.story = {
name: 'Exclude component from prop tables',
parameters: {
info: {
@@ -85,8 +85,8 @@ excludeComponentFromPropTables.story = {
},
};
-export const extendInfoStylesWithAnObject = () => (
/>
);
-commentsFromPropTypeDeclarations.story = {
+CommentsFromPropTypeDeclarations.story = {
name: 'Comments from PropType declarations',
parameters: {
@@ -42,11 +42,11 @@ commentsFromPropTypeDeclarations.story = {
},
};
-export const commentsFromFlowDeclarations = () => (
+export const CommentsFromFlowDeclarations = () => (
(
}}
/>
);
-objectProp.story = { name: 'Object prop' };
+ObjectProp.story = { name: 'Object prop' };
diff --git a/examples/official-storybook/stories/addon-jest.stories.js b/examples/official-storybook/stories/addon-jest.stories.js
index b0226b4cd8f..e488a6e6f75 100644
--- a/examples/official-storybook/stories/addon-jest.stories.js
+++ b/examples/official-storybook/stories/addon-jest.stories.js
@@ -8,7 +8,7 @@ export default {
decorators: [withTestsHOC({ results })],
};
-export const withTests = () => Hello
;
-withTests.story = {
+export const WithTests = () => Hello
;
+WithTests.story = {
parameters: { jest: 'addon-jest' },
};
diff --git a/examples/official-storybook/stories/addon-knobs/with-knobs-decorators.stories.js b/examples/official-storybook/stories/addon-knobs/with-knobs-decorators.stories.js
index 1a9a5a6d7ba..478b21d5ef0 100644
--- a/examples/official-storybook/stories/addon-knobs/with-knobs-decorators.stories.js
+++ b/examples/official-storybook/stories/addon-knobs/with-knobs-decorators.stories.js
@@ -4,10 +4,10 @@ export default {
title: 'Addons/Knobs/with decorators',
};
-export const withDecoratorCallingStoryFunctionMoreThanOnce = () => {
+export const WithDecoratorCallingStoryFunctionMoreThanOnce = () => {
return text('Text', 'Hello');
};
-withDecoratorCallingStoryFunctionMoreThanOnce.story = {
+WithDecoratorCallingStoryFunctionMoreThanOnce.story = {
decorators: [
withKnobs,
storyFn => {
diff --git a/examples/official-storybook/stories/addon-knobs/with-knobs-options.stories.js b/examples/official-storybook/stories/addon-knobs/with-knobs-options.stories.js
index d4ee216a4fd..df29629444b 100644
--- a/examples/official-storybook/stories/addon-knobs/with-knobs-options.stories.js
+++ b/examples/official-storybook/stories/addon-knobs/with-knobs-options.stories.js
@@ -10,7 +10,7 @@ export default {
],
};
-export const acceptsOptions = () => {text('Rendered string', '
Hello ')}
;
-acceptsOptions.story = {
+export const AcceptsOptions = () => {text('Rendered string', '
Hello ')};
+AcceptsOptions.story = {
name: 'accepts options',
};
diff --git a/examples/official-storybook/stories/addon-knobs/with-knobs.stories.js b/examples/official-storybook/stories/addon-knobs/with-knobs.stories.js
index c6209f09a21..4b9109dd07b 100644
--- a/examples/official-storybook/stories/addon-knobs/with-knobs.stories.js
+++ b/examples/official-storybook/stories/addon-knobs/with-knobs.stories.js
@@ -45,7 +45,7 @@ export default {
decorators: [withKnobs],
};
-export const tweaksStaticValues = () => {
+export const TweaksStaticValues = () => {
const name = text('Name', 'Storyteller');
const age = number('Age', 70, { range: true, min: 0, max: 90, step: 5 });
const fruits = {
@@ -119,11 +119,11 @@ export const tweaksStaticValues = () => {
);
};
-tweaksStaticValues.story = {
+TweaksStaticValues.story = {
name: 'tweaks static values',
};
-export const tweaksStaticValuesOrganizedInGroups = () => {
+export const TweaksStaticValuesOrganizedInGroups = () => {
const GROUP_IDS = {
DISPLAY: 'Display',
GENERAL: 'General',
@@ -206,11 +206,11 @@ export const tweaksStaticValuesOrganizedInGroups = () => {
);
};
-tweaksStaticValuesOrganizedInGroups.story = {
+TweaksStaticValuesOrganizedInGroups.story = {
name: 'tweaks static values organized in groups',
};
-export const dynamicKnobs = () => {
+export const DynamicKnobs = () => {
const showOptional = select('Show optional', ['yes', 'no'], 'yes');
return (
@@ -219,11 +219,11 @@ export const dynamicKnobs = () => {
);
};
-dynamicKnobs.story = {
+DynamicKnobs.story = {
name: 'dynamic knobs',
};
-export const complexSelect = () => {
+export const ComplexSelect = () => {
const m = select(
'complex',
{
@@ -243,11 +243,11 @@ export const complexSelect = () => {
);
};
-complexSelect.story = {
+ComplexSelect.story = {
name: 'complex select',
};
-export const optionsKnob = () => {
+export const OptionsKnob = () => {
const valuesRadio = {
Monday: 'Monday',
Tuesday: 'Tuesday',
@@ -322,7 +322,7 @@ export const optionsKnob = () => {
);
};
-export const triggersActionsViaButton = () => {
+export const TriggersActionsViaButton = () => {
button('Toggle item list state', () => {
if (!injectedIsLoading && injectedItems.length === 0) {
injectedIsLoading = true;
@@ -346,18 +346,18 @@ export const triggersActionsViaButton = () => {
);
};
-triggersActionsViaButton.story = {
+TriggersActionsViaButton.story = {
name: 'triggers actions via button',
};
-export const buttonWithReactUseState = () => {
+export const ButtonWithReactUseState = () => {
const [counter, setCounter] = React.useState(0);
button('increment', () => setCounter(counter + 1));
button('decrement', () => setCounter(counter - 1));
return counter;
};
-export const xssSafety = () => (
+export const XssSafety = () => (
(
}}
/>
);
-xssSafety.story = {
+XssSafety.story = {
name: 'XSS safety',
};
-export const acceptsStoryParameters = () =>
{text('Rendered string', '
Hello ')};
-acceptsStoryParameters.story = {
+export const AcceptsStoryParameters = () =>
{text('Rendered string', '
Hello ')};
+AcceptsStoryParameters.story = {
name: 'accepts story parameters',
parameters: {
@@ -378,7 +378,7 @@ acceptsStoryParameters.story = {
},
};
-export const withDuplicateDecorator = () => {
+export const WithDuplicateDecorator = () => {
return text('Text', 'Hello');
};
-withDuplicateDecorator.story = { decorators: [withKnobs] };
+WithDuplicateDecorator.story = { decorators: [withKnobs] };
diff --git a/examples/official-storybook/stories/addon-links/href.stories.js b/examples/official-storybook/stories/addon-links/href.stories.js
index 98dc6fb4a89..fc2f79bae16 100644
--- a/examples/official-storybook/stories/addon-links/href.stories.js
+++ b/examples/official-storybook/stories/addon-links/href.stories.js
@@ -6,12 +6,12 @@ export default {
title: 'Addons/Links/Href',
};
-export const log = () => {
+export const Log = () => {
hrefTo('Addons|Links.Href', 'log').then(href => action('URL of this story')(href));
return
See action logger ;
};
-log.story = {
+Log.story = {
parameters: {
options: {
panel: 'storybook/actions/panel',
diff --git a/examples/official-storybook/stories/addon-notes.stories.js b/examples/official-storybook/stories/addon-notes.stories.js
index f6053091f72..b9d05dd3503 100644
--- a/examples/official-storybook/stories/addon-notes.stories.js
+++ b/examples/official-storybook/stories/addon-notes.stories.js
@@ -77,11 +77,11 @@ export default {
title: 'Addons/Notes',
};
-export const addonNotes = () => (
+export const AddonNotes = () => (
);
-addonNotes.story = {
+AddonNotes.story = {
name: 'addon notes',
parameters: {
notes:
@@ -89,44 +89,44 @@ addonNotes.story = {
},
};
-export const addonNotesRenderingImportedMarkdown = () => (
+export const AddonNotesRenderingImportedMarkdown = () => (
);
-addonNotesRenderingImportedMarkdown.story = {
+AddonNotesRenderingImportedMarkdown.story = {
name: 'addon notes rendering imported markdown',
parameters: {
notes: { markdown: markdownNotes },
},
};
-export const addonNotesRenderingInlineGithubFlavoredMarkdown = () => (
+export const AddonNotesRenderingInlineGithubFlavoredMarkdown = () => (
);
-addonNotesRenderingInlineGithubFlavoredMarkdown.story = {
+AddonNotesRenderingInlineGithubFlavoredMarkdown.story = {
name: 'addon notes rendering inline, github-flavored markdown',
parameters: {
notes: { markdown: markdownString },
},
};
-export const withAMarkdownTable = () => (
+export const WithAMarkdownTable = () => (
);
-withAMarkdownTable.story = {
+WithAMarkdownTable.story = {
name: 'with a markdown table',
parameters: {
notes: { markdown: markdownTable },
},
};
-export const withAMarkdownGiphy = () => (
+export const WithAMarkdownGiphy = () => (
);
-withAMarkdownGiphy.story = {
+WithAMarkdownGiphy.story = {
name: 'with a markdown giphy',
parameters: {
notes: { markdown: giphyMarkdown },
diff --git a/examples/official-storybook/stories/addon-options.stories.js b/examples/official-storybook/stories/addon-options.stories.js
index 358abb41b2f..b8cafe157fa 100644
--- a/examples/official-storybook/stories/addon-options.stories.js
+++ b/examples/official-storybook/stories/addon-options.stories.js
@@ -4,11 +4,11 @@ export default {
title: 'Addons/Options',
};
-export const settingName = () => (
+export const SettingName = () => (
This story should have changed the name of the storybook
);
-settingName.story = {
+SettingName.story = {
name: 'setting name',
parameters: {
@@ -18,11 +18,11 @@ settingName.story = {
},
};
-export const hidingAddonPanel = () => (
+export const HidingAddonPanel = () => (
This story should have changed hidden the addons panel
);
-hidingAddonPanel.story = {
+HidingAddonPanel.story = {
name: 'hiding addon panel',
parameters: {
diff --git a/examples/official-storybook/stories/addon-queryparams.stories.js b/examples/official-storybook/stories/addon-queryparams.stories.js
index 8fe633c230f..3d5c515fb2a 100644
--- a/examples/official-storybook/stories/addon-queryparams.stories.js
+++ b/examples/official-storybook/stories/addon-queryparams.stories.js
@@ -13,19 +13,19 @@ export default {
},
};
-export const mockIsTrue = () => (
+export const MockIsTrue = () => (
This story should have an extra url query param: {document.location.search}
);
-mockIsTrue.story = {
+MockIsTrue.story = {
name: 'mock is true',
};
-export const mockIs4 = () => (
+export const MockIs4 = () => (
This story should have an extra url query param: {document.location.search}
);
-mockIs4.story = {
+MockIs4.story = {
name: 'mock is 4',
parameters: { query: { mock: 4 } },
};
diff --git a/examples/official-storybook/stories/addon-viewport/custom-default.stories.js b/examples/official-storybook/stories/addon-viewport/custom-default.stories.js
index aa98e44191f..b75528e380b 100644
--- a/examples/official-storybook/stories/addon-viewport/custom-default.stories.js
+++ b/examples/official-storybook/stories/addon-viewport/custom-default.stories.js
@@ -28,12 +28,12 @@ export const Inherited = () => (
);
-export const overriddenViaWithViewportParameterizedDecorator = () => (
+export const OverriddenViaWithViewportParameterizedDecorator = () => (
I respect my parents but I should be looking good on iPad .
);
-overriddenViaWithViewportParameterizedDecorator.story = {
+OverriddenViaWithViewportParameterizedDecorator.story = {
name: 'Overridden via "withViewport" parameterized decorator',
parameters: { viewport: { defaultViewport: 'ipad' } },
};
diff --git a/examples/official-storybook/stories/addon-viewport/default.stories.js b/examples/official-storybook/stories/addon-viewport/default.stories.js
index 945473987ad..31c43a42c86 100644
--- a/examples/official-storybook/stories/addon-viewport/default.stories.js
+++ b/examples/official-storybook/stories/addon-viewport/default.stories.js
@@ -12,7 +12,7 @@ export default {
},
},
};
-export const defaultFn = () => (
+export const DefaultFn = () => (
I don't have problems being rendered using the default viewport.
);
-defaultFn.story = { name: 'default' };
+DefaultFn.story = { name: 'default' };
diff --git a/examples/official-storybook/stories/core/decorators.stories.js b/examples/official-storybook/stories/core/decorators.stories.js
index be0c8c2071e..15af07f7bde 100644
--- a/examples/official-storybook/stories/core/decorators.stories.js
+++ b/examples/official-storybook/stories/core/decorators.stories.js
@@ -26,8 +26,8 @@ export default {
],
};
-export const all = () =>
Story
;
-all.story = {
+export const All = () =>
Story
;
+All.story = {
decorators: [
s => (
<>
@@ -38,8 +38,8 @@ all.story = {
],
};
-export const deprecated = () =>
Story
;
-deprecated.story = {
+export const Deprecated = () =>
Story
;
+Deprecated.story = {
parameters: {
decorators: [
s => (
diff --git a/examples/official-storybook/stories/core/errors.stories.js b/examples/official-storybook/stories/core/errors.stories.js
index 54950d17808..00c6c19bf08 100644
--- a/examples/official-storybook/stories/core/errors.stories.js
+++ b/examples/official-storybook/stories/core/errors.stories.js
@@ -7,10 +7,10 @@ export default {
title: 'Core/Errors',
};
-export const exception = () => {
+export const Exception = () => {
throw new Error('storyFn threw an error! WHOOPS');
};
-exception.story = {
+Exception.story = {
name: 'story throws exception',
parameters: {
storyshots: { disable: true },
@@ -33,8 +33,8 @@ badComponent.story = {
},
};
-export const badStory = () => badOutput;
-badStory.story = {
+export const BadStory = () => badOutput;
+BadStory.story = {
name: 'story errors - story un-renderable type',
parameters: {
notes: 'Story does not return something react can render',
diff --git a/examples/official-storybook/stories/core/events.stories.js b/examples/official-storybook/stories/core/events.stories.js
index 4da37afffc0..7f193d263b3 100644
--- a/examples/official-storybook/stories/core/events.stories.js
+++ b/examples/official-storybook/stories/core/events.stories.js
@@ -13,5 +13,5 @@ export default {
title: 'Core/Events',
};
-export const force = () =>
Clicked: {timesClicked} ;
-force.story = { name: 'Force re-render' };
+export const Force = () =>
Clicked: {timesClicked} ;
+Force.story = { name: 'Force re-render' };
diff --git a/examples/official-storybook/stories/core/parameters.stories.js b/examples/official-storybook/stories/core/parameters.stories.js
index 25c93dadf61..2afcde8a13a 100644
--- a/examples/official-storybook/stories/core/parameters.stories.js
+++ b/examples/official-storybook/stories/core/parameters.stories.js
@@ -19,10 +19,10 @@ export default {
// I'm not sure what we should recommend regarding propTypes? are they a good idea for examples?
// Given we sort of control the props, should we export a prop type?
-export const passed = ({ parameters: { options, fileName, ...parameters }, ...rest }) => (
+export const Passed = ({ parameters: { options, fileName, ...parameters }, ...rest }) => (
Parameters: {JSON.stringify(parameters, null, 2)}
);
-passed.story = {
+Passed.story = {
name: 'passed to story',
parameters: { storyParameter: 'storyParameter' },
};
diff --git a/examples/official-storybook/stories/core/scroll.stories.js b/examples/official-storybook/stories/core/scroll.stories.js
index 4b619f0af7c..73b7b4bca47 100644
--- a/examples/official-storybook/stories/core/scroll.stories.js
+++ b/examples/official-storybook/stories/core/scroll.stories.js
@@ -13,7 +13,7 @@ const Horizontal = styled(props =>
)({
});
const Vertical = styled(props =>
)({});
-export const story1 = () => (
+export const Story1 = () => (
START, when switching stories, you should be able to read this at the top of the page
middle
@@ -23,9 +23,9 @@ export const story1 = () => (
);
-story1.story = { name: 'story with 100vh padding 1' };
+Story1.story = { name: 'story with 100vh padding 1' };
-export const story2 = () => (
+export const Story2 = () => (
START, when switching stories, you should be able to read this at the top of the page
middle
@@ -35,22 +35,22 @@ export const story2 = () => (
);
-story2.story = { name: 'story with 100vh padding 2' };
+Story2.story = { name: 'story with 100vh padding 2' };
-export const story3 = () => (
+export const Story3 = () => (
START
middle
END
);
-story3.story = { name: 'story with 100vw+' };
+Story3.story = { name: 'story with 100vw+' };
-export const story4 = () => (
+export const Story4 = () => (
START
middle
END
);
-story4.story = { name: 'story with 100vw+ 2' };
+Story4.story = { name: 'story with 100vw+ 2' };
diff --git a/examples/official-storybook/stories/demo/button.stories.js b/examples/official-storybook/stories/demo/button.stories.js
index ed9e74c27d4..d641ccae005 100644
--- a/examples/official-storybook/stories/demo/button.stories.js
+++ b/examples/official-storybook/stories/demo/button.stories.js
@@ -13,29 +13,29 @@ export default {
},
};
-export const withText = () =>
Hello Button ;
-withText.story = {
+export const WithText = () =>
Hello Button ;
+WithText.story = {
name: 'with text',
};
-export const withSomeEmoji = () => (
+export const WithSomeEmoji = () => (
😀 😎 👍 💯
);
-withSomeEmoji.story = {
+WithSomeEmoji.story = {
name: 'with some emoji',
};
-export const withCounter = () => {
+export const WithCounter = () => {
const [counter, setCounter] = useState(0);
const label = `Testing: ${counter}`;
return
setCounter(counter + 1)}>{label} ;
};
-withCounter.story = {
+WithCounter.story = {
name: 'with counter',
parameters: {
docs: {
diff --git a/examples/official-storybook/stories/demo/csf-embedding.test.js b/examples/official-storybook/stories/demo/csf-embedding.test.js
index b5f566e3257..ba26d54e53d 100644
--- a/examples/official-storybook/stories/demo/csf-embedding.test.js
+++ b/examples/official-storybook/stories/demo/csf-embedding.test.js
@@ -1,6 +1,6 @@
import React from 'react';
import { render, fireEvent } from '@testing-library/react';
-import { withText as WithText, withCounter as WithCounter } from './button.stories';
+import { WithText, WithCounter } from './button.stories';
const mockAction = jest.fn();
jest.mock('@storybook/addon-actions', () => ({
diff --git a/examples/official-storybook/stories/demo/welcome.stories.js b/examples/official-storybook/stories/demo/welcome.stories.js
index b0b56a55bc0..7d13665f6f2 100644
--- a/examples/official-storybook/stories/demo/welcome.stories.js
+++ b/examples/official-storybook/stories/demo/welcome.stories.js
@@ -7,7 +7,7 @@ export default {
component: Welcome,
};
-export const toStorybook = () =>
;
-toStorybook.story = {
+export const ToStorybook = () =>
;
+ToStorybook.story = {
name: 'to Storybook',
};
diff --git a/examples/official-storybook/stories/deprecated/addon-actions.stories.js b/examples/official-storybook/stories/deprecated/addon-actions.stories.js
index 0da9183e3d7..eb04f408d1d 100644
--- a/examples/official-storybook/stories/deprecated/addon-actions.stories.js
+++ b/examples/official-storybook/stories/deprecated/addon-actions.stories.js
@@ -18,10 +18,10 @@ export default {
title: 'Addons/Actions/deprecated',
};
-export const decoratedAction = () => (
+export const DecoratedAction = () => (
Native Event
);
-decoratedAction.story = {
+DecoratedAction.story = {
name: 'Decorated Action',
};
diff --git a/examples/official-storybook/stories/deprecated/addon-info.stories.js b/examples/official-storybook/stories/deprecated/addon-info.stories.js
index 4180d2ed88d..f63fadce4b1 100644
--- a/examples/official-storybook/stories/deprecated/addon-info.stories.js
+++ b/examples/official-storybook/stories/deprecated/addon-info.stories.js
@@ -9,8 +9,8 @@ export default {
title: 'Addons/Info/deprecated',
};
-export const displaysMarkdown = withInfo(markdownDescription)(() => (
+export const DisplaysMarkdown = withInfo(markdownDescription)(() => (
));
-displaysMarkdown.story = { name: 'Displays Markdown in description' };
+DisplaysMarkdown.story = { name: 'Displays Markdown in description' };
diff --git a/examples/official-storybook/stories/hooks.stories.js b/examples/official-storybook/stories/hooks.stories.js
index 3f349858e25..6f705a02498 100644
--- a/examples/official-storybook/stories/hooks.stories.js
+++ b/examples/official-storybook/stories/hooks.stories.js
@@ -20,7 +20,7 @@ export const Input = () => {
return
setText(e.target.value)} />;
};
-export const effect = () => {
+export const Effect = () => {
const ref = useRef();
useEffect(() => {
if (ref.current != null) {
@@ -35,7 +35,7 @@ export const effect = () => {
);
};
-export const reactHookCheckbox = () => {
+export const ReactHookCheckbox = () => {
const [on, setOn] = React.useState(false);
return (
diff --git a/examples/polymer-cli/package.json b/examples/polymer-cli/package.json
index c68984c8f99..7ee59e64613 100644
--- a/examples/polymer-cli/package.json
+++ b/examples/polymer-cli/package.json
@@ -1,6 +1,6 @@
{
"name": "polymer-cli",
- "version": "5.3.0-beta.1",
+ "version": "5.3.0-beta.3",
"private": true,
"scripts": {
"build-storybook": "build-storybook",
@@ -9,17 +9,17 @@
},
"dependencies": {
"@polymer/polymer": "^2.6.0",
- "@storybook/addon-a11y": "5.3.0-beta.1",
- "@storybook/addon-actions": "5.3.0-beta.1",
- "@storybook/addon-backgrounds": "5.3.0-beta.1",
- "@storybook/addon-knobs": "5.3.0-beta.1",
- "@storybook/addon-links": "5.3.0-beta.1",
- "@storybook/addon-notes": "5.3.0-beta.1",
- "@storybook/addon-options": "5.3.0-beta.1",
- "@storybook/addon-storysource": "5.3.0-beta.1",
- "@storybook/addon-viewport": "5.3.0-beta.1",
- "@storybook/polymer": "5.3.0-beta.1",
- "@storybook/source-loader": "5.3.0-beta.1",
+ "@storybook/addon-a11y": "5.3.0-beta.3",
+ "@storybook/addon-actions": "5.3.0-beta.3",
+ "@storybook/addon-backgrounds": "5.3.0-beta.3",
+ "@storybook/addon-knobs": "5.3.0-beta.3",
+ "@storybook/addon-links": "5.3.0-beta.3",
+ "@storybook/addon-notes": "5.3.0-beta.3",
+ "@storybook/addon-options": "5.3.0-beta.3",
+ "@storybook/addon-storysource": "5.3.0-beta.3",
+ "@storybook/addon-viewport": "5.3.0-beta.3",
+ "@storybook/polymer": "5.3.0-beta.3",
+ "@storybook/source-loader": "5.3.0-beta.3",
"@webcomponents/webcomponentsjs": "^1.2.0",
"global": "^4.3.2",
"lit-html": "^1.0.0",
diff --git a/examples/polymer-cli/src/stories/addon-actions.stories.js b/examples/polymer-cli/src/stories/addon-actions.stories.js
index f8bb6b11948..256046fd16f 100644
--- a/examples/polymer-cli/src/stories/addon-actions.stories.js
+++ b/examples/polymer-cli/src/stories/addon-actions.stories.js
@@ -7,22 +7,22 @@ export default {
title: 'Addon/Actions',
};
-export const actionOnly = () => {
+export const ActionOnly = () => {
const el = document.createElement('simple-button');
el.addEventListener('click', action('log1'));
return el;
};
-actionOnly.story = {
+ActionOnly.story = {
name: 'Action only',
};
-export const actionAndMethod = () => {
+export const ActionAndMethod = () => {
const el = document.createElement('simple-button');
el.addEventListener('click', e => action('log2')(e.target));
return el;
};
-actionAndMethod.story = {
+ActionAndMethod.story = {
name: 'Action and method',
};
diff --git a/examples/polymer-cli/src/stories/addon-backgrounds.stories.js b/examples/polymer-cli/src/stories/addon-backgrounds.stories.js
index 9610bc16587..69e615c5e8f 100644
--- a/examples/polymer-cli/src/stories/addon-backgrounds.stories.js
+++ b/examples/polymer-cli/src/stories/addon-backgrounds.stories.js
@@ -9,8 +9,8 @@ export default {
},
};
-export const buttonWithText = () => 'Click me ';
+export const ButtonWithText = () => 'Click me ';
-buttonWithText.story = {
+ButtonWithText.story = {
name: 'button with text',
};
diff --git a/examples/polymer-cli/src/stories/addon-links.stories.js b/examples/polymer-cli/src/stories/addon-links.stories.js
index 4af90cc1030..abf5e3e367c 100644
--- a/examples/polymer-cli/src/stories/addon-links.stories.js
+++ b/examples/polymer-cli/src/stories/addon-links.stories.js
@@ -7,13 +7,13 @@ export default {
title: 'Addon/Links',
};
-export const withCreateElement = () => {
+export const WithCreateElement = () => {
const el = document.createElement('simple-button');
el.title = 'Go to welcome';
el.handleClick = linkTo('Welcome');
return el;
};
-withCreateElement.story = {
+WithCreateElement.story = {
name: 'With Create Element',
};
diff --git a/examples/polymer-cli/src/stories/addon-notes.stories.js b/examples/polymer-cli/src/stories/addon-notes.stories.js
index ea11b37cfc4..c86773f8343 100644
--- a/examples/polymer-cli/src/stories/addon-notes.stories.js
+++ b/examples/polymer-cli/src/stories/addon-notes.stories.js
@@ -2,19 +2,19 @@ export default {
title: 'Addon/Notes',
};
-export const simpleNote = () =>
+export const SimpleNote = () =>
'Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.
';
-simpleNote.story = {
+SimpleNote.story = {
name: 'Simple note',
parameters: {
notes: 'My notes on some bold text',
},
};
-export const noteWithHtml = () => '🤔😳😯😮
';
+export const NoteWithHtml = () => '🤔😳😯😮
';
-noteWithHtml.story = {
+NoteWithHtml.story = {
name: 'Note with HTML',
parameters: {
notes: `
diff --git a/examples/polymer-cli/src/stories/components/app.stories.js b/examples/polymer-cli/src/stories/components/app.stories.js
index 95173e6dc76..ca95c2f0954 100644
--- a/examples/polymer-cli/src/stories/components/app.stories.js
+++ b/examples/polymer-cli/src/stories/components/app.stories.js
@@ -4,8 +4,8 @@ export default {
title: 'App',
};
-export const fullApp = () =>
+export const FullApp = () =>
'Parameters are ${JSON.stringify(parameters)}
`;
-passedToStory.story = {
+PassedToStory.story = {
name: 'passed to story',
parameters: {
diff --git a/examples/polymer-cli/src/stories/custom-decorators.stories.js b/examples/polymer-cli/src/stories/custom-decorators.stories.js
index fadc6c47cae..d3d7b475d09 100644
--- a/examples/polymer-cli/src/stories/custom-decorators.stories.js
+++ b/examples/polymer-cli/src/stories/custom-decorators.stories.js
@@ -12,12 +12,12 @@ export default {
],
};
-export const exampleDecoration = () => {
+export const ExampleDecoration = () => {
const el = document.createElement('playground-button');
el.setAttribute('title', 'An example title');
return el;
};
-exampleDecoration.story = {
+ExampleDecoration.story = {
name: 'example decoration',
};
diff --git a/examples/preact-kitchen-sink/package.json b/examples/preact-kitchen-sink/package.json
index 4e039d08159..427e351e314 100644
--- a/examples/preact-kitchen-sink/package.json
+++ b/examples/preact-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "preact-example",
- "version": "5.3.0-beta.1",
+ "version": "5.3.0-beta.3",
"private": true,
"scripts": {
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
@@ -15,21 +15,21 @@
"devDependencies": {
"@babel/core": "^7.3.4",
"@babel/plugin-transform-runtime": "^7.2.0",
- "@storybook/addon-a11y": "5.3.0-beta.1",
- "@storybook/addon-actions": "5.3.0-beta.1",
- "@storybook/addon-backgrounds": "5.3.0-beta.1",
- "@storybook/addon-centered": "5.3.0-beta.1",
- "@storybook/addon-contexts": "5.3.0-beta.1",
- "@storybook/addon-knobs": "5.3.0-beta.1",
- "@storybook/addon-links": "5.3.0-beta.1",
- "@storybook/addon-notes": "5.3.0-beta.1",
- "@storybook/addon-options": "5.3.0-beta.1",
- "@storybook/addon-storyshots": "5.3.0-beta.1",
- "@storybook/addon-storysource": "5.3.0-beta.1",
- "@storybook/addon-viewport": "5.3.0-beta.1",
- "@storybook/addons": "5.3.0-beta.1",
- "@storybook/preact": "5.3.0-beta.1",
- "@storybook/source-loader": "5.3.0-beta.1",
+ "@storybook/addon-a11y": "5.3.0-beta.3",
+ "@storybook/addon-actions": "5.3.0-beta.3",
+ "@storybook/addon-backgrounds": "5.3.0-beta.3",
+ "@storybook/addon-centered": "5.3.0-beta.3",
+ "@storybook/addon-contexts": "5.3.0-beta.3",
+ "@storybook/addon-knobs": "5.3.0-beta.3",
+ "@storybook/addon-links": "5.3.0-beta.3",
+ "@storybook/addon-notes": "5.3.0-beta.3",
+ "@storybook/addon-options": "5.3.0-beta.3",
+ "@storybook/addon-storyshots": "5.3.0-beta.3",
+ "@storybook/addon-storysource": "5.3.0-beta.3",
+ "@storybook/addon-viewport": "5.3.0-beta.3",
+ "@storybook/addons": "5.3.0-beta.3",
+ "@storybook/preact": "5.3.0-beta.3",
+ "@storybook/source-loader": "5.3.0-beta.3",
"babel-loader": "^8.0.4",
"cross-env": "^6.0.3",
"file-loader": "^4.2.0",
diff --git a/examples/preact-kitchen-sink/src/stories/addon-actions.stories.js b/examples/preact-kitchen-sink/src/stories/addon-actions.stories.js
index da91db54083..39705549882 100644
--- a/examples/preact-kitchen-sink/src/stories/addon-actions.stories.js
+++ b/examples/preact-kitchen-sink/src/stories/addon-actions.stories.js
@@ -9,31 +9,31 @@ export default {
title: 'Addons/Actions',
};
-export const actionOnly = () => Click me to log the action ;
+export const ActionOnly = () => Click me to log the action ;
-actionOnly.story = {
+ActionOnly.story = {
name: 'Action only',
};
-export const multipleActions = () => (
+export const MultipleActions = () => (
(Double) click me to log the action
);
-multipleActions.story = {
+MultipleActions.story = {
name: 'Multiple actions',
};
-export const multipleActionsObject = () => (
+export const MultipleActionsObject = () => (
(Double) click me to log the action
);
-multipleActionsObject.story = {
+MultipleActionsObject.story = {
name: 'Multiple actions, object',
};
-export const actionAndMethod = () => (
+export const ActionAndMethod = () => (
{
event.preventDefault();
@@ -44,6 +44,6 @@ export const actionAndMethod = () => (
);
-actionAndMethod.story = {
+ActionAndMethod.story = {
name: 'Action and method',
};
diff --git a/examples/preact-kitchen-sink/src/stories/addon-backgrounds.stories.js b/examples/preact-kitchen-sink/src/stories/addon-backgrounds.stories.js
index 960ee54461f..49db337988d 100644
--- a/examples/preact-kitchen-sink/src/stories/addon-backgrounds.stories.js
+++ b/examples/preact-kitchen-sink/src/stories/addon-backgrounds.stories.js
@@ -15,16 +15,16 @@ export default {
},
};
-export const example1 = () => (
+export const Example1 = () => (
You should be able to switch backgrounds for this story
);
-example1.story = {
+Example1.story = {
name: 'Example 1',
};
-export const example2 = () => This one too! ;
+export const Example2 = () => This one too! ;
-example2.story = {
+Example2.story = {
name: 'Example 2',
};
diff --git a/examples/preact-kitchen-sink/src/stories/addon-contexts.stories.js b/examples/preact-kitchen-sink/src/stories/addon-contexts.stories.js
index 445148b61c5..f310300239c 100644
--- a/examples/preact-kitchen-sink/src/stories/addon-contexts.stories.js
+++ b/examples/preact-kitchen-sink/src/stories/addon-contexts.stories.js
@@ -45,11 +45,11 @@ export default {
decorators: [withContexts(topLevelContexts)],
};
-export const simpleCssTheming = () => (
+export const SimpleCssTheming = () => (
I'm a children of the injected 'div' (where provides a theming context).
);
-simpleCssTheming.story = {
+SimpleCssTheming.story = {
name: 'Simple CSS Theming',
parameters: {
diff --git a/examples/preact-kitchen-sink/src/stories/addon-knobs.stories.js b/examples/preact-kitchen-sink/src/stories/addon-knobs.stories.js
index 330c3a8f56b..8007e50bf1c 100644
--- a/examples/preact-kitchen-sink/src/stories/addon-knobs.stories.js
+++ b/examples/preact-kitchen-sink/src/stories/addon-knobs.stories.js
@@ -28,7 +28,7 @@ export const Simple = () => {
return {content}
;
};
-export const allKnobs = () => {
+export const AllKnobs = () => {
const name = text('Name', 'Jane');
const stock = number('Stock', 20, {
range: true,
@@ -73,6 +73,6 @@ export const allKnobs = () => {
);
};
-allKnobs.story = {
+AllKnobs.story = {
name: 'All knobs',
};
diff --git a/examples/preact-kitchen-sink/src/stories/addon-links.stories.js b/examples/preact-kitchen-sink/src/stories/addon-links.stories.js
index b138b207a60..e36cdceeed3 100644
--- a/examples/preact-kitchen-sink/src/stories/addon-links.stories.js
+++ b/examples/preact-kitchen-sink/src/stories/addon-links.stories.js
@@ -10,10 +10,10 @@ export default {
title: 'Addons/Links',
};
-export const goToWelcome = () => (
+export const GoToWelcome = () => (
This button links to Welcome
);
-goToWelcome.story = {
+GoToWelcome.story = {
name: 'Go to welcome',
};
diff --git a/examples/preact-kitchen-sink/src/stories/addon-notes.stories.js b/examples/preact-kitchen-sink/src/stories/addon-notes.stories.js
index 14d3bf9feea..9f5b05b996b 100644
--- a/examples/preact-kitchen-sink/src/stories/addon-notes.stories.js
+++ b/examples/preact-kitchen-sink/src/stories/addon-notes.stories.js
@@ -9,7 +9,7 @@ export default {
decorators: [withNotes],
};
-export const simpleNote = () => (
+export const SimpleNote = () => (
Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed
@@ -22,12 +22,12 @@ export const simpleNote = () => (
);
-simpleNote.story = {
+SimpleNote.story = {
name: 'Simple note',
parameters: { notes: 'My notes on some bold text' },
};
-export const noteWithHtml = () => (
+export const NoteWithHtml = () => (
🤔😳😯😮
);
-noteWithHtml.story = {
+NoteWithHtml.story = {
name: 'Note with HTML',
parameters: {
diff --git a/examples/preact-kitchen-sink/src/stories/button.stories.js b/examples/preact-kitchen-sink/src/stories/button.stories.js
index 0cac539b8ec..8bdbbad0b38 100644
--- a/examples/preact-kitchen-sink/src/stories/button.stories.js
+++ b/examples/preact-kitchen-sink/src/stories/button.stories.js
@@ -10,13 +10,13 @@ export default {
component: Button,
};
-export const withText = () => Hello Button ;
+export const WithText = () => Hello Button ;
-withText.story = {
+WithText.story = {
name: 'with text',
};
-export const withSomeEmoji = () => (
+export const WithSomeEmoji = () => (
😀 😎 👍 💯
@@ -24,6 +24,6 @@ export const withSomeEmoji = () => (
);
-withSomeEmoji.story = {
+WithSomeEmoji.story = {
name: 'with some emoji',
};
diff --git a/examples/preact-kitchen-sink/src/stories/welcome.stories.js b/examples/preact-kitchen-sink/src/stories/welcome.stories.js
index 1a996cfe809..db0487bfc33 100644
--- a/examples/preact-kitchen-sink/src/stories/welcome.stories.js
+++ b/examples/preact-kitchen-sink/src/stories/welcome.stories.js
@@ -12,8 +12,8 @@ export default {
},
};
-export const toStorybook = () => RAX TEXT NODE ;
+export const Basic = () => RAX TEXT NODE ;
-basic.story = {
+Basic.story = {
parameters: { notes: 'super awesome note' },
};
-export const withStyle = () => Styled text ;
+export const WithStyle = () => Styled text ;
-withStyle.story = {
+WithStyle.story = {
name: 'with style',
parameters: {
notes: ' this is a note with emojis 🚀🚀🚀🚀🚀',
},
};
-export const withMarkdown = () => (
+export const WithMarkdown = () => (
😀 😎 👍 💯
@@ -35,7 +35,7 @@ export const withMarkdown = () => (
);
-withMarkdown.story = {
+WithMarkdown.story = {
name: 'with markdown',
parameters: {
notes: {
diff --git a/examples/rax-kitchen-sink/src/stories/addon-actions.stories.js b/examples/rax-kitchen-sink/src/stories/addon-actions.stories.js
index 00496f4718e..28ff6fbd609 100644
--- a/examples/rax-kitchen-sink/src/stories/addon-actions.stories.js
+++ b/examples/rax-kitchen-sink/src/stories/addon-actions.stories.js
@@ -7,17 +7,17 @@ export default {
title: 'Addon/addon-actions',
};
-export const withText = () => (
+export const WithText = () => (
Hello Button
);
-withText.story = {
+WithText.story = {
name: 'with text',
};
-export const withSomeEmoji = () => (
+export const WithSomeEmoji = () => (
😀 😎 👍 💯
@@ -25,6 +25,6 @@ export const withSomeEmoji = () => (
);
-withSomeEmoji.story = {
+WithSomeEmoji.story = {
name: 'with some emoji',
};
diff --git a/examples/rax-kitchen-sink/src/stories/addon-centered.stories.js b/examples/rax-kitchen-sink/src/stories/addon-centered.stories.js
index 2e0eebf1305..8c72523e63f 100644
--- a/examples/rax-kitchen-sink/src/stories/addon-centered.stories.js
+++ b/examples/rax-kitchen-sink/src/stories/addon-centered.stories.js
@@ -8,12 +8,12 @@ export default {
decorators: [Centered],
};
-export const button = () => (
-
+export const Button = () => (
+
BUTTON
-
+
);
-button.story = { name: 'Button' };
+Button.story = { name: 'Button' };
export const app = () => {content} ;
};
-asDynamicVariables.story = {
+AsDynamicVariables.story = {
name: 'as dynamic variables',
};
diff --git a/examples/rax-kitchen-sink/src/stories/addon-notes.stories.js b/examples/rax-kitchen-sink/src/stories/addon-notes.stories.js
index b4b4c85dca1..dfdbf8b90f6 100644
--- a/examples/rax-kitchen-sink/src/stories/addon-notes.stories.js
+++ b/examples/rax-kitchen-sink/src/stories/addon-notes.stories.js
@@ -8,24 +8,24 @@ export default {
decorators: [withNotes],
};
-export const basic = () => RAX TEXT NODE ;
+export const Basic = () => RAX TEXT NODE ;
-basic.story = {
+Basic.story = {
parameters: { notes: 'super awesome note' },
};
-export const withEmojies = () => Styled text ;
+export const WithEmojies = () => Styled text ;
-withEmojies.story = {
+WithEmojies.story = {
name: 'with emojies',
parameters: {
notes: ' this is a note with emojies 🚀🚀🚀🚀🚀',
},
};
-export const withMarkdown = () => 😀 😎 👍 💯 ;
+export const WithMarkdown = () => 😀 😎 👍 💯 ;
-withMarkdown.story = {
+WithMarkdown.story = {
name: 'with markdown',
parameters: {
notes: {
diff --git a/examples/rax-kitchen-sink/src/stories/index.stories.js b/examples/rax-kitchen-sink/src/stories/index.stories.js
index 793c7ddc5ee..1d5ab0e256f 100644
--- a/examples/rax-kitchen-sink/src/stories/index.stories.js
+++ b/examples/rax-kitchen-sink/src/stories/index.stories.js
@@ -7,8 +7,8 @@ export default {
title: 'Basic',
};
-export const welcomeScreen = () =>
@@ -87,6 +87,6 @@ export const xssSafety = () => ({
],
});
-xssSafety.story = {
+XssSafety.story = {
name: 'XSS safety',
};
diff --git a/examples/riot-kitchen-sink/src/stories/addon-links.stories.js b/examples/riot-kitchen-sink/src/stories/addon-links.stories.js
index a372d6a5b46..1f2cd630356 100644
--- a/examples/riot-kitchen-sink/src/stories/addon-links.stories.js
+++ b/examples/riot-kitchen-sink/src/stories/addon-links.stories.js
@@ -8,7 +8,7 @@ export default {
title: 'Addon/Links',
};
-export const goToWelcome = () =>
+export const GoToWelcome = () =>
mount('my-button', {
rounded: true,
content: 'This button links to Welcome',
@@ -16,6 +16,6 @@ export const goToWelcome = () =>
handleClick: linkTo('Welcome', 'Welcome'),
});
-goToWelcome.story = {
+GoToWelcome.story = {
name: 'Go to welcome',
};
diff --git a/examples/riot-kitchen-sink/src/stories/addon-notes.stories.js b/examples/riot-kitchen-sink/src/stories/addon-notes.stories.js
index 1b20fdc4830..cd8f2ad2363 100644
--- a/examples/riot-kitchen-sink/src/stories/addon-notes.stories.js
+++ b/examples/riot-kitchen-sink/src/stories/addon-notes.stories.js
@@ -2,22 +2,22 @@ export default {
title: 'Addon/Notes',
};
-export const simpleNote = () => ({
+export const SimpleNote = () => ({
tags: [
'
Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.
',
],
});
-simpleNote.story = {
+SimpleNote.story = {
name: 'Simple note',
parameters: { notes: 'My notes on some bold text' },
};
-export const noteWithHtml = () => ({
+export const NoteWithHtml = () => ({
tags: ['
'],
});
-noteWithHtml.story = {
+NoteWithHtml.story = {
name: 'Note with HTML',
parameters: {
notes: `
diff --git a/examples/riot-kitchen-sink/src/stories/core.stories.js b/examples/riot-kitchen-sink/src/stories/core.stories.js
index f34fbb36779..769fe3c2983 100644
--- a/examples/riot-kitchen-sink/src/stories/core.stories.js
+++ b/examples/riot-kitchen-sink/src/stories/core.stories.js
@@ -15,9 +15,9 @@ export default {
},
};
-export const passedToStory = ({ parameters: { fileName, ...parameters } }) =>
+export const PassedToStory = ({ parameters: { fileName, ...parameters } }) =>
mount('parameters', { ...parameters, storyParameter });
-passedToStory.story = {
+PassedToStory.story = {
name: 'passed to story',
};
diff --git a/examples/riot-kitchen-sink/src/stories/nested-tags.stories.js b/examples/riot-kitchen-sink/src/stories/nested-tags.stories.js
index f6180cb8689..ab021ebbb88 100644
--- a/examples/riot-kitchen-sink/src/stories/nested-tags.stories.js
+++ b/examples/riot-kitchen-sink/src/stories/nested-tags.stories.js
@@ -8,7 +8,7 @@ export default {
title: 'Story/Nest tags',
};
-export const threeTags = () => ({
+export const ThreeTags = () => ({
tags: [
'
Simple title Simple Content ',
'
',
@@ -16,7 +16,7 @@ export const threeTags = () => ({
],
});
-threeTags.story = {
+ThreeTags.story = {
name: 'Three tags',
};
diff --git a/examples/riot-kitchen-sink/src/stories/story-code.stories.js b/examples/riot-kitchen-sink/src/stories/story-code.stories.js
index 49a3ab6e535..7a06796e7cd 100644
--- a/examples/riot-kitchen-sink/src/stories/story-code.stories.js
+++ b/examples/riot-kitchen-sink/src/stories/story-code.stories.js
@@ -8,33 +8,33 @@ export default {
title: 'Story/How to create a story',
};
-export const builtWithTag = () =>
+export const BuiltWithTag = () =>
tag('test', '
simple test ({ opts.value })
', '', '', () => {}) &&
mount('test', { value: 'with a parameter' });
-builtWithTag.story = {
+BuiltWithTag.story = {
name: 'built with tag',
};
-export const builtAsString = () => ({ tags: ['
simple test
'] });
+export const BuiltAsString = () => ({ tags: ['
simple test
'] });
-builtAsString.story = {
+BuiltAsString.story = {
name: 'built as string',
};
-export const builtFromRawImport = () => simpleTestCompiled;
+export const BuiltFromRawImport = () => simpleTestCompiled;
-builtFromRawImport.story = {
+BuiltFromRawImport.story = {
name: 'built from raw import',
};
-export const builtFromTagsAndTemplate = () => ({
+export const BuiltFromTagsAndTemplate = () => ({
tags: [{ content: SimpleTestRaw, boundAs: 'mustBeUniquePlease' }],
template:
'
',
});
-builtFromTagsAndTemplate.story = {
+BuiltFromTagsAndTemplate.story = {
name: 'built from tags and template',
parameters: {
notes:
@@ -42,7 +42,7 @@ builtFromTagsAndTemplate.story = {
},
};
-export const tagsTemplateAndTagConstructorAtOnce = () => ({
+export const TagsTemplateAndTagConstructorAtOnce = () => ({
tags: [
{
content:
@@ -57,27 +57,27 @@ export const tagsTemplateAndTagConstructorAtOnce = () => ({
},
});
-tagsTemplateAndTagConstructorAtOnce.story = {
+TagsTemplateAndTagConstructorAtOnce.story = {
name: 'tags, template and tagConstructor at once',
};
-export const builtFromThePrecompilation = () => mount('anothertest', {});
+export const BuiltFromThePrecompilation = () => mount('anothertest', {});
-builtFromThePrecompilation.story = {
+BuiltFromThePrecompilation.story = {
name: 'built from the precompilation',
parameters: {
notes: 'WARN, only works in lower case, never upper case with precompiled templates',
},
};
-export const theMountInstructionIsNotNecessary = () => ({ tagName: 'anothertest', opts: {} });
+export const TheMountInstructionIsNotNecessary = () => ({ tagName: 'anothertest', opts: {} });
-theMountInstructionIsNotNecessary.story = {
+TheMountInstructionIsNotNecessary.story = {
name: 'the mount instruction is not necessary',
};
-export const theOptsValueIsNotNecessary = () => ({ tagName: 'anothertest' });
+export const TheOptsValueIsNotNecessary = () => ({ tagName: 'anothertest' });
-theOptsValueIsNotNecessary.story = {
+TheOptsValueIsNotNecessary.story = {
name: 'the opts value is not necessary',
};
diff --git a/examples/standalone-preview/package.json b/examples/standalone-preview/package.json
index 90c3b3fb4c1..e2b3acaba78 100644
--- a/examples/standalone-preview/package.json
+++ b/examples/standalone-preview/package.json
@@ -1,12 +1,12 @@
{
"name": "standalone-preview",
- "version": "5.3.0-beta.1",
+ "version": "5.3.0-beta.3",
"private": true,
"scripts": {
"storybook": "parcel ./storybook.html --port 1337"
},
"devDependencies": {
- "@storybook/react": "5.3.0-beta.1",
+ "@storybook/react": "5.3.0-beta.3",
"parcel": "^1.12.3",
"react": "^16.8.4",
"react-dom": "^16.8.4"
diff --git a/examples/svelte-kitchen-sink/package.json b/examples/svelte-kitchen-sink/package.json
index 93d70acab85..3b53b0f3ecc 100644
--- a/examples/svelte-kitchen-sink/package.json
+++ b/examples/svelte-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "svelte-example",
- "version": "5.3.0-beta.1",
+ "version": "5.3.0-beta.3",
"private": true,
"scripts": {
"build-storybook": "build-storybook -s public",
@@ -10,19 +10,19 @@
"global": "^4.3.2"
},
"devDependencies": {
- "@storybook/addon-a11y": "5.3.0-beta.1",
- "@storybook/addon-actions": "5.3.0-beta.1",
- "@storybook/addon-backgrounds": "5.3.0-beta.1",
- "@storybook/addon-centered": "5.3.0-beta.1",
- "@storybook/addon-knobs": "5.3.0-beta.1",
- "@storybook/addon-links": "5.3.0-beta.1",
- "@storybook/addon-notes": "5.3.0-beta.1",
- "@storybook/addon-options": "5.3.0-beta.1",
- "@storybook/addon-storyshots": "5.3.0-beta.1",
- "@storybook/addon-storysource": "5.3.0-beta.1",
- "@storybook/addon-viewport": "5.3.0-beta.1",
- "@storybook/addons": "5.3.0-beta.1",
- "@storybook/source-loader": "5.3.0-beta.1",
- "@storybook/svelte": "5.3.0-beta.1"
+ "@storybook/addon-a11y": "5.3.0-beta.3",
+ "@storybook/addon-actions": "5.3.0-beta.3",
+ "@storybook/addon-backgrounds": "5.3.0-beta.3",
+ "@storybook/addon-centered": "5.3.0-beta.3",
+ "@storybook/addon-knobs": "5.3.0-beta.3",
+ "@storybook/addon-links": "5.3.0-beta.3",
+ "@storybook/addon-notes": "5.3.0-beta.3",
+ "@storybook/addon-options": "5.3.0-beta.3",
+ "@storybook/addon-storyshots": "5.3.0-beta.3",
+ "@storybook/addon-storysource": "5.3.0-beta.3",
+ "@storybook/addon-viewport": "5.3.0-beta.3",
+ "@storybook/addons": "5.3.0-beta.3",
+ "@storybook/source-loader": "5.3.0-beta.3",
+ "@storybook/svelte": "5.3.0-beta.3"
}
}
diff --git a/examples/svelte-kitchen-sink/src/stories/addon-actions.stories.js b/examples/svelte-kitchen-sink/src/stories/addon-actions.stories.js
index 677b5b94615..1a4ef7f86ee 100644
--- a/examples/svelte-kitchen-sink/src/stories/addon-actions.stories.js
+++ b/examples/svelte-kitchen-sink/src/stories/addon-actions.stories.js
@@ -7,18 +7,18 @@ export default {
title: 'Addon/Actions',
};
-export const actionOnViewMethod = () => ({
+export const ActionOnViewMethod = () => ({
Component: ButtonView,
props: {
click: action('I am logging in the actions tab'),
},
});
-actionOnViewMethod.story = {
+ActionOnViewMethod.story = {
name: 'Action on view method',
};
-export const actionOnComponentMethod = () => ({
+export const ActionOnComponentMethod = () => ({
Component: Button,
props: {
text: 'Custom text',
@@ -28,6 +28,6 @@ export const actionOnComponentMethod = () => ({
},
});
-actionOnComponentMethod.story = {
+ActionOnComponentMethod.story = {
name: 'Action on component method',
};
diff --git a/examples/svelte-kitchen-sink/src/stories/addon-backgrounds.stories.js b/examples/svelte-kitchen-sink/src/stories/addon-backgrounds.stories.js
index 0775af13455..cb1cf110497 100644
--- a/examples/svelte-kitchen-sink/src/stories/addon-backgrounds.stories.js
+++ b/examples/svelte-kitchen-sink/src/stories/addon-backgrounds.stories.js
@@ -10,10 +10,10 @@ export default {
},
};
-export const story1 = () => ({
+export const Story1 = () => ({
Component: ButtonView,
});
-story1.story = {
+Story1.story = {
name: 'story 1',
};
diff --git a/examples/svelte-kitchen-sink/src/stories/addon-centered.stories.js b/examples/svelte-kitchen-sink/src/stories/addon-centered.stories.js
index 0483e8a474a..5f3ea64f595 100644
--- a/examples/svelte-kitchen-sink/src/stories/addon-centered.stories.js
+++ b/examples/svelte-kitchen-sink/src/stories/addon-centered.stories.js
@@ -9,7 +9,7 @@ export default {
decorators: [Centered],
};
-export const rounded = () => ({
+export const Rounded = () => ({
Component: Button,
props: {
rounded: true,
@@ -17,13 +17,13 @@ export const rounded = () => ({
},
});
-export const withAction = () => ({
+export const WithAction = () => ({
Component: Button,
on: {
click: action(`Tell me it ain't so! Centered and with actions! Thanks @ekhaled :)`),
},
});
-withAction.story = {
+WithAction.story = {
name: 'with action',
};
diff --git a/examples/svelte-kitchen-sink/src/stories/addon-links.stories.js b/examples/svelte-kitchen-sink/src/stories/addon-links.stories.js
index ca32c056211..f30478f8cd7 100644
--- a/examples/svelte-kitchen-sink/src/stories/addon-links.stories.js
+++ b/examples/svelte-kitchen-sink/src/stories/addon-links.stories.js
@@ -6,13 +6,13 @@ export default {
title: 'Addon/Links',
};
-export const goToWelcomeView = () => ({
+export const GoToWelcomeView = () => ({
Component: ActionLinkView,
on: {
click: linkTo('Welcome'),
},
});
-goToWelcomeView.story = {
+GoToWelcomeView.story = {
name: 'Go to welcome view',
};
diff --git a/examples/svelte-kitchen-sink/src/stories/addon-notes.stories.js b/examples/svelte-kitchen-sink/src/stories/addon-notes.stories.js
index c998d5c1096..220ac04ad61 100644
--- a/examples/svelte-kitchen-sink/src/stories/addon-notes.stories.js
+++ b/examples/svelte-kitchen-sink/src/stories/addon-notes.stories.js
@@ -4,23 +4,23 @@ export default {
title: 'Addon/Notes',
};
-export const simpleNote = () => ({
+export const SimpleNote = () => ({
Component: ButtonView,
});
-simpleNote.story = {
+SimpleNote.story = {
name: 'Simple note',
parameters: { notes: 'My notes on the [ButtonView](/story/addon-notes--simple-note) component' },
};
-export const noteWithHtml = () => ({
+export const NoteWithHtml = () => ({
Component: ButtonView,
props: {
text: '🤔😳😯😮😄😩😓😱🤓😑😶😊',
},
});
-noteWithHtml.story = {
+NoteWithHtml.story = {
name: 'Note with HTML',
parameters: {
notes: `
diff --git a/examples/svelte-kitchen-sink/src/stories/button.stories.js b/examples/svelte-kitchen-sink/src/stories/button.stories.js
index a68a4d865b1..af0b416d9c2 100644
--- a/examples/svelte-kitchen-sink/src/stories/button.stories.js
+++ b/examples/svelte-kitchen-sink/src/stories/button.stories.js
@@ -4,7 +4,7 @@ export default {
title: 'Button',
};
-export const rounded = () => ({
+export const Rounded = () => ({
Component: ButtonView,
props: {
rounded: true,
@@ -12,7 +12,7 @@ export const rounded = () => ({
},
});
-export const square = () => ({
+export const Square = () => ({
Component: ButtonView,
props: {
rounded: false,
diff --git a/examples/vue-kitchen-sink/package.json b/examples/vue-kitchen-sink/package.json
index b53e1a8c20a..45ec5986d68 100644
--- a/examples/vue-kitchen-sink/package.json
+++ b/examples/vue-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "vue-example",
- "version": "5.3.0-beta.1",
+ "version": "5.3.0-beta.3",
"private": true,
"scripts": {
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
@@ -14,22 +14,22 @@
},
"devDependencies": {
"@babel/core": "^7.3.4",
- "@storybook/addon-a11y": "5.3.0-beta.1",
- "@storybook/addon-actions": "5.3.0-beta.1",
- "@storybook/addon-backgrounds": "5.3.0-beta.1",
- "@storybook/addon-centered": "5.3.0-beta.1",
- "@storybook/addon-contexts": "5.3.0-beta.1",
- "@storybook/addon-docs": "5.3.0-beta.1",
- "@storybook/addon-knobs": "5.3.0-beta.1",
- "@storybook/addon-links": "5.3.0-beta.1",
- "@storybook/addon-notes": "5.3.0-beta.1",
- "@storybook/addon-options": "5.3.0-beta.1",
- "@storybook/addon-storyshots": "5.3.0-beta.1",
- "@storybook/addon-storysource": "5.3.0-beta.1",
- "@storybook/addon-viewport": "5.3.0-beta.1",
- "@storybook/addons": "5.3.0-beta.1",
- "@storybook/source-loader": "5.3.0-beta.1",
- "@storybook/vue": "5.3.0-beta.1",
+ "@storybook/addon-a11y": "5.3.0-beta.3",
+ "@storybook/addon-actions": "5.3.0-beta.3",
+ "@storybook/addon-backgrounds": "5.3.0-beta.3",
+ "@storybook/addon-centered": "5.3.0-beta.3",
+ "@storybook/addon-contexts": "5.3.0-beta.3",
+ "@storybook/addon-docs": "5.3.0-beta.3",
+ "@storybook/addon-knobs": "5.3.0-beta.3",
+ "@storybook/addon-links": "5.3.0-beta.3",
+ "@storybook/addon-notes": "5.3.0-beta.3",
+ "@storybook/addon-options": "5.3.0-beta.3",
+ "@storybook/addon-storyshots": "5.3.0-beta.3",
+ "@storybook/addon-storysource": "5.3.0-beta.3",
+ "@storybook/addon-viewport": "5.3.0-beta.3",
+ "@storybook/addons": "5.3.0-beta.3",
+ "@storybook/source-loader": "5.3.0-beta.3",
+ "@storybook/vue": "5.3.0-beta.3",
"babel-core": "^7.0.0-bridge.0",
"babel-loader": "^8.0.5",
"cross-env": "^6.0.3",
diff --git a/examples/vue-kitchen-sink/src/stories/addon-actions.stories.js b/examples/vue-kitchen-sink/src/stories/addon-actions.stories.js
index a114a82731e..1cd29f08fd9 100644
--- a/examples/vue-kitchen-sink/src/stories/addon-actions.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/addon-actions.stories.js
@@ -4,38 +4,38 @@ export default {
title: 'Addon/Actions',
};
-export const actionOnly = () => ({
+export const ActionOnly = () => ({
template: '
Click me to log the action ',
methods: {
log: action('log1'),
},
});
-actionOnly.story = {
+ActionOnly.story = {
name: 'Action only',
};
-export const multipleActions = () => ({
+export const MultipleActions = () => ({
template:
'
(Double) click me to log the action ',
methods: actions('click', 'doubleclick'),
});
-multipleActions.story = {
+MultipleActions.story = {
name: 'Multiple actions',
};
-export const multipleActionsObject = () => ({
+export const MultipleActionsObject = () => ({
template:
'
(Double) click me to log the action ',
methods: actions({ click: 'clicked', doubleclick: 'double clicked' }),
});
-multipleActionsObject.story = {
+MultipleActionsObject.story = {
name: 'Multiple actions, object',
};
-export const actionAndMethod = () => ({
+export const ActionAndMethod = () => ({
template: '
Click me to log the action ',
methods: {
log: e => {
@@ -45,6 +45,6 @@ export const actionAndMethod = () => ({
},
});
-actionAndMethod.story = {
+ActionAndMethod.story = {
name: 'Action and method',
};
diff --git a/examples/vue-kitchen-sink/src/stories/addon-backgrounds.stories.js b/examples/vue-kitchen-sink/src/stories/addon-backgrounds.stories.js
index edc6d502831..1d5ac7f8b10 100644
--- a/examples/vue-kitchen-sink/src/stories/addon-backgrounds.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/addon-backgrounds.stories.js
@@ -8,7 +8,7 @@ export default {
},
};
-export const story1 = () => {
+export const Story1 = () => {
const content = 'You should be able to switch backgrounds for this story';
return {
@@ -16,11 +16,11 @@ export const story1 = () => {
};
};
-story1.story = {
+Story1.story = {
name: 'story 1',
};
-export const story2 = () => {
+export const Story2 = () => {
const content = 'This one too!';
return {
@@ -28,6 +28,6 @@ export const story2 = () => {
};
};
-story2.story = {
+Story2.story = {
name: 'story 2',
};
diff --git a/examples/vue-kitchen-sink/src/stories/addon-centered.stories.js b/examples/vue-kitchen-sink/src/stories/addon-centered.stories.js
index 80606538218..3731b6be3a4 100644
--- a/examples/vue-kitchen-sink/src/stories/addon-centered.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/addon-centered.stories.js
@@ -8,7 +8,7 @@ export default {
decorators: [Centered],
};
-export const rounded = () => ({
+export const Rounded = () => ({
components: { MyButton },
template: '
A Button with rounded edges ',
});
diff --git a/examples/vue-kitchen-sink/src/stories/addon-contexts.stories.js b/examples/vue-kitchen-sink/src/stories/addon-contexts.stories.js
index 91948751072..744bb725f43 100644
--- a/examples/vue-kitchen-sink/src/stories/addon-contexts.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/addon-contexts.stories.js
@@ -43,11 +43,11 @@ export default {
decorators: [withContexts(topLevelContexts)],
};
-export const simpleCssTheming = () => ({
+export const SimpleCssTheming = () => ({
template: "
I'm a children of the injected 'div' (where provides a theming context). ",
});
-simpleCssTheming.story = {
+SimpleCssTheming.story = {
name: 'Simple CSS Theming',
parameters: {
contexts: storyLevelContexts,
diff --git a/examples/vue-kitchen-sink/src/stories/addon-knobs.stories.js b/examples/vue-kitchen-sink/src/stories/addon-knobs.stories.js
index 79f6c67f3e9..e1993bf7ac8 100644
--- a/examples/vue-kitchen-sink/src/stories/addon-knobs.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/addon-knobs.stories.js
@@ -39,7 +39,7 @@ export const Simple = () => ({
},
});
-export const allKnobs = () => {
+export const AllKnobs = () => {
const fruits = {
Apple: 'apples',
Banana: 'bananas',
@@ -104,17 +104,17 @@ export const allKnobs = () => {
};
};
-allKnobs.story = {
+AllKnobs.story = {
name: 'All knobs',
};
-export const xssSafety = () => ({
+export const XssSafety = () => ({
props: {
text: { default: text('Rendered string', '
') },
},
template: '
',
});
-xssSafety.story = {
+XssSafety.story = {
name: 'XSS safety',
};
diff --git a/examples/vue-kitchen-sink/src/stories/addon-links.stories.js b/examples/vue-kitchen-sink/src/stories/addon-links.stories.js
index 6ad80aeb3c7..a0ea152465a 100644
--- a/examples/vue-kitchen-sink/src/stories/addon-links.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/addon-links.stories.js
@@ -4,13 +4,13 @@ export default {
title: 'Addon/Links',
};
-export const goToWelcome = () => ({
+export const GoToWelcome = () => ({
template: '
This buttons links to Welcome ',
methods: {
click: linkTo('Welcome'),
},
});
-goToWelcome.story = {
+GoToWelcome.story = {
name: 'Go to welcome',
};
diff --git a/examples/vue-kitchen-sink/src/stories/addon-notes.stories.js b/examples/vue-kitchen-sink/src/stories/addon-notes.stories.js
index 70a17d3e825..809d459a88c 100644
--- a/examples/vue-kitchen-sink/src/stories/addon-notes.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/addon-notes.stories.js
@@ -2,21 +2,21 @@ export default {
title: 'Addon/Notes',
};
-export const simpleNote = () => ({
+export const SimpleNote = () => ({
template:
'
Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.
',
});
-simpleNote.story = {
+SimpleNote.story = {
name: 'Simple note',
parameters: { notes: 'My notes on some bold text' },
};
-export const noteWithHtml = () => ({
+export const NoteWithHtml = () => ({
template: '
🤔😳😯😮
',
});
-noteWithHtml.story = {
+NoteWithHtml.story = {
name: 'Note with HTML',
parameters: {
diff --git a/examples/vue-kitchen-sink/src/stories/components/button.stories.js b/examples/vue-kitchen-sink/src/stories/components/button.stories.js
index 4bbbe2ba50a..13b3ff4eb0b 100644
--- a/examples/vue-kitchen-sink/src/stories/components/button.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/components/button.stories.js
@@ -5,12 +5,12 @@ export default {
component: MyButton,
};
-export const rounded = () => ({
+export const Rounded = () => ({
components: { MyButton },
template: '
A Button with rounded edges ',
});
-export const square = () => ({
+export const Square = () => ({
components: { MyButton },
template: '
A Button with square edges ',
});
diff --git a/examples/vue-kitchen-sink/src/stories/components/info-button.stories.js b/examples/vue-kitchen-sink/src/stories/components/info-button.stories.js
index fb62af728e0..fba6f26201e 100644
--- a/examples/vue-kitchen-sink/src/stories/components/info-button.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/components/info-button.stories.js
@@ -5,7 +5,7 @@ export default {
component: InfoButton,
};
-export const simple = () => ({
+export const Simple = () => ({
components: { InfoButton },
template: '
',
});
diff --git a/examples/vue-kitchen-sink/src/stories/core-errors.stories.js b/examples/vue-kitchen-sink/src/stories/core-errors.stories.js
index a1c0d9973f6..719a72a1a8d 100644
--- a/examples/vue-kitchen-sink/src/stories/core-errors.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/core-errors.stories.js
@@ -2,9 +2,9 @@ export default {
title: 'Core/Errors',
};
-export const throwsError = () => {
+export const ThrowsError = () => {
throw new Error('foo');
};
-throwsError.story = { parameters: { storyshots: { disable: true } } };
+ThrowsError.story = { parameters: { storyshots: { disable: true } } };
-export const nullError = () => null;
+export const NullError = () => null;
diff --git a/examples/vue-kitchen-sink/src/stories/core-template.stories.js b/examples/vue-kitchen-sink/src/stories/core-template.stories.js
index 3a18393d907..51168bb7673 100644
--- a/examples/vue-kitchen-sink/src/stories/core-template.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/core-template.stories.js
@@ -2,9 +2,9 @@ export default {
title: 'Core/Template',
};
-export const stringOnly = () =>
+export const StringOnly = () =>
'
A Button with square edges ';
-stringOnly.story = {
+StringOnly.story = {
name: 'string only',
};
diff --git a/examples/vue-kitchen-sink/src/stories/core.stories.js b/examples/vue-kitchen-sink/src/stories/core.stories.js
index 8876d7bc2e8..fbb1f7942be 100644
--- a/examples/vue-kitchen-sink/src/stories/core.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/core.stories.js
@@ -13,11 +13,11 @@ export default {
},
};
-export const passedToStory = ({ parameters: { fileName, ...parameters } }) => ({
+export const PassedToStory = ({ parameters: { fileName, ...parameters } }) => ({
template: `
Parameters are ${JSON.stringify(parameters)}
`,
});
-passedToStory.story = {
+PassedToStory.story = {
name: 'passed to story',
parameters: {
diff --git a/examples/vue-kitchen-sink/src/stories/custom-decorators.stories.js b/examples/vue-kitchen-sink/src/stories/custom-decorators.stories.js
index cf923e50136..0fbdfc039b3 100644
--- a/examples/vue-kitchen-sink/src/stories/custom-decorators.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/custom-decorators.stories.js
@@ -26,15 +26,15 @@ export default {
],
};
-export const template = () => ({
+export const Template = () => ({
template: '
MyButton with template ',
});
-export const withData = ({ parameters: { fileName, ...parameters }, hooks, ...rest }) => ({
+export const WithData = ({ parameters: { fileName, ...parameters }, hooks, ...rest }) => ({
template: `
${JSON.stringify({ ...rest, parameters }, null, 2)} `,
});
-export const render = () => ({
+export const Render = () => ({
render(h) {
return h(MyButton, { props: { color: 'pink' } }, ['renders component: MyButton']);
},
diff --git a/examples/vue-kitchen-sink/src/stories/custom-rendering.stories.js b/examples/vue-kitchen-sink/src/stories/custom-rendering.stories.js
index 9ecdc5222b6..181b1036612 100644
--- a/examples/vue-kitchen-sink/src/stories/custom-rendering.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/custom-rendering.stories.js
@@ -8,21 +8,21 @@ export default {
title: 'Custom/Method for rendering Vue',
};
-export const render = () => ({
+export const Render = () => ({
render: h => h('div', ['renders a div with some text in it..']),
});
-export const renderComponent = () => ({
+export const RenderComponent = () => ({
render(h) {
return h(MyButton, { props: { color: 'pink' } }, ['renders component: MyButton']);
},
});
-renderComponent.story = {
+RenderComponent.story = {
name: 'render + component',
};
-export const template = () => ({
+export const Template = () => ({
template: `
A template
@@ -30,16 +30,16 @@ export const template = () => ({
`,
});
-export const templateComponent = () => ({
+export const TemplateComponent = () => ({
components: { MyButton },
template: '
MyButton rendered in a template ',
});
-templateComponent.story = {
+TemplateComponent.story = {
name: 'template + component',
};
-export const templateMethods = () => ({
+export const TemplateMethods = () => ({
components: { MyButton },
template: `
@@ -51,7 +51,7 @@ export const templateMethods = () => ({
},
});
-templateMethods.story = {
+TemplateMethods.story = {
name: 'template + methods',
};
@@ -63,7 +63,7 @@ export const JSX = () => ({
},
});
-export const vuexActions = () => ({
+export const VuexActions = () => ({
components: { MyButton },
template: 'with vuex: {{ $store.state.count }} ',
store: new Vuex.Store({
@@ -82,11 +82,11 @@ export const vuexActions = () => ({
},
});
-vuexActions.story = {
+VuexActions.story = {
name: 'vuex + actions',
};
-export const whateverYouWant = () => ({
+export const WhateverYouWant = () => ({
components: { MyButton },
template: 'with awesomeness: {{ $store.state.count }} ',
store: new Vuex.Store({
@@ -105,11 +105,11 @@ export const whateverYouWant = () => ({
},
});
-whateverYouWant.story = {
+WhateverYouWant.story = {
name: 'whatever you want',
};
-export const preRegisteredComponent = () => ({
+export const PreRegisteredComponent = () => ({
/* By pre-registering component in config.js,
* the need to register all components with each story is removed.
* You'll only need the template */
@@ -120,6 +120,6 @@ export const preRegisteredComponent = () => ({
`,
});
-preRegisteredComponent.story = {
+PreRegisteredComponent.story = {
name: 'pre-registered component',
};
diff --git a/examples/web-components-kitchen-sink/.storybook/presets.js b/examples/web-components-kitchen-sink/.storybook/presets.js
index ab5a5ef37d9..a04174c7a33 100644
--- a/examples/web-components-kitchen-sink/.storybook/presets.js
+++ b/examples/web-components-kitchen-sink/.storybook/presets.js
@@ -1 +1 @@
-module.exports = ['@storybook/addon-docs/web-components/preset'];
+module.exports = ['@storybook/addon-docs/preset'];
diff --git a/examples/web-components-kitchen-sink/package.json b/examples/web-components-kitchen-sink/package.json
index 300c260248d..b78b8149fd4 100644
--- a/examples/web-components-kitchen-sink/package.json
+++ b/examples/web-components-kitchen-sink/package.json
@@ -1,6 +1,6 @@
{
"name": "web-components-kitchen-sink",
- "version": "5.3.0-beta.1",
+ "version": "5.3.0-beta.3",
"private": true,
"description": "",
"keywords": [],
@@ -12,26 +12,26 @@
"storybook": "start-storybook -p 9006"
},
"devDependencies": {
- "@storybook/addon-a11y": "5.3.0-beta.1",
- "@storybook/addon-actions": "5.3.0-beta.1",
- "@storybook/addon-backgrounds": "5.3.0-beta.1",
- "@storybook/addon-centered": "5.3.0-beta.1",
- "@storybook/addon-docs": "5.3.0-beta.1",
- "@storybook/addon-events": "5.3.0-beta.1",
- "@storybook/addon-jest": "5.3.0-beta.1",
- "@storybook/addon-knobs": "5.3.0-beta.1",
- "@storybook/addon-links": "5.3.0-beta.1",
- "@storybook/addon-notes": "5.3.0-beta.1",
- "@storybook/addon-options": "5.3.0-beta.1",
- "@storybook/addon-storyshots": "5.3.0-beta.1",
- "@storybook/addon-storysource": "5.3.0-beta.1",
- "@storybook/addon-viewport": "5.3.0-beta.1",
- "@storybook/addons": "5.3.0-beta.1",
- "@storybook/client-api": "5.3.0-beta.1",
- "@storybook/core": "5.3.0-beta.1",
- "@storybook/core-events": "5.3.0-beta.1",
- "@storybook/source-loader": "5.3.0-beta.1",
- "@storybook/web-components": "5.3.0-beta.1",
+ "@storybook/addon-a11y": "5.3.0-beta.3",
+ "@storybook/addon-actions": "5.3.0-beta.3",
+ "@storybook/addon-backgrounds": "5.3.0-beta.3",
+ "@storybook/addon-centered": "5.3.0-beta.3",
+ "@storybook/addon-docs": "5.3.0-beta.3",
+ "@storybook/addon-events": "5.3.0-beta.3",
+ "@storybook/addon-jest": "5.3.0-beta.3",
+ "@storybook/addon-knobs": "5.3.0-beta.3",
+ "@storybook/addon-links": "5.3.0-beta.3",
+ "@storybook/addon-notes": "5.3.0-beta.3",
+ "@storybook/addon-options": "5.3.0-beta.3",
+ "@storybook/addon-storyshots": "5.3.0-beta.3",
+ "@storybook/addon-storysource": "5.3.0-beta.3",
+ "@storybook/addon-viewport": "5.3.0-beta.3",
+ "@storybook/addons": "5.3.0-beta.3",
+ "@storybook/client-api": "5.3.0-beta.3",
+ "@storybook/core": "5.3.0-beta.3",
+ "@storybook/core-events": "5.3.0-beta.3",
+ "@storybook/source-loader": "5.3.0-beta.3",
+ "@storybook/web-components": "5.3.0-beta.3",
"babel-loader": "^8.0.5",
"eventemitter3": "^4.0.0",
"format-json": "^1.0.3",
diff --git a/examples/web-components-kitchen-sink/stories/addon-a11y.stories.js b/examples/web-components-kitchen-sink/stories/addon-a11y.stories.js
index 385bcfa94da..ebbacd65298 100644
--- a/examples/web-components-kitchen-sink/stories/addon-a11y.stories.js
+++ b/examples/web-components-kitchen-sink/stories/addon-a11y.stories.js
@@ -21,16 +21,16 @@ export const Label = () => html`
export const Disabled = () => html`
${text}
`;
-export const story4 = () => html`
+export const Story4 = () => html`
${text}
`;
-story4.story = { name: 'Invalid contrast' };
+Story4.story = { name: 'Invalid contrast' };
-export const story5 = () => {
+export const Story5 = () => {
const div = document.createElement('div');
setTimeout(() => {
div.innerHTML = `
This button has a delayed render of 1s `;
}, 1000);
return div;
};
-story5.story = { name: 'Delayed render' };
+Story5.story = { name: 'Delayed render' };
diff --git a/examples/web-components-kitchen-sink/stories/addon-actions.stories.js b/examples/web-components-kitchen-sink/stories/addon-actions.stories.js
index 5f90a868626..0831b7ab632 100644
--- a/examples/web-components-kitchen-sink/stories/addon-actions.stories.js
+++ b/examples/web-components-kitchen-sink/stories/addon-actions.stories.js
@@ -11,19 +11,19 @@ export default {
title: 'Addons/Actions',
};
-export const story1 = () => withActions('click')(button);
-story1.story = { name: 'Hello World' };
-export const story2 = () => withActions('click', 'contextmenu')(button);
-story2.story = { name: 'Multiple actions' };
+export const Story1 = () => withActions('click')(button);
+Story1.story = { name: 'Hello World' };
+export const Story2 = () => withActions('click', 'contextmenu')(button);
+Story2.story = { name: 'Multiple actions' };
-export const story3 = () =>
+export const Story3 = () =>
withActions('click', 'contextmenu', { clearOnStoryChange: false })(button);
-story3.story = { name: 'Multiple actions + config' };
+Story3.story = { name: 'Multiple actions + config' };
-export const story4 = () => withActions({ click: 'clicked', contextmenu: 'right clicked' })(button);
-story4.story = { name: 'Multiple actions, object' };
+export const Story4 = () => withActions({ click: 'clicked', contextmenu: 'right clicked' })(button);
+Story4.story = { name: 'Multiple actions, object' };
-export const story5 = () =>
+export const Story5 = () =>
withActions({ 'click .btn': 'clicked', contextmenu: 'right clicked' })(
() => html`
@@ -31,18 +31,18 @@ export const story5 = () =>
`
);
-story5.story = { name: 'Multiple actions, selector' };
+Story5.story = { name: 'Multiple actions, selector' };
-export const story6 = () =>
+export const Story6 = () =>
withActions(
{ click: 'clicked', contextmenu: 'right clicked' },
{ clearOnStoryChange: false }
)(button);
-story6.story = { name: 'Multiple actions, object + config' };
+Story6.story = { name: 'Multiple actions, object + config' };
-export const story7 = () => pickTarget.withActions('click', 'contextmenu')(button);
-story7.story = { name: 'Decorated actions' };
+export const Story7 = () => pickTarget.withActions('click', 'contextmenu')(button);
+Story7.story = { name: 'Decorated actions' };
-export const story8 = () =>
+export const Story8 = () =>
pickTarget.withActions('click', 'contextmenu', { clearOnStoryChange: false })(button);
-story8.story = { name: 'Decorated actions + config' };
+Story8.story = { name: 'Decorated actions + config' };
diff --git a/examples/web-components-kitchen-sink/stories/addon-backgrounds.stories.js b/examples/web-components-kitchen-sink/stories/addon-backgrounds.stories.js
index b4951dd8854..881637bf133 100644
--- a/examples/web-components-kitchen-sink/stories/addon-backgrounds.stories.js
+++ b/examples/web-components-kitchen-sink/stories/addon-backgrounds.stories.js
@@ -12,12 +12,12 @@ export default {
},
};
-export const story1 = () => html`
+export const Story1 = () => html`
You should be able to switch backgrounds for this story
`;
-story1.story = { name: 'story 1' };
+Story1.story = { name: 'story 1' };
-export const story2 = () => html`
+export const Story2 = () => html`
This one too!
`;
-story2.story = { name: 'story 2' };
+Story2.story = { name: 'story 2' };
diff --git a/examples/web-components-kitchen-sink/stories/addon-knobs.stories.js b/examples/web-components-kitchen-sink/stories/addon-knobs.stories.js
index c4f06119dca..82b88b22546 100644
--- a/examples/web-components-kitchen-sink/stories/addon-knobs.stories.js
+++ b/examples/web-components-kitchen-sink/stories/addon-knobs.stories.js
@@ -30,7 +30,7 @@ export const Simple = () => {
`;
};
-export const story3 = () => {
+export const Story3 = () => {
const header = text('header', 'Power Ranger');
const textColor = color('Text color', 'orangered');
return html`
@@ -44,9 +44,9 @@ export const story3 = () => {
`;
};
-story3.story = { name: 'Color Selection' };
+Story3.story = { name: 'Color Selection' };
-export const story4 = () => {
+export const Story4 = () => {
const name = text('Name', 'Jane');
const stock = number('Stock', 20, {
range: true,
@@ -94,7 +94,7 @@ export const story4 = () => {
Welcome to Storybook!
@@ -17,6 +17,6 @@ export const toStorybook = () => ({
},
});
-toStorybook.story = {
+ToStorybook.story = {
name: 'to Storybook',
};
diff --git a/lib/cli/generators/EMBER/template-csf/stories/1-Button.stories.js b/lib/cli/generators/EMBER/template-csf/stories/1-Button.stories.js
index 44d70a9c2fd..c8cd39a3425 100644
--- a/lib/cli/generators/EMBER/template-csf/stories/1-Button.stories.js
+++ b/lib/cli/generators/EMBER/template-csf/stories/1-Button.stories.js
@@ -5,14 +5,14 @@ export default {
title: 'Button',
};
-export const text = () => ({
+export const Text = () => ({
template: hbs`
Hello Button `,
context: {
onClick: action('clicked'),
},
});
-export const emoji = () => ({
+export const Emoji = () => ({
template: hbs`
diff --git a/lib/cli/generators/HTML/template-csf/stories/index.stories.js b/lib/cli/generators/HTML/template-csf/stories/index.stories.js
index 2ce3f82341d..7d4bd3351c8 100644
--- a/lib/cli/generators/HTML/template-csf/stories/index.stories.js
+++ b/lib/cli/generators/HTML/template-csf/stories/index.stories.js
@@ -2,9 +2,9 @@ export default {
title: 'Demo',
};
-export const heading = () => 'Hello World ';
+export const Heading = () => 'Hello World ';
-export const button = () => {
+export const Button = () => {
const btn = document.createElement('button');
btn.type = 'button';
btn.innerText = 'Hello Button';
diff --git a/lib/cli/generators/METEOR/template-csf/stories/0-Welcome.stories.js b/lib/cli/generators/METEOR/template-csf/stories/0-Welcome.stories.js
index fa267f24c31..c76f45f3b4b 100644
--- a/lib/cli/generators/METEOR/template-csf/stories/0-Welcome.stories.js
+++ b/lib/cli/generators/METEOR/template-csf/stories/0-Welcome.stories.js
@@ -7,8 +7,8 @@ export default {
component: Welcome,
};
-export const toStorybook = () => Hello Button ;
+export const Text = () => Hello Button ;
-export const emoji = () => (
+export const Emoji = () => (
😀 😎 👍 💯
diff --git a/lib/cli/generators/MITHRIL/template-csf/stories/0-Welcome.stories.js b/lib/cli/generators/MITHRIL/template-csf/stories/0-Welcome.stories.js
index 3514edb1c9b..3805e37c73c 100644
--- a/lib/cli/generators/MITHRIL/template-csf/stories/0-Welcome.stories.js
+++ b/lib/cli/generators/MITHRIL/template-csf/stories/0-Welcome.stories.js
@@ -7,10 +7,10 @@ export default {
component: Welcome,
};
-export const toStorybook = () => ({
+export const ToStorybook = () => ({
view: () => m(Welcome, { showApp: linkTo('Button') }),
});
-toStorybook.story = {
+ToStorybook.story = {
name: 'to Storybook',
};
diff --git a/lib/cli/generators/MITHRIL/template-csf/stories/1-Button.stories.js b/lib/cli/generators/MITHRIL/template-csf/stories/1-Button.stories.js
index 770c8b9d95f..c6d192dc23f 100644
--- a/lib/cli/generators/MITHRIL/template-csf/stories/1-Button.stories.js
+++ b/lib/cli/generators/MITHRIL/template-csf/stories/1-Button.stories.js
@@ -7,11 +7,11 @@ export default {
component: Button,
};
-export const text = () => ({
+export const Text = () => ({
view: () => m(Button, { onclick: action('clicked') }, 'Hello Button'),
});
-export const emoji = () => ({
+export const Emoji = () => ({
view: () =>
m(
Button,
diff --git a/lib/cli/generators/PREACT/template-csf/stories/0-Welcome.stories.js b/lib/cli/generators/PREACT/template-csf/stories/0-Welcome.stories.js
index 03442e51b92..94e96aca4bc 100644
--- a/lib/cli/generators/PREACT/template-csf/stories/0-Welcome.stories.js
+++ b/lib/cli/generators/PREACT/template-csf/stories/0-Welcome.stories.js
@@ -9,8 +9,8 @@ export default {
component: Welcome,
};
-export const toStorybook = () => Hello Button ;
+export const Text = () => Hello Button ;
-export const emoji = () => (
+export const Emoji = () => (
😀 😎 👍 💯
diff --git a/lib/cli/generators/RAX/template-csf/stories/0-Welcome.stories.js b/lib/cli/generators/RAX/template-csf/stories/0-Welcome.stories.js
index 7f3dddec5d4..36caa134ee4 100644
--- a/lib/cli/generators/RAX/template-csf/stories/0-Welcome.stories.js
+++ b/lib/cli/generators/RAX/template-csf/stories/0-Welcome.stories.js
@@ -8,8 +8,8 @@ export default {
component: Welcome,
};
-export const toStorybook = () =>
);
-export const emoji = () => (
+export const Emoji = () => (
😀 😎 👍 💯
diff --git a/lib/cli/generators/REACT/template-csf/stories/0-Welcome.stories.js b/lib/cli/generators/REACT/template-csf/stories/0-Welcome.stories.js
index fa267f24c31..c76f45f3b4b 100644
--- a/lib/cli/generators/REACT/template-csf/stories/0-Welcome.stories.js
+++ b/lib/cli/generators/REACT/template-csf/stories/0-Welcome.stories.js
@@ -7,8 +7,8 @@ export default {
component: Welcome,
};
-export const toStorybook = () => Hello Button ;
+export const Text = () => Hello Button ;
-export const emoji = () => (
+export const Emoji = () => (
😀 😎 👍 💯
diff --git a/lib/cli/generators/REACT_SCRIPTS/template-csf-ts/src/stories/0-Welcome.stories.tsx b/lib/cli/generators/REACT_SCRIPTS/template-csf-ts/src/stories/0-Welcome.stories.tsx
index fa267f24c31..c76f45f3b4b 100644
--- a/lib/cli/generators/REACT_SCRIPTS/template-csf-ts/src/stories/0-Welcome.stories.tsx
+++ b/lib/cli/generators/REACT_SCRIPTS/template-csf-ts/src/stories/0-Welcome.stories.tsx
@@ -7,8 +7,8 @@ export default {
component: Welcome,
};
-export const toStorybook = () => Hello Button ;
+export const Text = () => Hello Button ;
-export const emoji = () => (
+export const Emoji = () => (
😀 😎 👍 💯
diff --git a/lib/cli/generators/REACT_SCRIPTS/template-csf/src/stories/0-Welcome.stories.js b/lib/cli/generators/REACT_SCRIPTS/template-csf/src/stories/0-Welcome.stories.js
index fa267f24c31..c76f45f3b4b 100644
--- a/lib/cli/generators/REACT_SCRIPTS/template-csf/src/stories/0-Welcome.stories.js
+++ b/lib/cli/generators/REACT_SCRIPTS/template-csf/src/stories/0-Welcome.stories.js
@@ -7,8 +7,8 @@ export default {
component: Welcome,
};
-export const toStorybook = () => Hello Button ;
+export const Text = () => Hello Button ;
-export const emoji = () => (
+export const Emoji = () => (
😀 😎 👍 💯
diff --git a/lib/cli/generators/RIOT/template-csf/stories/0-Welcome.stories.js b/lib/cli/generators/RIOT/template-csf/stories/0-Welcome.stories.js
index aa73a890514..87952621919 100644
--- a/lib/cli/generators/RIOT/template-csf/stories/0-Welcome.stories.js
+++ b/lib/cli/generators/RIOT/template-csf/stories/0-Welcome.stories.js
@@ -7,8 +7,8 @@ export default {
title: 'Welcome',
};
-export const toStorybook = () => mount('welcome', { showApp: () => linkTo('Button') });
+export const ToStorybook = () => mount('welcome', { showApp: () => linkTo('Button') });
-toStorybook.story = {
+ToStorybook.story = {
name: 'to Storybook',
};
diff --git a/lib/cli/generators/RIOT/template-csf/stories/1-Button.stories.js b/lib/cli/generators/RIOT/template-csf/stories/1-Button.stories.js
index b4e02649a85..211af792c39 100644
--- a/lib/cli/generators/RIOT/template-csf/stories/1-Button.stories.js
+++ b/lib/cli/generators/RIOT/template-csf/stories/1-Button.stories.js
@@ -8,15 +8,15 @@ export default {
title: 'Button',
};
-export const text = () => ({
+export const Text = () => ({
tags: ['Hello Button '],
});
-export const scenario = () => ({
+export const Scenario = () => ({
tags: [{ content: MyButtonRaw, boundAs: 'MyButton' }],
template: 'With scenario ',
});
-export const emoji = () => ({
+export const Emoji = () => ({
tags: ['😀 😎 👍 💯 '],
});
diff --git a/lib/cli/generators/SFC_VUE/template-csf/src/stories/0-Welcome.stories.js b/lib/cli/generators/SFC_VUE/template-csf/src/stories/0-Welcome.stories.js
index 6be3fcf848c..cb6e0190695 100644
--- a/lib/cli/generators/SFC_VUE/template-csf/src/stories/0-Welcome.stories.js
+++ b/lib/cli/generators/SFC_VUE/template-csf/src/stories/0-Welcome.stories.js
@@ -7,12 +7,12 @@ export default {
component: Welcome,
};
-export const toStorybook = () => ({
+export const ToStorybook = () => ({
components: { Welcome },
template: 'Hello Button ',
methods: { action: action('clicked') },
});
-export const jsx = () => ({
+export const Jsx = () => ({
components: { MyButton },
render() {
return With JSX ;
@@ -22,7 +22,7 @@ export const jsx = () => ({
methods: { action: linkTo('clicked') },
});
-export const emoji = () => ({
+export const Emoji = () => ({
components: { MyButton },
template:
'😀 😎 👍 💯 Hello Button ',
methods: { action: action('clicked') },
});
-export const jsx = () => ({
+export const Jsx = () => ({
components: { MyButton },
render(h) {
return With JSX ;
@@ -22,7 +22,7 @@ export const jsx = () => ({
methods: { action: linkTo('clicked') },
});
-export const emoji = () => ({
+export const Emoji = () => ({
components: { MyButton },
template: '😀 😎 👍 💯 ',
methods: { action: action('clicked') },
diff --git a/lib/cli/generators/WEB-COMPONENTS/template/stories/index.stories.js b/lib/cli/generators/WEB-COMPONENTS/template/stories/index.stories.js
index 32a3b0cae55..2b9bedb51a1 100644
--- a/lib/cli/generators/WEB-COMPONENTS/template/stories/index.stories.js
+++ b/lib/cli/generators/WEB-COMPONENTS/template/stories/index.stories.js
@@ -6,19 +6,19 @@ export default {
title: 'Demo',
};
-export const heading = () => html`
+export const Heading = () => html`
Hello World
`;
-export const settingProperties = () => html`
+export const SettingProperties = () => html`
Hello World
`;
-export const events = () => html`
+export const Events = () => html`
console.log('clicked button')}>clicking will get logged to console
`;
-export const withFunction = () => {
+export const WithFunction = () => {
const header = 'My Header';
return html`
${header}
diff --git a/lib/cli/generators/WEBPACK_REACT/template-csf/stories/0-Welcome.stories.js b/lib/cli/generators/WEBPACK_REACT/template-csf/stories/0-Welcome.stories.js
index fa267f24c31..c76f45f3b4b 100644
--- a/lib/cli/generators/WEBPACK_REACT/template-csf/stories/0-Welcome.stories.js
+++ b/lib/cli/generators/WEBPACK_REACT/template-csf/stories/0-Welcome.stories.js
@@ -7,8 +7,8 @@ export default {
component: Welcome,
};
-export const toStorybook = () => Hello Button ;
+export const Text = () => Hello Button ;
-export const emoji = () => (
+export const Emoji = () => (
😀 😎 👍 💯
@@ -18,6 +18,6 @@ export const emoji = () => (
);
-emoji.story = {
+Emoji.story = {
name: 'with emoji',
};
diff --git a/lib/cli/package.json b/lib/cli/package.json
index bfb73b6f58b..6d1daa4c29a 100644
--- a/lib/cli/package.json
+++ b/lib/cli/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/cli",
- "version": "5.3.0-beta.1",
+ "version": "5.3.0-beta.3",
"description": "Storybook's CLI - easiest method of adding storybook to your projects",
"keywords": [
"cli",
@@ -38,7 +38,7 @@
"dependencies": {
"@babel/core": "^7.4.5",
"@babel/preset-env": "^7.4.5",
- "@storybook/codemod": "5.3.0-beta.1",
+ "@storybook/codemod": "5.3.0-beta.3",
"chalk": "^3.0.0",
"commander": "^4.0.1",
"core-js": "^3.0.1",
@@ -57,33 +57,33 @@
"update-notifier": "^3.0.0"
},
"devDependencies": {
- "@storybook/addon-actions": "5.3.0-beta.1",
- "@storybook/addon-centered": "5.3.0-beta.1",
- "@storybook/addon-graphql": "5.3.0-beta.1",
- "@storybook/addon-info": "5.3.0-beta.1",
- "@storybook/addon-knobs": "5.3.0-beta.1",
- "@storybook/addon-links": "5.3.0-beta.1",
- "@storybook/addon-notes": "5.3.0-beta.1",
- "@storybook/addon-options": "5.3.0-beta.1",
- "@storybook/addon-storyshots": "5.3.0-beta.1",
- "@storybook/addons": "5.3.0-beta.1",
- "@storybook/angular": "5.3.0-beta.1",
- "@storybook/channel-postmessage": "5.3.0-beta.1",
- "@storybook/channel-websocket": "5.3.0-beta.1",
- "@storybook/channels": "5.3.0-beta.1",
- "@storybook/ember": "5.3.0-beta.1",
- "@storybook/html": "5.3.0-beta.1",
- "@storybook/marko": "5.3.0-beta.1",
- "@storybook/mithril": "5.3.0-beta.1",
- "@storybook/polymer": "5.3.0-beta.1",
- "@storybook/preact": "5.3.0-beta.1",
- "@storybook/rax": "5.3.0-beta.1",
- "@storybook/react": "5.3.0-beta.1",
- "@storybook/react-native": "5.3.0-beta.1",
- "@storybook/riot": "5.3.0-beta.1",
- "@storybook/svelte": "5.3.0-beta.1",
- "@storybook/ui": "5.3.0-beta.1",
- "@storybook/vue": "5.3.0-beta.1"
+ "@storybook/addon-actions": "5.3.0-beta.3",
+ "@storybook/addon-centered": "5.3.0-beta.3",
+ "@storybook/addon-graphql": "5.3.0-beta.3",
+ "@storybook/addon-info": "5.3.0-beta.3",
+ "@storybook/addon-knobs": "5.3.0-beta.3",
+ "@storybook/addon-links": "5.3.0-beta.3",
+ "@storybook/addon-notes": "5.3.0-beta.3",
+ "@storybook/addon-options": "5.3.0-beta.3",
+ "@storybook/addon-storyshots": "5.3.0-beta.3",
+ "@storybook/addons": "5.3.0-beta.3",
+ "@storybook/angular": "5.3.0-beta.3",
+ "@storybook/channel-postmessage": "5.3.0-beta.3",
+ "@storybook/channel-websocket": "5.3.0-beta.3",
+ "@storybook/channels": "5.3.0-beta.3",
+ "@storybook/ember": "5.3.0-beta.3",
+ "@storybook/html": "5.3.0-beta.3",
+ "@storybook/marko": "5.3.0-beta.3",
+ "@storybook/mithril": "5.3.0-beta.3",
+ "@storybook/polymer": "5.3.0-beta.3",
+ "@storybook/preact": "5.3.0-beta.3",
+ "@storybook/rax": "5.3.0-beta.3",
+ "@storybook/react": "5.3.0-beta.3",
+ "@storybook/react-native": "5.3.0-beta.3",
+ "@storybook/riot": "5.3.0-beta.3",
+ "@storybook/svelte": "5.3.0-beta.3",
+ "@storybook/ui": "5.3.0-beta.3",
+ "@storybook/vue": "5.3.0-beta.3"
},
"publishConfig": {
"access": "public"
diff --git a/lib/client-api/package.json b/lib/client-api/package.json
index 7ce421cc17e..1df83ab1113 100644
--- a/lib/client-api/package.json
+++ b/lib/client-api/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/client-api",
- "version": "5.3.0-beta.1",
+ "version": "5.3.0-beta.3",
"description": "Storybook Client API",
"keywords": [
"storybook"
@@ -27,12 +27,12 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.3.0-beta.1",
- "@storybook/channel-postmessage": "5.3.0-beta.1",
- "@storybook/channels": "5.3.0-beta.1",
- "@storybook/client-logger": "5.3.0-beta.1",
- "@storybook/core-events": "5.3.0-beta.1",
- "@storybook/router": "5.3.0-beta.1",
+ "@storybook/addons": "5.3.0-beta.3",
+ "@storybook/channel-postmessage": "5.3.0-beta.3",
+ "@storybook/channels": "5.3.0-beta.3",
+ "@storybook/client-logger": "5.3.0-beta.3",
+ "@storybook/core-events": "5.3.0-beta.3",
+ "@storybook/router": "5.3.0-beta.3",
"core-js": "^3.0.1",
"eventemitter3": "^4.0.0",
"global": "^4.3.2",
diff --git a/lib/client-logger/package.json b/lib/client-logger/package.json
index 23252addb0c..f8defe3dfe4 100644
--- a/lib/client-logger/package.json
+++ b/lib/client-logger/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/client-logger",
- "version": "5.3.0-beta.1",
+ "version": "5.3.0-beta.3",
"description": "",
"keywords": [
"storybook"
diff --git a/lib/codemod/package.json b/lib/codemod/package.json
index acf15fdb178..dee9d758ffb 100644
--- a/lib/codemod/package.json
+++ b/lib/codemod/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/codemod",
- "version": "5.3.0-beta.1",
+ "version": "5.3.0-beta.3",
"description": "A collection of codemod scripts written with JSCodeshift",
"keywords": [
"storybook"
@@ -29,8 +29,8 @@
"dependencies": {
"@hypnosphi/jscodeshift": "^0.6.4",
"@mdx-js/mdx": "^1.0.0",
- "@storybook/node-logger": "5.3.0-beta.1",
- "@storybook/router": "5.3.0-beta.1",
+ "@storybook/node-logger": "5.3.0-beta.3",
+ "@storybook/router": "5.3.0-beta.3",
"core-js": "^3.0.1",
"cross-spawn": "^7.0.0",
"globby": "^10.0.1",
diff --git a/lib/codemod/src/lib/utils.js b/lib/codemod/src/lib/utils.js
index 4d782569a21..c16dd059252 100644
--- a/lib/codemod/src/lib/utils.js
+++ b/lib/codemod/src/lib/utils.js
@@ -1,14 +1,8 @@
import camelCase from 'lodash/camelCase';
-
-const RESERVED = /^(?:do|if|in|for|let|new|try|var|case|else|enum|eval|false|null|this|true|void|with|await|break|catch|class|const|super|throw|while|yield|delete|export|import|public|return|static|switch|typeof|default|extends|finally|package|private|continue|debugger|function|arguments|interface|protected|implements|instanceof)$/;
-
-export const isReserved = name => RESERVED.exec(name);
+import upperFirst from 'lodash/upperFirst';
export const sanitizeName = name => {
- let key = camelCase(name);
- if (isReserved(key)) {
- key = `${key}Story`;
- }
+ let key = upperFirst(camelCase(name));
// prepend _ if name starts with a digit
if (/^\d/.test(key)) {
key = `_${key}`;
diff --git a/lib/codemod/src/lib/utils.test.js b/lib/codemod/src/lib/utils.test.js
index efeffdfb880..588ed7f3ad4 100644
--- a/lib/codemod/src/lib/utils.test.js
+++ b/lib/codemod/src/lib/utils.test.js
@@ -1,14 +1,9 @@
import { sanitizeName } from './utils';
it('should sanitize names', () => {
- const testCases = [
- ['basic', 'basic'],
- ['with space', 'withSpace'],
- ['default', 'defaultStory'],
- ['w/punctuation', 'wPunctuation'],
- ];
- testCases.forEach(testCase => {
- const [input, out] = testCase;
- expect(sanitizeName(input)).toBe(out);
- });
+ expect(sanitizeName('basic')).toMatchInlineSnapshot(`"Basic"`);
+ expect(sanitizeName('with space')).toMatchInlineSnapshot(`"WithSpace"`);
+ expect(sanitizeName('default')).toMatchInlineSnapshot(`"Default"`);
+ expect(sanitizeName('w/punctuation')).toMatchInlineSnapshot(`"WPunctuation"`);
+ expect(sanitizeName('5')).toMatchInlineSnapshot(`"_5"`);
});
diff --git a/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/basic.output.snapshot b/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/basic.output.snapshot
index 62ab723f1bd..8f502e342d3 100644
--- a/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/basic.output.snapshot
+++ b/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/basic.output.snapshot
@@ -9,27 +9,32 @@ export default {
title: 'Button',
};
-export const story1 = () =>
);
-complexStory.story = {
+ComplexStory.story = {
name: 'complex story',
};
-export const wPunctuation = () => {storyFn}
],
};
-export const withDecorator = () =>
);
-complexStory.story = {
+ComplexStory.story = {
name: 'complex story',
};"
`;
diff --git a/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/parameters.output.snapshot b/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/parameters.output.snapshot
index 18f2744d688..95b9c8814b2 100644
--- a/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/parameters.output.snapshot
+++ b/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/parameters.output.snapshot
@@ -15,9 +15,9 @@ export default {
},
};
-export const withKindParameters = () => solo ;
+export const SoloStory = () => solo ;
-soloStory.story = {
+SoloStory.story = {
name: 'solo story',
};"
`;
diff --git a/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/basic.output.snapshot b/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/basic.output.snapshot
index 3e04e63a0db..6b26bc23804 100644
--- a/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/basic.output.snapshot
+++ b/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/basic.output.snapshot
@@ -12,34 +12,34 @@ export default {
title: 'Button',
};
-export const story1 = () =>
);
-complexStory.story = {
+ComplexStory.story = {
name: 'complex story',
};
-export const wPunctuation = () => {storyFn}
],
};
-export const withDecorator = () => {storyFn}
],
};
-export const withStoryDecorators = () =>
@@ -19,49 +19,53 @@ export default {
};
export const withSubtitle = () => (
-
+ <>
+ DocsPage
+
+ What the DocsPage looks like. Meant to be QAed in Canvas tab not in Docs tab.
+
{descriptionStories.text()}
{previewStories.single()}
{propsTableStories.normal()}
{sourceStories.jsx()}
-
+
);
withSubtitle.story = { name: 'with subtitle' };
export const empty = () => (
-
+ <>
{storyStories.error()}
{propsTableStories.error()}
{sourceStories.sourceUnavailable()}
-
+
);
export const noText = () => (
-
+ <>
+ no text
{previewStories.single()}
{propsTableStories.normal()}
{sourceStories.jsx()}
-
+
);
noText.story = { name: 'no text' };
export const text = () => (
-
+ <>
+ Sensorium
{descriptionStories.text()}
{previewStories.single()}
{propsTableStories.normal()}
{sourceStories.jsx()}
-
+
);
export const markdown = () => (
-
+ <>
+ markdown
{descriptionStories.markdown()}
{previewStories.single()}
{propsTableStories.normal()}
{sourceStories.jsx()}
-
+
);
diff --git a/lib/components/src/blocks/DocsPage.tsx b/lib/components/src/blocks/DocsPage.tsx
index c577f9655b8..1ebe37dd185 100644
--- a/lib/components/src/blocks/DocsPage.tsx
+++ b/lib/components/src/blocks/DocsPage.tsx
@@ -2,7 +2,7 @@ import React, { FunctionComponent } from 'react';
import { styled, Theme } from '@storybook/theming';
import { transparentize } from 'polished';
-import { withReset } from '../typography/withReset';
+import { withReset } from '../typography/shared';
const breakpoint = 600;
@@ -11,7 +11,7 @@ export interface DocsPageProps {
subtitle?: string;
}
-const Title = styled.h1<{}>(withReset, ({ theme }: { theme: Theme }) => ({
+export const Title = styled.h1<{}>(withReset, ({ theme }: { theme: Theme }) => ({
color: theme.color.defaultText,
fontSize: theme.typography.size.m3,
fontWeight: theme.typography.weight.black,
@@ -24,7 +24,7 @@ const Title = styled.h1<{}>(withReset, ({ theme }: { theme: Theme }) => ({
},
}));
-const Subtitle = styled.h2<{}>(withReset, ({ theme }: { theme: Theme }) => ({
+export const Subtitle = styled.h2<{}>(withReset, ({ theme }: { theme: Theme }) => ({
fontWeight: theme.typography.weight.regular,
fontSize: theme.typography.size.s3,
lineHeight: '20px',
@@ -62,18 +62,3 @@ export const DocsPageWrapper: FunctionComponent = ({ children }) => (
{children}
);
-
-/**
- * An out-of-the box documentation page for components that shows the
- * title & subtitle and a collection of blocks including `Description`,
- * and `Preview`s for each of the component's stories.
- */
-const DocsPage: FunctionComponent = ({ title, subtitle, children }) => (
- <>
- {title && {title} }
- {subtitle && {subtitle} }
- {children}
-
-);
-
-export { DocsPage };
diff --git a/lib/components/src/blocks/EmptyBlock.tsx b/lib/components/src/blocks/EmptyBlock.tsx
index e5ed7bbafe6..39dba076bd2 100644
--- a/lib/components/src/blocks/EmptyBlock.tsx
+++ b/lib/components/src/blocks/EmptyBlock.tsx
@@ -1,7 +1,7 @@
import React, { FunctionComponent } from 'react';
import { styled } from '@storybook/theming';
import { transparentize } from 'polished';
-import { withReset } from '../typography/withReset';
+import { withReset } from '../typography/shared';
const Wrapper = styled.div<{}>(withReset, ({ theme }) => ({
backgroundColor: theme.base === 'light' ? 'rgba(0,0,0,.01)' : 'rgba(255,255,255,.01)',
diff --git a/lib/components/src/blocks/PropsTable/PropJsDoc.tsx b/lib/components/src/blocks/PropsTable/PropJsDoc.tsx
index 99621a79569..d88cacc18e5 100644
--- a/lib/components/src/blocks/PropsTable/PropJsDoc.tsx
+++ b/lib/components/src/blocks/PropsTable/PropJsDoc.tsx
@@ -2,29 +2,68 @@ import React, { FC } from 'react';
import { styled } from '@storybook/theming';
import { isNil } from 'lodash';
import { JsDocTags } from './PropDef';
+import { codeCommon } from '../../typography/shared';
interface PropJsDocProps {
tags: JsDocTags;
}
-const TBody = styled.tbody({ boxShadow: 'none !important' });
+export const Table = styled.table(({ theme }) => ({
+ '&&': {
+ // Escape default table styles
+ borderCollapse: 'collapse',
+ borderSpacing: 0,
+ border: 'none',
-const Cell = { paddingTop: '0 !important', paddingBottom: '0 !important' };
+ tr: {
+ border: 'none !important',
+ background: 'none',
+ },
-const Name = styled.td({
- ...Cell,
-});
+ 'td, th': {
+ padding: 0,
+ border: 'none',
+ width: 'auto!important',
+ },
+ // End escape
-const Desc = styled.td({
- ...Cell,
- width: 'auto !important',
-});
+ marginTop: '0',
+ marginBottom: '0',
+
+ 'th:first-of-type, td:first-of-type': {
+ paddingLeft: 0,
+ },
+
+ 'th:last-of-type, td:last-of-type': {
+ paddingRight: 0,
+ },
+
+ td: {
+ paddingTop: '0',
+ paddingBottom: '4px',
+
+ '&:not(:first-of-type)': {
+ paddingLeft: 10,
+ paddingRight: 0,
+ },
+ },
+
+ tbody: {
+ boxShadow: 'none',
+ border: 'none',
+ },
+
+ code: codeCommon({ theme }),
+
+ '& code': {
+ lineHeight: '18px',
+ margin: 0,
+ display: 'inline-block',
+ },
+ },
+}));
export const PropJsDoc: FC = ({ tags }) => {
- if (isNil(tags)) {
- return null;
- }
-
const params = (tags.params || []).filter(x => x.description);
const hasDisplayableParams = params.length !== 0;
const hasDisplayableReturns = !isNil(tags.returns) && !isNil(tags.returns.description);
@@ -34,28 +73,28 @@ export const PropJsDoc: FC = ({ tags }) => {
}
return (
-
-
+
+
{hasDisplayableParams &&
params.map(x => {
return (
-
+
{x.name}
-
- {x.description}
+
+ {x.description}
);
})}
{hasDisplayableReturns && (
-
+
Returns
-
- {tags.returns.description}
+
+ {tags.returns.description}
)}
-
-
+
+
);
};
diff --git a/lib/components/src/blocks/PropsTable/PropRow.stories.tsx b/lib/components/src/blocks/PropsTable/PropRow.stories.tsx
index 131068956af..624b7330f81 100644
--- a/lib/components/src/blocks/PropsTable/PropRow.stories.tsx
+++ b/lib/components/src/blocks/PropsTable/PropRow.stories.tsx
@@ -54,7 +54,7 @@ export const objectDef = {
export const arrayDef = {
name: 'someOArray',
- type: { summary: '[ number ]' },
+ type: { summary: 'number[]' },
required: false,
description: 'array of a certain type',
defaultValue: { summary: '[1, 2, 3]' },
@@ -64,44 +64,21 @@ export const complexDef = {
name: 'someComplex',
type: {
summary: 'object',
- name: 'objectOf',
- value: {
- name: 'shape',
- value: {
- id: {
- name: 'number',
- description:
- "Just an internal propType for a shape.\n It's also required, and as you can see it supports multi-line comments!",
- required: true,
- },
- func: {
- name: 'func',
- description: 'A simple non-required function',
- required: false,
- },
- arr: {
- name: 'arrayOf',
- value: {
- name: 'shape',
- value: {
- index: {
- name: 'number',
- description: '5-level deep propType definition and still works.',
- required: true,
- },
- },
- },
- description: 'An `arrayOf` shape',
- required: false,
- },
- },
- },
+ detail: `[{
+ id: number,
+ func: func,
+ arr: [{ index: number }]
+}]`,
},
required: false,
description: 'A very complex `objectOf` propType.',
defaultValue: {
- value: '{\n thing: {\n id: 2,\n func: () => {},\n arr: [],\n },\n}',
- computed: false,
+ summary: 'object',
+ detail: `[{
+ id: 1,
+ func: () => {},
+ arr: [{ index: 1 }]
+}]`,
},
};
@@ -134,5 +111,6 @@ export const longDesc = () => = ({
row: { name, type, required, description, defaultValue, jsDocTags },
-}) => (
-
-
- {name}
- {required ? * : null}
-
-
- {description || ''}
-
-
-
-
-
-
-);
+}) => {
+ const hasDescription = !isNil(description) && description !== '';
+
+ return (
+
+
+ {name}
+ {required ? * : null}
+
+
+ {hasDescription && (
+
+ {description}
+
+ )}
+ {!isNil(jsDocTags) ? (
+ <>
+
+
+
+
+ )}
+
+
+
+
+ );
+};
diff --git a/lib/components/src/blocks/PropsTable/PropValue.tsx b/lib/components/src/blocks/PropsTable/PropValue.tsx
index c2a928a8cea..73bca334a56 100644
--- a/lib/components/src/blocks/PropsTable/PropValue.tsx
+++ b/lib/components/src/blocks/PropsTable/PropValue.tsx
@@ -1,34 +1,104 @@
-import React, { FC } from 'react';
+import React, { FC, useState } from 'react';
import { isNil } from 'lodash';
+import { styled } from '@storybook/theming';
+import memoize from 'memoizerific';
import { PropSummaryValue } from './PropDef';
+import { WithTooltipPure } from '../../tooltip/WithTooltip';
+import { Icons } from '../../icon/icon';
+import { SyntaxHighlighter } from '../../syntaxhighlighter/syntaxhighlighter';
+import { codeCommon } from '../../typography/shared';
+
+const DIRTY_PADDING_TOP_IN_PX = 3;
interface PropValueProps {
value?: PropSummaryValue;
}
+interface PropTextProps {
+ text: string;
+}
+
interface PropSummaryProps {
value: PropSummaryValue;
}
+const Text = styled.span(({ theme }) => ({
+ fontFamily: theme.typography.fonts.mono,
+ fontSize: theme.typography.size.s2 - 1,
+}));
+
+const Expandable = styled.div<{}>(codeCommon, ({ theme }) => ({
+ fontFamily: theme.typography.fonts.mono,
+ lineHeight: '18px',
+ color: theme.color.secondary,
+ margin: 0,
+ paddingTop: `${DIRTY_PADDING_TOP_IN_PX}px`,
+ whiteSpace: 'nowrap',
+ display: 'flex',
+ alignItems: 'center',
+}));
+
+const ArrowIcon = styled(Icons)({
+ height: 10,
+ width: 10,
+ minWidth: 10,
+ marginLeft: '4px',
+ marginTop: `-${DIRTY_PADDING_TOP_IN_PX}px`,
+});
+
+const StyledSyntaxHighlighter = styled(SyntaxHighlighter)(({ theme, width }) => ({
+ width,
+ minWidth: '200px',
+ maxWith: '800px',
+ padding: '15px',
+ // Dont remove the mono fontFamily here even if it seem useless, this is used by the browser to calculate the length of a "ch" unit.
+ fontFamily: theme.typography.fonts.mono,
+ fontSize: theme.typography.size.s2 - 1,
+}));
+
const EmptyProp = () => {
return - ;
};
+const PropText: FC = ({ text }) => {
+ return {text} ;
+};
+
+const calculateDetailWidth = memoize(1000)((detail: string): string => {
+ const lines = detail.split(/\r?\n/);
+
+ return `${Math.max(...lines.map(x => x.length))}ch`;
+});
+
const PropSummary: FC = ({ value }) => {
const { summary, detail } = value;
- const title = !isNil(detail) ? detail : null;
- const style = {};
+ const [isOpen, setIsOpen] = useState(false);
- if (!isNil(title)) {
- // @ts-ignore
- style.borderBottom = '1px solid blue';
+ if (isNil(detail)) {
+ return
- {summary}
-
+ {
+ setIsOpen(isVisible);
+ }}
+ tooltip={
+
+ {detail}
+
+ }
+ >
+
+ {summary}
+
+
);
};
diff --git a/lib/components/src/blocks/PropsTable/PropsTable.tsx b/lib/components/src/blocks/PropsTable/PropsTable.tsx
index 29e68a8d554..a9e6da4fcab 100644
--- a/lib/components/src/blocks/PropsTable/PropsTable.tsx
+++ b/lib/components/src/blocks/PropsTable/PropsTable.tsx
@@ -21,6 +21,7 @@ export const Table = styled.table<{}>(({ theme }) => ({
'td, th': {
padding: 0,
border: 'none',
+ verticalAlign: 'top',
},
// End Resets
@@ -45,8 +46,8 @@ export const Table = styled.table<{}>(({ theme }) => ({
th: {
color:
theme.base === 'light'
- ? transparentize(0.4, theme.color.defaultText)
- : transparentize(0.6, theme.color.defaultText),
+ ? transparentize(0.25, theme.color.defaultText)
+ : transparentize(0.45, theme.color.defaultText),
paddingTop: 10,
paddingBottom: 10,
diff --git a/lib/components/src/blocks/Typeset.tsx b/lib/components/src/blocks/Typeset.tsx
index 07edbdb37b1..4a9150695a2 100644
--- a/lib/components/src/blocks/Typeset.tsx
+++ b/lib/components/src/blocks/Typeset.tsx
@@ -2,7 +2,7 @@ import React, { FunctionComponent } from 'react';
import { styled } from '@storybook/theming';
import { transparentize } from 'polished';
-import { withReset } from '../typography/withReset';
+import { withReset } from '../typography/shared';
import { getBlockBackgroundStyle } from './BlockBackgroundStyles';
const Label = styled.div<{}>(({ theme }) => ({
diff --git a/lib/components/src/typography/DocumentFormatting.tsx b/lib/components/src/typography/DocumentFormatting.tsx
index b34af201fb6..778bb9e4056 100644
--- a/lib/components/src/typography/DocumentFormatting.tsx
+++ b/lib/components/src/typography/DocumentFormatting.tsx
@@ -1,28 +1,6 @@
import React, { FunctionComponent } from 'react';
-import { styled, CSSObject, Theme } from '@storybook/theming';
-import { withReset } from './withReset';
-
-const headerCommon = ({ theme }: { theme: Theme }): CSSObject => ({
- margin: '20px 0 8px',
- padding: 0,
- cursor: 'text',
- position: 'relative',
- color: theme.color.defaultText,
- '&:first-of-type': {
- marginTop: 0,
- paddingTop: 0,
- },
- '&:hover a.anchor': {
- textDecoration: 'none',
- },
- '& tt, & code': {
- fontSize: 'inherit',
- },
-});
-
-const withMargin: CSSObject = {
- margin: '16px 0',
-};
+import { styled, CSSObject } from '@storybook/theming';
+import { withReset, withMargin, headerCommon, codeCommon } from './shared';
export const H1 = styled.h1<{}>(withReset, headerCommon, ({ theme }) => ({
fontSize: `${theme.typography.size.l1}px`,
@@ -326,17 +304,6 @@ export const UL = styled.ul<{}>(withReset, withMargin, listCommon, {});
export const OL = styled.ol<{}>(withReset, withMargin, listCommon);
-const codeCommon = ({ theme }: { theme: Theme }): CSSObject => ({
- margin: '0 2px',
- padding: '0 5px',
- whiteSpace: 'nowrap',
- border: `1px solid ${theme.color.mediumlight}`,
- backgroundColor: theme.color.lighter,
- borderRadius: '3px',
- fontSize: theme.typography.size.s2 - 1,
- color: theme.base === 'dark' && theme.color.darkest,
-});
-
export const P = styled.p<{}>(withReset, withMargin, ({ theme }) => ({
fontSize: theme.typography.size.s2,
lineHeight: '24px',
diff --git a/lib/components/src/typography/shared.tsx b/lib/components/src/typography/shared.tsx
new file mode 100644
index 00000000000..82c8950b68d
--- /dev/null
+++ b/lib/components/src/typography/shared.tsx
@@ -0,0 +1,56 @@
+import { transparentize } from 'polished';
+import { CSSObject, Theme } from '@storybook/theming';
+
+export const headerCommon = ({ theme }: { theme: Theme }): CSSObject => ({
+ margin: '20px 0 8px',
+ padding: 0,
+ cursor: 'text',
+ position: 'relative',
+ color: theme.color.defaultText,
+ '&:first-of-type': {
+ marginTop: 0,
+ paddingTop: 0,
+ },
+ '&:hover a.anchor': {
+ textDecoration: 'none',
+ },
+ '& tt, & code': {
+ fontSize: 'inherit',
+ },
+});
+
+export const codeCommon = ({ theme }: { theme: Theme }): CSSObject => ({
+ margin: '0 2px',
+ padding: '0 5px',
+ whiteSpace: 'nowrap',
+
+ borderRadius: '3px',
+ fontSize: theme.typography.size.s2 - 1,
+
+ // color: theme.base === 'dark' && theme.color.darkest,
+
+ border:
+ theme.base === 'light'
+ ? `1px solid ${theme.color.mediumlight}`
+ : `1px solid ${theme.color.darker}`,
+ color:
+ theme.base === 'light'
+ ? transparentize(0.1, theme.color.defaultText)
+ : transparentize(0.3, theme.color.defaultText),
+ backgroundColor: theme.base === 'light' ? theme.color.lighter : theme.color.border,
+});
+
+export const withReset = ({ theme }: { theme: Theme }): CSSObject => ({
+ fontFamily: theme.typography.fonts.base,
+ fontSize: theme.typography.size.s3,
+ margin: 0,
+
+ WebkitFontSmoothing: 'antialiased',
+ MozOsxFontSmoothing: 'grayscale',
+ WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
+ WebkitOverflowScrolling: 'touch',
+});
+
+export const withMargin: CSSObject = {
+ margin: '16px 0',
+};
diff --git a/lib/components/src/typography/withReset.tsx b/lib/components/src/typography/withReset.tsx
deleted file mode 100644
index 24d68e8cac9..00000000000
--- a/lib/components/src/typography/withReset.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { CSSObject, Theme } from '@storybook/theming';
-
-export const withReset = ({ theme }: { theme: Theme }): CSSObject => ({
- fontFamily: theme.typography.fonts.base,
- fontSize: theme.typography.size.s3,
- margin: 0,
-
- WebkitFontSmoothing: 'antialiased',
- MozOsxFontSmoothing: 'grayscale',
- WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
- WebkitOverflowScrolling: 'touch',
-});
diff --git a/lib/core-events/package.json b/lib/core-events/package.json
index 936dbc58155..44ac1597d54 100644
--- a/lib/core-events/package.json
+++ b/lib/core-events/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/core-events",
- "version": "5.3.0-beta.1",
+ "version": "5.3.0-beta.3",
"description": "Event names used in storybook core",
"keywords": [
"storybook"
diff --git a/lib/core/package.json b/lib/core/package.json
index 1a6fe8f1379..9dd59c94d9d 100644
--- a/lib/core/package.json
+++ b/lib/core/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/core",
- "version": "5.3.0-beta.1",
+ "version": "5.3.0-beta.3",
"description": "Storybook framework-agnostic API",
"keywords": [
"storybook"
@@ -32,15 +32,15 @@
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/plugin-transform-react-constant-elements": "^7.2.0",
"@babel/preset-env": "^7.4.5",
- "@storybook/addons": "5.3.0-beta.1",
- "@storybook/channel-postmessage": "5.3.0-beta.1",
- "@storybook/client-api": "5.3.0-beta.1",
- "@storybook/client-logger": "5.3.0-beta.1",
- "@storybook/core-events": "5.3.0-beta.1",
- "@storybook/node-logger": "5.3.0-beta.1",
- "@storybook/router": "5.3.0-beta.1",
- "@storybook/theming": "5.3.0-beta.1",
- "@storybook/ui": "5.3.0-beta.1",
+ "@storybook/addons": "5.3.0-beta.3",
+ "@storybook/channel-postmessage": "5.3.0-beta.3",
+ "@storybook/client-api": "5.3.0-beta.3",
+ "@storybook/client-logger": "5.3.0-beta.3",
+ "@storybook/core-events": "5.3.0-beta.3",
+ "@storybook/node-logger": "5.3.0-beta.3",
+ "@storybook/router": "5.3.0-beta.3",
+ "@storybook/theming": "5.3.0-beta.3",
+ "@storybook/ui": "5.3.0-beta.3",
"airbnb-js-shims": "^1 || ^2",
"ansi-to-html": "^0.6.11",
"autoprefixer": "^9.4.9",
diff --git a/lib/node-logger/package.json b/lib/node-logger/package.json
index 7dbb6141487..7f56af59d18 100644
--- a/lib/node-logger/package.json
+++ b/lib/node-logger/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/node-logger",
- "version": "5.3.0-beta.1",
+ "version": "5.3.0-beta.3",
"description": "",
"keywords": [
"storybook"
diff --git a/lib/postinstall/package.json b/lib/postinstall/package.json
index 9303d3ac639..aa010c602b9 100644
--- a/lib/postinstall/package.json
+++ b/lib/postinstall/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/postinstall",
- "version": "5.3.0-beta.1",
+ "version": "5.3.0-beta.3",
"description": "Storybook addons postinstall utilities",
"keywords": [
"api",
diff --git a/lib/router/package.json b/lib/router/package.json
index 03064625dd0..50320534781 100644
--- a/lib/router/package.json
+++ b/lib/router/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/router",
- "version": "5.3.0-beta.1",
+ "version": "5.3.0-beta.3",
"description": "Core Storybook Router",
"keywords": [
"storybook"
diff --git a/lib/source-loader/package.json b/lib/source-loader/package.json
index 772fc556ed4..9732f5202b5 100644
--- a/lib/source-loader/package.json
+++ b/lib/source-loader/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/source-loader",
- "version": "5.3.0-beta.1",
+ "version": "5.3.0-beta.3",
"description": "Source loader",
"keywords": [
"lib",
@@ -28,9 +28,9 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
- "@storybook/addons": "5.3.0-beta.1",
- "@storybook/client-logger": "5.3.0-beta.1",
- "@storybook/router": "5.3.0-beta.1",
+ "@storybook/addons": "5.3.0-beta.3",
+ "@storybook/client-logger": "5.3.0-beta.3",
+ "@storybook/router": "5.3.0-beta.3",
"core-js": "^3.0.1",
"estraverse": "^4.2.0",
"global": "^4.3.2",
diff --git a/lib/theming/package.json b/lib/theming/package.json
index 7cd60abe248..943b593ff20 100644
--- a/lib/theming/package.json
+++ b/lib/theming/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/theming",
- "version": "5.3.0-beta.1",
+ "version": "5.3.0-beta.3",
"description": "Core Storybook Components",
"keywords": [
"storybook"
@@ -29,7 +29,7 @@
"dependencies": {
"@emotion/core": "^10.0.20",
"@emotion/styled": "^10.0.17",
- "@storybook/client-logger": "5.3.0-beta.1",
+ "@storybook/client-logger": "5.3.0-beta.3",
"core-js": "^3.0.1",
"deep-object-diff": "^1.1.0",
"emotion-theming": "^10.0.19",
diff --git a/lib/ui/package.json b/lib/ui/package.json
index 01feee71bd0..edc8859c546 100644
--- a/lib/ui/package.json
+++ b/lib/ui/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/ui",
- "version": "5.3.0-beta.1",
+ "version": "5.3.0-beta.3",
"description": "Core Storybook UI",
"keywords": [
"storybook"
@@ -28,14 +28,14 @@
},
"dependencies": {
"@emotion/core": "^10.0.20",
- "@storybook/addons": "5.3.0-beta.1",
- "@storybook/api": "5.3.0-beta.1",
- "@storybook/channels": "5.3.0-beta.1",
- "@storybook/client-logger": "5.3.0-beta.1",
- "@storybook/components": "5.3.0-beta.1",
- "@storybook/core-events": "5.3.0-beta.1",
- "@storybook/router": "5.3.0-beta.1",
- "@storybook/theming": "5.3.0-beta.1",
+ "@storybook/addons": "5.3.0-beta.3",
+ "@storybook/api": "5.3.0-beta.3",
+ "@storybook/channels": "5.3.0-beta.3",
+ "@storybook/client-logger": "5.3.0-beta.3",
+ "@storybook/components": "5.3.0-beta.3",
+ "@storybook/core-events": "5.3.0-beta.3",
+ "@storybook/router": "5.3.0-beta.3",
+ "@storybook/theming": "5.3.0-beta.3",
"copy-to-clipboard": "^3.0.8",
"core-js": "^3.0.1",
"core-js-pure": "^3.0.1",
@@ -63,8 +63,8 @@
"util-deprecate": "^1.0.2"
},
"devDependencies": {
- "@storybook/addon-actions": "5.3.0-beta.1",
- "@storybook/addon-knobs": "5.3.0-beta.1",
+ "@storybook/addon-actions": "5.3.0-beta.3",
+ "@storybook/addon-knobs": "5.3.0-beta.3",
"corejs-upgrade-webpack-plugin": "^2.2.0",
"flush-promises": "^1.0.2",
"terser-webpack-plugin": "^2.1.2",
+
+If you want organize your documentation differently for groups of components, we recommend trying [MDX](./mdx.md) which is completely flexible to support any configuration.
+
## DocsPage slots
`DocsPage` is organized into a series of "slots" including Title, Subtitle, Description, Props, and Story. Each of these slots pulls information from your project and formats it for the screen.
diff --git a/addons/docs/docs/media/docspage-subcomponents.png b/addons/docs/docs/media/docspage-subcomponents.png
new file mode 100644
index 00000000000..86d001556ff
Binary files /dev/null and b/addons/docs/docs/media/docspage-subcomponents.png differ
diff --git a/addons/docs/docs/multiframework.md b/addons/docs/docs/multiframework.md
index e5994b7c14a..26d2f7da670 100644
--- a/addons/docs/docs/multiframework.md
+++ b/addons/docs/docs/multiframework.md
@@ -1,45 +1,36 @@
# Storybook Docs framework dev guide
-Storybook Docs [provides basic support for all non-RN Storybook view layers](../README.md#framework-support) out of the box. However, some frameworks have been docs-optimized, adding features like automatic props table generation and inline story rendering. This document is a dev guide for how to set up a new framework in docs.
+Storybook Docs [provides basic support for all non-RN Storybook view layers](../README.md#framework-support) out of the box. However, some frameworks have been docs-optimized, adding features like automatic props table generation and inline story rendering. This document is a dev guide for how to optimize a new framework in docs.
-- [Adding a preset](#adding-a-preset)
+- [Framework-specific configuration](#framework-specific-configuration)
- [Props tables](#props-tables)
- [Component descriptions](#component-descriptions)
- [Inline story rendering](#inline-story-rendering)
-## Adding a preset
+## Framework-specific configuration
-To get basic support, you need to add a [preset](https://storybook.js.org/docs/presets/introduction). By default this doesn't need to do much.
+Your framework might need framework-specific configuration. This could include adding extra webpack loaders or global decorators/story parameters.
-Here's a basic preset for `@storybook/html` in `addons/docs/html/preset.js`:
+Addon-docs handles this kind of customization by file naming convention. Its [common preset](https://github.com/storybookjs/storybook/blob/next/addons/docs/src/frameworks/common/preset.ts) does this by looking for files `../