@edvisor/product-language 0.7.0-rc1 → 0.7.0

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

@@ -1,157 +0,0 @@
-/* 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

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

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

@@ -1,101 +0,0 @@
-/* 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

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

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

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

@@ -1,31 +0,0 @@
-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')
-      
-    })
-
-  })
-})