@edvisor/product-language 0.9.0 → 0.10.2

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

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

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

@@ -0,0 +1,151 @@
+import { useEffect, useRef } from 'react'
+import styled from 'styled-components'
+import { IMenuComponentProps, 
+  IOption, 
+  DEFAULT_EMPTY_TEXT, 
+  DEFAULT_MENU_HEIGHT, 
+  DEFAULT_ROW_HEIGHT, 
+  labelPositionType, 
+  menuPositionType 
+} from '../types'
+import { equal } from '../utils'
+import { FixedSizeList } from 'react-window'
+import { defaultTo, is, isDefined, maybeRender, safeArray } from '@helpers'
+import { Borders, Surface, Margin } from '@foundations'
+import { OptionItem } from './option'
+import { MenuContainer } from './menu-container'
+import { MenuRow } from './menu-row'
+import { useMemo } from 'react'
+import { SelectLabel } from './select-label'
+
+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};
+  }
+`
+
+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

@@ -0,0 +1,91 @@
+import { defaultTo, FC, is, isDefined } from '@helpers'
+import styled from 'styled-components'
+import { Label } from 'components/typography'
+import { Padding, Surface, Icons, Margin } from '@foundations'
+import { memo } from 'react'
+import { IOptionComponentProps, LabelComponentProps, DEFAULT_ROW_HEIGHT } from '../types'
+import { areEqual } from 'react-window'
+import { IconMinor } from 'components/icon'
+import { SpaceBetween } from 'components/layout'
+
+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};
+  }
+`
+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)

package/src/lib/components/select/components/select-label.tsx

@@ -0,0 +1,10 @@
+import styled from 'styled-components'
+import { Label } from 'components/typography'
+
+export const SelectLabel = styled(Label)`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  user-select: none;
+  box-sizing: border-box;
+`

package/src/lib/components/select/components/value-component-multi.tsx

@@ -0,0 +1,40 @@
+import styled from 'styled-components'
+import { IValueComponentMultiProps } from '../types'
+import { SelectLabel } from './select-label'
+import { Tag } from 'components/tag'
+import { Padding } from '@foundations'
+import { memo } from 'react'
+
+const TagContainer = styled(Tag)`
+  div:first-child {
+    min-height: auto;
+    padding: ${Padding.none} ${Padding.none} ${Padding.none} ${Padding.xxs};
+  }
+  div:last-child {
+    padding: ${Padding.none};
+  }
+`
+
+const ValueComponentMulti = <T,>(props: IValueComponentMultiProps<T>) => {
+
+  const { option, onRemove } = props
+  const className = ['value-multi', props.className]
+    .filter((c) => Boolean(c))
+    .join(' ')
+
+  return (
+    <TagContainer 
+      className={className}
+      closable
+      onClick={() => {
+        onRemove(option.value)
+      }}
+      >
+      <SelectLabel default {...option}>
+        {option.label}
+      </SelectLabel>
+    </TagContainer>
+  )
+}
+
+export default memo(ValueComponentMulti) as typeof ValueComponentMulti