refactor: display options for unit on storybook and emit events on va…

…lue and unit change

fix devhatt#26

src/components/RangeSlider/index.js

@@ -1,7 +1,7 @@
 import { Component } from 'pet-dex-utilities';
 import './index.scss';
 
-const events = ['change', 'interactionEnd'];
+const events = ['value:change', 'unit:change', 'interactionEnd', 'interactionStart'];
 
 const html = `
   <div class="range-slider" data-select="range-slider">
@@ -40,9 +40,10 @@ export default function RangeSlider({
   const handleStart = (clientX) => {
     isMouseDown = true;
     startX = clientX;
+    this.emit('interactionStart', currentValue);
   };
 
-  const handleMove = (clientX) => {
+  const moveBackground = (clientX) => {
     if (!isMouseDown) return;
 
     const mouseX = clientX;
@@ -58,31 +59,31 @@ export default function RangeSlider({
     unitElement.textContent = unit;
 
     startX = mouseX;
-    this.emit('change', currentValue);
+    this.emit('value:change', currentValue);
   };
 
   const handleEnd = () => {
     isMouseDown = false;
     this.emit('interactionEnd', currentValue);
   };
 
-  const handleMouseMove = (event) => {
+  const handleMove = (event) => {
     event.preventDefault();
     const clientX = event.type === 'touchmove' ? event.touches[0].clientX : event.clientX;
-    handleMove(clientX);
+    moveBackground(clientX);
   };
 
   containerElement.addEventListener('mousedown', (event) => {
     event.preventDefault();
     handleStart(event.clientX);
-    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mousemove', handleMove);
     document.addEventListener('mouseup', handleEnd);
   });
 
   containerElement.addEventListener('touchstart', (event) => {
     event.preventDefault();
     handleStart(event.touches[0].clientX);
-    document.addEventListener('touchmove', handleMouseMove);
+    document.addEventListener('touchmove', handleMove);
     document.addEventListener('touchend', handleEnd);
   });
 }
@@ -96,12 +97,14 @@ RangeSlider.prototype = Object.assign(
     },
     setValue(value) {
       this.selected.get('range-slider-value').textContent = value.toFixed(1);
+      this.emit('value:change', value);
     },
     getUnit() {
       return this.selected.get('range-slider-unit').textContent;
     },
     setUnit(unit) {
       this.selected.get('range-slider-unit').textContent = unit;
+      this.emit('unit:change', unit);
     },
     getMinimum() {
       return this.minimum;

src/stories/RangeSlider.stories.js

@@ -12,7 +12,13 @@ export default {
   argTypes: {
     minimum: { control: 'number', default: 0 },
     maximum: { control: 'number', default: 100 },
-    unit: { control: 'text', default: 'kg' },
+    unit: {
+      control: {
+        type: 'text',
+        options: ['kg', 'lb'],
+      },
+      default: 'kg',
+    },
     value: { control: 'number', default: 10 },
     stepSize: { control: 'number', default: 0.05 },
   },