@edvisor/product-language 0.6.0 → 0.7.0-rc1

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,
+      },
+    }}
+  />
+)

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

@@ -0,0 +1,84 @@
+import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
+import { RangeSlider } from '../index'
+import { SliderPlayground, RangePlayground, RangeWithGraphPlayground } from './components.tsx'
+import { AlertBanner } from 'components/alert-banner'
+
+
+<Meta title="Components/RangeSlider" component={RangeSlider}/>
+
+# RangeSlider System
+
+For more details, check out the guidelines on [Figma](https://www.figma.com/file/ue1CurHfZ426o2T2l8Dk64/Edvisor-Product-Language?node-id=734%3A7378&t=FGYMPTF1ZFK1srUc-0)
+
+## How to Use
+
+```tsx
+import { Slider, RangeSlider } from '@edvisor/product-language'
+
+<Slider
+  max={max}
+  value={number}
+/>
+
+<RangeSlider
+  max={max}
+  values={[min, max]}
+/>
+
+```
+
+### Slider
+
+<SliderPlayground/>
+
+### Range Slider
+
+<RangePlayground/>
+
+
+### Range Slider With Graph
+
+<RangeWithGraphPlayground/>
+
+
+
+# API
+
+### Slider
+
+| Prop           | Type                              | Description                                         |
+| -------------- | --------------------------------- | --------------------------------------------------- |
+| `min?`         | `number`                          | `The minimum possible value (defaults to 0)`        |
+| `max`          | `number`                          | `The maximum possible value of the slider`          |
+| `value`        | `number`                          | `The max value selected`                            |
+| `prefix?`      | `string`                          | `Prefix to show with the label / input`             |
+| `editable?`    | `boolean`                         | `Renders a input to allow changing the slide value` |
+| `onChange?`    | `(value: number) => void`         | `Returns the max value selected`                    |
+
+### Range Slider
+
+<AlertBanner info style={{whiteSpace: 'pre-line'}}>
+ <p>If you provide a 'data' property, the component will build Bar graph on top of the slider 
+  and use it's minimum and maximum values as a range</p>
+</AlertBanner>
+
+| Prop           | Type                                | Description                                          |
+| -------------- | ----------------------------------- | ---------------------------------------------------- |
+| `data?`        | `number[]`                          | `List occurrences to build the Graph`                |
+| `graphHeight?` | `number`                            | `The height value for the Graph, defaults to 100`    |
+| `min?`         | `number`                            | `The minimum possible value (defaults to 0)`         |
+| `max?`         | `number`                            | `The maximum possible value (defaults to 100)`       |
+| `maxLabel?`    | `string`                            | `The label for the max input (default to 'Max')`     |
+| `minLabel?`    | `string`                            | `The label for the min input (default to 'Min')`     |
+| `values`       | `number[]`                          | `The selected range defaults ([min, max])`           |
+| `prefix?`      | `string`                            | `Prefix to show with the label / input`              |
+| `editable?`    | `boolean`                           | `Renders a input to allow changing the slide value`  |
+| `onChange?`    | `(value: number[min, max]) => void` | `Returns the selected range`                         |
+
+
+## Changelog
+
+### [0.0.0]
+ - The slider is built on top of [react-compound-slider](https://react-compound-slider.netlify.app/) lib
+ - The Graph is built on top of [recharts](https://recharts.org/en-US/) lib
+ 

package/src/lib/components/range-slider/types.ts

@@ -0,0 +1,18 @@
+import styled, { css } from 'styled-components'
+
+export enum SliderType {
+  SLIDER,
+  RANGE_SLIDER,
+}
+  
+export enum ValueType {
+  MIN,
+  MAX,
+}
+
+export const FieldContainer = styled.div<{margin: string}>`
+  ${({margin}) => margin === 'right' 
+    ? css`margin-right: auto` 
+    : css`margin-left: auto`
+  }
+`

package/src/lib/components/select/components/menu-container.tsx

@@ -0,0 +1,69 @@
+
+import { FC } from '@helpers'
+
+import styled from 'styled-components'
+import { IMenuContainerProps, menuPositionType } from '../types'
+import { Borders, Surface, Padding } from '@foundations'
+import { topPosition } from '../utils'
+
+interface IMenuWrapperProps {
+  label?: IMenuContainerProps['label'];
+  menuHeight?: IMenuContainerProps['menuHeight'];
+  menuPosition?: IMenuContainerProps['menuPosition'];
+  labelPosition?: IMenuContainerProps['labelPosition'];
+  invalid?: boolean;
+}
+
+const MenuWrapper = styled.div<IMenuWrapperProps>`
+  z-index: 1;
+  position: relative;
+  background: ${Surface.Default.Default};
+  top: ${(props) => topPosition(props)};
+  box-sizing: border-box;
+  .menu-list {
+    box-sizing: border-box;
+    box-shadow: ${(props) =>
+      props.menuPosition === menuPositionType.BOTTOM
+        ? '0px 2px 10px 0px rgba(0, 0, 0, 0.10)'
+        : '0px -2px 10px 0px rgba(0, 0, 0, 0.10)'};
+    border: 1px solid ${Borders.Default.Subdued};
+    background-color: ${Surface.Default.Default};
+    border-radius: 6px;
+    opacity: 0;
+    transition: opacity 0.1s ease; 
+    padding: ${Padding.xxs};
+
+    &:focus {
+      outline: none;
+    }
+
+    ::-webkit-scrollbar {
+      width: 6px;
+      height: 8px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      border-radius: 4px;
+      background: ${Surface.Neutral.Default};
+      min-height: 50px;
+    }
+  }
+`
+
+export const MenuContainer: FC<IMenuContainerProps> = (props) => {
+    const { onClick, children } = props
+    const className = ['select-menu', props.className]
+      .filter((c) => c)
+      .join(' ')
+    
+    return (
+      <MenuWrapper
+        data-role="menu"
+        className={className}
+        onClick={onClick}
+        {...props}
+      >
+        {children}
+      </MenuWrapper>
+    )
+}

package/src/lib/components/select/components/menu-list.tsx

@@ -0,0 +1,195 @@
+import styled from 'styled-components'
+import { Borders, Icons, Padding, Margin, shadowMd, Surface } from '@foundations'
+import { FC, is, isDefined, maybeRender, safeArray } from '@helpers'
+import { Heading4, Label } from 'components/typography'
+import { IconMinor } from 'components/icon'
+import { IMenuComponentProps, IOption } from '../types'
+import { equal } from '../utils'
+import { SpaceBetween } from 'components/layout'
+import { useRef } from 'react'
+
+const MenuListFrame = styled.div`
+  border: 1px solid ${Borders.Default.Subdued};
+  background-color: ${Surface.Default.Default};
+  position: absolute;
+  width: 100%;
+  width: -moz-available;
+  width: -webkit-fill-available;
+  max-height: 184px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 8px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background: ${Surface.Neutral.Default};
+    min-height: 50px;
+  }
+  ${shadowMd};
+`
+
+const MenuRow = styled(SpaceBetween)<{active?: boolean}>` 
+  border: none;
+  text-align: left;
+  padding: ${Padding.s};
+  margin: ${Margin.none} ${Margin.xxs};
+  background-color: ${(props) => 
+    (is(props.active) 
+    ? Surface.Selected.Default 
+    : Surface.Default.Default)
+  };
+  border-radius: 6px;
+  i:first-child {
+    align-self: start;
+    margin-right: ${Margin.xs};
+  }
+  i:last-child {
+    align-self: center;
+  }
+  &:first-of-type {
+    margin-top: ${Margin.xxs};
+  }
+  &:last-of-type {
+    margin-bottom: ${Margin.xxs};
+  }
+
+  &:hover {
+    background-color: ${Surface.Default.Hover};
+  }
+  
+  &:hover {
+    background-color: ${(props) => 
+      (is(props.active) 
+      ? Surface.Selected.Hover 
+      : Surface.Default.Hover)
+    };
+  }
+
+  &:active {
+    background-color: ${(props) => 
+      (is(props.active) 
+      ? Surface.Selected.Pressed 
+      : Surface.Default.Pressed)
+    };
+  }
+`
+
+const OptionLabel = styled(Label)<{hasIcon: boolean}>`
+  cursor: pointer;
+`
+
+const CheckedIcon = styled(IconMinor.Check)`
+  svg {
+    path {
+      fill : ${Icons.Highlight}
+    }
+  }
+`
+
+const ValueWrapper = styled.div`
+  width: 100%;
+`
+
+const TitleRow = styled(Heading4)`
+  height: 30px;
+  margin: ${Margin.none} ${Margin.xxs};
+  border-bottom: 1px solid ${Borders.Default.Subdued};
+  padding: ${Padding.s} ${Padding.none} ${Padding.none} ${Padding.s};
+`
+
+const Row: FC<IMenuComponentProps & {
+  index: number, 
+  handleClick: (option: IOption) => void
+}> = (props) => {
+
+  const {
+    index,
+    options = [],
+    handleClick,
+  } = props
+
+  const hasIcon = safeArray(options)
+    .some((option) => isDefined(option['icon']))
+
+  const currentValue =
+    Array.isArray(props.value) && is(props.multi) ? props.value : [props.value]
+
+  const option = options[index]
+  
+  return (
+    <MenuRow 
+      className="menu-row" 
+      center
+      active={currentValue.some(val =>
+        equal(val, option.value)
+      )}
+      onClick={() => handleClick(option)}
+    >
+      {
+        maybeRender(hasIcon, option['icon'])
+      }
+      <ValueWrapper>
+        <OptionLabel hasIcon={hasIcon}>
+          {option.label}
+        </OptionLabel>
+        {
+          maybeRender(option['helperText'], 
+            <OptionLabel subdued hasIcon={hasIcon}>
+              {option['helperText']}
+            </OptionLabel>
+          )
+        }
+      </ValueWrapper>
+      {
+        maybeRender(currentValue.some(val =>
+          equal(val, option.value)
+        ), <CheckedIcon/>)
+      }
+    </MenuRow>
+  )
+}
+
+export const MenuList: FC<IMenuComponentProps> = (props) => {
+
+  // eslint-disable-next-line no-null/no-null
+  const list = useRef<HTMLDivElement>(null)
+
+  // const { open, selectedIndex, rowHeight } = props
+
+  const handleClick = (option: IOption) => {
+    const newValue = Array.isArray(props.value) && is(props.multi)
+      ? [...props.value, option.value]
+      : option.value   
+    props.onSelect(newValue)
+  }
+
+  /**
+  * @TODO
+  * This doesnt work with the styled components that RWC uses, so I'll leave comented for now
+  *useEffect(() => {
+  *  if(is(open) && isDefined(list.current) && isDefined(selectedIndex)) {
+  *    list.current.scrollTo(0, selectedIndex * (defaultTo(rowHeight, DEFAULT_ROW_HEIGHT)+4))  
+  *  }
+  *}, [open, list, selectedIndex, rowHeight])
+  */
+
+  return (
+    <MenuListFrame ref={list}>
+      {
+        maybeRender(props.menuTitle,
+          <TitleRow>{props.menuTitle}</TitleRow>
+        )
+      }
+      {(safeArray(props.options)).map((_, index) => (        
+        <Row 
+          key={index}
+          index={index} 
+          handleClick={handleClick} 
+          {...props} />
+      ))}
+    </MenuListFrame>
+  )
+}