@true-engineering/true-react-common-ui-kit 4.0.0-alpha6 → 4.0.0-alpha62

package/src/components/Checkbox/types.ts

@@ -0,0 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface ICheckboxSizes {}
+
+export type ICheckboxSize = keyof ICheckboxSizes;

package/src/components/CloseButton/CloseButton.stories.tsx

@@ -1,11 +1,10 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { type Meta } from '@storybook/react';
 import { CloseButton } from './CloseButton';
 
-export default {
+const meta: Meta<typeof CloseButton> = {
   title: 'Buttons/CloseButton',
   component: CloseButton,
-  args: {},
-  argTypes: {},
-} as ComponentMeta<typeof CloseButton>;
+};
 
-export const Default: ComponentStory<typeof CloseButton> = (args) => <CloseButton {...args} />;
+export default meta;
+export const Default = {};

package/src/components/CloseButton/CloseButton.tsx

@@ -1,6 +1,5 @@
 import { FC } from 'react';
-import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
+import { addDataAttributes } from '@true-engineering/true-react-platform-helpers';
 import { ICommonProps } from '../../types';
 import { Icon } from '../Icon';
 import { ICloseButtonStyles, useStyles } from './CloseButton.styles';
@@ -26,8 +25,7 @@ export const CloseButton: FC<ICloseButtonProps> = ({
       type="button"
       className={classes.root}
       onClick={onClose}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
+      {...addDataAttributes(data, testId)}
     >
       <Icon type={icon} />
     </button>

package/src/components/Colors/Colors.stories.tsx

@@ -1,7 +1,68 @@
-import { Colors } from './Colors';
+import { FC } from 'react';
+import { createUseStyles } from 'react-jss';
+import { type Meta } from '@storybook/react';
+import { useTheme } from '../../theme';
 
-export default {
+const useStyles = createUseStyles({
+  root: {
+    display: 'flex',
+    flexWrap: 'wrap',
+  },
+
+  colorCard: {
+    width: 120,
+    border: 'solid 1px #dde3ed',
+    borderRadius: 8,
+    color: '#222a37',
+    fontSize: 14,
+    margin: 6,
+  },
+
+  color: {
+    height: 120,
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
+  },
+
+  colorName: {
+    marginBottom: 6,
+    padding: 6,
+    overflow: 'hidden',
+  },
+
+  hex: {
+    marginTop: 6,
+    textTransform: 'uppercase',
+    fontWeight: 'bold',
+    padding: [0, 6, 6],
+  },
+});
+
+const Story: FC = () => {
+  const classes = useStyles();
+  const theme = useTheme();
+  const { colors = {} } = theme;
+
+  return (
+    <div className={classes.root}>
+      {Object.entries(colors as Record<string, string>).map(([colorName, color]) => {
+        const name = colorName.split('_').join(' ').toLowerCase();
+        return (
+          <div key={colorName} className={classes.colorCard}>
+            <div className={classes.color} style={{ backgroundColor: color }} />
+            <div className={classes.colorName}>{`${name[0].toUpperCase()}${name.slice(1)}`}</div>
+            <div className={classes.hex}>{color}</div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+const meta: Meta = {
   title: 'Data Display/Colors',
+  component: Story,
 };
 
-export const Default = (): JSX.Element => <Colors />;
+export default meta;
+export const Default = {};

package/src/components/ControlWrapper/ControlWrapper.stories.tsx

@@ -1,45 +1,56 @@
+import { FC } from 'react';
 import { doNothing } from '@true-engineering/true-react-platform-helpers';
-import { ComponentStory } from '@storybook/react';
-import { iconsList } from '../Icon';
-import { ControlWrapper } from './ControlWrapper';
+import { type Meta } from '@storybook/react';
+import { excludeStorybookParams } from '../../helpers';
+import { IExtendableProps } from '../../types';
+import { Icon, iconsMap } from '../Icon';
+import { ControlWrapper, IControlWrapperProps } from './ControlWrapper';
+import { GROUP_PLACEMENTS } from './constants';
 
-export default {
-  title: 'ControlWrapper',
-  component: ControlWrapper,
-};
+const SIZES = ['micro'] as const;
+
+declare module './types' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  export interface IControlWrapperSizes extends IExtendableProps<typeof SIZES> {}
+}
 
-const Template: ComponentStory<typeof ControlWrapper> = (args) => (
-  <ControlWrapper {...args} onClear={doNothing} onIconClick={doNothing}>
+const Story: FC<IControlWrapperProps> = (args) => (
+  <ControlWrapper {...args} onClear={doNothing}>
     <div style={{ minWidth: 200, height: 48 }} />
   </ControlWrapper>
 );
 
-export const Default = Template.bind({});
-
-Default.args = {
-  isInvalid: false,
-  label: 'Label',
-  isFocused: false,
-  isRequired: false,
-  isLoading: false,
-  isDisabled: false,
-  hasValue: false,
-};
-
-Default.argTypes = {
-  icon: { control: 'select', options: [undefined, ...Object.keys(iconsList)] },
-  groupPlacement: {
-    control: 'select',
-    options: [
-      'top',
-      'bottom',
-      'top-left',
-      'top-right',
-      'bottom-left',
-      'bottom-right',
-      'left',
-      'right',
-      'middle',
+const meta: Meta<typeof Story> = {
+  title: 'Controls/ControlWrapper',
+  component: Story,
+  args: {
+    label: 'Label',
+    isInvalid: false,
+    isFocused: false,
+    isRequired: false,
+    isLoading: false,
+    isDisabled: false,
+    hasValue: false,
+    isActive: false,
+    isFullWidth: false,
+    startIcon: [{ iconComponent: 'search' }, { iconComponent: <Icon type="plus" /> }],
+    endIcon: [
+      { iconComponent: <div>Бу</div>, onClick: () => console.log('close'), shouldResetSize: true },
+      { iconComponent: <Icon type="plus" /> },
+      { iconComponent: 'search', onClick: () => console.log('search') },
     ],
   },
+  argTypes: {
+    size: { options: [undefined, ...SIZES], control: 'inline-radio' },
+    endIcon: { options: [undefined, ...Object.keys(iconsMap)], control: 'select' },
+    groupPlacement: { options: [undefined, ...GROUP_PLACEMENTS], control: 'select' },
+  },
+  parameters: {
+    controls: {
+      exclude: excludeStorybookParams(['children']),
+    },
+  },
 };
+
+export default meta;
+export const Default = {};

package/src/components/ControlWrapper/ControlWrapper.styles.ts

@@ -1,5 +1,6 @@
 import { animations, createThemedStyles, dimensions, ITweakStyles } from '../../theme';
 import { IThemedPreloaderStyles } from '../ThemedPreloader';
+import { IControlWrapperSizes } from './types';
 
 const { CONTROL, Z_INDEX } = dimensions;
 
@@ -20,10 +21,6 @@ export const useStyles = createThemedStyles('ControlWrapper', {
     zIndex: 0,
   },
 
-  invalid: {
-    zIndex: Z_INDEX.CONTROL_INVALID,
-  },
-
   disabled: {},
 
   focused: {
@@ -31,6 +28,10 @@ export const useStyles = createThemedStyles('ControlWrapper', {
     zIndex: Z_INDEX.CONTROL_FOCUS,
   },
 
+  invalid: {
+    zIndex: Z_INDEX.CONTROL_INVALID,
+  },
+
   withValue: {},
 
   loading: {},
@@ -43,7 +44,7 @@ export const useStyles = createThemedStyles('ControlWrapper', {
     position: 'absolute',
     pointerEvents: 'none',
     left: 'var(--control-padding)',
-    top: '50%',
+    top: 'calc(var(--control-height) / 2)',
     transformOrigin: 'top left',
     transform: 'translateY(-50%)',
     transition: animations.defaultTransition,
@@ -83,6 +84,10 @@ export const useStyles = createThemedStyles('ControlWrapper', {
     flexShrink: 0,
   },
 
+  startControls: {
+    paddingLeft: 'var(--control-padding)',
+  },
+
   icon: {
     display: 'flex',
     alignItems: 'center',
@@ -110,6 +115,8 @@ export const useStyles = createThemedStyles('ControlWrapper', {
     },
   },
 
+  startIcon: {},
+
   endIcon: {},
 
   activeIcon: {
@@ -129,6 +136,8 @@ export const useStyles = createThemedStyles('ControlWrapper', {
     },
   },
 
+  withStartControls: {},
+
   /* groupPositions */
   'placement-top': {
     borderBottomLeftRadius: 0,
@@ -181,5 +190,5 @@ export const useStyles = createThemedStyles('ControlWrapper', {
 
 export type IControlWrapperStyles = ITweakStyles<
   typeof useStyles,
-  { tweakPreloader: IThemedPreloaderStyles }
+  { tweakPreloader: IThemedPreloaderStyles } & IControlWrapperSizes
 >;

package/src/components/ControlWrapper/ControlWrapper.tsx

@@ -1,33 +1,32 @@
-import { FC, ReactNode } from 'react';
+import { CSSProperties, FC, ReactNode, useCallback, useState } from 'react';
 import clsx from 'clsx';
 import {
   addClickHandler,
   addDataAttributes,
   addDataTestId,
+  getArray,
+  IMaybeArray,
+  isArrayNotEmpty,
   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 { IIcon, renderIcon } from '../Icon';
 import { ThemedPreloader } from '../ThemedPreloader';
+import { convertToControlWrapperIcon } from './helpers';
+import { IControlWrapperIcon, IControlWrapperSize, IGroupPlacement } from './types';
 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';
+  /** @deprecated */
+  icon?: IMaybeArray<IIcon | IControlWrapperIcon>;
+  startIcon?: IMaybeArray<IIcon | IControlWrapperIcon>;
+  endIcon?: IMaybeArray<IIcon | IControlWrapperIcon>;
+  size?: IControlWrapperSize;
+  groupPlacement?: IGroupPlacement;
   /** @default false */
   isInvalid?: boolean;
   /** @default false */
@@ -42,33 +41,43 @@ export interface IControlWrapperProps extends ICommonProps<IControlWrapperStyles
   isLoading?: boolean;
   /** @default false */
   isDisabled?: boolean;
-  onIconClick?: (event: IClickHandlerEvent) => void;
+  /** @default false */
+  isActive?: boolean;
   onClear?: (event: IClickHandlerEvent) => void;
 }
 
 export const ControlWrapper: FC<IControlWrapperProps> = ({
   label,
   icon,
+  startIcon,
+  endIcon = icon,
   groupPlacement,
   isInvalid,
   isFocused,
   isRequired,
   isLoading,
   isFullWidth,
+  isActive,
   isDisabled,
   hasValue,
+  size,
   testId,
   children,
   tweakStyles,
   data,
-  onIconClick,
   onClear,
 }) => {
   const classes = useStyles({ theme: tweakStyles });
 
-  const hasEndIcon = !isLoading && isReactNodeNotEmpty(icon);
+  const [startControlsWidth, setStartControlsWidth] = useState<number>();
+
+  const startIcons = getArray(startIcon).map(convertToControlWrapperIcon);
+  const endIcons = getArray(endIcon).map(convertToControlWrapperIcon);
+
+  const hasStartIcons = isArrayNotEmpty(startIcons);
+  const hasEndIcons = !isLoading && isArrayNotEmpty(endIcons);
   const hasClearButton = !isDisabled && !isLoading && hasValue && isNotEmpty(onClear);
-  const hasControls = hasEndIcon || hasClearButton || isLoading;
+  const hasEndControls = hasEndIcons || hasClearButton || isLoading;
 
   const tweakPreloaderStyles = useTweakStyles({
     tweakStyles,
@@ -76,11 +85,38 @@ export const ControlWrapper: FC<IControlWrapperProps> = ({
     currentComponentName: 'ControlWrapper',
   });
 
+  const startControlsRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      setStartControlsWidth(node?.clientWidth);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [startIcon, size],
+  );
+
+  const renderIconControl = (
+    { key, iconComponent, onClick, shouldResetSize = false }: IControlWrapperIcon,
+    iconType: 'start' | 'end' | 'clear',
+    index?: number,
+  ) => (
+    <div
+      key={key ?? index}
+      className={clsx(classes.icon, classes[`${iconType}Icon`], {
+        [classes.activeIcon]: !isDisabled && isNotEmpty(onClick),
+        [classes.customIcon]: shouldResetSize,
+      })}
+      {...addClickHandler(onClick, !isDisabled)}
+      {...addDataTestId(testId, `${iconType}-icon`)}
+    >
+      <div className={classes.iconInner}>{renderIcon(iconComponent)}</div>
+    </div>
+  );
+
   return (
     <div
       className={clsx(
         classes.controlWrapper,
-        isNotEmpty(groupPlacement) && [classes[`placement-${groupPlacement}`]],
+        isNotEmpty(groupPlacement) && classes[`placement-${groupPlacement}`],
+        isNotEmpty(size) && classes[size],
         {
           [classes.invalid]: isInvalid,
           [classes.focused]: isFocused,
@@ -88,8 +124,14 @@ export const ControlWrapper: FC<IControlWrapperProps> = ({
           [classes.disabled]: isDisabled,
           [classes.loading]: isLoading,
           [classes.minContent]: !isFullWidth,
+          [classes.withStartControls]: hasStartIcons,
         },
       )}
+      style={
+        hasStartIcons
+          ? ({ '--start-controls-width': `${startControlsWidth}px` } as CSSProperties)
+          : undefined
+      }
       {...addDataAttributes(data, testId)}
     >
       {isReactNodeNotEmpty(label) && (
@@ -97,41 +139,28 @@ export const ControlWrapper: FC<IControlWrapperProps> = ({
           className={clsx(classes.label, {
             [classes.requiredLabel]: isRequired,
             [classes.disabledLabel]: isDisabled,
-            [classes.activeLabel]: isFocused || hasValue,
+            [classes.activeLabel]: isFocused || hasValue || isActive,
           })}
         >
           {label}
         </div>
       )}
       <div className={classes.wrapper}>
+        {hasStartIcons && (
+          <div className={clsx(classes.controls, classes.startControls)} ref={startControlsRef}>
+            {startIcons.map((iconProps, index) => renderIconControl(iconProps, 'start', index))}
+          </div>
+        )}
+
         {children}
 
-        {hasControls && (
+        {hasEndControls && (
           <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>
-            )}
+            {hasClearButton &&
+              renderIconControl({ iconComponent: 'close', onClick: onClear }, 'clear')}
 
-            {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>
-            )}
+            {hasEndIcons &&
+              endIcons.map((iconProps, index) => renderIconControl(iconProps, 'end', index))}
 
             {isLoading && (
               <div

package/src/components/ControlWrapper/constants.ts

@@ -0,0 +1,11 @@
+export const GROUP_PLACEMENTS = [
+  'left',
+  'right',
+  'middle',
+  'top',
+  'bottom',
+  'top-left',
+  'top-right',
+  'bottom-left',
+  'bottom-right',
+] as const;

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,5 @@
 export * from './ControlWrapper';
+export * from './helpers';
+export * from './constants';
+export * from './types';
 export type { IControlWrapperStyles } from './ControlWrapper.styles';

package/src/components/ControlWrapper/types.ts

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

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

@@ -8,6 +8,8 @@ export const useStyles = createThemedStyles('CssBaseline', {
     margin: 0,
   },
 
+  '@global': {},
+
   root: {},
 });
 

package/src/components/CssBaseline/CssBaseline.tsx

@@ -1,6 +1,5 @@
 import { FC } from 'react';
-import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
+import { addDataAttributes } from '@true-engineering/true-react-platform-helpers';
 import { ICommonProps } from '../../types';
 import { useStyles, ICssBaselineStyles } from './CssBaseline.styles';
 
@@ -9,5 +8,5 @@ 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)} />;
+  return <div className={classes.root} {...addDataAttributes(data, testId)} />;
 };

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

@@ -1,14 +1,9 @@
-import { useEffect, useState } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { format, isValid } from 'date-fns';
-import { ComponentStory } from '@storybook/react';
-import { DateInput } from './DateInput';
+import { type Meta } from '@storybook/react';
+import { DateInput, IDateInputProps } from './DateInput';
 
-export default {
-  title: 'Inputs/DateInput',
-  component: DateInput,
-};
-
-const Template: ComponentStory<typeof DateInput> = ({ date, startDate, endDate, ...args }) => {
+const Story: FC<IDateInputProps> = ({ date, startDate, endDate, ...args }) => {
   const [value, setValue] = useState(date);
 
   const startDateValue = isValid(startDate)
@@ -35,27 +30,14 @@ const Template: ComponentStory<typeof DateInput> = ({ date, startDate, endDate,
   );
 };
 
-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',
-    ],
+const meta: Meta<typeof Story> = {
+  title: 'Inputs/DateInput',
+  component: Story,
+  args: {
+    date: '23.01.2023',
+    isRange: false,
   },
 };
+
+export default meta;
+export const Default = {};