mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 22:21:27 +08:00
Merge pull request #19429 from storybookjs/shilman/delete-vue-kitchen-sink
Vue: Delete vue-cli/vue-kitchen-sink examples
This commit is contained in:
Michael Shilman
GitHub
commit
c9ebf3d6f9
@ -125,7 +125,7 @@ jobs:
|
||||
executor:
|
||||
class: medium+
|
||||
name: sb_node_14_browsers
|
||||
parallelism: 8
|
||||
parallelism: 7
|
||||
steps:
|
||||
- git-shallow-clone/checkout_advanced:
|
||||
clone_options: '--depth 1 --verbose'
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
/* eslint-disable @typescript-eslint/ban-ts-comment */
|
||||
import Vue from 'vue';
|
||||
|
||||
// this is defined in @storybook/vue but not exported,
|
||||
@ -7,13 +8,15 @@ const VALUES = 'STORYBOOK_VALUES';
|
||||
function getRenderedTree(story: any) {
|
||||
const component = story.render();
|
||||
|
||||
// @ts-ignore FIXME storyshots type error
|
||||
const vm = new Vue({
|
||||
// @ts-ignore FIXME storyshots type error
|
||||
render(h) {
|
||||
return h(component);
|
||||
},
|
||||
});
|
||||
|
||||
// @ts-expect-error (Converted from ts-ignore)
|
||||
// @ts-ignore FIXME storyshots type error
|
||||
vm[VALUES] = story.initialArgs;
|
||||
|
||||
return vm.$mount().$el;
|
||||
|
||||
@ -1,24 +0,0 @@
|
||||
import type { StorybookConfig } from '@storybook/vue-webpack5';
|
||||
|
||||
const mainConfig: StorybookConfig = {
|
||||
stories: ['../src/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
|
||||
logLevel: 'debug',
|
||||
addons: [
|
||||
'@storybook/addon-docs',
|
||||
'@storybook/addon-controls',
|
||||
'@storybook/addon-storysource',
|
||||
'@storybook/preset-scss',
|
||||
],
|
||||
core: {
|
||||
channelOptions: { allowFunction: false, maxDepth: 10 },
|
||||
disableTelemetry: true,
|
||||
},
|
||||
features: {
|
||||
storyStoreV7: true,
|
||||
buildStoriesJson: true,
|
||||
breakingChangesV7: true,
|
||||
},
|
||||
framework: '@storybook/vue-webpack5',
|
||||
};
|
||||
|
||||
module.exports = mainConfig;
|
||||
@ -1,5 +0,0 @@
|
||||
export const parameters = {
|
||||
docs: {
|
||||
iframeHeight: '60px',
|
||||
},
|
||||
};
|
||||
@ -1,8 +0,0 @@
|
||||
# Storybook Demo
|
||||
|
||||
This is a demo app to test Vue-CLI integration with Storybook.
|
||||
Please check vue-kitchen-sink for more examples of different ways to integrate with Storybook.
|
||||
|
||||
Run `yarn install` to sync Storybook module with the source code and run `yarn storybook` to start the Storybook.
|
||||
|
||||
You can also try `yarn serve` to see that vue-cli service also works.
|
||||
@ -1,3 +0,0 @@
|
||||
module.exports = {
|
||||
presets: ['@vue/cli-plugin-babel/preset'],
|
||||
};
|
||||
@ -1,30 +0,0 @@
|
||||
{
|
||||
"name": "vue-cli-example",
|
||||
"version": "7.0.0-alpha.35",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "vue-cli-service build",
|
||||
"build-storybook": "storybook build",
|
||||
"serve": "vue-cli-service serve",
|
||||
"storybook": "storybook dev -p 9009 --no-manager-cache"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^2.6.12",
|
||||
"vue-class-component": "^7.2.6",
|
||||
"vue-property-decorator": "^9.1.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-controls": "7.0.0-alpha.35",
|
||||
"@storybook/addon-essentials": "7.0.0-alpha.35",
|
||||
"@storybook/preset-scss": "^1.0.3",
|
||||
"@storybook/source-loader": "7.0.0-alpha.35",
|
||||
"@storybook/vue": "7.0.0-alpha.35",
|
||||
"@storybook/vue-webpack5": "7.0.0-alpha.35",
|
||||
"@vue/cli-plugin-babel": "^5.0.4",
|
||||
"@vue/cli-plugin-typescript": "^5.0.4",
|
||||
"@vue/cli-service": "^5.0.4",
|
||||
"storybook": "7.0.0-alpha.35",
|
||||
"typescript": "~4.6.3",
|
||||
"vue-template-compiler": "^2.6.14"
|
||||
}
|
||||
}
|
||||
@ -1,26 +0,0 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<h1>Welcome to a Vue app managed by vue-cli</h1>
|
||||
<Button>Do not click me</Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import Button from './button/Button.vue';
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
Button,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
font-size: 100%;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
</style>
|
||||
@ -1,28 +0,0 @@
|
||||
import type { Meta, StoryFn } from '@storybook/vue';
|
||||
import Button from './Button.vue';
|
||||
|
||||
export default {
|
||||
title: 'Button',
|
||||
component: Button,
|
||||
parameters: {
|
||||
controls: {
|
||||
expanded: true,
|
||||
},
|
||||
},
|
||||
} as Meta;
|
||||
|
||||
export const ButtonWithProps: StoryFn = (args, { argTypes }) => ({
|
||||
components: { Button },
|
||||
template: '<Button :size="size">Button text</Button>',
|
||||
props: Object.keys(argTypes),
|
||||
});
|
||||
ButtonWithProps.args = {
|
||||
size: 'big',
|
||||
};
|
||||
|
||||
export const WithDefaultRender = {
|
||||
args: {
|
||||
size: 'small',
|
||||
label: 'Button with default render',
|
||||
},
|
||||
};
|
||||
@ -1,49 +0,0 @@
|
||||
<template>
|
||||
<div class="button" :class="`size-${size}`">
|
||||
<!-- @slot Button content, e.g. label text -->
|
||||
<slot>
|
||||
{{label}}
|
||||
</slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import Component from 'vue-class-component';
|
||||
import { Prop } from 'vue-property-decorator';
|
||||
import { ButtonSize } from './types';
|
||||
|
||||
/**
|
||||
* This is a very nice button. It comes in three sizes!
|
||||
**/
|
||||
@Component
|
||||
export default class Button extends Vue {
|
||||
/**
|
||||
* The size of the button
|
||||
* @values default,small,big
|
||||
*/
|
||||
@Prop({ type: String, default: 'default' }) readonly size!: ButtonSize;
|
||||
|
||||
/**
|
||||
* Label of the button
|
||||
*/
|
||||
@Prop({ type: String, default: '' }) readonly label!: string;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.button {
|
||||
border: 1px solid #000;
|
||||
line-height: 2em;
|
||||
padding: 0 1em;
|
||||
display: inline-block;
|
||||
border-radius: 3px;
|
||||
|
||||
&.size-small {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
&.size-big {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,2 +0,0 @@
|
||||
export const ButtonSizes = ['default', 'small', 'big'] as const;
|
||||
export type ButtonSize = typeof ButtonSizes[number];
|
||||
@ -1,6 +0,0 @@
|
||||
import Vue from 'vue';
|
||||
import App from './App.vue';
|
||||
|
||||
new Vue({
|
||||
render: (h) => h(App),
|
||||
}).$mount('#app');
|
||||
4
code/examples/vue-cli/src/shims-vue.d.ts
vendored
4
code/examples/vue-cli/src/shims-vue.d.ts
vendored
@ -1,4 +0,0 @@
|
||||
declare module '*.vue' {
|
||||
import Vue from 'vue'
|
||||
export default Vue
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"module": "CommonJS",
|
||||
"strict": true,
|
||||
"jsx": "preserve",
|
||||
"importHelpers": true,
|
||||
"moduleResolution": "node",
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"sourceMap": true,
|
||||
"skipLibCheck": true,
|
||||
"lib": ["esnext", "dom", "dom.iterable", "scripthost"]
|
||||
},
|
||||
"include": ["src/**/*"],
|
||||
"exclude": ["**/node_modules"]
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
{
|
||||
"presets": ["@vue/babel-preset-jsx"]
|
||||
}
|
||||
15
code/examples/vue-kitchen-sink/.gitignore
vendored
15
code/examples/vue-kitchen-sink/.gitignore
vendored
@ -1,15 +0,0 @@
|
||||
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
node_modules
|
||||
|
||||
# testing
|
||||
coverage
|
||||
|
||||
# production
|
||||
build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env
|
||||
npm-debug.log
|
||||
@ -1,26 +0,0 @@
|
||||
import type { StorybookConfig } from '@storybook/vue-webpack5';
|
||||
|
||||
const mainConfig: StorybookConfig = {
|
||||
stories: ['../src/stories/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
|
||||
logLevel: 'debug',
|
||||
addons: [
|
||||
'@storybook/addon-docs',
|
||||
'@storybook/addon-controls',
|
||||
'@storybook/addon-storysource',
|
||||
'@storybook/addon-actions',
|
||||
'@storybook/addon-interactions',
|
||||
'@storybook/addon-links',
|
||||
'@storybook/addon-viewport',
|
||||
'@storybook/addon-backgrounds',
|
||||
'@storybook/addon-a11y',
|
||||
'@storybook/addon-highlight',
|
||||
],
|
||||
core: {
|
||||
channelOptions: { allowFunction: false, maxDepth: 10 },
|
||||
disableTelemetry: true,
|
||||
},
|
||||
staticDirs: ['../public'],
|
||||
framework: '@storybook/vue-webpack5',
|
||||
};
|
||||
|
||||
module.exports = mainConfig;
|
||||
@ -1,14 +0,0 @@
|
||||
import Vue from 'vue';
|
||||
import Vuex from 'vuex';
|
||||
|
||||
import MyButton from '../src/stories/Button.vue';
|
||||
|
||||
Vue.component('my-button', MyButton);
|
||||
Vue.use(Vuex);
|
||||
|
||||
export const parameters = {
|
||||
docs: {
|
||||
iframeHeight: '60px',
|
||||
},
|
||||
globalParameter: 'globalParameter',
|
||||
};
|
||||
@ -1,3 +0,0 @@
|
||||
# Storybook Demo
|
||||
|
||||
This is a demo app to test VueJs integration with Storybook. Run `yarn install` to sync Storybook module with the source code and run `yarn storybook` to start the Storybook.
|
||||
@ -1,11 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>demo2</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script src="/dist/build.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,16 +0,0 @@
|
||||
const config = require('../../jest.config');
|
||||
|
||||
module.exports = {
|
||||
...config,
|
||||
roots: [__dirname],
|
||||
transform: {
|
||||
...config.transform,
|
||||
'.*\\.(vue)$': '<rootDir>/node_modules/jest-vue-preprocessor',
|
||||
},
|
||||
moduleFileExtensions: [...config.moduleFileExtensions, 'vue'],
|
||||
moduleNameMapper: {
|
||||
...config.moduleNameMapper,
|
||||
// TMP: disable MDX until we upgrade vue-kitchen-sink to latest
|
||||
'\\.mdx': '<rootDir>/__mocks__/fileMock.js',
|
||||
},
|
||||
};
|
||||
@ -1,52 +0,0 @@
|
||||
{
|
||||
"name": "vue-example",
|
||||
"version": "7.0.0-alpha.35",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
|
||||
"build-storybook": "storybook build",
|
||||
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
|
||||
"storybook": "storybook dev -p 9009 --no-manager-cache"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^2.6.12",
|
||||
"vuex": "^3.6.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.10",
|
||||
"@storybook/addon-a11y": "7.0.0-alpha.35",
|
||||
"@storybook/addon-actions": "7.0.0-alpha.35",
|
||||
"@storybook/addon-backgrounds": "7.0.0-alpha.35",
|
||||
"@storybook/addon-controls": "7.0.0-alpha.35",
|
||||
"@storybook/addon-docs": "7.0.0-alpha.35",
|
||||
"@storybook/addon-highlight": "7.0.0-alpha.35",
|
||||
"@storybook/addon-interactions": "7.0.0-alpha.35",
|
||||
"@storybook/addon-links": "7.0.0-alpha.35",
|
||||
"@storybook/addon-storyshots": "7.0.0-alpha.35",
|
||||
"@storybook/addon-storysource": "7.0.0-alpha.35",
|
||||
"@storybook/addon-viewport": "7.0.0-alpha.35",
|
||||
"@storybook/addons": "7.0.0-alpha.35",
|
||||
"@storybook/jest": "^0.0.10",
|
||||
"@storybook/source-loader": "7.0.0-alpha.35",
|
||||
"@storybook/testing-library": "0.0.14-next.0",
|
||||
"@storybook/vue": "7.0.0-alpha.35",
|
||||
"@storybook/vue-webpack5": "7.0.0-alpha.35",
|
||||
"@vue/babel-preset-jsx": "^1.2.4",
|
||||
"babel-loader": "^8.2.5",
|
||||
"cross-env": "^7.0.3",
|
||||
"file-loader": "^6.2.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"storybook": "7.0.0-alpha.35",
|
||||
"svg-url-loader": "^7.1.1",
|
||||
"vue-loader": "^15.9.6",
|
||||
"vue-style-loader": "^4.1.3",
|
||||
"vue-template-compiler": "^2.6.12",
|
||||
"webpack": "5",
|
||||
"webpack-dev-server": "^4.8.1"
|
||||
},
|
||||
"storybook": {
|
||||
"chromatic": {
|
||||
"projectToken": "cyxj0e38bqj"
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB |
@ -1,60 +0,0 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<img src="./logo.png">
|
||||
<h1></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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'app',
|
||||
data () {
|
||||
return {
|
||||
msg: 'Welcome to Your Vue.js App'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#app {
|
||||
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
@ -1,8 +0,0 @@
|
||||
import Vue from 'vue';
|
||||
import App from './App.vue';
|
||||
|
||||
// eslint-disable-next-line
|
||||
new Vue({
|
||||
el: '#app',
|
||||
render: (h) => h(App),
|
||||
});
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 5.7 KiB |
@ -1,66 +0,0 @@
|
||||
<template>
|
||||
<button
|
||||
class="button"
|
||||
:style="{ color, borderColor: color }"
|
||||
:class="{ rounded }"
|
||||
@click="onClick"
|
||||
@dblclick="onDoubleClick"
|
||||
>
|
||||
<slot>
|
||||
{{label}}!
|
||||
</slot>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'Button',
|
||||
|
||||
props: {
|
||||
rounded: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#42b983'
|
||||
},
|
||||
label: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick($event) {
|
||||
/**
|
||||
* Emitted when the button is clicked.
|
||||
* @event click
|
||||
* @type {Event}
|
||||
*/
|
||||
this.$emit('click', $event);
|
||||
},
|
||||
onDoubleClick($event) {
|
||||
/**
|
||||
* Emitted when the button is double clicked.
|
||||
* @event doubleClick
|
||||
* @type {Event}
|
||||
*/
|
||||
this.$emit('double-click', $event);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.rounded {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.button {
|
||||
border: 3px solid;
|
||||
padding: 10px 20px;
|
||||
background-color: white;
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
@ -1,25 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Vue - Counter</h1>
|
||||
<h2 data-testid="count">You clicked {{count}} times</h2>
|
||||
<button type="button" @click="decrement">Decrement</button>
|
||||
<button type="button" @click="increment">Increment</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Counter',
|
||||
data() {
|
||||
return { count: 0 };
|
||||
},
|
||||
methods: {
|
||||
increment() {
|
||||
this.count++;
|
||||
},
|
||||
decrement() {
|
||||
this.count--;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -1,112 +0,0 @@
|
||||
<template>
|
||||
<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" @click="requestButton">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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
/**
|
||||
* emit buttonRequested event
|
||||
* @public
|
||||
**/
|
||||
requestButton() {
|
||||
/**
|
||||
* Emitted when the button example is requested
|
||||
* @type {Event}
|
||||
*/
|
||||
this.$emit('buttonRequested');
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.main {
|
||||
padding: 15px;
|
||||
line-height: 1.4;
|
||||
font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 200;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: #1474f3;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid #1474f3;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.code {
|
||||
font-size: 15;
|
||||
font-weight: 600;
|
||||
padding: 2px 5px;
|
||||
border: 1px solid #eae9e9;
|
||||
border-radius: 4px;
|
||||
background-color: #f3f2f2;
|
||||
color: #3a3a3a;
|
||||
}
|
||||
|
||||
.codeBlock {
|
||||
background-color: #f3f2f2;
|
||||
padding: 1px 10px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.note {
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
@ -1,13 +0,0 @@
|
||||
// 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>
|
||||
`;
|
||||
@ -1,10 +0,0 @@
|
||||
// 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>
|
||||
`;
|
||||
@ -1,3 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Core/Errors Null Error 1`] = `<!---->`;
|
||||
@ -1,10 +0,0 @@
|
||||
// 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>
|
||||
`;
|
||||
@ -1,22 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Core/Parameters passed to story 1`] = `
|
||||
<div>
|
||||
Parameters are
|
||||
<pre>
|
||||
{
|
||||
"docs": {
|
||||
"iframeHeight": "60px"
|
||||
},
|
||||
"globalParameter": "globalParameter",
|
||||
"framework": "vue",
|
||||
"componentParameter": "componentParameter",
|
||||
"storyParameter": "storyParameter",
|
||||
"__isArgsStory": true,
|
||||
"__id": "core-parameters--passed-to-story",
|
||||
"args": {},
|
||||
"argTypes": {}
|
||||
}
|
||||
</pre>
|
||||
</div>
|
||||
`;
|
||||
@ -1,73 +0,0 @@
|
||||
// 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>
|
||||
{
|
||||
"componentId": "custom-decorator-for-vue",
|
||||
"title": "Custom/Decorator for Vue",
|
||||
"kind": "Custom/Decorator for Vue",
|
||||
"id": "custom-decorator-for-vue--with-data",
|
||||
"name": "With Data",
|
||||
"story": "With Data",
|
||||
"parameters": {
|
||||
"docs": {
|
||||
"iframeHeight": "60px"
|
||||
},
|
||||
"globalParameter": "globalParameter",
|
||||
"framework": "vue",
|
||||
"__isArgsStory": true,
|
||||
"__id": "custom-decorator-for-vue--with-data",
|
||||
"args": {},
|
||||
"argTypes": {}
|
||||
},
|
||||
"initialArgs": {},
|
||||
"argTypes": {},
|
||||
"args": {},
|
||||
"globals": {},
|
||||
"viewMode": "story",
|
||||
"customContext": 52
|
||||
}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1,96 +0,0 @@
|
||||
// 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 Render 1`] = `
|
||||
<div>
|
||||
renders a div with some text in it..
|
||||
</div>
|
||||
`;
|
||||
|
||||
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 pre-registered component 1`] = `
|
||||
<p>
|
||||
<em>
|
||||
This component was pre-registered in .storybook/preview.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 + component 1`] = `
|
||||
<button
|
||||
class="button"
|
||||
style="color: pink; border-color: pink;"
|
||||
>
|
||||
renders component: MyButton
|
||||
</button>
|
||||
`;
|
||||
|
||||
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>
|
||||
`;
|
||||
@ -1,39 +0,0 @@
|
||||
<template>
|
||||
<button class="button" @click="onClick" @dblclick="onDoubleClick">
|
||||
<slot />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
export default Vue.extend({
|
||||
name: 'Button',
|
||||
methods: {
|
||||
onClick($event: Event) {
|
||||
/**
|
||||
* Emitted when the button is clicked.
|
||||
* @event click
|
||||
* @type {Event}
|
||||
*/
|
||||
this.$emit('click', $event);
|
||||
},
|
||||
onDoubleClick($event: Event) {
|
||||
/**
|
||||
* Emitted when the button is double clicked.
|
||||
* @event doubleClick
|
||||
* @type {Event}
|
||||
*/
|
||||
this.$emit('double-click', $event);
|
||||
},
|
||||
},
|
||||
props: {
|
||||
/**
|
||||
* The button's color.
|
||||
*/
|
||||
color: {
|
||||
type: String,
|
||||
default: '#333',
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@ -1,70 +0,0 @@
|
||||
<script>
|
||||
/**
|
||||
* InfoButton component description
|
||||
*/
|
||||
export default {
|
||||
props: {
|
||||
/**
|
||||
* Whether to disable button
|
||||
*/
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
},
|
||||
/**
|
||||
* Button type
|
||||
*/
|
||||
type: {
|
||||
type: String,
|
||||
default: 'normal',
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
click(ev) {
|
||||
/**
|
||||
* Passthrough click event
|
||||
* @type {Event}
|
||||
*/
|
||||
this.$emit('click', ev);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button class="btn" :class="type" :disabled="disabled" @click="click">
|
||||
<!-- @slot Default to label prop -->
|
||||
<img width="60px" src="../../logo.png" />
|
||||
<slot>
|
||||
{{ label }}
|
||||
</slot>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.btn {
|
||||
padding: 3px 10px;
|
||||
|
||||
border: 3px solid #42b983;
|
||||
border-radius: 5px;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.btn.primary {
|
||||
background-color: #33f;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
background-color: #eee;
|
||||
color: #777;
|
||||
}
|
||||
</style>
|
||||
@ -1,97 +0,0 @@
|
||||
// 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>
|
||||
`;
|
||||
@ -1,9 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Button (Typescript) Button Ts Story 1`] = `
|
||||
<button
|
||||
class="button"
|
||||
>
|
||||
Storybook has builtin Typescript support for Vue components
|
||||
</button>
|
||||
`;
|
||||
@ -1,30 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Button Rounded 1`] = `
|
||||
<button
|
||||
class="button rounded"
|
||||
style="color: rgb(255, 0, 0); border-color: #f00;"
|
||||
>
|
||||
A Button with rounded edges
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Button Square 1`] = `
|
||||
<button
|
||||
class="button"
|
||||
style="color: rgb(0, 0, 255); border-color: #00f;"
|
||||
>
|
||||
A Button with square edges
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Button With Default Render 1`] = `
|
||||
<button
|
||||
class="button rounded"
|
||||
style="color: rgb(255, 187, 170); border-color: #fba;"
|
||||
>
|
||||
|
||||
Button with default render!
|
||||
|
||||
</button>
|
||||
`;
|
||||
@ -1,15 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots InfoButton Simple 1`] = `
|
||||
<button
|
||||
class="btn normal"
|
||||
>
|
||||
<img
|
||||
src="../../logo.png"
|
||||
width="60px"
|
||||
/>
|
||||
|
||||
I'm a button!
|
||||
|
||||
</button>
|
||||
`;
|
||||
@ -1,140 +0,0 @@
|
||||
// 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>
|
||||
`;
|
||||
@ -1,14 +0,0 @@
|
||||
import App from '../../App.vue';
|
||||
|
||||
export default {
|
||||
title: 'App',
|
||||
component: App,
|
||||
parameters: {
|
||||
layout: 'fullscreen',
|
||||
},
|
||||
};
|
||||
|
||||
export const Default = () => ({
|
||||
render: (h) => h(App),
|
||||
});
|
||||
Default.storyName = 'App';
|
||||
@ -1,11 +0,0 @@
|
||||
import ButtonTs from './ButtonTs.vue';
|
||||
|
||||
export default {
|
||||
title: 'Button (Typescript)',
|
||||
component: ButtonTs,
|
||||
};
|
||||
|
||||
export const ButtonTsStory = () => ({
|
||||
components: { ButtonTs },
|
||||
template: '<ButtonTs>Storybook has builtin Typescript support for Vue components</ButtonTs>',
|
||||
});
|
||||
@ -1,51 +0,0 @@
|
||||
import { within, userEvent } from '@storybook/testing-library';
|
||||
import MyButton from '../Button.vue';
|
||||
|
||||
export default {
|
||||
title: 'Button',
|
||||
component: MyButton,
|
||||
argTypes: {
|
||||
color: { control: 'color' },
|
||||
},
|
||||
};
|
||||
|
||||
const Template = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { MyButton },
|
||||
template: `
|
||||
<my-button :color="color" :rounded="rounded">{{label}}</my-button>`,
|
||||
});
|
||||
|
||||
export const Rounded = Template.bind({});
|
||||
Rounded.args = {
|
||||
rounded: true,
|
||||
color: '#f00',
|
||||
label: 'A Button with rounded edges',
|
||||
};
|
||||
// Rounded.decorators = [
|
||||
// (storyFn, context) => {
|
||||
// return storyFn({ ...context, args: { ...context.args, label: 'Overridden args' } });
|
||||
// },
|
||||
// () => ({
|
||||
// template: '<div style="background: #eee;"><story/></div>',
|
||||
// }),
|
||||
// ];
|
||||
Rounded.play = async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
await userEvent.click(canvas.getByRole('button'));
|
||||
};
|
||||
|
||||
export const Square = Template.bind({});
|
||||
Square.args = {
|
||||
rounded: false,
|
||||
color: '#00f',
|
||||
label: 'A Button with square edges',
|
||||
};
|
||||
|
||||
export const WithDefaultRender = {
|
||||
args: {
|
||||
rounded: true,
|
||||
color: '#fba',
|
||||
label: 'Button with default render',
|
||||
},
|
||||
};
|
||||
@ -1,11 +0,0 @@
|
||||
import InfoButton from './InfoButton.vue';
|
||||
|
||||
export default {
|
||||
title: 'InfoButton',
|
||||
component: InfoButton,
|
||||
};
|
||||
|
||||
export const Simple = () => ({
|
||||
components: { InfoButton },
|
||||
template: '<info-button label="I\'m a button!"/>',
|
||||
});
|
||||
@ -1,13 +0,0 @@
|
||||
import Welcome from '../Welcome.vue';
|
||||
|
||||
export default {
|
||||
title: 'Welcome',
|
||||
component: Welcome,
|
||||
};
|
||||
|
||||
export const WelcomeStory = () => {
|
||||
return {
|
||||
render: (h) => h(Welcome, { listeners: { buttonRequested: () => {} } }),
|
||||
};
|
||||
};
|
||||
WelcomeStory.storyName = 'Welcome';
|
||||
@ -1,11 +0,0 @@
|
||||
export default {
|
||||
title: 'Core/Errors',
|
||||
parameters: { chromatic: { disable: true } },
|
||||
};
|
||||
|
||||
export const ThrowsError = () => {
|
||||
throw new Error('foo');
|
||||
};
|
||||
ThrowsError.parameters = { storyshots: { disable: true } };
|
||||
|
||||
export const NullError = () => null;
|
||||
@ -1,8 +0,0 @@
|
||||
export default {
|
||||
title: 'Core/Template',
|
||||
};
|
||||
|
||||
export const StringOnly = () =>
|
||||
'<my-button :rounded="false">A Button with square edges</my-button>';
|
||||
|
||||
StringOnly.storyName = 'string only';
|
||||
@ -1,19 +0,0 @@
|
||||
const componentParameter = 'componentParameter';
|
||||
const storyParameter = 'storyParameter';
|
||||
|
||||
export default {
|
||||
title: 'Core/Parameters',
|
||||
parameters: {
|
||||
componentParameter,
|
||||
},
|
||||
};
|
||||
|
||||
export const PassedToStory = (_args, { parameters: { fileName, ...parameters } }) => ({
|
||||
template: `<div>Parameters are <pre>${JSON.stringify(parameters, null, 2)}</pre></div>`,
|
||||
});
|
||||
|
||||
PassedToStory.storyName = 'passed to story';
|
||||
|
||||
PassedToStory.parameters = {
|
||||
storyParameter,
|
||||
};
|
||||
@ -1,7 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Storyshots Issues/11839 undefined boolean Primary 1`] = `
|
||||
<div>
|
||||
Disabled: false
|
||||
</div>
|
||||
`;
|
||||
@ -1,14 +0,0 @@
|
||||
<template>
|
||||
<div>Disabled: {{disabled}}</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
disabled: Boolean,
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.disabled); // notice this line
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -1,15 +0,0 @@
|
||||
import Comp from './component.vue';
|
||||
|
||||
export default {
|
||||
title: 'Issues/11839 undefined boolean',
|
||||
component: Comp,
|
||||
};
|
||||
|
||||
export const Primary = (args, { argTypes }) => {
|
||||
return {
|
||||
props: Object.keys(argTypes),
|
||||
components: { Comp },
|
||||
// template: '<Comp />', // this will log out `false`
|
||||
template: '<Comp v-bind="$props" />', // this will log out `undefined`
|
||||
};
|
||||
};
|
||||
@ -1,9 +0,0 @@
|
||||
import path from 'path';
|
||||
import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots';
|
||||
|
||||
initStoryshots({
|
||||
framework: 'vue',
|
||||
configPath: path.join(__dirname, '.storybook'),
|
||||
integrityOptions: { cwd: path.join(__dirname, 'src', 'stories') },
|
||||
test: multiSnapshotWithOptions(),
|
||||
});
|
||||
@ -1,100 +0,0 @@
|
||||
const path = require('path');
|
||||
const webpack = require('webpack');
|
||||
const VueLoaderPlugin = require('vue-loader/lib/plugin');
|
||||
|
||||
module.exports = {
|
||||
entry: './src/index.js',
|
||||
output: {
|
||||
path: path.resolve(__dirname, './dist'),
|
||||
publicPath: '/dist/',
|
||||
filename: 'build.js',
|
||||
},
|
||||
plugins: [new VueLoaderPlugin()],
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.vue$/,
|
||||
loader: 'vue-loader',
|
||||
options: {
|
||||
loaders: {},
|
||||
// other vue-loader options go here
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.js$/,
|
||||
loader: 'babel-loader',
|
||||
exclude: /node_modules/,
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpg|gif)$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'url-loader',
|
||||
options: {
|
||||
esModule: false,
|
||||
fallback: 'file-loader',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.svg$/,
|
||||
loader: 'svg-url-loader',
|
||||
options: {
|
||||
noquotes: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.stories\.jsx?$/,
|
||||
loader: require.resolve('@storybook/source-loader'),
|
||||
include: [path.resolve(__dirname, '../stories')],
|
||||
enforce: 'pre',
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: [
|
||||
'vue-style-loader',
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
// enable CSS Modules
|
||||
modules: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
vue$: 'vue/dist/vue.esm.js',
|
||||
},
|
||||
},
|
||||
devServer: {
|
||||
historyApiFallback: true,
|
||||
noInfo: true,
|
||||
},
|
||||
performance: {
|
||||
hints: false,
|
||||
},
|
||||
devtool: 'eval-source-map',
|
||||
};
|
||||
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
module.exports.devtool = 'source-map';
|
||||
// http://vue-loader.vuejs.org/en/workflow/production.html
|
||||
module.exports.plugins = (module.exports.plugins || []).concat([
|
||||
new webpack.DefinePlugin({
|
||||
'process.env.NODE_ENV': '"production"',
|
||||
}),
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
sourceMap: true,
|
||||
compress: {
|
||||
warnings: false,
|
||||
},
|
||||
}),
|
||||
new webpack.LoaderOptionsPlugin({
|
||||
minimize: true,
|
||||
}),
|
||||
]);
|
||||
}
|
||||
@ -1,4 +1,5 @@
|
||||
import globalThis from 'global';
|
||||
import Vue from 'vue';
|
||||
|
||||
import Button from './Button.vue';
|
||||
import Pre from './Pre.vue';
|
||||
@ -7,3 +8,6 @@ import Html from './Html.vue';
|
||||
|
||||
globalThis.Components = { Button, Pre, Form, Html };
|
||||
globalThis.storybookRenderer = 'vue';
|
||||
|
||||
// test globally-registered components
|
||||
Vue.component('global-button', Button);
|
||||
|
||||
@ -1 +0,0 @@
|
||||
Placeholder until we write some render-specific stories
|
||||
@ -0,0 +1,6 @@
|
||||
export default {
|
||||
// we just need something here to make this valid CSF
|
||||
component: {},
|
||||
};
|
||||
|
||||
export const StringOnly = () => '<global-button :primary="true" children="Primary button" />';
|
||||
@ -1,7 +1,9 @@
|
||||
import MyButton from './Button.vue';
|
||||
import globalThis from 'global';
|
||||
|
||||
const MyButton = globalThis.Components.Button;
|
||||
|
||||
export default {
|
||||
title: 'Custom/Decorator for Vue',
|
||||
component: {},
|
||||
decorators: [
|
||||
(storyFn) => {
|
||||
// Decorated with story-function
|
||||
@ -27,7 +29,7 @@ export default {
|
||||
};
|
||||
|
||||
export const Template = () => ({
|
||||
template: '<my-button>MyButton with template</my-button>',
|
||||
template: '<global-button children="MyButton with template" />',
|
||||
});
|
||||
|
||||
export const WithData = (_args, { parameters: { fileName, ...parameters }, hooks, ...rest }) => ({
|
||||
@ -36,6 +38,6 @@ export const WithData = (_args, { parameters: { fileName, ...parameters }, hooks
|
||||
|
||||
export const Render = () => ({
|
||||
render(h) {
|
||||
return h(MyButton, { props: { color: 'pink' } }, ['renders component: MyButton']);
|
||||
return h(MyButton, { props: { color: 'pink', children: 'renders component: MyButton' } });
|
||||
},
|
||||
});
|
||||
@ -1,7 +1,9 @@
|
||||
import MyButton from './Button.vue';
|
||||
import globalThis from 'global';
|
||||
|
||||
const MyButton = globalThis.Components.Button;
|
||||
|
||||
export default {
|
||||
title: 'Custom/Method for rendering Vue',
|
||||
component: {},
|
||||
};
|
||||
|
||||
export const Render = () => ({
|
||||
@ -10,12 +12,10 @@ export const Render = () => ({
|
||||
|
||||
export const RenderComponent = () => ({
|
||||
render(h) {
|
||||
return h(MyButton, { props: { color: 'pink' } }, ['renders component: MyButton']);
|
||||
return h(MyButton, { props: { color: 'pink', children: 'renders component: MyButton' } });
|
||||
},
|
||||
});
|
||||
|
||||
RenderComponent.storyName = 'render + component';
|
||||
|
||||
export const Template = () => ({
|
||||
template: `
|
||||
<div>
|
||||
@ -26,32 +26,29 @@ export const Template = () => ({
|
||||
|
||||
export const TemplateComponent = () => ({
|
||||
components: { MyButton },
|
||||
template: '<my-button>MyButton rendered in a template</my-button>',
|
||||
template: '<my-button children="MyButton rendered in a template" />',
|
||||
});
|
||||
|
||||
TemplateComponent.storyName = 'template + component';
|
||||
|
||||
export const TemplateMethods = () => ({
|
||||
components: { MyButton },
|
||||
template: `
|
||||
<p>
|
||||
<em>Clicking the button will navigate to another story using the 'addon-links'</em><br/>
|
||||
<my-button :rounded="true" @click="action">MyButton rendered in a template + props & methods</my-button>
|
||||
<my-button :rounded="true" @click="action" children="MyButton rendered in a template + props & methods" />
|
||||
</p>`,
|
||||
methods: {
|
||||
action: () => {},
|
||||
},
|
||||
});
|
||||
|
||||
TemplateMethods.storyName = 'template + methods';
|
||||
|
||||
export const JSX = () => ({
|
||||
components: { MyButton },
|
||||
render() {
|
||||
// eslint-disable-next-line react/react-in-jsx-scope
|
||||
return <my-button>MyButton rendered with JSX</my-button>;
|
||||
},
|
||||
});
|
||||
// FIXME: test JSX?
|
||||
// export const JSX = () => ({
|
||||
// components: { MyButton },
|
||||
// render() {
|
||||
// // eslint-disable-next-line react/react-in-jsx-scope, react/no-children-prop
|
||||
// return <my-button children="MyButton rendered with JSX" />;
|
||||
// },
|
||||
// });
|
||||
|
||||
export const PreRegisteredComponent = () => ({
|
||||
/* By pre-registering component in preview.js,
|
||||
@ -60,8 +57,6 @@ export const PreRegisteredComponent = () => ({
|
||||
template: `
|
||||
<p>
|
||||
<em>This component was pre-registered in .storybook/preview.js</em><br/>
|
||||
<my-button>MyButton rendered in a template</my-button>
|
||||
<global-button children="GlobalButton rendered in a template" />
|
||||
</p>`,
|
||||
});
|
||||
|
||||
PreRegisteredComponent.storyName = 'pre-registered component';
|
||||
@ -1,7 +1,7 @@
|
||||
import globalThis from 'global';
|
||||
import { Meta, Story, Canvas } from '@storybook/addon-docs';
|
||||
|
||||
<Meta title="stories/renderers/vue/vue-mdx" component={globalThis.Components.Button} />
|
||||
<Meta title="renderers/vue/vue-mdx" component={globalThis.Components.Button} />
|
||||
|
||||
# Vue-specific MDX Stories
|
||||
|
||||
|
||||
@ -460,16 +460,6 @@
|
||||
"root": "examples/vue-3-cli",
|
||||
"type": "library",
|
||||
"implicitDependencies": []
|
||||
},
|
||||
"vue-cli-example": {
|
||||
"root": "examples/vue-cli",
|
||||
"type": "library",
|
||||
"implicitDependencies": []
|
||||
},
|
||||
"vue-example": {
|
||||
"root": "examples/vue-kitchen-sink",
|
||||
"type": "library",
|
||||
"implicitDependencies": []
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
1443
code/yarn.lock
1443
code/yarn.lock
File diff suppressed because it is too large
Load Diff
@ -252,9 +252,11 @@ async function linkPackageStories(
|
||||
const previewFile = `preview.${ext}`;
|
||||
const previewPath = join(codeDir, packageDir, 'template', 'stories', previewFile);
|
||||
if (await pathExists(previewPath)) {
|
||||
addPreviewAnnotations(mainConfig, [
|
||||
`./${join(linkInDir ? 'src/stories' : 'template-stories', packageDir, previewFile)}`,
|
||||
]);
|
||||
let storiesDir = 'template-stories';
|
||||
if (linkInDir) {
|
||||
storiesDir = (await pathExists(join(cwd, 'src/stories'))) ? 'src/stories' : 'stories';
|
||||
}
|
||||
addPreviewAnnotations(mainConfig, [`./${join(storiesDir, packageDir, previewFile)}`]);
|
||||
}
|
||||
})
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user