@true-engineering/true-react-common-ui-kit 4.0.0-alpha7 → 4.0.0-alpha71

package/src/components/Select/components/SelectList/SelectList.tsx

@@ -1,20 +1,23 @@
-import { useMemo, type ReactNode } from 'react';
+import { type ReactNode, useMemo } from 'react';
 import clsx from 'clsx';
 import {
   addDataTestId,
   getArray,
+  isNotEmpty,
   isReactNodeNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
 import { type ICommonProps } from '../../../../types';
 import { ScrollIntoViewIfNeeded } from '../../../ScrollIntoViewIfNeeded';
+import type { ISelectProps } from '../../Select';
 import { ALL_OPTION_INDEX, DEFAULT_OPTION_INDEX } from '../../constants';
-import { SelectListItem, type ISelectListItemProps } from '../SelectListItem';
-import { useStyles, type ISelectListStyles } from './SelectList.styles';
+import { type ISelectListItemProps, SelectListItem } from '../SelectListItem';
+import { type ISelectListStyles, useStyles } from './SelectList.styles';
 
 export interface ISelectListProps<Value>
   extends ICommonProps<ISelectListStyles>,
     Pick<ISelectListItemProps, 'onToggleCheckbox' | 'onOptionSelect' | 'isMultiSelect'> {
-  options: Value[] | Readonly<Value[]>;
+  options: Value[] | readonly Value[];
+  size?: ISelectProps<Value>['size'];
   focusedIndex?: number;
   activeValue?: Value | Value[];
   noMatchesLabel?: string;
@@ -35,6 +38,7 @@ export interface ISelectListProps<Value>
 export function SelectList<Value>({
   options,
   focusedIndex,
+  size,
   activeValue,
   defaultOptionLabel,
   noMatchesLabel = 'Совпадений не найдено',
@@ -55,7 +59,7 @@ export function SelectList<Value>({
   convertValueToReactNode = convertValueToString,
   convertValueToId,
 }: ISelectListProps<Value>): JSX.Element {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const isHeaderNotEmpty = isReactNodeNotEmpty(customListHeader);
   const isFooterNotEmpty = isReactNodeNotEmpty(customListFooter);
@@ -78,13 +82,13 @@ export function SelectList<Value>({
   return (
     <ScrollIntoViewIfNeeded
       active={shouldScrollToList && !isMultiSelect}
-      className={clsx(classes.root, {
+      className={clsx(classes.root, isNotEmpty(size) && classes[size], {
         [classes.withListHeader]: isHeaderNotEmpty,
         [classes.withListFooter]: isFooterNotEmpty,
       })}
     >
       {isHeaderNotEmpty && <div className={classes.listHeader}>{customListHeader}</div>}
-      <div className={classes.list} {...addDataTestId(testId)}>
+      <div className={classes.list} {...addDataTestId(testId)} tabIndex={-1}>
         {isLoading ? (
           <div className={clsx(classes.cell, classes.loading)}>{loadingLabel}</div>
         ) : (
@@ -119,8 +123,9 @@ export function SelectList<Value>({
             )}
             {listOptions.map((opt, i) => {
               const optionValue = options[i];
+              const id = convertValueToId(optionValue);
               const isFocused = focusedIndex === i;
-              const isActive = activeOptionsIds.has(convertValueToId(optionValue));
+              const isActive = activeOptionsIds.has(id);
               // проверяем, что опция задизейблена
               const isDisabled = optionsDisableMap[i];
 
@@ -135,6 +140,7 @@ export function SelectList<Value>({
                   isMultiSelect={isMultiSelect}
                   onOptionSelect={onOptionSelect}
                   onToggleCheckbox={onToggleCheckbox}
+                  data={{ id }}
                 >
                   {opt}
                 </SelectListItem>

package/src/components/Select/components/SelectListItem/SelectListItem.tsx

@@ -7,12 +7,13 @@ import {
 } from 'react';
 import clsx from 'clsx';
 import { type Classes } from 'jss';
-import { addDataAttributes } from '../../../../helpers';
+import { addDataAttributes } from '@true-engineering/true-react-platform-helpers';
+import { IDataAttributesProps } from '../../../../types';
 import { Checkbox } from '../../../Checkbox';
 import { ScrollIntoViewIfNeeded } from '../../../ScrollIntoViewIfNeeded';
 import { checkboxStyles } from './SelectListItem.styles';
 
-export interface ISelectListItemProps {
+export interface ISelectListItemProps extends IDataAttributesProps {
   index: number;
   isSemiChecked?: boolean;
   isDisabled?: boolean;
@@ -38,6 +39,7 @@ export const SelectListItem: FC<ISelectListItemProps> = ({
   children,
   isFocused,
   isMultiSelect,
+  data,
   onOptionSelect,
   onToggleCheckbox,
 }) => {
@@ -67,6 +69,7 @@ export const SelectListItem: FC<ISelectListItemProps> = ({
         disabled: isDisabled,
         active: isActive,
         focused: isFocused,
+        ...data,
       })}
       onClick={!isDisabled && !isMultiSelect ? (event) => onOptionSelect(index, event) : undefined}
     >

package/src/components/Select/index.ts

@@ -1,4 +1,4 @@
 export * from './Select';
 export * from './types';
 export type { ISelectStyles } from './Select.styles';
-export type { ISelectListStyles } from './components';
+export { type ISelectListStyles, SelectList } from './components';

package/src/components/Select/types.ts

@@ -1,6 +1,9 @@
 import { ChangeEvent, KeyboardEvent } from 'react';
+import { IRenderNode } from '../../types';
 import { IChangeInputEvent } from '../Input';
 
 export type IMultipleSelectValue<Value> = Array<NonNullable<Value>>;
 
 export type IChangeSelectEvent = IChangeInputEvent | ChangeEvent<HTMLElement> | KeyboardEvent;
+
+export type ISelectFooter<T> = IRenderNode<{ filteredOptions: T[] }>;

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

@@ -1,14 +1,15 @@
-import { useState } from 'react';
-import { ComponentStory } from '@storybook/react';
+import { FC, useState } from 'react';
+import { type Meta } from '@storybook/react';
+import { excludeStorybookParams } from '../../helpers';
 import { Status } from '../Status';
-import { Selector } from './Selector';
+import { ISelectorProps, Selector } from './Selector';
 import { ISelectorOption } from './types';
 
 const options: Array<ISelectorOption<string>> = [
   {
     label: 'Label 1',
     value: '1',
-    icon: 'eye',
+    icon: 'filter',
   },
   {
     label: 'My label 2',
@@ -32,31 +33,32 @@ const options: Array<ISelectorOption<string>> = [
   },
 ];
 
-export default {
-  title: 'Controls/Selector',
-  component: Selector,
-};
-
-const Template: ComponentStory<typeof Selector> = (args) => {
+const Story: FC<ISelectorProps<string>> = (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,
+  return <Selector<string> {...args} value={value} options={options} onChange={setValue} />;
 };
 
-Default.argTypes = {};
-
-Default.parameters = {
-  controls: {
-    exclude: ['options', 'value', 'testId', 'onChange'],
+const meta: Meta<typeof Story> = {
+  title: 'Controls/Selector',
+  component: Story,
+  args: {
+    size: 'l',
+    iconPosition: 'left',
+    hasSameOptionsWidth: true,
+    isDisabled: false,
+    isInvalid: false,
+    isRequired: false,
+  },
+  argTypes: {
+    size: { options: ['s', 'm', 'l'], control: 'inline-radio' },
+    iconPosition: { options: ['left', 'right'], control: 'inline-radio' },
+  },
+  parameters: {
+    controls: {
+      exclude: excludeStorybookParams(['options', 'value']),
+    },
   },
 };
+
+export default meta;
+export const Default = {};

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

@@ -1,165 +1,63 @@
-import { CSSProperties } from 'react';
-import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { colors, dimensions, ITweakStyles, createThemedStyles, animations } 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;
+import { ITweakStyles, createThemedStyles, animations } from '../../theme';
 
 export const useStyles = createThemedStyles('Selector', {
-  root: {
-    display: 'flex',
-    alignItems: 'center',
-    listStyle: 'none',
+  selector: {
+    display: 'grid',
+    gridAutoFlow: 'column',
+    gridAutoColumns: 'auto',
+    boxSizing: 'border-box',
     position: 'relative',
-  },
 
-  required: {
-    '&::before': {
-      top: '50%',
-      left: -12,
-      width: 6,
-      height: 6,
+    '&:has($active)::before': {
       content: '""',
       position: 'absolute',
-      transform: 'translate(0, -50%)',
-      borderRadius: '50%',
-      backgroundColor: colors.ORANGE_FOCUS,
+      transition: animations.defaultTransition,
+      transitionProperty: 'left, width',
+      width: 'var(--active-element-width)',
+      height: 'var(--active-element-height)',
+      top: 'var(--active-element-top)',
+      left: 'var(--active-element-left)',
     },
   },
 
-  invalid: {},
-
-  optionWrapper: {
-    height: '100%',
+  autoWidth: {
+    gridAutoColumns: '1fr',
   },
 
+  required: {},
+
+  invalid: {},
+
   option: {
+    appearance: 'none',
+    background: 'none',
+    border: 'none',
+
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    appearance: 'none',
-    borderRadius: 0,
-    padding: 0,
-    border: 'none',
-    cursor: 'pointer',
-    width: '100%',
-  },
+    zIndex: 1,
 
-  active: {
-    cursor: 'default',
+    '$iconFromRight &': {
+      flexDirection: 'row-reverse',
+    },
   },
 
-  disabled: {
-    cursor: 'default',
+  active: {},
 
-    '& $optionText': {
-      color: colors.FONT_LABEL,
-    },
-  },
+  disabled: {},
 
-  optionIcon: {
-    width: 20,
-    height: 20,
-  },
+  optionIcon: {},
 
   optionText: {},
 
-  iconFromRight: {
-    '& $option': {
-      flexDirection: 'row-reverse',
-    },
-  },
+  iconFromRight: {},
 
   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: animations.defaultTransition,
-      transitionProperty: 'transform, width',
-    },
-
-    '&$invalid': {
-      borderColor: colors.RED_WARNING,
-    },
-
-    '& $option': {
-      gap: 6,
-      position: 'relative',
-      zIndex: 1,
-      height: '100%',
-      color: colors.FONT_MEDIUM,
-      fontSize: 16,
-      transition: animations.defaultTransition,
-      transitionProperty: 'color',
-      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,17 +1,15 @@
-import { useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 import {
   addDataTestId,
-  getTestId,
-  hasDuplicates,
-  isNotEmpty,
+  addDataAttributes,
   isReactNodeNotEmpty,
+  isNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
+import { useResizeRef } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { renderIcon } from '../Icon';
 import { ISelectorOption, ISelectorValue } from './types';
-import { getSelectorLineStyle, useStyles, ISelectorStyles } from './Selector.styles';
+import { ISelectorStyles, useStyles } from './Selector.styles';
 
 export interface ISelectorProps<V extends ISelectorValue> extends ICommonProps<ISelectorStyles> {
   options: Array<ISelectorOption<V>>;
@@ -45,69 +43,55 @@ export function Selector<V extends ISelectorValue>({
   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);
+  const classes = useStyles({ tweakStyles });
 
-  if (hasDuplicates(optionsValues)) {
-    // eslint-disable-next-line no-console
-    console.error('Selector: Значения options.value должны быть уникальными');
-  }
-
-  useEffect(() => {
-    const listEl = listRef.current;
-    if (listEl === null) {
-      return;
+  const updateVariables = (active: HTMLElement | null): void => {
+    if (isNotEmpty(active?.parentElement)) {
+      active.parentElement.style.setProperty('--active-element-width', `${active.clientWidth}px`);
+      active.parentElement.style.setProperty('--active-element-height', `${active.clientHeight}px`);
+      active.parentElement.style.setProperty('--active-element-left', `${active.offsetLeft}px`);
+      active.parentElement.style.setProperty('--active-element-top', `${active.offsetTop}px`);
     }
+  };
 
-    setElementsData([...listEl.querySelectorAll<HTMLElement>(`.${classes.optionWrapper}`)]);
-  }, [options, size]);
-
-  const activeElementData = isNotEmpty(value)
-    ? elementsData[optionsValues.indexOf(value)]
-    : undefined;
+  const resizeRef = useResizeRef<HTMLDivElement>({
+    onTargetChange: (target) => updateVariables(target.querySelector(`.${classes.active}`)),
+  });
 
   return (
     <div
-      className={clsx(classes.root, classes.selector, {
+      ref={resizeRef}
+      className={clsx(classes.selector, classes[size], {
         [classes.iconFromRight]: iconPosition === 'right',
         [classes.invalid]: isInvalid,
         [classes.required]: isRequired,
         [classes.autoWidth]: hasSameOptionsWidth,
       })}
-      ref={listRef}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
+      {...addDataAttributes(data, testId)}
     >
-      {isNotEmpty(activeElementData) && (
-        <div className={classes.line} style={getSelectorLineStyle(activeElementData)} />
-      )}
-
       {options.map((option) => {
-        const optionId = option.value.toString();
-        const isDisabledOption = option.isDisabled ?? isDisabled;
+        const optionId = String(option.value);
+        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>
+          <button
+            ref={isActiveOption ? updateVariables : undefined}
+            key={optionId}
+            type="button"
+            className={clsx(classes.option, {
+              [classes.active]: isActiveOption,
+              [classes.disabled]: isDisabledOption,
+            })}
+            disabled={isDisabledOption}
+            onClick={!isDisabledOption ? () => onChange(option.value) : undefined}
+            {...addDataTestId(testId, optionId)}
+          >
+            {isReactNodeNotEmpty(option.icon) && (
+              <div className={classes.optionIcon}>{renderIcon(option.icon)}</div>
+            )}
+            <div className={classes.optionText}>{option.label}</div>
+          </button>
         );
       })}
     </div>

package/src/components/Skeleton/Skeleton.stories.tsx

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

package/src/components/Skeleton/Skeleton.tsx

@@ -1,12 +1,12 @@
 import { CSSProperties, FC } from 'react';
-import { ICommonProps } from '../../types';
+import { ITweakStylesProps } from '../../types';
 import { ISkeletonStyles, useStyles } from './Skeleton.styles';
 
-export interface ISkeletonProps extends Pick<ICommonProps<ISkeletonStyles>, 'tweakStyles'> {
+export interface ISkeletonProps extends ITweakStylesProps<ISkeletonStyles> {
   height?: CSSProperties['height'];
 }
 
 export const Skeleton: FC<ISkeletonProps> = ({ height, tweakStyles }) => {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
   return <div className={classes.root} style={{ height }} />;
 };

package/src/components/SmartInput/SmartInput.stories.tsx

@@ -1,22 +1,13 @@
-import { useState } from 'react';
-import { ComponentStory } from '@storybook/react';
+import { FC, useState } from 'react';
+import { type Meta } from '@storybook/react';
 import { IInputProps } from '../Input';
-import { SmartInput } from './SmartInput';
+import { ISmartInputProps, SmartInput } from './SmartInput';
 import { ISmartType } from './types';
 
 const types: Array<IInputProps['type']> = ['text', 'password', 'email', 'number'];
 const smartTypes: ISmartType[] = ['default', 'agencyName', 'surname', 'name', 'email'];
 
-export default {
-  title: 'Inputs/SmartInput',
-  component: SmartInput,
-  argTypes: {
-    type: { control: 'inline-radio', options: types },
-    smartType: { control: 'inline-radio', options: smartTypes },
-  },
-};
-
-const Template: ComponentStory<typeof SmartInput> = (args) => {
+const Story: FC<ISmartInputProps> = (args) => {
   const [value, setValue] = useState('');
 
   return (
@@ -38,14 +29,23 @@ const Template: ComponentStory<typeof SmartInput> = (args) => {
   );
 };
 
-export const Default = Template.bind({});
-
-Default.args = {
-  label: 'Label',
-  placeholder: 'Placeholder',
-  type: 'text',
-  smartType: 'default',
-  isUpperCase: false,
-  isDisabled: false,
-  isTransliterationEnabled: true,
+const meta: Meta<typeof Story> = {
+  title: 'Inputs/SmartInput',
+  component: Story,
+  args: {
+    label: 'Label',
+    placeholder: 'Placeholder',
+    type: 'text',
+    smartType: 'default',
+    isUpperCase: false,
+    isDisabled: false,
+    isTransliterationEnabled: true,
+  },
+  argTypes: {
+    type: { control: 'inline-radio', options: types },
+    smartType: { control: 'inline-radio', options: smartTypes },
+  },
 };
+
+export default meta;
+export const Default = {};