Storybook 7 + Vue 3 を試していく

$ yarn create vite vue-3-storybook-7 --template vue
$ cd vue-3-storybook-7
$ yarn install

$ yarn dev

$ yarn add -D @storybook/vue3@7.0.0-beta.14 @storybook/core-server@7.0.0-beta.14 @storybook/builder-vite@7.0.0-beta.14

$ yarn add -D storybook@7.0.0-beta.14

Usage: storybook <command> [options]

Options:
  --disable-telemetry                     disable sending telemetry data
  --debug                                 Get more logs in debug mode (default: false)
  --enable-crash-reports                  enable sending crash reports to telemetry data
  -V, --version                           output the version number
  -h, --help                              display help for command

Commands:
  init [options]                          Initialize Storybook into your project.
  add [options] <addon>                   Add an addon to your Storybook
  babelrc                                 generate the default storybook babel config into your current working directory
  upgrade [options]                       Upgrade your Storybook packages to the latest
  info                                    Prints debugging information about the local environment
  migrate [options] [migration]           Run a Storybook codemod migration on your source files
  extract [location] [output]             extract stories.json from a built version
  repro [options] [outputDirectory]       Create a reproduction from a set of possible templates
  repro-next [options] [filterValue]      Create a reproduction from a set of possible templates
  link [options] <repo-url-or-directory>  Pull down a repro from a URL (or a local directory), link it, and run storybook
  automigrate [options] [fixId]           Check storybook for known problems or migrations and apply fixes
  dev [options]
  build [options]
  help [command]                          display help for command

$ yarn storybook dev
@storybook/cli v7.0.0-beta.14

ERR! Starting in 7.0, react and react-dom are now required peer dependencies of Storybook.
ERR! https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#react-peer-dependencies-required
ERR! 
ERR! It seems that you haven't run Storybook's CLI to upgrade to the latest version.
ERR! The upgrade command will install the required peer dependencies for you and will take 
ERR! care of other important auto migrations as well.
ERR! 

$ yarn add -D react react-dom

$ yarn storybook dev

ERR! Error: No configuration files have been found in your configDir (/Users/shingo.sasaki/vue-3-storybook-7/.storybook).
ERR! Storybook needs either a "main" or "config" file.

module.exports = {
  framework: "@storybook/vue3",
  stories: ["../src/**/*.stories.@(js|mdx)"],
};

$ yarn storybook dev

ERR! Error: Invalid value of @storybook/vue3 in the 'framework' field of Storybook config.
ERR! 
ERR! Please run 'npx sb@next automigrate'
ERR! 
ERR! See the v7 Migration guide for more information: 
ERR! https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#framework-field-mandatory
ERR!     at validateFrameworkName (/Users/shingo.sasaki/vue-3-storybook-7/node_modules/@storybook/core-common/dist/index.js:18:3976)
ERR!     at buildDevStandalone (/Users/shingo.sasaki/vue-3-storybook-7/node_modules/@storybook/core-server/dist/cjs/build-dev.js:74:41)
ERR!     at async withTelemetry (/Users/shingo.sasaki/vue-3-storybook-7/node_modules/@storybook/core-server/dist/cjs/withTelemetry.js:65:5)
ERR!     at async dev (/Users/shingo.sasaki/vue-3-storybook-7/node_modules/@storybook/cli/dist/generate.js:441:440)
ERR!  Error: Invalid value of @storybook/vue3 in the 'framework' field of Storybook config.

<script setup>
import { ref } from "vue";

const props = defineProps({
  initialCount: {
    type: Number,
    default: 0,
  },
});

const count = ref(props.initialCount);
</script>

<template>
  <div class="hello-world">
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button @click="count++">+</button>
  </div>
</template>

<style scoped>
.hello-world {
  text-align: center;
  color: #2c3e50;
}
</style>

import HelloWorld from "../components/HelloWorld.vue";

const meta = {
  title: "HelloWorld",
  component: HelloWorld,
};

export default meta;

export const Default = {
  render: () => ({
    components: { HelloWorld },
    template: "<HelloWorld />",
  }),
};

$ yarn add -D @storybook/addon-controls@7.0.0-beta.14

module.exports = {
  framework: "@storybook/vue3-vite",
  stories: ["../src/**/*.stories.@(js|mdx)"],
  addons: ["@storybook/addon-controls"],
};

import HelloWorld from "../components/HelloWorld.vue";

const meta = {
  title: "HelloWorld",
  component: HelloWorld,
};

export default meta;

export const Default = {
  render: (args) => ({
    components: { HelloWorld },
    setup() {
      return { args };
    },
    template: '<HelloWorld v-bind="args" />',
  }),
  args: {
    initialCount: 0,
  },
};

import HelloWorld from "../components/HelloWorld.vue";

const meta = {
  title: "HelloWorld",
  component: HelloWorld,
  render: (args) => ({
    components: { HelloWorld },
    setup() {
      return { args };
    },
    template: '<HelloWorld v-bind="args" />',
  }),
};

export default meta;

export const Default = {};

export const WithInitialValue = {
  args: {
    initialCount: 5,
  },
};

$ yarn add -D typescript vue-tsc

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

{
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

/// <reference types="vite/client" />

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

<script setup lang="ts">
import { ref } from "vue";

const props = defineProps({
  initialCount: {
    type: Number,
    default: 0,
  },
});
const count = ref(props.initialCount);
</script>

<template>
  <div class="hello-world">
    <button @click="count--">-</button>

    <span>{{ count }}</span>

    <button @click="count++">+</button>
  </div>
</template>

<style scoped>
.hello-world {
  background-color: #fff;
  text-align: center;
  color: #2c3e50;
}
.hello-world span,
button {
  font-size: 4rem;
}
</style>

import HelloWorld from "../components/HelloWorld.vue";
import type { Meta, StoryObj } from "@storybook/vue3";

type Story = StoryObj<typeof HelloWorld>;

const meta: Meta = {
  title: "HelloWorld",
  component: HelloWorld,
  render: (args) => ({
    components: { HelloWorld },
    setup() {
      return { args };
    },
    template: '<HelloWorld v-bind="args" />',
  }),
};

export default meta;

export const Default: Story = {};

export const WithInitialValue: Story = {
  args: {
    initialCount: 5,
  },
};

import Counter from "../components/Counter.vue";
import type { Meta, StoryObj } from "@storybook/vue3";

type Story = StoryObj<typeof Counter>;

const meta: Meta<typeof Counter> = {
  component: Counter,
};

export default meta;

export const Default: Story = {};