@true-engineering/true-react-common-ui-kit 1.0.1

package/src/components/TextArea/TextArea.styles.ts

@@ -0,0 +1,153 @@
+import { ComponentStyles } from '../../types';
+
+const PADDING_X = 12;
+
+export const styles = {
+  root: {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+  },
+
+  wrapper: {
+    display: 'flex',
+    position: 'relative',
+    width: '100%',
+    flexGrow: 1,
+    boxSizing: 'border-box',
+    transition: '0.25s ease-in-out',
+    transitionProperty: 'border-color',
+    backgroundColor: 'white',
+    border: ['solid', 1, 'lightgray'],
+  },
+
+  textarea: {
+    width: '100%',
+    height: '100%',
+    outline: 'none',
+    boxSizing: 'border-box',
+    outlineStyle: 'none',
+    fontFamily: 'inherit',
+    fontSize: 16,
+    padding: [14, PADDING_X, 8],
+    transition: '0.25s ease-in-out',
+    transitionProperty: 'background-color',
+    border: 'none',
+    resize: 'none',
+    overflow: 'auto',
+
+    '&::placeholder': {
+      opacity: 1,
+    },
+
+    MozAppearance: 'textfield',
+    '&::-webkit-inner-spin-button,&::-webkit-outer-spin-button': {
+      WebkitAppearance: 'none',
+      margin: 0,
+    },
+  },
+
+  focused: {
+    position: 'relative',
+    zIndex: 1,
+  },
+
+  withFloatingLabel: {
+    paddingTop: 24,
+  },
+
+  floating: {},
+
+  activeLabel: {
+    display: 'none',
+
+    '&$floating': {
+      display: 'block',
+      transform: 'scale(0.75) translateY(-120%)',
+    },
+  },
+
+  required: {
+    '&:before': {
+      content: '""',
+      position: 'absolute',
+      left: -12,
+      top: 20,
+      width: 6,
+      height: 6,
+      borderRadius: '50%',
+
+      backgroundColor: 'red',
+    },
+  },
+
+  disabled: {},
+
+  label: {
+    position: 'absolute',
+    pointerEvents: 'none',
+    left: PADDING_X,
+    top: PADDING_X * 2,
+    transformOrigin: 'top left',
+    transform: 'translateY(-50%)',
+    transition: '0.25s ease-in-out',
+    transitionProperty: 'transform, color',
+    fontSize: 16,
+  },
+
+  invalid: {
+    borderColor: 'red',
+  },
+
+  invalidLabel: {
+    color: 'red',
+  },
+
+  error: {
+    fontSize: 12,
+    paddingTop: 4,
+    paddingLeft: 13,
+    color: 'red',
+  },
+
+  requiredLabel: {
+    '&:after': {
+      content: '""',
+      position: 'absolute',
+      right: -8,
+      top: 4,
+      transform: 'translate(0, -50%)',
+      width: 6,
+      height: 6,
+      borderRadius: '50%',
+      backgroundColor: 'red',
+    },
+  },
+
+  symbolsCount: {
+    display: 'block',
+    textAlign: 'right',
+    marginTop: 4,
+    fontSize: 12,
+    marginLeft: 'auto',
+    paddingLeft: 32,
+    whiteSpace: 'nowrap',
+  },
+
+  symbolsCountError: {
+    color: 'red',
+  },
+
+  footer: {
+    display: 'flex',
+  },
+
+  info: {
+    fontSize: 12,
+    paddingTop: 4,
+    paddingLeft: 13,
+  },
+};
+
+export type TextAreaStyles = ComponentStyles<typeof styles>;

package/src/components/TextArea/TextArea.tsx

@@ -0,0 +1,178 @@
+import React, { useRef, useState, FC, useEffect } from 'react';
+import clsx from 'clsx';
+
+import { useTheme } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { addDataAttributes, trimStringToMaxLength } from '../../helpers';
+
+import { styles, TextAreaStyles } from './TextArea.styles';
+
+export interface ITextAreaProps extends ICommonProps {
+  tweakStyles?: TextAreaStyles;
+  value?: string;
+  onChange: (
+    value: string,
+    event?: React.FormEvent<HTMLTextAreaElement>,
+  ) => void;
+  onFocus?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
+  onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
+  onPaste?: (event: React.ClipboardEvent<HTMLTextAreaElement>) => void;
+  label?: string;
+  placeholder?: string;
+  isDisabled?: boolean;
+  hasFloatingLabel?: boolean;
+  isInvalid?: boolean;
+  isActive?: boolean;
+  infoMessage?: string;
+  errorMessage?: string;
+  isRequired?: boolean;
+  name?: string;
+  hasRequiredLabel?: boolean;
+  shouldFocusOnMount?: boolean;
+  hasCounter?: boolean;
+  shouldTrimAfterMaxLength?: boolean;
+  maxLength?: number;
+  rows?: number;
+  testId?: string;
+}
+
+const DEFAULT_VALUE = '';
+
+export const TextArea: FC<ITextAreaProps> = ({
+  value = DEFAULT_VALUE,
+  onChange,
+  onPaste,
+  onFocus,
+  onBlur,
+  label,
+  placeholder,
+  isDisabled,
+  hasFloatingLabel = true,
+  isInvalid = false,
+  isActive = false,
+  infoMessage,
+  errorMessage,
+  isRequired,
+  name,
+  hasRequiredLabel,
+  shouldFocusOnMount,
+  hasCounter = true,
+  shouldTrimAfterMaxLength = false,
+  maxLength,
+  rows,
+  testId,
+  data,
+  tweakStyles,
+}) => {
+  const { classes } = useTheme('TextArea', styles, tweakStyles);
+  const [isFocused, setFocused] = useState(false);
+  const ref = useRef<HTMLTextAreaElement>(null);
+
+  const handleOnChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const newValue = event.currentTarget.value;
+    onChange(
+      shouldTrimAfterMaxLength && maxLength !== undefined
+        ? trimStringToMaxLength(newValue, maxLength)
+        : newValue,
+      event,
+    );
+  };
+
+  const handleOnFocus = (event: React.FocusEvent<HTMLTextAreaElement>) => {
+    setFocused(true);
+    if (onFocus !== undefined) {
+      onFocus(event);
+    }
+  };
+
+  const handleOnBlur = (event: React.FocusEvent<HTMLTextAreaElement>) => {
+    setFocused(false);
+    if (onBlur !== undefined) {
+      onBlur(event);
+    }
+  };
+
+  const hasFocus = isFocused || isActive;
+  const hasValue = value !== undefined && value !== '';
+  const hasLabel = label !== undefined && label !== '';
+  const hasPlaceholder =
+    (!hasLabel || hasFocus) && placeholder !== undefined && placeholder !== '';
+
+  const props = {
+    className: clsx(
+      classes.textarea,
+      hasFloatingLabel && hasLabel && classes.withFloatingLabel,
+    ),
+    onFocus: handleOnFocus,
+    onBlur: handleOnBlur,
+    onChange: handleOnChange,
+    value,
+    onPaste,
+    disabled: isDisabled,
+    placeholder: hasPlaceholder ? placeholder : undefined,
+    name,
+    autoFocus: shouldFocusOnMount,
+    'data-testid': testId,
+    rows,
+  };
+
+  useEffect(() => {
+    const { current: textarea } = ref;
+    if (textarea === null) {
+      return;
+    }
+    // Нужно для того, чтобы TextArea уменьшалась при стирании значения.
+    textarea.style.height = 'auto';
+    textarea.style.height = `${textarea.scrollHeight}px`;
+  }, [value]);
+
+  const hasInfoMessage = infoMessage !== undefined && infoMessage !== '';
+  const hasErrorMessage = errorMessage !== undefined && errorMessage !== '';
+
+  return (
+    <div className={classes.root} {...addDataAttributes(data)}>
+      <div
+        className={clsx(classes.wrapper, {
+          [classes.required]: isRequired && !hasRequiredLabel,
+          [classes.invalid]: isInvalid,
+          [classes.focused]: hasFocus,
+          [classes.disabled]: isDisabled,
+        })}
+      >
+        {label && (
+          <span
+            className={clsx(classes.label, {
+              [classes.invalidLabel]: isInvalid,
+              [classes.requiredLabel]: hasRequiredLabel && !isRequired,
+              [classes.activeLabel]: hasFocus || hasValue,
+              [classes.floating]: hasFloatingLabel,
+            })}
+          >
+            {label}
+          </span>
+        )}
+        <textarea ref={ref} {...props} />
+      </div>
+
+      <div className={classes.footer}>
+        {hasInfoMessage && <div className={classes.info}>{infoMessage}</div>}
+        {!hasInfoMessage && hasErrorMessage && (
+          <div className={classes.error}>{errorMessage}</div>
+        )}
+        {hasCounter && maxLength !== undefined && (
+          <span
+            className={clsx(
+              classes.symbolsCount,
+              value.length > maxLength && classes.symbolsCountError,
+            )}
+          >
+            {value.length} / {maxLength}
+          </span>
+        )}
+      </div>
+      {hasInfoMessage && hasErrorMessage && (
+        <div className={classes.error}>{errorMessage}</div>
+      )}
+    </div>
+  );
+};

package/src/components/TextArea/index.ts

@@ -0,0 +1,2 @@
+export * from './TextArea';
+export type { TextAreaStyles } from './TextArea.styles';

package/src/components/TextWithInfo/TextWithInfo.stories.tsx

@@ -0,0 +1,53 @@
+import { ComponentStory } from '@storybook/react';
+import { FC, useState } from 'react';
+import { ITextWithInfoProps, TextWithInfo } from './TextWithInfo';
+
+interface ITextWithInfoWithCustomProps extends ITextWithInfoProps {
+  infoTooltip: string;
+  link: string;
+}
+
+const TextWithInfoWithCustomProps: FC<ITextWithInfoWithCustomProps> = ({
+  infoTooltip,
+  link,
+  ...args
+}) => {
+  const [isSelected, setIsSelected] = useState(false);
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 600,
+        height: 400,
+      }}
+    >
+      <TextWithInfo
+        {...args}
+        info={{ infoTooltip, link }}
+        isSelected={isSelected}
+        onClick={() => setIsSelected(true)}
+      />
+    </div>
+  );
+};
+
+export default {
+  title: 'TextWithInfo',
+  component: TextWithInfoWithCustomProps,
+};
+
+const Template: ComponentStory<typeof TextWithInfoWithCustomProps> = (args) => (
+  <TextWithInfoWithCustomProps {...args} />
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  text: 'Обычная перевозка',
+  textTooltip: 'Tултип для самой обычной перевозки',
+  infoTooltip: 'Читать подробную информацию',
+  link: 'https://ya.ru/',
+};

package/src/components/TextWithInfo/TextWithInfo.styles.ts

@@ -0,0 +1,60 @@
+import { colors } from '../../theme';
+import { ComponentStyles } from '../../types';
+
+export const styles = {
+  root: {
+    display: 'inline-block',
+    height: 40,
+    padding: [0, 18],
+    borderRadius: 20,
+    boxSizing: 'border-box',
+    color: colors.FONT_MEDIUM,
+
+    '&:hover': {
+      backgroundColor: colors.GREY_FOCUS,
+    },
+  },
+
+  container: {
+    display: 'flex',
+    height: '100%',
+    alignItems: 'center',
+  },
+
+  selected: {
+    backgroundColor: colors.GREY_FOCUS,
+  },
+
+  text: {
+    cursor: 'pointer',
+    fontSize: 16,
+  },
+
+  info: {
+    width: 20,
+    marginLeft: 4,
+    color: colors.FONT_DISABLED,
+    cursor: 'pointer',
+    borderRadius: '50%',
+
+    '&:link': {
+      color: colors.FONT_DISABLED,
+    },
+
+    '&:hover': {
+      color: colors.CLASSIC_WHITE,
+      backgroundColor: colors.FONT_DISABLED,
+    },
+
+    '&:visited': {
+      color: colors.FONT_DISABLED,
+
+      '&:hover': {
+        color: colors.CLASSIC_WHITE,
+        backgroundColor: colors.FONT_DISABLED,
+      },
+    },
+  },
+};
+
+export type TextWithInfoStyles = ComponentStyles<typeof styles>;

package/src/components/TextWithInfo/TextWithInfo.tsx

@@ -0,0 +1,67 @@
+import { FC } from 'react';
+import clsx from 'clsx';
+
+import { Icon } from '../Icon';
+import { TextWithTooltip } from '../TextWithTooltip';
+import { useTheme } from '../../hooks';
+import { addDataAttributes } from '../../helpers';
+import { ICommonProps } from '../../types';
+
+import { styles, TextWithInfoStyles } from './TextWithInfo.styles';
+
+export interface ITextWithInfoProps extends ICommonProps {
+  tweakStyles?: TextWithInfoStyles;
+  text: string;
+  isSelected?: boolean;
+  textTooltip?: string;
+  info?: {
+    infoTooltip?: string;
+    link?: string;
+  };
+  onClick(): void;
+}
+
+export const TextWithInfo: FC<ITextWithInfoProps> = ({
+  text,
+  isSelected = false,
+  info,
+  textTooltip,
+  onClick,
+  data,
+  tweakStyles,
+}) => {
+  const { classes } = useTheme('TextWithInfo', styles, tweakStyles);
+
+  return (
+    <div
+      className={clsx(classes.root, isSelected && classes.selected)}
+      {...addDataAttributes(data)}
+    >
+      <div className={classes.container}>
+        <div className={classes.text} onClick={onClick}>
+          {textTooltip !== undefined ? (
+            <TextWithTooltip tooltipText={textTooltip}>{text}</TextWithTooltip>
+          ) : (
+            text
+          )}
+        </div>
+        {info && (
+          <a
+            className={classes.info}
+            href={info.link}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {info.infoTooltip !== undefined ? (
+              <TextWithTooltip tooltipText={info.infoTooltip}>
+                <Icon type="information" />
+              </TextWithTooltip>
+            ) : (
+              <Icon type="information" />
+            )}
+          </a>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/components/TextWithInfo/index.ts

@@ -0,0 +1,2 @@
+export * from './TextWithInfo';
+export type { TextWithInfoStyles } from './TextWithInfo.styles';

package/src/components/TextWithTooltip/TextWithTooltip.stories.tsx

@@ -0,0 +1,58 @@
+import { ComponentStory } from '@storybook/react';
+import { TextWithTooltip } from './TextWithTooltip';
+
+const positions = [
+  'top',
+  'bottom',
+  'right',
+  'left',
+  'top-start',
+  'top-end',
+  'bottom-start',
+  'bottom-end',
+  'right-start',
+  'right-end',
+  'left-start',
+  'left-end',
+  'auto',
+  'auto-start',
+  'auto-end',
+];
+
+export default {
+  title: 'TextWithTooltip',
+  component: TextWithTooltip,
+  argTypes: {
+    tooltipPosition: { control: 'select', options: positions },
+    tooltipView: { control: 'inline-radio', options: ['tooltip', 'hint'] },
+    tooltipType: { control: 'inline-radio', options: ['info', 'error'] },
+    mouseEventType: { control: 'inline-radio', options: ['hover', 'click'] },
+  },
+};
+
+const Template: ComponentStory<typeof TextWithTooltip> = (args) => (
+  <div
+    style={{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: 600,
+      height: 400,
+    }}
+  >
+    <TextWithTooltip {...args} />
+  </div>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  children: 'Наведи на меня - появится тултип',
+  tooltipText: 'Текст тултипа',
+  tooltipPosition: 'top',
+  tooltipView: 'tooltip',
+  tooltipType: 'info',
+  isDisabled: false,
+  mouseEventType: 'hover',
+  shouldRenderInBody: true,
+};

package/src/components/TextWithTooltip/TextWithTooltip.styles.ts

@@ -0,0 +1,19 @@
+import { ComponentStyles } from '../../types';
+
+export const styles = {
+  root: {
+    position: 'relative',
+  },
+
+  tooltip: {
+    zIndex: 9999,
+  },
+
+  clickable: {
+    cursor: 'pointer',
+  },
+
+  tweakTooltip: {},
+};
+
+export type TextWithTooltipStyles = ComponentStyles<typeof styles>;