@rpg-engine/long-bow 0.2.90 → 0.2.91

package/src/stories/ItemQuantitySelector.stories.tsx

@@ -0,0 +1,26 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '..';
+import {
+  IItemQuantitySelectorProps,
+  ItemQuantitySelector,
+} from '../components/Item/Inventory/ItemQuantitySelector';
+
+const meta: Meta = {
+  title: 'Item Quantity Selector',
+  component: ItemQuantitySelector,
+};
+
+export default meta;
+
+const Template: Story<IItemQuantitySelectorProps> = args => (
+  <RPGUIRoot>
+    <ItemQuantitySelector {...args} />
+  </RPGUIRoot>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  quantity: 10,
+};

package/src/stories/RangeSlider.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, Story } from '@storybook/react';
-import React from 'react';
+import React, { useState } from 'react';
 import {
   IRangeSliderProps,
   RangeSlider,
@@ -43,11 +43,15 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: Story<IRangeSliderProps> = args => (
-  <RPGUIRoot>
-    <RangeSlider {...args} />
-  </RPGUIRoot>
-);
+const Template: Story<IRangeSliderProps> = args => {
+  const [value, setValue] = useState(50);
+
+  return (
+    <RPGUIRoot>
+      <RangeSlider {...args} value={value} onChange={setValue} />
+    </RPGUIRoot>
+  );
+};
 
 // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
 // https://storybook.js.org/docs/react/workflows/unit-testing
@@ -57,7 +61,4 @@ Default.args = {
   type: RangeSliderType.Slider,
   valueMin: 0,
   valueMax: 100,
-  onChange: n => {
-    console.log('onChange', n);
-  },
 };