@edvisor/product-language 0.7.0-rc1 → 0.7.0

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

@@ -1,92 +0,0 @@
-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

@@ -1,129 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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

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

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

@@ -1,185 +0,0 @@
-// 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

@@ -1,131 +0,0 @@
-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>
-  )
-}