@edvisor/product-language 0.10.0 → 0.10.2

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(3)    
+
+  })
+
+  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,132 @@
+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 => {    
+    setUpdate(newValues)
+    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>
+  )
+}

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

@@ -0,0 +1,89 @@
+// eslint-disable-next-line no-restricted-syntax
+import { fireEvent, render, screen } from '@testing-library/react'
+import { Slider } from './index'
+
+describe('Slider / RangeSlider Tests', () => {
+
+  it('should render the Slider', async () => {
+    const {container} = render(
+      <Slider
+        max={50}
+        value={50}
+      />
+    )
+
+    const slider = screen.getByRole('slider')
+    const inputs = screen.queryAllByDisplayValue('50')
+    const input = container.querySelector('input')
+    
+    expect(inputs.length).toBe(0)
+    expect(input).not.toBeInTheDocument()
+    expect(slider).toBeInTheDocument()
+    
+  })
+
+  it('should render With an input', async () => {
+    const {container} = render(
+      <Slider
+        editable
+        max={50}
+        value={50}
+      />
+    )
+
+    const slider = screen.getByRole('slider')
+    const inputs = screen.queryAllByDisplayValue('50')
+    const input = container.querySelector('input')
+    
+    expect(inputs.length).toBe(1)
+    expect(input).toBeInTheDocument()
+    expect(slider).toBeInTheDocument()
+    
+  })
+
+  it('should render the prefix', async () => {
+    render(
+      <Slider
+        prefix='$'
+        max={50}
+        value={50}
+      />
+    )
+
+    const slider = screen.getByRole('slider')
+    const prefix = screen.getByText('$')
+    
+    expect(prefix).toBeInTheDocument()    
+    expect(slider).toBeInTheDocument()
+    
+  })
+
+  it('Should change values on slide', async () => {
+    
+    const handleChange = jest.fn()
+
+    render(
+      <Slider
+        editable
+        prefix='$'
+        max={50}
+        value={50}
+        onChange={handleChange}
+      />
+    )
+
+
+    const slider = screen.getByRole('slider')
+    const input: HTMLInputElement = screen.getByLabelText('slider-input')
+
+    expect(input.value).toBe('50')
+    fireEvent.change(input, {target: {value: '30'}})
+    expect(input.value).toBe('30')
+    fireEvent.blur(input)
+
+    expect(handleChange).toBeCalledWith(30)
+    expect(slider).toBeInTheDocument()
+    
+  })
+
+})

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

@@ -0,0 +1,80 @@
+import { FC, isDefined } from '@helpers'
+import styled from 'styled-components'
+import { Center } from 'components/layout'
+
+import { Label } from 'components/typography'
+import { SliderComponent } from './components/slider-component'
+import { SliderType } from './types'
+import { SliderInputs } from './components/slider-inputs'
+import { Padding } from '@foundations'
+
+interface ISlider {
+  min?: number
+  max: number
+  value: number
+  prefix?: string
+  editable?: boolean
+  onChange?: (value: number) => void
+}
+
+const ComponentWrapper = styled(Center)`
+  gap: 12px;
+  flex-wrap: nowrap;
+`
+const SlideWrapper = styled(Center)`
+  gap: 12px;
+  width: 100%;
+`
+
+const SliderLabel = styled(Label)`
+  width: 52px; 
+  padding: ${Padding.none} ${Padding.xxxs};
+`
+
+export const Slider: FC<ISlider> = (props) => {
+  
+  const {
+    min = 0,
+    max,
+    value,
+    prefix = '',
+    onChange,
+    editable = false,
+  } = props
+
+  const domain = [min, max]
+
+  const handleChange = (newValues: number[]): void => { 
+    onChange?.(newValues[0])
+  }
+
+  return (
+    <ComponentWrapper>
+      {
+        isDefined(prefix) && <Label >{prefix}</Label>
+      }
+      <SlideWrapper>
+        <SliderComponent
+          mode={2}
+          domain={domain}
+          values={[value]}
+          type={SliderType.SLIDER}
+          onChange={handleChange as (values: readonly number[]) => void}
+        />
+        {
+          editable 
+          ?
+            <SliderInputs
+              type={SliderType.SLIDER}
+              range={domain}
+              minValue={min}
+              maxValue={value}
+              onChange={handleChange}
+            />
+          :
+            <SliderLabel>{value}</SliderLabel>
+        }
+      </SlideWrapper>
+    </ComponentWrapper>
+  )
+}

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

@@ -0,0 +1,179 @@
+import { Playground } from 'storybook-addon-jarle-monaco'
+import styled from 'styled-components'
+import { Flex } from '../../../..'
+import { Padding } from '@foundations'
+import { Checkbox } from 'components/checkbox'
+import { RangeSlider } from '../range-slider'
+import { Label } from 'components/typography'
+import { is } from '@helpers'
+import { InputText } from 'components/input-field'
+import { Slider } from '../slider'
+
+const Wrapper = styled(Flex)`
+  min-height: 150px;
+  align-items: baseline;
+  gap: 12px;
+  & > div {
+    width: 100%;
+    padding: ${Padding.xl};
+  }
+`
+
+const LeftMenu = styled(Flex)`
+  text-align: left;
+`
+
+const CheckBoxWrapper = styled.div`
+  display: flex;
+  gap: 6px;
+  padding: ${Padding.xs};
+  align-self: flex-start;
+  flex-direction: row-reverse;
+  float: left;
+  width: 250px;
+  div:last-of-type {
+    margin-right: auto;
+  }
+`
+
+export const SliderPlayground = () => (
+  <Playground
+    // eslint-disable-next-line no-restricted-syntax
+    code={`
+    
+    const [stateValues, setStateValues] = useState<number>(499)
+    const [editable, setEditable] = useState<boolean>(false)
+    const [prefix, setPrefix] = useState<string>('$')    
+
+
+    const onChange = (value: number) => {
+      setStateValues(value)
+    }
+
+    <Wrapper center>
+      <LeftMenu column>
+        <div style={{width: '260px'}}>
+          <InputText label='Prefix' value={prefix} onChange={setPrefix}/>
+        </div>
+        <CheckBoxWrapper>
+          <Checkbox checked={editable} onChange={() => setEditable(!editable)}/>
+          <Label>Editable: </Label>
+        </CheckBoxWrapper>
+      </LeftMenu>
+      <div>
+      <Slider
+        min={10}
+        max={500}
+        editable={editable}
+        prefix={prefix}
+        value={stateValues}
+        onChange={onChange}
+      />
+    </div>
+    </Wrapper>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        is,
+        Label,
+        Wrapper,
+        Checkbox,
+        LeftMenu,
+        Slider,
+        InputText,
+        CheckBoxWrapper
+      },
+    }}
+  />
+)
+
+export const RangePlayground = () => (
+  <Playground
+    // eslint-disable-next-line no-restricted-syntax
+    code={`
+    
+    const [stateValues, setStateValues] = useState<number[]>([10, 80])
+    const [editable, setEditable] = useState<boolean>(false)
+    const [prefix, setPrefix] = useState<string>('$')    
+
+    const onChange = (value: number[]) => {
+      console.log(value)
+      setStateValues(value)
+    }
+    <Wrapper center>
+      <LeftMenu column>
+        <div style={{width: '260px'}}>
+          <InputText label='Prefix' value={prefix} onChange={setPrefix}/>
+        </div>
+        <CheckBoxWrapper>
+          <Checkbox checked={editable} onChange={() => setEditable(!editable)}/>
+          <Label>Editable: </Label>
+        </CheckBoxWrapper>
+      </LeftMenu>
+      <div>
+      <RangeSlider
+        min={10}
+        max={80}
+        values={stateValues}
+        editable={editable}
+        prefix={prefix}
+        onChange={onChange}
+      />
+    </div>
+    </Wrapper>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        is,
+        Label,
+        Wrapper,
+        Checkbox,
+        LeftMenu,
+        RangeSlider,
+        InputText,
+        CheckBoxWrapper
+      },
+    }}
+  />
+)
+
+const prices: number[] = []
+for (let i = 0; i < 500; i++) {
+  prices.push(Math.floor(Math.random() * 50) + 1)
+}
+
+export const RangeWithGraphPlayground = () => (
+  <Playground
+    // eslint-disable-next-line no-restricted-syntax
+    code={`
+    
+    const [stateValues, setStateValues] = useState<number[]>([10, 40])
+
+    const onChange = (value: number[]) => {
+      console.log(value)
+      setStateValues(value)
+    }
+
+    <Wrapper center>
+      <div style={{width: '350px', margin: 'auto'}}>
+        <RangeSlider
+          values={stateValues}
+          data={prices}
+          onChange={onChange}
+        />
+      </div>
+    </Wrapper>
+    `}
+    providerProps={{
+      renderAsComponent: true,
+      scope: {
+        Label,
+        prices,
+        Wrapper,
+        RangeSlider,
+      },
+    }}
+  />
+)