chore: storybook

stories/dom-decorator.jsx

@@ -1,6 +1,6 @@
 import {useEffect, useRef, useState} from 'react';
 
-import Dom from '@/components/dom.jsx';
+import Dom from '@/react-components/dom.jsx';
 import {RESOLUTION} from '@/constants.js';
 
 function Decorator({children, style}) {
@@ -26,6 +26,7 @@ function Decorator({children, style}) {
       ref={ref}
       style={{
         backgroundColor: '#1099bb',
+        flexDirection: 'column',
         opacity: 0 === scale ? 0 : 1,
         position: 'relative',
         height: `calc(${RESOLUTION.y}px * ${scale})`,

stories/hotbar.stories.js

@@ -1,14 +1,12 @@
 import {useArgs} from '@storybook/preview-api';
 import {fn} from '@storybook/test';
 
-import Hotbar from '@/components/hotbar.jsx';
+import Hotbar from '@/react-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};
+slots[2] = {qty: 24, source: '/assets/potion'};
 
 export default {
   title: 'Dom/Inventory/Hotbar',
@@ -25,7 +23,12 @@ export default {
       };
       return Hotbar();
     },
-    DomDecorator(),
+    DomDecorator({
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+      },
+    }),
   ],
   tags: ['autodocs'],
   args: {

stories/slot.stories.js

@@ -1,9 +1,7 @@
-import Slot from '@/components/slot.jsx';
+import Slot from '@/react-components/slot.jsx';
 
 import DomDecorator from './dom-decorator.jsx';
 
-import potion from '/assets/potion.png?url';
-
 export default {
   title: 'Dom/Inventory/Slot',
   component: Slot,
@@ -33,7 +31,7 @@ export default {
     },
   },
   args: {
-    image: potion,
+    source: '/assets/potion',
   },
 };