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

package/src/components/NumericInput/NumericInput.tsx

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

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

@@ -0,0 +1,57 @@
+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/NumericInput/index.ts

@@ -0,0 +1,2 @@
+export { NumericInput } from './NumericInput';
+export { NumericInputField } from './NumericInputField';

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

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

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

@@ -0,0 +1,23 @@
+.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;
+}

package/src/components/Popover/Popover.stories.tsx

@@ -0,0 +1,164 @@
+import * as React from 'react';
+import { ComponentMeta } from '@storybook/react';
+import { Button } from '../Button';
+import { Popover as PopoverComponent } from './Popover';
+import {
+  Block,
+  Chats,
+  DropDown,
+  Email,
+  Tickets,
+} from '@livechat/design-system-icons/react/material';
+import { Icon } from '../Icon';
+
+import * as PopperCore from '@popperjs/core';
+import './Popover.stories.css';
+
+const OpenChat = () => {
+  return (
+    <div className="lc-listElement">
+      <Icon source={Chats} /> <span className="lc-label">Open chat</span>{' '}
+    </div>
+  );
+};
+
+const CreateTicket = () => {
+  return (
+    <div className="lc-listElement">
+      <Icon source={Tickets} />{' '}
+      <span className="lc-label">Create a ticket</span>{' '}
+    </div>
+  );
+};
+
+const SendTranscript = () => {
+  return (
+    <div className="lc-listElement lc-divider">
+      <Icon source={Email} /> <span className="lc-label">Send transcript</span>{' '}
+    </div>
+  );
+};
+
+const BanCustomer = () => {
+  return (
+    <div className="lc-listElement">
+      <Icon source={Block} />{' '}
+      <span className="lc-label">Ban this customer</span>{' '}
+    </div>
+  );
+};
+
+export const Popover = ({
+  placement,
+  isVisible,
+}: {
+  placement: PopperCore.Placement;
+  isVisible: boolean;
+}): React.ReactElement => (
+  <div style={{ minHeight: '400px' }}>
+    <PopoverComponent
+      placement={placement}
+      isVisible={isVisible}
+      triggerRenderer={() => (
+        <div>
+          <Button icon={<Icon source={DropDown}></Icon>} iconPosition={'right'}>
+            Open Popover
+          </Button>
+        </div>
+      )}
+      modifiers={{
+        preventOverflow: {
+          enabled: true,
+        },
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          padding: '12px',
+          width: '308px',
+          height: '308px',
+        }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            border: '1px dashed var(--border-default)',
+            backgroundColor: 'var(--surface-basic-default)',
+            width: '100%',
+            height: '100%',
+            borderRadius: '4px',
+          }}
+        >
+          Popover content
+        </div>
+      </div>
+    </PopoverComponent>
+  </div>
+);
+
+Popover.args = {
+  placement: 'bottom-start',
+  isVisible: true,
+};
+
+export const Actions = ({
+  placement,
+  isVisible,
+}: {
+  placement: PopperCore.Placement;
+  isVisible: boolean;
+}): React.ReactElement => (
+  <div style={{ minHeight: '200px' }}>
+    <PopoverComponent
+      placement={placement}
+      isVisible={isVisible}
+      triggerRenderer={() => (
+        <div>
+          <Button icon={<Icon source={DropDown}></Icon>} iconPosition={'right'}>
+            Actions
+          </Button>
+        </div>
+      )}
+      modifiers={{
+        preventOverflow: {
+          enabled: true,
+        },
+      }}
+    >
+      <div
+        style={{
+          minWidth: '200px',
+        }}
+      >
+        <OpenChat />
+        <CreateTicket />
+        <SendTranscript />
+        <BanCustomer />
+      </div>
+    </PopoverComponent>
+  </div>
+);
+
+Actions.args = {
+  placement: 'bottom-start',
+  isVisible: true,
+};
+
+export default {
+  title: 'Components/Popover',
+  component: Popover,
+  argTypes: {
+    placement: {
+      options: PopperCore.placements,
+      control: {
+        type: 'select',
+        labels: PopperCore.placements,
+      },
+    },
+  },
+} as ComponentMeta<typeof Popover>;

package/src/components/Popover/Popover.tsx

@@ -0,0 +1,124 @@
+import * as React from 'react';
+import { usePopper } from 'react-popper';
+import * as PopperCore from '@popperjs/core';
+import cx from 'clsx';
+
+import cssStyles from './Popover.module.scss';
+
+type PopoverModifiers = {
+  [key: string]: Partial<PopperCore.StrictModifiers>;
+};
+export interface IPopoverProps {
+  children?: React.ReactNode;
+  className?: string;
+  modifiers?: PopoverModifiers;
+  placement?: PopperCore.Placement;
+  isVisible?: boolean;
+  triggerRenderer: () => React.ReactNode;
+}
+
+const buildPopperModifiers = (modifiers: PopoverModifiers) => {
+  const { offset, flip, preventOverflow } = modifiers;
+
+  const calculatedOffset = [
+    {
+      name: 'offset',
+      options: {
+        offset: [0, 4],
+        ...(offset?.options || {}),
+      },
+    },
+  ];
+
+  const calculateFlip = [
+    {
+      name: 'flip',
+      options: {
+        ...(flip?.options || {}),
+      },
+    },
+  ];
+
+  const calculatePreventOverflow = [
+    {
+      name: 'preventOverlow',
+      options: {
+        rootBoundary: 'viewport',
+        ...(preventOverflow || {}),
+      },
+    },
+  ];
+
+  return [...calculatedOffset, ...calculateFlip, ...calculatePreventOverflow];
+};
+
+export const Popover: React.FC<IPopoverProps> = (props) => {
+  const {
+    triggerRenderer,
+    children,
+    className,
+    placement,
+    isVisible = false,
+  } = props;
+
+  const rendererRef = React.useRef<HTMLDivElement | null>(null);
+  const popperRef = React.useRef<HTMLDivElement | null>(null);
+
+  const [visible, setVisibility] = React.useState(false);
+
+  React.useEffect(() => {
+    setVisibility(isVisible);
+  }, [isVisible]);
+
+  function handleDocumentClick(event: MouseEvent) {
+    if (popperRef.current?.contains(event.target as Node)) {
+      return;
+    } else if (rendererRef.current?.contains(event.target as Node)) {
+      setVisibility((prevVisible) => !prevVisible);
+    } else {
+      setVisibility(false);
+    }
+  }
+
+  const handleHideOnEscape = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      setVisibility(false);
+    }
+  };
+
+  React.useEffect(() => {
+    document.addEventListener('keydown', handleHideOnEscape);
+    document.addEventListener('mousedown', handleDocumentClick);
+    return () => {
+      document.removeEventListener('keydown', handleHideOnEscape);
+      document.removeEventListener('mousedown', handleDocumentClick);
+    };
+  }, []);
+
+  const { styles, attributes } = usePopper(
+    rendererRef.current,
+    popperRef.current,
+    {
+      modifiers: props.modifiers ? buildPopperModifiers(props.modifiers) : [],
+      placement: placement,
+    }
+  );
+
+  const mergedClassNames = cx(cssStyles['popover'], className, {
+    [cssStyles['popover--visible']]: visible,
+  });
+
+  return (
+    <>
+      <div ref={rendererRef}>{triggerRenderer()}</div>
+      <div
+        ref={popperRef}
+        className={mergedClassNames}
+        style={styles.popper}
+        {...attributes.popper}
+      >
+        {children}
+      </div>
+    </>
+  );
+};

package/src/components/Popover/index.ts

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

package/src/components/Progress/ProgressBar.module.scss

@@ -0,0 +1,48 @@
+.progress-bar {
+  background-color: var(--color-action-disabled);
+  border-radius: 100px;
+  display: inline-block;
+  height: 4px;
+  position: relative;
+  width: 100%;
+
+  &--small {
+    height: 3px;
+  }
+
+  &--medium {
+    height: 4px;
+  }
+
+  &--large {
+    height: 6px;
+  }
+
+  &--error {
+    background-color: var(--color-negative-disabled);
+  }
+
+  &--success {
+    background-color: var(--color-positive-disabled);
+  }
+
+  &--normal {
+    background-color: var(--color-action-disabled);
+  }
+
+  &__indicator--success {
+    background-color: var(--color-positive-default);
+    border-radius: 100px;
+    height: 100%;
+    position: relative;
+    transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
+  }
+
+  &__indicator--normal {
+    background-color: var(--color-action-default);
+    border-radius: 100px;
+    height: 100%;
+    position: relative;
+    transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
+  }
+}