+
+ This is a UI component dev environment for your svelte app.
+
+
+
+
+
+
+ We've added some basic stories inside the
+
+ src/stories
+
+ directory.
+
+
+ A story is like a visual test case
+
+
+ and represents a single state of one or more UI components.
+ You can have as many stories as you want.
+
+
+
+
+
+
+ Svelte
+
+
+
+
+
+
+ Just like that, you can add your own components as stories.
+ You can also edit those components and see changes right away.
+
+
+
+ (Try editing the
+
+ Button
+
+ component
+ located at
+
+ src/stories/views/Welcome.svelte
+
+ .)
+
+
+
+
+
+
+ Usually we create stories with smaller UI components in the app.
+
+
+ Have a look at the
+
+
+ Writing Stories
+
+
+ section in our documentation.
+
+
+
+
+
+
+ NOTE:
+
+
+
+
+
+ Have a look at the
+
+
+ .storybook/webpack.config.js
+
+
+ to add webpack
+ loaders and plugins you are using in this project.
+
+
+
diff --git a/examples/svelte3-kitchen-sink/src/stories/addon-notes.stories.svelte b/examples/svelte3-kitchen-sink/src/stories/addon-notes.stories.svelte
new file mode 100644
index 000000000000..d9c38476f6eb
--- /dev/null
+++ b/examples/svelte3-kitchen-sink/src/stories/addon-notes.stories.svelte
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+My notes on emojies
+
+ It's not all that important to be honest, but..
+
+ Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
+ `
+}}>
+
+
diff --git a/examples/svelte3-kitchen-sink/src/stories/index.stories.svelte b/examples/svelte3-kitchen-sink/src/stories/index.stories.svelte
new file mode 100644
index 000000000000..676ce793caec
--- /dev/null
+++ b/examples/svelte3-kitchen-sink/src/stories/index.stories.svelte
@@ -0,0 +1,81 @@
+
+
+
+
+
+
+
Welcome to Storybook for Svelte 3
+
+ This is a UI component dev environment for your svelte app.
+
+
+ We've added some basic stories inside the
+ src/stories directory.
+ A story is like a visual test case
+ and represents a single state of one or more UI components.
+ You can have as many stories as you want.
+
+
+
+
+
+
+
+ Just like that, you can add your own components as stories.
+ You can also edit those components and see changes right away.
+
+ (Try editing the Button component
+ located at src/stories/views/Welcome.svelte.)
+
+
+ Usually we create stories with smaller UI components in the app.
+ Have a look at the
+ Writing Stories
+ section in our documentation.
+
+
+ NOTE:
+
+ Have a look at the
+ .storybook/webpack.config.js
+ to add webpack
+ loaders and plugins you are using in this project.
+
+ In Storybook for Svelte 3, storiesOf allows to prebind the
+ StoriesOf component.
+
+
+
{`
+
+
+
+
+ First story of first context StoriesOf
+
+
+
+
+
+ First story of first context StoriesOf
+
+
+`}
+
+
+ It also allows to prebind the
+
+ kind of stories,
+ making it possible to completely spare the StoriesOf component
+ in most cases.
+
+
+
+
+
+
+ First story of the first StoriesOf
+
+
+ Second story of the first StoriesOf
+
+
+
+
+
+ First story of the other StoriesOf
+
+
+ Second story of the other StoriesOf
+
+
diff --git a/examples/svelte3-kitchen-sink/src/stories/syntax-context-story.stories.svelte b/examples/svelte3-kitchen-sink/src/stories/syntax-context-story.stories.svelte
new file mode 100644
index 000000000000..cece841058b2
--- /dev/null
+++ b/examples/svelte3-kitchen-sink/src/stories/syntax-context-story.stories.svelte
@@ -0,0 +1,50 @@
+
+
+
+ In Storybook for Svelte 3, storiesOf allows to prebind the
+ module argument, but also the stories kind. In most cases,
+ you can skip using the StoriesOf component altogether.
+
+
+
{`
+
+
+
+ First Story
+
+
+
+ Another Story
+
+`}
+
+
+ In cases where you need more control, like adding multiple kinds of stories
+ in the same stories file (is this a good idea?), you can still bind only the
+
+ StoriesOf's module
+ argument.
+
+
+
+
+
+ First Story
+
+
+
+ Another Story
+
diff --git a/examples/svelte3-kitchen-sink/src/stories/syntax-fully-declarative.stories.svelte b/examples/svelte3-kitchen-sink/src/stories/syntax-fully-declarative.stories.svelte
new file mode 100644
index 000000000000..d71ae32c765e
--- /dev/null
+++ b/examples/svelte3-kitchen-sink/src/stories/syntax-fully-declarative.stories.svelte
@@ -0,0 +1,94 @@
+
+
+
+
+
+ Fully declarative syntax uses only StoriesOf and
+ Story components.
+
+
+
+
+
+
+ This is the most direct form of fully declarative syntax, unfortunately it
+ triggers a warning in svelte's compiler about undefined `module` variable.
+
+
+
+
+ First story of the first StoriesOf
+
+
+
+ Second story of the first StoriesOf
+
+
+
+
+
+ Aliasing `module` to another variable in script allows to work around
+ svelte compiler's warning.
+
+
{`
+
+
+
+
+
+
Add some svelte here!
+
+
+
+
Story 2
+
+
+
+ `}
+
+ However, you'll probably want to use the
+
+ storiesOf
+
+ function, for a lighter template code.
+
+
+
+
+ First story of the second StoriesOf
+
+
+
+ Second story of the second StoriesOf
+
+
diff --git a/examples/svelte3-kitchen-sink/src/stories/views/ActionKnobView.svelte b/examples/svelte3-kitchen-sink/src/stories/views/ActionKnobView.svelte
new file mode 100644
index 000000000000..7593383ff725
--- /dev/null
+++ b/examples/svelte3-kitchen-sink/src/stories/views/ActionKnobView.svelte
@@ -0,0 +1,17 @@
+
+
+
+
I am interactive
+
diff --git a/examples/svelte3-kitchen-sink/src/stories/views/ButtonView.svelte b/examples/svelte3-kitchen-sink/src/stories/views/ButtonView.svelte
new file mode 100644
index 000000000000..9af4bcdf88be
--- /dev/null
+++ b/examples/svelte3-kitchen-sink/src/stories/views/ButtonView.svelte
@@ -0,0 +1,24 @@
+
+