@true-engineering/true-react-common-ui-kit 3.9.0 → 3.9.2

package/src/components/NewMoreMenu/NewMoreMenu.tsx

@@ -1,80 +1,80 @@
-import { FC } from 'react';
-import clsx from 'clsx';
-import { addDataTestId, isArrayNotEmpty } 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, 'middlewares' | 'shouldHideOnScroll' | 'shouldRenderInBody'>,
-    ICommonProps<INewMoreMenuStyles> {
-  items: IListItem[];
-  /** @default false */
-  isDisabled?: boolean;
-  /** @default true */
-  hasDefaultStateBackground?: boolean;
-  /** @default 'bottom-end' */
-  placement?: IWithPopupProps['placement'];
-}
-
-export const NewMoreMenu: FC<INewMoreMenuProps> = ({
-  items,
-  isDisabled = false,
-  hasDefaultStateBackground = true,
-  data,
-  testId,
-  placement,
-  middlewares,
-  shouldHideOnScroll,
-  shouldRenderInBody,
-  tweakStyles,
-}) => {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const tweakWithPopupStyles = useTweakStyles({
-    tweakStyles,
-    className: 'tweakWithPopup',
-    currentComponentName: 'NewMoreMenu',
-  });
-
-  const tweakListStyles = useTweakStyles({
-    tweakStyles,
-    className: 'tweakList',
-    currentComponentName: 'NewMoreMenu',
-  });
-
-  const isButtonDisabled = isDisabled || !isArrayNotEmpty(items);
-
-  return (
-    <WithPopup
-      placement={placement}
-      middlewares={middlewares}
-      shouldHideOnScroll={shouldHideOnScroll}
-      shouldRenderInBody={shouldRenderInBody}
-      isDisabled={isButtonDisabled}
-      tweakStyles={tweakWithPopupStyles}
-      trigger={({ isActive }) => (
-        <button
-          className={clsx(classes.button, {
-            [classes.hasCircle]: hasDefaultStateBackground,
-            [classes.disabled]: isButtonDisabled,
-            [classes.active]: isActive,
-          })}
-          disabled={isButtonDisabled}
-          {...addDataTestId(testId)}
-          {...addDataAttributes(data)}
-        >
-          <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, isArrayNotEmpty } 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, 'middlewares' | 'shouldHideOnScroll' | 'shouldRenderInBody'>,
+    ICommonProps<INewMoreMenuStyles> {
+  items: IListItem[];
+  /** @default false */
+  isDisabled?: boolean;
+  /** @default true */
+  hasDefaultStateBackground?: boolean;
+  /** @default 'bottom-end' */
+  placement?: IWithPopupProps['placement'];
+}
+
+export const NewMoreMenu: FC<INewMoreMenuProps> = ({
+  items,
+  isDisabled = false,
+  hasDefaultStateBackground = true,
+  data,
+  testId,
+  placement,
+  middlewares,
+  shouldHideOnScroll,
+  shouldRenderInBody,
+  tweakStyles,
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakWithPopupStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakWithPopup',
+    currentComponentName: 'NewMoreMenu',
+  });
+
+  const tweakListStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakList',
+    currentComponentName: 'NewMoreMenu',
+  });
+
+  const isButtonDisabled = isDisabled || !isArrayNotEmpty(items);
+
+  return (
+    <WithPopup
+      placement={placement}
+      middlewares={middlewares}
+      shouldHideOnScroll={shouldHideOnScroll}
+      shouldRenderInBody={shouldRenderInBody}
+      isDisabled={isButtonDisabled}
+      tweakStyles={tweakWithPopupStyles}
+      trigger={({ isActive }) => (
+        <button
+          className={clsx(classes.button, {
+            [classes.hasCircle]: hasDefaultStateBackground,
+            [classes.disabled]: isButtonDisabled,
+            [classes.active]: isActive,
+          })}
+          disabled={isButtonDisabled}
+          {...addDataTestId(testId)}
+          {...addDataAttributes(data)}
+        >
+          <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.styles.ts

@@ -1,55 +1,55 @@
-import { ITweakStyles, createThemedStyles } from '../../theme';
-
-export const useStyles = createThemedStyles('Notification', {
-  root: {
-    display: 'flex',
-  },
-
-  inline: {
-    width: 'fit-content',
-  },
-
-  icon: {
-    width: 20,
-    height: 20,
-    marginRight: 16,
-    flexShrink: 0,
-  },
-
-  body: {
-    flexGrow: 1,
-  },
-
-  title: {
-    display: 'block',
-    fontWeight: 'bold',
-  },
-
-  text: {
-    display: 'block',
-  },
-
-  content: {},
-
-  s: {},
-
-  m: {},
-
-  l: {},
-
-  withText: {},
-
-  withTitle: {},
-
-  error: {},
-
-  info: {},
-
-  warning: {},
-
-  ok: {},
-
-  'not-ok': {},
-});
-
-export type INotificationStyles = ITweakStyles<typeof useStyles>;
+import { ITweakStyles, createThemedStyles } from '../../theme';
+
+export const useStyles = createThemedStyles('Notification', {
+  root: {
+    display: 'flex',
+  },
+
+  inline: {
+    width: 'fit-content',
+  },
+
+  icon: {
+    width: 20,
+    height: 20,
+    marginRight: 16,
+    flexShrink: 0,
+  },
+
+  body: {
+    flexGrow: 1,
+  },
+
+  title: {
+    display: 'block',
+    fontWeight: 'bold',
+  },
+
+  text: {
+    display: 'block',
+  },
+
+  content: {},
+
+  s: {},
+
+  m: {},
+
+  l: {},
+
+  withText: {},
+
+  withTitle: {},
+
+  error: {},
+
+  info: {},
+
+  warning: {},
+
+  ok: {},
+
+  'not-ok': {},
+});
+
+export type INotificationStyles = ITweakStyles<typeof useStyles>;

package/src/components/Notification/index.ts

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

package/src/components/Notification/types.ts

@@ -1 +1 @@
-export type INotificationType = 'error' | 'info' | 'warning' | 'ok' | 'not-ok';
+export type INotificationType = 'error' | 'info' | 'warning' | 'ok' | 'not-ok';

package/src/components/NumberInput/NumberInput.stories.tsx

@@ -1,35 +1,35 @@
-import { useState } from 'react';
-import { ComponentStory } from '@storybook/react';
-import { NumberInput } from './NumberInput';
-
-export default {
-  title: 'Inputs/NumberInput',
-  component: NumberInput,
-};
-
-const Template: ComponentStory<typeof NumberInput> = (args) => {
-  const [value, setValue] = useState<number>();
-  return <NumberInput {...args} value={value} onChange={(v) => setValue(v)} />;
-};
-
-export const Default = Template.bind({});
-
-Default.args = {
-  min: 0,
-  max: 9999,
-  precision: 3,
-  intPartPrecision: 7,
-  canBeFloat: false,
-  canBeNegative: false,
-  label: 'Label',
-  placeholder: 'Placeholder',
-  infoMessage: 'Message Info',
-  units: 'RUB',
-  hasFloatingLabel: true,
-  hasRequiredLabel: true,
-  isInvalid: false,
-  errorMessage: 'Error Text',
-  isDisabled: false,
-  isRequired: false,
-  isReadonly: false,
-};
+import { useState } from 'react';
+import { ComponentStory } from '@storybook/react';
+import { NumberInput } from './NumberInput';
+
+export default {
+  title: 'Inputs/NumberInput',
+  component: NumberInput,
+};
+
+const Template: ComponentStory<typeof NumberInput> = (args) => {
+  const [value, setValue] = useState<number>();
+  return <NumberInput {...args} value={value} onChange={(v) => setValue(v)} />;
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  min: 0,
+  max: 9999,
+  precision: 3,
+  intPartPrecision: 7,
+  canBeFloat: false,
+  canBeNegative: false,
+  label: 'Label',
+  placeholder: 'Placeholder',
+  infoMessage: 'Message Info',
+  units: 'RUB',
+  hasFloatingLabel: true,
+  hasRequiredLabel: true,
+  isInvalid: false,
+  errorMessage: 'Error Text',
+  isDisabled: false,
+  isRequired: false,
+  isReadonly: false,
+};

package/src/components/NumberInput/helpers.ts

@@ -1,86 +1,86 @@
-import { isStringNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { formatNumber, isSpaceChar } from '../../helpers';
-import type { INumberInputProps } from './NumberInput';
-
-const getPrevSpaces = (val: string, position: number): number =>
-  val
-    .slice(0, position - 1)
-    .split('')
-    .filter(isSpaceChar).length;
-
-export const getNewCaretPosition = (
-  defaultPosition: number,
-  oldValue: string,
-  newValue: string,
-  isDeleteForwardAction?: boolean,
-): number => {
-  if (oldValue === newValue) {
-    return isDeleteForwardAction ? defaultPosition + 1 : defaultPosition;
-  }
-
-  const oldPrevSpaces = getPrevSpaces(oldValue, defaultPosition);
-  const newPrevSpaces = getPrevSpaces(newValue, defaultPosition);
-  const diff = newPrevSpaces - oldPrevSpaces;
-  const res = defaultPosition + diff;
-  if (res <= 0) {
-    return 0;
-  }
-  return res - (isSpaceChar(newValue[res - 1]) ? 1 : 0);
-};
-
-export const formatNumberWithDefault = (
-  value: number | undefined,
-  defaultValue?: number,
-): string => {
-  const val = formatNumber(value);
-  return isStringNotEmpty(val) ? val : formatNumber(defaultValue);
-};
-
-export const constructRegExp = ({
-  canBeFloat,
-  canBeNegative,
-  intPartPrecision,
-  precision,
-}: Pick<
-  INumberInputProps,
-  'canBeFloat' | 'canBeNegative' | 'intPartPrecision' | 'precision'
->): string => {
-  const basePart = `\\d{0,${intPartPrecision}}`;
-  const floatPart = `(\\.\\d{0,${precision}})?`;
-  const negativePart = '(\\-)?';
-
-  return `^${canBeNegative ? negativePart : ''}${basePart}${canBeFloat ? floatPart : ''}$`;
-};
-
-// const testNewCaretPosition = () => {
-//   console.log(getNewCaretPosition(1, '', '1') === 1);
-//   console.log(getNewCaretPosition(2, '1', '12') === 2);
-//   console.log(getNewCaretPosition(3, '12', '123') === 3);
-//   console.log(getNewCaretPosition(4, '123', '1 234') === 5);
-//   console.log(getNewCaretPosition(6, '1 234', '12 345') === 6);
-//   console.log(getNewCaretPosition(2, '1 234', '10 234') === 2);
-//   console.log(getNewCaretPosition(3, '1 234', '10 234') === 2);
-//   console.log(getNewCaretPosition(1, '1 234', '21 234') === 1);
-//   console.log(getNewCaretPosition(8, '123 456', '123 456.') === 8);
-//   console.log(getNewCaretPosition(8, '123 456', '1 234 567') === 9);
-//   console.log(getNewCaretPosition(5, '123 456', '1 230 456') === 5);
-//   console.log(getNewCaretPosition(4, '123 456', '1 230 456') === 5);
-//
-//   console.log(getNewCaretPosition(0, '1', '') === 0);
-//   console.log(getNewCaretPosition(1, '12', '1') === 1);
-//   console.log(getNewCaretPosition(2, '123', '12') === 2);
-//   console.log(getNewCaretPosition(4, '1 234', '123') === 3);
-//   console.log(getNewCaretPosition(5, '12 345', '1 234') === 5);
-//   console.log(getNewCaretPosition(1, '10 234', '1 234') === 1);
-//   console.log(getNewCaretPosition(2, '10 234', '10 234') === 2);
-//   console.log(getNewCaretPosition(0, '21 234', '1 234') === 0);
-//   console.log(getNewCaretPosition(7, '123 456.', '123 456') === 7);
-//   console.log(getNewCaretPosition(8, '1 234 567', '123 456') === 7);
-//   console.log(getNewCaretPosition(5, '1 230 456', '1 230 456') === 5);
-//   console.log(getNewCaretPosition(4, '1 230 456', '123 456') === 3);
-//
-//   console.log(getNewCaretPosition(5, '1 234 567', '123 467') === 5);
-//   console.log(getNewCaretPosition(5, '1 234 567', '1 234') === 5);
-// };
-//
-// testNewCaretPosition();
+import { isStringNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { formatNumber, isSpaceChar } from '../../helpers';
+import type { INumberInputProps } from './NumberInput';
+
+const getPrevSpaces = (val: string, position: number): number =>
+  val
+    .slice(0, position - 1)
+    .split('')
+    .filter(isSpaceChar).length;
+
+export const getNewCaretPosition = (
+  defaultPosition: number,
+  oldValue: string,
+  newValue: string,
+  isDeleteForwardAction?: boolean,
+): number => {
+  if (oldValue === newValue) {
+    return isDeleteForwardAction ? defaultPosition + 1 : defaultPosition;
+  }
+
+  const oldPrevSpaces = getPrevSpaces(oldValue, defaultPosition);
+  const newPrevSpaces = getPrevSpaces(newValue, defaultPosition);
+  const diff = newPrevSpaces - oldPrevSpaces;
+  const res = defaultPosition + diff;
+  if (res <= 0) {
+    return 0;
+  }
+  return res - (isSpaceChar(newValue[res - 1]) ? 1 : 0);
+};
+
+export const formatNumberWithDefault = (
+  value: number | undefined,
+  defaultValue?: number,
+): string => {
+  const val = formatNumber(value);
+  return isStringNotEmpty(val) ? val : formatNumber(defaultValue);
+};
+
+export const constructRegExp = ({
+  canBeFloat,
+  canBeNegative,
+  intPartPrecision,
+  precision,
+}: Pick<
+  INumberInputProps,
+  'canBeFloat' | 'canBeNegative' | 'intPartPrecision' | 'precision'
+>): string => {
+  const basePart = `\\d{0,${intPartPrecision}}`;
+  const floatPart = `(\\.\\d{0,${precision}})?`;
+  const negativePart = '(\\-)?';
+
+  return `^${canBeNegative ? negativePart : ''}${basePart}${canBeFloat ? floatPart : ''}$`;
+};
+
+// const testNewCaretPosition = () => {
+//   console.log(getNewCaretPosition(1, '', '1') === 1);
+//   console.log(getNewCaretPosition(2, '1', '12') === 2);
+//   console.log(getNewCaretPosition(3, '12', '123') === 3);
+//   console.log(getNewCaretPosition(4, '123', '1 234') === 5);
+//   console.log(getNewCaretPosition(6, '1 234', '12 345') === 6);
+//   console.log(getNewCaretPosition(2, '1 234', '10 234') === 2);
+//   console.log(getNewCaretPosition(3, '1 234', '10 234') === 2);
+//   console.log(getNewCaretPosition(1, '1 234', '21 234') === 1);
+//   console.log(getNewCaretPosition(8, '123 456', '123 456.') === 8);
+//   console.log(getNewCaretPosition(8, '123 456', '1 234 567') === 9);
+//   console.log(getNewCaretPosition(5, '123 456', '1 230 456') === 5);
+//   console.log(getNewCaretPosition(4, '123 456', '1 230 456') === 5);
+//
+//   console.log(getNewCaretPosition(0, '1', '') === 0);
+//   console.log(getNewCaretPosition(1, '12', '1') === 1);
+//   console.log(getNewCaretPosition(2, '123', '12') === 2);
+//   console.log(getNewCaretPosition(4, '1 234', '123') === 3);
+//   console.log(getNewCaretPosition(5, '12 345', '1 234') === 5);
+//   console.log(getNewCaretPosition(1, '10 234', '1 234') === 1);
+//   console.log(getNewCaretPosition(2, '10 234', '10 234') === 2);
+//   console.log(getNewCaretPosition(0, '21 234', '1 234') === 0);
+//   console.log(getNewCaretPosition(7, '123 456.', '123 456') === 7);
+//   console.log(getNewCaretPosition(8, '1 234 567', '123 456') === 7);
+//   console.log(getNewCaretPosition(5, '1 230 456', '1 230 456') === 5);
+//   console.log(getNewCaretPosition(4, '1 230 456', '123 456') === 3);
+//
+//   console.log(getNewCaretPosition(5, '1 234 567', '123 467') === 5);
+//   console.log(getNewCaretPosition(5, '1 234 567', '1 234') === 5);
+// };
+//
+// testNewCaretPosition();