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

package/src/components/ThemedPreloader/ThemedPreloader.stories.tsx

@@ -1,41 +1,30 @@
 import { FC } from 'react';
-import { ComponentStory } from '@storybook/react';
+import { type Meta } from '@storybook/react';
 import { colors } from '../../theme';
 import { IThemedPreloaderProps, ThemedPreloader } from './ThemedPreloader';
 
-interface IThemedPreloaderWithCustomProps extends IThemedPreloaderProps {
+interface IThemedPreloaderCustomProps extends IThemedPreloaderProps {
   currentColor: string;
 }
 
-const ThemedPreloaderWithCustomProps: FC<IThemedPreloaderWithCustomProps> = ({
-  currentColor,
-  ...args
-}) => (
+const Story: FC<IThemedPreloaderCustomProps> = ({ currentColor, ...args }) => (
   <div style={{ color: currentColor }}>
     <ThemedPreloader {...args} />
   </div>
 );
 
-export default {
+const meta: Meta<typeof Story> = {
   title: 'Feedback/ThemedPreloader',
-  component: ThemedPreloaderWithCustomProps,
+  component: Story,
+  args: {
+    type: 'dots',
+    useCurrentColor: false,
+    currentColor: colors.GREEN_FOCUS,
+  },
   argTypes: {
     type: { options: ['default', 'logo', 'dots'], control: 'inline-radio' },
   },
 };
 
-const Template: ComponentStory<typeof ThemedPreloaderWithCustomProps> = (args) => (
-  <ThemedPreloaderWithCustomProps {...args} />
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  type: 'dots',
-  useCurrentColor: false,
-  currentColor: colors.GREEN_FOCUS,
-};
-Default.parameters = {
-  controls: {
-    exclude: ['data'],
-  },
-};
+export default meta;
+export const Default = {};

package/src/components/ThemedPreloader/ThemedPreloader.tsx

@@ -1,7 +1,6 @@
 import { FC } from 'react';
 import clsx from 'clsx';
-import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
+import { addDataAttributes } from '@true-engineering/true-react-platform-helpers';
 import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { SvgPreloader, DotsPreloader } from './components';
@@ -41,8 +40,7 @@ export const ThemedPreloader: FC<IThemedPreloaderProps> = ({
       className={clsx(classes.root, classes[type], {
         [classes.currentColor]: useCurrentColor,
       })}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
+      {...addDataAttributes(data, testId)}
     >
       {type === 'dots' ? (
         <DotsPreloader tweakStyles={tweakDotsPreloaderStyles} />

package/src/components/ThemedPreloader/components/SvgPreloader/SvgPreloader.tsx

@@ -1,9 +1,9 @@
-import { FC, useContext } from 'react';
-import { ThemeContext } from '../../../../theme';
+import { FC } from 'react';
+import { useTheme } from '../../../../theme';
 import { ICommonProps } from '../../../../types';
 import { IPreloaderSvgType } from '../../types';
 import { DefaultPreloader } from '../DefaultPreloader';
-import { useStyles, ISvgPreloaderStyles } from './SvgPreloader.styles';
+import { ISvgPreloaderStyles, useStyles } from './SvgPreloader.styles';
 
 export interface ISvgPreloaderProps extends Pick<ICommonProps<ISvgPreloaderStyles>, 'tweakStyles'> {
   type: IPreloaderSvgType;
@@ -12,7 +12,7 @@ export interface ISvgPreloaderProps extends Pick<ICommonProps<ISvgPreloaderStyle
 export const SvgPreloader: FC<ISvgPreloaderProps> = ({ type = 'default', tweakStyles }) => {
   const classes = useStyles({ theme: tweakStyles });
 
-  const { theme } = useContext(ThemeContext);
+  const theme = useTheme();
   const PreloaderIcon = theme.preloaders?.[type] ?? DefaultPreloader;
   const isInlineSvg = typeof PreloaderIcon === 'string';
 

package/src/components/Toaster/Toaster.stories.tsx

@@ -1,12 +1,20 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { FC } from 'react';
+import { type Meta } from '@storybook/react';
 import { Button } from '../Button';
-import { Toaster } from './Toaster';
+import { IToasterProps, Toaster } from './Toaster';
+import { IToasterType } from './types';
 
-const types = ['error', 'info', 'warning', 'ok', 'not-ok'];
+const types: IToasterType[] = ['error', 'info', 'warning', 'ok', 'not-ok'];
 
-export default {
+const Story: FC<IToasterProps> = (args) => (
+  <Toaster {...args} onTimeEnd={() => console.log(1)} onClose={() => alert('closed')}>
+    <Button size="m">Нажмите</Button>
+  </Toaster>
+);
+
+const meta: Meta<typeof Story> = {
   title: 'Feedback/Toaster',
-  component: Toaster,
+  component: Story,
   args: {
     title: 'Произошла очень страшная ошибка',
     text: 'Мы даже не знаем, чем вам помочь!',
@@ -18,13 +26,7 @@ export default {
   argTypes: {
     type: { control: 'inline-radio', options: types },
   },
-  parameters: {
-    controls: { exclude: ['onTimeEnd', 'onClose', 'data', 'tweakStyles'] },
-  },
-} as ComponentMeta<typeof Toaster>;
+};
 
-export const Default: ComponentStory<typeof Toaster> = (args) => (
-  <Toaster {...args} onTimeEnd={() => console.log(1)} onClose={() => alert('closed')}>
-    <Button size="m">Нажмите</Button>
-  </Toaster>
-);
+export default meta;
+export const Default = {};

package/src/components/Toaster/Toaster.tsx

@@ -1,12 +1,11 @@
 import { FC, ReactNode, useEffect } from 'react';
 import clsx from 'clsx';
 import {
-  addDataTestId,
+  addDataAttributes,
   isEmpty,
   isNotEmpty,
   isReactNodeNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
 import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { Icon } from '../Icon';
@@ -70,8 +69,7 @@ export const Toaster: FC<IToasterProps> = ({
     <div
       className={classes.root}
       onClick={shouldCloseOnClick ? onClose : undefined}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
+      {...addDataAttributes(data, testId)}
     >
       <div className={clsx(classes.iconContainer, classes[type])}>
         <Icon type={`status-${type}`} />

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -1,19 +1,30 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { type Meta } from '@storybook/react';
+import { IExtendableProps } from '../../types';
 import { Tooltip } from './Tooltip';
 
-export default {
+const SIZES = ['micro'] as const;
+
+declare module './types' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  export interface ITooltipSizes extends IExtendableProps<typeof SIZES> {}
+}
+
+const meta: Meta<typeof Tooltip> = {
   title: 'Data Display/Tooltip',
   component: Tooltip,
   args: {
     text: 'Tooltip Text',
     view: 'tooltip',
     type: 'info',
+    size: undefined,
   },
   argTypes: {
     text: { control: 'text' },
     view: { control: 'inline-radio', options: ['tooltip', 'hint'] },
     type: { control: 'inline-radio', options: ['info', 'error'] },
+    size: { options: [undefined, ...SIZES], control: 'inline-radio' },
   },
-} as ComponentMeta<typeof Tooltip>;
+};
 
-export const Default: ComponentStory<typeof Tooltip> = (args) => <Tooltip {...args} />;
+export default meta;
+export const Default = {};

package/src/components/Tooltip/Tooltip.styles.ts

@@ -1,5 +1,6 @@
 import { rgba } from '../../helpers';
 import { colors, createThemedStyles, dimensions, ITweakStyles } from '../../theme';
+import { ITooltipSizes } from './types';
 
 export const useStyles = createThemedStyles('Tooltip', {
   root: {
@@ -48,4 +49,4 @@ export const useStyles = createThemedStyles('Tooltip', {
   },
 });
 
-export type ITooltipStyles = ITweakStyles<typeof useStyles>;
+export type ITooltipStyles = ITweakStyles<typeof useStyles, ITooltipSizes>;

package/src/components/Tooltip/Tooltip.tsx

@@ -1,8 +1,8 @@
 import { FC, ReactNode } from 'react';
 import clsx from 'clsx';
-import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
+import { addDataAttributes, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { ICommonProps } from '../../types';
+import { ITooltipSize } from './types';
 import { useStyles, ITooltipStyles } from './Tooltip.styles';
 
 export interface ITooltipProps extends ICommonProps<ITooltipStyles> {
@@ -11,12 +11,15 @@ export interface ITooltipProps extends ICommonProps<ITooltipStyles> {
   view?: 'tooltip' | 'hint' | 'custom';
   /** @default 'info' */
   type?: 'info' | 'error';
+  /** @default 'undefined' */
+  size?: ITooltipSize;
 }
 
 export const Tooltip: FC<ITooltipProps> = ({
   text,
   view = 'tooltip',
   type = 'info',
+  size,
   data,
   testId,
   tweakStyles,
@@ -25,9 +28,13 @@ export const Tooltip: FC<ITooltipProps> = ({
 
   return (
     <div
-      className={clsx(classes.root, classes[view], classes[type])}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
+      className={clsx(
+        classes.root,
+        classes[view],
+        classes[type],
+        isNotEmpty(size) && classes[size],
+      )}
+      {...addDataAttributes(data, testId)}
     >
       {text}
     </div>

package/src/components/Tooltip/types.ts

@@ -1 +1,6 @@
 export type ITooltipType = 'info' | 'warning';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface ITooltipSizes {}
+
+export type ITooltipSize = keyof ITooltipSizes;

package/src/components/WithMessages/WithMessages.stories.tsx

@@ -1,21 +1,19 @@
+import { FC } from 'react';
 import { doNothing } from '@true-engineering/true-react-platform-helpers';
-import { ComponentStory } from '@storybook/react';
+import { type Meta } from '@storybook/react';
 import { IInputProps, Input } from '../Input';
-import { WithMessages } from './WithMessages';
+import { IWithMessagesProps, WithMessages } from './WithMessages';
 
-export default {
-  title: 'WithMessages',
-  component: WithMessages,
-};
-
-const Template: ComponentStory<typeof WithMessages> = ({ controlsDirection, ...args }) => {
+const Story: FC<IWithMessagesProps> = ({ controlsDirection, ...args }) => {
   let groupPlacement: Array<IInputProps['groupPlacement']> = [];
+
   if (controlsDirection === 'horizontal') {
     groupPlacement = ['left', 'right'];
   }
   if (controlsDirection === 'vertical') {
     groupPlacement = ['top', 'bottom'];
   }
+
   return (
     <WithMessages {...args} controlsDirection={controlsDirection}>
       <Input value="value" groupPlacement={groupPlacement[0]} onChange={doNothing} />
@@ -24,17 +22,15 @@ const Template: ComponentStory<typeof WithMessages> = ({ controlsDirection, ...a
   );
 };
 
-export const Default = Template.bind({});
-
-Default.args = {
-  infoMessage: 'Message Info',
-  errorMessage: 'Error Text',
-  controlsDirection: undefined,
-};
-
-Default.argTypes = {
-  controlsDirection: {
-    options: [undefined, 'horizontal', 'vertical'],
-    control: 'radio',
+const meta: Meta<typeof Story> = {
+  title: 'Data Display/WithMessages',
+  component: Story,
+  args: {
+    infoMessage: 'Message Info',
+    errorMessage: 'Error Text',
+    controlsDirection: undefined,
   },
 };
+
+export default meta;
+export const Default = {};

package/src/components/WithMessages/WithMessages.tsx

@@ -15,45 +15,46 @@ export interface IWithMessagesProps extends ICommonProps<IWithMessagesStyles> {
   controlsDirection?: 'horizontal' | 'vertical';
 }
 
-export const WithMessages = forwardRef<HTMLDivElement, IWithMessagesProps>(
-  ({ children, infoMessage, errorMessage, controlsDirection, tweakStyles, testId, data }, ref) => {
-    const classes = useStyles({ theme: tweakStyles });
+export const WithMessages = forwardRef<HTMLDivElement, IWithMessagesProps>(function WithMessages(
+  { children, infoMessage, errorMessage, controlsDirection, tweakStyles, testId, data },
+  ref,
+) {
+  const classes = useStyles({ theme: tweakStyles });
 
-    const shouldShowError = isReactNodeNotEmpty(errorMessage);
-    const shouldShowInfo = isReactNodeNotEmpty(infoMessage) && !shouldShowError;
+  const shouldShowError = isReactNodeNotEmpty(errorMessage);
+  const shouldShowInfo = isReactNodeNotEmpty(infoMessage) && !shouldShowError;
 
-    return (
-      <div
-        ref={ref}
-        className={classes.withMessages}
-        data-invalid={shouldShowError ? true : undefined}
-        {...addDataAttributes(data, testId)}
-      >
-        {isReactNodeNotEmpty(children) && (
-          <div
-            className={clsx(classes.children, {
-              [classes.horizontal]: controlsDirection === 'horizontal',
-              [classes.vertical]: controlsDirection === 'vertical',
-            })}
-          >
-            {children}
-          </div>
-        )}
-        {(shouldShowError || shouldShowInfo) && (
-          <div className={classes.message}>
-            {shouldShowError && (
-              <div className={classes.error} {...addDataTestId(testId, 'error')}>
-                {errorMessage}
-              </div>
-            )}
-            {shouldShowInfo && (
-              <div className={classes.info} {...addDataTestId(testId, 'info')}>
-                {infoMessage}
-              </div>
-            )}
-          </div>
-        )}
-      </div>
-    );
-  },
-);
+  return (
+    <div
+      ref={ref}
+      className={classes.withMessages}
+      data-invalid={shouldShowError ? true : undefined}
+      {...addDataAttributes(data, testId)}
+    >
+      {isReactNodeNotEmpty(children) && (
+        <div
+          className={clsx(classes.children, {
+            [classes.horizontal]: controlsDirection === 'horizontal',
+            [classes.vertical]: controlsDirection === 'vertical',
+          })}
+        >
+          {children}
+        </div>
+      )}
+      {(shouldShowError || shouldShowInfo) && (
+        <div className={classes.message}>
+          {shouldShowError && (
+            <div className={classes.error} {...addDataTestId(testId, 'error')}>
+              {errorMessage}
+            </div>
+          )}
+          {shouldShowInfo && (
+            <div className={classes.info} {...addDataTestId(testId, 'info')}>
+              {infoMessage}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+});

package/src/components/WithPopup/WithPopup.stories.tsx

@@ -1,9 +1,11 @@
+import { FC } from 'react';
 import { doNothing } from '@true-engineering/true-react-platform-helpers';
-import { ComponentStory } from '@storybook/react';
+import { type Meta } from '@storybook/react';
+import { excludeStorybookParams } from '../../helpers';
 import { Button } from '../Button';
 import { IListItem, List } from '../List';
 import { Tooltip } from '../Tooltip';
-import { WithPopup } from './WithPopup';
+import { IWithPopupProps, WithPopup } from './WithPopup';
 
 const positions = [
   undefined,
@@ -21,15 +23,6 @@ const positions = [
   'left-end',
 ];
 
-export default {
-  title: 'Data Display/WithPopup',
-  component: WithPopup,
-  argTypes: {
-    placement: { control: 'select', options: positions },
-    eventType: { control: 'inline-radio', options: ['hover', 'click'] },
-  },
-};
-
 const items: IListItem[] = [
   {
     item: 'Copy',
@@ -45,7 +38,7 @@ const items: IListItem[] = [
   },
 ];
 
-const Template: ComponentStory<typeof WithPopup> = (args) => (
+const Story: FC<IWithPopupProps> = (args) => (
   <div
     style={{
       display: 'flex',
@@ -83,19 +76,27 @@ const Template: ComponentStory<typeof WithPopup> = (args) => (
   </div>
 );
 
-export const Default = Template.bind({});
-
-Default.args = {
-  canBeFlipped: true,
-  isDisabled: false,
-  shouldRenderInBody: true,
-  shouldHideOnScroll: false,
-  shouldStopPropagation: true,
-  shouldShowArrow: false,
-};
-
-Default.parameters = {
-  controls: {
-    exclude: ['trigger', 'data', 'testId', 'middlewares', 'children', 'eventType'],
+const meta: Meta<typeof Story> = {
+  title: 'Data Display/WithPopup',
+  component: Story,
+  args: {
+    canBeFlipped: true,
+    isDisabled: false,
+    shouldRenderInBody: true,
+    shouldHideOnScroll: false,
+    shouldStopPropagation: true,
+    shouldShowArrow: false,
+  },
+  argTypes: {
+    placement: { control: 'select', options: positions },
+    eventType: { control: 'inline-radio', options: ['hover', 'click'] },
+  },
+  parameters: {
+    controls: {
+      exclude: excludeStorybookParams(['trigger', 'middlewares', 'children', 'eventType']),
+    },
   },
 };
+
+export default meta;
+export const Default = {};

package/src/components/WithPopup/WithPopup.tsx

@@ -24,6 +24,10 @@ import {
   useFocus,
   FloatingArrow,
   arrow,
+  UseClickProps,
+  UseFocusProps,
+  UseDismissProps,
+  UseTransitionStatusProps,
 } from '@floating-ui/react';
 import { ICommonProps, IDataAttributes, IRenderNode } from '../../types';
 import { DEFAULT_OFFSET } from './constants';
@@ -46,8 +50,11 @@ export interface IWithPopupProps extends ICommonProps<IWithPopupStyles> {
   placement?: Placement;
   /** @default 'click' */
   eventType?: IPopupEventType;
-  /** @default 0 */
-  hoverDelay?: UseHoverProps['delay'];
+  /**
+   * @deprecated Используйте hoverOptions
+   * @default 0
+   */
+  hoverDelay?: number;
   /** @default 6 */
   popupOffset?: OffsetOptions;
   arrowProps?: IPopupArrowProps;
@@ -70,6 +77,11 @@ export interface IWithPopupProps extends ICommonProps<IWithPopupStyles> {
   /** Должна ли минимальная ширина попапа быть равна ширине триггера
    * @default false */
   isMinWidthSameAsTrigger?: boolean;
+  hoverOptions?: UseHoverProps;
+  clickOptions?: UseClickProps;
+  focusOptions?: UseFocusProps;
+  dismissOptions?: UseDismissProps;
+  transitionOptions?: UseTransitionStatusProps;
   onToggle?: (isActive: boolean, event?: IWithPopupToggleEvent) => void;
 }
 
@@ -91,6 +103,11 @@ export const WithPopup: FC<IWithPopupProps> = ({
   isDisabled = false,
   shouldShowArrow = false,
   isMinWidthSameAsTrigger = false,
+  hoverOptions,
+  clickOptions,
+  focusOptions,
+  dismissOptions,
+  transitionOptions,
   tweakStyles,
   data,
   testId,
@@ -99,15 +116,14 @@ export const WithPopup: FC<IWithPopupProps> = ({
   const classes = useStyles({ theme: tweakStyles });
 
   const [isOpen, setIsOpen] = useState(false);
+  const isActive = isOpen && !isDisabled;
 
   const arrowRef = useRef<SVGSVGElement>(null);
 
-  const handleToggle = (isActive: boolean, event?: IWithPopupToggleEvent) => {
+  const handleToggle = (next: boolean, event?: IWithPopupToggleEvent) => {
     event?.stopPropagation();
-    if (!isDisabled) {
-      onToggle?.(isActive, event);
-      setIsOpen(isActive);
-    }
+    onToggle?.(next, event);
+    setIsOpen(next);
   };
 
   const handleClose = (event?: IWithPopupToggleEvent) => {
@@ -115,7 +131,7 @@ export const WithPopup: FC<IWithPopupProps> = ({
   };
 
   const { refs, floatingStyles, context } = useFloating({
-    open: isOpen,
+    open: isActive,
     middleware: [
       offset(popupOffset),
       canBeFlipped && flip({ fallbackAxisSideDirection: 'start' }),
@@ -130,22 +146,27 @@ export const WithPopup: FC<IWithPopupProps> = ({
 
   const hover = useHover(context, {
     enabled: eventType === 'hover',
-    delay: typeof hoverDelay === 'number' ? { open: hoverDelay, close: 0 } : hoverDelay,
+    delay: { open: hoverDelay, close: 0 },
     handleClose: safePolygon(),
+    ...hoverOptions,
   });
 
-  const focus = useFocus(context, { enabled: eventType === 'hover' });
+  const focus = useFocus(context, { enabled: eventType === 'hover', ...focusOptions });
 
-  const click = useClick(context, { enabled: eventType === 'click' });
+  const click = useClick(context, { enabled: eventType === 'click', ...clickOptions });
 
   const dismiss = useDismiss(context, {
     enabled: eventType === 'click',
     ancestorScroll: shouldHideOnScroll,
+    ...dismissOptions,
   });
 
   const { getFloatingProps, getReferenceProps } = useInteractions([hover, click, focus, dismiss]);
 
-  const { isMounted, status } = useTransitionStatus(context, { duration: { close: 500 } });
+  const { isMounted, status } = useTransitionStatus(context, {
+    duration: { close: 500 },
+    ...transitionOptions,
+  });
 
   const referenceProps: IReferenceProps = getReferenceProps({
     ref: refs.setReference,
@@ -157,7 +178,7 @@ export const WithPopup: FC<IWithPopupProps> = ({
   const triggerElement = applyAction(trigger, {
     referenceProps: !isTriggerWrapped ? referenceProps : undefined,
     triggerProps: {
-      isActive: isOpen,
+      isActive,
       isDisabled,
       ...(!isTriggerWrapped && { data, testId, ...referenceProps }),
     },
@@ -170,7 +191,7 @@ export const WithPopup: FC<IWithPopupProps> = ({
           className={clsx(classes.trigger, {
             [classes.clickable]: eventType === 'click',
             [classes.disabled]: isDisabled,
-            [classes.active]: isOpen,
+            [classes.active]: isActive,
           })}
           {...referenceProps}
           {...addDataAttributes(data, testId)}
@@ -189,7 +210,7 @@ export const WithPopup: FC<IWithPopupProps> = ({
             style={floatingStyles}
             className={classes.popup}
             {...getFloatingProps()}
-            {...addDataAttributes(popupData)}
+            {...addDataAttributes(popupData, testId, 'popup')}
           >
             <div className={classes[`dropdown-${status}`]}>
               {shouldShowArrow && (