@true-engineering/true-react-common-ui-kit 4.0.0-alpha7 → 4.0.0-alpha71

package/src/components/SmartInput/SmartInput.tsx

@@ -26,91 +26,89 @@ export interface ISmartInputProps extends Omit<IInputProps, 'onChange'> {
   ) => void;
 }
 
-export const SmartInput = forwardRef<HTMLInputElement, ISmartInputProps>(
-  (
-    {
-      value = '',
-      smartType = 'default',
-      regExp,
-      maxLength,
-      isUpperCase = false,
-      isTransliterationEnabled = true,
-      onChange,
-      ...rest
-    },
-    ref,
-  ) => {
-    const inputRef = useRef<HTMLInputElement>(null);
-    const mergedRef = useMergedRefs([ref, inputRef]);
-
-    const regex = regExp || SMART_INPUT_REGEX_MAP[smartType];
-
-    const getUpperCaseIfNeeded = (str: string) => (isUpperCase ? str.toUpperCase() : str);
-
-    const updateCaretPosition = (position: number | null, newValue: string) => {
-      const input = inputRef.current;
-      if (isNotEmpty(input) && input.type !== 'email') {
-        // Нужно для того, чтобы после ререндера позиция каретки не сбросилась
-        input.value = newValue;
-        input.setSelectionRange(position, position);
-      }
-    };
-
-    const handleChange = async (str: string, event: IChangeInputEvent) => {
-      const isValid = regex.test(str);
-
-      const charactersMap = smartType === 'email' ? EmailCharactersMap : CharactersMap;
-      const newValue = getUpperCaseIfNeeded(
-        isValid ? str : mapSymbols(str, regex, charactersMap, isTransliterationEnabled),
-      );
-
-      onChange(newValue, { rawValue: str, isValid }, event);
-
-      const input = inputRef.current;
-      if (isNotEmpty(input)) {
-        const start = input.selectionStart;
-        updateCaretPosition(isEmpty(start) || newValue !== value ? start : start - 1, newValue);
-      }
-    };
-
-    const handlePaste = async (event: ClipboardEvent<HTMLInputElement>) => {
-      event.preventDefault();
-
-      const str = event.clipboardData.getData('text/plain').split('').join('');
-
-      const input = event.currentTarget;
-      const selectionStart = input.selectionStart ?? 0;
-      const selectionEnd = input.selectionEnd ?? 0;
-
-      const isValid = regex.test(str);
-
-      let mappedValue = isValid
-        ? str
-        : mapSymbols(str, regex, TransliterationMap, isTransliterationEnabled);
-
-      const newValueLength = mappedValue.length + value.length - (selectionEnd - selectionStart);
-
-      if (isNotEmpty(maxLength) && maxLength >= 0 && newValueLength > maxLength) {
-        mappedValue = mappedValue.substring(0, mappedValue.length - (newValueLength - maxLength));
-      }
-
-      const newValue = getUpperCaseIfNeeded(
-        `${value.substring(0, selectionStart)}${mappedValue}${value.substring(selectionEnd)}`,
-      );
-
-      onChange(newValue, { rawValue: str, isValid }, event);
-      updateCaretPosition(selectionStart + mappedValue.length, newValue);
-    };
-
-    return (
-      <Input
-        {...rest}
-        ref={mergedRef}
-        value={value}
-        maxLength={maxLength}
-        onPaste={handlePaste}
-        onChange={handleChange}
-      />
-    );
+export const SmartInput = forwardRef<HTMLInputElement, ISmartInputProps>(function SmartInput(
+  {
+    value = '',
+    smartType = 'default',
+    regExp,
+    maxLength,
+    isUpperCase = false,
+    isTransliterationEnabled = true,
+    onChange,
+    ...rest
   },
-);
+  ref,
+) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const mergedRef = useMergedRefs([ref, inputRef]);
+
+  const regex = regExp || SMART_INPUT_REGEX_MAP[smartType];
+
+  const getUpperCaseIfNeeded = (str: string) => (isUpperCase ? str.toUpperCase() : str);
+
+  const updateCaretPosition = (position: number | null, newValue: string) => {
+    const input = inputRef.current;
+    if (isNotEmpty(input) && input.type !== 'email') {
+      // Нужно для того, чтобы после ререндера позиция каретки не сбросилась
+      input.value = newValue;
+      input.setSelectionRange(position, position);
+    }
+  };
+
+  const handleChange = async (str: string, event: IChangeInputEvent) => {
+    const isValid = regex.test(str);
+
+    const charactersMap = smartType === 'email' ? EmailCharactersMap : CharactersMap;
+    const newValue = getUpperCaseIfNeeded(
+      isValid ? str : mapSymbols(str, regex, charactersMap, isTransliterationEnabled),
+    );
+
+    onChange(newValue, { rawValue: str, isValid }, event);
+
+    const input = inputRef.current;
+    if (isNotEmpty(input)) {
+      const start = input.selectionStart;
+      updateCaretPosition(isEmpty(start) || newValue !== value ? start : start - 1, newValue);
+    }
+  };
+
+  const handlePaste = async (event: ClipboardEvent<HTMLInputElement>) => {
+    event.preventDefault();
+
+    const str = event.clipboardData.getData('text/plain').split('').join('');
+
+    const input = event.currentTarget;
+    const selectionStart = input.selectionStart ?? 0;
+    const selectionEnd = input.selectionEnd ?? 0;
+
+    const isValid = regex.test(str);
+
+    let mappedValue = isValid
+      ? str
+      : mapSymbols(str, regex, TransliterationMap, isTransliterationEnabled);
+
+    const newValueLength = mappedValue.length + value.length - (selectionEnd - selectionStart);
+
+    if (isNotEmpty(maxLength) && maxLength >= 0 && newValueLength > maxLength) {
+      mappedValue = mappedValue.substring(0, mappedValue.length - (newValueLength - maxLength));
+    }
+
+    const newValue = getUpperCaseIfNeeded(
+      `${value.substring(0, selectionStart)}${mappedValue}${value.substring(selectionEnd)}`,
+    );
+
+    onChange(newValue, { rawValue: str, isValid }, event);
+    updateCaretPosition(selectionStart + mappedValue.length, newValue);
+  };
+
+  return (
+    <Input
+      {...rest}
+      ref={mergedRef}
+      value={value}
+      maxLength={maxLength}
+      onPaste={handlePaste}
+      onChange={handleChange}
+    />
+  );
+});

package/src/components/Status/Status.stories.tsx

@@ -1,25 +1,71 @@
-import { Status } from '.';
-import { ComponentStory } from '@storybook/react';
-import { iconsList, IIconType } from '../Icon';
-import { complexIcons } from '../Icon/complexIcons';
-import { STATUS_COLORS, STATUS_SIZES } from './constants';
+import { FC } from 'react';
+import { type Meta } from '@storybook/react';
+import { excludeStorybookParams, rgba } from '../../helpers';
+import { IExtendableProps } from '../../types';
+import { iconsMap } from '../Icon';
+import { IStatusProps, Status } from './Status';
+import { STATUS_SIZES } from './constants';
 import { IStatusStyles } from './Status.styles';
 
-export default {
-  title: 'Data Display/Status',
-  component: Status,
-};
+const STATUS_COLORS = [
+  'green',
+  'teal',
+  'blue',
+  'grey',
+  'orange',
+  'red',
+  'violet',
+  'custom',
+] as const;
 
-const icons = [undefined, ...Object.keys(iconsList), ...Object.keys(complexIcons)] as IIconType[];
+declare module './types' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  export interface IStatusColors extends IExtendableProps<typeof STATUS_COLORS> {}
+}
 
 const customTweakStyles: IStatusStyles = {
+  green: {
+    '--status-background': rgba('#D4E3AC', 0.5),
+    '--status-color': '#6F990F',
+  },
+
+  blue: {
+    '--status-background': rgba('#AABFFC', 0.4),
+    '--status-color': '#4C6EBF',
+  },
+
+  grey: {
+    '--status-background': rgba('#95A0B3', 0.25),
+    '--status-color': '#7A869A',
+  },
+
+  orange: {
+    '--status-background': rgba('#FCD3A9', 0.5),
+    '--status-color': '#E5741C',
+  },
+
+  red: {
+    '--status-background': rgba('#F7949A', 0.25),
+    '--status-color': '#F14D56',
+  },
+
+  teal: {
+    '--status-background': rgba('#8CE3EA', 0.4),
+    '--status-color': '#0092A6',
+  },
+
+  violet: {
+    '--status-background': rgba('#BEABE0', 0.4),
+    '--status-color': '#7450B2',
+  },
+
   custom: {
     '--status-color': '#793472',
     '--status-background': '#F2B9ED',
   },
 };
 
-const Template: ComponentStory<typeof Status> = (args) => (
+const Story: FC<IStatusProps> = (args) => (
   <div
     style={{
       display: 'grid',
@@ -48,22 +94,27 @@ const Template: ComponentStory<typeof Status> = (args) => (
   </div>
 );
 
-export const Default = Template.bind({});
-
-Default.args = {
-  children: 'Status',
-  badge: '+ Badge',
-  icon: 'balloon',
-  iconPosition: 'left',
-};
-
-Default.argTypes = {
-  icon: { options: icons, control: 'select' },
-  iconPosition: { options: ['left', 'right'], control: 'inline-radio' },
-};
-
-Default.parameters = {
-  controls: {
-    exclude: ['size', 'color', 'tweakStyles', 'testId', 'data'],
+const meta: Meta<typeof Story> = {
+  title: 'Data Display/Status',
+  component: Story,
+  args: {
+    children: 'Status',
+    badge: '+ Badge',
+    icon: 'information',
+    iconPosition: 'left',
+    color: 'blue',
+    size: 's',
+  },
+  argTypes: {
+    icon: { options: [undefined, ...Object.keys(iconsMap)], control: 'select' },
+    iconPosition: { options: ['left', 'right'], control: 'inline-radio' },
+  },
+  parameters: {
+    controls: {
+      exclude: excludeStorybookParams(['color', 'size']),
+    },
   },
 };
+
+export default meta;
+export const Default = {};

package/src/components/Status/Status.styles.ts

@@ -1,5 +1,5 @@
-import { rgba } from '../../helpers';
 import { colors, createThemedStyles, ITweakStyles } from '../../theme';
+import { IStatusColors } from './types';
 
 export const useStyles = createThemedStyles('Status', {
   root: {
@@ -102,42 +102,7 @@ export const useStyles = createThemedStyles('Status', {
     },
   },
 
-  green: {
-    '--status-background': rgba('#D4E3AC', 0.5),
-    '--status-color': '#6F990F',
-  },
-
-  blue: {
-    '--status-background': rgba('#AABFFC', 0.4),
-    '--status-color': '#4C6EBF',
-  },
-
-  grey: {
-    '--status-background': rgba('#95A0B3', 0.25),
-    '--status-color': '#7A869A',
-  },
-
-  orange: {
-    '--status-background': rgba('#FCD3A9', 0.5),
-    '--status-color': '#E5741C',
-  },
-
-  red: {
-    '--status-background': rgba('#F7949A', 0.25),
-    '--status-color': '#F14D56',
-  },
-
-  teal: {
-    '--status-background': rgba('#8CE3EA', 0.4),
-    '--status-color': '#0092A6',
-  },
-
-  violet: {
-    '--status-background': rgba('#BEABE0', 0.4),
-    '--status-color': '#7450B2',
-  },
-
   custom: {},
 });
 
-export type IStatusStyles = ITweakStyles<typeof useStyles>;
+export type IStatusStyles = ITweakStyles<typeof useStyles, IStatusColors>;

package/src/components/Status/Status.tsx

@@ -1,7 +1,9 @@
 import { FC, ReactNode } from 'react';
 import clsx from 'clsx';
-import { addDataTestId, isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
+import {
+  addDataAttributes,
+  isReactNodeNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
 import { ICommonProps } from '../../types';
 import { IIcon, renderIcon } from '../Icon';
 import { IStatusColor, IStatusSize } from './types';
@@ -29,13 +31,12 @@ export const Status: FC<IStatusProps> = ({
   testId,
   data,
 }) => {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   return (
     <span
       className={clsx(classes.root, classes[size], classes[color])}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
+      {...addDataAttributes(data, testId)}
     >
       {isReactNodeNotEmpty(children) && <span className={classes.text}>{children}</span>}
       {isReactNodeNotEmpty(icon) && (

package/src/components/Status/constants.ts

@@ -1,11 +1 @@
-export const STATUS_COLORS = [
-  'green',
-  'teal',
-  'blue',
-  'grey',
-  'orange',
-  'red',
-  'violet',
-  'custom',
-] as const;
 export const STATUS_SIZES = ['xs', 's', 'm'] as const;

package/src/components/Status/index.ts

@@ -1,3 +1,3 @@
 export * from './Status';
-
+export * from './types';
 export type { IStatusStyles } from './Status.styles';

package/src/components/Status/types.ts

@@ -1,5 +1,9 @@
-import { STATUS_COLORS, STATUS_SIZES } from './constants';
-
-export type IStatusColor = (typeof STATUS_COLORS)[number];
+import { IDefaultExtendableProps } from '../../types';
+import type { STATUS_SIZES } from './constants';
 
 export type IStatusSize = (typeof STATUS_SIZES)[number];
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface IStatusColors extends IDefaultExtendableProps {}
+
+export type IStatusColor = keyof IStatusColors;

package/src/components/Switch/Switch.stories.tsx

@@ -1,19 +1,9 @@
-import { useState } from 'react';
-import { ComponentStory } from '@storybook/react';
-import { Switch } from './Switch';
+import { FC, useState } from 'react';
+import { type Meta } from '@storybook/react';
+import { ISwitchProps, Switch } from './Switch';
 
-export default {
-  title: 'Controls/Switch',
-  component: Switch,
-  argTypes: {
-    labelPosition: { control: 'inline-radio', options: ['left', 'right'] },
-    color: { control: 'inline-radio', options: ['primary', 'secondary'] },
-  },
-};
-
-const Template: ComponentStory<typeof Switch> = (args) => {
+const Story: FC<ISwitchProps<string>> = (args) => {
   const [isChecked, setIsChecked] = useState(true);
-
   return (
     <Switch
       {...args}
@@ -24,17 +14,20 @@ const Template: ComponentStory<typeof Switch> = (args) => {
   );
 };
 
-export const Default = Template.bind({});
-
-Default.args = {
-  children: 'Label',
-  labelPosition: 'right',
-  isDisabled: false,
-  color: 'primary',
-};
-
-Default.parameters = {
-  controls: {
-    exclude: ['data', 'testId', 'onChange'],
+const meta: Meta<typeof Story> = {
+  title: 'Controls/Switch',
+  component: Story,
+  args: {
+    children: 'Label',
+    labelPosition: 'right',
+    isDisabled: false,
+    color: 'primary',
+  },
+  argTypes: {
+    labelPosition: { control: 'inline-radio', options: ['left', 'right'] },
+    color: { control: 'inline-radio', options: ['primary', 'secondary'] },
   },
 };
+
+export default meta;
+export const Default = {};

package/src/components/Switch/Switch.styles.ts

@@ -1,10 +1,18 @@
 import { ITweakStyles, animations, createThemedStyles } from '../../theme';
+import { ISwitchSizes } from './types';
 
 export const useStyles = createThemedStyles('Switch', {
   root: {
     display: 'flex',
     alignItems: 'center',
     cursor: 'pointer',
+
+    '--switch-width': '36px',
+    '--switch-height': '20px',
+    '--switch-toggle-width': '16px',
+    '--switch-toggle-height': '16px',
+    '--switch-toggle-padding': 'calc((var(--switch-height) - var(--switch-toggle-height)) / 2)',
+    '--switch-label-gap': '12px',
   },
 
   primary: {},
@@ -20,7 +28,7 @@ export const useStyles = createThemedStyles('Switch', {
 
   checked: {
     '& $switch::before': {
-      left: 18,
+      left: 'calc(var(--switch-width) - var(--switch-toggle-width) - var(--switch-toggle-padding))',
     },
   },
 
@@ -28,25 +36,25 @@ export const useStyles = createThemedStyles('Switch', {
     position: 'relative',
     flexShrink: 0,
     display: 'block',
-    width: 36,
-    height: 20,
-    backgroundColor: '#333',
-    borderRadius: 10,
+    width: 'var(--switch-width)',
+    height: 'var(--switch-height)',
+    borderRadius: 'calc(infinity * 1px)',
     boxSizing: 'border-box',
     transition: animations.defaultTransition,
     transitionProperty: 'opacity, background-color',
+    backgroundColor: '#333',
 
     '&::before': {
       content: '""',
       position: 'absolute',
-      top: 2,
-      left: 2,
+      top: 'var(--switch-toggle-padding)',
+      left: 'var(--switch-toggle-padding)',
+      width: 'var(--switch-toggle-width)',
+      height: 'var(--switch-toggle-height)',
       right: 'auto',
       display: 'block',
-      width: 16,
-      height: 16,
       backgroundColor: '#fff',
-      borderRadius: '50%',
+      borderRadius: 'calc(infinity * 1px)',
       zIndex: 1,
       transition: animations.defaultTransition,
       transitionProperty: 'left, background-color',
@@ -64,12 +72,12 @@ export const useStyles = createThemedStyles('Switch', {
 
   labelLeft: {
     order: -1,
-    marginRight: 12,
+    marginRight: 'var(--switch-label-gap)',
   },
 
   labelRight: {
-    marginLeft: 12,
+    marginLeft: 'var(--switch-label-gap)',
   },
 });
 
-export type ISwitchStyles = ITweakStyles<typeof useStyles>;
+export type ISwitchStyles = ITweakStyles<typeof useStyles, ISwitchSizes>;

package/src/components/Switch/Switch.tsx

@@ -1,9 +1,13 @@
 import { ReactNode } from 'react';
 import clsx from 'clsx';
-import { addDataTestId, isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
+import {
+  addDataAttributes,
+  addDataTestId,
+  isNotEmpty,
+  isReactNodeNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
 import { ICommonProps } from '../../types';
-import { ISwitchState } from './types';
+import { ISwitchSize, ISwitchState } from './types';
 import { useStyles, ISwitchStyles } from './Switch.styles';
 
 export interface ISwitchProps<V extends string> extends ICommonProps<ISwitchStyles> {
@@ -19,6 +23,7 @@ export interface ISwitchProps<V extends string> extends ICommonProps<ISwitchStyl
   labelPosition?: 'left' | 'right';
   /** @default 'primary' */
   color?: 'primary' | 'secondary';
+  size?: ISwitchSize;
   onChange: (state: ISwitchState<V>) => void;
 }
 
@@ -30,24 +35,24 @@ export const Switch = <V extends string>({
   children,
   labelPosition = 'right',
   color = 'primary',
+  size,
   data,
   tweakStyles,
   testId,
   onChange,
 }: ISwitchProps<V>): JSX.Element => {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const handleChange = () => onChange({ name: value, isEnabled: !isChecked });
 
   return (
     <label
-      className={clsx(classes.root, classes[color], {
+      className={clsx(classes.root, classes[color], isNotEmpty(size) && classes[size], {
         [classes.disabled]: isDisabled,
         [classes.checked]: isChecked,
         [classes.invalid]: isInvalid,
       })}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
+      {...addDataAttributes(data, testId)}
     >
       <span className={classes.switch}>
         <input

package/src/components/Switch/types.ts

@@ -2,3 +2,8 @@ export interface ISwitchState<V = string> {
   name: V;
   isEnabled: boolean;
 }
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface ISwitchSizes {}
+
+export type ISwitchSize = keyof ISwitchSizes;