@true-engineering/true-react-common-ui-kit 3.45.2 → 4.0.0-alpha0

package/src/components/MultiSelectList/constants.ts

@@ -1,21 +1,21 @@
-import type { IMultiSelectLocale, IMultiSelectLocaleKey } from './types';
-
-export const MultiSelectLocales: Record<string, IMultiSelectLocale> = {
-  ru: {
-    clear: 'Очистить',
-    all: 'Все',
-    chosen: 'Выбранные',
-    nothingFound: 'Не найдено',
-    searchPlaceholder: 'Поиск',
-  },
-
-  en: {
-    clear: 'Clear',
-    all: 'All',
-    chosen: 'Chosen',
-    nothingFound: 'Nothing found',
-    searchPlaceholder: 'Search',
-  },
-};
-
-export const DEFAULT_LOCALE: IMultiSelectLocaleKey = 'en';
+import type { IMultiSelectLocale, IMultiSelectLocaleKey } from './types';
+
+export const MultiSelectLocales: Record<string, IMultiSelectLocale> = {
+  ru: {
+    clear: 'Очистить',
+    all: 'Все',
+    chosen: 'Выбранные',
+    nothingFound: 'Не найдено',
+    searchPlaceholder: 'Поиск',
+  },
+
+  en: {
+    clear: 'Clear',
+    all: 'All',
+    chosen: 'Chosen',
+    nothingFound: 'Nothing found',
+    searchPlaceholder: 'Search',
+  },
+};
+
+export const DEFAULT_LOCALE: IMultiSelectLocaleKey = 'en';

package/src/components/MultiSelectList/helpers.ts

@@ -1,11 +1,11 @@
-import merge from 'lodash-es/merge';
-import { DEFAULT_LOCALE, MultiSelectLocales } from './constants';
-import type { IMultiSelectLocale, IMultiSelectLocaleKey } from './types';
-
-export const defaultConvertFunction = (val: unknown): string => String(val);
-
-export const getLocale = (
-  key: IMultiSelectLocaleKey = DEFAULT_LOCALE,
-  custom?: Partial<IMultiSelectLocale>,
-  custom2?: Partial<IMultiSelectLocale>,
-): IMultiSelectLocale => merge({}, MultiSelectLocales[key], custom, custom2);
+import merge from 'lodash-es/merge';
+import { DEFAULT_LOCALE, MultiSelectLocales } from './constants';
+import type { IMultiSelectLocale, IMultiSelectLocaleKey } from './types';
+
+export const defaultConvertFunction = (val: unknown): string => String(val);
+
+export const getLocale = (
+  key: IMultiSelectLocaleKey = DEFAULT_LOCALE,
+  custom?: Partial<IMultiSelectLocale>,
+  custom2?: Partial<IMultiSelectLocale>,
+): IMultiSelectLocale => merge({}, MultiSelectLocales[key], custom, custom2);

package/src/components/MultiSelectList/index.ts

@@ -1,3 +1,3 @@
-export * from './MultiSelectList';
-export * from './types';
-export type { IMultiSelectListStyles } from './MultiSelectList.styles';
+export * from './MultiSelectList';
+export * from './types';
+export type { IMultiSelectListStyles } from './MultiSelectList.styles';

package/src/components/MultiSelectList/types.ts

@@ -1,15 +1,15 @@
-import { MultiSelectLocales } from './constants';
-
-export interface IMultiSelectListValues<Option> {
-  include: Option[];
-}
-
-export interface IMultiSelectLocale {
-  clear: string;
-  all: string;
-  chosen: string;
-  searchPlaceholder: string;
-  nothingFound: string;
-}
-
-export type IMultiSelectLocaleKey = keyof typeof MultiSelectLocales;
+import { MultiSelectLocales } from './constants';
+
+export interface IMultiSelectListValues<Option> {
+  include: Option[];
+}
+
+export interface IMultiSelectLocale {
+  clear: string;
+  all: string;
+  chosen: string;
+  searchPlaceholder: string;
+  nothingFound: string;
+}
+
+export type IMultiSelectLocaleKey = keyof typeof MultiSelectLocales;

package/src/components/NewMoreMenu/NewMoreMenu.stories.tsx

@@ -1,74 +1,74 @@
-import { ComponentStory } from '@storybook/react';
-import { colors } from '../../theme';
-import { NewMoreMenu } from './NewMoreMenu';
-
-const positions = [
-  'top',
-  'bottom',
-  'right',
-  'left',
-  'top-start',
-  'top-end',
-  'bottom-start',
-  'bottom-end',
-  'right-start',
-  'right-end',
-  'left-start',
-  'left-end',
-];
-
-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: 'Data Display/NewMoreMenu',
-  component: NewMoreMenu,
-  argTypes: {
-    placement: { control: 'select', options: positions },
-  },
-};
-
-const Template: ComponentStory<typeof NewMoreMenu> = (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>
-      <NewMoreMenu {...args} items={menuItems} />
-    </div>
-  </div>
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  canBeFlipped: false,
-  isDisabled: false,
-  hasDefaultStateBackground: true,
-  placement: 'bottom-end',
-  shouldRenderInBody: false,
-  shouldHideOnScroll: false,
-};
-
-Default.parameters = {
-  controls: {
-    exclude: ['items', 'middlewares', 'testId', 'data'],
-  },
-};
+import { ComponentStory } from '@storybook/react';
+import { colors } from '../../theme';
+import { NewMoreMenu } from './NewMoreMenu';
+
+const positions = [
+  'top',
+  'bottom',
+  'right',
+  'left',
+  'top-start',
+  'top-end',
+  'bottom-start',
+  'bottom-end',
+  'right-start',
+  'right-end',
+  'left-start',
+  'left-end',
+];
+
+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: 'Data Display/NewMoreMenu',
+  component: NewMoreMenu,
+  argTypes: {
+    placement: { control: 'select', options: positions },
+  },
+};
+
+const Template: ComponentStory<typeof NewMoreMenu> = (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>
+      <NewMoreMenu {...args} items={menuItems} />
+    </div>
+  </div>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  canBeFlipped: false,
+  isDisabled: false,
+  hasDefaultStateBackground: true,
+  placement: 'bottom-end',
+  shouldRenderInBody: false,
+  shouldHideOnScroll: false,
+};
+
+Default.parameters = {
+  controls: {
+    exclude: ['items', 'middlewares', 'testId', 'data'],
+  },
+};

package/src/components/NewMoreMenu/NewMoreMenu.styles.ts

@@ -1,39 +1,39 @@
-import { colors, ITweakStyles, createThemedStyles, animations } from '../../theme';
-import { IListStyles } from '../List';
-import { IWithPopupStyles } from '../WithPopup';
-
-export const useStyles = createThemedStyles('NewMoreMenu', {
-  hasCircle: {},
-
-  button: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: 32,
-    height: 32,
-    backgroundColor: 'transparent',
-    color: colors.FONT_MEDIUM,
-    padding: 0,
-    borderRadius: '50%',
-    border: 'none',
-    cursor: 'pointer',
-    transition: animations.defaultTransition,
-    transitionProperty: 'background-color',
-  },
-
-  icon: {
-    width: 30,
-    height: 30,
-  },
-
-  active: {},
-
-  disabled: {
-    cursor: 'default',
-  },
-});
-
-export type INewMoreMenuStyles = ITweakStyles<
-  typeof useStyles,
-  { tweakList: IListStyles; tweakWithPopup: IWithPopupStyles }
->;
+import { colors, ITweakStyles, createThemedStyles, animations } from '../../theme';
+import { IListStyles } from '../List';
+import { IWithPopupStyles } from '../WithPopup';
+
+export const useStyles = createThemedStyles('NewMoreMenu', {
+  hasCircle: {},
+
+  button: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 32,
+    height: 32,
+    backgroundColor: 'transparent',
+    color: colors.FONT_MEDIUM,
+    padding: 0,
+    borderRadius: '50%',
+    border: 'none',
+    cursor: 'pointer',
+    transition: animations.defaultTransition,
+    transitionProperty: 'background-color',
+  },
+
+  icon: {
+    width: 30,
+    height: 30,
+  },
+
+  active: {},
+
+  disabled: {
+    cursor: 'default',
+  },
+});
+
+export type INewMoreMenuStyles = ITweakStyles<
+  typeof useStyles,
+  { tweakList: IListStyles; tweakWithPopup: IWithPopupStyles }
+>;

package/src/components/NewMoreMenu/NewMoreMenu.tsx

@@ -1,79 +1,79 @@
-import { FC } from 'react';
-import clsx from 'clsx';
-import { addDataTestId, isArrayEmpty } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { Icon } from '../Icon';
-import { IListItem, List } from '../List';
-import { IWithPopupProps, WithPopup } from '../WithPopup';
-import { useStyles, INewMoreMenuStyles } from './NewMoreMenu.styles';
-
-export interface INewMoreMenuProps
-  extends Pick<
-      IWithPopupProps,
-      | 'placement'
-      | 'middlewares'
-      | 'shouldHideOnScroll'
-      | 'shouldRenderInBody'
-      | 'canBeFlipped'
-      | 'onToggle'
-    >,
-    ICommonProps<INewMoreMenuStyles> {
-  items: IListItem[];
-  /** @default false */
-  isDisabled?: boolean;
-  /** @default true */
-  hasDefaultStateBackground?: boolean;
-}
-
-export const NewMoreMenu: FC<INewMoreMenuProps> = ({
-  items,
-  isDisabled = false,
-  hasDefaultStateBackground = true,
-  data,
-  testId,
-  tweakStyles,
-  ...rest
-}) => {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const tweakWithPopupStyles = useTweakStyles({
-    tweakStyles,
-    className: 'tweakWithPopup',
-    currentComponentName: 'NewMoreMenu',
-  });
-
-  const tweakListStyles = useTweakStyles({
-    tweakStyles,
-    className: 'tweakList',
-    currentComponentName: 'NewMoreMenu',
-  });
-
-  return (
-    <WithPopup
-      isDisabled={isDisabled || isArrayEmpty(items)}
-      tweakStyles={tweakWithPopupStyles}
-      {...rest}
-      trigger={({ triggerProps, referenceProps }) => (
-        <button
-          className={clsx(classes.button, {
-            [classes.hasCircle]: hasDefaultStateBackground,
-            [classes.disabled]: triggerProps.isDisabled,
-            [classes.active]: triggerProps.isActive,
-          })}
-          disabled={triggerProps.isDisabled}
-          {...addDataTestId(testId)}
-          {...addDataAttributes(data)}
-          {...referenceProps}
-        >
-          <div className={classes.icon}>
-            <Icon type="menu" />
-          </div>
-        </button>
-      )}
-    >
-      {({ onClose }) => <List items={items} tweakStyles={tweakListStyles} onClick={onClose} />}
-    </WithPopup>
-  );
-};
+import { FC } from 'react';
+import clsx from 'clsx';
+import { addDataTestId, isArrayEmpty } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { Icon } from '../Icon';
+import { IListItem, List } from '../List';
+import { IWithPopupProps, WithPopup } from '../WithPopup';
+import { useStyles, INewMoreMenuStyles } from './NewMoreMenu.styles';
+
+export interface INewMoreMenuProps
+  extends Pick<
+      IWithPopupProps,
+      | 'placement'
+      | 'middlewares'
+      | 'shouldHideOnScroll'
+      | 'shouldRenderInBody'
+      | 'canBeFlipped'
+      | 'onToggle'
+    >,
+    ICommonProps<INewMoreMenuStyles> {
+  items: IListItem[];
+  /** @default false */
+  isDisabled?: boolean;
+  /** @default true */
+  hasDefaultStateBackground?: boolean;
+}
+
+export const NewMoreMenu: FC<INewMoreMenuProps> = ({
+  items,
+  isDisabled = false,
+  hasDefaultStateBackground = true,
+  data,
+  testId,
+  tweakStyles,
+  ...rest
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakWithPopupStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakWithPopup',
+    currentComponentName: 'NewMoreMenu',
+  });
+
+  const tweakListStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakList',
+    currentComponentName: 'NewMoreMenu',
+  });
+
+  return (
+    <WithPopup
+      isDisabled={isDisabled || isArrayEmpty(items)}
+      tweakStyles={tweakWithPopupStyles}
+      {...rest}
+      trigger={({ triggerProps, referenceProps }) => (
+        <button
+          className={clsx(classes.button, {
+            [classes.hasCircle]: hasDefaultStateBackground,
+            [classes.disabled]: triggerProps.isDisabled,
+            [classes.active]: triggerProps.isActive,
+          })}
+          disabled={triggerProps.isDisabled}
+          {...addDataTestId(testId)}
+          {...addDataAttributes(data)}
+          {...referenceProps}
+        >
+          <div className={classes.icon}>
+            <Icon type="menu" />
+          </div>
+        </button>
+      )}
+    >
+      {({ onClose }) => <List items={items} tweakStyles={tweakListStyles} onClick={onClose} />}
+    </WithPopup>
+  );
+};

package/src/components/NewMoreMenu/index.ts

@@ -1,2 +1,2 @@
-export * from './NewMoreMenu';
-export type { INewMoreMenuStyles } from './NewMoreMenu.styles';
+export * from './NewMoreMenu';
+export type { INewMoreMenuStyles } from './NewMoreMenu.styles';

package/src/components/Notification/Notification.stories.tsx

@@ -1,55 +1,51 @@
-import { Meta, Story } from '@storybook/react';
-import { iconsList, IIconType } from '../Icon';
-import { complexIcons } from '../Icon/complexIcons';
-import { INotificationProps, Notification } from './Notification';
-
-const iconTypes = [
-  undefined,
-  ...Object.keys(iconsList),
-  ...Object.keys(complexIcons),
-] as IIconType[];
-
-const lorem = 'Lorem ipsum dolor, sit amet consectetur adipisicing';
-
-interface IStory extends INotificationProps {
-  shouldUseChildrenInstead: boolean;
-}
-
-export default {
-  title: 'Data Display/Notification',
-  component: Notification,
-  args: {
-    title: 'Notification title',
-    text: lorem,
-    size: 's',
-    type: 'info',
-    isFullWidth: false,
-    shouldUseChildrenInstead: false,
-  },
-  argTypes: {
-    size: { control: 'inline-radio', options: ['s', 'm', 'l'] },
-    icon: { options: iconTypes, control: 'select' },
-    type: {
-      control: 'inline-radio',
-      options: ['error', 'info', 'warning', 'ok', 'not-ok', 'custom'],
-    },
-  },
-} as Meta<IStory>;
-
-export const Default: Story<IStory> = ({ title, text, shouldUseChildrenInstead, ...args }) => {
-  const children = (
-    <div>
-      Some childrens with <a href="google.com">tags</a>
-    </div>
-  );
-
-  return (
-    <Notification
-      {...args}
-      title={!shouldUseChildrenInstead ? title : undefined}
-      text={!shouldUseChildrenInstead ? text : undefined}
-    >
-      {shouldUseChildrenInstead ? children : undefined}
-    </Notification>
-  );
-};
+import { Meta, Story } from '@storybook/react';
+import { iconsList, IIconType } from '../Icon';
+import { complexIcons } from '../Icon/complexIcons';
+import { INotificationProps, Notification } from './Notification';
+
+const icons = [undefined, ...Object.keys(iconsList), ...Object.keys(complexIcons)] as IIconType[];
+
+const lorem = 'Lorem ipsum dolor, sit amet consectetur adipisicing';
+
+interface IStory extends INotificationProps {
+  shouldUseChildrenInstead: boolean;
+}
+
+export default {
+  title: 'Data Display/Notification',
+  component: Notification,
+  args: {
+    title: 'Notification title',
+    text: lorem,
+    size: 's',
+    type: 'info',
+    isFullWidth: false,
+    shouldUseChildrenInstead: false,
+  },
+  argTypes: {
+    size: { control: 'inline-radio', options: ['s', 'm', 'l'] },
+    icon: { options: icons, control: 'select' },
+    type: {
+      control: 'inline-radio',
+      options: ['error', 'info', 'warning', 'ok', 'not-ok', 'custom'],
+    },
+  },
+} as Meta<IStory>;
+
+export const Default: Story<IStory> = ({ title, text, shouldUseChildrenInstead, ...args }) => {
+  const children = (
+    <div>
+      Some childrens with <a href="google.com">tags</a>
+    </div>
+  );
+
+  return (
+    <Notification
+      {...args}
+      title={!shouldUseChildrenInstead ? title : undefined}
+      text={!shouldUseChildrenInstead ? text : undefined}
+    >
+      {shouldUseChildrenInstead ? children : undefined}
+    </Notification>
+  );
+};