@livechat/design-system-react-components 1.0.0-alpha.4 → 1.0.0-alpha.5

package/src/components/NumericInput/NumericInput.module.scss

@@ -1,110 +0,0 @@
-.numeric-input {
-  display: inline-block;
-  height: 36px;
-  position: relative;
-  width: 64px;
-
-  &__increment,
-  &__decrement {
-    align-items: center;
-    background: transparent;
-    border: 0;
-    border-left: 1px solid var(--border-default);
-    box-sizing: border-box;
-    cursor: pointer;
-    display: flex;
-    height: 50%;
-    justify-content: center;
-    padding: 0;
-    position: absolute;
-    right: 1px;
-    top: 1px;
-    width: 23px;
-
-    &:hover,
-    &:focus {
-      outline: 0;
-    }
-  }
-
-  & &__increment {
-    &:disabled {
-      border-color: var(--border-disabled);
-      cursor: not-allowed;
-    }
-  }
-
-  & &__decrement {
-    border-top: 1px solid var(--border-default);
-    bottom: 1px;
-    top: auto;
-
-    &:disabled {
-      border-color: var(--border-disabled);
-      cursor: not-allowed;
-    }
-  }
-
-  input {
-    appearance: textfield;
-    background-clip: padding-box;
-    border: 1px solid var(--border-default);
-    border-radius: 4px;
-    box-sizing: border-box;
-    color: var(--content-default);
-    height: 100%;
-    line-height: 36px;
-    padding: 0 28px 0 4px;
-    text-align: right;
-    transition: border 0.25s ease-in-out;
-    width: 100%;
-    will-change: border-color;
-
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-      appearance: none;
-      margin: 0;
-    }
-
-    &:hover {
-      border-color: var(--border-hover);
-      outline: 0;
-    }
-
-    &:focus {
-      border-color: var(--color-action-default);
-      outline: 0;
-    }
-
-    &:disabled {
-      color: var(--content-disabled);
-      cursor: not-allowed;
-
-      &:hover {
-        border-color: var(--border-disabled);
-      }
-    }
-  }
-
-  &--disabled {
-    background-color: var(--surface-basic-disabled);
-    color: var(--content-default);
-    cursor: not-allowed;
-  }
-
-  &.numeric-input--no-controls {
-    input {
-      padding: 0 4px;
-    }
-  }
-
-  &.numeric-input--error {
-    input {
-      &,
-      &:hover,
-      &:focus {
-        border-color: var(--color-negative-default);
-      }
-    }
-  }
-}

package/src/components/NumericInput/NumericInput.spec.tsx

@@ -1,129 +0,0 @@
-import * as React from 'react';
-import { render, fireEvent, vi } from 'test-utils';
-import noop from '../../utils/noop';
-import { NumericInputProps, NumericInput } from './NumericInput';
-
-const renderComponent = (props: Partial<NumericInputProps>) => {
-  const finalProps = Object.assign(
-    {},
-    { onChange: noop },
-    props
-  ) as NumericInputProps;
-  return render(<NumericInput {...finalProps} className="my-css-class" />);
-};
-
-describe('<NumericInput> component', () => {
-  it('should allow for custom class', () => {
-    const { container } = renderComponent({
-      value: '0',
-    });
-
-    expect(container.firstChild).toHaveClass('my-css-class');
-  });
-
-  it('should display buttons by default', () => {
-    const { queryByRole } = renderComponent({
-      value: '0',
-    });
-
-    expect(
-      queryByRole('button', {
-        name: /Increment value/i,
-      })
-    ).toBeVisible();
-
-    expect(
-      queryByRole('button', {
-        name: /Decrement value/i,
-      })
-    ).toBeVisible();
-  });
-
-  it('should not display buttons', () => {
-    const { queryByRole } = renderComponent({
-      value: '0',
-      noControls: true,
-    });
-
-    expect(
-      queryByRole('button', {
-        name: /Increment value/i,
-      })
-    ).toBeFalsy();
-
-    expect(
-      queryByRole('button', {
-        name: /Decrement value/i,
-      })
-    ).toBeFalsy();
-  });
-
-  it('all elements should be disabled', () => {
-    const { queryByRole } = renderComponent({
-      value: '0',
-      disabled: true,
-    });
-
-    expect(queryByRole('textbox')).toBeDisabled();
-
-    expect(
-      queryByRole('button', {
-        name: /Increment value/i,
-      })
-    ).toBeDisabled();
-
-    expect(
-      queryByRole('button', {
-        name: /Decrement value/i,
-      })
-    ).toBeDisabled();
-  });
-
-  it('should call onChange when button click', () => {
-    const onChange = vi.fn();
-    const { getByRole } = renderComponent({
-      value: '0',
-      onChange,
-    });
-
-    fireEvent.click(
-      getByRole('button', {
-        name: /Increment value/i,
-      })
-    );
-    expect(onChange).toHaveBeenCalledTimes(1);
-
-    fireEvent.click(
-      getByRole('button', {
-        name: /Decrement value/i,
-      })
-    );
-    expect(onChange).toHaveBeenCalledTimes(2);
-  });
-
-  it('should disable Increment button when limit reached', () => {
-    const { getByRole } = renderComponent({
-      value: '10',
-      max: 10,
-    });
-
-    expect(
-      getByRole('button', {
-        name: /Increment value/i,
-      })
-    ).toBeDisabled();
-  });
-
-  it('should disable Decrement button when limit reached', () => {
-    const { getByRole } = renderComponent({
-      value: '-10',
-      min: -10,
-    });
-
-    expect(
-      getByRole('button', {
-        name: /Decrement value/i,
-      })
-    ).toBeDisabled();
-  });
-});

package/src/components/NumericInput/NumericInput.stories.tsx

@@ -1,56 +0,0 @@
-import * as React from 'react';
-import { ComponentMeta, Story } from '@storybook/react';
-
-import {
-  NumericInputProps,
-  NumericInput as NumericInputComponent,
-} from './NumericInput';
-
-export default {
-  title: 'Forms (WIP)/NumericInput',
-  component: NumericInputComponent,
-  argTypes: {
-    value: {
-      control: {
-        disable: true,
-      },
-    },
-  },
-} as ComponentMeta<typeof NumericInputComponent>;
-
-const StoryTemplate: Story<NumericInputProps> = (args: NumericInputProps) => {
-  const [value, setValue] = React.useState('0');
-  return (
-    <div>
-      <NumericInputComponent
-        {...args}
-        value={value}
-        onChange={(v) => setValue(v as string)}
-      />
-    </div>
-  );
-};
-
-export const NumericInput = StoryTemplate.bind({});
-NumericInput.args = {};
-
-export const NumericInputWithMinAndMaxValues = StoryTemplate.bind({});
-NumericInputWithMinAndMaxValues.args = {
-  min: -10,
-  max: 10,
-};
-
-export const NumericInputWithNoControls = StoryTemplate.bind({});
-NumericInputWithNoControls.args = {
-  noControls: true,
-};
-
-export const NumericInputWithDisabled = StoryTemplate.bind({});
-NumericInputWithDisabled.args = {
-  disabled: true,
-};
-
-export const NumericInputWithError = StoryTemplate.bind({});
-NumericInputWithError.args = {
-  error: 'Error',
-};

package/src/components/NumericInput/NumericInput.tsx

@@ -1,161 +0,0 @@
-import * as React from 'react';
-import cx from 'clsx';
-import {
-  ChevronUp,
-  ChevronDown,
-} from '@livechat/design-system-icons/react/material';
-import { Icon, IconTypeName } from '../Icon';
-import { KeyCodes } from '../../utils/keyCodes';
-
-import styles from './NumericInput.module.scss';
-
-const baseClass = 'numeric-input';
-
-interface Props {
-  className?: string;
-  error?: string;
-  value: string;
-  max?: number;
-  min?: number;
-  disabled?: boolean;
-  noControls?: boolean;
-  onChange: (value: string) => void;
-}
-
-export type NumericInputProps = React.InputHTMLAttributes<HTMLInputElement> &
-  Props;
-
-export const NumericInput: React.FC<NumericInputProps> = ({
-  className,
-  error,
-  value,
-  max,
-  min,
-  disabled,
-  noControls,
-  style,
-  onChange,
-  ...restProps
-}) => {
-  const inputRef = React.useRef<null | HTMLInputElement>(null);
-
-  const mergedClassNames = cx(
-    styles[baseClass],
-    {
-      [styles[`${baseClass}--error`]]: error,
-      [styles[`${baseClass}--no-controls`]]: noControls,
-      [styles[`${baseClass}--disabled`]]: disabled,
-    },
-    className
-  );
-
-  const callOnChange = (val: number | string) => onChange(String(val));
-
-  const calcValue = (val: number) => {
-    if (max !== undefined && val > max) {
-      return max;
-    }
-
-    if (min !== undefined && val < min) {
-      return min;
-    }
-
-    return val;
-  };
-
-  const updateValue = (val: number) => {
-    const newValue = parseInt(value, 10) + val;
-
-    return callOnChange(calcValue(newValue));
-  };
-
-  const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (e) => {
-    if (e.key === KeyCodes.arrowDown) {
-      e.preventDefault();
-      updateValue(-1);
-    }
-
-    if (e.key === KeyCodes.arrowUp) {
-      e.preventDefault();
-      updateValue(1);
-    }
-  };
-
-  const hasReachedTheLimit = (value: string, margin?: number) =>
-    margin !== undefined && parseInt(value, 10) === margin;
-
-  const handleOnChange = (e: React.FormEvent<HTMLInputElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    const inputVal = e.currentTarget.value.replace(
-      /((?!([-]|([-]?\d+))).)/,
-      ''
-    );
-
-    if (inputVal === '' || inputVal === '-') {
-      return callOnChange(inputVal);
-    }
-
-    const newValue = parseInt(inputVal, 10);
-
-    return callOnChange(calcValue(newValue));
-  };
-
-  const handleIncrementClick = () => {
-    inputRef.current?.focus();
-    return updateValue(1);
-  };
-
-  const handleDecrementClick = () => {
-    inputRef.current?.focus();
-    return updateValue(-1);
-  };
-
-  return (
-    <div className={mergedClassNames} style={style}>
-      <input
-        type="text"
-        ref={inputRef}
-        {...restProps}
-        value={value}
-        disabled={disabled}
-        onChange={handleOnChange}
-        onKeyDown={onKeyDown}
-        min={min}
-        max={max}
-      />
-      {!noControls && (
-        <>
-          <button
-            tabIndex={-1}
-            disabled={disabled || hasReachedTheLimit(value, max)}
-            onClick={handleIncrementClick}
-            aria-label="Increment value"
-            className={styles[`${baseClass}__increment`]}
-            type="button"
-          >
-            <Icon
-              source={ChevronUp}
-              disabled={disabled || hasReachedTheLimit(value, max)}
-              iconType={IconTypeName.Primary}
-            />
-          </button>
-          <button
-            tabIndex={-1}
-            disabled={disabled || hasReachedTheLimit(value, min)}
-            aria-label="Decrement value"
-            className={styles[`${baseClass}__decrement`]}
-            onClick={handleDecrementClick}
-            type="button"
-          >
-            <Icon
-              source={ChevronDown}
-              iconType={IconTypeName.Primary}
-              disabled={disabled || hasReachedTheLimit(value, min)}
-            />
-          </button>
-        </>
-      )}
-    </div>
-  );
-};

package/src/components/NumericInput/NumericInputField.stories.tsx

@@ -1,58 +0,0 @@
-import * as React from 'react';
-import { ComponentMeta, Story } from '@storybook/react';
-
-import {
-  NumericInputFieldProps,
-  NumericInputField as NumericInputFieldComponent,
-} from './NumericInputField';
-
-export default {
-  title: 'Forms (WIP)/NumericInputField',
-  component: NumericInputFieldComponent,
-  argTypes: {
-    value: {
-      control: {
-        disable: true,
-      },
-    },
-  },
-} as ComponentMeta<typeof NumericInputFieldComponent>;
-
-const StoryTemplate: Story<NumericInputFieldProps> = (
-  args: NumericInputFieldProps
-) => {
-  const [value, setValue] = React.useState('0');
-
-  return (
-    <div>
-      <NumericInputFieldComponent
-        {...args}
-        value={value}
-        onChange={(v) => setValue(v as string)}
-      />
-    </div>
-  );
-};
-
-export const NumericInputField = StoryTemplate.bind({});
-NumericInputField.args = {};
-
-export const NumericInputFieldWithProps = StoryTemplate.bind({});
-NumericInputFieldWithProps.args = {
-  labelText: 'Number',
-  description: 'Value should be within range [-10, 20]',
-  min: -10,
-  max: 20,
-};
-
-export const NumericInputFieldWithDisabled = StoryTemplate.bind({});
-NumericInputFieldWithDisabled.args = {
-  labelText: 'Number',
-  disabled: true,
-};
-
-export const NumericInputFieldWithError = StoryTemplate.bind({});
-NumericInputFieldWithError.args = {
-  labelText: 'Number',
-  error: 'Error text',
-};

package/src/components/NumericInput/NumericInputField.tsx

@@ -1,57 +0,0 @@
-import * as React from 'react';
-import { TextField } from '../TextField';
-import { NumericInput } from './NumericInput';
-
-interface Props {
-  id: string;
-  labelText?: string;
-  labelAdornment?: React.ReactNode;
-  className?: string;
-  inline?: boolean;
-  error?: string;
-  description?: React.ReactNode;
-  labelRightNode?: React.ReactNode;
-  fieldClassName?: string;
-  value: string;
-  max?: number;
-  min?: number;
-  onChange: (value: string) => void;
-}
-
-export type NumericInputFieldProps = Props &
-  React.InputHTMLAttributes<HTMLInputElement>;
-
-export const NumericInputField: React.FC<NumericInputFieldProps> = ({
-  id,
-  labelText,
-  labelAdornment,
-  className,
-  inline,
-  error,
-  description,
-  labelRightNode,
-  fieldClassName,
-  style,
-  ...restProps
-}) => {
-  return (
-    <TextField
-      inline={inline}
-      error={error}
-      description={description}
-      labelText={labelText}
-      labelAdornment={labelAdornment}
-      className={className}
-      labelFor={id}
-      labelRightNode={labelRightNode}
-    >
-      <NumericInput
-        {...restProps}
-        id={id}
-        className={fieldClassName}
-        style={style}
-        error={error}
-      />
-    </TextField>
-  );
-};

package/src/components/Popover/Popover.module.scss

@@ -1,16 +0,0 @@
-.popover {
-  background-color: var(--surface-basic-default);
-  border-radius: 4px;
-  box-shadow: 0 1px 10px 0 rgba(66, 77, 87, 0.3);
-  display: none;
-  max-width: 336px;
-  min-width: 168px;
-
-  &:focus {
-    outline: none;
-  }
-
-  &--visible {
-    display: block;
-  }
-}

package/src/components/Popover/Popover.spec.tsx

@@ -1,39 +0,0 @@
-import * as React from 'react';
-import { render, fireEvent } from 'test-utils';
-import { Popover } from './Popover';
-
-const PopperContent = () => {
-  return <div>Content</div>;
-};
-
-const PopperTrigger = () => {
-  return <button>Button</button>;
-};
-
-describe('<Popover> component', () => {
-  it('should show content if isVisible is set', () => {
-    const { container } = render(
-      <Popover isVisible={true} triggerRenderer={PopperTrigger}>
-        <PopperContent></PopperContent>
-      </Popover>
-    );
-
-    expect(container).toHaveTextContent('Content');
-  });
-
-  it('should show content if trigger has been clicked', () => {
-    const { container, getByRole } = render(
-      <Popover triggerRenderer={PopperTrigger}>
-        <PopperContent></PopperContent>
-      </Popover>
-    );
-
-    fireEvent.click(
-      getByRole('button', {
-        name: /Button/i,
-      })
-    );
-
-    expect(container).toHaveTextContent('Content');
-  });
-});

package/src/components/Popover/Popover.stories.css

@@ -1,23 +0,0 @@
-.lc-listElement {
-  align-items: center;
-  color: var(--content-default);
-  cursor: pointer;
-  display: flex;
-  font-size: 14px;
-  line-height: 1.5;
-  list-style: none;
-  padding: 10px;
-}
-
-.lc-listElement:hover {
-  background-color: var(--surface-basic-hover);
-}
-
-.lc-divider {
-  border-bottom: 1px solid var(--border-default);
-}
-
-.lc-label {
-  line-height: 20px;
-  margin-left: 5px;
-}