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

package/src/components/ControlWrapper/ControlWrapper.tsx

@@ -1,151 +1,163 @@
-import { FC, ReactNode } from 'react';
-import clsx from 'clsx';
-import {
-  addClickHandler,
-  addDataAttributes,
-  addDataTestId,
-  isNotEmpty,
-  isReactNodeNotEmpty,
-  isString,
-} from '@true-engineering/true-react-platform-helpers';
-import { useTweakStyles } from '../../hooks';
-import { IClickHandlerEvent, ICommonProps } from '../../types';
-import { Icon, IIcon, renderIcon } from '../Icon';
-import { ThemedPreloader } from '../ThemedPreloader';
-import { IControlWrapperStyles, useStyles } from './ControlWrapper.styles';
-
-export interface IControlWrapperProps extends ICommonProps<IControlWrapperStyles> {
-  children: ReactNode;
-  label?: ReactNode;
-  icon?: IIcon;
-  groupPlacement?:
-    | 'left'
-    | 'right'
-    | 'middle'
-    | 'top'
-    | 'bottom'
-    | 'top-left'
-    | 'top-right'
-    | 'bottom-left'
-    | 'bottom-right';
-  /** @default false */
-  isInvalid?: boolean;
-  /** @default false */
-  isFocused?: boolean;
-  /** @default false */
-  hasValue?: boolean;
-  /** @default false */
-  isRequired?: boolean;
-  /** @default false */
-  isFullWidth?: boolean;
-  /** @default false */
-  isLoading?: boolean;
-  /** @default false */
-  isDisabled?: boolean;
-  onIconClick?: (event: IClickHandlerEvent) => void;
-  onClear?: (event: IClickHandlerEvent) => void;
-}
-
-export const ControlWrapper: FC<IControlWrapperProps> = ({
-  label,
-  icon,
-  groupPlacement,
-  isInvalid,
-  isFocused,
-  isRequired,
-  isLoading,
-  isFullWidth,
-  isDisabled,
-  hasValue,
-  testId,
-  children,
-  tweakStyles,
-  data,
-  onIconClick,
-  onClear,
-}) => {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const hasEndIcon = !isLoading && isReactNodeNotEmpty(icon);
-  const hasClearButton = !isDisabled && !isLoading && hasValue && isNotEmpty(onClear);
-  const hasControls = hasEndIcon || hasClearButton || isLoading;
-
-  const tweakPreloaderStyles = useTweakStyles({
-    tweakStyles,
-    className: 'tweakPreloader',
-    currentComponentName: 'ControlWrapper',
-  });
-
-  return (
-    <div
-      className={clsx(
-        classes.controlWrapper,
-        isNotEmpty(groupPlacement) && [classes[`placement-${groupPlacement}`]],
-        {
-          [classes.invalid]: isInvalid,
-          [classes.focused]: isFocused,
-          [classes.withValue]: hasValue,
-          [classes.disabled]: isDisabled,
-          [classes.loading]: isLoading,
-          [classes.minContent]: !isFullWidth,
-        },
-      )}
-      {...addDataAttributes(data, testId)}
-    >
-      {isReactNodeNotEmpty(label) && (
-        <div
-          className={clsx(classes.label, {
-            [classes.requiredLabel]: isRequired,
-            [classes.disabledLabel]: isDisabled,
-            [classes.activeLabel]: isFocused || hasValue,
-          })}
-        >
-          {label}
-        </div>
-      )}
-      <div className={classes.wrapper}>
-        {children}
-
-        {hasControls && (
-          <div className={classes.controls}>
-            {hasClearButton && (
-              <div
-                className={clsx(classes.icon, classes.clearIcon, classes.activeIcon)}
-                {...addClickHandler(onClear)}
-                {...addDataTestId(testId, 'clear')}
-              >
-                <div className={classes.iconInner}>
-                  <Icon type="close" />
-                </div>
-              </div>
-            )}
-
-            {hasEndIcon && (
-              <div
-                className={clsx(classes.icon, classes.endIcon, {
-                  [classes.activeIcon]: !isDisabled && isNotEmpty(onIconClick),
-                  [classes.customIcon]: !isString(icon),
-                })}
-                {...addClickHandler(onIconClick, !isDisabled)}
-                {...addDataTestId(testId, 'icon')}
-              >
-                <div className={classes.iconInner}>{renderIcon(icon)}</div>
-              </div>
-            )}
-
-            {isLoading && (
-              <div
-                className={clsx(classes.icon, classes.loader)}
-                {...addDataTestId(testId, 'loading')}
-              >
-                <div className={classes.iconInner}>
-                  <ThemedPreloader tweakStyles={tweakPreloaderStyles} />
-                </div>
-              </div>
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
+import { FC, ReactNode } from 'react';
+import clsx from 'clsx';
+import {
+  addClickHandler,
+  addDataAttributes,
+  addDataTestId,
+  getArray,
+  isArrayNotEmpty,
+  isNotEmpty,
+  isReactNodeNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
+import { useTweakStyles } from '../../hooks';
+import { IMaybeArray } from '../../theme';
+import { IClickHandlerEvent, ICommonProps } from '../../types';
+import { Icon, IIcon, renderIcon } from '../Icon';
+import { ThemedPreloader } from '../ThemedPreloader';
+import { convertToControlWrapperIcon } from './helpers';
+import { IControlWrapperIcon, IControlWrapperSize } from './types';
+import { IControlWrapperStyles, useStyles } from './ControlWrapper.styles';
+
+export interface IControlWrapperProps extends ICommonProps<IControlWrapperStyles> {
+  children: ReactNode;
+  label?: ReactNode;
+  icon?: IMaybeArray<IIcon | IControlWrapperIcon>;
+  size?: IControlWrapperSize;
+  groupPlacement?:
+    | 'left'
+    | 'right'
+    | 'middle'
+    | 'top'
+    | 'bottom'
+    | 'top-left'
+    | 'top-right'
+    | 'bottom-left'
+    | 'bottom-right';
+  /** @default false */
+  isInvalid?: boolean;
+  /** @default false */
+  isFocused?: boolean;
+  /** @default false */
+  hasValue?: boolean;
+  /** @default false */
+  isRequired?: boolean;
+  /** @default false */
+  isFullWidth?: boolean;
+  /** @default false */
+  isLoading?: boolean;
+  /** @default false */
+  isDisabled?: boolean;
+  /** @default false */
+  isActive?: boolean;
+  onClear?: (event: IClickHandlerEvent) => void;
+}
+
+export const ControlWrapper: FC<IControlWrapperProps> = ({
+  label,
+  icon,
+  groupPlacement,
+  isInvalid,
+  isFocused,
+  isRequired,
+  isLoading,
+  isFullWidth,
+  isActive,
+  isDisabled,
+  hasValue,
+  size,
+  testId,
+  children,
+  tweakStyles,
+  data,
+  onClear,
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const icons = getArray(icon).map(convertToControlWrapperIcon);
+
+  const hasIcons = !isLoading && isArrayNotEmpty(icons);
+  const hasClearButton = !isDisabled && !isLoading && hasValue && isNotEmpty(onClear);
+  const hasControls = hasIcons || hasClearButton || isLoading;
+
+  const tweakPreloaderStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakPreloader',
+    currentComponentName: 'ControlWrapper',
+  });
+
+  return (
+    <div
+      className={clsx(
+        classes.controlWrapper,
+        isNotEmpty(groupPlacement) && classes[`placement-${groupPlacement}`],
+        isNotEmpty(size) && classes[size],
+        {
+          [classes.invalid]: isInvalid,
+          [classes.focused]: isFocused,
+          [classes.withValue]: hasValue,
+          [classes.disabled]: isDisabled,
+          [classes.loading]: isLoading,
+          [classes.minContent]: !isFullWidth,
+        },
+      )}
+      {...addDataAttributes(data, testId)}
+    >
+      {isReactNodeNotEmpty(label) && (
+        <div
+          className={clsx(classes.label, {
+            [classes.requiredLabel]: isRequired,
+            [classes.disabledLabel]: isDisabled,
+            [classes.activeLabel]: isFocused || hasValue || isActive,
+          })}
+        >
+          {label}
+        </div>
+      )}
+      <div className={classes.wrapper}>
+        {children}
+
+        {hasControls && (
+          <div className={classes.controls}>
+            {hasClearButton && (
+              <div
+                className={clsx(classes.icon, classes.clearIcon, classes.activeIcon)}
+                {...addClickHandler(onClear)}
+                {...addDataTestId(testId, 'clear')}
+              >
+                <div className={classes.iconInner}>
+                  <Icon type="close" />
+                </div>
+              </div>
+            )}
+
+            {hasIcons &&
+              icons.map(({ key, iconComponent, onClick, shouldResetSize = false }, index) => (
+                <div
+                  key={key ?? index}
+                  className={clsx(classes.icon, classes.endIcon, {
+                    [classes.activeIcon]: !isDisabled && isNotEmpty(onClick),
+                    [classes.customIcon]: shouldResetSize,
+                  })}
+                  {...addClickHandler(onClick, !isDisabled)}
+                  {...addDataTestId(testId, 'icon')}
+                >
+                  <div className={classes.iconInner}>{renderIcon(iconComponent)}</div>
+                </div>
+              ))}
+
+            {isLoading && (
+              <div
+                className={clsx(classes.icon, classes.loader)}
+                {...addDataTestId(testId, 'loading')}
+              >
+                <div className={classes.iconInner}>
+                  <ThemedPreloader tweakStyles={tweakPreloaderStyles} />
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/components/ControlWrapper/helpers.ts

@@ -0,0 +1,11 @@
+import { isObject } from '@true-engineering/true-react-platform-helpers';
+import { IIcon } from '../Icon';
+import { IControlWrapperIcon } from './types';
+
+export const isControlWrapperIcon = (
+  iconItem: IIcon | IControlWrapperIcon,
+): iconItem is IControlWrapperIcon => isObject(iconItem) && 'iconComponent' in iconItem;
+
+export const convertToControlWrapperIcon = (
+  iconItem: IIcon | IControlWrapperIcon,
+): IControlWrapperIcon => (isControlWrapperIcon(iconItem) ? iconItem : { iconComponent: iconItem });

package/src/components/ControlWrapper/index.ts

@@ -1,2 +1,4 @@
-export * from './ControlWrapper';
-export type { IControlWrapperStyles } from './ControlWrapper.styles';
+export * from './ControlWrapper';
+export * from './helpers';
+export * from './types';
+export type { IControlWrapperStyles } from './ControlWrapper.styles';

package/src/components/ControlWrapper/types.ts

@@ -0,0 +1,16 @@
+import { type Key } from 'react';
+import { IClickHandlerEvent } from '../../types';
+import { IIcon } from '../Icon';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface IControlWrapperSizes {}
+
+export type IControlWrapperSize = keyof IControlWrapperSizes;
+
+// подумать над extend HTMLAttributes<HTMLDivElement>
+export interface IControlWrapperIcon {
+  key?: Key;
+  iconComponent: IIcon;
+  onClick?: (event: IClickHandlerEvent) => void;
+  shouldResetSize?: boolean;
+}

package/src/components/CssBaseline/CssBaseline.styles.ts

@@ -1,14 +1,14 @@
-import { colors, ITweakStyles, createThemedStyles } from '../../theme';
-
-export const useStyles = createThemedStyles('CssBaseline', {
-  '@global html, body': {
-    fontFamily: 'Arial, sans-serif',
-    color: colors.FONT_MAIN,
-    padding: 0,
-    margin: 0,
-  },
-
-  root: {},
-});
-
-export type ICssBaselineStyles = ITweakStyles<typeof useStyles>;
+import { colors, ITweakStyles, createThemedStyles } from '../../theme';
+
+export const useStyles = createThemedStyles('CssBaseline', {
+  '@global html, body': {
+    fontFamily: 'Arial, sans-serif',
+    color: colors.FONT_MAIN,
+    padding: 0,
+    margin: 0,
+  },
+
+  root: {},
+});
+
+export type ICssBaselineStyles = ITweakStyles<typeof useStyles>;

package/src/components/CssBaseline/CssBaseline.tsx

@@ -1,13 +1,13 @@
-import { FC } from 'react';
-import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { ICommonProps } from '../../types';
-import { useStyles, ICssBaselineStyles } from './CssBaseline.styles';
-
-export type ICssBaselineProps = ICommonProps<ICssBaselineStyles>;
-
-export const CssBaseline: FC<ICssBaselineProps> = ({ data, testId, tweakStyles }) => {
-  const classes = useStyles({ theme: tweakStyles });
-
-  return <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)} />;
-};
+import { FC } from 'react';
+import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { ICommonProps } from '../../types';
+import { useStyles, ICssBaselineStyles } from './CssBaseline.styles';
+
+export type ICssBaselineProps = ICommonProps<ICssBaselineStyles>;
+
+export const CssBaseline: FC<ICssBaselineProps> = ({ data, testId, tweakStyles }) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  return <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)} />;
+};

package/src/components/CssBaseline/index.ts

@@ -1,2 +1,2 @@
-export * from './CssBaseline';
-export type { ICssBaselineStyles } from './CssBaseline.styles';
+export * from './CssBaseline';
+export type { ICssBaselineStyles } from './CssBaseline.styles';

package/src/components/DateInput/DateInput.stories.tsx

@@ -1,61 +1,60 @@
-import { useEffect, useState } from 'react';
-import { format, isValid } from 'date-fns';
-import { ComponentStory } from '@storybook/react';
-import { DateInput } from './DateInput';
-
-export default {
-  title: 'Inputs/DateInput',
-  component: DateInput,
-};
-
-const Template: ComponentStory<typeof DateInput> = ({ date, startDate, endDate, ...args }) => {
-  const [value, setValue] = useState(date);
-
-  const startDateValue = isValid(startDate)
-    ? format(new Date(startDate as string), 'dd.MM.yyyy')
-    : undefined;
-
-  const endDateValue = isValid(endDate)
-    ? format(new Date(endDate as string), 'dd.MM.yyyy')
-    : undefined;
-
-  useEffect(() => {
-    setValue(date);
-  }, [date]);
-
-  return (
-    <DateInput
-      {...args}
-      date={value}
-      startDate={startDateValue}
-      endDate={endDateValue}
-      onClick={(e) => console.log('Click', e)}
-      onChange={(_, newValue) => setValue(newValue)}
-    />
-  );
-};
-
-export const Default = Template.bind({});
-
-Default.args = {
-  date: '23.01.2023',
-  startDate: undefined,
-  endDate: undefined,
-  isRange: false,
-};
-
-Default.parameters = {
-  controls: {
-    exclude: [
-      'data',
-      'testId',
-      'tabIndex',
-      'onChange',
-      'onFocus',
-      'onBlur',
-      'onPaste',
-      'onIconClick',
-      'onKeyDown',
-    ],
-  },
-};
+import { useEffect, useState } from 'react';
+import { format, isValid } from 'date-fns';
+import { ComponentStory } from '@storybook/react';
+import { DateInput } from './DateInput';
+
+export default {
+  title: 'Inputs/DateInput',
+  component: DateInput,
+};
+
+const Template: ComponentStory<typeof DateInput> = ({ date, startDate, endDate, ...args }) => {
+  const [value, setValue] = useState(date);
+
+  const startDateValue = isValid(startDate)
+    ? format(new Date(startDate as string), 'dd.MM.yyyy')
+    : undefined;
+
+  const endDateValue = isValid(endDate)
+    ? format(new Date(endDate as string), 'dd.MM.yyyy')
+    : undefined;
+
+  useEffect(() => {
+    setValue(date);
+  }, [date]);
+
+  return (
+    <DateInput
+      {...args}
+      date={value}
+      startDate={startDateValue}
+      endDate={endDateValue}
+      onClick={(e) => console.log('Click', e)}
+      onChange={(_, newValue) => setValue(newValue)}
+    />
+  );
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  date: '23.01.2023',
+  startDate: undefined,
+  endDate: undefined,
+  isRange: false,
+};
+
+Default.parameters = {
+  controls: {
+    exclude: [
+      'data',
+      'testId',
+      'tabIndex',
+      'onChange',
+      'onFocus',
+      'onBlur',
+      'onPaste',
+      'onKeyDown',
+    ],
+  },
+};

package/src/components/DateInput/DateInput.styles.ts

@@ -1,13 +1,13 @@
-import { createThemedStyles, ITweakStyles } from '../../theme';
-import { IInputStyles } from '../Input';
-
-export const useStyles = createThemedStyles('DateInput', {
-  root: {
-    width: '100%',
-    height: '100%',
-    cursor: 'pointer',
-    position: 'relative',
-  },
-});
-
-export type IDateInputStyles = ITweakStyles<typeof useStyles, { tweakInput: IInputStyles }>;
+import { createThemedStyles, ITweakStyles } from '../../theme';
+import { IInputStyles } from '../Input';
+
+export const useStyles = createThemedStyles('DateInput', {
+  root: {
+    width: '100%',
+    height: '100%',
+    cursor: 'pointer',
+    position: 'relative',
+  },
+});
+
+export type IDateInputStyles = ITweakStyles<typeof useStyles, { tweakInput: IInputStyles }>;