chore: storybook for vue (#3687)

* chore: migrate from histoire to storybook

* chore: update react vite.config.mts to solve biome error

Author: nelsonlaidev

bun.lock

@@ -14,7 +14,7 @@ export default defineConfig({
       staticImport: true,
       exclude: ['**/*.stories.tsx', '**/*.test.tsx', '**/tests/*', '**/examples/*', '**/setup-test.ts'],
       afterBuild: () => {
-        globbySync(['dist/**/*.d.ts', 'dist/**.d.ts']).map((file) => {
+        globbySync(['dist/**/*.d.ts', 'dist/**.d.ts']).forEach((file) => {
           copyFileSync(file, file.replace(/\.d\.ts$/, '.d.cts'))
         })
       },

packages/react/vite.config.mts

@@ -1 +1,14 @@
-import '../../../.storybook/styles.css'
+import type { StorybookConfig } from '@storybook/vue3-vite'
+
+const config: StorybookConfig = {
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {
+      docgen: false,
+    },
+  },
+  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-a11y'],
+}
+
+export default config

packages/vue/.storybook/main.ts

@@ -1,4 +1,4 @@
-import type { Preview } from '@storybook/vue3'
+import type { Preview } from '@storybook/vue3-vite'
 import '../../../.storybook/styles.css'
 
 const preview: Preview = {

packages/vue/.storybook/preview.ts

@@ -73,7 +73,7 @@
     "test:coverage": "vitest run --coverage",
     "test:ci": "vitest --run",
     "typecheck": "vue-tsc",
-    "storybook": "histoire dev",
+    "storybook": "storybook dev -p 6006",
     "prepack": "clean-package",
     "postpack": "clean-package restore",
     "release-it": "release-it --config ../../release-it.json"
@@ -148,7 +148,8 @@
   },
   "devDependencies": {
     "@biomejs/biome": "2.3.1",
-    "@histoire/plugin-vue": "0.17.17",
+    "@storybook/addon-a11y": "9.1.15",
+    "@storybook/vue3-vite": "9.1.15",
     "@testing-library/dom": "10.4.1",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/user-event": "14.6.1",
@@ -158,14 +159,15 @@
     "@vitejs/plugin-vue-jsx": "5.1.1",
     "@vitest/coverage-v8": "3.2.4",
     "@vue/compiler-sfc": "3.5.22",
+    "ajv": "8.17.1",
     "check-password-strength": "3.0.0",
     "clean-package": "2.2.0",
     "globby": "15.0.0",
-    "histoire": "0.17.17",
     "image-conversion": "2.1.1",
     "jsdom": "26.1.0",
     "lucide-vue-next": "0.548.0",
     "resize-observer-polyfill": "1.5.1",
+    "storybook": "9.1.15",
     "typescript": "5.9.3",
     "vee-validate": "4.15.1",
     "vite": "7.1.12",

packages/vue/histoire.config.ts

@@ -0,0 +1,104 @@
+import type { Meta } from '@storybook/vue3-vite'
+
+import BasicExample from './examples/basic.vue'
+import RenderPropExample from './examples/render-prop.vue'
+import CollapsibleExample from './examples/collapsible.vue'
+import MultipleExample from './examples/multiple.vue'
+import ControlledExample from './examples/controlled.vue'
+import VerticalExample from './examples/vertical.vue'
+import HorizontalExample from './examples/horizontal.vue'
+import DisabledExample from './examples/disabled.vue'
+import AccordionExample from './examples/accordion.vue'
+import RootProviderExample from './examples/root-provider.vue'
+import ContextExample from './examples/context.vue'
+import ItemContextExample from './examples/item-context.vue'
+
+const meta: Meta = {
+  title: 'Components / Accordion',
+}
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { Component: BasicExample },
+    template: '<Component />',
+  }),
+}
+
+export const RenderProp = {
+  render: () => ({
+    components: { Component: RenderPropExample },
+    template: '<Component />',
+  }),
+}
+
+export const Collapsible = {
+  render: () => ({
+    components: { Component: CollapsibleExample },
+    template: '<Component />',
+  }),
+}
+
+export const Multiple = {
+  render: () => ({
+    components: { Component: MultipleExample },
+    template: '<Component />',
+  }),
+}
+
+export const Controlled = {
+  render: () => ({
+    components: { Component: ControlledExample },
+    template: '<Component />',
+  }),
+}
+
+export const Vertical = {
+  render: () => ({
+    components: { Component: VerticalExample },
+    template: '<Component />',
+  }),
+}
+
+export const Horizontal = {
+  render: () => ({
+    components: { Component: HorizontalExample },
+    template: '<Component />',
+  }),
+}
+
+export const Disabled = {
+  render: () => ({
+    components: { Component: DisabledExample },
+    template: '<Component />',
+  }),
+}
+
+export const Closed = {
+  render: () => ({
+    components: { Component: AccordionExample },
+    template: "<Component multiple :items=\"['React', 'Solid', 'Vue', 'Svelte']\" />",
+  }),
+}
+
+export const RootProvider = {
+  render: () => ({
+    components: { Component: RootProviderExample },
+    template: '<Component />',
+  }),
+}
+
+export const Context = {
+  render: () => ({
+    components: { Component: ContextExample },
+    template: '<Component />',
+  }),
+}
+
+export const ItemContext = {
+  render: () => ({
+    components: { Component: ItemContextExample },
+    template: '<Component />',
+  }),
+}

packages/vue/package.json

@@ -0,0 +1,32 @@
+import type { Meta } from '@storybook/vue3-vite'
+
+import BasicExample from './examples/basic.vue'
+import ControlledExample from './examples/controlled.vue'
+import StepExample from './examples/step.vue'
+
+const meta: Meta = {
+  title: 'Components / AngleSlider',
+}
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { Component: BasicExample },
+    template: '<Component />',
+  }),
+}
+
+export const Controlled = {
+  render: () => ({
+    components: { Component: ControlledExample },
+    template: '<Component />',
+  }),
+}
+
+export const Step = {
+  render: () => ({
+    components: { Component: StepExample },
+    template: '<Component />',
+  }),
+}