@true-engineering/true-react-common-ui-kit 3.8.0 → 3.8.1

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

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

@@ -1,115 +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>
-  );
-}
+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

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

package/src/components/Selector/types.ts

@@ -1,12 +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;
-}
+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/Skeleton/Skeleton.stories.tsx

@@ -1,19 +1,19 @@
-import { ComponentStory } from '@storybook/react';
-import { Skeleton } from './Skeleton';
-
-export default {
-  title: 'Feedback/Skeleton',
-  component: Skeleton,
-};
-
-const Template: ComponentStory<typeof Skeleton> = (args) => (
-  <div style={{ padding: 32, backgroundColor: '#fff', width: 200 }}>
-    <Skeleton {...args} />
-  </div>
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  height: '20px',
-};
+import { ComponentStory } from '@storybook/react';
+import { Skeleton } from './Skeleton';
+
+export default {
+  title: 'Feedback/Skeleton',
+  component: Skeleton,
+};
+
+const Template: ComponentStory<typeof Skeleton> = (args) => (
+  <div style={{ padding: 32, backgroundColor: '#fff', width: 200 }}>
+    <Skeleton {...args} />
+  </div>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  height: '20px',
+};