import {useArgs} from '@storybook/preview-api'; import {fn} from '@storybook/test'; import Hotbar from '@/components/hotbar.jsx'; import DomDecorator from './dom-decorator.jsx'; import potion from '/assets/potion.png?url'; const slots = Array(10).fill({}); slots[2] = {image: potion, qty: 24}; export default { title: 'Dom/Inventory/Hotbar', component: Hotbar, decorators: [ (Hotbar, ctx) => { const [, updateArgs] = useArgs(); const {onActivate} = ctx.args; ctx.args.onActivate = (i) => { updateArgs({active: i}); if (onActivate) { onActivate(i); } }; return Hotbar(); }, DomDecorator(), ], tags: ['autodocs'], args: { active: 0, onActivate: fn(), slots, }, argTypes: { active: { control: { type: 'number', min: 0, max: 9, } }, }, }; export const Default = {};