@true-engineering/true-react-common-ui-kit 4.0.0-alpha2 → 4.0.0-alpha4

package/src/components/Notification/Notification.styles.ts

@@ -1,57 +1,57 @@
-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': {},
-
-  custom: {},
-});
-
-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': {},
+
+  custom: {},
+});
+
+export type INotificationStyles = ITweakStyles<typeof useStyles>;

package/src/components/Notification/Notification.tsx

@@ -1,77 +1,77 @@
-import { FC, ReactNode } from 'react';
-import clsx from 'clsx';
-import {
-  addDataTestId,
-  isReactNodeNotEmpty,
-  isStringNotEmpty,
-} from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { ICommonProps } from '../../types';
-import { Icon, IIcon, renderIcon } from '../Icon';
-import { INotificationType } from './types';
-import { useStyles, INotificationStyles } from './Notification.styles';
-
-export interface INotificationProps extends ICommonProps<INotificationStyles> {
-  type: INotificationType;
-  /** @default true */
-  isFullWidth?: boolean;
-  text?: string;
-  title?: string;
-  /** @default 's' */
-  size?: 's' | 'm' | 'l';
-  icon?: IIcon;
-  children?: ReactNode;
-}
-
-export const Notification: FC<INotificationProps> = ({
-  children,
-  type,
-  isFullWidth = true,
-  text,
-  title,
-  testId,
-  size = 's',
-  data,
-  icon,
-  tweakStyles,
-}) => {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const hasText = isStringNotEmpty(text);
-  const hasTitle = isStringNotEmpty(title);
-  const isDefaultType = type !== 'custom';
-  const hasIcon = isReactNodeNotEmpty(icon) || isDefaultType;
-
-  return (
-    <div
-      className={clsx(classes.root, classes[size], classes[type], {
-        [classes.inline]: !isFullWidth,
-        [classes.withTitle]: hasTitle,
-        [classes.withText]: hasText,
-      })}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
-    >
-      {hasIcon && (
-        <div className={classes.icon}>
-          {isReactNodeNotEmpty(icon)
-            ? renderIcon(icon)
-            : isDefaultType && <Icon type={`status-${type}`} />}
-        </div>
-      )}
-      <div className={classes.body}>
-        {hasTitle && (
-          <span className={classes.title} {...addDataTestId(testId, 'title')}>
-            {title}
-          </span>
-        )}
-        {hasText && (
-          <span className={classes.text} {...addDataTestId(testId, 'text')}>
-            {text}
-          </span>
-        )}
-        {isReactNodeNotEmpty(children) && <div className={classes.content}>{children}</div>}
-      </div>
-    </div>
-  );
-};
+import { FC, ReactNode } from 'react';
+import clsx from 'clsx';
+import {
+  addDataTestId,
+  isReactNodeNotEmpty,
+  isStringNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { ICommonProps } from '../../types';
+import { Icon, IIcon, renderIcon } from '../Icon';
+import { INotificationType } from './types';
+import { useStyles, INotificationStyles } from './Notification.styles';
+
+export interface INotificationProps extends ICommonProps<INotificationStyles> {
+  type: INotificationType;
+  /** @default true */
+  isFullWidth?: boolean;
+  text?: string;
+  title?: string;
+  /** @default 's' */
+  size?: 's' | 'm' | 'l';
+  icon?: IIcon;
+  children?: ReactNode;
+}
+
+export const Notification: FC<INotificationProps> = ({
+  children,
+  type,
+  isFullWidth = true,
+  text,
+  title,
+  testId,
+  size = 's',
+  data,
+  icon,
+  tweakStyles,
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const hasText = isStringNotEmpty(text);
+  const hasTitle = isStringNotEmpty(title);
+  const isDefaultType = type !== 'custom';
+  const hasIcon = isReactNodeNotEmpty(icon) || isDefaultType;
+
+  return (
+    <div
+      className={clsx(classes.root, classes[size], classes[type], {
+        [classes.inline]: !isFullWidth,
+        [classes.withTitle]: hasTitle,
+        [classes.withText]: hasText,
+      })}
+      {...addDataTestId(testId)}
+      {...addDataAttributes(data)}
+    >
+      {hasIcon && (
+        <div className={classes.icon}>
+          {isReactNodeNotEmpty(icon)
+            ? renderIcon(icon)
+            : isDefaultType && <Icon type={`status-${type}`} />}
+        </div>
+      )}
+      <div className={classes.body}>
+        {hasTitle && (
+          <span className={classes.title} {...addDataTestId(testId, 'title')}>
+            {title}
+          </span>
+        )}
+        {hasText && (
+          <span className={classes.text} {...addDataTestId(testId, 'text')}>
+            {text}
+          </span>
+        )}
+        {isReactNodeNotEmpty(children) && <div className={classes.content}>{children}</div>}
+      </div>
+    </div>
+  );
+};

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' | 'custom';
+export type INotificationType = 'error' | 'info' | 'warning' | 'ok' | 'not-ok' | 'custom';

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

@@ -1,33 +1,33 @@
-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',
-  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',
+  isInvalid: false,
+  errorMessage: 'Error Text',
+  isDisabled: false,
+  isRequired: false,
+  isReadonly: false,
+};

package/src/components/NumberInput/NumberInput.tsx

@@ -1,134 +1,134 @@
-import { FocusEvent, forwardRef, KeyboardEvent, useState } from 'react';
-import { isStringNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import {
-  formatNumber,
-  formatStringNumber,
-  getNumberInRange,
-  removeStringFormat,
-  setCaretPosition,
-  stringToNumber,
-} from '../../helpers';
-import { useDidMountEffect } from '../../hooks';
-import { IChangeInputEvent, IInputProps, Input } from '../Input';
-import { constructRegExp, formatNumberWithDefault, getNewCaretPosition } from './helpers';
-
-export interface INumberInputProps extends Omit<IInputProps, 'value' | 'onChange' | 'type'> {
-  value?: number;
-  /** @default 3 */
-  precision?: number;
-  /** @default 7 */
-  intPartPrecision?: number;
-  defaultValue?: number;
-  /** @default false */
-  canBeFloat?: boolean;
-  /** @default false */
-  canBeNegative?: boolean;
-  min?: number;
-  max?: number;
-  onChange: (value: number | undefined, event?: IChangeInputEvent) => void;
-}
-
-export const NumberInput = forwardRef<HTMLInputElement, INumberInputProps>(
-  (
-    {
-      value,
-      canBeFloat = false,
-      canBeNegative = false,
-      defaultValue,
-      precision = 3,
-      intPartPrecision = 7,
-      onChange,
-      onBlur,
-      min,
-      max,
-      ...props
-    },
-    ref,
-  ) => {
-    const [showedValue, setShowedValue] = useState(() =>
-      formatNumberWithDefault(value, defaultValue),
-    );
-
-    // специальный костыль для обработки Delete - т.к. без него каретка будет работать неправильно при удалении пробелов
-    const [isDeleteForwardAction, setIsDeleteForwardAction] = useState(false);
-
-    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
-      setIsDeleteForwardAction(event.key === 'Delete');
-    };
-
-    const setShowedValueWithDefault = (v: string) => {
-      setShowedValue(isStringNotEmpty(v) ? v : formatNumber(defaultValue));
-    };
-
-    const handleChange = async (inputValue: string, event: IChangeInputEvent): Promise<void> => {
-      const oldValue = showedValue;
-      const target = event.target as HTMLInputElement;
-      const defaultCaretPos = target.selectionStart ?? 0;
-      const numString = removeStringFormat(inputValue);
-
-      if (numString === '') {
-        onChange(undefined);
-        // не убирать - ломается каретка
-        setShowedValue('');
-        return;
-      }
-
-      const numberRegexp = new RegExp(
-        constructRegExp({
-          precision,
-          intPartPrecision,
-          canBeNegative,
-          canBeFloat,
-        }),
-      );
-
-      if (!numberRegexp.test(numString)) {
-        await setShowedValue(oldValue);
-        setCaretPosition(target, defaultCaretPos - 1);
-        return;
-      }
-
-      const hasDot = canBeFloat && /^[-]*[\d\s]*[.,]$/.test(inputValue);
-      const formattedValue = formatStringNumber(numString);
-      const newValue = hasDot ? `${formattedValue}.` : formattedValue;
-      await setShowedValue(newValue);
-      setCaretPosition(
-        target,
-        getNewCaretPosition(defaultCaretPos, oldValue, newValue, isDeleteForwardAction),
-      );
-    };
-
-    const handleBlur = (event: FocusEvent<HTMLInputElement>): void => {
-      const val = event.currentTarget.value;
-      const num = stringToNumber(val);
-      const newValue = num !== undefined ? getNumberInRange(num, min, max) : undefined;
-      if (newValue !== value) {
-        onChange(newValue);
-      } else {
-        setShowedValueWithDefault(formatNumber(value));
-      }
-      if (onBlur !== undefined) {
-        onBlur(event);
-      }
-    };
-
-    useDidMountEffect(() => {
-      if (value !== undefined) {
-        setShowedValueWithDefault(formatNumber(value));
-      } else {
-        setShowedValue(formatNumber(value));
-      }
-    }, [value]);
-
-    return (
-      <Input
-        value={showedValue}
-        onChange={handleChange}
-        onBlur={handleBlur}
-        onKeyDown={handleKeyDown}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
+import { FocusEvent, forwardRef, KeyboardEvent, useState } from 'react';
+import { isStringNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import {
+  formatNumber,
+  formatStringNumber,
+  getNumberInRange,
+  removeStringFormat,
+  setCaretPosition,
+  stringToNumber,
+} from '../../helpers';
+import { useDidMountEffect } from '../../hooks';
+import { IChangeInputEvent, IInputProps, Input } from '../Input';
+import { constructRegExp, formatNumberWithDefault, getNewCaretPosition } from './helpers';
+
+export interface INumberInputProps extends Omit<IInputProps, 'value' | 'onChange' | 'type'> {
+  value?: number;
+  /** @default 3 */
+  precision?: number;
+  /** @default 7 */
+  intPartPrecision?: number;
+  defaultValue?: number;
+  /** @default false */
+  canBeFloat?: boolean;
+  /** @default false */
+  canBeNegative?: boolean;
+  min?: number;
+  max?: number;
+  onChange: (value: number | undefined, event?: IChangeInputEvent) => void;
+}
+
+export const NumberInput = forwardRef<HTMLInputElement, INumberInputProps>(
+  (
+    {
+      value,
+      canBeFloat = false,
+      canBeNegative = false,
+      defaultValue,
+      precision = 3,
+      intPartPrecision = 7,
+      onChange,
+      onBlur,
+      min,
+      max,
+      ...props
+    },
+    ref,
+  ) => {
+    const [showedValue, setShowedValue] = useState(() =>
+      formatNumberWithDefault(value, defaultValue),
+    );
+
+    // специальный костыль для обработки Delete - т.к. без него каретка будет работать неправильно при удалении пробелов
+    const [isDeleteForwardAction, setIsDeleteForwardAction] = useState(false);
+
+    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+      setIsDeleteForwardAction(event.key === 'Delete');
+    };
+
+    const setShowedValueWithDefault = (v: string) => {
+      setShowedValue(isStringNotEmpty(v) ? v : formatNumber(defaultValue));
+    };
+
+    const handleChange = async (inputValue: string, event: IChangeInputEvent): Promise<void> => {
+      const oldValue = showedValue;
+      const target = event.target as HTMLInputElement;
+      const defaultCaretPos = target.selectionStart ?? 0;
+      const numString = removeStringFormat(inputValue);
+
+      if (numString === '') {
+        onChange(undefined);
+        // не убирать - ломается каретка
+        setShowedValue('');
+        return;
+      }
+
+      const numberRegexp = new RegExp(
+        constructRegExp({
+          precision,
+          intPartPrecision,
+          canBeNegative,
+          canBeFloat,
+        }),
+      );
+
+      if (!numberRegexp.test(numString)) {
+        await setShowedValue(oldValue);
+        setCaretPosition(target, defaultCaretPos - 1);
+        return;
+      }
+
+      const hasDot = canBeFloat && /^[-]*[\d\s]*[.,]$/.test(inputValue);
+      const formattedValue = formatStringNumber(numString);
+      const newValue = hasDot ? `${formattedValue}.` : formattedValue;
+      await setShowedValue(newValue);
+      setCaretPosition(
+        target,
+        getNewCaretPosition(defaultCaretPos, oldValue, newValue, isDeleteForwardAction),
+      );
+    };
+
+    const handleBlur = (event: FocusEvent<HTMLInputElement>): void => {
+      const val = event.currentTarget.value;
+      const num = stringToNumber(val);
+      const newValue = num !== undefined ? getNumberInRange(num, min, max) : undefined;
+      if (newValue !== value) {
+        onChange(newValue);
+      } else {
+        setShowedValueWithDefault(formatNumber(value));
+      }
+      if (onBlur !== undefined) {
+        onBlur(event);
+      }
+    };
+
+    useDidMountEffect(() => {
+      if (value !== undefined) {
+        setShowedValueWithDefault(formatNumber(value));
+      } else {
+        setShowedValue(formatNumber(value));
+      }
+    }, [value]);
+
+    return (
+      <Input
+        value={showedValue}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        onKeyDown={handleKeyDown}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);