@true-engineering/true-react-common-ui-kit 4.0.0-alpha6 → 4.0.0-alpha61

package/src/components/TextWithTooltip/TextWithTooltip.tsx

@@ -2,12 +2,11 @@ import { CSSProperties, FC, ReactNode, useEffect, useRef, useState } from 'react
 import { Portal } from 'react-overlays';
 import usePopper, { Modifier, Placement } from 'react-overlays/usePopper';
 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 { useOnClickOutsideWithRef, useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { ITooltipProps, Tooltip } from '../Tooltip';
-import { useStyles, ITextWithTooltipStyles } from './TextWithTooltip.styles';
+import { ITextWithTooltipStyles, useStyles } from './TextWithTooltip.styles';
 
 export interface ITextWithTooltipProps extends ICommonProps<ITextWithTooltipStyles> {
   children: ReactNode;
@@ -18,10 +17,11 @@ export interface ITextWithTooltipProps extends ICommonProps<ITextWithTooltipStyl
   tooltipType?: ITooltipProps['type'];
   /** @default 'top' */
   tooltipPosition?: Placement;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   /** @default [] */
   tooltipModifiers?: Array<Partial<Modifier<any, any>>>;
   tooltipOffsetOptions?: Record<string, unknown>;
+  /** @default 'undefined' */
+  tooltipSize?: ITooltipProps['size'];
   /** @default 'hover' */
   mouseEventType?: 'hover' | 'click';
   hoverDelay?: number;
@@ -40,6 +40,7 @@ export const TextWithTooltip: FC<ITextWithTooltipProps> = ({
   tooltipType = 'info',
   tooltipModifiers = [],
   tooltipOffsetOptions,
+  tooltipSize,
   isDisabled = false,
   shouldRenderInBody = true,
   mouseEventType = 'hover',
@@ -129,8 +130,7 @@ export const TextWithTooltip: FC<ITextWithTooltipProps> = ({
         mouseEventType === 'click' && shouldShowTooltip && classes.clickable,
       )}
       {...(shouldShowTooltip ? props : undefined)}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
+      {...addDataAttributes(data, testId)}
       ref={root}
     >
       {shouldShowTooltip && (
@@ -145,6 +145,7 @@ export const TextWithTooltip: FC<ITextWithTooltipProps> = ({
               view={tooltipView}
               type={tooltipType}
               text={tooltipText}
+              size={tooltipSize}
               tweakStyles={tweakTooltipStyles}
             />
           </div>

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 = {};