feat(store-ui): slider

packages/store-ui/README.md

@@ -4,14 +4,31 @@
 
 [![NPM](https://img.shields.io/npm/v/@vtex/store-ui.svg)](https://www.npmjs.com/package/@vtex/store-ui) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 
-## Install
+## Installation
 
-```bash
+From the command line in your project directory, run npm install `@vtex/store-ui` or yarn add `@vtex/store-ui`.
+
+```cmd
+npm install @vtex/store-ui
+# or
 yarn add @vtex/store-ui
 ```
 
+For style, you can use our default theme. To install:
+
+```cmd
+npm install @vtex/theme-b2c-tailwind
+# or
+yarn add @vtex/theme-b2c-tailwind
+```
+
 ## Usage
 
+```tsx
+import { Button } from '@vtex/store-ui'
+import '@vtex/theme-b2c-tailwind/dist/index.css'
+```
+
 ```tsx
 import React, { Component } from 'react'
 

packages/store-ui/src/atoms/Slider/Slider.test.tsx

@@ -0,0 +1,12 @@
+import { render } from '@testing-library/react'
+import React from 'react'
+
+import Slider from './Slider'
+
+describe('Slider', () => {
+  it('`data-store-slider` is present', () => {
+    const { getByTestId } = render(<Slider min={0} max={100} />)
+
+    expect(getByTestId('store-slider')).toHaveAttribute('data-store-slider')
+  })
+})

packages/store-ui/src/atoms/Slider/Slider.tsx

@@ -0,0 +1,140 @@
+/**
+ * This code is inspired by the work of [sandra-lewis](https://codesandbox.io/u/sandra-lewis)
+ */
+
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+
+export type SliderProps = {
+  /**
+   * The minimum value of the slider.
+   */
+  min: number
+  /**
+   * The maximum value of the slider.
+   */
+  max: number
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   *
+   * @default 'store-slider'
+   */
+  testId?: string
+  /**
+   * Callback that fires when the slider value changes.
+   */
+  onChange?: (value: { min: number; max: number }) => void
+  /**
+   * Set a human-readable name for the slider.
+   */
+  ariaLabel?: string
+  /**
+   * A function used to set a human-readable value text based on the slider's current value.
+   */
+  getAriaValueText?(value: number, thumb?: 'min' | 'max'): string
+  /**
+   * Returns the value of element's class content attribute.
+   */
+  className?: string
+}
+
+const Slider = ({
+  min,
+  max,
+  onChange,
+  testId = 'store-slider',
+  ariaLabel,
+  getAriaValueText,
+  className,
+}: SliderProps) => {
+  const [minVal, setMinVal] = useState(min)
+  const [maxVal, setMaxVal] = useState(max)
+
+  const minValRef = useRef(min)
+  const maxValRef = useRef(max)
+  const range = useRef<HTMLDivElement>(null)
+
+  const getPercent = useCallback(
+    (value) => Math.round(((value - min) / (max - min)) * 100),
+    [min, max]
+  )
+
+  // width of the range to reduce from the left side
+  useEffect(() => {
+    const minPercent = getPercent(minVal)
+    const maxPercent = getPercent(maxValRef.current)
+
+    if (range.current) {
+      range.current.style.left = `${minPercent}%`
+      range.current.style.width = `${maxPercent - minPercent}%`
+    }
+  }, [minVal, getPercent])
+
+  // width of the range to reduce from the right side
+  useEffect(() => {
+    const minPercent = getPercent(minValRef.current)
+    const maxPercent = getPercent(maxVal)
+
+    if (range.current) {
+      range.current.style.width = `${maxPercent - minPercent}%`
+    }
+  }, [maxVal, getPercent])
+
+  useEffect(() => {
+    onChange?.({ min: minVal, max: maxVal })
+  }, [minVal, maxVal, onChange])
+
+  return (
+    <div
+      data-store-slider
+      data-testid={testId}
+      aria-label={ariaLabel}
+      // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
+      role="slider"
+      className={className}
+    >
+      <div ref={range} data-store-slider-range />
+      <input
+        type="range"
+        min={min}
+        max={max}
+        value={minVal}
+        onChange={(event) => {
+          const value = Math.min(Number(event.target.value), maxVal - 1)
+
+          setMinVal(value)
+          minValRef.current = value
+        }}
+        data-store-slider-thumb="left"
+        aria-valuemin={min}
+        aria-valuemax={max}
+        aria-valuenow={minVal}
+        aria-label={String(minVal)}
+        aria-labelledby={
+          getAriaValueText ? getAriaValueText(minVal, 'min') : undefined
+        }
+      />
+      <input
+        type="range"
+        min={min}
+        max={max}
+        value={maxVal}
+        onChange={(event) => {
+          const value = Math.max(Number(event.target.value), minVal + 1)
+
+          setMaxVal(value)
+          maxValRef.current = value
+        }}
+        data-store-slider-thumb="right"
+        aria-valuemin={min}
+        aria-valuemax={max}
+        aria-valuenow={maxVal}
+        aria-label={String(maxVal)}
+        aria-labelledby={
+          getAriaValueText ? getAriaValueText(maxVal, 'max') : undefined
+        }
+      />
+    </div>
+  )
+}
+
+export default Slider

packages/store-ui/src/atoms/Slider/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Slider'
+export type { SliderProps } from './Slider'

packages/store-ui/src/atoms/Slider/stories/Slider.mdx

@@ -0,0 +1,29 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'
+import Slider from '../Slider'
+
+# Slider
+
+<Canvas>
+  <Story id="atoms-slider--slider" />
+</Canvas>
+
+# Props
+
+<ArgsTable of={Slider} />
+
+# CSS Selectors
+
+```css
+[data-store-slider] {
+}
+[data-store-slider-range] {
+}
+[data-store-slider-thumb='(left|right)'] {
+}
+```
+
+# TODO
+
+- [ ] [Keyboard Interaction](https://www.w3.org/TR/wai-aria-practices-1.2/#slidertwothumb_kbd_interaction)
+- [ ] More test cases
+- [ ] Support to orientation

packages/store-ui/src/atoms/Slider/stories/Slider.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, Story } from '@storybook/react'
+import React from 'react'
+
+import type { ComponentArgTypes } from '../../../typings/utils'
+import type { SliderProps } from '../Slider'
+import Component from '../Slider'
+import mdx from './Slider.mdx'
+
+const SliderTemplate: Story<SliderProps> = (props) => <Component {...props} />
+
+export const Slider = SliderTemplate.bind({})
+
+const argTypes: ComponentArgTypes<SliderProps> = {
+  min: {
+    control: { type: 'number', min: 0 },
+    defaultValue: 0,
+  },
+  max: {
+    control: { type: 'number', min: 1 },
+    defaultValue: 500,
+  },
+}
+
+export default {
+  title: 'Atoms/Slider',
+  argTypes,
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+} as Meta

packages/store-ui/src/deprecated/index.ts

@@ -20,7 +20,7 @@ export {
   Text,
   Radio as UIRadio,
   Checkbox as UICheckbox,
-  Slider,
+  Slider as UISlider,
   Field,
   Progress,
   Donut,
@@ -57,7 +57,7 @@ export type {
   TextProps,
   RadioProps as UIRadioProps,
   CheckboxProps as UICheckboxProps,
-  SliderProps,
+  SliderProps as UISliderProps,
   ProgressProps,
   DonutProps,
   AvatarProps,

packages/store-ui/src/index.ts

@@ -32,6 +32,9 @@ export type { RadioProps } from './atoms/Radio'
 export { default as Badge } from './atoms/Badge'
 export type { BadgeProps } from './atoms/Badge'
 
+export { default as Slider } from './atoms/Slider'
+export type { SliderProps } from './atoms/Slider'
+
 // Molecules
 export { default as Bullets } from './molecules/Bullets'
 export type { BulletsProps } from './molecules/Bullets'

themes/theme-b2c-tailwind/src/atoms/index.css

@@ -6,3 +6,4 @@
 @import "./textarea.css";
 @import "./overlay.css";
 @import "./badge.css";
+@import "./slider.css";

themes/theme-b2c-tailwind/src/atoms/slider.css

@@ -0,0 +1,46 @@
+[data-store-slider] {
+  @apply bg-gray-200 rounded-full relative h-2 w-full;
+}
+
+[data-store-slider-range] {
+  @apply bg-blue-500 absolute;
+  height: inherit;
+}
+
+/* Removing the default appearance */
+[data-store-slider-thumb],
+[data-store-slider-thumb]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+[data-store-slider-thumb] {
+  @apply pointer-events-none h-0 outline-none absolute;
+  width: inherit;
+}
+
+[data-store-slider-thumb='left'] {
+  @apply z-10;
+}
+
+[data-store-slider-thumb='right'] {
+  @apply z-20;
+}
+
+/* For Chrome browsers */
+[data-store-slider-thumb]::-webkit-slider-thumb {
+  @apply bg-gray-100 border-none rounded-full pointer-events-auto h-4 w-4 relative mt-1;
+  box-shadow: 0 0 1px 1px #ced4da;
+  cursor: col-resize;
+}
+
+[data-store-slider-thumb='left']::-webkit-slider-thumb {
+  @apply -ml-2;
+}
+
+/* For Firefox browsers */
+[data-store-slider-thumb]::-moz-range-thumb {
+  @apply bg-gray-100 border-none rounded-full pointer-events-auto h-4 w-4 relative mt-1;
+  box-shadow: 0 0 1px 1px #ced4da;
+  cursor: col-resize;
+}