@true-engineering/true-react-common-ui-kit 3.2.0 → 3.4.0

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/Notification/Notification.stories.tsx

@@ -1,46 +1,46 @@
-import { Meta, Story } from '@storybook/react';
-import { INotificationProps, Notification } from './Notification';
-
-const lorem = 'Lorem ipsum dolor, sit amet consectetur adipisicing';
-
-interface IStory extends INotificationProps {
-  shouldUseChildrenInstead: boolean;
-}
-
-export default {
-  title: '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'] },
-    type: {
-      control: 'inline-radio',
-      options: ['error', 'info', 'warning', 'ok', 'not-ok'],
-    },
-  },
-} 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 { INotificationProps, Notification } from './Notification';
+
+const lorem = 'Lorem ipsum dolor, sit amet consectetur adipisicing';
+
+interface IStory extends INotificationProps {
+  shouldUseChildrenInstead: boolean;
+}
+
+export default {
+  title: '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'] },
+    type: {
+      control: 'inline-radio',
+      options: ['error', 'info', 'warning', 'ok', 'not-ok'],
+    },
+  },
+} 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>
+  );
+};

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/Notification.tsx

@@ -1,73 +1,69 @@
-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 } 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';
-  children?: ReactNode;
-}
-
-export const Notification: FC<INotificationProps> = ({
-  children,
-  type,
-  isFullWidth = true,
-  text,
-  title,
-  testId,
-  size = 's',
-  data,
-  tweakStyles,
-}) => {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const hasText = isStringNotEmpty(text);
-  const hasTitle = isStringNotEmpty(title);
-
-  return (
-    <div
-      className={clsx(classes.root, classes[size], classes[type], {
-        [classes.inline]: !isFullWidth,
-        [classes.withTitle]: hasTitle,
-        [classes.withText]: hasText,
-      })}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
-    >
-      <div className={classes.icon}>
-        <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 } 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';
+  children?: ReactNode;
+}
+
+export const Notification: FC<INotificationProps> = ({
+  children,
+  type,
+  isFullWidth = true,
+  text,
+  title,
+  testId,
+  size = 's',
+  data,
+  tweakStyles,
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const hasText = isStringNotEmpty(text);
+  const hasTitle = isStringNotEmpty(title);
+
+  return (
+    <div
+      className={clsx(classes.root, classes[size], classes[type], {
+        [classes.inline]: !isFullWidth,
+        [classes.withTitle]: hasTitle,
+        [classes.withText]: hasText,
+      })}
+      {...addDataTestId(testId)}
+      {...addDataAttributes(data)}
+    >
+      <div className={classes.icon}>
+        <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';
+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,
+};