feat: css agnostic solution

.eslintrc.js

@@ -18,7 +18,7 @@ module.exports = {
     tsconfigRootDir: __dirname,
     project: ['./tsconfig.json'],
   },
-  ignorePatterns: ['example/*', '.eslintrc.js', 'jest.config.js'],
+  ignorePatterns: ['examples/*', '.eslintrc.js', 'jest.config.js'],
   env: {
     'jest/globals': true,
   },
@@ -53,6 +53,7 @@ module.exports = {
     ],
 
     'react/prop-types': 'off',
+    'react/require-default-props': 'off',
     'no-shadow': 'off',
     'import/exports-last': 'off',
     'import/group-exports': 'off',

examples/with-styled-components/README.md

@@ -0,0 +1,6 @@
+# Example (with `styled-components`)
+
+You can play with the example on:
+
+- [CodeSandbox](TODO)
+- Run and play around locally by running `npm run start` inside `/examples/with-styled-components`

src/components/RangeSlider/index.tsx → examples/with-styled-components/components/RangeSlider.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 
 import {
   SliderContainer,
@@ -7,11 +7,9 @@ import {
   SliderHandle,
   SliderMarker,
   SliderMarkerLabel,
-} from '../styled'
+} from '../styles'
 
-import { useRangeSlider } from 'hooks/useRangeSlider'
-
-import { IRangeMarker, TRangeTuple } from 'types'
+import { useRangeSlider, IRangeMarker, TRangeTuple } from '../../../dist'
 
 export interface IRangeSliderProps {
   value: TRangeTuple
@@ -50,7 +48,7 @@ const RangeSlider: React.FC<IRangeSliderProps> = ({
   return (
     <SliderContainer>
       <SliderRail {...getRailProps()} />
-      <SliderTrack data-testid="range-slider-track" {...getTrackProps()} />
+      <SliderTrack {...getTrackProps()} />
 
       {markers?.map((marker) => {
         const { style, isInRange } = getMarkerProps(marker)
@@ -65,8 +63,8 @@ const RangeSlider: React.FC<IRangeSliderProps> = ({
         )
       })}
 
-      <SliderHandle data-testid="range-slider-min-handle" {...getMinHandleProps()} />
-      <SliderHandle data-testid="range-slider-max-handle" {...getMaxHandleProps()} />
+      <SliderHandle {...getMinHandleProps()} />
+      <SliderHandle {...getMaxHandleProps()} />
     </SliderContainer>
   )
 }

src/components/Slider/index.tsx → examples/with-styled-components/components/Slider.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 
 import {
   SliderContainer,
@@ -7,11 +7,9 @@ import {
   SliderHandle,
   SliderMarkerLabel,
   SliderMarker,
-} from '../styled'
+} from '../styles'
 
-import { useSlider } from 'hooks/useSlider'
-
-import { IRangeMarker } from 'types'
+import { useSlider, IRangeMarker } from '../../../dist'
 
 export interface ISliderProps {
   value: number
@@ -45,7 +43,7 @@ const Slider: React.FC<ISliderProps> = ({
   return (
     <SliderContainer>
       <SliderRail {...getRailProps()} />
-      <SliderTrack data-testid="slider-track" {...getTrackProps()} />
+      <SliderTrack {...getTrackProps()} />
 
       {markers?.map((marker) => {
         const { style, isInRange } = getMarkerProps(marker)
@@ -60,7 +58,7 @@ const Slider: React.FC<ISliderProps> = ({
         )
       })}
 
-      <SliderHandle data-testid="slider-handle" {...getHandleProps()} />
+      <SliderHandle {...getHandleProps()} />
     </SliderContainer>
   )
 }

examples/with-styled-components/index.tsx

@@ -0,0 +1,51 @@
+import 'react-app-polyfill/ie11'
+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
+
+import { Slider } from './components/Slider'
+import { RangeSlider } from './components/RangeSlider'
+import { TRangeTuple } from '../../dist'
+
+const markers = [
+  { value: 0 },
+  { value: 20 },
+  { value: 40 },
+  { value: 60 },
+  { value: 80 },
+  { value: 100 },
+]
+
+const exampleFormatter = (value: number) => `$${value}`
+
+const App = () => {
+  const [value, setValue] = React.useState(0)
+  const [range, setRange] = React.useState<TRangeTuple>([0, 100])
+
+  return (
+    <>
+      <h1>Styled Components Examples</h1>
+
+      <h2>Slider</h2>
+      <Slider
+        value={value}
+        min={0}
+        max={100}
+        onChange={setValue}
+        markers={markers}
+        formatValue={exampleFormatter}
+      />
+
+      <h2>Range Slider</h2>
+      <RangeSlider
+        value={range}
+        min={0}
+        max={100}
+        onChange={setRange}
+        markers={markers}
+        formatValue={exampleFormatter}
+      />
+    </>
+  )
+}
+
+ReactDOM.render(<App />, document.getElementById('root'))