@edvisor/product-language 0.10.7 → 0.10.8

package/src/lib/components/radio-button/radio.test.tsx

@@ -1,59 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { RadioButton } from './radio-button'
-
-describe('RadioButton Input Tests', () => {
-  const option = {
-    id: '1',
-    label: 'Canada',
-    value: 'CA'
-  }
-
-  it('should render the radio button and handle event after click', async () => {
-    const spyOnChange = jest.fn()
-    render(
-      <RadioButton
-        onChange={spyOnChange}
-        label={option.label}
-        value={option.value}
-        id={option.id}
-      />
-    )
-
-    expect(spyOnChange).not.toHaveBeenCalled()
-    const myComponent = screen.getByRole('radio')
-
-    expect(myComponent).toBeInTheDocument()
-
-    await userEvent.click(myComponent)
-    expect(spyOnChange).toHaveBeenCalled()
-
-    expect(spyOnChange).toHaveBeenCalledWith(
-      expect.objectContaining({
-        target: expect.objectContaining({
-          value: 'CA',
-          id: '1'
-        })
-      })
-    )
-  })
-
-  it('should not handle event after click if radio button has disabled', async () => {
-    const spyOnChange = jest.fn()
-    render(
-      <RadioButton
-        disabled
-        onChange={spyOnChange}
-        label={''}
-        id={''}
-      />
-    )
-
-    expect(spyOnChange).not.toHaveBeenCalled()
-    const myComponent = screen.getByRole('radio')
-
-    userEvent.click(myComponent)
-
-    expect(spyOnChange).not.toHaveBeenCalled()
-  })
-})

package/src/lib/components/radio-button/stories/components.tsx

@@ -1,36 +0,0 @@
-import { Playground } from 'storybook-addon-jarle-monaco'
-import { RadioButton as Radio } from '../radio-button'
-
-export const RadioExample = () => (
-  <Playground
-    code={`<>
-  <Radio />
-  <Radio checked readOnly/>
-  <Radio disabled />
-  <Radio checked disabled readOnly/>
-</>`}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        Radio,
-      },
-    }}
-  />
-)
-
-export const RadioExampleWithLabels = () => (
-  <Playground
-    code={`<>
-  <Radio label='Option 1' />
-  <Radio label='Option 2' checked readOnly/>
-  <Radio label='Option 3' disabled />
-  <Radio label='Option 4' checked disabled readOnly/>
-</>`}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        Radio,
-      },
-    }}
-  />
-)

package/src/lib/components/radio-button/stories/radio-button.stories.mdx

@@ -1,44 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import { RadioExample, RadioExampleWithLabels } from './components'
-import { RadioButton } from '../index'
-
-<Meta
-  title="Components/RadioButton"
-  component={RadioButton}
-/>
-
-# RadioButton
-
-RadioButton are most commonly used to give users a way to make a single selection in a range of options.
-
-For more details, check out the component page on [Figma](https://www.figma.com/file/ue1CurHfZ426o2T2l8Dk64/Edvisor-Product-Language?node-id=734%3A7377&t=pe4mhKIwje5ozRJp-0)
-
-## How to use
-
-```tsx
-import { RadioButton } from '@edvisor/product-language'
-
-<RadioButton />
-
-```
-
-### Typical Usage
-
-RadioButton is "drop-in" compatible with an html input radio.
-
-<RadioExample />
-
-
-### With Labels
-
-<RadioExampleWithLabels />
-
-## API
-
-Extends `HTMLAttributes<HTMLInputElement>`
-
-| Name        | Type      | Description                                                             |
-| ----------- | --------- | ----------------------------------------------------------------------- |
-| `checked?`  | `boolean` | Set radio button as filled (only one can be filled)                     |
-| `disabled?` | `boolean` | Set radio button as a disabled way (can't click or interact with that)  |
-| `onChange?` | `event`   | You can listen the changes from the component                           |

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

@@ -1,50 +0,0 @@
-import { FC, isDefined } from '@helpers'
-import { BarChart, Bar, ResponsiveContainer } from 'recharts'
-import { Surface } from '@foundations'
-
-interface IProps {
-  data: number[]
-  highlight: number[] 
-  domain: number[]
-}
-
-const getChartData = (data: number[], highlight: number[]) => {
-  
-  const occurrences = data.reduce<Record<number, number>>((acc, current) => {
-    return (
-      isDefined(acc[current]) 
-        ? ++acc[current] 
-        : (acc[current] = 1), acc)
-  }, {})
-
-  return Object.entries(occurrences).map(([key, value]) => {
-    return {
-      value: +key,
-      occurrences: value,
-      fill: +key >= highlight[0] && +key <= highlight[1]
-        ? Surface.Selected.Hover
-        : Surface.Neutral.Subdued
-    }
-  }).sort((valueA, valueB) => valueA.value - valueB.value)
-}
-
-export const BarChartComponent: FC<IProps> = (props) => {
-  const { 
-    data, 
-    highlight,
-  } = props
-
-  const chartData = getChartData(data, highlight)
-
-  return (
-    <ResponsiveContainer height='100%' width='100%'>
-      <BarChart
-        data={chartData} 
-        margin={{ top: 0, right: 1, bottom: 0, left: 1 }} 
-        barCategoryGap={'5%'}
-      >
-        <Bar dataKey="occurrences" />
-      </BarChart>
-    </ResponsiveContainer>
-  )
-}

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

@@ -1,58 +0,0 @@
-import { CSSProperties, memo } from 'react'
-import styled from 'styled-components'
-import { FC } from '@helpers'
-import { Actions } from '@foundations'
-import { GetHandleProps, SliderItem } from 'react-compound-slider'
-
-const HandleContainer = styled.div<{left: number, thumbHeight: number}>`
-  background-color: ${Actions.Primary.Default};
-  margin-left: -6px;
-  margin-top: -6px;
-  width: ${({thumbHeight}) => thumbHeight}px;
-  height: ${({thumbHeight}) => thumbHeight}px;
-  border: 0;
-  border-radius: 50%;
-  white-space: nowrap;
-  position: absolute;
-  z-index: 2;
-  cursor: pointer;
-  left: ${({left}) => `${left}%`};
-`
-
-interface IHandleComponent {
-  domain: number[]
-  handle: SliderItem
-  classes?: CSSProperties
-  thumbHeight: number
-  getHandleProps: GetHandleProps
-}
-    
-export const HandleComponent: FC<IHandleComponent> = memo((props) => {
-
-  const {
-    domain,
-    handle,
-    thumbHeight,
-    getHandleProps 
-  } = props
-  const [min, max] = domain
-  
-  return (
-    <HandleContainer 
-      left={handle.percent}
-      thumbHeight={thumbHeight}
-      role="slider"
-      aria-valuemin={min}
-      aria-valuemax={max}
-      aria-valuenow={handle.value}
-      {...getHandleProps(handle.id)}
-    />
-  )
-}, arePropsEqual)
-
-function arePropsEqual(oldProps: IHandleComponent, newProps: IHandleComponent): boolean {
-  return  oldProps.handle.value === newProps.handle.value
-    && oldProps.handle.percent === newProps.handle.percent
-}
-
-  

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

@@ -1,44 +0,0 @@
-import { memo, Fragment } from 'react'
-import { FC } from '@helpers'
-import { Surface } from '@foundations'
-import styled from 'styled-components'
-import { GetRailProps } from 'react-compound-slider'
-
-interface IRailComponent {
-  getRailProps: GetRailProps
-  trackHeight: number
-  thumbHeight: number
-}
-
-const RailContainer = styled.div<{trackHeight: number}>`
-  background-color: ${Surface.Neutral.Default};
-  width: 100%;
-  height: ${({trackHeight}) => trackHeight}px;
-  position: absolute;
-  pointer-events: none;
-  border-radius: 2px;
-`
-
-const RailHotSpot = styled.div<{thumbHeight: number}>`
-  width: 100%;
-  height: ${({thumbHeight}) => thumbHeight * 2}px;
-  top: ${({thumbHeight}) => thumbHeight * -1}px;
-  position: absolute;
-  cursor: pointer;
-`
-
-export const RailComponent: FC<IRailComponent> = memo((props) => {  
-
-  const {
-    trackHeight,
-    thumbHeight,
-    getRailProps
-  } = props
-
-  return (
-    <Fragment>
-      <RailHotSpot thumbHeight={thumbHeight} {...getRailProps()} />
-      <RailContainer trackHeight={trackHeight} />
-    </Fragment>
-  )
-})

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

@@ -1,98 +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
-
-  const handleOnChange = (newValues: ReadonlyArray<number>): void => {
-    if (values.some((val, index) => val !== newValues[index])) {
-      onChange(newValues)
-    }
-  }
-
-  return(
-    <ReactSlider
-      mode={mode}
-      step={1}
-      domain={domain}
-      values={values}
-      rootStyle={sliderStyle}
-      onChange={handleOnChange}
-      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,150 +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): void => {
-    const intValue = +e.target.value
-    const newValue = getNewValue(intValue, valueType, props)
-
-    mayCallOnChange(newValue, valueType)
-
-    if (type === SliderType.SLIDER) {
-      setMaxValue(newValue)
-      return
-    }
-
-    if (valueType === ValueType.MIN) {
-      setMinValue(newValue)
-      return
-    }
-
-    setMaxValue(newValue)
-  }
-
-  const mayCallOnChange = (newValue: number, valueType: ValueType): void => {
-    if(type === SliderType.SLIDER) {
-      if(newValue !== maxValue) {
-        onChange([newValue])
-      }
-      return
-    }
-
-    if (valueType === ValueType.MIN) {
-      if (newValue !== minValue) {
-        onChange([newValue, stateMaxValue])
-      }
-      return
-    }
-
-    if(newValue !== maxValue) {
-      onChange([stateMinValue, 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
-            type='number'
-            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={(e) => {
-          setMaxValue(+e.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): boolean {
-  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'