@true-engineering/true-react-common-ui-kit 4.0.0-alpha43 → 4.0.0-alpha45

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/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/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/Tooltip/Tooltip.stories.tsx

@@ -1,7 +1,7 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { type Meta } from '@storybook/react';
 import { Tooltip } from './Tooltip';
 
-export default {
+const meta: Meta<typeof Tooltip> = {
   title: 'Data Display/Tooltip',
   component: Tooltip,
   args: {
@@ -14,6 +14,7 @@ export default {
     view: { control: 'inline-radio', options: ['tooltip', 'hint'] },
     type: { control: 'inline-radio', options: ['info', 'error'] },
   },
-} as ComponentMeta<typeof Tooltip>;
+};
 
-export const Default: ComponentStory<typeof Tooltip> = (args) => <Tooltip {...args} />;
+export default meta;
+export const Default = {};

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: 'Data Display/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/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/WithTooltip/WithTooltip.stories.tsx

@@ -1,5 +1,6 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { WithTooltip } from './WithTooltip';
+import { FC } from 'react';
+import { type Meta } from '@storybook/react';
+import { IWithTooltipProps, WithTooltip } from './WithTooltip';
 
 const positions = [
   'top',
@@ -16,20 +17,23 @@ const positions = [
   'left-end',
 ];
 
-const meta: Meta<typeof WithTooltip> = {
-  title: 'Data Display/WithTooltip',
-  component: WithTooltip,
-  argTypes: {
-    placement: { control: 'select', options: positions },
-    tooltipView: { control: 'inline-radio', options: ['tooltip', 'hint'] },
-    tooltipType: { control: 'inline-radio', options: ['info', 'error'] },
-    eventType: { control: 'inline-radio', options: ['hover', 'click'] },
-  },
-};
-export default meta;
-type IStory = StoryObj<typeof WithTooltip>;
+const Story: FC<IWithTooltipProps> = (args) => (
+  <div
+    style={{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: 600,
+      height: 400,
+    }}
+  >
+    <WithTooltip {...args} />
+  </div>
+);
 
-export const Default: IStory = {
+const meta: Meta<typeof Story> = {
+  title: 'Data Display/WithTooltip',
+  component: Story,
   args: {
     children: 'Наведи на меня - появится тултип',
     tooltipText: 'Текст тултипа',
@@ -40,17 +44,13 @@ export const Default: IStory = {
     isDisabled: false,
     shouldRenderInBody: true,
   },
-  render: (args) => (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: 600,
-        height: 400,
-      }}
-    >
-      <WithTooltip {...args} />
-    </div>
-  ),
+  argTypes: {
+    placement: { control: 'select', options: positions },
+    tooltipView: { control: 'inline-radio', options: ['tooltip', 'hint'] },
+    tooltipType: { control: 'inline-radio', options: ['info', 'error'] },
+    eventType: { control: 'inline-radio', options: ['hover', 'click'] },
+  },
 };
+
+export default meta;
+export const Default = {};

package/src/components/index.ts

@@ -3,7 +3,6 @@ export * from './AddButton';
 export * from './Button';
 export * from './Checkbox';
 export * from './CloseButton';
-export * from './Colors';
 export * from './CssBaseline';
 export * from './DateInput';
 export * from './DatePicker';

package/src/helpers/misc.ts

@@ -157,3 +157,6 @@ export const addDataAttributes = (data: IDataAttributes = {}): IDataAttributes =
         : [],
     ),
   );
+
+export const excludeStorybookParams = (params: string[]): RegExp =>
+  new RegExp(`^(on.*|${['tweakStyles', 'data', ...params].join('|')})$`);

package/dist/components/Colors/Colors.d.ts

@@ -1,2 +0,0 @@
-import { FC } from 'react';
-export declare const Colors: FC;

package/dist/components/Colors/Colors.styles.d.ts

@@ -1 +0,0 @@
-export declare const useStyles: import("../../theme").IUseStyles<"color" | "root" | "colorCard" | "colorName" | "hex", unknown>;

package/dist/components/Colors/index.d.ts

@@ -1 +0,0 @@
-export * from './Colors';

package/src/components/Colors/Colors.styles.ts

@@ -1,36 +0,0 @@
-import { createThemedStyles } from '../../theme';
-
-export const useStyles = createThemedStyles({
-  root: {
-    display: 'flex',
-    flexWrap: 'wrap',
-  },
-
-  colorCard: {
-    width: 120,
-    border: 'solid 1px #dde3ed',
-    borderRadius: 8,
-    color: '#222a37',
-    fontSize: 14,
-    margin: 6,
-  },
-
-  color: {
-    height: 120,
-    borderTopLeftRadius: 8,
-    borderTopRightRadius: 8,
-  },
-
-  colorName: {
-    marginBottom: 6,
-    padding: 6,
-    overflow: 'hidden',
-  },
-
-  hex: {
-    marginTop: 6,
-    textTransform: 'uppercase',
-    fontWeight: 'bold',
-    padding: [0, 6, 6],
-  },
-});

package/src/components/Colors/Colors.tsx

@@ -1,26 +0,0 @@
-import { FC } from 'react';
-import { useTheme } from '../../theme';
-import { useStyles } from './Colors.styles';
-
-// TODO: А зачем нужен то этот компонент кроме как ради сторис?????? мб его толкьо в сторис оформить?
-
-export const Colors: FC = () => {
-  const classes = useStyles();
-  const theme = useTheme();
-  const { colors = {} } = theme;
-
-  return (
-    <div className={classes.root}>
-      {Object.entries(colors as Record<string, string>).map(([colorName, color]) => {
-        const name = colorName.split('_').join(' ').toLowerCase();
-        return (
-          <div key={colorName} className={classes.colorCard}>
-            <div className={classes.color} style={{ backgroundColor: color }} />
-            <div className={classes.colorName}>{`${name[0].toUpperCase()}${name.slice(1)}`}</div>
-            <div className={classes.hex}>{color}</div>
-          </div>
-        );
-      })}
-    </div>
-  );
-};

package/src/components/Colors/index.ts

@@ -1 +0,0 @@
-export * from './Colors';