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

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

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

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

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

package/src/components/TagInput/TagInput.tsx

@@ -1,133 +0,0 @@
-import * as React from 'react';
-import cx from 'clsx';
-import { EditableTag } from './EditableTag';
-import { KeyCodes } from '../../utils/keyCodes';
-import { FieldError } from '../FieldError';
-
-import styles from './TagInput.module.scss';
-
-const baseClass = 'tag-input';
-
-const tagSeparatorKeys = [
-  KeyCodes.enter,
-  KeyCodes.spacebar,
-  KeyCodes.tab,
-  KeyCodes.semicolon,
-  KeyCodes.comma,
-];
-const tagRemoveKeys = [KeyCodes.backspace, KeyCodes.delete];
-
-type Tags = string[];
-
-export interface TagInputProps {
-  error?: string;
-  tags?: Tags;
-  onChange: (tags: Tags) => void;
-  placeholder?: string;
-  validator?: (val: string) => boolean;
-  size?: 'medium' | 'large';
-}
-
-export const TagInput: React.FC<TagInputProps> = ({
-  tags,
-  onChange,
-  validator,
-  error,
-  placeholder,
-  size = 'medium',
-}) => {
-  const mergedClassNames = cx(styles[baseClass], {
-    [styles[`${baseClass}--error`]]: error,
-  });
-  const inputClassNames = cx(
-    styles[`${baseClass}__input`],
-    styles[`${baseClass}__input--${size}`]
-  );
-
-  const [inputValue, setInputValue] = React.useState('');
-  const inputRef = React.useRef<HTMLInputElement>(null);
-
-  const addTag = (value: string) => {
-    onChange([...(tags || []), value]);
-    setInputValue('');
-  };
-
-  const removeTag = (idx: number) => {
-    const newTags = [...(tags || [])];
-    newTags.splice(idx, 1);
-    onChange(newTags);
-  };
-
-  const onInputChange = (e: React.ChangeEvent<HTMLInputElement>) =>
-    setInputValue(e.target.value);
-
-  const onInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (tagSeparatorKeys.includes(e.key)) {
-      e.preventDefault();
-
-      if (inputValue === '') {
-        return;
-      }
-
-      addTag(inputValue);
-    } else if (tagRemoveKeys.includes(e.key)) {
-      if (inputValue !== '' || !tags?.length) {
-        return;
-      }
-
-      removeTag(tags.length - 1);
-    }
-  };
-
-  const updateTag = (i: number, value: string) => {
-    const newTags = [...(tags || [])];
-    const numOccurrencesOfValue = newTags.reduce(
-      (prev, currentValue, index) =>
-        prev + (currentValue === value && index !== i ? 1 : 0),
-      0
-    );
-    if (numOccurrencesOfValue > 0) {
-      newTags.splice(i, 1);
-    } else {
-      newTags[i] = value;
-    }
-    onChange(newTags);
-  };
-
-  const onPaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
-    e.preventDefault();
-    const text = e.clipboardData.getData('text/plain');
-    const newTags = text.split(/[\s,;\n]+/);
-    onChange([...(tags || []), ...newTags]);
-  };
-
-  return (
-    <>
-      <div className={mergedClassNames}>
-        {tags?.map((tag, index) => (
-          <EditableTag
-            index={index}
-            key={`${index}${tag}`}
-            update={updateTag}
-            remove={removeTag}
-            inputRef={inputRef}
-            validator={validator}
-            size={size}
-          >
-            {tag}
-          </EditableTag>
-        ))}
-        <input
-          ref={inputRef}
-          className={inputClassNames}
-          placeholder={placeholder}
-          value={inputValue}
-          onChange={onInputChange}
-          onKeyDown={onInputKeyDown}
-          onPaste={onPaste}
-        />
-      </div>
-      {error && <FieldError>{error}</FieldError>}
-    </>
-  );
-};

package/src/components/TextField/TextField.module.scss

@@ -1,90 +0,0 @@
-.text-field {
-  margin-bottom: 20px;
-
-  &--inline {
-    display: flex;
-    flex-direction: column;
-  }
-
-  &__wrapper--inline {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-  }
-
-  &__label {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    margin-bottom: 4px;
-
-    label {
-      margin-bottom: 0;
-    }
-
-    &--inline {
-      align-items: center;
-      height: 32px;
-      justify-content: center;
-      margin-bottom: 0;
-      margin-right: 10px;
-    }
-
-    &--no-text {
-      justify-content: flex-end;
-      margin-right: 0;
-    }
-  }
-
-  &__label-wrapper {
-    display: flex;
-    flex-grow: 1;
-  }
-
-  &__label-adornment {
-    align-items: center;
-    align-self: flex-end;
-    display: flex;
-    flex-shrink: 0;
-    height: 20px;
-    justify-content: flex-end;
-    line-height: 20px;
-    margin-left: 4px;
-    overflow: hidden;
-    width: 20px;
-  }
-
-  &__label-right-node {
-    align-self: flex-end;
-    color: var(--content-default);
-    display: flex;
-    flex-shrink: 0;
-    font-size: 14px;
-    justify-content: flex-end;
-    line-height: 20px;
-    margin-left: 5px;
-
-    &--inline {
-      flex-grow: 1;
-      margin-bottom: 4px;
-    }
-  }
-
-  &__row-break {
-    flex-basis: 100%;
-    height: 0;
-  }
-
-  &__content {
-    flex-grow: 1;
-  }
-}
-
-.field-label {
-  color: var(--content-default);
-  display: block;
-  font-size: 14px;
-  line-height: 20px;
-  margin-bottom: 4px;
-}

package/src/components/TextField/TextField.spec.tsx

@@ -1,40 +0,0 @@
-import * as React from 'react';
-import { render } from 'test-utils';
-import { TextFieldProps, TextField } from './TextField';
-
-const renderComponent = (props: TextFieldProps) => {
-  return render(
-    <TextField {...props} className="my-css-class">
-      <input id="input-field-example" />
-    </TextField>
-  );
-};
-
-describe('<TextField> component', () => {
-  it('should allow for custom class', () => {
-    const { container } = renderComponent({});
-
-    expect(container.firstChild).toHaveClass('my-css-class');
-  });
-
-  it('should render field elements', () => {
-    const label = 'Example label text';
-    const error = 'Error text';
-    const description = <div>Description text</div>;
-    const adornment = <div>Decoration element</div>;
-    const labelRight = <div>Label right</div>;
-    const { getByText } = renderComponent({
-      labelText: label,
-      error: error,
-      description: description,
-      labelAdornment: adornment,
-      labelRightNode: labelRight,
-    });
-
-    expect(getByText(label)).toBeVisible();
-    expect(getByText(error)).toBeVisible();
-    expect(getByText('Description text')).toBeVisible();
-    expect(getByText('Decoration element')).toBeVisible();
-    expect(getByText('Label right')).toBeVisible();
-  });
-});

package/src/components/TextField/TextField.stories.tsx

@@ -1,60 +0,0 @@
-import * as React from 'react';
-import { ComponentMeta, Story } from '@storybook/react';
-
-import { TextFieldProps, TextField as TextFieldComponent } from './TextField';
-
-export default {
-  title: 'Forms (WIP)/TextField',
-  component: TextFieldComponent,
-  parameters: {
-    componentSubtitle: `
-      TextField is useful if you need to develop custom input field, 
-      but want to reuse the logic behind labels, descriptions and errors 
-      present in other form components like InputField, TextAreaField etc.
-    `,
-  },
-} as ComponentMeta<typeof TextFieldComponent>;
-
-const StoryTemplate: Story<TextFieldProps> = (args: TextFieldProps) => (
-  <div>
-    <TextFieldComponent {...args}>
-      <input style={{ height: 26 }} id="text-field-example" />
-    </TextFieldComponent>
-  </div>
-);
-
-export const TextField = StoryTemplate.bind({});
-TextField.args = {};
-
-export const TextFieldWithLabel = StoryTemplate.bind({});
-TextFieldWithLabel.args = {
-  labelText: 'Example label text',
-};
-
-export const TextFieldWithLabelInline = StoryTemplate.bind({});
-TextFieldWithLabelInline.args = {
-  labelText: 'Example label text',
-  inline: true,
-};
-
-export const TextFieldWithLabelAndLabelRightNode = StoryTemplate.bind({});
-TextFieldWithLabelAndLabelRightNode.args = {
-  labelText: 'Example label text',
-  labelRightNode: <img src="https://via.placeholder.com/100" />,
-};
-
-export const TextFieldWithLabelAdornment = StoryTemplate.bind({});
-TextFieldWithLabelAdornment.args = {
-  labelText: 'Example label text',
-  labelAdornment: <img src="https://via.placeholder.com/100" />,
-};
-
-export const TextFieldWithError = StoryTemplate.bind({});
-TextFieldWithError.args = {
-  error: 'Error text',
-};
-
-export const TextFieldWithDescription = StoryTemplate.bind({});
-TextFieldWithDescription.args = {
-  description: <div>Description text</div>,
-};

package/src/components/TextField/TextField.tsx

@@ -1,100 +0,0 @@
-import * as React from 'react';
-import cx from 'clsx';
-import { Text } from '../Typography';
-import { FieldError } from '../FieldError';
-import { FieldDescription } from '../FieldDescription';
-
-import styles from './TextField.module.scss';
-
-const baseClass = 'text-field';
-
-export interface TextFieldProps {
-  labelText?: string;
-  labelAdornment?: React.ReactNode;
-  labelFor?: string;
-  className?: string;
-  inline?: boolean;
-  error?: string;
-  description?: React.ReactNode;
-  children?: React.ReactNode;
-  labelRightNode?: React.ReactNode;
-}
-
-export const TextField: React.FC<TextFieldProps> = ({
-  inline,
-  error,
-  description,
-  labelText,
-  labelAdornment,
-  className,
-  labelFor,
-  children,
-  labelRightNode,
-}) => {
-  const mergedClassNames = cx(
-    styles[baseClass],
-    {
-      [styles[`${baseClass}--inline`]]: inline,
-    },
-    className
-  );
-
-  return (
-    <div className={mergedClassNames}>
-      {labelRightNode && inline && (
-        <React.Fragment>
-          <div
-            className={cx(
-              styles[`${baseClass}__label-right-node`],
-              styles[`${baseClass}__label-right-node--inline`]
-            )}
-          >
-            {labelRightNode}
-          </div>
-          <div className={styles[`${baseClass}__row-break`]} />
-        </React.Fragment>
-      )}
-      <div
-        className={cx(
-          styles[`${baseClass}__wrapper`],
-          inline && styles[`${baseClass}__wrapper--inline`]
-        )}
-      >
-        {(labelText || labelRightNode) && (
-          <div
-            className={cx(
-              styles[`${baseClass}__label`],
-              inline && styles[`${baseClass}__label--inline`],
-              !labelText && styles[`${baseClass}__label--no-text`]
-            )}
-          >
-            {labelText && (
-              <div className={cx(styles[`${baseClass}__label-wrapper`])}>
-                <label className="lc-field-label" htmlFor={labelFor}>
-                  <Text as="span" size="sm">
-                    {labelText}
-                  </Text>
-                </label>
-                {labelAdornment && (
-                  <div className={cx(styles[`${baseClass}__label-adornment`])}>
-                    {labelAdornment}
-                  </div>
-                )}
-              </div>
-            )}
-            {labelRightNode && !inline && (
-              <div className={cx(styles[`${baseClass}__label-right-node`])}>
-                {labelRightNode}
-              </div>
-            )}
-          </div>
-        )}
-        <div className={cx(styles[`${baseClass}__content`])}>
-          {children}
-          {error && <FieldError>{error}</FieldError>}
-          {description && <FieldDescription>{description}</FieldDescription>}
-        </div>
-      </div>
-    </div>
-  );
-};