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

Storyshots: First-class CSF support (#8000)

Browse Source 
Storyshots: First-class CSF support
This commit is contained in:
Michael Shilman 2019-10-04 18:57:27 +08:00 committed by Michael Shilman
parent fd3b2972e3
commit 39b8c804fb
79 changed files with 2539 additions and 1849 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
addons/storyshots/storyshots-core/.storybook/config.js
View File

@ -1,10 +1,9 @@
import { configure } from '@storybook/react';
const req = require.context('../stories/required_with_context', true, /\.stories\.js$/);
function loadStories() {
req.keys().forEach(filename => req(filename));
require('../stories/directly_required');
}
configure(loadStories, module);
configure(
[
require.context('../stories/required_with_context', false, /\.stories\.js$/),
require.context('../stories/directly_required', false, /index\.js$/),
],
module
);

9
addons/storyshots/storyshots-core/.storybook/configTest.js
View File

@ -1,11 +1,12 @@
import { configure } from '@storybook/react';
const req = require.context('../stories/required_with_context', true, /\.stories\.js$/);
const req = require.context('../stories/required_with_context', false, /\.stories\.js$/);
function loadStories() {
req.keys().forEach(filename => req(filename));
const loadStories = () => {
const result = req.keys().map(filename => req(filename));
// eslint-disable-next-line global-require
require('../stories/directly_required');
}
return result;
};
configure(loadStories, module);

10
addons/storyshots/storyshots-core/README.md
View File

@ -588,6 +588,16 @@ Like the default, but allows you to specify a set of options for the renderer, j
### `multiSnapshotWithOptions(options)`
Like `snapshotWithOptions`, but generate a separate snapshot file for each stories file rather than a single monolithic file (as is the convention in Jest). This makes it dramatically easier to review changes. If you'd like the benefit of separate snapshot files, but don't have custom options to pass, simply pass an empty object.
If you use [Component Story Format](https://storybook.js.org/docs/formats/component-story-format/), you may also need to add an additional Jest transform to automate detecting story file names:
```js
// jest.config.js
module.exports = {
transform: {
'^.+\\.stories\\.jsx?$': '@storybook/addon-storyshots/injectFileName',
'^.+\\.jsx?$': 'babel-jest',
},
};
```
#### integrityOptions

23
addons/storyshots/storyshots-core/injectFileName.js Normal file
View File

@ -0,0 +1,23 @@
const { ScriptTransformer } = require('@jest/transform');
const getNextTransformer = (fileName, config) => {
const self = config.transform.find(([pattern]) => new RegExp(pattern).test(fileName));
return new ScriptTransformer({
...config,
transform: config.transform.filter(entry => entry !== self),
});
};
module.exports = {
process(src, fileName, config, { instrument }) {
const transformer = getNextTransformer(fileName, config);
const { code } = transformer.transformSource(fileName, src, instrument);
return `${code};
if(exports.default != null) {
exports.default.parameters = exports.default.parameters || {};
exports.default.parameters.fileName = '${fileName}';
}
`;
},
};

4
addons/storyshots/storyshots-core/package.json
View File

@ -29,13 +29,15 @@
"storybook": "start-storybook -p 6006"
},
"dependencies": {
"@jest/transform": "^24.9.0",
"@storybook/addons": "5.2.1",
"core-js": "^3.0.1",
"glob": "^7.1.3",
"global": "^4.3.2",
"jest-specific-snapshot": "^2.0.0",
"read-pkg-up": "^6.0.0",
"regenerator-runtime": "^0.12.1"
"regenerator-runtime": "^0.12.1",
"ts-dedent": "^1.1.0"
},
"devDependencies": {
"enzyme-to-json": "^3.3.5",

14
addons/storyshots/storyshots-core/src/Stories2SnapsConverter.js
View File

@ -1,4 +1,5 @@
import path from 'path';
import dedent from 'ts-dedent';
const defaultOptions = {
snapshotsDirName: '__snapshots__',
@ -24,9 +25,20 @@ class DefaultStories2SnapsConverter {
}
getSnapshotFileName(context) {
const { fileName } = context;
const { fileName, kind } = context;
if (!fileName) {
// eslint-disable-next-line no-console
console.warn(
dedent`
Storybook was unable to detect filename for stories of kind "${kind}".
To fix it, add following to your jest.config.js:
transform: {
// should be above any other js transform like babel-jest
'^.+\\\\.stories\\\\.js$': '@storybook/addon-storyshots/injectFileName',
}
`
);
return null;
}

8
addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap
View File

@ -53,13 +53,13 @@ exports[`Storyshots Another Button with text 1`] = `
</Button>
`;
exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
exports[`Storyshots Async With Timeout 1`] = `
<AsyncTestComponent>
<h1 />
</AsyncTestComponent>
`;
exports[`Storyshots Button with some emoji 1`] = `
exports[`Storyshots Button With Some Emoji 1`] = `
<Button
onClick={[Function]}
>
@ -88,7 +88,7 @@ exports[`Storyshots Button with some emoji 1`] = `
</Button>
`;
exports[`Storyshots Button with text 1`] = `
exports[`Storyshots Button With Text 1`] = `
<Button
onClick={[Function]}
>
@ -112,7 +112,7 @@ exports[`Storyshots Button with text 1`] = `
</Button>
`;
exports[`Storyshots Welcome to Storybook 1`] = `
exports[`Storyshots Welcome To Storybook 1`] = `
<Welcome
showApp={[Function]}
>

8
addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.shallow.test.js.snap
View File

@ -45,13 +45,13 @@ exports[`Storyshots Another Button with text 1`] = `
</button>
`;
exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
exports[`Storyshots Async With Timeout 1`] = `
<h1>
</h1>
`;
exports[`Storyshots Button with some emoji 1`] = `
exports[`Storyshots Button With Some Emoji 1`] = `
<button
onClick={[Function]}
style={
@ -76,7 +76,7 @@ exports[`Storyshots Button with some emoji 1`] = `
</button>
`;
exports[`Storyshots Button with text 1`] = `
exports[`Storyshots Button With Text 1`] = `
<button
onClick={[Function]}
style={
@ -96,7 +96,7 @@ exports[`Storyshots Button with text 1`] = `
</button>
`;
exports[`Storyshots Welcome to Storybook 1`] = `
exports[`Storyshots Welcome To Storybook 1`] = `
<Main>
<Title>
Welcome to storybook

8
addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.shallowWithOptions.test.js.snap
View File

@ -45,13 +45,13 @@ exports[`Storyshots Another Button with text 1`] = `
</button>
`;
exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
exports[`Storyshots Async With Timeout 1`] = `
<h1>
</h1>
`;
exports[`Storyshots Button with some emoji 1`] = `
exports[`Storyshots Button With Some Emoji 1`] = `
<button
onClick={[Function]}
style={
@ -76,7 +76,7 @@ exports[`Storyshots Button with some emoji 1`] = `
</button>
`;
exports[`Storyshots Button with text 1`] = `
exports[`Storyshots Button With Text 1`] = `
<button
onClick={[Function]}
style={
@ -96,7 +96,7 @@ exports[`Storyshots Button with text 1`] = `
</button>
`;
exports[`Storyshots Welcome to Storybook 1`] = `
exports[`Storyshots Welcome To Storybook 1`] = `
<Main>
<Title>
Welcome to storybook

8
addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.snapshotWithOptionsFunction.test.js.snap
View File

@ -45,13 +45,13 @@ exports[`Storyshots Another Button with text 1`] = `
</button>
`;
exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
exports[`Storyshots Async With Timeout 1`] = `
<h1>
</h1>
`;
exports[`Storyshots Button with some emoji 1`] = `
exports[`Storyshots Button With Some Emoji 1`] = `
<button
onClick={[Function]}
style={
@ -76,7 +76,7 @@ exports[`Storyshots Button with some emoji 1`] = `
</button>
`;
exports[`Storyshots Button with text 1`] = `
exports[`Storyshots Button With Text 1`] = `
<button
onClick={[Function]}
style={
@ -96,7 +96,7 @@ exports[`Storyshots Button with text 1`] = `
</button>
`;
exports[`Storyshots Welcome to Storybook 1`] = `
exports[`Storyshots Welcome To Storybook 1`] = `
<article
style={
Object {

13
addons/storyshots/storyshots-core/stories/required_with_context/Async.stories.js
View File

@ -1,5 +1,4 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
export const EXPECTED_VALUE = 'THIS IS SO DONE';
export const TIMEOUT = 5;
@ -26,6 +25,12 @@ class AsyncTestComponent extends React.Component {
}
}
storiesOf('Async', module).add(`with ${TIMEOUT}ms timeout simulating async operation`, () => (
<AsyncTestComponent />
));
export default {
title: 'Async',
includeStories: ['withTimeout'],
};
export const withTimeout = () => <AsyncTestComponent />;
withTimeout.story = {
name: `with ${TIMEOUT}ms timeout simulating async operation`,
};

32
addons/storyshots/storyshots-core/stories/required_with_context/Button.stories.js
View File

@ -1,18 +1,26 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { Button } from '@storybook/react/demo';
storiesOf('Button', module)
.addParameters({
export default {
title: 'Button',
parameters: {
component: Button,
})
.add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
.add('with some emoji', () => (
<Button onClick={action('clicked')}>
<span role="img" aria-label="so cool">
😀 😎 👍 💯
</span>
</Button>
));
},
};
export const withText = () => <Button onClick={action('clicked')}>Hello Button</Button>;
export const withSomeEmoji = () => (
<Button onClick={action('clicked')}>
<span role="img" aria-label="so cool">
😀 😎 👍 💯
</span>
</Button>
);
withSomeEmoji.story = {
name: 'with some emoji',
};

17
addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.js
View File

@ -1,11 +1,18 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { linkTo } from '@storybook/addon-links';
import { Welcome } from '@storybook/react/demo';
storiesOf('Welcome', module)
.addParameters({
export default {
title: 'Welcome',
parameters: {
component: Welcome,
})
.add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
},
};
export const toStorybook = () => <Welcome showApp={linkTo('Button')} />;
toStorybook.story = {
name: 'to Storybook',
};

2
addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Async.stories.async.storyshot
View File

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
exports[`Storyshots Async With Timeout 1`] = `
<AsyncTestComponent>
<h1>
THIS IS SO DONE

2
addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Async.stories.foo
View File

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
exports[`Storyshots Async With Timeout 1`] = `
<h1>
</h1>

2
addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Async.stories.storyshot
View File

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
exports[`Storyshots Async With Timeout 1`] = `
<h1>
</h1>

4
addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Button.stories.foo
View File

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Button with some emoji 1`] = `
exports[`Storyshots Button With Some Emoji 1`] = `
<button
onClick={[Function]}
style={
@ -25,7 +25,7 @@ exports[`Storyshots Button with some emoji 1`] = `
</button>
`;
exports[`Storyshots Button with text 1`] = `
exports[`Storyshots Button With Text 1`] = `
<button
onClick={[Function]}
style={

4
addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Button.stories.storyshot
View File

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Button with some emoji 1`] = `
exports[`Storyshots Button With Some Emoji 1`] = `
<button
onClick={[Function]}
style={
@ -25,7 +25,7 @@ exports[`Storyshots Button with some emoji 1`] = `
</button>
`;
exports[`Storyshots Button with text 1`] = `
exports[`Storyshots Button With Text 1`] = `
<button
onClick={[Function]}
style={

2
addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.foo
View File

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Welcome to Storybook 1`] = `
exports[`Storyshots Welcome To Storybook 1`] = `
<article
style={
Object {

2
addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.storyshot
View File

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Welcome to Storybook 1`] = `
exports[`Storyshots Welcome To Storybook 1`] = `
<article
style={
Object {

27
examples/html-kitchen-sink/stories/__snapshots__/addon-a11y.stories.storyshot Normal file
View File

@ -0,0 +1,27 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addons|a11y Default 1`] = `<button />`;
exports[`Storyshots Addons|a11y Disabled 1`] = `
<button
disabled=""
>
Testing the a11y addon
</button>
`;
exports[`Storyshots Addons|a11y Label 1`] = `
<button>
Testing the a11y addon
</button>
`;
exports[`Storyshots Addons|a11y Story 4 1`] = `
<button
style="color: black; background-color: brown;"
>
Testing the a11y addon
</button>
`;
exports[`Storyshots Addons|a11y Story 5 1`] = `<div />`;

62
examples/html-kitchen-sink/stories/__snapshots__/addon-actions.stories.storyshot Normal file
View File

@ -0,0 +1,62 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addons|Actions Story 1 1`] = `
<button
type="button"
>
Hello World
</button>
`;
exports[`Storyshots Addons|Actions Story 2 1`] = `
<button
type="button"
>
Hello World
</button>
`;
exports[`Storyshots Addons|Actions Story 3 1`] = `
<button
type="button"
>
Hello World
</button>
`;
exports[`Storyshots Addons|Actions Story 4 1`] = `
<button
type="button"
>
Hello World
</button>
`;
exports[`Storyshots Addons|Actions Story 5 1`] = `
`;
exports[`Storyshots Addons|Actions Story 6 1`] = `
<button
type="button"
>
Hello World
</button>
`;
exports[`Storyshots Addons|Actions Story 7 1`] = `
<button
type="button"
>
Hello World
</button>
`;
exports[`Storyshots Addons|Actions Story 8 1`] = `
<button
type="button"
>
Hello World
</button>
`;

17
examples/html-kitchen-sink/stories/__snapshots__/addon-backgrounds.stories.storyshot Normal file
View File

@ -0,0 +1,17 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addons|Backgrounds Story 1 1`] = `
<span
style="color: white"
>
You should be able to switch backgrounds for this story
</span>
`;
exports[`Storyshots Addons|Backgrounds Story 2 1`] = `
<span
style="color: white"
>
This one too!
</span>
`;

17
examples/html-kitchen-sink/stories/__snapshots__/addon-centered.stories.storyshot Normal file
View File

@ -0,0 +1,17 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addons|Centered Story 1 1`] = `
<div
id="sb-addon-centered-wrapper"
style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; align-items: center; overflow: auto;"
>
<div
id="sb-addon-centered-inner"
style="margin: auto; max-height: 100%;"
>
<button>
I am a Button !
</button>
</div>
</div>
`;

6
examples/html-kitchen-sink/stories/__snapshots__/addon-events.stories.storyshot Normal file
View File

@ -0,0 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addons|Events Logger 1`] = `
`;

3
examples/html-kitchen-sink/stories/__snapshots__/addon-jest.stories.storyshot Normal file
View File

@ -0,0 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addons|Jest With Tests 1`] = `This story shows test results`;

70
examples/html-kitchen-sink/stories/__snapshots__/addon-knobs.stories.storyshot Normal file
View File

@ -0,0 +1,70 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addons|Knobs DOM 1`] = `
<p>
John Doe
</p>
`;
exports[`Storyshots Addons|Knobs Simple 1`] = `
<div>
I am John Doe and I'm 44 years old.
</div>
`;
exports[`Storyshots Addons|Knobs Story 3 1`] = `
<p
style="transition: color 0.5s ease-out; color: orangered;"
>
John Doe
</p>
`;
exports[`Storyshots Addons|Knobs Story 4 1`] = `
<div
style="border: 2px dotted deeppink; padding: 8px 22px; border-radius: 8px"
>
<h1>
My name is Jane,
</h1>
<h3>
today is January 20, 2017
</h3>
<p>
I have a stock of 20 apples, costing $2.25 each.
</p>
<p>
Also, I have:
</p>
<ul>
<li>
Laptop
</li>
<li>
Book
</li>
<li>
Whiskey
</li>
</ul>
<p>
Nice to meet you!
</p>
</div>
`;
exports[`Storyshots Addons|Knobs Story 5 1`] = `&lt;img src=x onerror="alert('XSS Attack')" &gt;`;

15
examples/html-kitchen-sink/stories/__snapshots__/addon-notes.stories.storyshot Normal file
View File

@ -0,0 +1,15 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addons|Notes Story 1 1`] = `
<p>
<strong>
This is a fragment of HTML
</strong>
</p>
`;

38
examples/html-kitchen-sink/stories/__snapshots__/button.stories.storyshot Normal file
View File

@ -0,0 +1,38 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Demo Button 1`] = `
<button>
Hello Button
</button>
`;
exports[`Storyshots Demo Effect 1`] = `
<button
id="button"
>
I should be yellow
</button>
`;
exports[`Storyshots Demo Heading 1`] = `
<h1>
Hello World
</h1>
`;
exports[`Storyshots Demo Headings 1`] = `
<section>
<h1>
Hello World
</h1>
<h2>
Hello World
</h2>
<h3>
Hello World
</h3>
<h4>
Hello World
</h4>
</section>
`;

101
examples/html-kitchen-sink/stories/__snapshots__/welcome.stories.storyshot Normal file
View File

@ -0,0 +1,101 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Welcome Welcome 1`] = `
<div
class="main"
>
<h1>
Welcome to Storybook for HTML
</h1>
<p>
This is a UI component dev environment for your plain HTML snippets.
</p>
<p>
We've added some basic stories inside the
<code
class="code"
>
stories
</code>
directory.
<br />
A story is a single state of one or more UI components. You can have as many stories as you want.
<br />
(Basically a story is like a visual test case.)
</p>
<p>
See these sample
<a
class="link"
data-sb-kind="Demo"
data-sb-story="button"
href="#"
>
stories
</a>
</p>
<p>
<img
class="logo"
src="logo.svg"
/>
</p>
<p>
Just like that, you can add your own snippets as stories.
<br />
You can also edit those snippets and see changes right away.
<br />
</p>
<p>
Usually we create stories with smaller UI components in the app.
<br />
Have a look at the
<a
class="link"
href="https://storybook.js.org/basics/writing-stories"
target="_blank"
>
Writing Stories
</a>
section in our documentation.
</p>
</div>
`;

347
examples/html-kitchen-sink/tests/__snapshots__/htmlshots.test.js.snap
View File

@ -1,347 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addons|Actions Story 1 1`] = `
<button
type="button"
>
Hello World
</button>
`;
exports[`Storyshots Addons|Actions Story 2 1`] = `
<button
type="button"
>
Hello World
</button>
`;
exports[`Storyshots Addons|Actions Story 3 1`] = `
<button
type="button"
>
Hello World
</button>
`;
exports[`Storyshots Addons|Actions Story 4 1`] = `
<button
type="button"
>
Hello World
</button>
`;
exports[`Storyshots Addons|Actions Story 5 1`] = `
`;
exports[`Storyshots Addons|Actions Story 6 1`] = `
<button
type="button"
>
Hello World
</button>
`;
exports[`Storyshots Addons|Actions Story 7 1`] = `
<button
type="button"
>
Hello World
</button>
`;
exports[`Storyshots Addons|Actions Story 8 1`] = `
<button
type="button"
>
Hello World
</button>
`;
exports[`Storyshots Addons|Backgrounds Story 1 1`] = `
<span
style="color: white"
>
You should be able to switch backgrounds for this story
</span>
`;
exports[`Storyshots Addons|Backgrounds Story 2 1`] = `
<span
style="color: white"
>
This one too!
</span>
`;
exports[`Storyshots Addons|Centered Story 1 1`] = `
<div
id="sb-addon-centered-wrapper"
style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; align-items: center; overflow: auto;"
>
<div
id="sb-addon-centered-inner"
style="margin: auto; max-height: 100%;"
>
<button>
I am a Button !
</button>
</div>
</div>
`;
exports[`Storyshots Addons|Events Logger 1`] = `
`;
exports[`Storyshots Addons|Jest With Tests 1`] = `This story shows test results`;
exports[`Storyshots Addons|Knobs DOM 1`] = `
<p>
John Doe
</p>
`;
exports[`Storyshots Addons|Knobs Simple 1`] = `
<div>
I am John Doe and I'm 44 years old.
</div>
`;
exports[`Storyshots Addons|Knobs Story 3 1`] = `
<p
style="transition: color 0.5s ease-out; color: orangered;"
>
John Doe
</p>
`;
exports[`Storyshots Addons|Knobs Story 4 1`] = `
<div
style="border: 2px dotted deeppink; padding: 8px 22px; border-radius: 8px"
>
<h1>
My name is Jane,
</h1>
<h3>
today is January 20, 2017
</h3>
<p>
I have a stock of 20 apples, costing $2.25 each.
</p>
<p>
Also, I have:
</p>
<ul>
<li>
Laptop
</li>
<li>
Book
</li>
<li>
Whiskey
</li>
</ul>
<p>
Nice to meet you!
</p>
</div>
`;
exports[`Storyshots Addons|Knobs Story 5 1`] = `&lt;img src=x onerror="alert('XSS Attack')" &gt;`;
exports[`Storyshots Addons|Notes Story 1 1`] = `
<p>
<strong>
This is a fragment of HTML
</strong>
</p>
`;
exports[`Storyshots Addons|a11y Default 1`] = `<button />`;
exports[`Storyshots Addons|a11y Disabled 1`] = `
<button
disabled=""
>
Testing the a11y addon
</button>
`;
exports[`Storyshots Addons|a11y Label 1`] = `
<button>
Testing the a11y addon
</button>
`;
exports[`Storyshots Addons|a11y Story 4 1`] = `
<button
style="color: black; background-color: brown;"
>
Testing the a11y addon
</button>
`;
exports[`Storyshots Addons|a11y Story 5 1`] = `<div />`;
exports[`Storyshots Demo Button 1`] = `
<button>
Hello Button
</button>
`;
exports[`Storyshots Demo Effect 1`] = `
<button
id="button"
>
I should be yellow
</button>
`;
exports[`Storyshots Demo Heading 1`] = `
<h1>
Hello World
</h1>
`;
exports[`Storyshots Demo Headings 1`] = `
<section>
<h1>
Hello World
</h1>
<h2>
Hello World
</h2>
<h3>
Hello World
</h3>
<h4>
Hello World
</h4>
</section>
`;
exports[`Storyshots Welcome Welcome 1`] = `
<div
class="main"
>
<h1>
Welcome to Storybook for HTML
</h1>
<p>
This is a UI component dev environment for your plain HTML snippets.
</p>
<p>
We've added some basic stories inside the
<code
class="code"
>
stories
</code>
directory.
<br />
A story is a single state of one or more UI components. You can have as many stories as you want.
<br />
(Basically a story is like a visual test case.)
</p>
<p>
See these sample
<a
class="link"
data-sb-kind="Demo"
data-sb-story="button"
href="#"
>
stories
</a>
</p>
<p>
<img
class="logo"
src="logo.svg"
/>
</p>
<p>
Just like that, you can add your own snippets as stories.
<br />
You can also edit those snippets and see changes right away.
<br />
</p>
<p>
Usually we create stories with smaller UI components in the app.
<br />
Have a look at the
<a
class="link"
href="https://storybook.js.org/basics/writing-stories"
target="_blank"
>
Writing Stories
</a>
section in our documentation.
</p>
</div>
`;

2
examples/official-storybook/stories/core/parameters.stories.js
View File

@ -19,7 +19,7 @@ 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, ...parameters }, ...rest }) => (
export const passed = ({ parameters: { options, fileName, ...parameters }, ...rest }) => (
<pre>Parameters: {JSON.stringify(parameters, null, 2)}</pre>
);
passed.story = {

39
examples/preact-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot Normal file
View File

@ -0,0 +1,39 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addons|Actions Action And Method 1`] = `
<button
class="button"
onclick={[Function]}
>
Click me to log the action
</button>
`;
exports[`Storyshots Addons|Actions Action Only 1`] = `
<button
class="button"
onclick={[Function]}
>
Click me to log the action
</button>
`;
exports[`Storyshots Addons|Actions Multiple Actions 1`] = `
<button
class="button"
onclick={[Function]}
ondblclick={[Function]}
>
(Double) click me to log the action
</button>
`;
exports[`Storyshots Addons|Actions Multiple Actions Object 1`] = `
<button
class="button"
onclick={[Function]}
ondblclick={[Function]}
>
(Double) click me to log the action
</button>
`;

17
examples/preact-kitchen-sink/src/stories/__snapshots__/addon-backgrounds.stories.storyshot Normal file
View File

@ -0,0 +1,17 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addons|Backgrounds Example 1 1`] = `
<button
class="button"
>
You should be able to switch backgrounds for this story
</button>
`;
exports[`Storyshots Addons|Backgrounds Example 2 1`] = `
<button
class="button"
>
This one too!
</button>
`;

54
examples/preact-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot Normal file
View File

@ -0,0 +1,54 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addons|Centered Button 1`] = `
Object {
"__b": 0,
"__c": null,
"__e": null,
"__k": null,
"__p": null,
"constructor": undefined,
"key": undefined,
"l": null,
"props": Object {
"children": Object {
"__b": 0,
"__c": null,
"__e": null,
"__k": null,
"__p": null,
"constructor": undefined,
"key": undefined,
"l": null,
"props": Object {
"children": VNode {
"attributes": undefined,
"children": Array [
"A button",
],
"key": undefined,
"nodeName": [Function],
},
"style": Object {
"margin": "auto",
"maxHeight": "100%",
},
},
"ref": undefined,
"type": "div",
},
"style": Object {
"alignItems": "center",
"bottom": "0",
"display": "flex",
"left": "0",
"overflow": "auto",
"position": "fixed",
"right": "0",
"top": "0",
},
},
"ref": undefined,
"type": "div",
}
`;

18
examples/preact-kitchen-sink/src/stories/__snapshots__/addon-contexts.stories.storyshot Normal file
View File

@ -0,0 +1,18 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addons|Contexts Simple Css Theming 1`] = `
<div
style={
Object {
"background": "#173F5F",
"color": "white",
"height": "100vh",
"padding": "10px",
}
}
>
<div>
I'm a children of the injected 'div' (where provides a theming context).
</div>
</div>
`;

40
examples/preact-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot Normal file
View File

@ -0,0 +1,40 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addons|Knobs All Knobs 1`] = `
<div
style="border:2px dotted deeppink; padding: 8px 22px; border-radius: 8px"
>
<h1>
My name is Jane,
</h1>
<h3>
today is January 20, 2017
</h3>
<p>
I have a stock of 20 apples, costing &dollar;2.25 each.
</p>
<p>
Also, I have:
</p>
<ul>
<li>
Laptop
</li>
<li>
Book
</li>
<li>
Whiskey
</li>
</ul>
<p>
Nice to meet you!
</p>
</div>
`;
exports[`Storyshots Addons|Knobs Simple 1`] = `
<div>
I am John Doe and I'm 44 years old.
</div>
`;

10
examples/preact-kitchen-sink/src/stories/__snapshots__/addon-links.stories.storyshot Normal file
View File

@ -0,0 +1,10 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addons|Links Go To Welcome 1`] = `
<button
class="button"
onclick={[Function]}
>
This button links to Welcome
</button>
`;

25
examples/preact-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot Normal file
View File

@ -0,0 +1,25 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addons|Notes Note With Html 1`] = `
<p>
<span>
🤔😳😯😮
</span>
<br />
<span>
😄😩😓😱
</span>
<br />
<span>
🤓😑😶😊
</span>
</p>
`;
exports[`Storyshots Addons|Notes Simple Note 1`] = `
<p>
<strong>
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.
</strong>
</p>
`;

24
examples/preact-kitchen-sink/src/stories/__snapshots__/button.stories.storyshot Normal file
View File

@ -0,0 +1,24 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Button With Some Emoji 1`] = `
<button
class="button"
onclick={[Function]}
>
<span
aria-label="so cool"
role="img"
>
😀 😎 👍 💯
</span>
</button>
`;
exports[`Storyshots Button With Text 1`] = `
<button
class="button"
onclick={[Function]}
>
Hello Button
</button>
`;

186
examples/preact-kitchen-sink/src/stories/__snapshots__/welcome.stories.storyshot Normal file
View File

@ -0,0 +1,186 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Welcome To Storybook 1`] = `
<article
style={
Object {
"backgroundColor": "#ffffff",
"fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif",
"lineHeight": 1.4,
"padding": 15,
}
}
>
<h1>
Welcome to storybook for Preact
</h1>
<img
alt="Preact logo"
src="./logo.png"
style={
Object {
"display": "block",
"height": "150px",
"margin": "0 auto",
"text-align": "center",
}
}
/>
<p>
This is a UI component dev environment for your Preact app.
</p>
<p>
We've added some basic stories inside the
<code
style={
Object {
"backgroundColor": "#f3f2f2",
"border": "1px solid #eae9e9",
"borderRadius": 4,
"color": "#3a3a3a",
"fontSize": 15,
"fontWeight": 600,
"padding": "2px 5px",
}
}
>
src/stories
</code>
directory.
<br />
A story is a single state of one or more UI components. You can have as many stories as you want.
<br />
(Basically a story is like a visual test case.)
</p>
<p>
See these sample
<button
onClick={[Function]}
style={
Object {
"backgroundColor": "transparent",
"borderBottom": "1px solid #1474f3",
"borderLeft": "none",
"borderRight": "none",
"borderTop": "none",
"color": "#1474f3",
"cursor": "pointer",
"font": "inherit",
"padding": 0,
"paddingBottom": 2,
"textDecoration": "none",
}
}
type="button"
>
stories
</button>
for a component called 
<code
style={
Object {
"backgroundColor": "#f3f2f2",
"border": "1px solid #eae9e9",
"borderRadius": 4,
"color": "#3a3a3a",
"fontSize": 15,
"fontWeight": 600,
"padding": "2px 5px",
}
}
>
Button
</code>
.
</p>
<p>
Just like that, you can add your own components as stories.
<br />
You can also edit those components and see changes right away.
<br />
(Try editing the
<code
style={
Object {
"backgroundColor": "#f3f2f2",
"border": "1px solid #eae9e9",
"borderRadius": 4,
"color": "#3a3a3a",
"fontSize": 15,
"fontWeight": 600,
"padding": "2px 5px",
}
}
>
Button
</code>
stories located at 
<code
style={
Object {
"backgroundColor": "#f3f2f2",
"border": "1px solid #eae9e9",
"borderRadius": 4,
"color": "#3a3a3a",
"fontSize": 15,
"fontWeight": 600,
"padding": "2px 5px",
}
}
>
src/stories/index.js
</code>
.)
</p>
<p>
Usually we create stories with smaller UI components in the app.
<br />
Have a look at the 
<a
href="https://storybook.js.org/basics/writing-stories"
rel="noopener noreferrer"
style={
Object {
"borderBottom": "1px solid #1474f3",
"color": "#1474f3",
"paddingBottom": 2,
"textDecoration": "none",
}
}
target="_blank"
>
Writing Stories
</a>
 section in our documentation.
</p>
<p
style={
Object {
"opacity": 0.5,
}
}
>
<b>
NOTE:
</b>
<br />
Have a look at the
<code
style={
Object {
"backgroundColor": "#f3f2f2",
"border": "1px solid #eae9e9",
"borderRadius": 4,
"color": "#3a3a3a",
"fontSize": 15,
"fontWeight": 600,
"padding": "2px 5px",
}
}
>
.storybook/webpack.config.js
</code>
to add webpack loaders and plugins you are using in this project.
</p>
</article>
`;

372
examples/riot-kitchen-sink/__snapshots__/riotshots.test.js.snap
View File

@ -1,372 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addon|Actions Action Only 1`] = `
<div
data-is="my-button"
id="root"
>
<button
class="button"
style="color: #42b983; border-color: #42b983"
>
Click me to log the action!
</button>
</div>
`;
exports[`Storyshots Addon|Actions Multiple Actions 1`] = `
<div
data-is="my-button"
id="root"
>
<button
class="button"
style="color: #42b983; border-color: #42b983"
>
Double Click me to log the action!
</button>
</div>
`;
exports[`Storyshots Addon|Backgrounds Story 1 1`] = `
<div
data-is="root"
id="root"
>
<my-button>
<button
class="button"
style="color: #42b983; border-color: #42b983"
>
You should be able to switch backgrounds for this story!
</button>
</my-button>
</div>
`;
exports[`Storyshots Addon|Backgrounds Story 2 1`] = `
<div
data-is="root"
id="root"
>
<my-button>
<button
class="button"
style="color: #42b983; border-color: #42b983"
>
This one too!!
</button>
</my-button>
</div>
`;
exports[`Storyshots Addon|Knobs All Knobs 1`] = `
<div
data-is="root"
id="root"
>
<whatigot>
<div
style="border:2px dotted deeppink; padding: 8px 22px; border-radius: 8px"
>
<h1>
My name is Jane,
</h1>
<h3>
today is January 20, 2017
</h3>
<p>
I have a stock of 20 apples, costing $2.25 each.
</p>
<p>
Also, I have:
</p>
<ul>
<li
key="Laptop"
>
Laptop
</li>
<li
key="Book"
>
Book
</li>
<li
key="Whiskey"
>
Whiskey
</li>
</ul>
<p>
Nice to meet you!
</p>
</div>
</whatigot>
</div>
`;
exports[`Storyshots Addon|Knobs Simple 1`] = `
<div
data-is="root"
id="root"
>
<div>
I am John Doe and I'm 44 years old.
</div>
</div>
`;
exports[`Storyshots Addon|Knobs Xss Safety 1`] = `
<div
data-is="root"
id="root"
>
<div>
&lt;img src=x onerror="alert('XSS Attack')" &gt;
</div>
</div>
`;
exports[`Storyshots Addon|Links Go To Welcome 1`] = `
<div
data-is="my-button"
id="root"
>
<button
class="rounded button"
style="color: #42b983; border-color: #42b983"
>
This button links to Welcome!
</button>
</div>
`;
exports[`Storyshots Addon|Notes Note With Html 1`] = `
<div
data-is="root"
id="root"
>
<div>
<p>
🤔😳😯😮
<br />
😄😩😓😱
<br />
🤓😑😶😊
</p>
</div>
</div>
`;
exports[`Storyshots Addon|Notes Simple Note 1`] = `
<div
data-is="root"
id="root"
>
<p>
<strong>
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.
</strong>
</p>
</div>
`;
exports[`Storyshots Core|Parameters Passed To Story 1`] = `
<div
data-is="parameters"
id="root"
>
<div>
Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{}},"docs":{},"globalParameter":"globalParameter","framework":"riot","chapterParameter":"chapterParameter","displayName":"passed to story","storyParameter":"storyParameter","id":"root","dataIs":"parameters"}
</div>
</div>
`;
exports[`Storyshots Story|How to create a story Built As String 1`] = `
<div
data-is="root"
id="root"
>
<test>
<div>
simple test
</div>
</test>
</div>
`;
exports[`Storyshots Story|How to create a story Built From Raw Import 1`] = `
<div
data-is="simpletest"
id="root"
>
<div>
simple test (without parameter). Oh, by the way (... well, nothing)
</div>
</div>
`;
exports[`Storyshots Story|How to create a story Built From Tags And Template 1`] = `
<div
data-is="root"
id="root"
>
<simpletest
test="with a parameter"
>
<div>
simple test (with a parameter). Oh, by the way (value is mapped to riotValue)
</div>
</simpletest>
</div>
`;
exports[`Storyshots Story|How to create a story Built From The Precompilation 1`] = `
<div
data-is="anothertest"
id="root"
>
<div>
yet another test, precompiled this time (WARN, only works in lower case, never upper case with precompiled templates)
</div>
</div>
`;
exports[`Storyshots Story|How to create a story Built With Tag 1`] = `
<div
data-is="test"
id="root"
>
<div>
simple test (with a parameter)
</div>
</div>
`;
exports[`Storyshots Story|How to create a story Tags Template And Tag Constructor At Once 1`] = `
<div
data-is="root"
id="root"
>
<simpletest
hacked="true"
test="with a parameter"
>
<div>
HACKED : true ; simple test (with a parameter). Oh, by the way (value is mapped to riotValue)
</div>
</simpletest>
</div>
`;
exports[`Storyshots Story|How to create a story The Mount Instruction Is Not Necessary 1`] = `
<div
data-is="anothertest"
id="root"
>
<div>
yet another test, precompiled this time (WARN, only works in lower case, never upper case with precompiled templates)
</div>
</div>
`;
exports[`Storyshots Story|How to create a story The Opts Value Is Not Necessary 1`] = `
<div
data-is="anothertest"
id="root"
>
<div>
yet another test, precompiled this time (WARN, only works in lower case, never upper case with precompiled templates)
</div>
</div>
`;
exports[`Storyshots Story|Nest tags Matriochka 1`] = `
<div
data-is="root"
id="root"
>
<matriochka>
<div>
<tag1>
<div>
Inside tag1:
<ul>
<li>
<tag2>
<div>
Inside tag2:
<ul>
<li>
<tag3>
<div>
Inside tag3:
<ul>
<li>
<tag4>
<div>
Inside tag4:
<ul>
<li>
<tag5>
<div>
Inside tag5:
<ul>
<li>
Content
</li>
</ul>
</div>
</tag5>
</li>
</ul>
</div>
</tag4>
</li>
</ul>
</div>
</tag3>
</li>
</ul>
</div>
</tag2>
</li>
</ul>
</div>
</tag1>
</div>
</matriochka>
</div>
`;
exports[`Storyshots Story|Nest tags Three Tags 1`] = `
<div
data-is="root"
id="root"
>
<webpage>
<pageheader>
<h1>
Simple title
</h1>
</pageheader>
<pagebody>
<div
style="border-radius: 1em;border-right: solid 1px #cac9c9;border-bottom: solid 1px #cac9c9;box-shadow: 1em 1em 2em #eae9e9; margin: 3em; padding: 3em;min-height: 10em;min-width: 30em"
>
Simple Content
</div>
</pagebody>
</webpage>
</div>
`;

29
examples/riot-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot Normal file
View File

@ -0,0 +1,29 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addon|Actions Action Only 1`] = `
<div
data-is="my-button"
id="root"
>
<button
class="button"
style="color: #42b983; border-color: #42b983"
>
Click me to log the action!
</button>
</div>
`;
exports[`Storyshots Addon|Actions Multiple Actions 1`] = `
<div
data-is="my-button"
id="root"
>
<button
class="button"
style="color: #42b983; border-color: #42b983"
>
Double Click me to log the action!
</button>
</div>
`;

33
examples/riot-kitchen-sink/src/stories/__snapshots__/addon-backgrounds.stories.storyshot Normal file
View File

@ -0,0 +1,33 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addon|Backgrounds Story 1 1`] = `
<div
data-is="root"
id="root"
>
<my-button>
<button
class="button"
style="color: #42b983; border-color: #42b983"
>
You should be able to switch backgrounds for this story!
</button>
</my-button>
</div>
`;
exports[`Storyshots Addon|Backgrounds Story 2 1`] = `
<div
data-is="root"
id="root"
>
<my-button>
<button
class="button"
style="color: #42b983; border-color: #42b983"
>
This one too!!
</button>
</my-button>
</div>
`;

78
examples/riot-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot Normal file
View File

@ -0,0 +1,78 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addon|Knobs All Knobs 1`] = `
<div
data-is="root"
id="root"
>
<whatigot>
<div
style="border:2px dotted deeppink; padding: 8px 22px; border-radius: 8px"
>
<h1>
My name is Jane,
</h1>
<h3>
today is January 20, 2017
</h3>
<p>
I have a stock of 20 apples, costing $2.25 each.
</p>
<p>
Also, I have:
</p>
<ul>
<li
key="Laptop"
>
Laptop
</li>
<li
key="Book"
>
Book
</li>
<li
key="Whiskey"
>
Whiskey
</li>
</ul>
<p>
Nice to meet you!
</p>
</div>
</whatigot>
</div>
`;
exports[`Storyshots Addon|Knobs Simple 1`] = `
<div
data-is="root"
id="root"
>
<div>
I am John Doe and I'm 44 years old.
</div>
</div>
`;
exports[`Storyshots Addon|Knobs Xss Safety 1`] = `
<div
data-is="root"
id="root"
>
<div>
&lt;img src=x onerror="alert('XSS Attack')" &gt;
</div>
</div>
`;

15
examples/riot-kitchen-sink/src/stories/__snapshots__/addon-links.stories.storyshot Normal file
View File

@ -0,0 +1,15 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addon|Links Go To Welcome 1`] = `
<div
data-is="my-button"
id="root"
>
<button
class="rounded button"
style="color: #42b983; border-color: #42b983"
>
This button links to Welcome!
</button>
</div>
`;

31
examples/riot-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot Normal file
View File

@ -0,0 +1,31 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addon|Notes Note With Html 1`] = `
<div
data-is="root"
id="root"
>
<div>
<p>
🤔😳😯😮
<br />
😄😩😓😱
<br />
🤓😑😶😊
</p>
</div>
</div>
`;
exports[`Storyshots Addon|Notes Simple Note 1`] = `
<div
data-is="root"
id="root"
>
<p>
<strong>
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.
</strong>
</p>
</div>
`;

12
examples/riot-kitchen-sink/src/stories/__snapshots__/core.stories.storyshot Normal file
View File

@ -0,0 +1,12 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Core|Parameters Passed To Story 1`] = `
<div
data-is="parameters"
id="root"
>
<div>
Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{}},"docs":{},"globalParameter":"globalParameter","framework":"riot","chapterParameter":"chapterParameter","displayName":"passed to story","storyParameter":"storyParameter","id":"root","dataIs":"parameters"}
</div>
</div>
`;

81
examples/riot-kitchen-sink/src/stories/__snapshots__/nested-tags.stories.storyshot Normal file
View File

@ -0,0 +1,81 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Story|Nest tags Matriochka 1`] = `
<div
data-is="root"
id="root"
>
<matriochka>
<div>
<tag1>
<div>
Inside tag1:
<ul>
<li>
<tag2>
<div>
Inside tag2:
<ul>
<li>
<tag3>
<div>
Inside tag3:
<ul>
<li>
<tag4>
<div>
Inside tag4:
<ul>
<li>
<tag5>
<div>
Inside tag5:
<ul>
<li>
Content
</li>
</ul>
</div>
</tag5>
</li>
</ul>
</div>
</tag4>
</li>
</ul>
</div>
</tag3>
</li>
</ul>
</div>
</tag2>
</li>
</ul>
</div>
</tag1>
</div>
</matriochka>
</div>
`;
exports[`Storyshots Story|Nest tags Three Tags 1`] = `
<div
data-is="root"
id="root"
>
<webpage>
<pageheader>
<h1>
Simple title
</h1>
</pageheader>
<pagebody>
<div
style="border-radius: 1em;border-right: solid 1px #cac9c9;border-bottom: solid 1px #cac9c9;box-shadow: 1em 1em 2em #eae9e9; margin: 3em; padding: 3em;min-height: 10em;min-width: 30em"
>
Simple Content
</div>
</pagebody>
</webpage>
</div>
`;

100
examples/riot-kitchen-sink/src/stories/__snapshots__/story-code.stories.storyshot Normal file
View File

@ -0,0 +1,100 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Story|How to create a story Built As String 1`] = `
<div
data-is="root"
id="root"
>
<test>
<div>
simple test
</div>
</test>
</div>
`;
exports[`Storyshots Story|How to create a story Built From Raw Import 1`] = `
<div
data-is="simpletest"
id="root"
>
<div>
simple test (without parameter). Oh, by the way (... well, nothing)
</div>
</div>
`;
exports[`Storyshots Story|How to create a story Built From Tags And Template 1`] = `
<div
data-is="root"
id="root"
>
<simpletest
test="with a parameter"
>
<div>
simple test (with a parameter). Oh, by the way (value is mapped to riotValue)
</div>
</simpletest>
</div>
`;
exports[`Storyshots Story|How to create a story Built From The Precompilation 1`] = `
<div
data-is="anothertest"
id="root"
>
<div>
yet another test, precompiled this time (WARN, only works in lower case, never upper case with precompiled templates)
</div>
</div>
`;
exports[`Storyshots Story|How to create a story Built With Tag 1`] = `
<div
data-is="test"
id="root"
>
<div>
simple test (with a parameter)
</div>
</div>
`;
exports[`Storyshots Story|How to create a story Tags Template And Tag Constructor At Once 1`] = `
<div
data-is="root"
id="root"
>
<simpletest
hacked="true"
test="with a parameter"
>
<div>
HACKED : true ; simple test (with a parameter). Oh, by the way (value is mapped to riotValue)
</div>
</simpletest>
</div>
`;
exports[`Storyshots Story|How to create a story The Mount Instruction Is Not Necessary 1`] = `
<div
data-is="anothertest"
id="root"
>
<div>
yet another test, precompiled this time (WARN, only works in lower case, never upper case with precompiled templates)
</div>
</div>
`;
exports[`Storyshots Story|How to create a story The Opts Value Is Not Necessary 1`] = `
<div
data-is="anothertest"
id="root"
>
<div>
yet another test, precompiled this time (WARN, only works in lower case, never upper case with precompiled templates)
</div>
</div>
`;

462
examples/svelte-kitchen-sink/__snapshots__/svelteshots.test.js.snap
View File

@ -1,462 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addon|Actions Action On Component Method 1`] = `
<section
class="storybook-snapshot-container"
>
<button
class="button svelte-n2tx93 rounded"
>
<strong>
Round
corners
</strong>
<br />
Custom text
</button>
</section>
`;
exports[`Storyshots Addon|Actions Action On View Method 1`] = `
<section
class="storybook-snapshot-container"
>
<h1>
Button view
</h1>
<button
class="button svelte-n2tx93"
>
<strong>
Square
corners
</strong>
<br />
You clicked
:
0
</button>
<p>
A little text to show this is a view.
</p>
<p>
If we need to test components in a Svelte environment, for instance to test slot behaviour,
</p>
<p>
then wrapping the component up in a view
</p>
<p>
made just for the story is the simplest way to achieve this.
</p>
</section>
`;
exports[`Storyshots Addon|Backgrounds Story 1 1`] = `
<section
class="storybook-snapshot-container"
>
<h1>
Button view
</h1>
<button
class="button svelte-n2tx93"
>
<strong>
Square
corners
</strong>
<br />
You clicked
:
0
</button>
<p>
A little text to show this is a view.
</p>
<p>
If we need to test components in a Svelte environment, for instance to test slot behaviour,
</p>
<p>
then wrapping the component up in a view
</p>
<p>
made just for the story is the simplest way to achieve this.
</p>
</section>
`;
exports[`Storyshots Addon|Centered Rounded 1`] = `
<section
class="storybook-snapshot-container"
>
<button
class="button svelte-n2tx93 rounded"
>
<strong>
Round
corners
</strong>
<br />
Look, I'm centered!
</button>
</section>
`;
exports[`Storyshots Addon|Centered With Action 1`] = `
<section
class="storybook-snapshot-container"
>
<button
class="button svelte-n2tx93 rounded"
>
<strong>
Round
corners
</strong>
<br />
</button>
</section>
`;
exports[`Storyshots Addon|Knobs Simple 1`] = `
<section
class="storybook-snapshot-container"
>
<div
style="width: 200px; height: 200px; background-color: green;"
>
<p>
I am interactive
</p>
</div>
</section>
`;
exports[`Storyshots Addon|Links Go To Welcome View 1`] = `
<section
class="storybook-snapshot-container"
>
<div
class="main"
>
<h1>
Link Action
</h1>
<button
class="link"
>
Return to the
<code
class="code"
>
Welcome
</code>
view story.
</button>
</div>
</section>
`;
exports[`Storyshots Addon|Notes Note With Html 1`] = `
<section
class="storybook-snapshot-container"
>
<h1>
Button view
</h1>
<button
class="button svelte-n2tx93"
>
<strong>
Square
corners
</strong>
<br />
🤔😳😯😮😄😩😓😱🤓😑😶😊
:
0
</button>
<p>
A little text to show this is a view.
</p>
<p>
If we need to test components in a Svelte environment, for instance to test slot behaviour,
</p>
<p>
then wrapping the component up in a view
</p>
<p>
made just for the story is the simplest way to achieve this.
</p>
</section>
`;
exports[`Storyshots Addon|Notes Simple Note 1`] = `
<section
class="storybook-snapshot-container"
>
<h1>
Button view
</h1>
<button
class="button svelte-n2tx93"
>
<strong>
Square
corners
</strong>
<br />
You clicked
:
0
</button>
<p>
A little text to show this is a view.
</p>
<p>
If we need to test components in a Svelte environment, for instance to test slot behaviour,
</p>
<p>
then wrapping the component up in a view
</p>
<p>
made just for the story is the simplest way to achieve this.
</p>
</section>
`;
exports[`Storyshots Button Rounded 1`] = `
<section
class="storybook-snapshot-container"
>
<h1>
Button view
</h1>
<button
class="button svelte-n2tx93 rounded"
>
<strong>
Round
corners
</strong>
<br />
You clicked
:
0
</button>
<p>
A little text to show this is a view.
</p>
<p>
If we need to test components in a Svelte environment, for instance to test slot behaviour,
</p>
<p>
then wrapping the component up in a view
</p>
<p>
made just for the story is the simplest way to achieve this.
</p>
</section>
`;
exports[`Storyshots Button Square 1`] = `
<section
class="storybook-snapshot-container"
>
<h1>
Button view
</h1>
<button
class="button svelte-n2tx93"
>
<strong>
Square
corners
</strong>
<br />
You clicked
:
0
</button>
<p>
A little text to show this is a view.
</p>
<p>
If we need to test components in a Svelte environment, for instance to test slot behaviour,
</p>
<p>
then wrapping the component up in a view
</p>
<p>
made just for the story is the simplest way to achieve this.
</p>
</section>
`;
exports[`Storyshots Welcome Welcome 1`] = `
<section
class="storybook-snapshot-container"
>
<div
class="main svelte-5n9a95"
>
<h1>
Welcome to Storybook for Svelte
</h1>
<p>
This is a UI component dev environment for your svelte app.
</p>
<p>
We've added some basic stories inside the
<code
class="code svelte-5n9a95"
>
src/stories
</code>
directory.
<strong>
A story is like a visual test case
</strong>
and represents a single state of one or more UI components.
You can have as many stories as you want.
</p>
<h1
class="logo svelte-5n9a95"
>
Svelte
</h1>
<p>
Just like that, you can add your own components as stories.
You can also edit those components and see changes right away.
<br />
(Try editing the
<code
class="code svelte-5n9a95"
>
Button
</code>
component
located at
<code
class="code svelte-5n9a95"
>
src/stories/views/Welcome.svelte
</code>
.)
</p>
<p>
Usually we create stories with smaller UI components in the app.
<br />
Have a look at the
<a
class="link svelte-5n9a95"
href="https://storybook.js.org/basics/writing-stories"
target="_blank"
>
Writing Stories
</a>
section in our documentation.
</p>
<p
class="note svelte-5n9a95"
>
<b>
NOTE:
</b>
<br />
Have a look at the
<code
class="code svelte-5n9a95"
>
.storybook/webpack.config.js
</code>
to add webpack
loaders and plugins you are using in this project.
</p>
</div>
</section>
`;

62
examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot Normal file
View File

@ -0,0 +1,62 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addon|Actions Action On Component Method 1`] = `
<section
class="storybook-snapshot-container"
>
<button
class="button svelte-n2tx93 rounded"
>
<strong>
Round
corners
</strong>
<br />
Custom text
</button>
</section>
`;
exports[`Storyshots Addon|Actions Action On View Method 1`] = `
<section
class="storybook-snapshot-container"
>
<h1>
Button view
</h1>
<button
class="button svelte-n2tx93"
>
<strong>
Square
corners
</strong>
<br />
You clicked
:
0
</button>
<p>
A little text to show this is a view.
</p>
<p>
If we need to test components in a Svelte environment, for instance to test slot behaviour,
</p>
<p>
then wrapping the component up in a view
</p>
<p>
made just for the story is the simplest way to achieve this.
</p>
</section>
`;

43
examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-backgrounds.stories.storyshot Normal file
View File

@ -0,0 +1,43 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addon|Backgrounds Story 1 1`] = `
<section
class="storybook-snapshot-container"
>
<h1>
Button view
</h1>
<button
class="button svelte-n2tx93"
>
<strong>
Square
corners
</strong>
<br />
You clicked
:
0
</button>
<p>
A little text to show this is a view.
</p>
<p>
If we need to test components in a Svelte environment, for instance to test slot behaviour,
</p>
<p>
then wrapping the component up in a view
</p>
<p>
made just for the story is the simplest way to achieve this.
</p>
</section>
`;

39
examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot Normal file
View File

@ -0,0 +1,39 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addon|Centered Rounded 1`] = `
<section
class="storybook-snapshot-container"
>
<button
class="button svelte-n2tx93 rounded"
>
<strong>
Round
corners
</strong>
<br />
Look, I'm centered!
</button>
</section>
`;
exports[`Storyshots Addon|Centered With Action 1`] = `
<section
class="storybook-snapshot-container"
>
<button
class="button svelte-n2tx93 rounded"
>
<strong>
Round
corners
</strong>
<br />
</button>
</section>
`;

15
examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot Normal file
View File

@ -0,0 +1,15 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addon|Knobs Simple 1`] = `
<section
class="storybook-snapshot-container"
>
<div
style="width: 200px; height: 200px; background-color: green;"
>
<p>
I am interactive
</p>
</div>
</section>
`;

29
examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-links.stories.storyshot Normal file
View File

@ -0,0 +1,29 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addon|Links Go To Welcome View 1`] = `
<section
class="storybook-snapshot-container"
>
<div
class="main"
>
<h1>
Link Action
</h1>
<button
class="link"
>
Return to the
<code
class="code"
>
Welcome
</code>
view story.
</button>
</div>
</section>
`;

85
examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot Normal file
View File

@ -0,0 +1,85 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addon|Notes Note With Html 1`] = `
<section
class="storybook-snapshot-container"
>
<h1>
Button view
</h1>
<button
class="button svelte-n2tx93"
>
<strong>
Square
corners
</strong>
<br />
🤔😳😯😮😄😩😓😱🤓😑😶😊
:
0
</button>
<p>
A little text to show this is a view.
</p>
<p>
If we need to test components in a Svelte environment, for instance to test slot behaviour,
</p>
<p>
then wrapping the component up in a view
</p>
<p>
made just for the story is the simplest way to achieve this.
</p>
</section>
`;
exports[`Storyshots Addon|Notes Simple Note 1`] = `
<section
class="storybook-snapshot-container"
>
<h1>
Button view
</h1>
<button
class="button svelte-n2tx93"
>
<strong>
Square
corners
</strong>
<br />
You clicked
:
0
</button>
<p>
A little text to show this is a view.
</p>
<p>
If we need to test components in a Svelte environment, for instance to test slot behaviour,
</p>
<p>
then wrapping the component up in a view
</p>
<p>
made just for the story is the simplest way to achieve this.
</p>
</section>
`;

85
examples/svelte-kitchen-sink/src/stories/__snapshots__/button.stories.storyshot Normal file
View File

@ -0,0 +1,85 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Button Rounded 1`] = `
<section
class="storybook-snapshot-container"
>
<h1>
Button view
</h1>
<button
class="button svelte-n2tx93 rounded"
>
<strong>
Round
corners
</strong>
<br />
You clicked
:
0
</button>
<p>
A little text to show this is a view.
</p>
<p>
If we need to test components in a Svelte environment, for instance to test slot behaviour,
</p>
<p>
then wrapping the component up in a view
</p>
<p>
made just for the story is the simplest way to achieve this.
</p>
</section>
`;
exports[`Storyshots Button Square 1`] = `
<section
class="storybook-snapshot-container"
>
<h1>
Button view
</h1>
<button
class="button svelte-n2tx93"
>
<strong>
Square
corners
</strong>
<br />
You clicked
:
0
</button>
<p>
A little text to show this is a view.
</p>
<p>
If we need to test components in a Svelte environment, for instance to test slot behaviour,
</p>
<p>
then wrapping the component up in a view
</p>
<p>
made just for the story is the simplest way to achieve this.
</p>
</section>
`;

111
examples/svelte-kitchen-sink/src/stories/__snapshots__/welcome.stories.storyshot Normal file
View File

@ -0,0 +1,111 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Welcome Welcome 1`] = `
<section
class="storybook-snapshot-container"
>
<div
class="main svelte-5n9a95"
>
<h1>
Welcome to Storybook for Svelte
</h1>
<p>
This is a UI component dev environment for your svelte app.
</p>
<p>
We've added some basic stories inside the
<code
class="code svelte-5n9a95"
>
src/stories
</code>
directory.
<strong>
A story is like a visual test case
</strong>
and represents a single state of one or more UI components.
You can have as many stories as you want.
</p>
<h1
class="logo svelte-5n9a95"
>
Svelte
</h1>
<p>
Just like that, you can add your own components as stories.
You can also edit those components and see changes right away.
<br />
(Try editing the
<code
class="code svelte-5n9a95"
>
Button
</code>
component
located at
<code
class="code svelte-5n9a95"
>
src/stories/views/Welcome.svelte
</code>
.)
</p>
<p>
Usually we create stories with smaller UI components in the app.
<br />
Have a look at the
<a
class="link svelte-5n9a95"
href="https://storybook.js.org/basics/writing-stories"
target="_blank"
>
Writing Stories
</a>
section in our documentation.
</p>
<p
class="note svelte-5n9a95"
>
<b>
NOTE:
</b>
<br />
Have a look at the
<code
class="code svelte-5n9a95"
>
.storybook/webpack.config.js
</code>
to add webpack
loaders and plugins you are using in this project.
</p>
</div>
</section>
`;

596
examples/vue-kitchen-sink/__snapshots__/vueshots.test.js.snap
View File

@ -1,596 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addon|Actions Action And Method 1`] = `
<button
class="button"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
Click me to log the action!
</button>
`;
exports[`Storyshots Addon|Actions Action Only 1`] = `
<button
class="button"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
Click me to log the action!
</button>
`;
exports[`Storyshots Addon|Actions Multiple Actions 1`] = `
<button
class="button"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
(Double) click me to log the action!
</button>
`;
exports[`Storyshots Addon|Actions Multiple Actions Object 1`] = `
<button
class="button"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
(Double) click me to log the action!
</button>
`;
exports[`Storyshots Addon|Backgrounds Story 1 1`] = `
<button>
You should be able to switch backgrounds for this story
</button>
`;
exports[`Storyshots Addon|Backgrounds Story 2 1`] = `
<button>
This one too!
</button>
`;
exports[`Storyshots Addon|Centered Rounded 1`] = `
<div
style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; align-items: center; overflow: auto;"
>
<div
style="margin: auto; max-height: 100%;"
>
<button
class="button rounded"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
A Button with rounded edges!
</button>
</div>
</div>
`;
exports[`Storyshots Addon|Contexts Languages 1`] = `
<div
style="color: white; background: rgb(23, 63, 95); height: 100vh; padding: 10px;"
>
<div>
Your locale is unknown, so I say NULL!
</div>
</div>
`;
exports[`Storyshots Addon|Contexts Simple Css Theming 1`] = `
<div
style="color: white; background: rgb(23, 63, 95); height: 100vh; padding: 10px;"
>
<span>
I'm a children of the injected 'div' (where provides a theming context).
</span>
</div>
`;
exports[`Storyshots Addon|Knobs All Knobs 1`] = `
<div
style="border: 2px dotted; padding: 8px 22px; border-radius: 8px; border-color: deeppink;"
>
<h1>
My name is Jane,
</h1>
<h3>
today is January 20, 2017
</h3>
<p>
I have a stock of 20 apples, costing $2.25 each.
</p>
<p>
Also, I have:
</p>
<ul>
<li>
Laptop
</li>
<li>
Book
</li>
<li>
Whiskey
</li>
</ul>
<p>
Nice to meet you!
</p>
</div>
`;
exports[`Storyshots Addon|Knobs Simple 1`] = `
<div>
I am John Doe and I'm 40 years old.
</div>
`;
exports[`Storyshots Addon|Knobs Xss Safety 1`] = `
<div>
&lt;img src=x onerror="alert('XSS Attack')" &gt;
</div>
`;
exports[`Storyshots Addon|Links Go To Welcome 1`] = `
<button
class="button rounded"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
This buttons links to Welcome!
</button>
`;
exports[`Storyshots Addon|Notes Note With Html 1`] = `
<p>
🤔😳😯😮
<br />
😄😩😓😱
<br />
🤓😑😶😊
</p>
`;
exports[`Storyshots Addon|Notes Simple Note 1`] = `
<p>
<strong>
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.
</strong>
</p>
`;
exports[`Storyshots App App 1`] = `
<div
id="app"
>
<img
src="./logo.png"
/>
<h1 />
<h2>
Essential Links
</h2>
<ul>
<li>
<a
href="https://vuejs.org"
target="_blank"
>
Core Docs
</a>
</li>
<li>
<a
href="https://forum.vuejs.org"
target="_blank"
>
Forum
</a>
</li>
<li>
<a
href="https://gitter.im/vuejs/vue"
target="_blank"
>
Gitter Chat
</a>
</li>
<li>
<a
href="https://twitter.com/vuejs"
target="_blank"
>
Twitter
</a>
</li>
</ul>
<h2>
Ecosystem
</h2>
<ul>
<li>
<a
href="http://router.vuejs.org/"
target="_blank"
>
vue-router
</a>
</li>
<li>
<a
href="http://vuex.vuejs.org/"
target="_blank"
>
vuex
</a>
</li>
<li>
<a
href="http://vue-loader.vuejs.org/"
target="_blank"
>
vue-loader
</a>
</li>
<li>
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
>
awesome-vue
</a>
</li>
</ul>
</div>
`;
exports[`Storyshots Button Rounded 1`] = `
<button
class="button rounded"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
A Button with rounded edges!
</button>
`;
exports[`Storyshots Button Square 1`] = `
<button
class="button"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
A Button with square edges!
</button>
`;
exports[`Storyshots Core|Errors Null Error 1`] = `<!---->`;
exports[`Storyshots Core|Parameters Passed To Story 1`] = `
<div>
Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{}},"docs":{"iframeHeight":"60px"},"globalParameter":"globalParameter","framework":"vue","chapterParameter":"chapterParameter","storyParameter":"storyParameter","displayName":"passed to story"}
</div>
`;
exports[`Storyshots Core|Template String Only 1`] = `
<button
class="button"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
A Button with square edges!
</button>
`;
exports[`Storyshots Custom|Decorator for Vue Render 1`] = `
<div
style="border: medium solid blue;"
>
<div
style="border: medium solid red;"
>
<button
class="button"
style="color: pink; border-color: pink;"
>
renders component: MyButton!
</button>
</div>
</div>
`;
exports[`Storyshots Custom|Decorator for Vue Template 1`] = `
<div
style="border: medium solid blue;"
>
<div
style="border: medium solid red;"
>
<button
class="button"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
MyButton with template!
</button>
</div>
</div>
`;
exports[`Storyshots Custom|Decorator for Vue With Data 1`] = `
<div
style="border: medium solid blue;"
>
<div
style="border: medium solid red;"
>
<pre>
{
"id": "custom-decorator-for-vue--with-data",
"kind": "Custom|Decorator for Vue",
"name": "With Data",
"story": "With Data",
"customContext": 52,
"parameters": {
"options": {
"hierarchyRootSeparator": {},
"hierarchySeparator": {}
},
"docs": {
"iframeHeight": "60px"
},
"globalParameter": "globalParameter",
"framework": "vue",
"customParameter": 42
}
}
</pre>
</div>
</div>
`;
exports[`Storyshots Custom|Method for rendering Vue JSX 1`] = `
<button
class="button"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
MyButton rendered with JSX!
</button>
`;
exports[`Storyshots Custom|Method for rendering Vue Pre Registered Component 1`] = `
<p>
<em>
This component was pre-registered in .storybook/config.js
</em>
<br />
<button
class="button"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
MyButton rendered in a template!
</button>
</p>
`;
exports[`Storyshots Custom|Method for rendering Vue Render 1`] = `
<div>
renders a div with some text in it..
</div>
`;
exports[`Storyshots Custom|Method for rendering Vue Render Component 1`] = `
<button
class="button"
style="color: pink; border-color: pink;"
>
renders component: MyButton!
</button>
`;
exports[`Storyshots Custom|Method for rendering Vue Template 1`] = `
<div>
<h1>
A template
</h1>
<p>
rendered in vue in storybook
</p>
</div>
`;
exports[`Storyshots Custom|Method for rendering Vue Template Component 1`] = `
<button
class="button"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
MyButton rendered in a template!
</button>
`;
exports[`Storyshots Custom|Method for rendering Vue Template Methods 1`] = `
<p>
<em>
Clicking the button will navigate to another story using the 'addon-links'
</em>
<br />
<button
class="button rounded"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
MyButton rendered in a template + props & methods!
</button>
</p>
`;
exports[`Storyshots Custom|Method for rendering Vue Vuex Actions 1`] = `
<button
class="button"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
with vuex: 0!
</button>
`;
exports[`Storyshots Custom|Method for rendering Vue Whatever You Want 1`] = `
<button
class="button"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
with awesomeness: 0!
</button>
`;
exports[`Storyshots Welcome Welcome 1`] = `
<div
class="main"
>
<h1>
Welcome to Storybook for Vue
</h1>
<p>
This is a UI component dev environment for your vue app.
</p>
<p>
We've added some basic stories inside the
<code
class="code"
>
src/stories
</code>
directory.
<br />
A story is a single state of one or more UI components.
You can have as many stories as you want.
<br />
(Basically a story is like a visual test case.)
</p>
<p>
See these sample
<a
class="link"
>
stories
</a>
for a component called
<code
class="code"
>
Button
</code>
.
</p>
<p
style="text-align: center;"
>
<img
src="../logo.png"
/>
</p>
<p>
Just like that, you can add your own components as stories.
<br />
You can also edit those components and see changes right away.
<br />
(Try editing the
<code
class="code"
>
Button
</code>
component
located at
<code
class="code"
>
src/stories/Button.js
</code>
.)
</p>
<p>
Usually we create stories with smaller UI components in the app.
<br />
Have a look at the
<a
class="link"
href="https://storybook.js.org/basics/writing-stories"
target="_blank"
>
Writing Stories
</a>
section in our documentation.
</p>
<p
class="note"
>
<b>
NOTE:
</b>
<br />
Have a look at the
<code
class="code"
>
.storybook/webpack.config.js
</code>
to add webpack
loaders and plugins you are using in this project.
</p>
</div>
`;

37
examples/vue-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot Normal file
View File

@ -0,0 +1,37 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addon|Actions Action And Method 1`] = `
<button
class="button"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
Click me to log the action!
</button>
`;
exports[`Storyshots Addon|Actions Action Only 1`] = `
<button
class="button"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
Click me to log the action!
</button>
`;
exports[`Storyshots Addon|Actions Multiple Actions 1`] = `
<button
class="button"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
(Double) click me to log the action!
</button>
`;
exports[`Storyshots Addon|Actions Multiple Actions Object 1`] = `
<button
class="button"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
(Double) click me to log the action!
</button>
`;

13
examples/vue-kitchen-sink/src/stories/__snapshots__/addon-backgrounds.stories.storyshot Normal file
View File

@ -0,0 +1,13 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addon|Backgrounds Story 1 1`] = `
<button>
You should be able to switch backgrounds for this story
</button>
`;
exports[`Storyshots Addon|Backgrounds Story 2 1`] = `
<button>
This one too!
</button>
`;

18
examples/vue-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot Normal file
View File

@ -0,0 +1,18 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addon|Centered Rounded 1`] = `
<div
style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; align-items: center; overflow: auto;"
>
<div
style="margin: auto; max-height: 100%;"
>
<button
class="button rounded"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
A Button with rounded edges!
</button>
</div>
</div>
`;

23
examples/vue-kitchen-sink/src/stories/__snapshots__/addon-contexts.stories.storyshot Normal file
View File

@ -0,0 +1,23 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addon|Contexts Languages 1`] = `
<div
style="color: white; background: rgb(23, 63, 95); height: 100vh; padding: 10px;"
>
<div>
Your locale is unknown, so I say NULL!
</div>
</div>
`;
exports[`Storyshots Addon|Contexts Simple Css Theming 1`] = `
<div
style="color: white; background: rgb(23, 63, 95); height: 100vh; padding: 10px;"
>
<span>
I'm a children of the injected 'div' (where provides a theming context).
</span>
</div>
`;

51
examples/vue-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot Normal file
View File

@ -0,0 +1,51 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addon|Knobs All Knobs 1`] = `
<div
style="border: 2px dotted; padding: 8px 22px; border-radius: 8px; border-color: deeppink;"
>
<h1>
My name is Jane,
</h1>
<h3>
today is January 20, 2017
</h3>
<p>
I have a stock of 20 apples, costing $2.25 each.
</p>
<p>
Also, I have:
</p>
<ul>
<li>
Laptop
</li>
<li>
Book
</li>
<li>
Whiskey
</li>
</ul>
<p>
Nice to meet you!
</p>
</div>
`;
exports[`Storyshots Addon|Knobs Simple 1`] = `
<div>
I am John Doe and I'm 40 years old.
</div>
`;
exports[`Storyshots Addon|Knobs Xss Safety 1`] = `
<div>
&lt;img src=x onerror="alert('XSS Attack')" &gt;
</div>
`;

10
examples/vue-kitchen-sink/src/stories/__snapshots__/addon-links.stories.storyshot Normal file
View File

@ -0,0 +1,10 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addon|Links Go To Welcome 1`] = `
<button
class="button rounded"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
This buttons links to Welcome!
</button>
`;

19
examples/vue-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot Normal file
View File

@ -0,0 +1,19 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Addon|Notes Note With Html 1`] = `
<p>
🤔😳😯😮
<br />
😄😩😓😱
<br />
🤓😑😶😊
</p>
`;
exports[`Storyshots Addon|Notes Simple Note 1`] = `
<p>
<strong>
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.
</strong>
</p>
`;

3
examples/vue-kitchen-sink/src/stories/__snapshots__/core-errors.stories.storyshot Normal file
View File

@ -0,0 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Core|Errors Null Error 1`] = `<!---->`;

10
examples/vue-kitchen-sink/src/stories/__snapshots__/core-template.stories.storyshot Normal file
View File

@ -0,0 +1,10 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Core|Template String Only 1`] = `
<button
class="button"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
A Button with square edges!
</button>
`;

7
examples/vue-kitchen-sink/src/stories/__snapshots__/core.stories.storyshot Normal file
View File

@ -0,0 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Core|Parameters Passed To Story 1`] = `
<div>
Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{}},"docs":{"iframeHeight":"60px"},"globalParameter":"globalParameter","framework":"vue","chapterParameter":"chapterParameter","storyParameter":"storyParameter","displayName":"passed to story"}
</div>
`;

67
examples/vue-kitchen-sink/src/stories/__snapshots__/custom-decorators.stories.storyshot Normal file
View File

@ -0,0 +1,67 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Custom|Decorator for Vue Render 1`] = `
<div
style="border: medium solid blue;"
>
<div
style="border: medium solid red;"
>
<button
class="button"
style="color: pink; border-color: pink;"
>
renders component: MyButton!
</button>
</div>
</div>
`;
exports[`Storyshots Custom|Decorator for Vue Template 1`] = `
<div
style="border: medium solid blue;"
>
<div
style="border: medium solid red;"
>
<button
class="button"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
MyButton with template!
</button>
</div>
</div>
`;
exports[`Storyshots Custom|Decorator for Vue With Data 1`] = `
<div
style="border: medium solid blue;"
>
<div
style="border: medium solid red;"
>
<pre>
{
"id": "custom-decorator-for-vue--with-data",
"kind": "Custom|Decorator for Vue",
"name": "With Data",
"story": "With Data",
"parameters": {
"options": {
"hierarchyRootSeparator": {},
"hierarchySeparator": {}
},
"docs": {
"iframeHeight": "60px"
},
"globalParameter": "globalParameter",
"framework": "vue",
"customParameter": 42
},
"customContext": 52
}
</pre>
</div>
</div>
`;

96
examples/vue-kitchen-sink/src/stories/__snapshots__/custom-rendering.stories.storyshot Normal file
View File

@ -0,0 +1,96 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Custom|Method for rendering Vue JSX 1`] = `
<button
class="button"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
MyButton rendered with JSX!
</button>
`;
exports[`Storyshots Custom|Method for rendering Vue Pre Registered Component 1`] = `
<p>
<em>
This component was pre-registered in .storybook/config.js
</em>
<br />
<button
class="button"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
MyButton rendered in a template!
</button>
</p>
`;
exports[`Storyshots Custom|Method for rendering Vue Render 1`] = `
<div>
renders a div with some text in it..
</div>
`;
exports[`Storyshots Custom|Method for rendering Vue Render Component 1`] = `
<button
class="button"
style="color: pink; border-color: pink;"
>
renders component: MyButton!
</button>
`;
exports[`Storyshots Custom|Method for rendering Vue Template 1`] = `
<div>
<h1>
A template
</h1>
<p>
rendered in vue in storybook
</p>
</div>
`;
exports[`Storyshots Custom|Method for rendering Vue Template Component 1`] = `
<button
class="button"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
MyButton rendered in a template!
</button>
`;
exports[`Storyshots Custom|Method for rendering Vue Template Methods 1`] = `
<p>
<em>
Clicking the button will navigate to another story using the 'addon-links'
</em>
<br />
<button
class="button rounded"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
MyButton rendered in a template + props & methods!
</button>
</p>
`;
exports[`Storyshots Custom|Method for rendering Vue Vuex Actions 1`] = `
<button
class="button"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
with vuex: 0!
</button>
`;
exports[`Storyshots Custom|Method for rendering Vue Whatever You Want 1`] = `
<button
class="button"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
with awesomeness: 0!
</button>
`;

97
examples/vue-kitchen-sink/src/stories/components/__snapshots__/app.stories.storyshot Normal file
View File

@ -0,0 +1,97 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots App App 1`] = `
<div
id="app"
>
<img
src="./logo.png"
/>
<h1 />
<h2>
Essential Links
</h2>
<ul>
<li>
<a
href="https://vuejs.org"
target="_blank"
>
Core Docs
</a>
</li>
<li>
<a
href="https://forum.vuejs.org"
target="_blank"
>
Forum
</a>
</li>
<li>
<a
href="https://gitter.im/vuejs/vue"
target="_blank"
>
Gitter Chat
</a>
</li>
<li>
<a
href="https://twitter.com/vuejs"
target="_blank"
>
Twitter
</a>
</li>
</ul>
<h2>
Ecosystem
</h2>
<ul>
<li>
<a
href="http://router.vuejs.org/"
target="_blank"
>
vue-router
</a>
</li>
<li>
<a
href="http://vuex.vuejs.org/"
target="_blank"
>
vuex
</a>
</li>
<li>
<a
href="http://vue-loader.vuejs.org/"
target="_blank"
>
vue-loader
</a>
</li>
<li>
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
>
awesome-vue
</a>
</li>
</ul>
</div>
`;

19
examples/vue-kitchen-sink/src/stories/components/__snapshots__/button.stories.storyshot Normal file
View File

@ -0,0 +1,19 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Button Rounded 1`] = `
<button
class="button rounded"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
A Button with rounded edges!
</button>
`;
exports[`Storyshots Button Square 1`] = `
<button
class="button"
style="color: rgb(66, 185, 131); border-color: #42b983;"
>
A Button with square edges!
</button>
`;

140
examples/vue-kitchen-sink/src/stories/components/__snapshots__/welcome.stories.storyshot Normal file
View File

@ -0,0 +1,140 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Welcome Welcome 1`] = `
<div
class="main"
>
<h1>
Welcome to Storybook for Vue
</h1>
<p>
This is a UI component dev environment for your vue app.
</p>
<p>
We've added some basic stories inside the
<code
class="code"
>
src/stories
</code>
directory.
<br />
A story is a single state of one or more UI components.
You can have as many stories as you want.
<br />
(Basically a story is like a visual test case.)
</p>
<p>
See these sample
<a
class="link"
>
stories
</a>
for a component called
<code
class="code"
>
Button
</code>
.
</p>
<p
style="text-align: center;"
>
<img
src="../logo.png"
/>
</p>
<p>
Just like that, you can add your own components as stories.
<br />
You can also edit those components and see changes right away.
<br />
(Try editing the
<code
class="code"
>
Button
</code>
component
located at
<code
class="code"
>
src/stories/Button.js
</code>
.)
</p>
<p>
Usually we create stories with smaller UI components in the app.
<br />
Have a look at the
<a
class="link"
href="https://storybook.js.org/basics/writing-stories"
target="_blank"
>
Writing Stories
</a>
section in our documentation.
</p>
<p
class="note"
>
<b>
NOTE:
</b>
<br />
Have a look at the
<code
class="code"
>
.storybook/webpack.config.js
</code>
to add webpack
loaders and plugins you are using in this project.
</p>
</div>
`;

2
examples/vue-kitchen-sink/src/stories/custom-decorators.stories.js
View File

@ -30,7 +30,7 @@ export const template = () => ({
template: '<my-button>MyButton with template</my-button>',
});
export const withData = ({ parameters, hooks, ...rest }) => ({
export const withData = ({ parameters: { fileName, ...parameters }, hooks, ...rest }) => ({
template: `<pre>${JSON.stringify({ ...rest, parameters }, null, 2)}</pre>`,
});

4
jest.config.js
View File

@ -41,8 +41,8 @@ module.exports = {
'<rootDir>/examples/official-storybook',
],
transform: {
'^.+\\.jsx?$': '<rootDir>/scripts/babel-jest.js',
'^.+\\.tsx?$': '<rootDir>/scripts/babel-jest.js',
'^.+\\.stories\\.[jt]sx?$': '@storybook/addon-storyshots/injectFileName',
'^.+\\.[jt]sx?$': '<rootDir>/scripts/babel-jest.js',
},
testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
testPathIgnorePatterns: [

24
lib/core/src/client/preview/start.js
View File

@ -334,7 +334,7 @@ export default function start(render, { decorateStory } = {}) {
window.__STORYBOOK_ADDONS_CHANNEL__ = channel; // may not be defined
}
let previousExports = new Set();
let previousExports = new Map();
const loadStories = (loadable, framework) => () => {
// Make sure we don't try to define a kind more than once within the same load
const loadedKinds = new Set();
@ -346,18 +346,21 @@ export default function start(render, { decorateStory } = {}) {
reqs = [loadable];
}
let currentExports = new Set();
let currentExports = new Map();
if (reqs) {
reqs.forEach(req => {
req.keys().forEach(filename => {
const fileExports = req(filename);
currentExports.add(fileExports);
currentExports.set(
fileExports,
typeof req.resolve === 'function' ? req.resolve(filename) : null
);
});
});
} else {
const exported = loadable();
if (Array.isArray(exported) && !exported.find(obj => !obj.default)) {
currentExports = new Set(exported);
currentExports = new Map(exported.map(fileExports => [fileExports, null]));
} else if (exported) {
logger.warn(
`Loader function passed to 'configure' should return void or an array of module exports that all contain a 'default' export. Received: ${JSON.stringify(
@ -367,7 +370,7 @@ export default function start(render, { decorateStory } = {}) {
}
}
const removed = [...previousExports].filter(exp => !currentExports.has(exp));
const removed = [...previousExports.keys()].filter(exp => !currentExports.has(exp));
removed.forEach(exp => {
if (exp.default) {
storyStore.removeStoryKind(exp.default.title);
@ -377,7 +380,7 @@ export default function start(render, { decorateStory } = {}) {
storyStore.incrementRevision();
}
const added = [...currentExports].filter(exp => !previousExports.has(exp));
const added = [...currentExports.keys()].filter(exp => !previousExports.has(exp));
added.forEach(fileExports => {
// An old-style story file
if (!fileExports.default) {
@ -404,7 +407,12 @@ export default function start(render, { decorateStory } = {}) {
const kind = clientApi.storiesOf(kindName, true);
// we should always have a framework, rest optional
kind.addParameters({ framework, component, ...params });
kind.addParameters({
framework,
component,
fileName: currentExports.get(fileExports),
...params,
});
(decos || []).forEach(decorator => {
kind.addDecorator(decorator);
@ -443,7 +451,7 @@ export default function start(render, { decorateStory } = {}) {
*/
const configure = (loadable, m, framework) => {
if (m && m.hot && m.hot.dispose) {
({ previousExports = new Set() } = m.hot.data || {});
({ previousExports = new Map() } = m.hot.data || {});
m.hot.dispose(data => {
loaded = false;

165
yarn.lock
View File

@ -2382,6 +2382,15 @@
chalk "^2.0.1"
slash "^2.0.0"
"@jest/console@^24.9.0":
version "24.9.0"
resolved "https://registry.yarnpkg.com/@jest/console/-/console-24.9.0.tgz#79b1bc06fb74a8cfb01cbdedf945584b1b9707f0"
integrity sha512-Zuj6b8TnKXi3q4ymac8EQfc3ea/uhLeCGThFqXeC8H9/raaH8ARPUTdId+XyGd03Z4In0/VjD2OYFcBF09fNLQ==
dependencies:
"@jest/source-map" "^24.9.0"
chalk "^2.0.1"
slash "^2.0.0"
"@jest/core@^24.8.0":
version "24.8.0"
resolved "https://registry.yarnpkg.com/@jest/core/-/core-24.8.0.tgz#fbbdcd42a41d0d39cddbc9f520c8bab0c33eed5b"
@ -2434,6 +2443,15 @@
jest-message-util "^24.8.0"
jest-mock "^24.8.0"
"@jest/fake-timers@^24.9.0":
version "24.9.0"
resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-24.9.0.tgz#ba3e6bf0eecd09a636049896434d306636540c93"
integrity sha512-eWQcNa2YSwzXWIMC5KufBh3oWRIijrQFROsIqt6v/NS9Io/gknw1jsAC9c+ih/RQX4A3O7SeWAhQeN0goKhT9A==
dependencies:
"@jest/types" "^24.9.0"
jest-message-util "^24.9.0"
jest-mock "^24.9.0"
"@jest/reporters@^24.8.0":
version "24.8.0"
resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-24.8.0.tgz#075169cd029bddec54b8f2c0fc489fd0b9e05729"
@ -2470,6 +2488,15 @@
graceful-fs "^4.1.15"
source-map "^0.6.0"
"@jest/source-map@^24.9.0":
version "24.9.0"
resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-24.9.0.tgz#0e263a94430be4b41da683ccc1e6bffe2a191714"
integrity sha512-/Xw7xGlsZb4MJzNDgB7PW5crou5JqWiBQaz6xyPd3ArOg2nfn/PunV8+olXbbEZzNl591o5rWKE9BRDaFAuIBg==
dependencies:
callsites "^3.0.0"
graceful-fs "^4.1.15"
source-map "^0.6.0"
"@jest/test-result@^24.8.0":
version "24.8.0"
resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-24.8.0.tgz#7675d0aaf9d2484caa65e048d9b467d160f8e9d3"
@ -2479,6 +2506,15 @@
"@jest/types" "^24.8.0"
"@types/istanbul-lib-coverage" "^2.0.0"
"@jest/test-result@^24.9.0":
version "24.9.0"
resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-24.9.0.tgz#11796e8aa9dbf88ea025757b3152595ad06ba0ca"
integrity sha512-XEFrHbBonBJ8dGp2JmF8kP/nQI/ImPpygKHwQ/SY+es59Z3L5PI4Qb9TQQMAEeYsThG1xF0k6tmG0tIKATNiiA==
dependencies:
"@jest/console" "^24.9.0"
"@jest/types" "^24.9.0"
"@types/istanbul-lib-coverage" "^2.0.0"
"@jest/test-sequencer@^24.8.0":
version "24.8.0"
resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-24.8.0.tgz#2f993bcf6ef5eb4e65e8233a95a3320248cf994b"
@ -2510,6 +2546,28 @@
source-map "^0.6.1"
write-file-atomic "2.4.1"
"@jest/transform@^24.9.0":
version "24.9.0"
resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-24.9.0.tgz#4ae2768b296553fadab09e9ec119543c90b16c56"
integrity sha512-TcQUmyNRxV94S0QpMOnZl0++6RMiqpbH/ZMccFB/amku6Uwvyb1cjYX7xkp5nGNkbX4QPH/FcB6q1HBTHynLmQ==
dependencies:
"@babel/core" "^7.1.0"
"@jest/types" "^24.9.0"
babel-plugin-istanbul "^5.1.0"
chalk "^2.0.1"
convert-source-map "^1.4.0"
fast-json-stable-stringify "^2.0.0"
graceful-fs "^4.1.15"
jest-haste-map "^24.9.0"
jest-regex-util "^24.9.0"
jest-util "^24.9.0"
micromatch "^3.1.10"
pirates "^4.0.1"
realpath-native "^1.1.0"
slash "^2.0.0"
source-map "^0.6.1"
write-file-atomic "2.4.1"
"@jest/types@^24.7.0", "@jest/types@^24.8.0":
version "24.8.0"
resolved "https://registry.yarnpkg.com/@jest/types/-/types-24.8.0.tgz#f31e25948c58f0abd8c845ae26fcea1491dea7ad"
@ -2519,6 +2577,15 @@
"@types/istanbul-reports" "^1.1.1"
"@types/yargs" "^12.0.9"
"@jest/types@^24.9.0":
version "24.9.0"
resolved "https://registry.yarnpkg.com/@jest/types/-/types-24.9.0.tgz#63cb26cb7500d069e5a389441a7c6ab5e909fc59"
integrity sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==
dependencies:
"@types/istanbul-lib-coverage" "^2.0.0"
"@types/istanbul-reports" "^1.1.1"
"@types/yargs" "^13.0.0"
"@lasso/marko-taglib@^1.0.13":
version "1.0.15"
resolved "https://registry.yarnpkg.com/@lasso/marko-taglib/-/marko-taglib-1.0.15.tgz#c0076ce265d9cbb2c2f84adb5c8101fcac6118a8"
@ -4339,11 +4406,23 @@
resolved "https://registry.yarnpkg.com/@types/websql/-/websql-0.0.27.tgz#621a666a7f02018e7cbb4abab956a25736c27d71"
integrity sha1-Yhpman8CAY58u0q6uVaiVzbCfXE=
"@types/yargs-parser@*":
version "13.1.0"
resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-13.1.0.tgz#c563aa192f39350a1d18da36c5a8da382bbd8228"
integrity sha512-gCubfBUZ6KxzoibJ+SCUc/57Ms1jz5NjHe4+dI2krNmU5zCPAphyLJYyTOg06ueIyfj+SaCUqmzun7ImlxDcKg==
"@types/yargs@^12.0.2", "@types/yargs@^12.0.9":
version "12.0.12"
resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-12.0.12.tgz#45dd1d0638e8c8f153e87d296907659296873916"
integrity sha512-SOhuU4wNBxhhTHxYaiG5NY4HBhDIDnJF60GU+2LqHAdKKer86//e4yg69aENCtQ04n0ovz+tq2YPME5t5yp4pw==
"@types/yargs@^13.0.0":
version "13.0.2"
resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-13.0.2.tgz#a64674fc0149574ecd90ba746e932b5a5f7b3653"
integrity sha512-lwwgizwk/bIIU+3ELORkyuOgDjCh7zuWDFqRtPPhhVgq9N1F7CvLNKg1TX4f2duwtKQ0p044Au9r1PLIXHrIzQ==
dependencies:
"@types/yargs-parser" "*"
"@typescript-eslint/eslint-plugin@1.6.0":
version "1.6.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-1.6.0.tgz#a5ff3128c692393fb16efa403ec7c8a5593dab0f"
@ -16830,6 +16909,25 @@ jest-haste-map@^24.8.0:
optionalDependencies:
fsevents "^1.2.7"
jest-haste-map@^24.9.0:
version "24.9.0"
resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-24.9.0.tgz#b38a5d64274934e21fa417ae9a9fbeb77ceaac7d"
integrity sha512-kfVFmsuWui2Sj1Rp1AJ4D9HqJwE4uwTlS/vO+eRUaMmd54BFpli2XhMQnPC2k4cHFVbB2Q2C+jtI1AGLgEnCjQ==
dependencies:
"@jest/types" "^24.9.0"
anymatch "^2.0.0"
fb-watchman "^2.0.0"
graceful-fs "^4.1.15"
invariant "^2.2.4"
jest-serializer "^24.9.0"
jest-util "^24.9.0"
jest-worker "^24.9.0"
micromatch "^3.1.10"
sane "^4.0.3"
walker "^1.0.7"
optionalDependencies:
fsevents "^1.2.7"
jest-image-snapshot@^2.8.2:
version "2.9.0"
resolved "https://registry.yarnpkg.com/jest-image-snapshot/-/jest-image-snapshot-2.9.0.tgz#38d9ac6882c3efeb7125b0cbd58a5cecfb984f77"
@ -16901,6 +16999,20 @@ jest-message-util@^24.8.0:
slash "^2.0.0"
stack-utils "^1.0.1"
jest-message-util@^24.9.0:
version "24.9.0"
resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-24.9.0.tgz#527f54a1e380f5e202a8d1149b0ec872f43119e3"
integrity sha512-oCj8FiZ3U0hTP4aSui87P4L4jC37BtQwUMqk+zk/b11FR19BJDeZsZAvIHutWnmtw7r85UmR3CEWZ0HWU2mAlw==
dependencies:
"@babel/code-frame" "^7.0.0"
"@jest/test-result" "^24.9.0"
"@jest/types" "^24.9.0"
"@types/stack-utils" "^1.0.1"
chalk "^2.0.1"
micromatch "^3.1.10"
slash "^2.0.0"
stack-utils "^1.0.1"
jest-mock@^24.0.0, jest-mock@^24.5.0, jest-mock@^24.8.0:
version "24.8.0"
resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-24.8.0.tgz#2f9d14d37699e863f1febf4e4d5a33b7fdbbde56"
@ -16908,6 +17020,13 @@ jest-mock@^24.0.0, jest-mock@^24.5.0, jest-mock@^24.8.0:
dependencies:
"@jest/types" "^24.8.0"
jest-mock@^24.9.0:
version "24.9.0"
resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-24.9.0.tgz#c22835541ee379b908673ad51087a2185c13f1c6"
integrity sha512-3BEYN5WbSq9wd+SyLDES7AHnjH9A/ROBwmz7l2y+ol+NtSFO8DYiEBzoO1CeFc9a8DYy10EO4dDFVv/wN3zl1w==
dependencies:
"@jest/types" "^24.9.0"
jest-pnp-resolver@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.1.tgz#ecdae604c077a7fbc70defb6d517c3c1c898923a"
@ -16941,6 +17060,11 @@ jest-regex-util@^24.3.0:
resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-24.3.0.tgz#d5a65f60be1ae3e310d5214a0307581995227b36"
integrity sha512-tXQR1NEOyGlfylyEjg1ImtScwMq8Oh3iJbGTjN7p0J23EuVX1MA8rwU69K4sLbCmwzgCUbVkm0FkSF9TdzOhtg==
jest-regex-util@^24.9.0:
version "24.9.0"
resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-24.9.0.tgz#c13fb3380bde22bf6575432c493ea8fe37965636"
integrity sha512-05Cmb6CuxaA+Ys6fjr3PhvV3bGQmO+2p2La4hFbU+W5uOc479f7FdLXUWXw4pYMAhhSZIuKHwSXSu6CsSBAXQA==
jest-resolve-dependencies@^24.8.0:
version "24.8.0"
resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-24.8.0.tgz#19eec3241f2045d3f990dba331d0d7526acff8e0"
@ -17041,6 +17165,11 @@ jest-serializer@^24.0.0-alpha.6, jest-serializer@^24.4.0:
resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-24.4.0.tgz#f70c5918c8ea9235ccb1276d232e459080588db3"
integrity sha512-k//0DtglVstc1fv+GY/VHDIjrtNjdYvYjMlbLUed4kxrE92sIUewOi5Hj3vrpB8CXfkJntRPDRjCrCvUhBdL8Q==
jest-serializer@^24.9.0:
version "24.9.0"
resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-24.9.0.tgz#e6d7d7ef96d31e8b9079a714754c5d5c58288e73"
integrity sha512-DxYipDr8OvfrKH3Kel6NdED3OXxjvxXZ1uIY2I9OFbGg+vUkkg7AGvi65qbhbWNPvDckXmzMPbK3u3HaDO49bQ==
jest-snapshot@^24.1.0, jest-snapshot@^24.8.0:
version "24.8.0"
resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-24.8.0.tgz#3bec6a59da2ff7bc7d097a853fb67f9d415cb7c6"
@ -17084,6 +17213,24 @@ jest-util@^24.0.0, jest-util@^24.5.0, jest-util@^24.8.0:
slash "^2.0.0"
source-map "^0.6.0"
jest-util@^24.9.0:
version "24.9.0"
resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-24.9.0.tgz#7396814e48536d2e85a37de3e4c431d7cb140162"
integrity sha512-x+cZU8VRmOJxbA1K5oDBdxQmdq0OIdADarLxk0Mq+3XS4jgvhG/oKGWcIDCtPG0HgjxOYvF+ilPJQsAyXfbNOg==
dependencies:
"@jest/console" "^24.9.0"
"@jest/fake-timers" "^24.9.0"
"@jest/source-map" "^24.9.0"
"@jest/test-result" "^24.9.0"
"@jest/types" "^24.9.0"
callsites "^3.0.0"
chalk "^2.0.1"
graceful-fs "^4.1.15"
is-ci "^2.0.0"
mkdirp "^0.5.1"
slash "^2.0.0"
source-map "^0.6.0"
jest-validate@^24.8.0:
version "24.8.0"
resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-24.8.0.tgz#624c41533e6dfe356ffadc6e2423a35c2d3b4849"
@ -17165,6 +17312,14 @@ jest-worker@^24.0.0-alpha.6, jest-worker@^24.6.0:
merge-stream "^1.0.1"
supports-color "^6.1.0"
jest-worker@^24.9.0:
version "24.9.0"
resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-24.9.0.tgz#5dbfdb5b2d322e98567898238a9697bcce67b3e5"
integrity sha512-51PE4haMSXcHohnSMdM42anbvZANYTqMrr52tVKPqqsPJMzoP6FYYDVqahX/HrAoKEKz3uUPzSvKs9A3qR4iVw==
dependencies:
merge-stream "^2.0.0"
supports-color "^6.1.0"
"jest-zone-patch@>=0.0.9 <1.0.0":
version "0.0.10"
resolved "https://registry.yarnpkg.com/jest-zone-patch/-/jest-zone-patch-0.0.10.tgz#58252f44ab4aad45aaed62a705819577b9709b82"
@ -19621,6 +19776,11 @@ merge-stream@^1.0.1:
dependencies:
readable-stream "^2.0.1"
merge-stream@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
merge-trees@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/merge-trees/-/merge-trees-1.0.1.tgz#ccbe674569787f9def17fd46e6525f5700bbd23e"
@ -29022,6 +29182,11 @@ tryer@^1.0.1:
resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==
ts-dedent@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/ts-dedent/-/ts-dedent-1.1.0.tgz#67983940793183dc7c7f820acb66ba02cdc33c6e"
integrity sha512-CVCvDwMBWZKjDxpN3mU/Dx1v3k+sJgE8nrhXcC9vRopRfoa7vVzilNvHEAUi5jQnmFHpnxDx5jZdI1TpG8ny2g==
ts-invariant@^0.4.0:
version "0.4.4"
resolved "https://registry.yarnpkg.com/ts-invariant/-/ts-invariant-0.4.4.tgz#97a523518688f93aafad01b0e80eb803eb2abd86"