Skip to content

feat: Add Storybook for the Vue package instead of Histoire #3396

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 73 commits into
base: main
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
73 commits
Select commit Hold shift + click to select a range
4d918aa
feat(vue): init storybook
carwack Mar 18, 2025
1cfe1e0
feat(vue): migrate stories to storybook for avatar component
carwack Mar 18, 2025
653cd22
feat(vue): migrate stories to storybook for accordion component
carwack Mar 18, 2025
92f2e9d
feat(vue): migrate stories to storybook for carousel component
carwack Mar 18, 2025
fceb51d
feat(vue): migrate stories to storybook for checkbox
carwack Mar 18, 2025
c95516d
feat(vue): migrate stories to storybook for clipboard
carwack Mar 18, 2025
468c054
feat(vue): migrate stories to storybook for collapsible
carwack Mar 18, 2025
1277abf
feat(vue): migrate stories to storybook for color picker
carwack Mar 18, 2025
126f68d
feat(vue) migrate stories to storybook for combobox
carwack Mar 18, 2025
4b80030
feat(vue): migrate stories to storybook for date picker
carwack Mar 18, 2025
4dc4261
feat(vue): migrate stories to storybook for dialog
carwack Mar 18, 2025
1fb718f
feat(vue): migrate stories to storybook for editable
carwack Mar 18, 2025
05ea86f
feat(vue): migrate stories to storybook for field
carwack Mar 18, 2025
f7df932
feat(vue): migrate stories to storybook for fieldset
carwack Mar 18, 2025
a4d907a
feat(vue): migrate stories to storybook for file upload
carwack Mar 18, 2025
37372a2
feat(vue): migrate stories to storybook for focus trap
carwack Mar 18, 2025
4da62ad
feat(vue): migrate stories to storybook for format
carwack Mar 18, 2025
b09310b
feat(vue): migrate stories to storybook for frame
carwack Mar 18, 2025
dd8dbb1
feat(vue): migrate stories to storybook for highlight
carwack Mar 18, 2025
945f142
feat(vue): migrate stories to storybook for hover card
carwack Mar 18, 2025
483acd3
refactor(vue): add Components / to storybook meta title
carwack Mar 18, 2025
c35b5cc
feat(vue): migrate stories to storybook for menu
carwack Mar 18, 2025
066978d
feat(vue): migrate stories to storybook for number input
carwack Mar 18, 2025
cd598ee
feat(vue): migrate stories to storybook for pagination
carwack Mar 18, 2025
00bccb1
feat(vue): migrate stories to storybook for pin input
carwack Mar 18, 2025
948374a
feat(vue): migrate stories to storybook for popover
carwack Mar 18, 2025
0a4e191
feat(vue): migrate stories to storybook for presence
carwack Mar 18, 2025
0af6c0e
feat(vue): migrate stories to storybook for qr code
carwack Mar 18, 2025
c307f65
feat(vue): migrate stories to storybook for radio group
carwack Mar 18, 2025
6f7e327
feat(vue): migrate stories to storybook for rating group
carwack Mar 18, 2025
8eb0849
feat(vue): migrate stories to storbook for segment group
carwack Mar 18, 2025
4749d5c
feat(vue): migratie stories to storybook for select
carwack Mar 18, 2025
823e390
feat(vue): migrate stories to storybook for signature pad
carwack Mar 18, 2025
16aad1d
feat(vue): migrate stories to storybook for slider
carwack Mar 18, 2025
881fe52
feat(vue): migrate stories to storybook for splitter
carwack Mar 18, 2025
feb0908
feat(vue): migreate stories to storybook for steps
carwack Mar 18, 2025
bb0235e
feat(vue): migrate stories to storybook for switch
carwack Mar 18, 2025
45e1201
feat(vue): migrate stories to storybook for tabs
carwack Mar 18, 2025
3cae345
feat(vue): migrate stories to storybook for tags input
carwack Mar 18, 2025
ee0492b
feat(vue): migrate stories to storybook for time picker
carwack Mar 18, 2025
4c40518
feat(vue): migrate stories to storybook for timer
carwack Mar 18, 2025
b6fc1bf
feat(vue): migrate stories to storybook for toast
carwack Mar 18, 2025
f384a7e
feat(vue): migrate stories to storybook for toggle
carwack Mar 18, 2025
bd27f80
feat(vue): migreate stories to storybook for toggle group
carwack Mar 18, 2025
84c2c53
feat(vue): migrate stories to storybook for tooltip
carwack Mar 18, 2025
09ad3ed
feat(vue): migrate stories to storybook for tour
carwack Mar 18, 2025
abbe472
feat(vue): migrate stories to storybook for tree view
carwack Mar 18, 2025
886d8e0
feat(vue): migrate stories to storybook for environment
carwack Mar 18, 2025
43d5994
feat(vue): migrate stories to storybook for locale
carwack Mar 18, 2025
57e4dd3
feat(vue): migrate stories to storybook for progress
carwack Mar 18, 2025
1d77784
chore(vue): remove histoire from repo
carwack Mar 18, 2025
20627cb
Merge remote-tracking branch 'origin/main' into feat/add-vue-storybook
carwack Jun 6, 2025
debd9e0
refactor(stories): update stories with args and emits for accordion a…
carwack Jun 6, 2025
fd1d80e
feat(storybook): enable addon actions
carwack Jun 6, 2025
7025dec
feat(storybook): create emitHandlers type to format tuple to function…
carwack Jun 6, 2025
8b9e9e4
refactor(storybook): use EmitHandlers type for better TS support
carwack Jun 6, 2025
9b4202a
feat(angle-slider): add storybook stories
carwack Jun 18, 2025
aabca2d
feat(angle-slider): remove histoire stories
carwack Jun 18, 2025
7a60330
refactor(download-trigger): change to storybook stories
carwack Jun 18, 2025
affd868
feat(combobox): update stories
carwack Jun 18, 2025
027f80b
refactor(floating-panel): change to storybook stories
carwack Jun 18, 2025
cb8ce5c
refactor(vue): add space in storybook title
carwack Jun 18, 2025
5291feb
refactor(listbox): change to storybook stories
carwack Jun 18, 2025
ed8ddb2
refactor(password-input): change to storybook stories
carwack Jun 18, 2025
51a470c
feat(toast): add all examples to stories
carwack Jun 18, 2025
a673fff
feat(tour): add all examples to stories
carwack Jun 18, 2025
4ddf23b
feat(tree-view): add all examples to stories
carwack Jun 18, 2025
baa48ef
feat(environment): add all examples to stories
carwack Jun 18, 2025
5e99bbd
feat(locale): add all examples to stories
carwack Jun 18, 2025
212d766
feat(file-upload): add all examples to stories
carwack Jun 18, 2025
9d13c83
feat(format): add all examples to stories
carwack Jun 18, 2025
307359f
feat(presence): add all examples to stories
carwack Jun 18, 2025
dcdbe1d
feat(splitter): add all examples to stories
carwack Jun 18, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -316,3 +316,5 @@ vite.config.mts.timestamp-*
# Release
.npmrc
.release.sh

*storybook.log
66 changes: 66 additions & 0 deletions .husky/_/pre-commit
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
#!/bin/sh

if [ "$LEFTHOOK_VERBOSE" = "1" -o "$LEFTHOOK_VERBOSE" = "true" ]; then
set -x
fi

if [ "$LEFTHOOK" = "0" ]; then
exit 0
fi

call_lefthook()
{
if test -n "$LEFTHOOK_BIN"
then
"$LEFTHOOK_BIN" "$@"
elif lefthook -h >/dev/null 2>&1
then
lefthook "$@"
else
dir="$(git rev-parse --show-toplevel)"
osArch=$(uname | tr '[:upper:]' '[:lower:]')
cpuArch=$(uname -m | sed 's/aarch64/arm64/;s/x86_64/x64/')
if test -f "$dir/node_modules/lefthook-${osArch}-${cpuArch}/bin/lefthook"
then
"$dir/node_modules/lefthook-${osArch}-${cpuArch}/bin/lefthook" "$@"
elif test -f "$dir/node_modules/@evilmartians/lefthook/bin/lefthook-${osArch}-${cpuArch}/lefthook"
then
"$dir/node_modules/@evilmartians/lefthook/bin/lefthook-${osArch}-${cpuArch}/lefthook" "$@"
elif test -f "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook"
then
"$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook" "$@"
elif test -f "$dir/node_modules/lefthook/bin/index.js"
then
"$dir/node_modules/lefthook/bin/index.js" "$@"

elif go tool lefthook -h >/dev/null 2>&1
then
go tool lefthook "$@"
elif bundle exec lefthook -h >/dev/null 2>&1
then
bundle exec lefthook "$@"
elif yarn lefthook -h >/dev/null 2>&1
then
yarn lefthook "$@"
elif pnpm lefthook -h >/dev/null 2>&1
then
pnpm lefthook "$@"
elif swift package lefthook >/dev/null 2>&1
then
swift package --build-path .build/lefthook --disable-sandbox lefthook "$@"
elif command -v mint >/dev/null 2>&1
then
mint run csjones/lefthook-plugin "$@"
elif uv run lefthook -h >/dev/null 2>&1
then
uv run lefthook "$@"
elif mise exec -- lefthook -h >/dev/null 2>&1
then
mise exec -- lefthook "$@"
else
echo "Can't find lefthook in PATH"
fi
fi
}

call_lefthook run "pre-commit" "$@"
66 changes: 66 additions & 0 deletions .husky/_/prepare-commit-msg
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
#!/bin/sh

if [ "$LEFTHOOK_VERBOSE" = "1" -o "$LEFTHOOK_VERBOSE" = "true" ]; then
set -x
fi

if [ "$LEFTHOOK" = "0" ]; then
exit 0
fi

call_lefthook()
{
if test -n "$LEFTHOOK_BIN"
then
"$LEFTHOOK_BIN" "$@"
elif lefthook -h >/dev/null 2>&1
then
lefthook "$@"
else
dir="$(git rev-parse --show-toplevel)"
osArch=$(uname | tr '[:upper:]' '[:lower:]')
cpuArch=$(uname -m | sed 's/aarch64/arm64/;s/x86_64/x64/')
if test -f "$dir/node_modules/lefthook-${osArch}-${cpuArch}/bin/lefthook"
then
"$dir/node_modules/lefthook-${osArch}-${cpuArch}/bin/lefthook" "$@"
elif test -f "$dir/node_modules/@evilmartians/lefthook/bin/lefthook-${osArch}-${cpuArch}/lefthook"
then
"$dir/node_modules/@evilmartians/lefthook/bin/lefthook-${osArch}-${cpuArch}/lefthook" "$@"
elif test -f "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook"
then
"$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook" "$@"
elif test -f "$dir/node_modules/lefthook/bin/index.js"
then
"$dir/node_modules/lefthook/bin/index.js" "$@"

elif go tool lefthook -h >/dev/null 2>&1
then
go tool lefthook "$@"
elif bundle exec lefthook -h >/dev/null 2>&1
then
bundle exec lefthook "$@"
elif yarn lefthook -h >/dev/null 2>&1
then
yarn lefthook "$@"
elif pnpm lefthook -h >/dev/null 2>&1
then
pnpm lefthook "$@"
elif swift package lefthook >/dev/null 2>&1
then
swift package --build-path .build/lefthook --disable-sandbox lefthook "$@"
elif command -v mint >/dev/null 2>&1
then
mint run csjones/lefthook-plugin "$@"
elif uv run lefthook -h >/dev/null 2>&1
then
uv run lefthook "$@"
elif mise exec -- lefthook -h >/dev/null 2>&1
then
mise exec -- lefthook "$@"
else
echo "Can't find lefthook in PATH"
fi
fi
}

call_lefthook run "prepare-commit-msg" "$@"
Binary file added bun.lockb
Binary file not shown.
42 changes: 41 additions & 1 deletion packages/vue/.storybook/main.ts
Original file line number Diff line number Diff line change
@@ -1 +1,41 @@
import '../../../.storybook/styles.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',
'@storybook/addon-actions',
],
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
15 changes: 15 additions & 0 deletions packages/vue/.storybook/preview.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import type { Preview } from '@storybook/vue3'
import '../../../.storybook/styles.css'

const preview: Preview = {
parameters: {
options: {
storySort: {
method: 'alphabetical',
},
},
layout: 'padded',
},
}

export default preview
6 changes: 6 additions & 0 deletions packages/vue/.storybook/storybook.types.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
// Convert Vue emit tuple format to function format for Storybook
// example: from `statusChange: [details: avatar.StatusChangeDetails]`
// to `statusChanged: (details: avatar.StatusChangeDetails) => void`
export type EmitHandlers<T> = {
[K in keyof T]: T[K] extends readonly [infer P] ? (param: P) => void : never
}
19 changes: 0 additions & 19 deletions packages/vue/histoire.config.ts

This file was deleted.

15 changes: 12 additions & 3 deletions packages/vue/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -75,10 +75,11 @@
"test:coverage": "vitest run --coverage",
"test:ci": "vitest --run",
"typecheck": "vue-tsc",
"storybook": "histoire dev",
"storybook": "storybook dev -p 6009",
"prepack": "clean-package",
"postpack": "clean-package restore",
"release-it": "release-it --config ../../release-it.json"
"release-it": "release-it --config ../../release-it.json",
"build-storybook": "storybook build"
},
"publishConfig": {
"access": "public"
Expand Down Expand Up @@ -143,21 +144,29 @@
},
"devDependencies": {
"@biomejs/biome": "1.9.4",
"@histoire/plugin-vue": "0.17.17",
"@chromatic-com/storybook": "^3",
"@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.4",
"@vitejs/plugin-vue-jsx": "4.2.0",
"@vitest/browser": "3.0.9",
"@vue/compiler-sfc": "3.5.16",
"clean-package": "2.2.0",
"globby": "14.1.0",
"histoire": "0.17.17",
"jsdom": "26.1.0",
"lucide-vue-next": "0.507.0",
"resize-observer-polyfill": "1.5.1",
"storybook": "^8.6.7",
"typescript": "5.8.3",
"vite": "6.3.5",
"vite-plugin-dts": "4.5.3",
Expand Down
Loading