@edvisor/product-language 0.6.0 → 0.7.0-rc1

package/src/lib/components/select/storybook/radio-group.tsx

@@ -0,0 +1,157 @@
+/* eslint-disable no-restricted-syntax */
+import { InputHTMLAttributes } from 'react'
+import { FC } from '@helpers'
+import styled from 'styled-components'
+import { Borders, Focused, Icons, Margin, Padding, Surface } from '@foundations'
+import { Label } from 'components/typography'
+
+export interface InputElementProps extends InputHTMLAttributes<HTMLInputElement> {
+  label: string;
+  id: string; 
+  key?: string;
+  disabled?: boolean;
+}
+
+export interface IOption {
+  label: string;
+  value: string;
+  name?: string;
+  disabled?: boolean;
+}
+
+export interface IOptionGroup {
+  label: string;
+  options: IOption[];
+  onChange: (value: string) => void
+}
+
+export const RadioButton: FC<InputElementProps> = (props) => {
+  return (
+    <OptionWrapper>
+      <Label style={{minWidth: '50px'}}>
+        {props.label}
+      </Label>
+      <Radio type="radio" disabled={props.disabled} {...props} />
+    </OptionWrapper>
+  )
+}
+
+export const RadioButtonGroup: FC<IOptionGroup> = (props) => {
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {    
+    props.onChange(event.target.value)
+  }
+
+  const renderOptions = () => {
+    return props.options.map((option: IOption, index) => {
+      const shortenedOptionLabel = option.label.replace(/\s+/g, '')
+      const optionId = `radio-option-${shortenedOptionLabel}`      
+
+      return (
+        <RadioButton
+          value={option.value}
+          label={option.label} 
+          key={optionId}
+          id={optionId}
+          name={option.name}
+          disabled={option.disabled}
+          defaultChecked={index === 0}
+          onChange={handleChange}
+        />
+      )
+    })
+ }
+  
+  return (
+    <Container>
+      <Title>{props.label}</Title>
+      <GroupWrapper>
+        {renderOptions()}
+      </GroupWrapper>
+    </Container>
+    )
+}
+
+const Container = styled.div`  
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  float: left;
+`
+
+const Title = styled(Label)`
+  padding: ${Padding.none} ${Padding.xs};
+  min-width: 100px;
+`
+
+const GroupWrapper = styled.div`
+  display: flex;
+  min-width: 150px;
+  flex-direction: row;
+  align-items: center;
+`
+
+const OptionWrapper = styled.div`
+  gap: 6px;
+  padding: ${Padding.xs};
+  display: flex;
+  flex-direction: row-reverse;
+  float: left;
+`
+
+export const Radio = styled.input`
+  -webkit-appearance: none;
+  appearance: none;
+  margin: ${Margin.none};
+  width: 1.5em;
+  height: 1.5em;  
+  border: 2px solid ${Borders.Highlight.Default};
+  border-radius: 50%;
+  transition: all 0.1s ease-in-out;
+  ::after {
+    content: "";
+    display: block;
+    border-radius: 50%;
+    width: 0.75em;
+    height: 0.75em;
+    margin: 3px;
+  }
+  :checked {
+    ::after {
+      background-color: ${Icons.Highlight};
+    }
+    :hover {
+      background-color: ${Surface.Default.Default};
+      border: 2px solid ${Icons.Highlight};
+      ::after {
+        background-color: ${Icons.Highlight};
+      }
+    }
+  }
+  :hover {
+    ::after {
+      background-color: ${Focused.Default};
+    }
+  }
+  :disabled {
+    cursor: not-allowed;
+    border: 2px solid ${Focused.Default};
+    background-color: ${Surface.Highlight.Default};
+    :hover {
+      ::after {
+        background-color: ${Surface.Highlight.Default};
+      }
+    }
+    :checked {
+      ::after {
+        background-color: ${Focused.Default};
+      }
+      :hover {
+        background-color: ${Surface.Highlight.Default};
+        ::after {
+          background-color: ${Focused.Default};
+        }
+      }
+    }
+  }
+`

package/src/lib/components/select/storybook/select.stories.mdx

@@ -0,0 +1,172 @@
+import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
+import { Select } from '../index'
+import { 
+  SelectOptions, 
+  CustomLabelComponent, 
+  HugeListWithCustomLabelComponent, 
+  CustomValidation,
+  CustomMenu,
+  FancyMenu
+} from './components'
+
+
+<Meta title="Components/Select" component={Select}/>
+
+# Select System
+
+For more details, check out the guidelines on [Figma](https://www.figma.com/file/ue1CurHfZ426o2T2l8Dk64/Edvisor-Product-Language?node-id=4%3A12&t=3Z4YOaL6SG9Km6ih-0)
+
+### Table of Contents
+1.  [How to use](#how-to-use)
+2.  [Select Options](#select-options)
+3.  [Custom Label component](#custom-label)
+4.  [Handling Huge lists](#huge-lists)
+5.  [Validation](#validation)
+6.  [Custom Menu Component](#custom-menu)
+7.  [Customized Menu](#fancy-menu)
+8.  [API](#api)
+9.  [Select props](#select)
+10. [option props](#option)
+11. [labelComponent props](#labelComponent)
+12. [menuComponent props](#menuComponent)
+
+<div id="how-to-use"/>
+
+## How to Use
+
+```tsx
+import { select } from '@edvisor/product-language'
+
+<Select />
+
+```
+
+<div id="select-options"></div>
+
+### Select Options
+<SelectOptions />
+
+<div id="custom-label"></div>
+
+### Custom Label component
+<CustomLabelComponent/>
+
+<div id="huge-lists"></div>
+
+### Handling Huge lists
+The Select component uses [react-window](https://github.com/bvaughn/react-window) for efficiently rendering large lists by rendering part of a large data set
+
+Try searching some Countries
+<HugeListWithCustomLabelComponent/>
+
+<div id="validation"></div>
+
+### Validation
+<CustomValidation/>
+
+<div id="custom-menu"></div>
+
+### Custom Menu Component
+You can build your own menu component and pass it to the `menuComponent` property
+<CustomMenu/>
+
+<div id="fancy-menu"></div>
+
+### Customized Menu
+
+This is a ready to use costumized menu.
+Add the extra `icon` and `helperText` to the option Object to have them rendered in the menu.
+
+```tsx
+{
+  label: string,
+  value: T | T[],
+  icon?: IconM | IconMinor,
+  helperText?: string
+}
+```
+<FancyMenu/>
+
+<div id="api"></div>
+
+## API 
+
+<div id="select"></div>
+
+### `Select : ISelectProps`
+
+| Prop                                 | Type                                                              | Description                                                      |
+| ------------------------------------ | ----------------------------------------------------------------- | ---------------------------------------------------------------- |
+| `className?`                         | `string`                                                          | A Class name to be added to the wrapper                          |
+| [`options?`](#option)                | `IOption<T>[]`                                                    | A list of values to be selected                                  |
+| `value?`                             | `T` \| `T[]`                                                      | The current value selected                                       |
+| `placeholder?`                       | `string`                                                          | The placeholder to be displayed                                  |
+| `emptyText?`                         | `string`                                                          | The text to be displayed when there are no values                |
+| `clearable?`                         | `boolean`                                                         | Allow the selected value to be cleared                           |
+| `searchable?`                        | `boolean`                                                         | Enable search in the select                                      |
+| `disabled?`                          | `boolean`                                                         | Disable the component                                            |
+| `multi?`                             | `boolean`                                                         | Enable multi selection                                           | 
+| `invalid?`                           | `boolean`                                                         | Indicate there's an error in the component                       |
+| `rowHeight?`                         | `number`                                                          | The height of the fields, defaults to 44px                       |
+| `menuHeight?`                        | `number`                                                          | The height of the menu, defaults to 190px                        |
+| `menuPosition?`                      | `top` \| `bottom`                                                 | The poosition where the menu should be rendered                  |
+| `menuTitle?`                         | `string`                                                          | Menu title when using the [Customized Menu](#fancy-menu)         |
+| `label?`                             | `string`                                                          | The Label of the select                                          |
+| `labelPosition?`                     | `top` \| `side`                                                   | The position where the label should be rendered                  |
+| [`menuComponent?`](#menuComponent)   | `JSX.Element<IMenuComponentProps>`                                | Replaces the default List Menu component                         |
+| [`labelComponent?`](#labelComponent) | `JSX.Element<LabelComponentProps<T>>`                             | Replaces the default Label component                             |
+| `onChange?`                          | `(value: T[]` \| `T` \| `undefined, option?: IOption<T>) => void` | Called when an option is changed                                 |
+| `onSearch?`                          | `(value: string) => void`                                         | Called when the search is trigged                                |
+| `onOpen?`                            | `() => void`                                                      | Called when the menu opnes                                       |
+| `onClose?`                           | `() => void`                                                      | Called when the menu closes                                      |
+
+<div id="option"></div>
+
+### `option: IOption`
+The options property expects an array of objects of a type:
+```tsx
+{
+    label: string,
+    value: T | T[],
+}
+```
+
+| Prop              | Type          | Description                                     |
+| ----------------- | ------------- | ----------------------------------------------- |   
+| value             | T             | The Option value                                | 
+| disabled?         | boolean       | Whether the option is disabled (not implemented) |
+| label             | string        | The Option label to be displayed                |
+| [key: string]     | any           | key to the custom properties                    |
+
+
+<div id="labelComponent"></div>
+
+### `labelComponent: LabelComponentProps extends IOption`
+| Prop              | Type          | Description                                                |
+| ----------------- | ------------- | ---------------------------------------------------------- |   
+| `active`          | `boolean`     | indicates the option is active                             |
+| `type`            | `value-single` \| `value-multi` \| `option` | used to style accordinglygly |
+
+<div id="menuComponent"></div>
+
+### `menuComponent: IMenuComponentProps`
+When using the custom menuComponent, the select exposes this properties.
+
+| Prop              | Type                                                    | Description                                   |
+| ----------------- | --------------------------------------------------------| --------------------------------------------- |
+| `options`         | `IOption<T>[]`                                          | The list of values of the selected            |
+| `value`           | `T` \| `T[]`                                            | The Selected Value                            |
+| `labelComponent`  | `JSX.Element<LabelComponentProps<T>>`                   | The Select Label Component                    |
+| `emptyText`       | `string`                                                | Text displayed when there are no values       |
+| `multi`           | `boolean`                                               | Indicate multi selection is active            |
+| `rowHeight`       | `number`                                                | The height of the fields                      |
+| `menuHeight`      | `number`                                                | The height of the menu                        |
+| `menuPosition`    | `top` \| `bottom`                                       | The positio of the menu                       |
+| `invalid`         | `boolean`                                               | Indicate an error in the component            |
+| `selectedIndex?`  | `number`                                                | The index of the Selected Item                |
+| `open`            | `boolean`                                               | Indicates if the menu is open                 |
+| `search?`         | `string`                                                | The string typed in the search field          |
+| `labelPosition?`  | `string`                                                | The position where the label                  |
+| `label?`          | `string`                                                | The Label of the select                       |
+| `onSelect`        |`(value: T extends any[] ? T[] : T, option?: T) => void` | Trigged when the selected option changes      |
+

package/src/lib/components/select/types.ts

@@ -0,0 +1,149 @@
+import { FC } from '@helpers'
+import { CSSProperties } from 'react'
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export interface ISelectProps<T = any> {
+  className?: string
+  style?: CSSProperties
+  options?: IOption<T>[]
+  value?: T | T[]
+  placeholder?: string
+  emptyText?: string
+  clearable?: boolean
+  searchable?: boolean
+  disabled?: boolean
+  multi?: boolean
+  invalid?: boolean
+  errors?: { message: string }[]
+  rowHeight?: number
+  menuHeight?: number
+  menuPosition?: 'top' | 'bottom'
+  menuTitle?: string
+  label?: string
+  labelPosition?: 'top' | 'side'
+  labelComponent?: FC<LabelComponentProps<T>>
+  menuComponent?: FC<IMenuComponentProps>
+  onChange?(value: T[] | T | undefined, option?: IOption<T>): void
+  onSearch?(value: string): void
+  onOpen?(): void
+  onClose?(): void
+}
+
+export interface IValueProps {
+  options: ISelectProps['options'];
+  value: ISelectProps['value'];
+  placeholder: ISelectProps['placeholder'];
+  clearable: ISelectProps['clearable'];
+  searchable: ISelectProps['searchable'];
+  labelComponent: ISelectProps['labelComponent'];
+  multi: ISelectProps['multi'];
+  disabled: ISelectProps['disabled'];
+  invalid: ISelectProps['invalid'];
+  errors: ISelectProps['errors'];
+  search?: string;
+  open: boolean;
+  focused?: boolean;
+  label: ISelectProps['label'];
+  labelPosition: ISelectProps['labelPosition'];
+  onClear(): void;
+  onClick(): void;
+  onSearch(search: string): void;
+  onSearchFocus(): void;
+  onSearchBlur(): void;
+  onOptionRemove(value: any): void;
+}
+
+export interface IMenuContainerProps {
+  className?: string;
+  menuTop?: number;
+  menuHeight?: RectSize;
+  menuPosition?: ISelectProps['menuPosition'];
+  invalid?: boolean;
+  labelPosition?: string
+  label?: string
+  children?: React.ReactNode;
+  onRef?(el: HTMLDivElement | undefined): void;
+  onClick?(el: React.MouseEvent<HTMLDivElement>): void;
+}
+
+type RectSize = number | 'auto';
+
+export interface IValueComponentMultiProps<T = any>
+    extends IValueComponentSingleProps<T> {
+    options: IOption<T>[];
+    onRemove(value: T): void;
+}
+
+export type LabelComponentProps<T = any> = IOption<T> & {
+  active: boolean;
+  type: 'value-single' | 'value-multi' | 'option';
+}
+
+export interface IValueComponentSingleProps<T = any> {
+  className?: string;
+  option: IOption<T>;
+  labelComponent: ISelectProps['labelComponent'];
+}
+
+export interface IOptionComponentProps<T extends IOption = any> {
+  className?: string;
+  option: T;
+  active?: boolean;
+  selected?: boolean;
+  height?: number;
+  labelComponent: ISelectProps['labelComponent'];
+  search?: string;
+  onSelect(value: T['value'], option?: T): void;
+}
+
+export interface IOption<T = any> {
+  value: T;
+  disabled?: boolean;
+  label: string;
+  [key: string]: any;
+}
+
+export interface IMenuComponentProps<T = any> {
+  options: ISelectProps['options'];
+  value: ISelectProps['value'];
+  labelComponent: ISelectProps['labelComponent'];
+  menuComponent: ISelectProps['menuComponent'];
+  emptyText: ISelectProps['emptyText'];
+  multi: ISelectProps['multi'];
+  rowHeight: ISelectProps['rowHeight'];
+  menuHeight: ISelectProps['menuHeight'];
+  menuPosition: ISelectProps['menuPosition'];
+  invalid: ISelectProps['invalid'];
+  selectedIndex?: number;
+  open: boolean;
+  search?: string;
+  labelPosition?: string;
+  label?: string;
+  menuTitle?: string
+  onSelect(value: T extends any[] ? T[] : T, option?: T): void;
+}
+
+export interface IPosition {
+  menuPosition?: 'top' | 'bottom', 
+  menuHeight?: RectSize,
+  label?: string,
+  labelPosition?: string
+}
+
+export const DEFAULT_ROW_HEIGHT = 44
+
+export const DEFAULT_MENU_HEIGHT = 190
+
+export const DEFAULT_EMPTY_TEXT = 'No results found'
+
+export const DEFAULT_PLACEHOLDER = 'Select Something'
+
+export const enum menuPositionType {
+  TOP = 'top',
+  BOTTOM = 'bottom',
+}
+
+export const enum labelPositionType {
+  TOP = 'top',
+  SIDE = 'side',
+}

package/src/lib/components/select/utils.ts

@@ -0,0 +1,101 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { is, isDefined, isEmpty, isNil } from '@helpers'
+import { IOption, IPosition, labelPositionType, menuPositionType } from './types'
+
+export function getDocument(): Document | undefined {
+  if (typeof document !== 'undefined') {
+    return document
+  }
+
+  return undefined
+}
+
+export function equal(valueA: any, valueB: any) {
+  if (valueA === valueB) {
+    return true
+  }
+
+  if (isNil(valueA) || isNil(valueB)) {
+    return false
+  }
+
+  if (typeof valueA === 'object' && typeof valueB === 'object') {
+    if (isDefined(valueA.toJSON) && isDefined(valueB.toJSON)) {
+      return JSON.stringify(valueA.toJSON()) === JSON.stringify(valueB.toJSON())
+    }
+
+    return JSON.stringify(valueA) === JSON.stringify(valueB)
+  }
+
+  return false
+}
+
+export function getValueOptions(
+  options: IOption[],
+  value: any,
+  multi: boolean | undefined,
+) {
+  return options
+    .slice()
+    .filter((option) => {
+      if (Array.isArray(value) && is(multi)) {
+        return value.some((val) =>
+          equal(option.value, val)
+        )
+      } else {
+        return equal(option.value, value)
+      }
+    })
+    .sort((optionA, optionB) => {
+      if (Array.isArray(value) && is(multi)) {
+        const resultA = value.findIndex((val) =>
+          equal(optionA.value, val)
+        )
+        const resultB = value.findIndex((val) =>
+          equal(optionB.value, val)
+        )
+
+        return resultA < resultB ? -1 : resultA > resultB ? 1 : 0
+      } else {
+        return 0
+      }
+    })
+}
+
+export const keys = {
+  ARROW_UP: 'ArrowUp',
+  ARROW_DOWN: 'ArrowDown',
+  ENTER: 'Enter',
+  TAB: 'Tab',
+  ESC: 'Escape',
+  BACKSPACE: 'Backspace',
+  SPACE: ' '
+}
+
+export function toKey(value: any): string | number {
+  if (typeof value === 'string') {
+      return value
+  }
+
+  if (isDefined(value) && typeof value === 'object') {
+    const jsonObject = isDefined(value.toJSON) ? value.toJSON() : value
+
+    return JSON.stringify(jsonObject)
+  }
+
+  return JSON.stringify(value)
+}
+
+export const topPosition = (props: IPosition) => {
+  if (props.menuPosition === menuPositionType.TOP 
+    && isDefined(props.menuHeight) 
+    && typeof props.menuHeight === 'number') {
+    
+      return `${-(props.menuHeight + (
+        isDefined(props.label) && !isEmpty(props.label) 
+        && props.labelPosition === labelPositionType.TOP
+        ? 64 
+        : 44))}px`
+  } 
+  return '4px'
+}

package/src/lib/components/spinner/index.tsx

@@ -0,0 +1 @@
+export * from './spinner'

package/src/lib/components/spinner/spinner-size-flags.tsx

@@ -0,0 +1,39 @@
+import { bitwiseOr, MappedEnum, RequireOnlyOne, PropsWithChildren } from '@helpers'
+
+const enum SpinnerSize {
+  small = 1,
+  medium = 2,
+  large = 4,
+}
+
+type SpinnerSizes<T> = MappedEnum<typeof SpinnerSize, T>
+
+function toSpinner(n: number): SpinnerSize {
+  switch (n) {
+    case SpinnerSize.small:
+      return SpinnerSize.small
+    case SpinnerSize.medium:
+      return SpinnerSize.medium
+    case SpinnerSize.large:
+      return SpinnerSize.large
+    default:
+      return SpinnerSize.medium
+  }
+}
+
+const SpinnerValues = {
+  [SpinnerSize.small]: '18px',
+  [SpinnerSize.medium]: '40px',
+  [SpinnerSize.large]: '60px',
+}
+
+export type SpinnerProps = Partial<RequireOnlyOne<SpinnerSizes<boolean>>> &
+  PropsWithChildren
+
+export function getValuesBySize(props: SpinnerProps): string {
+  return SpinnerValues[
+    toSpinner(
+      bitwiseOr([props.small, props.medium, props.large])
+    )
+  ]
+}

package/src/lib/components/spinner/spinner.test.tsx

@@ -0,0 +1,31 @@
+import { render, screen } from '@testing-library/react'
+import { Spinner } from './index'
+
+describe('Spinner Tests', () => {
+  describe('Spinner Tests', () => {
+    it('should render the Spinner with default size', async () => {
+      render(
+        <Spinner />
+      )
+
+      const spinner = screen.getByRole('icon')
+
+      expect(spinner).toBeInTheDocument()
+      expect(spinner).toHaveStyle('height: 40px')
+      
+    })
+
+    it('should render the Spinner with small size', async () => {
+      render(
+        <Spinner small/>
+      )
+
+      const spinner = screen.getByRole('icon')
+
+      expect(spinner).toBeInTheDocument()
+      expect(spinner).toHaveStyle('height: 18px')
+      
+    })
+
+  })
+})