@true-engineering/true-react-common-ui-kit 4.0.0-alpha44 → 4.0.0-alpha46

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,28 @@ 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,
+  },
+  parameters: {
+    controls: {
+      exclude: excludeStorybookParams(['options', 'value']),
+    },
   },
 };
+
+export default meta;
+export const Default = {};

package/src/components/Selector/Selector.tsx

@@ -11,7 +11,7 @@ import { addDataAttributes } from '../../helpers';
 import { ICommonProps } from '../../types';
 import { renderIcon } from '../Icon';
 import { ISelectorOption, ISelectorValue } from './types';
-import { getSelectorLineStyle, useStyles, ISelectorStyles } from './Selector.styles';
+import { getSelectorLineStyle, ISelectorStyles, useStyles } from './Selector.styles';
 
 export interface ISelectorProps<V extends ISelectorValue> extends ICommonProps<ISelectorStyles> {
   options: Array<ISelectorOption<V>>;
@@ -52,7 +52,6 @@ export function Selector<V extends ISelectorValue>({
   const listRef = useRef<HTMLDivElement>(null);
 
   if (hasDuplicates(optionsValues)) {
-    // eslint-disable-next-line no-console
     console.error('Selector: Значения options.value должны быть уникальными');
   }
 

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

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

@@ -1,12 +1,13 @@
-import { ComponentStory } from '@storybook/react';
-import { rgba } from '../../helpers';
+import { FC } from 'react';
+import { type Meta } from '@storybook/react';
+import { excludeStorybookParams, rgba } from '../../helpers';
 import { IExtendableProps } from '../../types';
 import { iconsMap } from '../Icon';
-import { Status } from './Status';
+import { IStatusProps, Status } from './Status';
 import { STATUS_SIZES } from './constants';
 import { IStatusStyles } from './Status.styles';
 
-export const STATUS_COLORS = [
+const STATUS_COLORS = [
   'green',
   'teal',
   'blue',
@@ -17,18 +18,11 @@ export const STATUS_COLORS = [
   'custom',
 ] as const;
 
-export default {
-  title: 'Data Display/Status',
-  component: Status,
-};
-
 declare module './types' {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
   export interface IStatusColors extends IExtendableProps<typeof STATUS_COLORS> {}
 }
 
-const icons = [undefined, ...Object.keys(iconsMap)];
-
 const customTweakStyles: IStatusStyles = {
   green: {
     '--status-background': rgba('#D4E3AC', 0.5),
@@ -71,7 +65,7 @@ const customTweakStyles: IStatusStyles = {
   },
 };
 
-const Template: ComponentStory<typeof Status> = (args) => (
+const Story: FC<IStatusProps> = (args) => (
   <div
     style={{
       display: 'grid',
@@ -100,22 +94,27 @@ const Template: ComponentStory<typeof Status> = (args) => (
   </div>
 );
 
-export const Default = Template.bind({});
-
-Default.args = {
-  children: 'Status',
-  badge: '+ Badge',
-  icon: 'balloon',
-  iconPosition: 'left',
-};
-
-Default.argTypes = {
-  icon: { options: icons, control: 'select' },
-  iconPosition: { options: ['left', 'right'], control: 'inline-radio' },
-};
-
-Default.parameters = {
-  controls: {
-    exclude: ['size', 'color', 'tweakStyles', 'testId', 'data'],
+const meta: Meta<typeof Story> = {
+  title: 'Data Display/Status',
+  component: Story,
+  args: {
+    children: 'Status',
+    badge: '+ Badge',
+    icon: 'information',
+    iconPosition: 'left',
+    color: 'blue',
+    size: 's',
+  },
+  argTypes: {
+    icon: { options: [undefined, ...Object.keys(iconsMap)], control: 'select' },
+    iconPosition: { options: ['left', 'right'], control: 'inline-radio' },
+  },
+  parameters: {
+    controls: {
+      exclude: excludeStorybookParams(['color', 'size']),
+    },
   },
 };
+
+export default meta;
+export const Default = {};

package/src/components/Status/types.ts

@@ -3,7 +3,7 @@ import type { STATUS_SIZES } from './constants';
 
 export type IStatusSize = (typeof STATUS_SIZES)[number];
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface IStatusColors extends IDefaultExtendableProps {}
 
 export type IStatusColor = keyof IStatusColors;

package/src/components/Switch/Switch.stories.tsx

@@ -1,19 +1,9 @@
-import { useState } from 'react';
-import { ComponentStory } from '@storybook/react';
-import { Switch } from './Switch';
+import { FC, useState } from 'react';
+import { type Meta } from '@storybook/react';
+import { ISwitchProps, Switch } from './Switch';
 
-export default {
-  title: 'Controls/Switch',
-  component: Switch,
-  argTypes: {
-    labelPosition: { control: 'inline-radio', options: ['left', 'right'] },
-    color: { control: 'inline-radio', options: ['primary', 'secondary'] },
-  },
-};
-
-const Template: ComponentStory<typeof Switch> = (args) => {
+const Story: FC<ISwitchProps<string>> = (args) => {
   const [isChecked, setIsChecked] = useState(true);
-
   return (
     <Switch
       {...args}
@@ -24,17 +14,20 @@ const Template: ComponentStory<typeof Switch> = (args) => {
   );
 };
 
-export const Default = Template.bind({});
-
-Default.args = {
-  children: 'Label',
-  labelPosition: 'right',
-  isDisabled: false,
-  color: 'primary',
-};
-
-Default.parameters = {
-  controls: {
-    exclude: ['data', 'testId', 'onChange'],
+const meta: Meta<typeof Story> = {
+  title: 'Controls/Switch',
+  component: Story,
+  args: {
+    children: 'Label',
+    labelPosition: 'right',
+    isDisabled: false,
+    color: 'primary',
+  },
+  argTypes: {
+    labelPosition: { control: 'inline-radio', options: ['left', 'right'] },
+    color: { control: 'inline-radio', options: ['primary', 'secondary'] },
   },
 };
+
+export default meta;
+export const Default = {};

package/src/components/TextArea/TextArea.stories.tsx

@@ -1,49 +1,46 @@
-import { useState } from 'react';
-import { ComponentStory } from '@storybook/react';
+import { FC, useState } from 'react';
+import { type Meta } from '@storybook/react';
 import { IExtendableProps } from '../../types';
-import { TextArea } from './TextArea';
+import { ITextAreaProps, TextArea } from './TextArea';
 
 const COUNTER_POSITIONS = ['default', 'top'] as const;
 
-export default {
-  title: 'Inputs/TextArea',
-  component: TextArea,
-  argTypes: {
-    maxLength: {
-      control: { type: 'range', min: 10, max: 500, step: 10 },
-    },
-  },
-};
-
 declare module './types' {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
   export interface ITextAreaCounterPositions extends IExtendableProps<typeof COUNTER_POSITIONS> {}
 }
 
-const Template: ComponentStory<typeof TextArea> = (args) => {
+const Story: FC<ITextAreaProps> = (args) => {
   const [value, setValue] = useState('');
   return <TextArea {...args} value={value} onChange={setValue} />;
 };
 
-export const Default = Template.bind({});
-
-Default.args = {
-  label: 'Label',
-  placeholder: 'Placeholder',
-  infoMessage: 'Message Info',
-  rows: 5,
-  maxLength: 500,
-  isInvalid: false,
-  counterPosition: 'default',
-  errorMessage: 'Error Text',
-  isActive: false,
-  isDisabled: false,
-  isRequired: false,
-  isAutoSized: true,
-  shouldAlwaysShowPlaceholder: false,
-  size: undefined,
+const meta: Meta<typeof Story> = {
+  title: 'Inputs/TextArea',
+  component: Story,
+  args: {
+    label: 'Label',
+    placeholder: 'Placeholder',
+    infoMessage: 'Message Info',
+    rows: 5,
+    maxLength: 500,
+    isInvalid: false,
+    counterPosition: 'default',
+    errorMessage: 'Error Text',
+    isActive: false,
+    isDisabled: false,
+    isRequired: false,
+    isAutoSized: true,
+    shouldAlwaysShowPlaceholder: false,
+    size: undefined,
+  },
+  argTypes: {
+    counterPosition: { options: [undefined, ...COUNTER_POSITIONS], control: 'select' },
+    maxLength: {
+      control: { type: 'range', min: 10, max: 500, step: 10 },
+    },
+  },
 };
 
-Default.argTypes = {
-  counterPosition: { options: [undefined, ...COUNTER_POSITIONS], control: 'select' },
-};
+export default meta;
+export const Default = {};

package/src/components/TextArea/types.ts

@@ -1,6 +1,6 @@
 import { IExtendableProps } from '../../types';
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface ITextAreaCounterPositions extends IExtendableProps<'default'> {}
 
 export type ITextAreaCounterPosition = keyof ITextAreaCounterPositions;

package/src/components/TextButton/TextButton.stories.tsx

@@ -1,11 +1,9 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { type Meta } from '@storybook/react';
 import { iconsMap } from '../Icon';
 import { TextButton } from './TextButton';
 import { TEXT_BUTTON_SIZES, TEXT_BUTTON_VIEWS } from './constants';
 
-const icons = [undefined, ...Object.keys(iconsMap)];
-
-export default {
+const meta: Meta<typeof TextButton> = {
   title: 'Buttons/TextButton',
   component: TextButton,
   args: {
@@ -21,22 +19,14 @@ export default {
     iconPosition: 'left',
     preloaderType: 'dots',
   },
-
   argTypes: {
-    icon: { control: 'select', options: icons },
+    icon: { control: 'select', options: [undefined, Object.keys(iconsMap)] },
     size: { options: TEXT_BUTTON_SIZES, control: 'inline-radio' },
     view: { options: TEXT_BUTTON_VIEWS, control: 'inline-radio' },
     iconPosition: { control: 'inline-radio' },
     preloaderType: { control: 'inline-radio' },
   },
+};
 
-  parameters: {
-    controls: {
-      exclude: ['testId', 'tweakStyles', 'data', 'onClick'],
-    },
-  },
-} as ComponentMeta<typeof TextButton>;
-
-export const Default: ComponentStory<typeof TextButton> = (args) => (
-  <TextButton {...args} key={args.size} />
-);
+export default meta;
+export const Default = {};

package/src/components/TextWithInfo/TextWithInfo.stories.tsx

@@ -1,17 +1,13 @@
 import { FC, useState } from 'react';
-import { ComponentStory } from '@storybook/react';
+import { type Meta } from '@storybook/react';
 import { ITextWithInfoProps, TextWithInfo } from './TextWithInfo';
 
-interface ITextWithInfoWithCustomProps extends ITextWithInfoProps {
+interface ITextWithInfoCustomProps extends ITextWithInfoProps {
   infoTooltip: string;
   link: string;
 }
 
-const TextWithInfoWithCustomProps: FC<ITextWithInfoWithCustomProps> = ({
-  infoTooltip,
-  link,
-  ...args
-}) => {
+const Story: FC<ITextWithInfoCustomProps> = ({ infoTooltip, link, ...args }) => {
   const [isSelected, setIsSelected] = useState(false);
 
   return (
@@ -34,20 +30,16 @@ const TextWithInfoWithCustomProps: FC<ITextWithInfoWithCustomProps> = ({
   );
 };
 
-export default {
+const meta: Meta<typeof Story> = {
   title: 'Data Display/TextWithInfo',
-  component: TextWithInfoWithCustomProps,
+  component: Story,
+  args: {
+    text: 'Обычная перевозка',
+    textTooltip: 'Tултип для самой обычной перевозки',
+    infoTooltip: 'Читать подробную информацию',
+    link: 'https://ya.ru/',
+  },
 };
 
-const Template: ComponentStory<typeof TextWithInfoWithCustomProps> = (args) => (
-  <TextWithInfoWithCustomProps {...args} />
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  text: 'Обычная перевозка',
-  textTooltip: 'Tултип для самой обычной перевозки',
-  infoTooltip: 'Читать подробную информацию',
-  link: 'https://ya.ru/',
-};
+export default meta;
+export const Default = {};

package/src/components/TextWithTooltip/TextWithTooltip.stories.tsx

@@ -1,5 +1,6 @@
-import { ComponentStory } from '@storybook/react';
-import { TextWithTooltip } from './TextWithTooltip';
+import { FC } from 'react';
+import { type Meta } from '@storybook/react';
+import { ITextWithTooltipProps, TextWithTooltip } from './TextWithTooltip';
 
 const positions = [
   'top',
@@ -19,18 +20,7 @@ const positions = [
   'auto-end',
 ];
 
-export default {
-  title: 'Data Display/TextWithTooltip',
-  component: TextWithTooltip,
-  argTypes: {
-    tooltipPosition: { control: 'select', options: positions },
-    tooltipView: { control: 'inline-radio', options: ['tooltip', 'hint'] },
-    tooltipType: { control: 'inline-radio', options: ['info', 'error'] },
-    mouseEventType: { control: 'inline-radio', options: ['hover', 'click'] },
-  },
-};
-
-const Template: ComponentStory<typeof TextWithTooltip> = (args) => (
+const Story: FC<ITextWithTooltipProps> = (args) => (
   <div
     style={{
       display: 'flex',
@@ -44,15 +34,26 @@ const Template: ComponentStory<typeof TextWithTooltip> = (args) => (
   </div>
 );
 
-export const Default = Template.bind({});
-
-Default.args = {
-  children: 'Наведи на меня - появится тултип',
-  tooltipText: 'Текст тултипа',
-  tooltipPosition: 'top',
-  tooltipView: 'tooltip',
-  tooltipType: 'info',
-  isDisabled: false,
-  mouseEventType: 'hover',
-  shouldRenderInBody: true,
+const meta: Meta<typeof Story> = {
+  title: 'Data Display/TextWithTooltip',
+  component: Story,
+  args: {
+    children: 'Наведи на меня - появится тултип',
+    tooltipText: 'Текст тултипа',
+    tooltipPosition: 'top',
+    tooltipView: 'tooltip',
+    tooltipType: 'info',
+    isDisabled: false,
+    mouseEventType: 'hover',
+    shouldRenderInBody: true,
+  },
+  argTypes: {
+    tooltipPosition: { control: 'select', options: positions },
+    tooltipView: { control: 'inline-radio', options: ['tooltip', 'hint'] },
+    tooltipType: { control: 'inline-radio', options: ['info', 'error'] },
+    mouseEventType: { control: 'inline-radio', options: ['hover', 'click'] },
+  },
 };
+
+export default meta;
+export const Default = {};

package/src/components/TextWithTooltip/TextWithTooltip.tsx

@@ -7,7 +7,7 @@ import { addDataAttributes } from '../../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,7 +18,6 @@ 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>;

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