feat: adding autodocs and adjustment in slider components

packages/forms/src/lib/toggle/index.tsx

@@ -40,4 +40,3 @@ export const Toggle: React.FC<ToggleProps> = ({ color, iconOn, iconOff, classNam
     </Switch>
   );
 };
-

packages/forms/src/stories/Toggle.stories.tsx

@@ -21,6 +21,7 @@ export const Basic: Story = {
     color: 'primary'
   }
 }
+
 export const WithIcon: Story = {
   args: {
     color: 'primary',

packages/slider/src/lib/slider.tsx

@@ -1,42 +1,66 @@
 import React, { ReactNode, useState } from "react";
+import { cn } from "@bootwind/common";
 
 export interface SliderProps {
   min?: number;
   max?: number;
+  className?: string;
   leftContent?: ReactNode;
   rightContent?: ReactNode;
 }
 
-const Slider: React.FC<SliderProps> = ({ min = 1, max = 5, leftContent, rightContent }) => {
+export const Slider: React.FC<SliderProps> = ({
+  min = 1,
+  max = 5,
+  className,
+  leftContent,
+  rightContent,
+}) => {
   const [value, setValue] = useState((min + max) / 2);
+  const [hoveredValue, setHoveredValue] = useState<number | null>(null);
+  const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
+  const [showTooltip, setShowTooltip] = useState(false);
 
   const handleSliderChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setValue(parseInt(event.target.value, 10));
   };
 
+  const handleSliderHover = (event: React.MouseEvent<HTMLInputElement>) => {
+    const newValue = parseInt(event.currentTarget.value, 10);
+    const rect = event.currentTarget.getBoundingClientRect();
+    setTooltipPosition({ x: event.clientX, y: rect.top - 30 });
+    setHoveredValue(newValue);
+    setShowTooltip(true); // Show tooltip when hovering
+  };
+
+  const handleSliderLeave = () => {
+    setHoveredValue(null);
+    setShowTooltip(false); // Hide tooltip when leaving
+  };
+
   return (
-    <fieldset className="flex flex-nowrap items-center max-w-xs space-x-2 text-gray-100">
-      {leftContent && (
-        <label htmlFor="Slider">
-          {leftContent}
-        </label>
-      )}
+    <fieldset className="flex flex-nowrap items-center max-w-xs space-x-2 text-gray-100 relative">
+      {leftContent && <label htmlFor="Slider">{leftContent}</label>}
       <input
         id="Slider"
         type="range"
         value={value}
         onChange={handleSliderChange}
-        className="w-full h-2 rounded-lg cursor-pointer accent-primary"
+        onMouseMove={handleSliderHover}
+        onMouseLeave={handleSliderLeave}
+        className={cn(className, "w-full h-2 rounded-lg cursor-pointer accent-primary")}
         min={min}
         max={max}
       />
-      {rightContent && (
-        <label htmlFor="Slider">
-          {rightContent}
-        </label>
+      {showTooltip && hoveredValue !== null && (
+        <div
+          className="tooltip absolute bg-gray-800 text-white text-xs py-1 px-2 rounded"
+          style={{ left: tooltipPosition.x, top: tooltipPosition.y }}
+        >
+          {hoveredValue}
+        </div>
       )}
+      {rightContent && <label htmlFor="Slider">{rightContent}</label>}
     </fieldset>
   );
 };
-
-export default Slider;

packages/slider/src/stories/slider.stories.tsx

@@ -1,32 +1,41 @@
 import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
 
-import Slider from '../lib/slider';
+import { Slider, SliderProps } from '../lib/slider';
 
 export default {
     title: '❖ • Components/Slider',
+    tags: ['autodocs'],
     component: Slider,
-};
+    argTypes: {
+        leftContent: { control: 'text', description: 'Your left content, can be text, emoji or icon' },
+        rightContent: { control: 'text', description: 'Your right content, can be text, emoji or icon' },
+        className: { control: 'text', description: 'String' },
+    },
+} as Meta;
+type Story = StoryObj<SliderProps>;
 
-export const Basic = () => {
-    return <Slider />;
+export const Basic: Story = {
+    args: {
+        min: 0,
+        max: 10,
+    }
 }
 
-export const WithIcons = () => {
-    return (
-        <Slider
-            leftContent={<span className='text-sm'>🔊</span>}
-            rightContent={<span className='text-sm'>🔉</span>}
-        />
-    );
-};
+export const WithEmojiOrIcon: Story = {
+    args: {
+        min: 0,
+        max: 100,
+        leftContent: (<span>🔉</span>),
+        rightContent: (<span>🔊</span>)
+    }
+}
 
-export const CustomRange = () => {
-    return (
-        <Slider
-            min={1}
-            max={75}
-            leftContent={<span className='text-black'>1</span>}
-            rightContent={<span className='text-black'>75</span>}
-        />
-    );
-};
+export const WithNumber: Story = {
+    args: {
+        min: 0,
+        max: 100,
+        leftContent: (<span className='text-black'>0</span>),
+        rightContent: (<span className='text-black'>100</span>)
+    }
+}