@true-engineering/true-react-common-ui-kit 3.31.0 → 3.32.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,55 @@
-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 { iconsList, IIconType } from '../Icon';
+import { complexIcons } from '../Icon/complexIcons';
+import { INotificationProps, Notification } from './Notification';
+
+const iconTypes = [
+  undefined,
+  ...Object.keys(iconsList),
+  ...Object.keys(complexIcons),
+] as IIconType[];
+
+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'] },
+    icon: { options: iconTypes, control: 'select' },
+    type: {
+      control: 'inline-radio',
+      options: ['error', 'info', 'warning', 'ok', 'not-ok', 'custom'],
+    },
+  },
+} 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,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': {},
-});
-
-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>;