@true-engineering/true-react-common-ui-kit 3.0.6 → 3.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "3.0.6",
+  "version": "3.1.1",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [

package/src/components/Notification/Notification.tsx

@@ -71,5 +71,3 @@ export const Notification: FC<INotificationProps> = ({
     </div>
   );
 };
-
-export default Notification;

package/src/components/Selector/Selector.stories.tsx

@@ -0,0 +1,62 @@
+import { useState } from 'react';
+import { ComponentStory } from '@storybook/react';
+import { Status } from '../Status';
+import { Selector } from './Selector';
+import { ISelectorOption } from './types';
+
+const options: Array<ISelectorOption<string>> = [
+  {
+    label: 'Label 1',
+    value: '1',
+    icon: 'eye',
+  },
+  {
+    label: 'My label 2',
+    value: '2',
+  },
+  {
+    label: (
+      <>
+        This is Label 3{' '}
+        <Status size="xs" color="teal">
+          P
+        </Status>
+      </>
+    ),
+    value: '3',
+  },
+  {
+    label: 'This is disabled',
+    value: '4',
+    isDisabled: true,
+  },
+];
+
+export default {
+  title: 'Selector',
+  component: Selector,
+};
+
+const Template: ComponentStory<typeof Selector> = (args) => {
+  const [value, setValue] = useState(options[0].value);
+  return <Selector {...args} value={value} options={options} onChange={setValue} />;
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  size: 'l',
+  iconPosition: 'left',
+  hasSameOptionsWidth: true,
+  isDisabled: false,
+  isInvalid: false,
+  isRequired: false,
+};
+
+Default.argTypes = {};
+
+Default.parameters = {
+  controls: {
+    exclude: ['options', 'value', 'testId', 'onChange'],
+  },
+};

package/src/components/Selector/Selector.styles.ts

@@ -0,0 +1,164 @@
+import { CSSProperties } from 'react';
+import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { colors, dimensions, ITweakStyles, createThemedStyles } from '../../theme';
+
+const SELECTOR_TOTAL_GAP = 4;
+const SELECTOR_BORDER_WIDTH = 1;
+export const SELECTOR_GAP = SELECTOR_TOTAL_GAP - SELECTOR_BORDER_WIDTH;
+
+export const getSelectorLineStyle = (activeElementData?: {
+  clientWidth: number;
+  offsetLeft: number;
+}): CSSProperties | undefined =>
+  isNotEmpty(activeElementData)
+    ? {
+        width: activeElementData.clientWidth - SELECTOR_GAP * 2,
+        transform: `translateX(${activeElementData.offsetLeft}px)`,
+      }
+    : undefined;
+
+export const useStyles = createThemedStyles('Selector', {
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+    listStyle: 'none',
+    position: 'relative',
+  },
+
+  disabled: {
+    cursor: 'default',
+
+    '& $optionText': {
+      color: colors.FONT_LABEL,
+    },
+  },
+
+  required: {
+    '&::before': {
+      top: '50%',
+      left: -12,
+      width: 6,
+      height: 6,
+      content: '""',
+      position: 'absolute',
+      transform: 'translate(0, -50%)',
+      borderRadius: '50%',
+      backgroundColor: colors.ORANGE_FOCUS,
+    },
+  },
+
+  invalid: {},
+
+  optionWrapper: {
+    height: '100%',
+  },
+
+  option: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    appearance: 'none',
+    borderRadius: 0,
+    padding: 0,
+    border: 'none',
+    cursor: 'pointer',
+    width: '100%',
+  },
+
+  active: {
+    cursor: 'default',
+  },
+
+  optionIcon: {
+    width: 20,
+    height: 20,
+  },
+
+  optionText: {},
+
+  iconFromRight: {
+    '& $option': {
+      flexDirection: 'row-reverse',
+    },
+  },
+
+  s: {},
+
+  m: {},
+
+  l: {},
+
+  line: {},
+
+  selector: {
+    display: 'grid',
+    gridAutoFlow: 'column',
+    gridAutoColumns: '1fr',
+    borderRadius: dimensions.BORDER_RADIUS_SMALL,
+    backgroundColor: colors.BORDER_LIGHT,
+    width: 'fit-content',
+    position: 'relative',
+    border: ['solid', SELECTOR_BORDER_WIDTH, 'transparent'],
+
+    '& $line': {
+      content: '""',
+      position: 'absolute',
+      left: SELECTOR_GAP,
+      height: `calc(100% - ${SELECTOR_GAP * 2}px)`,
+      backgroundColor: colors.CLASSIC_WHITE,
+      borderRadius: dimensions.BORDER_RADIUS_SMALL,
+      transition: '0.25s ease-in-out',
+      transitionProperty: 'transform, width',
+    },
+
+    '&$invalid': {
+      borderColor: colors.RED_WARNING,
+    },
+
+    '& $option': {
+      gap: 6,
+      position: 'relative',
+      zIndex: 1,
+      height: '100%',
+      color: colors.FONT_MEDIUM,
+      fontSize: 16,
+      transition: 'color 0.25s ease-in-out',
+      background: 'none',
+
+      '&$s': {
+        padding: [4, 8],
+        fontSize: 10,
+        lineHeight: '14px',
+      },
+
+      '&$m': {
+        padding: [14, 18],
+      },
+
+      '&$l': {
+        padding: [16, 24],
+      },
+
+      '&:hover, &:focus': {
+        color: colors.FONT_MAIN,
+      },
+
+      '&$active': {
+        color: colors.FONT_MAIN,
+      },
+    },
+  },
+
+  autoWidth: {
+    '&$selector': {
+      gridAutoColumns: 'auto',
+
+      '& $line': {
+        width: 'unset',
+        transform: 'unset',
+      },
+    },
+  },
+});
+
+export type ISelectorStyles = ITweakStyles<typeof useStyles>;

package/src/components/Selector/Selector.tsx

@@ -0,0 +1,115 @@
+import { useEffect, useRef, useState } from 'react';
+import clsx from 'clsx';
+import {
+  addDataTestId,
+  getTestId,
+  hasDuplicates,
+  isNotEmpty,
+  isReactNodeNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { ICommonProps } from '../../types';
+import { renderIcon } from '../Icon';
+import { ISelectorOption, ISelectorValue } from './types';
+import { getSelectorLineStyle, useStyles, ISelectorStyles } from './Selector.styles';
+
+export interface ISelectorProps<V extends ISelectorValue> extends ICommonProps<ISelectorStyles> {
+  options: Array<ISelectorOption<V>>;
+  value?: V;
+  /** @default false */
+  isDisabled?: boolean;
+  /** @default false */
+  isRequired?: boolean;
+  /** @default false */
+  isInvalid?: boolean;
+  /** @default true */
+  hasSameOptionsWidth?: boolean;
+  /** @default 'left' */
+  iconPosition?: 'left' | 'right';
+  /** @default 'l' */
+  size?: 's' | 'm' | 'l';
+  onChange: (value: V) => void;
+}
+
+export function Selector<V extends ISelectorValue>({
+  options,
+  value,
+  isDisabled = false,
+  isRequired = false,
+  isInvalid = false,
+  hasSameOptionsWidth = true,
+  iconPosition = 'left',
+  size = 'l',
+  testId,
+  data,
+  tweakStyles,
+  onChange,
+}: ISelectorProps<V>): JSX.Element {
+  const classes = useStyles({ theme: tweakStyles });
+  const optionsValues = options.map((opt) => opt.value);
+
+  const [elementsData, setElementsData] = useState<HTMLElement[]>([]);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  if (hasDuplicates(optionsValues)) {
+    // eslint-disable-next-line no-console
+    console.error('Selector: Значения options.value должны быть уникальными');
+  }
+
+  useEffect(() => {
+    const listEl = listRef.current;
+    if (listEl === null) {
+      return;
+    }
+
+    setElementsData([...listEl.querySelectorAll<HTMLElement>(`.${classes.optionWrapper}`)]);
+  }, [options, size]);
+
+  const activeElementData = isNotEmpty(value)
+    ? elementsData[optionsValues.indexOf(value)]
+    : undefined;
+
+  return (
+    <div
+      className={clsx(classes.root, classes.selector, {
+        [classes.iconFromRight]: iconPosition === 'right',
+        [classes.invalid]: isInvalid,
+        [classes.required]: isRequired,
+        [classes.autoWidth]: hasSameOptionsWidth,
+      })}
+      ref={listRef}
+      {...addDataTestId(testId)}
+      {...addDataAttributes(data)}
+    >
+      {isNotEmpty(activeElementData) && (
+        <div className={classes.line} style={getSelectorLineStyle(activeElementData)} />
+      )}
+
+      {options.map((option) => {
+        const optionId = option.value.toString();
+        const isDisabledOption = option.isDisabled ?? isDisabled;
+        const isActiveOption = option.value === value;
+
+        return (
+          <div key={optionId} className={classes.optionWrapper} {...addDataTestId(testId)}>
+            <button
+              type="button"
+              className={clsx(classes.option, classes[size], {
+                [classes.active]: isActiveOption,
+                [classes.disabled]: isDisabledOption,
+              })}
+              disabled={isDisabledOption}
+              onClick={!isDisabledOption ? () => onChange(option.value) : undefined}
+              {...addDataTestId(getTestId(testId, optionId))}
+            >
+              {isReactNodeNotEmpty(option.icon) && (
+                <div className={classes.optionIcon}>{renderIcon(option.icon)}</div>
+              )}
+              <div className={classes.optionText}>{option.label}</div>
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/Selector/index.ts

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

package/src/components/Selector/types.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { IIcon } from '../Icon';
+
+export type ISelectorValue = string | number | boolean;
+
+export interface ISelectorOption<V> {
+  label: ReactNode;
+  icon?: IIcon;
+  value: V;
+  /** @default false */
+  isDisabled?: boolean;
+}

package/src/components/Status/Status.stories.tsx

@@ -0,0 +1,73 @@
+import { Status } from '.';
+import { ComponentStory } from '@storybook/react';
+import { IIconType, iconsList } from '../Icon';
+import { complexIcons } from '../Icon/complexIcons';
+import { STATUS_COLORS, STATUS_SIZES } from './constants';
+import { IStatusStyles } from './Status.styles';
+
+export default {
+  title: 'Status',
+  component: Status,
+};
+
+const iconTypes = [
+  undefined,
+  ...Object.keys(iconsList),
+  ...Object.keys(complexIcons),
+] as IIconType[];
+
+const customTweakStyles: IStatusStyles = {
+  custom: {
+    '--status-color': '#793472',
+    '--status-background': '#F2B9ED',
+  },
+};
+
+const Template: ComponentStory<typeof Status> = (args) => (
+  <div
+    style={{
+      display: 'grid',
+      gridTemplateRows: `repeat(${STATUS_SIZES.length + 1}, 1fr)`,
+      gridTemplateColumns: `repeat(${STATUS_COLORS.length + 1}, 1fr)`,
+      gap: 20,
+    }}
+  >
+    <div key={0} style={{ display: 'contents' }}>
+      <div />
+      {STATUS_COLORS.map((color, j) => (
+        <div key={j + 1}>{color}</div>
+      ))}
+    </div>
+
+    {STATUS_SIZES.map((size, i) => (
+      <div key={i + 1} style={{ display: 'contents' }}>
+        <div>{size}</div>
+        {STATUS_COLORS.map((color, j) => (
+          <div key={j + 1}>
+            <Status {...args} size={size} color={color} tweakStyles={customTweakStyles} />
+          </div>
+        ))}
+      </div>
+    ))}
+  </div>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  children: 'Status',
+  badge: '+ Badge',
+  icon: 'balloon',
+  iconPosition: 'left',
+};
+
+Default.argTypes = {
+  icon: { options: iconTypes, control: 'select' },
+  iconPosition: { options: ['left', 'right'], control: 'inline-radio' },
+};
+
+Default.parameters = {
+  controls: {
+    exclude: ['size', 'color', 'tweakStyles', 'testId', 'data'],
+  },
+};

package/src/components/Status/Status.styles.ts

@@ -0,0 +1,143 @@
+import { rgba } from '../../helpers';
+import { colors, createThemedStyles, ITweakStyles } from '../../theme';
+
+export const useStyles = createThemedStyles('Status', {
+  root: {
+    display: 'inline-flex',
+    verticalAlign: 'middle',
+    color: 'var(--status-color)',
+    backgroundColor: 'var(--status-background)',
+    width: 'max-content',
+    alignItems: 'center',
+
+    '& > *': {
+      flexShrink: 0,
+    },
+  },
+
+  icon: {
+    '& > div': {
+      display: 'inline-block',
+    },
+  },
+
+  iconLeft: {
+    order: -1,
+  },
+
+  text: {},
+
+  badge: {
+    color: colors.CLASSIC_WHITE,
+    backgroundColor: 'var(--status-color)',
+  },
+
+  xs: {
+    padding: [2, 4],
+    gap: 4,
+    borderRadius: 2,
+
+    fontSize: 12,
+    lineHeight: '16px',
+    letterSpacing: 0.24,
+    fontWeight: 'bold',
+
+    '& $icon': {
+      width: 16,
+      height: 16,
+    },
+
+    '& $badge': {
+      padding: [0, 2],
+      marginRight: -1,
+      borderRadius: 4,
+    },
+  },
+
+  s: {
+    padding: [3, 8, 5, 8],
+    gap: 4,
+    borderRadius: 6,
+
+    fontSize: 13,
+    lineHeight: '16px',
+    letterSpacing: 0.2,
+    fontWeight: 'bold',
+
+    '& $text': {},
+
+    '& $icon': {
+      width: 16,
+      height: 16,
+    },
+
+    '& $badge': {
+      padding: [0, 4, 2, 4],
+      margin: [0, -4, -2, 0],
+      borderRadius: 4,
+    },
+  },
+
+  m: {
+    padding: [7, 12],
+    gap: 4,
+    borderRadius: 6,
+
+    fontSize: 15,
+    lineHeight: '18px',
+    letterSpacing: 0.15,
+    fontWeight: 'bold',
+
+    '& $text': {},
+
+    '& $icon': {
+      width: 18,
+      height: 18,
+    },
+
+    '& $badge': {
+      padding: [2, 4],
+      margin: [-2, -7, -2, 0],
+      borderRadius: 4,
+    },
+  },
+
+  green: {
+    '--status-background': rgba('#D4E3AC', 0.5),
+    '--status-color': '#6F990F',
+  },
+
+  blue: {
+    '--status-background': rgba('#AABFFC', 0.4),
+    '--status-color': '#4C6EBF',
+  },
+
+  grey: {
+    '--status-background': rgba('#95A0B3', 0.25),
+    '--status-color': '#7A869A',
+  },
+
+  orange: {
+    '--status-background': rgba('#FCD3A9', 0.5),
+    '--status-color': '#E5741C',
+  },
+
+  red: {
+    '--status-background': rgba('#F7949A', 0.25),
+    '--status-color': '#F14D56',
+  },
+
+  teal: {
+    '--status-background': rgba('#8CE3EA', 0.4),
+    '--status-color': '#0092A6',
+  },
+
+  violet: {
+    '--status-background': rgba('#BEABE0', 0.4),
+    '--status-color': '#7450B2',
+  },
+
+  custom: {},
+});
+
+export type IStatusStyles = ITweakStyles<typeof useStyles>;

package/src/components/Status/Status.tsx

@@ -0,0 +1,49 @@
+import { FC, ReactNode } from 'react';
+import clsx from 'clsx';
+import { addDataTestId, isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { ICommonProps } from '../../types';
+import { IIcon, renderIcon } from '../Icon';
+import { IStatusColor, IStatusSize } from './types';
+import { useStyles, IStatusStyles } from './Status.styles';
+
+export interface IStatusProps extends ICommonProps<IStatusStyles> {
+  children: ReactNode;
+  color: IStatusColor;
+  icon?: IIcon;
+  /** @default 's' */
+  size?: IStatusSize;
+  /** @default 'right' */
+  iconPosition?: 'left' | 'right';
+  badge?: ReactNode;
+}
+
+export const Status: FC<IStatusProps> = ({
+  children,
+  color,
+  size = 's',
+  icon,
+  iconPosition = 'right',
+  badge,
+  tweakStyles,
+  testId,
+  data,
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  return (
+    <span
+      className={clsx(classes.root, classes[size], classes[color])}
+      {...addDataTestId(testId)}
+      {...addDataAttributes(data)}
+    >
+      {isReactNodeNotEmpty(children) && <span className={classes.text}>{children}</span>}
+      {isReactNodeNotEmpty(icon) && (
+        <span className={clsx(classes.icon, iconPosition === 'left' && classes.iconLeft)}>
+          {renderIcon(icon)}
+        </span>
+      )}
+      {isReactNodeNotEmpty(badge) && <span className={classes.badge}>{badge}</span>}
+    </span>
+  );
+};

package/src/components/Status/constants.ts

@@ -0,0 +1,11 @@
+export const STATUS_COLORS = [
+  'green',
+  'teal',
+  'blue',
+  'grey',
+  'orange',
+  'red',
+  'violet',
+  'custom',
+] as const;
+export const STATUS_SIZES = ['xs', 's', 'm'] as const;

package/src/components/Status/index.ts

@@ -0,0 +1,3 @@
+export * from './Status';
+
+export type { IStatusStyles } from './Status.styles';

package/src/components/Status/types.ts

@@ -0,0 +1,5 @@
+import { STATUS_COLORS, STATUS_SIZES } from './constants';
+
+export type IStatusColor = (typeof STATUS_COLORS)[number];
+
+export type IStatusSize = (typeof STATUS_SIZES)[number];