@edvisor/product-language 0.10.2 → 0.10.4

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(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

@@ -1,132 +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 => {    
-    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

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

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

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