@true-engineering/true-react-common-ui-kit 3.20.1 → 3.21.0

package/src/components/MultiSelect/MultiSelect.tsx

@@ -1,106 +1,106 @@
-import { useRef, useState } from 'react';
-import clsx from 'clsx';
-import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { useOnClickOutside, useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
-import {
-  MultiSelectList,
-  IMultiSelectListValues,
-  IMultiSelectLocale,
-  IMultiSelectLocaleKey,
-} from '../MultiSelectList';
-import { MultiSelectInput } from './components';
-import { IHorizontalCornerConnection } from './types';
-import { useStyles, IMultiSelectStyles, multiSelectListStyles } from './MultiSelect.styles';
-
-export interface IMultiSelectProps<Value = string> extends ICommonProps<IMultiSelectStyles> {
-  value?: IMultiSelectListValues<Value>;
-  /** @default 'full' */
-  corners?: IHorizontalCornerConnection;
-  /** @default false */
-  isInvalid?: boolean;
-  /** @default false */
-  isRequired?: boolean;
-  /** @default false */
-  isDisabled?: boolean;
-  /** @default '' */
-  placeholder?: string;
-  localeKey?: IMultiSelectLocaleKey;
-  locale?: IMultiSelectLocale;
-  onChange: (value?: IMultiSelectListValues<Value>) => void;
-  fetchOptions: (value?: string, page?: number) => Promise<Value[]>;
-}
-
-export function MultiSelect<Value = string>({
-  value,
-  corners = 'full',
-  isInvalid = false,
-  isRequired = false,
-  isDisabled = false,
-  placeholder = '',
-  localeKey,
-  locale,
-  testId,
-  data,
-  onChange,
-  fetchOptions,
-  tweakStyles,
-}: IMultiSelectProps<Value>): JSX.Element {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const tweakMultiSelectListStyles = useTweakStyles({
-    innerStyles: multiSelectListStyles,
-    tweakStyles,
-    className: 'tweakMultiSelectList',
-    currentComponentName: 'MultiSelect',
-  });
-
-  const [isOpen, setIsOpen] = useState(false);
-
-  const ref = useRef(null);
-
-  const handleOnClose = () => {
-    setIsOpen(false);
-  };
-
-  useOnClickOutside(ref, handleOnClose, classes.root);
-
-  return (
-    <div
-      className={clsx(
-        classes.root,
-        classes[corners],
-        isOpen && classes.open,
-        isInvalid && !isDisabled && classes.invalid,
-        isRequired && classes.required,
-        isDisabled && classes.disabled,
-      )}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
-    >
-      {/* Input */}
-      <MultiSelectInput
-        value={value}
-        isOpen={isOpen}
-        isDisabled={isDisabled}
-        placeholder={placeholder}
-        onToggle={(state) => setIsOpen(state)}
-      />
-      {/* Dropdown */}
-      {isOpen && (
-        <div className={classes.listContainer} ref={ref}>
-          <MultiSelectList
-            tweakStyles={tweakMultiSelectListStyles}
-            value={value}
-            localeKey={localeKey}
-            locale={locale}
-            fetchOptions={fetchOptions}
-            onChange={onChange}
-            onClose={handleOnClose}
-          />
-        </div>
-      )}
-    </div>
-  );
-}
+import { useRef, useState } from 'react';
+import clsx from 'clsx';
+import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { useOnClickOutside, useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
+import {
+  MultiSelectList,
+  IMultiSelectListValues,
+  IMultiSelectLocale,
+  IMultiSelectLocaleKey,
+} from '../MultiSelectList';
+import { MultiSelectInput } from './components';
+import { IHorizontalCornerConnection } from './types';
+import { useStyles, IMultiSelectStyles, multiSelectListStyles } from './MultiSelect.styles';
+
+export interface IMultiSelectProps<Value = string> extends ICommonProps<IMultiSelectStyles> {
+  value?: IMultiSelectListValues<Value>;
+  /** @default 'full' */
+  corners?: IHorizontalCornerConnection;
+  /** @default false */
+  isInvalid?: boolean;
+  /** @default false */
+  isRequired?: boolean;
+  /** @default false */
+  isDisabled?: boolean;
+  /** @default '' */
+  placeholder?: string;
+  localeKey?: IMultiSelectLocaleKey;
+  locale?: IMultiSelectLocale;
+  onChange: (value?: IMultiSelectListValues<Value>) => void;
+  fetchOptions: (value?: string, page?: number) => Promise<Value[]>;
+}
+
+export function MultiSelect<Value = string>({
+  value,
+  corners = 'full',
+  isInvalid = false,
+  isRequired = false,
+  isDisabled = false,
+  placeholder = '',
+  localeKey,
+  locale,
+  testId,
+  data,
+  onChange,
+  fetchOptions,
+  tweakStyles,
+}: IMultiSelectProps<Value>): JSX.Element {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakMultiSelectListStyles = useTweakStyles({
+    innerStyles: multiSelectListStyles,
+    tweakStyles,
+    className: 'tweakMultiSelectList',
+    currentComponentName: 'MultiSelect',
+  });
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const ref = useRef(null);
+
+  const handleOnClose = () => {
+    setIsOpen(false);
+  };
+
+  useOnClickOutside(ref, handleOnClose, classes.root);
+
+  return (
+    <div
+      className={clsx(
+        classes.root,
+        classes[corners],
+        isOpen && classes.open,
+        isInvalid && !isDisabled && classes.invalid,
+        isRequired && classes.required,
+        isDisabled && classes.disabled,
+      )}
+      {...addDataTestId(testId)}
+      {...addDataAttributes(data)}
+    >
+      {/* Input */}
+      <MultiSelectInput
+        value={value}
+        isOpen={isOpen}
+        isDisabled={isDisabled}
+        placeholder={placeholder}
+        onToggle={(state) => setIsOpen(state)}
+      />
+      {/* Dropdown */}
+      {isOpen && (
+        <div className={classes.listContainer} ref={ref}>
+          <MultiSelectList
+            tweakStyles={tweakMultiSelectListStyles}
+            value={value}
+            localeKey={localeKey}
+            locale={locale}
+            fetchOptions={fetchOptions}
+            onChange={onChange}
+            onClose={handleOnClose}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/MultiSelect/components/MultiSelectInput/MultiSelectInput.tsx

@@ -1,53 +1,53 @@
-import { ReactElement } from 'react';
-import clsx from 'clsx';
-import { ICommonProps } from '../../../../types';
-import { Icon } from '../../../Icon';
-import { IMultiSelectListValues } from '../../../MultiSelectList';
-import { useStyles, IMultiSelectInputStyles } from './MultiSelectInput.styles';
-
-export interface IMultiSelectInputProps<Value>
-  extends Pick<ICommonProps<IMultiSelectInputStyles>, 'tweakStyles'> {
-  value?: IMultiSelectListValues<Value>;
-  isOpen: boolean;
-  isDisabled: boolean;
-  placeholder: string;
-  onToggle: (state: boolean) => void;
-}
-
-export function MultiSelectInput<Value>({
-  value: v,
-  isOpen,
-  isDisabled = false,
-  placeholder = '',
-  tweakStyles,
-  onToggle,
-}: IMultiSelectInputProps<Value>): ReactElement | null {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const value = v?.include;
-
-  return (
-    <div className={classes.root} onClick={() => !isDisabled && onToggle(!isOpen)}>
-      {/* Placeholder */}
-      {(value === undefined || (value && value.length === 0)) && (
-        <div className={classes.placeholder}>{placeholder}</div>
-      )}
-      {/* Selected options */}
-      {value !== undefined && value.length > 0 && (
-        <>
-          <div className={clsx(classes.placeholder, classes.placeholderSmall)}>{placeholder}</div>
-          <div className={classes.values}>
-            <div className={classes.value}>{value.join(', ')}</div>
-            <div className={classes.amount}>{value.length}</div>
-          </div>
-        </>
-      )}
-      {/* Chevron */}
-      <div className={clsx(classes.indicator, isDisabled && classes.indicatorDisabled)}>
-        <div className={clsx(classes.arrow, isOpen && classes.arrowUp)}>
-          <Icon type="chevron-down" />
-        </div>
-      </div>
-    </div>
-  );
-}
+import { ReactElement } from 'react';
+import clsx from 'clsx';
+import { ICommonProps } from '../../../../types';
+import { Icon } from '../../../Icon';
+import { IMultiSelectListValues } from '../../../MultiSelectList';
+import { useStyles, IMultiSelectInputStyles } from './MultiSelectInput.styles';
+
+export interface IMultiSelectInputProps<Value>
+  extends Pick<ICommonProps<IMultiSelectInputStyles>, 'tweakStyles'> {
+  value?: IMultiSelectListValues<Value>;
+  isOpen: boolean;
+  isDisabled: boolean;
+  placeholder: string;
+  onToggle: (state: boolean) => void;
+}
+
+export function MultiSelectInput<Value>({
+  value: v,
+  isOpen,
+  isDisabled = false,
+  placeholder = '',
+  tweakStyles,
+  onToggle,
+}: IMultiSelectInputProps<Value>): ReactElement | null {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const value = v?.include;
+
+  return (
+    <div className={classes.root} onClick={() => !isDisabled && onToggle(!isOpen)}>
+      {/* Placeholder */}
+      {(value === undefined || (value && value.length === 0)) && (
+        <div className={classes.placeholder}>{placeholder}</div>
+      )}
+      {/* Selected options */}
+      {value !== undefined && value.length > 0 && (
+        <>
+          <div className={clsx(classes.placeholder, classes.placeholderSmall)}>{placeholder}</div>
+          <div className={classes.values}>
+            <div className={classes.value}>{value.join(', ')}</div>
+            <div className={classes.amount}>{value.length}</div>
+          </div>
+        </>
+      )}
+      {/* Chevron */}
+      <div className={clsx(classes.indicator, isDisabled && classes.indicatorDisabled)}>
+        <div className={clsx(classes.arrow, isOpen && classes.arrowUp)}>
+          <Icon type="chevron-down" />
+        </div>
+      </div>
+    </div>
+  );
+}

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: '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'] },
-    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: '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'] },
+    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.tsx

@@ -1,69 +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>
+  );
+};