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

package/src/components/Tag/Tag.stories.tsx

@@ -0,0 +1,151 @@
+import * as React from 'react';
+import { ComponentMeta } from '@storybook/react';
+import * as MaterialIcons from '@livechat/design-system-icons/react/material';
+
+import { Tag as TagComponent, TagProps } from './Tag';
+
+const iterator = Object.keys(MaterialIcons);
+
+export default {
+  title: 'Components/Tag',
+  component: TagComponent,
+  argTypes: {
+    icon: {
+      options: iterator,
+      mapping: MaterialIcons,
+      control: {
+        type: 'select',
+        labels: iterator,
+      },
+    },
+  },
+} as ComponentMeta<typeof TagComponent>;
+
+export const Tag = ({ children, ...args }: TagProps): React.ReactElement => {
+  return <TagComponent {...args}>{children}</TagComponent>;
+};
+
+Tag.args = {
+  kind: 'default',
+  outline: false,
+  size: 'medium',
+  children: 'Example tag',
+  dismissible: false,
+} as TagProps;
+
+const avatar =
+  'https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=200';
+
+export const kinds = ({ children, ...args }: TagProps): React.ReactElement => {
+  return (
+    <div className="spacer" style={{ display: 'flex' }}>
+      <TagComponent {...args} kind="default">
+        {children}
+      </TagComponent>
+      <TagComponent {...args} kind="info">
+        {children}
+      </TagComponent>
+      <TagComponent {...args} kind="warning">
+        {children}
+      </TagComponent>
+      <TagComponent {...args} kind="success">
+        {children}
+      </TagComponent>
+      <TagComponent {...args} kind="error">
+        {children}
+      </TagComponent>
+    </div>
+  );
+};
+
+kinds.args = {
+  children: 'Example tag',
+};
+
+export const kindsWithOutline = ({
+  children,
+  ...args
+}: TagProps): React.ReactElement => {
+  return (
+    <div className="spacer" style={{ display: 'flex' }}>
+      <TagComponent {...args} kind="default" outline>
+        {children}
+      </TagComponent>
+      <TagComponent {...args} kind="info" outline>
+        {children}
+      </TagComponent>
+      <TagComponent {...args} kind="warning" outline>
+        {children}
+      </TagComponent>
+      <TagComponent {...args} kind="success" outline>
+        {children}
+      </TagComponent>
+      <TagComponent {...args} kind="error" outline>
+        {children}
+      </TagComponent>
+    </div>
+  );
+};
+
+kindsWithOutline.args = {
+  children: 'Example tag',
+};
+
+export const kindsWithIcon = ({
+  children,
+  ...args
+}: TagProps): React.ReactElement => {
+  return (
+    <div className="spacer" style={{ display: 'flex' }}>
+      <TagComponent {...args} kind="default">
+        {children}
+      </TagComponent>
+      <TagComponent {...args} kind="info">
+        {children}
+      </TagComponent>
+      <TagComponent {...args} kind="warning">
+        {children}
+      </TagComponent>
+      <TagComponent {...args} kind="success">
+        {children}
+      </TagComponent>
+      <TagComponent {...args} kind="error">
+        {children}
+      </TagComponent>
+    </div>
+  );
+};
+
+kindsWithIcon.args = {
+  children: 'Example tag',
+  icon: MaterialIcons.Smiles,
+};
+
+export const kindsWithAvatar = ({
+  children,
+  ...args
+}: TagProps): React.ReactElement => {
+  return (
+    <div className="spacer" style={{ display: 'flex' }}>
+      <TagComponent {...args} kind="default" avatar={avatar}>
+        {children}
+      </TagComponent>
+      <TagComponent {...args} kind="info" avatar={avatar}>
+        {children}
+      </TagComponent>
+      <TagComponent {...args} kind="warning" avatar={avatar}>
+        {children}
+      </TagComponent>
+      <TagComponent {...args} kind="success" avatar={avatar}>
+        {children}
+      </TagComponent>
+      <TagComponent {...args} kind="error" avatar={avatar}>
+        {children}
+      </TagComponent>
+    </div>
+  );
+};
+
+kindsWithAvatar.args = {
+  children: 'Example tag',
+};

package/src/components/Tag/Tag.tsx

@@ -0,0 +1,129 @@
+import * as React from 'react';
+import { Close } from '@livechat/design-system-icons/react/material';
+import cx from 'clsx';
+import { getContrast } from 'polished';
+
+import { Text } from '../Typography';
+import { Icon, IconSizeName } from '../Icon';
+
+import styles from './Tag.module.scss';
+
+const baseClass = 'tag';
+
+export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
+  kind?: 'default' | 'info' | 'warning' | 'success' | 'error';
+  size?: 'medium' | 'large';
+  customColor?: string;
+  dismissible?: boolean;
+  outline?: boolean;
+  onRemove?(): void;
+  icon?: React.FC<React.SVGProps<SVGSVGElement>> | string;
+  avatar?: string;
+}
+
+const getCustomTextClass = (customColor?: string) => {
+  if (!customColor) {
+    return '';
+  }
+  return getContrast(customColor, '#FFFFFF') > 4.5
+    ? 'text-white'
+    : 'text-black';
+};
+
+export const Tag: React.FC<TagProps> = ({
+  className = '',
+  children,
+  dismissible = false,
+  size = 'medium',
+  kind = 'default',
+  onRemove,
+  outline = false,
+  icon,
+  avatar,
+  customColor,
+  ...restProps
+}) => {
+  const mergedClassNames = cx(
+    styles[baseClass],
+    className,
+    styles[`${baseClass}--${size}`],
+    styles[`${baseClass}--${kind}`],
+    {
+      [styles[`${baseClass}--dismissible`]]: dismissible,
+      [styles[`${baseClass}--outline`]]: outline,
+      [styles[`${baseClass}--with-icon`]]: !!icon || !!avatar,
+      [styles[`${baseClass}--${getCustomTextClass(customColor)}`]]:
+        !!customColor,
+    }
+  );
+
+  const getCustomColorStyles = () => {
+    if (!customColor) {
+      return {};
+    }
+    if (outline) {
+      return {
+        style: {
+          backgroundColor: 'transparent',
+          color: customColor,
+          borderColor: customColor,
+        },
+      };
+    }
+    return { style: { backgroundColor: customColor } };
+  };
+
+  const getIconCustomColor = () => {
+    if (!customColor) {
+      return undefined;
+    }
+    if (outline) {
+      return customColor;
+    }
+    return getContrast(customColor, '#FFFFFF') > 4.5 ? '#FFFFFF' : '#000000';
+  };
+
+  return (
+    <Text
+      className={mergedClassNames}
+      {...restProps}
+      {...getCustomColorStyles()}
+      as="div"
+      size="md"
+    >
+      {avatar && (
+        <img
+          className={styles[`${baseClass}__avatar`]}
+          src={avatar}
+          alt="tag-avatar"
+          data-testid="lc-tag-avatar"
+        />
+      )}{' '}
+      {/*TODO replace with Avatar component*/}
+      {icon && !avatar && (
+        <Icon
+          data-testid="lc-tag-icon"
+          className={styles[`${baseClass}__icon`]}
+          source={icon}
+          size={IconSizeName.Small}
+          customColor={getIconCustomColor()}
+        />
+      )}
+      {children}
+      {dismissible && (
+        <button
+          title="Remove"
+          onClick={onRemove}
+          type="button"
+          className={styles[`${baseClass}__remove`]}
+        >
+          <Icon
+            source={Close}
+            size={IconSizeName.Medium}
+            customColor={getIconCustomColor()}
+          />
+        </button>
+      )}
+    </Text>
+  );
+};

package/src/components/Tag/index.ts

@@ -0,0 +1 @@
+export { Tag } from './Tag';

package/src/components/TagInput/EditableTag.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { EditableTagContent } from './EditableTagContent';
+import { Tag } from '../Tag';
+
+import styles from './TagInput.module.scss';
+
+const baseClass = 'tag-input__tag';
+
+export interface EditableTagProps extends React.HTMLAttributes<HTMLDivElement> {
+  inputRef: React.RefObject<HTMLInputElement>;
+  index: number;
+  update: (idx: number, value: string) => void;
+  remove: (idx: number) => void;
+  validator?: (val: string) => boolean;
+  children: string;
+  size: 'medium' | 'large';
+}
+
+export const EditableTag: React.FC<EditableTagProps> = ({
+  children,
+  index,
+  remove,
+  validator,
+  inputRef,
+  update,
+  size,
+}) => {
+  const isValid = React.useMemo(() => {
+    return validator !== undefined ? validator(children) : true;
+  }, [children, validator]);
+
+  const innerEditableRef = React.useRef<HTMLInputElement>(null);
+
+  const removeTag = () => remove(index);
+
+  return (
+    <Tag
+      kind={isValid ? 'default' : 'error'}
+      dismissible
+      size={size}
+      onRemove={removeTag}
+    >
+      <EditableTagContent
+        value={children}
+        inputRef={inputRef}
+        innerEditableRef={innerEditableRef}
+        className={styles[`${baseClass}__content`]}
+        change={(newValue) => update(index, newValue)}
+        remove={removeTag}
+        validator={validator}
+      />
+    </Tag>
+  );
+};

package/src/components/TagInput/EditableTagContent.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { KeyCodes } from '../../utils/keyCodes';
+import escape from 'lodash.escape';
+
+export interface EditableTagContentProps {
+  value: string;
+  className?: string;
+  innerEditableRef: React.RefObject<HTMLDivElement>;
+  inputRef: React.RefObject<HTMLInputElement>;
+  change: (value: string) => void;
+  remove: () => void;
+  validator?: (value: string) => boolean;
+}
+
+export const EditableTagContent: React.FC<EditableTagContentProps> = ({
+  className = '',
+  innerEditableRef,
+  inputRef,
+  change,
+  remove,
+  value,
+}) => {
+  const [removed, setRemoved] = React.useState(false);
+
+  const getRef = () => innerEditableRef.current;
+
+  const getValue = () => {
+    const ref = getRef();
+    return ref ? ref.innerText : '';
+  };
+
+  const focusInputRef = () => {
+    if (inputRef && inputRef.current) {
+      inputRef.current.focus();
+    }
+  };
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === KeyCodes.enter) {
+      e.preventDefault();
+      focusInputRef();
+      return;
+    }
+
+    if (e.key === KeyCodes.backspace && getValue() === '') {
+      setRemoved(true);
+      remove();
+      focusInputRef();
+    }
+  };
+
+  const onBlur = () => {
+    const ref = getRef();
+    if (removed || !ref) {
+      return;
+    }
+    if (ref.innerText === '') {
+      remove();
+      return;
+    }
+    change(ref.innerText);
+  };
+
+  const onPaste = (e: React.ClipboardEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    const text = e.clipboardData.getData('text/plain');
+    document.execCommand('insertHTML', false, escape(text));
+  };
+
+  return (
+    <div
+      ref={innerEditableRef}
+      className={className}
+      contentEditable={true}
+      onPaste={onPaste}
+      onBlur={onBlur}
+      onKeyDown={onKeyDown}
+      dangerouslySetInnerHTML={{ __html: escape(value) }}
+    />
+  );
+};

package/src/components/TagInput/EmailTagInput.tsx

@@ -0,0 +1,31 @@
+import { TagInputProps, TagInput } from './TagInput';
+import * as React from 'react';
+
+export type EmailTagInputProps = Omit<TagInputProps, 'validator'>;
+
+export const emailRegex =
+  /^(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)])$/i; // eslint-disable-line no-control-regex
+
+const defaultPlaceholder = 'name@company.com';
+const emailValidator = (value: string) => {
+  return emailRegex.test(value);
+};
+
+export const EmailTagInput: React.FC<EmailTagInputProps> = ({
+  tags,
+  onChange,
+  error,
+  placeholder = defaultPlaceholder,
+  size,
+}) => {
+  return (
+    <TagInput
+      tags={tags}
+      error={error}
+      onChange={onChange}
+      placeholder={placeholder}
+      validator={emailValidator}
+      size={size}
+    />
+  );
+};

package/src/components/TagInput/TagInput.module.scss

@@ -0,0 +1,81 @@
+.tag-input {
+  align-items: center;
+  background-clip: padding-box;
+  border: 1px solid var(--border-default);
+  border-radius: 4px;
+  box-sizing: border-box;
+  color: var(--content-default);
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 15px;
+  overflow-y: auto;
+  padding: 4px;
+  transition: border 0.25s ease-in-out;
+  width: 100%;
+  will-change: border-color;
+
+  &::placeholder {
+    color: var(--content-disabled);
+  }
+
+  &:hover {
+    border-color: var(--border-hover);
+    outline: 0;
+  }
+
+  &:focus-within {
+    border-color: var(--color-action-default);
+    outline: 0;
+  }
+
+  &--error,
+  &--error:focus-within {
+    border-color: var(--color-negative-default);
+  }
+
+  &:disabled {
+    color: var(--content-disabled);
+    cursor: not-allowed;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  > * {
+    margin: 2px;
+  }
+
+  @at-root #{&}__input {
+    appearance: none;
+    background: transparent;
+    border-style: none;
+    box-shadow: none;
+    color: var(--content-default);
+    flex-grow: 1;
+    font-size: 15px;
+    margin: 0 4px;
+    outline: 0;
+    padding: 0 0 0 4px;
+    width: auto;
+
+    &--medium {
+      line-height: 28px;
+    }
+
+    &--large {
+      line-height: 36px;
+    }
+
+    &:focus {
+      border-style: none;
+    }
+  }
+
+  @at-root #{&}__tag__content {
+    border-style: none;
+    outline: 0;
+    padding: 0;
+    white-space: nowrap;
+  }
+}

package/src/components/TagInput/TagInput.spec.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { render, fireEvent, userEvent, vi } from 'test-utils';
+import noop from '../../utils/noop';
+
+import { TagInput } from './TagInput';
+import styles from './TagInput.module.scss';
+
+const baseClass = 'tag-input';
+
+describe('<TagInput> component', () => {
+  it('should have error class when error occurs', () => {
+    const { container } = render(
+      <TagInput onChange={noop} error={'test error'} />
+    );
+    expect(container.firstChild).toHaveClass(styles[`${baseClass}--error`]);
+  });
+
+  it('should call onChange method on enter press', () => {
+    const onChange = vi.fn();
+    const { getByRole } = render(<TagInput onChange={onChange} />);
+    const tagText = 'tagText';
+    const input = getByRole('textbox');
+    userEvent.type(input, `${tagText}{enter}`);
+    expect(onChange).toBeCalledWith([tagText]);
+  });
+
+  it('should call onChange method on separator provided', () => {
+    const onChange = vi.fn();
+    const { getByRole } = render(<TagInput onChange={onChange} />);
+    const tagText = 'tagText';
+    const tagSeparator = ';';
+    const input = getByRole('textbox');
+    userEvent.type(input, `${tagText}${tagSeparator}`);
+    expect(onChange).toBeCalledWith([tagText]);
+  });
+
+  it('should not call onChange method on enter press when tag separator is not provided', () => {
+    const onChange = vi.fn();
+    const { getByRole } = render(<TagInput onChange={onChange} />);
+    const tagText = 'tagText';
+    const input = getByRole('textbox');
+    userEvent.type(input, tagText);
+    expect(onChange).not.toBeCalled();
+  });
+
+  it('should call onChange method on text paste', () => {
+    const onChange = vi.fn();
+    const { getByRole } = render(<TagInput onChange={onChange} />);
+    const pastedText = 'tag1;tag2,tag3 tag4';
+    const input = getByRole('textbox');
+    fireEvent.paste(input, {
+      clipboardData: {
+        getData: () => pastedText,
+      },
+    });
+    expect(onChange).toBeCalledWith(['tag1', 'tag2', 'tag3', 'tag4']);
+  });
+});

package/src/components/TagInput/TagInput.stories.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { ComponentMeta } from '@storybook/react';
+
+import {
+  TagInput as TagInputComponent,
+  TagInputProps,
+  EmailTagInput as EmailTagInputComponent,
+  EmailTagInputProps,
+} from './index';
+
+export default {
+  title: 'Forms (WIP)/Tag Input',
+  component: TagInputComponent,
+  argTypes: {
+    tags: {
+      control: {
+        disable: true,
+      },
+    },
+  },
+} as ComponentMeta<typeof TagInputComponent>;
+
+export const TagInput = ({ ...args }: TagInputProps): React.ReactElement => {
+  const [tags, setTags] = React.useState(['tag1', 'tag2']);
+  return (
+    <div>
+      <TagInputComponent {...args} tags={tags} onChange={setTags} />
+    </div>
+  );
+};
+
+TagInput.args = {
+  placeholder: 'Tag input placeholder',
+} as TagInputProps;
+
+export const EmailTagInput = ({
+  ...args
+}: EmailTagInputProps): React.ReactElement => {
+  const [tags, setTags] = React.useState(['one@test.com', 'two@test.com']);
+  return (
+    <div>
+      <EmailTagInputComponent {...args} tags={tags} onChange={setTags} />
+    </div>
+  );
+};
+
+EmailTagInput.args = {
+  placeholder: 'name@company.com',
+} as TagInputProps;