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

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

@@ -21,6 +21,11 @@ export const transformToKebab = (string: string): string => {
   return result;
 };
 
+export const getParentNode = (element: Element | ShadowRoot | Document): Element =>
+  element.nodeName === 'HTML' || element === document
+    ? (element as Element)
+    : (element.parentNode as Element) ?? (element as ShadowRoot).host;
+
 export const hasExactParent = (element: Element, parent: Element): boolean => {
   if (element === parent) {
     return true; // Found the exact parent
@@ -35,11 +40,6 @@ export const hasExactParent = (element: Element, parent: Element): boolean => {
   return hasExactParent(parentNode, parent);
 };
 
-export const getParentNode = (element: Element | ShadowRoot | Document): Element =>
-  element.nodeName === 'HTML' || element === document
-    ? (element as Element)
-    : (element.parentNode as Element) ?? (element as ShadowRoot).host;
-
 export const getStyleComputedProperty = (element: Element): Partial<CSSStyleDeclaration> =>
   element.nodeType !== 1 ? {} : getComputedStyle(element, null);
 
@@ -157,3 +157,6 @@ export const addDataAttributes = (data: IDataAttributes = {}): IDataAttributes =
         : [],
     ),
   );
+
+export const excludeStorybookParams = (params: string[]): RegExp =>
+  new RegExp(`^(on.*|${['tweakStyles', 'data', ...params].join('|')})$`);

package/src/helpers/popper-helpers.ts

@@ -1,6 +1,5 @@
 import { Modifier } from 'react-overlays/usePopper';
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const minWidthModifier: Partial<Modifier<any, any>> = {
   name: 'minWidth',
   enabled: true,

package/src/theme/helpers.ts

@@ -58,7 +58,9 @@ export const getTweakStylesCache = (): TweakStylesCache => {
     if (!cache.has(next)) {
       cache.set(next, getTweakStylesCache());
     }
-    return cache.get(next)!; // eslint-disable-line @typescript-eslint/no-non-null-assertion
+
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    return cache.get(next)!;
   };
 
   return (styles, prev = []) => {

package/src/theme/true-jss/ThemedStylesManager.ts

@@ -87,6 +87,7 @@ export class ThemedStylesManager<C extends string> {
       this.#styleSheetMap.set(theme, { sheet, manager, refs: 0 });
     }
 
-    return this.#styleSheetMap.get(theme)!; // eslint-disable-line @typescript-eslint/no-non-null-assertion
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    return this.#styleSheetMap.get(theme)!;
   }
 }

package/src/theme/true-jss/TweakStylesManager.ts

@@ -1,4 +1,4 @@
-import type { StyleSheet, Classes, Rule } from 'jss';
+import type { Classes, Rule, StyleSheet } from 'jss';
 import {
   isArrayNotEmpty,
   isNotEmpty,
@@ -142,7 +142,6 @@ declare module 'jss' {
   export interface RuleList {
     index: Rule[];
   }
-  // eslint-disable-next-line no-shadow
   export interface StyleSheet<RuleName> {
     rules: RuleList;
     // eslint-disable-next-line @typescript-eslint/method-signature-style

package/src/theme/types.ts

@@ -148,7 +148,6 @@ export interface IComponentStyles {
 
 export type IComponentName = keyof IComponentStyles;
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type IUiKitAnimations = Record<string, any>;
 export type IUiKitHelpers = Record<string, Styles | (() => Styles)>;
 

package/src/types.ts

@@ -36,11 +36,9 @@ export interface IDropdownWithPopperOptions {
 
   shouldHideOnScroll?: boolean; // работает весьма условно без shouldUsePopper
   canBeFlipped?: boolean; // только с shouldUsePopper
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   modifiers?: Array<Partial<Modifier<any, any>>>; // только с shouldUsePopper
   placement?: Placement; // only with shouldUsePopper
   // https://popper.js.org/docs/v2/modifiers/flip/
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   flipOptions?: Record<string, any>; // только с shouldUsePopper
 }
 export type IClickHandlerEvent = MouseEvent | KeyboardEvent;

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';

package/src/components/Flag/customFlags/augment.d.ts

@@ -1 +0,0 @@
-declare module '*.svg?raw';