@storybook/vue3 9.0.0-alpha.0 → 9.0.0-alpha.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@storybook/vue3",
3
- "version": "9.0.0-alpha.0",
3
+ "version": "9.0.0-alpha.2",
4
4
  "description": "Storybook Vue 3 renderer",
5
5
  "keywords": [
6
6
  "storybook"
@@ -61,11 +61,7 @@
61
61
  "prep": "jiti ../../../scripts/prepare/bundle.ts"
62
62
  },
63
63
  "dependencies": {
64
- "@storybook/components": "9.0.0-alpha.0",
65
64
  "@storybook/global": "^5.0.0",
66
- "@storybook/manager-api": "9.0.0-alpha.0",
67
- "@storybook/preview-api": "9.0.0-alpha.0",
68
- "@storybook/theming": "9.0.0-alpha.0",
69
65
  "@vue/compiler-core": "^3.0.0",
70
66
  "ts-dedent": "^2.0.0",
71
67
  "type-fest": "~2.19",
@@ -81,7 +77,7 @@
81
77
  "vue-tsc": "latest"
82
78
  },
83
79
  "peerDependencies": {
84
- "storybook": "^9.0.0-alpha.0",
80
+ "storybook": "^9.0.0-alpha.2",
85
81
  "vue": "^3.0.0"
86
82
  },
87
83
  "engines": {
@@ -1,56 +0,0 @@
1
- import { fn } from '@storybook/test';
2
- import type { Meta, StoryObj } from '@storybook/vue3';
3
-
4
- import Button from './Button.vue';
5
-
6
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
7
- const meta: Meta<typeof Button> = {
8
- title: 'Example/Button',
9
- component: Button,
10
- // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs
11
- tags: ['autodocs'],
12
- argTypes: {
13
- size: { control: 'select', options: ['small', 'medium', 'large'] },
14
- backgroundColor: { control: 'color' },
15
- },
16
- args: {
17
- primary: false,
18
- // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
19
- onClick: fn(),
20
- },
21
- };
22
-
23
- export default meta;
24
- type Story = StoryObj<typeof Button>;
25
- /*
26
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
27
- * See https://storybook.js.org/docs/api/csf
28
- * to learn how to use render functions.
29
- */
30
- export const Primary: Story = {
31
- args: {
32
- primary: true,
33
- label: 'Button',
34
- },
35
- };
36
-
37
- export const Secondary: Story = {
38
- args: {
39
- primary: false,
40
- label: 'Button',
41
- },
42
- };
43
-
44
- export const Large: Story = {
45
- args: {
46
- label: 'Button',
47
- size: 'large',
48
- },
49
- };
50
-
51
- export const Small: Story = {
52
- args: {
53
- label: 'Button',
54
- size: 'small',
55
- },
56
- };
@@ -1,48 +0,0 @@
1
- <template>
2
- <button type="button" :class="classes" @click="onClick" :style="style">{{ label }} </button>
3
- </template>
4
-
5
- <script lang="ts" setup>
6
- import "./button.css"
7
- import { computed } from 'vue';
8
-
9
- const props = withDefaults(defineProps<{
10
- /**
11
- * The label of the button
12
- */
13
- label: string,
14
- /**
15
- * primary or secondary button
16
- */
17
- primary?: boolean,
18
- /**
19
- * size of the button
20
- */
21
- size?: 'small' | 'medium' | 'large',
22
- /**
23
- * background color of the button
24
- */
25
- backgroundColor?: string,
26
-
27
- }>(), { primary: false });
28
-
29
- const emit = defineEmits<{
30
- (e: 'click', id: number): void;
31
- }>();
32
-
33
- const classes = computed(() => ({
34
- 'storybook-button': true,
35
- 'storybook-button--primary': props.primary,
36
- 'storybook-button--secondary': !props.primary,
37
- [`storybook-button--${props.size || 'medium'}`]: true,
38
- }));
39
-
40
- const style = computed(() => ({
41
- backgroundColor: props.backgroundColor
42
- }));
43
-
44
- const onClick = () => {
45
- emit("click", 1)
46
- };
47
-
48
- </script>
@@ -1,48 +0,0 @@
1
- import { fn } from '@storybook/test';
2
- import type { Meta, StoryObj } from '@storybook/vue3';
3
-
4
- import MyHeader from './Header.vue';
5
-
6
- const meta: Meta<typeof MyHeader> = {
7
- /* 👇 The title prop is optional.
8
- * See https://storybook.js.org/docs/configure/#configure-story-loading
9
- * to learn how to generate automatic titles
10
- */
11
- title: 'Example/Header',
12
- component: MyHeader,
13
- render: (args: any) => ({
14
- components: { MyHeader },
15
- setup() {
16
- return { args };
17
- },
18
- template: '<my-header :user="args.user" />',
19
- }),
20
- parameters: {
21
- // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
22
- layout: 'fullscreen',
23
- },
24
- // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs
25
- args: {
26
- onLogin: fn(),
27
- onLogout: fn(),
28
- onCreateAccount: fn(),
29
- },
30
- tags: ['autodocs'],
31
- };
32
-
33
- export default meta;
34
- type Story = StoryObj<typeof MyHeader>;
35
-
36
- export const LoggedIn: Story = {
37
- args: {
38
- user: {
39
- name: 'Jane Doe',
40
- },
41
- },
42
- };
43
-
44
- export const LoggedOut: Story = {
45
- args: {
46
- user: null,
47
- },
48
- };
@@ -1,37 +0,0 @@
1
- <template>
2
- <header>
3
- <div class="storybook-header">
4
- <div>
5
- <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
6
- <g fill="none" fill-rule="evenodd">
7
- <path d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z" fill="#FFF" />
8
- <path d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z" fill="#555AB9" />
9
- <path d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z" fill="#91BAF8" />
10
- </g>
11
- </svg>
12
- <h1>Acme</h1>
13
- </div>
14
- <div>
15
- <span class="welcome" v-if="user">Welcome, <b>{{ user.name }}</b>!</span>
16
- <my-button size="small" @click="$emit('logout')" label="Log out" v-if="user" />
17
- <my-button size="small" @click="$emit('login')" label="Log in" v-if="!user" />
18
- <my-button primary size="small" @click="$emit('createAccount')" label="Sign up" v-if="!user" />
19
- </div>
20
- </div>
21
- </header>
22
- </template>
23
-
24
- <script lang="ts" setup>
25
- import './header.css';
26
- import MyButton from './Button.vue';
27
-
28
- defineProps<{ user: { name: string } | null }>();
29
-
30
- defineEmits<{
31
- (event: 'createAccount'): void;
32
- (event: 'login'): void;
33
- (event: 'logout'): void;
34
- }>();
35
-
36
- </script>
37
-
@@ -1,38 +0,0 @@
1
- import { expect, userEvent, within } from '@storybook/test';
2
- import type { Meta, StoryObj } from '@storybook/vue3';
3
-
4
- import MyPage from './Page.vue';
5
-
6
- const meta: Meta<typeof MyPage> = {
7
- title: 'Example/Page',
8
- component: MyPage,
9
- render: () => ({
10
- components: { MyPage },
11
- template: '<my-page />',
12
- }),
13
- parameters: {
14
- // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
15
- layout: 'fullscreen',
16
- },
17
- // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs
18
- tags: ['autodocs'],
19
- };
20
-
21
- export default meta;
22
- type Story = StoryObj<typeof MyPage>;
23
-
24
- // More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
25
- export const LoggedIn: Story = {
26
- play: async ({ canvasElement }: any) => {
27
- const canvas = within(canvasElement);
28
- const loginButton = canvas.getByRole('button', { name: /Log in/i });
29
- await expect(loginButton).toBeInTheDocument();
30
- await userEvent.click(loginButton);
31
- await expect(loginButton).not.toBeInTheDocument();
32
-
33
- const logoutButton = canvas.getByRole('button', { name: /Log out/i });
34
- await expect(logoutButton).toBeInTheDocument();
35
- },
36
- };
37
-
38
- export const LoggedOut: Story = {};
@@ -1,73 +0,0 @@
1
- <template>
2
- <article>
3
- <my-header :user="user" @login="onLogin" @logout="onLogout" @create-account="onCreateAccount" />
4
-
5
- <section class="storybook-page">
6
- <h2>Pages in Storybook</h2>
7
- <p>
8
- We recommend building UIs with a
9
- <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
10
- <strong>component-driven</strong>
11
- </a>
12
- process starting with atomic components and ending with pages.
13
- </p>
14
- <p>
15
- Render pages with mock data. This makes it easy to build and review page states without
16
- needing to navigate to them in your app. Here are some handy patterns for managing page data
17
- in Storybook:
18
- </p>
19
- <ul>
20
- <li>
21
- Use a higher-level connected component. Storybook helps you compose such data from the
22
- "args" of child component stories
23
- </li>
24
- <li>
25
- Assemble data in the page component from your services. You can mock these services out
26
- using Storybook.
27
- </li>
28
- </ul>
29
- <p>
30
- Get a guided tutorial on component-driven development at
31
- <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer"
32
- >Storybook tutorials</a
33
- >
34
- . Read more in the
35
- <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">docs</a>
36
- .
37
- </p>
38
- <div class="tip-wrapper">
39
- <span class="tip">Tip</span>
40
- Adjust the width of the canvas with the
41
- <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
42
- <g fill="none" fill-rule="evenodd">
43
- <path
44
- d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
45
- id="a"
46
- fill="#999"
47
- />
48
- </g>
49
- </svg>
50
- Viewports addon in the toolbar
51
- </div>
52
- </section>
53
- </article>
54
- </template>
55
-
56
- <script lang="ts" setup>
57
- import './page.css';
58
- import MyHeader from './Header.vue';
59
-
60
- import { ref } from 'vue';
61
-
62
- const user = ref<{ name: string } | null>(null);
63
-
64
- const onLogin = () => {
65
- user.value = { name: 'Jane Doe' };
66
- };
67
- const onLogout = () => {
68
- user.value = null;
69
- };
70
- const onCreateAccount = () => {
71
- user.value = { name: 'Jane Doe' };
72
- };
73
- </script>