@edvisor/product-language 0.9.0 → 0.10.2

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

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

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

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

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

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

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

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

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

@@ -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): boolean {
+  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'