$ mkdir my-storybook-addon
$ yarn init
yarn init v1.22.19
question name (shingo.sasaki): my-addon
question version (1.0.0): 
question description: 
question entry point (index.js): dist/preset.js
question repository url: 
question author: 
question license (MIT): 
question private: 
success Saved package.json
✨  Done in 35.06s.

{
  "name": "my-addon",
  "version": "1.0.0",
  "main": "dist/preset.js",
  "files": ["dist/**/*", "README.md", "*.js"],
  "keywords": ["storybook", "addons"],
  "license": "MIT"
}

$ yarn add -D react react-dom @babel/cli

$ npx storybook@latest init

export default {
  presets: ['@babel/preset-env', '@babel/preset-react'],
};

{
  "scripts": {
    "build": "babel ./src --out-dir ./dist"
  }
}

function managerEntries(entry = []) {
  return [...entry, require.resolve("./register")];
}

export default { managerEntries };

import React from "react";

import { addons, types } from "@storybook/manager-api";

import { AddonPanel } from "@storybook/components";

const ADDON_ID = "myaddon";
const PANEL_ID = `${ADDON_ID}/panel`;

const MyPanel = () => <div>MyAddon</div>;

addons.register(ADDON_ID, (api) => {
  addons.add(PANEL_ID, {
    type: types.PANEL,
    title: "My Addon",
    render: ({ active, key }) => (
      <AddonPanel active={active} key={key}>
        <MyPanel />
      </AddonPanel>
    ),
  });
});

  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "../src/preset.js",
  ],
  // 以下略

$ yarn add -D vite

function managerEntries(entry = []) {
  return [...entry, require.resolve("./manager.js")];
}

export default { managerEntries };

$ yarn storybook

const PARAM_KEY = "myAddon";

const MyPanel = () => {
  const value = useParameter(PARAM_KEY, null);
  const item = value ? value.data : "No story parameter defined";
  return <div>{item}</div>;
};

export const Primary = {
  parameters: {
    myAddon: {
      data: "this is Primary",
    },
  },
  args: {
    primary: true,
    label: "Button",
  },
};

export const Secondary = {
  parameters: {
    myAddon: {
      data: "this is Secondary",
    },
  },
  args: {
    label: "Button",
  },
};

$ rm scripts/eject-ts

$ rm scripts/welcome.js
$ yarn remove prompts

$ rm -rf .github

  "prettier": {
    "semi": false,
    "singleQuote": true,
    "trailingComma": "none",
    "printWidth": 120,
    "arrowParens": "avoid"
  }

$ rm .prettierrc .prettierignore 

$ yarn prettier . --write

$ yarn add -D @storybook/vue3-vite vue vue-tsc @vitejs/plugin-vue

import type { StorybookConfig } from '@storybook/vue3-vite'
const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    './local-preset.js'
  ],
  framework: {
    name: '@storybook/vue3-vite',
    options: {}
  },
  docs: {
    autodocs: 'tag'
  }
}
export default config

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})

<script setup lang="ts">
const props = defineProps<{
  label: string
  variant: 'primary' | 'secondary'
  size: 'small' | 'medium' | 'large'
}>()

const emits = defineEmits<{
  (e: 'click'): void
}>()
</script>

<template>
  <button @click="emits('click')" :class="[props.variant, props.size]">
    {{ props.label }}
  </button>
</template>

<style scoped>
button {
  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  border: 0;
  border-radius: 3em;
  cursor: pointer;
  display: inline-block;
  line-height: 1;
  color: white;
  padding: 1rem;
}
button.primary {
  background-color: #1ea7fd;
}
button.secondary {
  background-color: #ff7e00;
}

button.large {
  font-size: 1.25rem;
  padding: 1.25rem 1.5rem;
}

button.medium {
  font-size: 1rem;
  padding: 1rem 1.25rem;
}

button.small {
  font-size: 0.875rem;
  padding: 0.75rem 1rem;
}
</style>

import MyButton from './MyButton.vue'
import type { Meta, StoryObj } from '@storybook/vue3'

type Story = StoryObj<typeof MyButton>

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

export const Default: Story = {
  args: {
    label: 'Button',
    variant: 'primary',
    size: 'medium'
  }
}

export default meta

import { addons, types } from '@storybook/manager-api'
import { ADDON_ID, TOOL_ID, PANEL_ID, TAB_ID } from './constants'

addons.register(ADDON_ID, () => {
  addons.add(TOOL_ID, {
    type: types.TOOL,
    title: 'My addon',
    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
    render: () => 'My addon tool'
  })

  addons.add(PANEL_ID, {
    type: types.PANEL,
    title: 'My addon',
    match: ({ viewMode }) => viewMode === 'story',
    render: () => 'My addon panel'
  })

  addons.add(TAB_ID, {
    type: types.TAB,
    title: 'My addon',
    route: ({ storyId }) => `/myaddon/${storyId}`,
    match: ({ viewMode }) => viewMode === 'myaddon',
    render: () => 'My addon tab'
  })
})

$ yarn remove @storybook/react @storybook/react-vite @types/react @vitejs/plugin-react

$ yarn start

$ yarn add -D pinia

"pinia": "^2.0.0"

import { defineStore } from 'pinia'

type CurrentUser = {
  id: string
  name: string
}

export const useCurrentUserStore = defineStore('currentUser', {
  state: () => ({
    currentUser: null as CurrentUser | null
  }),
  getters: {
    displayName() {
      return this.currentUser?.name ?? 'Guest'
    }
  },
  actions: {
    async signIn(name: string, password: string) {
      const response = await fetch('/api/sign-in', {
        method: 'POST',
        body: JSON.stringify({ name, password })
      })
      if (response.ok) {
        const user = await response.json()
        this.currentUser = {
          id: user.id,
          name: user.name
        }
      }
    },
    async signOut() {
      await fetch('/api/sign-out', {
        method: 'POST'
      })
      this.currentUser = null
    }
  }
})

import { defineStore } from 'pinia'

type Todo = {
  id: string
  text: string
  completed: boolean
}

export const useTodoStore = defineStore('todo', {
  state: () => ({
    todoList: [] as Todo[]
  }),
  getters: {
    completedTodoList(state) {
      return state.todoList.filter(todo => todo.completed)
    },
    uncompletedTodoList(state) {
      return state.todoList.filter(todo => !todo.completed)
    }
  },
  actions: {
    async fetchTodoList() {
      const response = await fetch('/api/todo-list')
      if (response.ok) {
        this.todoList = await response.json()
      }
    },
    async syncTodoList() {
      await fetch('/api/todo-list', {
        method: 'POST',
        body: JSON.stringify(this.todoList)
      })
    }
  }
})

setup(app => {
  app.use(
    createTestingPinia({
      createSpy: fn => args => {
        fn?.(args)
      },
      stubActions: false,
      initialState: {
        currentUser: {
          currentUser: {
            id: '1',
            name: 'sasaki'
          }
        },
        todo: {
          todoList: [
            { id: '1', text: 'Task 1', completed: false },
            { id: '2', text: 'Task 2', completed: false },
            { id: '3', text: 'Task 3', completed: false },
            { id: '4', text: 'Task 4', completed: true },
            { id: '5', text: 'Task 5', completed: true },
            { id: '6', text: 'Task 6', completed: true }
          ]
        }
      }
    })
  )
})

export const withPiniaDecorator = makeDecorator({
  name: 'withPinia',
  parameterName: 'pinia',
  wrapper: (getStory, context, { parameters }) => {
    setup(app => {
      console.log(app)
      app.use(
        createTestingPinia({
          createSpy: fn => args => {
            fn?.(args)
          },
          stubActions: false,
          initialState: {
            currentUser: {
              currentUser: {
                id: '1',
                name: 'sasaki'
              }
            },
            todo: {
              todoList: [
                { id: '1', text: 'Task 1', completed: false },
                { id: '2', text: 'Task 2', completed: false },
                { id: '3', text: 'Task 3', completed: false },
                { id: '4', text: 'Task 4', completed: true },
                { id: '5', text: 'Task 5', completed: true },
                { id: '6', text: 'Task 6', completed: true }
              ]
            }
          }
        })
      )
    })

    return getStory(context)
  }
})

export const withPiniaDecorator = (testingOptions: Partial<TestingOptions> = {}) => {
  const state = testingOptions.initialState || {}

  return makeDecorator({
    name: 'withPinia',
    parameterName: 'pinia',
    wrapper: (getStory, context, { parameters }) => {
      setup(app => {
        app.use(
          createTestingPinia({
            createSpy: fn => args => {
              fn?.(args)
            },
            stubActions: false,
            initialState: {},
            ...testingOptions
          })
        )
      })

      return getStory(context)
    }
  })()
}

import { addons, types } from '@storybook/manager-api'
import { ADDON_ID, PANEL_ID } from './constants'

addons.register(ADDON_ID, () => {
  addons.add(PANEL_ID, {
    type: types.PANEL,
    title: 'pinia/state',
    match: ({ viewMode }) => viewMode === 'story',
    render: () => 'pinia state panel'
  })
})

export const ADDON_ID = 'storybook/pinia'
export const PANEL_ID = `${ADDON_ID}/state`
export const PARAM_KEY = `piniaStateParameter`

      const [_, updateGlobals] = useGlobals()
      const initialState = testingOptions.initialState || {}

      useEffect(() => {
        updateGlobals({ [PARAM_KEY]: initialState })
      }, [])

addons.register(ADDON_ID, api => {
  addons.add(PANEL_ID, {
    type: types.PANEL,
    title: 'Pinia/state',
    match: ({ viewMode }) => viewMode === 'story',
    render: context => {
      const [globals] = useGlobals()
      return JSON.stringify(globals[PARAM_KEY])
    }
  })
})