feat: install storybook

Author: N-Laboratory

.gitignore

@@ -8,4 +8,5 @@ node_modules
 dist
 coverage
 # sonarqube
-.scannerwork
+.scannerwork
+*storybook.log

.storybook/auto-imports.d.ts

@@ -0,0 +1,112 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
+  const FieldContextKey: typeof import('vee-validate')['FieldContextKey']
+  const FormContextKey: typeof import('vee-validate')['FormContextKey']
+  const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
+  const computed: typeof import('vue')['computed']
+  const configure: typeof import('vee-validate')['configure']
+  const createApp: typeof import('vue')['createApp']
+  const createPinia: typeof import('pinia')['createPinia']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const defineRule: typeof import('vee-validate')['defineRule']
+  const defineStore: typeof import('pinia')['defineStore']
+  const effectScope: typeof import('vue')['effectScope']
+  const getActivePinia: typeof import('pinia')['getActivePinia']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const mapActions: typeof import('pinia')['mapActions']
+  const mapGetters: typeof import('pinia')['mapGetters']
+  const mapState: typeof import('pinia')['mapState']
+  const mapStores: typeof import('pinia')['mapStores']
+  const mapWritableState: typeof import('pinia')['mapWritableState']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const setActivePinia: typeof import('pinia')['setActivePinia']
+  const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const storeToRefs: typeof import('pinia')['storeToRefs']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useField: typeof import('vee-validate')['useField']
+  const useFieldArray: typeof import('vee-validate')['useFieldArray']
+  const useFieldError: typeof import('vee-validate')['useFieldError']
+  const useFieldValue: typeof import('vee-validate')['useFieldValue']
+  const useForm: typeof import('vee-validate')['useForm']
+  const useFormErrors: typeof import('vee-validate')['useFormErrors']
+  const useFormValues: typeof import('vee-validate')['useFormValues']
+  const useId: typeof import('vue')['useId']
+  const useIsFieldDirty: typeof import('vee-validate')['useIsFieldDirty']
+  const useIsFieldTouched: typeof import('vee-validate')['useIsFieldTouched']
+  const useIsFieldValid: typeof import('vee-validate')['useIsFieldValid']
+  const useIsFormDirty: typeof import('vee-validate')['useIsFormDirty']
+  const useIsFormTouched: typeof import('vee-validate')['useIsFormTouched']
+  const useIsFormValid: typeof import('vee-validate')['useIsFormValid']
+  const useIsSubmitting: typeof import('vee-validate')['useIsSubmitting']
+  const useLink: typeof import('vue-router')['useLink']
+  const useModel: typeof import('vue')['useModel']
+  const useResetForm: typeof import('vee-validate')['useResetForm']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useSlots: typeof import('vue')['useSlots']
+  const useSubmitCount: typeof import('vee-validate')['useSubmitCount']
+  const useSubmitForm: typeof import('vee-validate')['useSubmitForm']
+  const useTemplateRef: typeof import('vue')['useTemplateRef']
+  const useValidateField: typeof import('vee-validate')['useValidateField']
+  const useValidateForm: typeof import('vee-validate')['useValidateForm']
+  const validate: typeof import('vee-validate')['validate']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  import('vue')
+}

.storybook/components.d.ts

@@ -0,0 +1,14 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    BaseTextInput: typeof import('./../src/components/atoms/BaseTextInput.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}

.storybook/main.ts

@@ -0,0 +1,49 @@
+import path from 'path'
+import type { StorybookConfig } from '@storybook/vue3-vite'
+import AutoImportFunctions from 'unplugin-auto-import/vite'
+import AutoImportComponents from 'unplugin-vue-components/vite'
+
+const config: StorybookConfig = {
+  viteFinal: async (config) => {
+    if (config?.plugins) {
+      // 以下を追加
+      config.plugins.push(
+        AutoImportFunctions ({ imports: [
+          'vue',
+          'vee-validate',
+          'vue-router',
+          'pinia',
+        ], dts: '.storybook/auto-imports.d.ts' }),
+      )
+      // 以下を追加
+      config.plugins.push(
+        AutoImportComponents({
+          // 自動インポートするコンポーネントが存在するディレクトリを指定
+          dirs: ['src/components'],
+          dts: '.storybook/components.d.ts',
+        }),
+      )
+    }
+    if (config?.resolve?.alias) {
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        '@': path.resolve(__dirname, '../src'),
+        '~': path.resolve(__dirname, '../src'),
+      }
+    }
+    return config
+  },
+  staticDirs: ['../public'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-onboarding',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/experimental-addon-test'
+  ],
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {},
+  },
+}
+export default config

.storybook/preview.ts

@@ -0,0 +1,69 @@
+import { type Preview, setup } from '@storybook/vue3'
+import type { App } from 'vue'
+import { createPinia } from 'pinia'
+import { localize, setLocale } from '@vee-validate/i18n'
+import ja from '@vee-validate/i18n/dist/locale/ja.json'
+import { all } from '@vee-validate/rules'
+import { defineRule, configure } from 'vee-validate'
+import { initialize, mswLoader } from 'msw-storybook-addon'
+import { createMemoryHistory, createRouter } from 'vue-router'
+import Form from '../src/pages/formScript.vue'
+import MyPage from '../src/pages/myPage.vue'
+
+// MSWの有効化
+initialize({
+  onUnhandledRequest: 'bypass',
+})
+
+configure({
+  generateMessage: localize({
+    // エラーメッセージの日本語化
+    ja,
+  }),
+})
+
+// すべてのルールをインポート
+Object.entries(all).forEach(([name, rule]) => {
+  defineRule(name, rule)
+})
+
+// エラーメッセージの日本語化
+setLocale('ja')
+
+const routes = [
+  {
+    path: '/',
+    name: 'Form',
+    component: Form,
+  },
+  {
+    path: '/myPage',
+    name: 'MyPage',
+    component: MyPage,
+  },
+]
+const router = createRouter({
+  history: createMemoryHistory(),
+  routes,
+})
+const pinia = createPinia()
+
+setup((app: App) => {
+  app.use(pinia)
+  app.use(router)
+})
+
+const preview: Preview = {
+  // MSWローダーの設定
+  loaders: [mswLoader],
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+}
+
+export default preview

.storybook/vitest.setup.ts

@@ -0,0 +1,9 @@
+import { beforeAll } from 'vitest';
+import { setProjectAnnotations } from '@storybook/vue3';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+const project = setProjectAnnotations([projectAnnotations]);
+
+beforeAll(project.beforeAll);

nuxt.config.ts

@@ -1,18 +1,15 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  modules: [
-    '@nuxt/eslint',
-    ['@pinia/nuxt',
-      {
-        autoImports: [
-          // defineStoreの自動インポート
-          'defineStore',
-        ],
-        // vuexも併用する場合は以下を追加
-        // disableVuex: false ,
-      },
-    ],
-  ],
+  modules: ['@nuxtjs/storybook', '@nuxt/eslint', ['@pinia/nuxt',
+    {
+      autoImports: [
+        // defineStoreの自動インポート
+        'defineStore',
+      ],
+      // vuexも併用する場合は以下を追加
+      // disableVuex: false ,
+    },
+  ], '@nuxtjs/storybook'],
   components: [
     { path: '~/components/', pathPrefix: false },
   ],
@@ -31,4 +28,8 @@ export default defineNuxtConfig({
       },
     },
   },
+  storybook: {
+    host: 'http://localhost',
+    port: 6006,
+  },
 })