feat(input): add input range component (#388)

* feat(input): add input range component

* test(input): add basic test for InputRange component

* chore(input): add story for InputRange component

* update slider colors

* chore(input): PR requested changes

* Remove unused useState
* Remove any prop key from TS declaration file
* Move background size to styled component
* Rename TextRange story to InputRange
* Use getColor with theme colors instead of hex values

* chore(npm): version patch (dev)

* v2.3.25

Co-authored-by: Panos Christophides <panos@netdata.cloud>

Author: burbuli8ra

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netdata/netdata-ui",
-  "version": "2.3.24",
+  "version": "2.3.25",
   "description": "netdata UI kit",
   "main": "./lib/index.js",
   "files": [

src/components/input/range/index.d.ts

@@ -0,0 +1,18 @@
+import { ChangeEvent, FC, SyntheticEvent } from "react"
+
+export interface RangeInputProps {
+  "data-testid"?: string
+  max?: number
+  min?: number
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void
+  onClick?: (e: SyntheticEvent<HTMLButtonElement>) => void
+  onInput?: (e: SyntheticEvent<HTMLButtonElement>) => void
+  step?: number
+  value: number
+}
+
+declare const RangeInput: FC<RangeInputProps>
+
+export { RangeInput }
+
+export default RangeInput

src/components/input/range/index.js

@@ -0,0 +1,16 @@
+import React from "react"
+import { InputRange as StyledInputRange } from "./styled"
+
+const InputRange = ({ max = 100, min = 0, step = 1, value = 0, ...rest }) => (
+  <StyledInputRange
+    data-testid="rangeInput"
+    max={max}
+    min={min}
+    step={step}
+    type="range"
+    value={value}
+    {...rest}
+  />
+)
+
+export default InputRange

src/components/input/range/range.stories.js

@@ -0,0 +1,26 @@
+import React, { useState } from "react"
+import { storiesOf } from "@storybook/react"
+import RangeInput from "./index"
+
+const rangeStory = storiesOf("Components|Controls/InputRange", module)
+
+rangeStory.add("Input Range", () => {
+  const [value, setValue] = useState(0.1)
+
+  return (
+    <RangeInput
+      data-testid="metricCorrelation-resultsSlider"
+      min={0}
+      max={1}
+      onChange={event => {
+        console.log(`You changed ${event.target.value.toString()}`)
+      }}
+      onClick={() => {
+        console.log("You clicked input range")
+      }}
+      onInput={event => setValue(event.target.value)}
+      value={value}
+      step={0.00000000000001}
+    />
+  )
+})

src/components/input/range/range.test.js

@@ -0,0 +1,12 @@
+import React from "react"
+import RangeInput from "./index"
+import { renderWithProviders, screen } from "testUtilities"
+
+const setup = props => renderWithProviders(<RangeInput {...props} />)
+
+describe("InputRange component", () => {
+  test("should render component", () => {
+    setup()
+    expect(screen.getByTestId("rangeInput")).toBeInTheDocument()
+  })
+})

src/components/input/range/styled.js

@@ -0,0 +1,27 @@
+import styled from "styled-components"
+import { getColor } from "src/theme"
+
+export const InputRange = styled.input.attrs({ type: "range" })`
+  -webkit-appearance: none;
+  height: 2px;
+  background-color: ${getColor("primary")}40;
+  background-image: linear-gradient(${getColor("primary")}, ${getColor("primary")});
+  background-repeat: no-repeat;
+  background-size: ${({ max, value }) => `${(value * 100) / max}% 100%`};
+  cursor: pointer;
+  width: 100%;
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    height: 10px;
+    width: 10px;
+    border-radius: 50%;
+    background: ${getColor("primary")};
+    transition: all 0.3s ease-in-out;
+
+    &:active {
+      height: 16px;
+      width: 16px;
+    }
+  }
+`

src/index.js

@@ -67,6 +67,8 @@ export {
   FilterBoxAutocompleteHandler,
 } from "./components/filter-box"
 
+export { default as InputRange } from "./components/input/range"
+
 export { default as Drop } from "./components/drops/drop"
 export { default as DropContainer } from "./components/drops/container"
 export { default as Tooltip } from "./components/drops/tooltip"