feat: Add Storybook for the Vue package instead of Histoire

.gitignore

@@ -311,4 +311,5 @@ vite.config.mts.timestamp-*
 *.prompt.md
 
 # Solid Start
-.vinxi
+.vinxi
+*storybook.log

packages/vue/.storybook/main.ts

@@ -1 +1,40 @@
-import './main.css'
+import type { StorybookConfig } from '@storybook/vue3-vite'
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.ts'],
+  addons: [
+    {
+      name: '@storybook/addon-essentials',
+      options: { backgrounds: false, controls: false, actions: false },
+    },
+    '@storybook/addon-a11y',
+  ],
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {},
+  },
+  core: {
+    disableTelemetry: true,
+  },
+  docs: {
+    autodocs: false,
+  },
+
+
+  // TODO: fix this when vue-docgen accepts types from other packages in components
+  // This is a workaround until vue-docgen-plugin is fixed since we also dont use autodocs
+  // This removes the plugin vue-docgen-plugin so it wont load and throws an error on the use of an type import like
+  // import { Avatar, type AvatarRootEmits, type AvatarRootProps } from '@ark-ui/vue/avatar'
+  // using options: { docgen: "vue-component-meta",} throws other errors with node_modules/@zag-js/avatar/dist/index.mjs.vue' 
+  // could not be found. This could be a fix for the vue-docgen-plugin error but it is not working for now
+  viteFinal(config) {
+    const vueDocgenIndex = config.plugins?.findIndex((plugin) => 
+      plugin && typeof plugin === 'object' && 'name' in plugin && plugin.name === 'storybook:vue-docgen-plugin'
+    ) ?? -1
+    if (vueDocgenIndex !== -1) config.plugins?.splice(vueDocgenIndex, 1)
+    return config
+  }
+}
+
+
+export default config

packages/vue/.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from '@storybook/vue3'
+import './main.css'
+
+const preview: Preview = {
+  parameters: {
+    options: {
+      storySort: {
+        method: 'alphabetical',
+      },
+    },
+    layout: 'padded',
+  },
+}
+
+export default preview

packages/vue/package.json

@@ -72,10 +72,11 @@
     "test": "vitest",
     "test:ci": "vitest --run",
     "typecheck": "vue-tsc",
-    "storybook": "histoire dev",
+    "storybook": "storybook dev -p 6009",
     "release-it": "release-it --config ../../release-it.json",
     "prepack": "clean-package",
-    "postpack": "clean-package restore"
+    "postpack": "clean-package restore",
+    "build-storybook": "storybook build"
   },
   "publishConfig": {
     "access": "public"
@@ -137,23 +138,32 @@
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
-    "@histoire/plugin-vue": "0.17.17",
+    "@chromatic-com/storybook": "^3",
     "@release-it/keep-a-changelog": "6.0.0",
+    "@storybook/addon-essentials": "^8.6.7",
+    "@storybook/blocks": "^8.6.7",
+    "@storybook/experimental-addon-test": "^8.6.7",
+    "@storybook/test": "^8.6.7",
+    "@storybook/vue3": "^8.6.7",
+    "@storybook/vue3-vite": "^8.6.7",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/user-event": "14.6.1",
     "@testing-library/vue": "8.0.3",
     "@types/jsdom": "21.1.7",
     "@vitejs/plugin-vue": "5.2.3",
     "@vitejs/plugin-vue-jsx": "4.1.2",
+    "@vitest/browser": "3.0.9",
+    "@vitest/coverage-v8": "3.0.9",
     "@vue/compiler-sfc": "3.5.13",
     "clean-package": "2.2.0",
     "globby": "14.1.0",
-    "histoire": "0.17.17",
     "jsdom": "26.0.0",
     "lucide-vue-next": "0.482.0",
+    "playwright": "1.51.1",
     "release-it": "18.1.2",
     "resize-observer-polyfill": "1.5.1",
+    "storybook": "^8.6.7",
     "typescript": "5.8.2",
     "vite": "6.2.2",
     "vite-plugin-dts": "4.5.3",

packages/vue/src/components/accordion/accordion.stories.ts

@@ -0,0 +1,120 @@
+import type { Meta } from '@storybook/vue3'
+
+import AccordionExample from './examples/accordion.vue'
+import BasicExample from './examples/basic.vue'
+import CollapsibleExample from './examples/collapsible.vue'
+import ContextFocusedValueExample from './examples/context/focusedValue.vue'
+import ContextGetItemStateExample from './examples/context/getItemState.vue'
+import ContextSetValueExample from './examples/context/setValue.vue'
+import ContextValueExample from './examples/context/value.vue'
+import ControlledExample from './examples/controlled.vue'
+import DisabledExample from './examples/disabled.vue'
+import HorizontalExample from './examples/horizontal.vue'
+import MultipleExample from './examples/multiple.vue'
+import RenderPropExample from './examples/render-prop.vue'
+import RootProviderExample from './examples/root-provider.vue'
+import VerticalExample from './examples/vertical.vue'
+
+const meta = {
+  title: 'Components / Accordion',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const RenderProp = {
+  render: () => ({
+    components: { RenderPropExample },
+    template: '<RenderPropExample />',
+  }),
+}
+
+export const Collapsible = {
+  render: () => ({
+    components: { CollapsibleExample },
+    template: '<CollapsibleExample />',
+  }),
+}
+
+export const Multiple = {
+  render: () => ({
+    components: { MultipleExample },
+    template: '<MultipleExample />',
+  }),
+}
+
+export const Controlled = {
+  render: () => ({
+    components: { ControlledExample },
+    template: '<ControlledExample />',
+  }),
+}
+
+export const Vertical = {
+  render: () => ({
+    components: { VerticalExample },
+    template: '<VerticalExample />',
+  }),
+}
+
+export const Horizontal = {
+  render: () => ({
+    components: { HorizontalExample },
+    template: '<HorizontalExample />',
+  }),
+}
+
+export const Disabled = {
+  render: () => ({
+    components: { DisabledExample },
+    template: '<DisabledExample />',
+  }),
+}
+
+export const Closed = {
+  render: () => ({
+    components: { AccordionExample },
+    template: `<AccordionExample multiple :items="['React', 'Solid', 'Vue']" />`,
+  }),
+}
+
+export const RootProvider = {
+  render: () => ({
+    components: { RootProviderExample },
+    template: '<RootProviderExample />',
+  }),
+}
+
+export const ContextFocusedValue = {
+  render: () => ({
+    components: { ContextFocusedValueExample },
+    template: '<ContextFocusedValueExample />',
+  }),
+}
+
+export const ContextValue = {
+  render: () => ({
+    components: { ContextValueExample },
+    template: '<ContextValueExample />',
+  }),
+}
+
+export const ContextSetValue = {
+  render: () => ({
+    components: { ContextSetValueExample },
+    template: '<ContextSetValueExample />',
+  }),
+}
+
+export const ContextGetItemState = {
+  render: () => ({
+    components: { ContextGetItemStateExample },
+    template: '<ContextGetItemStateExample />',
+  }),
+}

packages/vue/src/components/avatar/avatar.stories.ts

@@ -0,0 +1,46 @@
+import type { Meta } from '@storybook/vue3'
+
+import BasicExample from './examples/basic.vue'
+import ClosedExample from './examples/closed.vue'
+import EventsExample from './examples/events.vue'
+import RootProviderExample from './examples/root-provider.vue'
+
+const meta = {
+  title: 'Components / Avatar',
+} as Meta
+
+export default meta
+
+export const Basic = {
+  render: () => ({
+    components: { BasicExample },
+    template: '<BasicExample />',
+  }),
+}
+
+export const Events = {
+  render: () => ({
+    components: { EventsExample },
+    template: '<EventsExample />',
+  }),
+}
+
+export const Closed = {
+  render: () => ({
+    components: { ClosedExample },
+    template: `
+      <ClosedExample
+        name="Christian"
+        src="https://avatars.githubusercontent.com/u/1846056?v=4"
+        @status-change="(e) => console.log(e.status)"
+      />
+      `,
+  }),
+}
+
+export const RootProvider = {
+  render: () => ({
+    components: { RootProviderExample },
+    template: '<RootProviderExample />',
+  }),
+}