@true-engineering/true-react-common-ui-kit 2.3.2 → 2.5.0

package/src/components/MultiSelectList/constants.ts

@@ -0,0 +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';

package/src/components/MultiSelectList/helpers.ts

@@ -0,0 +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(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,2 +1,3 @@
-export * from './MultiSelectList';
-export type { MultiSelectListStyles } from './MultiSelectList.styles';
+export * from './MultiSelectList';
+export * from './types';
+export type { MultiSelectListStyles } from './MultiSelectList.styles';

package/src/components/MultiSelectList/types.ts

@@ -0,0 +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;

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,50 +1,50 @@
-import { ComponentStyles } from '../../types';
-import type { NotificationType } from './Notification';
-
-interface IStyleProps {
-  type: NotificationType;
-}
-
-export const styles = {
-  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: {},
-};
-
-export type NotificationStyles = ComponentStyles<typeof styles, IStyleProps>;
+import { ComponentStyles } from '../../types';
+import type { NotificationType } from './types';
+
+interface IStyleProps {
+  type: NotificationType;
+}
+
+export const styles = {
+  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: {},
+};
+
+export type NotificationStyles = ComponentStyles<typeof styles, IStyleProps>;

package/src/components/Notification/Notification.tsx

@@ -1,79 +1,78 @@
-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 { useTheme } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { Icon } from '../Icon';
-import { NotificationStyles, styles } from './Notification.styles';
-
-export type NotificationType = 'error' | 'info' | 'warning' | 'ok' | 'not-ok';
-
-export interface INotificationProps extends ICommonProps {
-  tweakStyles?: NotificationStyles;
-  type: NotificationType;
-  /**
-   * @default true
-   */
-  isFullWidth?: boolean;
-  text?: string;
-  title?: string;
-  /**
-   * @default `s`
-   */
-  size?: 's' | 'm' | 'l';
-  testId?: string;
-  children?: ReactNode;
-}
-
-export const Notification: FC<INotificationProps> = ({
-  children,
-  type,
-  isFullWidth = true,
-  text,
-  title,
-  testId,
-  size = 's',
-  data,
-  tweakStyles,
-}) => {
-  const { classes } = useTheme('Notification', styles, tweakStyles, { type });
-
-  const hasText = isStringNotEmpty(text);
-  const hasTitle = isStringNotEmpty(title);
-
-  return (
-    <div
-      className={clsx(classes.root, classes[size], {
-        [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>
-  );
-};
-
-export default Notification;
+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 { useTheme } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { Icon } from '../Icon';
+import { NotificationType } from './types';
+import { NotificationStyles, styles } from './Notification.styles';
+
+export interface INotificationProps extends ICommonProps {
+  tweakStyles?: NotificationStyles;
+  type: NotificationType;
+  /**
+   * @default true
+   */
+  isFullWidth?: boolean;
+  text?: string;
+  title?: string;
+  /**
+   * @default `s`
+   */
+  size?: 's' | 'm' | 'l';
+  testId?: string;
+  children?: ReactNode;
+}
+
+export const Notification: FC<INotificationProps> = ({
+  children,
+  type,
+  isFullWidth = true,
+  text,
+  title,
+  testId,
+  size = 's',
+  data,
+  tweakStyles,
+}) => {
+  const { classes } = useTheme('Notification', styles, tweakStyles, { type });
+
+  const hasText = isStringNotEmpty(text);
+  const hasTitle = isStringNotEmpty(title);
+
+  return (
+    <div
+      className={clsx(classes.root, classes[size], {
+        [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>
+  );
+};
+
+export default Notification;

package/src/components/Notification/index.ts

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

package/src/components/Notification/types.ts

@@ -0,0 +1 @@
+export type NotificationType = '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,
+};