Slider Typescript (#712)

* JS to TS

* Typed SliderInput.tsx

* Event types

* Slider types, incomplete

* Typed MinMax.tsx

* Tokens typed, incomplete

* Output.tsx typed

* Slider Style Props typed complete

* Slider typed, working on console error about refs

* Value typed to numbers[] but need a better way to type simple slider

* String style object instead of number

* Type "range" typed

* slidervalue state is always a range

* valueTwoCommited check in story

* Border came back after I removed brackets in css

* Fixed linting error by deconstructing borderProps

* Removed console

* Removed unused

* Slider test typed and fixed type errors

* Used actual Props in Slider Test

* Tokens typed

* Removed unused

* Fixed another linting error that I missed

* Added /** to enable description in the prop table

apps/storybook-react/stories/Slider.stories.jsx

@@ -68,7 +68,8 @@ export const Examples = () => {
         />
         <p style={{ marginTop: '1.5rem' }}>
           <small>
-            Committed output from slider is {valueTwoCommited.join(', ')}
+            Committed output from slider is{' '}
+            {valueTwoCommited && valueTwoCommited.join(', ')}
           </small>
         </p>
       </div>

libraries/core-react/src/Slider/MinMax.jsx → libraries/core-react/src/Slider/MinMax.tsx

@@ -1,6 +1,4 @@
-// @ts-nocheck
-import React from 'react'
-import PropTypes from 'prop-types'
+import React, { forwardRef, ReactNode } from 'react'
 import styled from 'styled-components'
 import { typographyTemplate } from '../_common/templates'
 import { slider as tokens } from './Slider.tokens'
@@ -25,11 +23,14 @@ const StyledMinMax = styled.span`
   }
 `
 
-export const MinMax = ({ children }) => {
-  return <StyledMinMax>{children}</StyledMinMax>
-}
+type Props = {
+  /** Children is required */
+  children: ReactNode
+} & JSX.IntrinsicElements['span']
 
-MinMax.propTypes = {
-  /** @ignore */
-  children: PropTypes.node.isRequired,
-}
+export const MinMax = forwardRef<HTMLSpanElement, Props>(function EdsMinMax(
+  { children },
+  ref,
+) {
+  return <StyledMinMax ref={ref}>{children}</StyledMinMax>
+})

libraries/core-react/src/Slider/Output.jsx → libraries/core-react/src/Slider/Output.tsx

@@ -1,13 +1,13 @@
-// @ts-nocheck
-import React from 'react'
-import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
 import styled from 'styled-components'
 import { typographyTemplate } from '../_common/templates'
 import { slider as tokens } from './Slider.tokens'
 
 const { enabled } = tokens
 
-const StyledOutput = styled.output`
+type StyledProps = Pick<Props, 'value'>
+
+const StyledOutput = styled.output<StyledProps>`
   --val: ${({ value }) => value};
   --realWidth: calc(100% - 12px);
   width: fit-content;
@@ -27,17 +27,20 @@ const StyledOutput = styled.output`
   grid-column: 1 / -1;
 `
 
-export const Output = ({ children, value, htmlFor }) => {
+type Props = {
+  /** Value */
+  value: number
+  /** HtmlFor */
+  htmlFor: string
+} & JSX.IntrinsicElements['output']
+
+export const Output = forwardRef<HTMLOutputElement, Props>(function EdsMinMax(
+  { children, value, htmlFor },
+  ref,
+) {
   return (
-    <StyledOutput value={value} htmlFor={htmlFor}>
+    <StyledOutput ref={ref} value={value} htmlFor={htmlFor}>
       {children}
     </StyledOutput>
   )
-}
-
-Output.propTypes = {
-  /** @ignore */
-  children: PropTypes.node.isRequired,
-  value: PropTypes.number.isRequired,
-  htmlFor: PropTypes.string.isRequired,
-}
+})

libraries/core-react/src/Slider/Slider.test.jsx → libraries/core-react/src/Slider/Slider.test.tsx

@@ -1,18 +1,17 @@
 /* eslint-disable no-undef */
-
 import React from 'react'
-import PropTypes from 'prop-types'
 import { render, cleanup, fireEvent, screen } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import { Slider } from './Slider'
+import type { Props } from './Slider'
 
 afterEach(cleanup)
 
 const getUnixTime = (iso) => {
   return new Date(iso).getTime()
 }
 
-const DateSlider = ({ value, ariaLabelledby = 'date-range-slider' }) => {
+const DateSlider = ({ value, ariaLabelledby = 'date-range-slider' }: Props) => {
   function outputFunction(val) {
     const date = new Date(parseInt(val, 10))
     // The test node server doesn't have full i18n capabilities, using english is the easiest
@@ -35,10 +34,6 @@ const DateSlider = ({ value, ariaLabelledby = 'date-range-slider' }) => {
     />
   )
 }
-DateSlider.propTypes = {
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.array]).isRequired,
-  ariaLabelledby: PropTypes.string, // eslint-disable-line
-}
 
 describe('Simple slider', () => {
   it('Creates a simple slider when providing a number as value', () => {
@@ -91,7 +86,7 @@ describe('Simple slider', () => {
     const outputValue = container.querySelector('output')
     const input = container.querySelector('input')
     expect(outputValue).toHaveTextContent('Wednesday, January 1, 2020')
-    expect(outputValue).not.toHaveTextContent(getUnixTime('2020-01-01'))
+    expect(outputValue).not.toHaveTextContent('getUnixTime')
     expect(input).toHaveValue(getUnixTime('2020-01-01').toString())
   })
   it('Has minimum and maximum values as default', () => {
@@ -172,9 +167,9 @@ describe('Range slider', () => {
     const inputA = container.querySelector(`#${ariaId}-thumb-a`)
     const inputB = container.querySelector(`#${ariaId}-thumb-b`)
     expect(outputA).toHaveTextContent('Wednesday, January 1, 2020')
-    expect(outputA).not.toHaveTextContent(getUnixTime('2020-01-01'))
+    expect(outputA).not.toHaveTextContent('getUnixTime')
     expect(outputB).toHaveTextContent('Friday, January 31, 2020')
-    expect(outputB).not.toHaveTextContent(getUnixTime('2020-01-01'))
+    expect(outputB).not.toHaveTextContent('getUnixTime')
     expect(inputA).toHaveValue(getUnixTime('2020-01-01').toString())
     expect(inputB).toHaveValue(getUnixTime('2020-01-31').toString())
   })

libraries/core-react/src/Slider/Slider.tokens.js → libraries/core-react/src/Slider/Slider.tokens.ts

@@ -1,5 +1,5 @@
-// @ts-nocheck
 import { tokens } from '@equinor/eds-tokens'
+import type { Typography } from '@equinor/eds-tokens'
 
 const {
   colors: {
@@ -23,7 +23,71 @@ const {
   typography: { paragraph },
 } = tokens
 
-export const slider = {
+type Slider = {
+  enabled: {
+    background: string
+    track: {
+      background: string
+      height: string
+      realHeight: string
+      bottomOffset: string
+      indicator: {
+        color: string
+        hover: {
+          color: string
+        }
+      }
+      hover: {
+        background: string
+      }
+    }
+    output: {
+      height: string
+      typography: Typography
+      text: string
+    }
+    handle: {
+      background: string
+      size: string
+      border: {
+        color: string
+        radius: string
+        width: string
+        type: string
+      }
+      outline: string
+      outlineOffset: string
+      hover: {
+        background: string
+        border: {
+          color: string
+        }
+      }
+    }
+    dot: {
+      size: string
+      border: {
+        color: string
+        width: string
+        type: string
+        radius: string
+      }
+    }
+  }
+  disabled: {
+    background: string
+    border: {
+      color: string
+    }
+    track: {
+      indicator: {
+        color: string
+      }
+    }
+  }
+}
+
+export const slider: Slider = {
   enabled: {
     background: backgroundColorDefault,
     track: {
@@ -84,8 +148,5 @@ export const slider = {
         color: backgroundBorderDisabled,
       },
     },
-    typography: {
-      /* color: disabledColor, */
-    },
   },
 }