Commit 3515a447 authored by Дмитрий Малюгин's avatar Дмитрий Малюгин 🕓
Browse files

feat: install Storybook

parent b4cfb8c5

.gitignore

+2 −0
Original line number Diff line number Diff line
@@ -28,3 +28,5 @@ coverage 
*.sw?



*.tsbuildinfo



*storybook.log

.storybook/main.ts

0 → 100644
+16 −0
Original line number Diff line number Diff line 
import type { StorybookConfig } from '@storybook/vue3-vite'



const config: StorybookConfig = {

  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],

  addons: [

    '@storybook/addon-onboarding',

    '@storybook/addon-essentials',

    '@chromatic-com/storybook',

    '@storybook/addon-interactions',

  ],

  framework: {

    name: '@storybook/vue3-vite',

    options: {},

  },

}

export default config

.storybook/preview.ts

0 → 100644
+14 −0
Original line number Diff line number Diff line 
import type { Preview } from '@storybook/vue3'



const preview: Preview = {

  parameters: {

    controls: {

      matchers: {

        color: /(background|color)$/i,

        date: /Date$/i,

      },

    },

  },

}



export default preview

package.json

+18 −1
Original line number Diff line number Diff line
@@ -11,12 +11,22 @@ 
    "build-only": "vite build",

    "type-check": "vue-tsc --build --force",

    "lint": "eslint . --fix",

    "format": "prettier --write src/"

    "format": "prettier --write src/",

    "storybook": "storybook dev -p 6006",

    "build-storybook": "storybook build"

  },

  "dependencies": {

    "vue": "^3.5.12"

  },

  "devDependencies": {

    "@chromatic-com/storybook": "3.2.2",

    "@storybook/addon-essentials": "8.4.5",

    "@storybook/addon-interactions": "8.4.5",

    "@storybook/addon-onboarding": "8.4.5",

    "@storybook/blocks": "8.4.5",

    "@storybook/test": "8.4.5",

    "@storybook/vue3": "8.4.5",

    "@storybook/vue3-vite": "8.4.5",

    "@tsconfig/node22": "^22.0.0",

    "@types/jsdom": "^21.1.7",

    "@types/node": "^22.9.0",
@@ -27,14 +37,21 @@ 
    "@vue/test-utils": "^2.4.6",

    "@vue/tsconfig": "^0.5.1",

    "eslint": "^9.14.0",

    "eslint-plugin-storybook": "^0.11.1",

    "eslint-plugin-vue": "^9.30.0",

    "jsdom": "^25.0.1",

    "npm-run-all2": "^7.0.1",

    "prettier": "^3.3.3",

    "storybook": "8.4.5",

    "typescript": "~5.6.3",

    "vite": "^5.4.10",

    "vite-plugin-vue-devtools": "^7.5.4",

    "vitest": "^2.1.4",

    "vue-tsc": "^2.1.10"

  },

  "eslintConfig": {

    "extends": [

      "plugin:storybook/recommended"

    ]

  }

}

src/App.vue

+11 −0
Original line number Diff line number Diff line
@@ -2,7 +2,18 @@ 
</script>



<template>

  <main class="container">

    Hello, storybook!

  </main>

</template>



<style scoped>

.container {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  font-size: 64px;

  font-style: italic;

}

</style>