@edvisor/product-language 0.10.7 → 0.10.8

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

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

@@ -1,18 +0,0 @@
-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/helpers.tsx

@@ -1,62 +0,0 @@
-import styled from 'styled-components'
-import { Borders, Surface, Margin, Padding } from '@foundations'
-import { SpaceBetween } from 'components/layout'
-import { DEFAULT_ROW_HEIGHT, IMenuComponentProps, IOptionComponentProps, menuPositionType } from '../types'
-import { defaultTo, is } from '@helpers'
-
-interface IOptionItemProps {
-  active?: IOptionComponentProps['active'];
-  selected?: IOptionComponentProps['selected'];
-  height?: IOptionComponentProps['height'];
-}
-
-export const OptionItem = styled(SpaceBetween)`
-  flex: 1;
-  height: ${(props: IOptionItemProps) => defaultTo(props.height, DEFAULT_ROW_HEIGHT)}px;
-  min-width: 0;
-  cursor: pointer;
-  box-sizing: border-box;
-  margin: ${Margin.xxs};
-  border-radius: 6px;
-  background-clip: content-box;
-  background-color: ${(props: IOptionItemProps) =>
-      is(props.active) 
-      ? Surface.Selected.Default 
-      : is(props.selected) 
-          ? Surface.Default.Hover 
-          : Surface.Default.Default};
-
-  & div {
-      padding: ${Padding.none} ${Padding.xs};
-  }
-
-  & i:last-child {
-      right: 8px;
-  }
-
-  &:hover {
-      background-color: ${(props: IOptionItemProps) =>
-      is(props.active) ? Surface.Selected.Hover : Surface.Default.Hover};
-  }
-
-  &:active {
-      background-color: ${(props: IOptionItemProps) =>
-      is(props.active) ? Surface.Selected.Pressed : Surface.Default.Pressed};
-  }
-`
-
-export const EmptyOptionItem = styled(OptionItem)<{props: IMenuComponentProps}>`
-  border: 1px solid ${Borders.Default.Subdued};
-  background-color: ${Surface.Default.Default};
-  position: absolute;
-  margin: ${Margin.none};
-  width: 100%;
-  height: 54px;
-  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)'};
-  &:hover {
-    background-color: ${Surface.Default.Default};
-  }
-`

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

@@ -1,73 +0,0 @@
-
-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: 10px;
-      height: 0;
-    }
-    ::-webkit-scrollbar-thumb {
-      min-height: 50px;
-      border: 2px solid rgba(0, 0, 0, 0);
-      background-clip: padding-box;
-      border-radius: 1em;
-      background-color: ${Surface.Neutral.Default};
-    }
-    ::-webkit-scrollbar-corner {
-      background-color: transparent;
-    }
-  }
-`
-
-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

@@ -1,232 +0,0 @@
-import styled from 'styled-components'
-import { Borders, Icons, Padding, Margin, shadowMd, Surface } from '@foundations'
-import { defaultTo, FC, is, isDefined, isEmpty, isNil, maybeRender, safeArray } from '@helpers'
-import { Heading4, Label } from 'components/typography'
-import { IconMinor } from 'components/icon'
-import { DEFAULT_EMPTY_TEXT, IMenuComponentProps, IOption } from '../types'
-import { equal } from '../utils'
-import { SpaceBetween } from 'components/layout'
-import { useRef } from 'react'
-import { SelectLabel } from './select-label'
-import { EmptyOptionItem } from './helpers'
-
-const MenuListFrame = styled.div<{ height?: number }>`
-  border: 1px solid ${Borders.Default.Subdued};
-  background-color: ${Surface.Default.Default};
-  position: absolute;
-  height: ${(props) => props.height}px;
-  max-height: ${(props) => props.height}px;
-  width: 100%;
-  width: -moz-available;
-  width: -webkit-fill-available;
-  overflow-y: auto;
-  overflow-x: hidden;
-
-  ::-webkit-scrollbar {
-    width: 10px;
-    height: 0;
-  }
-  ::-webkit-scrollbar-thumb {
-    min-height: 50px;
-    border: 2px solid rgba(0, 0, 0, 0);
-    background-clip: padding-box;
-    border-radius: 1em;
-    background-color: ${Surface.Neutral.Default};
-  }
-  ::-webkit-scrollbar-corner {
-    background-color: transparent;
-  }
-
-  ${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.s};
-  }
-  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: 44px;
-  margin: ${Margin.none} ${Margin.xxs};
-  border-bottom: 1px solid ${Borders.Default.Subdued};
-  display: flex;
-  align-items: center;
-  padding-left: ${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) => {
-
-  const {
-    menuHeight = 184,
-  } = props
-
-  const options = safeArray(props.options)
-
-  const optionsHeight = options
-    .reduce(function (acc, obj) {
-      return acc + (isDefined(obj['helperText']) ? 72 : 52) 
-    }, 0)
-
-  const height = Math.min(
-    Math.max(optionsHeight, 40), menuHeight
-  )
-
-  // 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])
-  */
-
-  if (options.length === 0) {
-    const { emptyText } = props
-    return (
-      <EmptyOptionItem props={props}>
-        <SelectLabel>
-            <span>{defaultTo(emptyText, DEFAULT_EMPTY_TEXT)}</span>
-        </SelectLabel>
-      </EmptyOptionItem>
-    )
-  }
-
-  return (
-    <MenuListFrame height={height} ref={list}>
-      {
-        maybeRender(isDefined(props.menuTitle) && (isNil(props.search) || isEmpty(props.search)),
-          <TitleRow>{props.menuTitle}</TitleRow>
-        )
-      }
-      {(safeArray(props.options)).map((_, index) => (        
-        <Row
-          key={index}
-          index={index} 
-          handleClick={handleClick} 
-          {...props} />
-      ))}
-    </MenuListFrame>
-  )
-}

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

@@ -1,43 +0,0 @@
-import { CSSProperties, memo } from 'react'
-import { areEqual } from 'react-window'
-import { OptionComponent } from './option'
-import { IMenuComponentProps } from '../types'
-import { equal } from '../utils'
-import { is } from '@helpers'
-
-interface IMenuRowProps {
-  index: number;
-  style: CSSProperties;
-  data: IMenuComponentProps;
-}
-
-export const MenuRow = memo(({ index, style, data }: IMenuRowProps) => {
-  const {
-    options = [],
-    labelComponent,
-    selectedIndex,
-    rowHeight,
-    search,
-    multi,
-    onSelect
-  } = data
-  const option = options[index]
-  const currentValue =
-    Array.isArray(data.value) && is(multi) ? data.value : [data.value]
-
-  return (
-    <div style={style}>
-      <OptionComponent
-        option={option}
-        labelComponent={labelComponent}
-        height={rowHeight}
-        active={currentValue.some(val =>
-            equal(val, option.value)
-        )}
-        selected={selectedIndex === index}
-        search={search}
-        onSelect={onSelect}
-      />
-    </div>
-    )
-}, areEqual)

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

@@ -1,134 +0,0 @@
-import { useEffect, useRef } from 'react'
-import {
-  IOption, 
-  DEFAULT_EMPTY_TEXT, 
-  DEFAULT_MENU_HEIGHT, 
-  DEFAULT_ROW_HEIGHT, 
-  labelPositionType, 
-  menuPositionType,
-  IMenuComponentProps
-} from '../types'
-import { equal } from '../utils'
-import { FixedSizeList } from 'react-window'
-import { defaultTo, is, isDefined, maybeRender, safeArray } from '@helpers'
-import { MenuContainer } from './menu-container'
-import { MenuRow } from './menu-row'
-import { useMemo } from 'react'
-import { SelectLabel } from './select-label'
-import { EmptyOptionItem } from './helpers'
-
-export const Menu = (props: IMenuComponentProps) => {
-  const {
-    rowHeight = DEFAULT_ROW_HEIGHT,
-    selectedIndex,
-    open,
-    invalid,
-    menuHeight = DEFAULT_MENU_HEIGHT,
-    menuPosition = menuPositionType.BOTTOM,
-    labelPosition = labelPositionType.TOP,
-    label,
-  } = props
-  
-  const options = safeArray(props.options)
-  
-  type FixedSizeListType = FixedSizeList & HTMLElement
-  // eslint-disable-next-line no-null/no-null
-  const list = useRef<FixedSizeList>(null)
-  // eslint-disable-next-line no-null/no-null
-  const outerRef = useRef<FixedSizeListType>(null)
-
-  const height = Math.min(
-    Math.max(options.length * rowHeight, rowHeight) + 10, menuHeight
-  )
-
-  useEffect(() => {
-    if (
-      is(open) &&
-      isDefined(list.current) &&
-      selectedIndex !== undefined &&
-      selectedIndex !== -1
-    ) {
-      list.current.scrollToItem(selectedIndex, 'center')
-    }
-  }, [open, selectedIndex])
-
-  useEffect(() => {
-    if (
-      is(open) && isDefined(outerRef.current) && options.length > 0
-    ) {
-      outerRef.current.style.opacity = '1'
-    }
-  }, [open, options])
-
-  const itemData = useMemo(() => {
-    return {
-      ...props,
-      options,
-      onSelect: (value: unknown, option: IOption) => {
-        if (Array.isArray(props.value) && is(props.multi)) {
-          const found = props.value.some((item) =>
-            equal(item, value)
-          )
-          const values = found
-            ? props.value.filter(
-                (item) =>
-                  !equal(item, value)
-              )
-            : Array.from(new Set([...props.value, value]))
-
-          props.onSelect(values, option)
-        } else {
-          props.onSelect(value, option)
-        }
-      }
-    }
-  }, [props, options])
-
-  const renderList = () => {
-    const MenuComponent = props.menuComponent
-    const itemCount = options.length
-    
-    if (isDefined(MenuComponent)) {
-      return <MenuComponent {...props} />
-    }
-
-    if (itemCount === 0) {
-      const { emptyText } = props
-      return (
-        <EmptyOptionItem props={props}>
-          <SelectLabel>
-              <span>{defaultTo(emptyText, DEFAULT_EMPTY_TEXT)}</span>
-          </SelectLabel>
-        </EmptyOptionItem>
-      )
-    }
-
-    return (
-      <FixedSizeList
-        className="menu-list"
-        style={{position: 'absolute'}}
-        ref={list}
-        outerRef={outerRef}
-        width="100%"
-        height={height}
-        itemSize={rowHeight}
-        itemCount={itemCount}
-        itemData={itemData}
-      >
-        {MenuRow}
-      </FixedSizeList>
-    )
-  }
-
-  return maybeRender(open, 
-    <MenuContainer
-      invalid={invalid}
-      label={label}
-      menuHeight={height}
-      menuPosition={menuPosition}
-      labelPosition={labelPosition}
-    >
-      {renderList()}
-    </MenuContainer>  
-  )
-}

package/src/lib/components/select/components/option.tsx

@@ -1,51 +0,0 @@
-import { FC, is, isDefined } from '@helpers'
-import styled from 'styled-components'
-import { Label } from 'components/typography'
-import { Icons } from '@foundations'
-import { memo } from 'react'
-import { IOptionComponentProps, LabelComponentProps } from '../types'
-import { areEqual } from 'react-window'
-import { IconMinor } from 'components/icon'
-import { OptionItem } from './helpers'
-
-const CheckedIcon = styled(IconMinor.Check)`
-  svg {
-    path {
-      fill : ${Icons.Highlight}
-    }
-  }
-`
-
-export const OptionComponent = memo((props: IOptionComponentProps) => {
-
-  const onClick = () => {
-    props.onSelect(props.option.value, props.option)
-  }
-  
-  const { active, selected, labelComponent, option, height } = props
-  const SelectLabel = (isDefined(labelComponent) ? labelComponent : Label) as FC<LabelComponentProps>
-
-  const className = [
-    'option',
-    props.className,
-    is(selected) ? 'selected' : '',
-    is(active) ? 'active' : ''
-  ].filter((v) => Boolean(v))
-  
-  return (
-    <OptionItem
-      className={className.join(' ')}
-      data-role="option"
-      center
-      selected={selected}
-      active={active}
-      height={height}
-      onClick={onClick}
-    >
-      <SelectLabel type="option" active={active} {...option}>
-        {option.label}
-      </SelectLabel>
-      {is(active) && <CheckedIcon/>}
-    </OptionItem>
-  )
-}, areEqual)