@true-engineering/true-react-common-ui-kit 3.0.0-alpha.2 → 3.0.0-alpha.21

package/src/components/MoreMenu/MoreMenu.stories.tsx

@@ -1,46 +1,46 @@
-import { ComponentStory } from '@storybook/react';
-import { colors } from '../../theme';
-import { MoreMenu } from './MoreMenu';
-
-const menuItems = [
-  { item: 'Печатать билет', onClick: console.log },
-  { item: 'Выписать', onClick: console.log },
-  { item: 'Аннулировать', onClick: console.log, shouldDrawSpacerBelow: true },
-  {
-    item: (() => <div style={{ color: colors.RED_ACTIVE }}>Удалить</div>)(),
-    onClick: console.log,
-  },
-  {
-    item: (() => <div style={{ color: colors.RED_ACTIVE }}>Удалить</div>)(),
-    onClick: console.log,
-  },
-];
-
-export default {
-  title: 'MoreMenu',
-  component: MoreMenu,
-};
-
-const Template: ComponentStory<typeof MoreMenu> = (args) => (
-  <div
-    style={{
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      width: 600,
-      height: 400,
-    }}
-  >
-    <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
-      <div style={{ flexShrink: 0 }}>Test subject</div>
-      <MoreMenu {...args} items={menuItems} />
-    </div>
-  </div>
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  isDisabled: false,
-  hasDefaultStateBackground: true,
-};
+import { ComponentStory } from '@storybook/react';
+import { colors } from '../../theme';
+import { MoreMenu } from './MoreMenu';
+
+const menuItems = [
+  { item: 'Печатать билет', onClick: console.log },
+  { item: 'Выписать', onClick: console.log },
+  { item: 'Аннулировать', onClick: console.log, shouldDrawSpacerBelow: true },
+  {
+    item: (() => <div style={{ color: colors.RED_ACTIVE }}>Удалить</div>)(),
+    onClick: console.log,
+  },
+  {
+    item: (() => <div style={{ color: colors.RED_ACTIVE }}>Удалить</div>)(),
+    onClick: console.log,
+  },
+];
+
+export default {
+  title: 'MoreMenu',
+  component: MoreMenu,
+};
+
+const Template: ComponentStory<typeof MoreMenu> = (args) => (
+  <div
+    style={{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: 600,
+      height: 400,
+    }}
+  >
+    <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
+      <div style={{ flexShrink: 0 }}>Test subject</div>
+      <MoreMenu {...args} items={menuItems} />
+    </div>
+  </div>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  isDisabled: false,
+  hasDefaultStateBackground: true,
+};

package/src/components/MultiSelectList/MultiSelectList.styles.ts

@@ -8,6 +8,7 @@ const TOP_GAP = 12;
 
 export const useStyles = createThemedStyles('MultiSelectList', {
   root: {
+    width: 220,
     background: colors.CLASSIC_WHITE,
   },
 
@@ -101,10 +102,13 @@ export const searchInputStyles: ISearchInputStyles = {
 export const checkboxStyles: ICheckboxStyles = {
   root: {
     padding: [11, 16],
+    boxSizing: 'border-box',
+    width: '100%',
   },
 
   children: {
     marginRight: 'auto',
+    overflow: 'hidden',
   },
 };
 

package/src/components/MultiSelectList/MultiSelectList.tsx

@@ -22,7 +22,6 @@ import {
 export interface IMultiSelectListProps<Value, Option> extends ICommonProps<IMultiSelectListStyles> {
   value?: Value;
   isSearchEnabled?: boolean;
-  width?: number | string;
   localeKey?: IMultiSelectLocaleKey;
   locale?: Partial<IMultiSelectLocale>;
   onClose?: () => void;
@@ -43,7 +42,6 @@ export function MultiSelectList<Value extends IMultiSelectListValues<Option>, Op
   tweakStyles,
   data,
   isSearchEnabled = false,
-  width = 220,
   localeKey = DEFAULT_LOCALE,
   locale = MultiSelectLocales[localeKey],
   onChange,
@@ -329,7 +327,7 @@ export function MultiSelectList<Value extends IMultiSelectListValues<Option>, Op
   const shouldShowOptionsList = !isLoading && allOptions.length !== 0;
 
   return (
-    <div className={classes.root} style={{ width }} {...addDataAttributes(data)}>
+    <div className={classes.root} {...addDataAttributes(data)}>
       {isSearchEnabled && (
         <div className={classes.dropdownInput}>
           <SearchInput

package/src/components/NumberInput/index.ts

@@ -1 +1 @@
-export * from './NumberInput';
+export * from './NumberInput';

package/src/components/PhoneInput/types.ts

@@ -1,16 +1,16 @@
-export interface IPhoneInfo {
-  countryEn: string;
-  countryRu: string;
-  countryCode: string;
-  dialCode: string;
-  phoneMask?: string;
-  dialCodePriority?: number;
-  areaCodes?: string[];
-  fullCodes: string[];
-}
-
-export interface IPhoneValue {
-  phoneNumber?: string;
-  dialCode?: string;
-  countryCode?: string;
-}
+export interface IPhoneInfo {
+  countryEn: string;
+  countryRu: string;
+  countryCode: string;
+  dialCode: string;
+  phoneMask?: string;
+  dialCodePriority?: number;
+  areaCodes?: string[];
+  fullCodes: string[];
+}
+
+export interface IPhoneValue {
+  phoneNumber?: string;
+  dialCode?: string;
+  countryCode?: string;
+}

package/src/components/ScrollIntoViewIfNeeded/index.ts

@@ -1 +1 @@
-export * from './ScrollIntoViewIfNeeded';
+export * from './ScrollIntoViewIfNeeded';

package/src/components/Select/constants.ts

@@ -1,2 +1,2 @@
-export const DEFAULT_OPTION_INDEX = -2;
-export const ALL_OPTION_INDEX = -1;
+export const DEFAULT_OPTION_INDEX = -2;
+export const ALL_OPTION_INDEX = -1;

package/src/components/Select/types.ts

@@ -1 +1 @@
-export type IMultipleSelectValue<Value> = Array<NonNullable<Value>>;
+export type IMultipleSelectValue<Value> = Array<NonNullable<Value>>;

package/src/components/Skeleton/Skeleton.stories.tsx

@@ -0,0 +1,19 @@
+import { ComponentStory } from '@storybook/react';
+import { Skeleton } from './Skeleton';
+
+export default {
+  title: 'Skeleton',
+  component: Skeleton,
+};
+
+const Template: ComponentStory<typeof Skeleton> = (args) => (
+  <div style={{ padding: 32, backgroundColor: '#fff', width: 200 }}>
+    <Skeleton {...args} />
+  </div>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  height: '20px',
+};

package/src/components/Skeleton/Skeleton.styles.ts

@@ -0,0 +1,46 @@
+import { rgba } from '../../helpers';
+import { colors, createThemedStyles, ITweakStyles } from '../../theme';
+
+export const useStyles = createThemedStyles('Skeleton', {
+  root: {
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+    backgroundColor: rgba(colors.GREY_DISABLED, 0.8),
+    position: 'relative',
+    borderRadius: 4,
+    overflow: 'hidden',
+    '-webkit-mask-image': '-webkit-radial-gradient(white, black)',
+
+    '&::after': {
+      content: '""',
+      animation: '$skeleton 1.6s linear 0.5s infinite',
+      background: `linear-gradient(90deg, transparent, ${rgba(
+        colors.GREY_BACKGROUND,
+        0.65,
+      )}, transparent)`,
+      position: 'absolute',
+      transform: 'translateX(-100%)',
+      bottom: 0,
+      left: 0,
+      right: 0,
+      top: 0,
+    },
+  },
+
+  '@keyframes skeleton': {
+    '0%': {
+      transform: 'translateX(-100%)',
+    },
+
+    '50%': {
+      transform: 'translateX(100%)',
+    },
+
+    '100%': {
+      transform: 'translateX(100%)',
+    },
+  },
+});
+
+export type ISkeletonStyles = ITweakStyles<typeof useStyles>;

package/src/components/Skeleton/Skeleton.tsx

@@ -0,0 +1,12 @@
+import { CSSProperties, FC } from 'react';
+import { ICommonProps } from '../../types';
+import { ISkeletonStyles, useStyles } from './Skeleton.styles';
+
+export interface ISkeletonProps extends Pick<ICommonProps<ISkeletonStyles>, 'tweakStyles'> {
+  height?: CSSProperties['height'];
+}
+
+export const Skeleton: FC<ISkeletonProps> = ({ height, tweakStyles }) => {
+  const classes = useStyles({ theme: tweakStyles });
+  return <div className={classes.root} style={{ height }} />;
+};

package/src/components/Skeleton/index.ts

@@ -0,0 +1,2 @@
+export * from './Skeleton';
+export type { ISkeletonStyles } from './Skeleton.styles';

package/src/components/Switch/Switch.tsx

@@ -9,7 +9,7 @@ import { useStyles, ISwitchStyles } from './Switch.styles';
 export interface ISwitchProps<V extends string> extends ICommonProps<ISwitchStyles> {
   children?: ReactNode;
   value: V;
-  isChecked: boolean;
+  isChecked: boolean | undefined;
   isDisabled?: boolean;
   isInvalid?: boolean;
   /**
@@ -25,7 +25,7 @@ export interface ISwitchProps<V extends string> extends ICommonProps<ISwitchStyl
 
 export const Switch = <V extends string>({
   isDisabled,
-  isChecked,
+  isChecked = false,
   isInvalid,
   value,
   children,

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

@@ -1,58 +1,58 @@
-import { ComponentStory } from '@storybook/react';
-import { TextWithTooltip } from './TextWithTooltip';
-
-const positions = [
-  'top',
-  'bottom',
-  'right',
-  'left',
-  'top-start',
-  'top-end',
-  'bottom-start',
-  'bottom-end',
-  'right-start',
-  'right-end',
-  'left-start',
-  'left-end',
-  'auto',
-  'auto-start',
-  'auto-end',
-];
-
-export default {
-  title: '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) => (
-  <div
-    style={{
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      width: 600,
-      height: 400,
-    }}
-  >
-    <TextWithTooltip {...args} />
-  </div>
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  children: 'Наведи на меня - появится тултип',
-  tooltipText: 'Текст тултипа',
-  tooltipPosition: 'top',
-  tooltipView: 'tooltip',
-  tooltipType: 'info',
-  isDisabled: false,
-  mouseEventType: 'hover',
-  shouldRenderInBody: true,
-};
+import { ComponentStory } from '@storybook/react';
+import { TextWithTooltip } from './TextWithTooltip';
+
+const positions = [
+  'top',
+  'bottom',
+  'right',
+  'left',
+  'top-start',
+  'top-end',
+  'bottom-start',
+  'bottom-end',
+  'right-start',
+  'right-end',
+  'left-start',
+  'left-end',
+  'auto',
+  'auto-start',
+  'auto-end',
+];
+
+export default {
+  title: '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) => (
+  <div
+    style={{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: 600,
+      height: 400,
+    }}
+  >
+    <TextWithTooltip {...args} />
+  </div>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  children: 'Наведи на меня - появится тултип',
+  tooltipText: 'Текст тултипа',
+  tooltipPosition: 'top',
+  tooltipView: 'tooltip',
+  tooltipType: 'info',
+  isDisabled: false,
+  mouseEventType: 'hover',
+  shouldRenderInBody: true,
+};

package/src/components/ThemedPreloader/components/DefaultPreloader/index.ts

@@ -1 +1 @@
-export * from './DefaultPreloader';
+export * from './DefaultPreloader';

package/src/components/Tooltip/types.ts

@@ -1 +1 @@
-export type ITooltipType = 'info' | 'warning';
+export type ITooltipType = 'info' | 'warning';

package/src/components/index.ts

@@ -34,3 +34,4 @@ export * from './ThemedPreloader';
 export * from './Toaster';
 export * from './Tooltip';
 export * from './ScrollIntoViewIfNeeded';
+export * from './Skeleton';

package/src/helpers/phone.ts

@@ -18,7 +18,7 @@ export const getCountryTextByLocale = (country: IPhoneInfo, locale: string): str
   locale.toLowerCase() === 'ru' ? country.countryRu : country.countryEn;
 
 /**
- * Мутирует!
+ * Мутирует countriesList!
  */
 export const sortCountriesByLocale = (countriesList: IPhoneInfo[], locale: string): IPhoneInfo[] =>
   countriesList.sort((countryA, countryB) =>

package/src/helpers/popper-helpers.ts

@@ -1,17 +1,17 @@
-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,
-  phase: 'beforeWrite',
-  requires: ['computeStyles'],
-  fn: ({ state }) => {
-    state.styles.popper.minWidth = `${state.rects.reference.width}px`;
-  },
-  effect: ({ state }) => {
-    state.elements.popper.style.minWidth = `${
-      (state.elements.reference as HTMLElement).offsetWidth
-    }px`;
-  },
-};
+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,
+  phase: 'beforeWrite',
+  requires: ['computeStyles'],
+  fn: ({ state }) => {
+    state.styles.popper.minWidth = `${state.rects.reference.width}px`;
+  },
+  effect: ({ state }) => {
+    state.elements.popper.style.minWidth = `${
+      (state.elements.reference as HTMLElement).offsetWidth
+    }px`;
+  },
+};

package/src/hooks/index.ts

@@ -4,3 +4,4 @@ export * from './use-dropdown';
 export * from './use-tweak-styles';
 export * from './use-did-mount-effect';
 export * from './use-mixed-styles';
+export * from './use-merged-refs';

package/src/hooks/use-is-mounted.ts

@@ -1,15 +1,15 @@
-import { useCallback, useEffect, useRef } from 'react';
-
-export const useIsMounted = (): (() => boolean) => {
-  const isMounted = useRef(false);
-
-  useEffect(() => {
-    isMounted.current = true;
-
-    return () => {
-      isMounted.current = false;
-    };
-  }, []);
-
-  return useCallback(() => isMounted.current, []);
-};
+import { useCallback, useEffect, useRef } from 'react';
+
+export const useIsMounted = (): (() => boolean) => {
+  const isMounted = useRef(false);
+
+  useEffect(() => {
+    isMounted.current = true;
+
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  return useCallback(() => isMounted.current, []);
+};

package/src/hooks/use-merged-refs.ts

@@ -0,0 +1,4 @@
+import { useMemo } from 'react';
+import { mergeRefs } from '@true-engineering/true-react-platform-helpers';
+
+export const useMergedRefs: typeof mergeRefs = (refs) => useMemo(() => mergeRefs(refs), refs);

package/src/theme/types.ts

@@ -52,6 +52,7 @@ import type {
   IFlexibleTableCellStyles,
   IFlexibleTableRowStyles,
   IFilterValueViewStyles,
+  ISkeletonStyles,
 } from '../components';
 
 export type IStyles<C extends string, P> = Styles<C, P, Partial<Styles<C, P>>>;
@@ -108,6 +109,7 @@ export interface IComponentStyles {
   SearchInput: ISearchInputStyles;
   Select: ISelectStyles;
   SelectList: ISelectListStyles;
+  Skeleton: ISkeletonStyles;
   Switch: ISwitchStyles;
   TextArea: ITextAreaStyles;
   TextWithInfo: ITextWithInfoStyles;

package/src/vite-env.d.ts

@@ -1 +1 @@
-/// <reference types="vite/client" />
+/// <reference types="vite/client" />