@edvisor/product-language 0.5.7 → 0.7.0-rc1

package/src/lib/components/range-slider/components/slider-component.tsx

@@ -0,0 +1,92 @@
+import { FC } from '@helpers'
+import { CSSProperties } from 'react'
+import { Slider as ReactSlider, Rail, Handles, Tracks } from 'react-compound-slider'
+import { SliderType } from '../types'
+import { HandleComponent } from './handle'
+import { RailComponent } from './rail'
+import { TrackComponent } from './track'
+
+interface IProps {
+  mode: 1 | 2 | 3
+  domain: number[]
+  values: ReadonlyArray<number>
+  type: SliderType
+  onChange: (values: ReadonlyArray<number>) => void
+  onUpdate?: (values: ReadonlyArray<number>) => void
+}
+
+const sliderStyle: CSSProperties = {
+  position: 'relative',
+  width: '100%',
+  top: '-1px',
+}
+
+const trackHeight = 4
+const thumbHeight = 16
+
+export const SliderComponent: FC<IProps> = (props) => {
+
+  const {
+    mode,
+    domain,
+    values,
+    type,
+    onChange,
+    onUpdate,
+  } = props
+
+  return(
+    <ReactSlider
+      mode={mode}
+      step={1}
+      domain={domain}
+      values={values}
+      rootStyle={sliderStyle}
+      onChange={onChange}
+      onUpdate={(newValues: ReadonlyArray<number>) => {
+        onUpdate?.(newValues)
+      }}
+    >
+      <Rail>
+        {({ getRailProps }) => 
+          <RailComponent 
+            trackHeight={trackHeight}
+            thumbHeight={thumbHeight}  
+            getRailProps={getRailProps} 
+          />
+        }
+      </Rail>
+      <Handles>
+        {({ handles, getHandleProps }) => (
+          <div className="slider-handles">
+            {handles.map(handle => (
+              <HandleComponent
+                thumbHeight={thumbHeight}
+                key={handle.id}
+                handle={handle}
+                domain={domain}
+                getHandleProps={getHandleProps}
+              />
+            ))}
+          </div>
+        )}
+      </Handles>
+      <Tracks left={type === SliderType.SLIDER} right={false}>
+        {({ tracks, getTrackProps }) => (
+          <div className="slider-tracks">
+            {tracks.map(({ id, source, target }) => (
+              <TrackComponent
+                trackHeight={trackHeight}
+                thumbHeight={thumbHeight}
+                key={id}
+                source={source}
+                target={target}
+                getTrackProps={getTrackProps}
+              />
+            ))}
+          </div>
+        )}
+      </Tracks>
+    </ReactSlider>
+  )
+}

package/src/lib/components/range-slider/components/slider-inputs.tsx

@@ -0,0 +1,129 @@
+import { FC } from '@helpers'
+import { FocusEvent, Fragment, useEffect, useState } from 'react'
+import { InputField } from 'components/input-field'
+import { FieldContainer, SliderType, ValueType } from '../types'
+import styled from 'styled-components'
+import { Padding } from '@foundations'
+
+
+interface ISliderInputs {
+  onChange: (range: number[]) => void
+  range: ReadonlyArray<number>
+  minValue: number
+  maxValue: number
+  maxLabel?: string
+  minLabel?: string
+  type: SliderType
+  prefix?: string
+}
+
+const Input = styled(InputField)`
+  width: 52px;
+  padding: ${Padding.none} ${Padding.xs};
+  text-align: center;
+`
+
+const getNewValue = (intValue: number, valueType: ValueType, props: ISliderInputs) => {
+  const {
+    type,
+    range,
+    minValue,
+    maxValue,
+  } = props
+
+  if (valueType === ValueType.MIN) {
+    return Math.min(
+      intValue < range[0] ? range[0] : intValue,
+      maxValue-1
+    )
+  }
+
+  const actualMin = type === SliderType.SLIDER ? range[0] :  minValue
+  return Math.max(
+    intValue > range[1] ? range[1] : intValue, 
+    actualMin+1
+  )
+}
+
+export const SliderInputs: FC<ISliderInputs> = (props) => {
+
+  const {
+    type,
+    minValue,
+    maxValue,
+    prefix = '',
+    maxLabel = 'Max',
+    minLabel = 'Min',
+    onChange
+  } = props
+
+  const [stateMinValue, setMinValue] = useState<number>(minValue)
+  const [stateMaxValue, setMaxValue] = useState<number>(maxValue)
+
+  useEffect(() => {
+    setMinValue(minValue)
+    setMaxValue(maxValue)
+  }, [minValue, maxValue])
+
+  const handleOnBlur = (e: FocusEvent<HTMLInputElement>, valueType: ValueType) => {
+    const intValue = +e.target.value
+    const newValue = getNewValue(intValue, valueType, props)
+
+    if (type === SliderType.SLIDER) {
+      onChange([newValue])
+      setMaxValue(newValue)
+      return
+    }
+
+    if (valueType === ValueType.MIN) {
+      onChange([newValue, stateMaxValue])
+      setMinValue(newValue)
+      return
+    }
+    
+    onChange([stateMinValue, newValue])
+    setMaxValue(newValue)
+  }
+
+  return (
+    type === SliderType.RANGE_SLIDER
+    ?
+      <Fragment>
+        <FieldContainer margin={'right'}>
+          <InputField
+            type='number'
+            label={minLabel}
+            aria-label="range-min-input"
+            prefix={prefix}
+            value={stateMinValue}
+            onChange={(e) => {
+              setMinValue(+e.target.value)
+            }}
+            onBlur={(e) => handleOnBlur(e, ValueType.MIN)}
+          />
+        </FieldContainer>
+        <FieldContainer margin={'left'}>
+          <InputField
+            label={maxLabel}
+            aria-label="range-max-input"
+            prefix={prefix}
+            value={stateMaxValue}
+            onChange={(e) => {
+              setMaxValue(+e.target.value)
+            }}
+            onBlur={(e) => handleOnBlur(e, ValueType.MAX)}
+          />
+        </FieldContainer>
+      </Fragment>
+    :
+      <Input
+        type="number"
+        aria-label="slider-input"
+        value={stateMaxValue}
+        onChange={(event) => {
+          setMaxValue(+event.target.value)
+        }}
+        onBlur={(event) => handleOnBlur(event, ValueType.MAX)}
+      />
+  )
+}

package/src/lib/components/range-slider/components/tick.tsx

@@ -0,0 +1,51 @@
+import { FC, isDefined } from '@helpers'
+import { memo, ReactNode } from 'react'
+import { SliderItem } from 'react-compound-slider'
+import styled from 'styled-components'
+import { Margin, Surface } from '@foundations'
+
+interface ITickComponent {
+  tick: SliderItem,
+  count: number
+  format?: (value: number) => ReactNode
+}
+
+const TickItem = styled.div<{percent: number}>`
+  position: absolute;
+  margin-top: ${Margin.s};
+  width: 1px;
+  height: 5px;
+  background-color: ${Surface.Default.Subdued};
+  left: ${({percent}) => `${percent}%`};
+`
+
+const TickContainer = styled.caption<{count: number, percent: number}>`
+  position: absolute;
+  margin-top: ${Margin.l};
+  text-align: center;
+  margin-left: ${({count}) => `${-(100 / count) / 2}%`};
+  width: ${({count}) => `${100 / count}%`};
+  left: ${({percent}) => `${percent}%`};
+`
+
+export const TickComponent: FC<ITickComponent> = memo((props) => {
+
+  const {
+    tick, 
+    count, 
+    format
+  } = props
+  
+  return (
+    <div>
+      <TickItem percent={tick.percent}/>
+      <TickContainer count={count} percent={tick.percent}>
+        {isDefined(format) && format(tick.value)}
+      </TickContainer>
+    </div>
+  )
+})
+
+TickComponent.defaultProps = {
+  format: d => d
+}

package/src/lib/components/range-slider/components/track.tsx

@@ -0,0 +1,67 @@
+import React, { memo } from 'react'
+import { FC } from '@helpers'
+import styled from 'styled-components'
+import { Actions } from '@foundations'
+import { GetTrackProps, SliderItem } from 'react-compound-slider'
+
+interface ITrackComponent {
+  source: SliderItem,
+  target: SliderItem,
+  trackHeight: number
+  thumbHeight: number,
+  getTrackProps: GetTrackProps
+}
+
+const Track = styled.div<{left: number, width: number, trackHeight: number}>`
+  background-color: ${Actions.Primary.Default};
+  height: ${({trackHeight}) => trackHeight}px;
+  position: absolute;
+  z-index: 1;
+  pointer-events: none;
+  left: ${({left}) => `${left}%`};
+  width: ${({width}) => `${width}%`};
+`
+
+const TrackHotSpot = styled.div<{left: number, width: number, thumbHeight: number}>`
+  height: ${({thumbHeight}) => thumbHeight}px;
+  top: ${({thumbHeight}) => thumbHeight * -0.5}px;
+  position: absolute;
+  cursor: pointer;
+  left: ${({left}) => `${left}%`};
+  width: ${({width}) => `${width}%`};
+`
+
+export const TrackComponent: FC<ITrackComponent> = memo((props) => {
+
+  const {
+    source,
+    target,
+    trackHeight,
+    thumbHeight,
+    getTrackProps,
+  } = props
+
+  const left = source.percent 
+  const width = target.percent - source.percent 
+  
+  return (
+    <React.Fragment>
+      <Track
+        trackHeight={trackHeight} 
+        left={left} 
+        width={width} 
+      />
+      <TrackHotSpot
+        thumbHeight={thumbHeight}
+        left={left} 
+        width={width}
+        {...getTrackProps()}
+      />
+    </React.Fragment>
+  )
+}, arePropsEqual)
+
+function arePropsEqual(oldProps: ITrackComponent, newProps: ITrackComponent) {
+  return oldProps.source.value === newProps.source.value
+  && oldProps.target.percent === newProps.target.percent
+}

package/src/lib/components/range-slider/index.tsx

@@ -0,0 +1,2 @@
+export * from './range-slider'
+export * from './slider'

package/src/lib/components/range-slider/range-slider.test.tsx

@@ -0,0 +1,185 @@
+// eslint-disable-next-line no-restricted-syntax
+import { fireEvent, render, screen } from '@testing-library/react'
+import { RangeSlider } from './index'
+
+
+
+jest.mock('recharts', () => {
+  const OriginalRechartsModule = jest.requireActual('recharts')
+
+  return {
+    ...OriginalRechartsModule,
+    ResponsiveContainer: ({ height, children }: { height: number, children: JSX.Element }) => (
+      <div className="recharts-responsive-container" style={{ width: 800, height }}>
+        {children}
+      </div>
+    ),
+  }
+})
+
+describe('Slider / RangeSlider Tests', () => {
+
+  const data = [
+    10, 11, 11, 12 ,19, 10, 12, 12, 11, 13, 14, 15, 16, 12, 17, 13, 19, 18
+  ]
+
+  it('should render the RangeSlider', async () => {
+    const {container} = render(
+      <RangeSlider
+        max={50}
+        values={[0, 50]}
+      />
+    )
+
+    const slider = screen.getAllByRole('slider')
+    const inputs = screen.queryAllByDisplayValue('50')
+    const input = container.querySelector('input')
+    
+    expect(inputs.length).toBe(0)
+    expect(input).not.toBeInTheDocument()
+    expect(slider[0]).toBeInTheDocument()
+    expect(slider[1]).toBeInTheDocument()
+    
+  })
+
+  it('should render With an input', async () => {
+    const {container} = render(
+      <RangeSlider
+        editable
+        max={50}
+        values={[0, 50]}
+      />
+    )
+
+    const slider = screen.getAllByRole('slider')
+    const maxInput = screen.queryAllByDisplayValue('50')
+    const minInput = screen.queryAllByDisplayValue('0')
+    const input = container.querySelector('input')
+    
+    expect(maxInput.length).toBe(1)
+    expect(minInput.length).toBe(1)
+    expect(input).toBeInTheDocument()
+    expect(slider[0]).toBeInTheDocument()
+    expect(slider[1]).toBeInTheDocument()
+    
+  })
+
+  it('should render the prefix', async () => {
+    render(
+      <RangeSlider
+        prefix='$'
+        max={50}
+        values={[10, 50]}
+      />
+    )
+
+    const slider = screen.getAllByRole('slider')
+    const minPrefix = screen.getByText('$ 10')
+    const maxPrefix = screen.getByText('$ 50')
+    
+    expect(minPrefix).toBeInTheDocument()    
+    expect(maxPrefix).toBeInTheDocument()    
+    expect(slider[0]).toBeInTheDocument()
+    expect(slider[1]).toBeInTheDocument()
+    
+  })
+
+  it('Should change values on RangeSlide', async () => {
+    
+    const handleChange = jest.fn()
+
+    render(
+      <RangeSlider
+        editable
+        prefix='$'
+        max={50}
+        values={[10, 50]}
+        onChange={handleChange}
+      />
+    )
+
+
+    const slider = screen.getAllByRole('slider')
+    const minInput: HTMLInputElement = screen.getByLabelText('range-min-input')
+    const maxInput: HTMLInputElement = screen.getByLabelText('range-max-input')
+
+    expect(minInput.value).toBe('10')
+    fireEvent.change(minInput, {target: {value: '21'}})
+    expect(minInput.value).toBe('21')
+    fireEvent.blur(minInput)
+
+    expect(handleChange).toBeCalledWith([21, 50])
+    
+    expect(maxInput.value).toBe('50')
+    fireEvent.change(maxInput, {target: {value: '30'}})
+    expect(maxInput.value).toBe('30')
+    fireEvent.blur(maxInput)
+
+    expect(handleChange).toBeCalledWith([21, 30])
+
+
+    expect(slider[0]).toBeInTheDocument()
+    expect(slider[1]).toBeInTheDocument()
+    
+  })
+
+  it('Inputs should validate values to not cross min, max values', async () => {
+    
+    const handleChange = jest.fn()
+
+    render(
+      <RangeSlider
+        editable
+        prefix='$'
+        min={10}
+        max={50}
+        values={[10, 50]}
+        onChange={handleChange}
+      />
+    )
+
+    const minInput: HTMLInputElement = screen.getByLabelText('range-min-input')
+    const maxInput: HTMLInputElement = screen.getByLabelText('range-max-input')
+
+    expect(minInput.value).toBe('10')
+    fireEvent.change(minInput, {target: {value: '60'}})
+    fireEvent.blur(minInput)
+    expect(minInput.value).toBe('49')
+    fireEvent.change(minInput, {target: {value: '5'}})
+    fireEvent.blur(minInput)
+    expect(minInput.value).toBe('10')
+    fireEvent.change(minInput, {target: {value: '25'}})
+    fireEvent.blur(minInput)
+    expect(minInput.value).toBe('25')
+
+    expect(maxInput.value).toBe('50')
+    fireEvent.change(maxInput, {target: {value: '99'}})
+    fireEvent.blur(maxInput)
+    expect(maxInput.value).toBe('50')
+    fireEvent.change(maxInput, {target: {value: '2'}})
+    fireEvent.blur(maxInput)
+    expect(maxInput.value).toBe('11')
+    
+    expect(handleChange).toBeCalledTimes(5)    
+
+  })
+
+  it('Should Render the Graph', async () => {
+    
+    render(
+      <RangeSlider
+        values={[10, 50]}
+        data={data}
+      />
+    )
+
+    const slider = screen.getAllByRole('slider')
+    const graph = screen.getByRole('img')
+
+    expect(slider[0]).toBeInTheDocument()
+    expect(slider[1]).toBeInTheDocument()
+    expect(graph).toBeInTheDocument()
+
+  })
+
+})

package/src/lib/components/range-slider/range-slider.tsx

@@ -0,0 +1,131 @@
+import { FC, isDefined, isEmpty, isNil, Nothing } from '@helpers'
+import { Fragment, useState } from 'react'
+import styled from 'styled-components'
+import { Center } from 'components/layout'
+import { Margin } from '@foundations'
+import { Label } from 'components/typography'
+import { FieldContainer, SliderType } from './types'
+import { SliderComponent } from './components/slider-component'
+import { SliderInputs } from './components/slider-inputs'
+import { BarChartComponent } from './components/bar-chart'
+
+interface IRangeSlider {
+  data?: number[]
+  editable?: boolean
+  prefix?: string
+  min?: number
+  max?: number
+  graphHeight?: number
+  maxLabel?: string
+  minLabel?: string
+  values: number[]
+  onChange?: (value: number[]) => void
+}
+
+const GridContainer = styled(Center)`
+  margin-top: ${Margin.s};
+  justify-content: space-around;
+  width: 100%;
+  flex-wrap: nowrap;
+  gap: 24px;
+`
+
+const ComponentWrapper = styled(Center)`
+  display: block;
+  flex-direction: column;  
+    
+`
+const SlideWrapper = styled(Center)`
+  gap: 12px;
+  display: flex; 
+  flex-direction: column;
+  align-items: center;
+  .slider-handles {
+    div:last-of-type {
+      margin-left: -10px;
+    }
+  }
+`
+
+const ChartContainer = styled.div<{height: number}>`
+  height: ${({height}) => height}px;
+`
+
+export const RangeSlider: FC<IRangeSlider> = (props) => {
+  
+  const {
+    min = 0,
+    max = 100,
+    values,
+    prefix = '',
+    graphHeight = 100,
+    editable = false,
+    data,
+    maxLabel,
+    minLabel,
+    onChange,
+  } = props
+
+  const [update, setUpdate] = useState<number[]>(values)
+
+  if(isNil(max) && (isNil(data) || isEmpty(data))) {
+    return <Nothing/>
+  }
+
+  const range: number[] = isDefined(data) 
+    ? [Math.min(...data), Math.max(...data)]
+    : [min, max]
+
+  const handleChange = (newValues: number[]): void => {    
+    onChange?.(newValues)
+  }
+
+  return (
+    <ComponentWrapper>
+      {isDefined(data) &&
+        <ChartContainer height={graphHeight} role="img">
+          <BarChartComponent
+            data={data}
+            highlight={update}
+            domain={range}
+          />
+        </ChartContainer>
+      }
+      <SlideWrapper>
+        <SliderComponent
+          mode={3}
+          domain={range}
+          values={values}
+          type={SliderType.RANGE_SLIDER}
+          onChange={handleChange as (values: ReadonlyArray<number>) => void}
+          onUpdate={setUpdate as (values: ReadonlyArray<number>) => void}
+        />
+        <GridContainer>
+          {
+            editable
+            ?
+              <SliderInputs
+                type={SliderType.RANGE_SLIDER}
+                range={range}
+                minValue={values[0]}
+                maxValue={values[1]}
+                prefix={prefix}
+                minLabel={minLabel}
+                maxLabel={maxLabel}
+                onChange={handleChange}
+              />
+            :
+              <Fragment>
+                <FieldContainer margin={'right'}>
+                  <Label>{`${prefix} ${values[0]}`}</Label>
+                </FieldContainer>
+                <FieldContainer margin={'left'}>
+                  <Label>{`${prefix} ${values[1]}`}</Label>
+                </FieldContainer>
+              </Fragment>
+          }
+        </GridContainer>
+      </SlideWrapper>
+    </ComponentWrapper>
+  )
+}