@true-engineering/true-react-common-ui-kit 2.3.2 → 2.5.0

package/src/components/CloseButton/CloseButton.styles.ts

@@ -1,34 +1,34 @@
-import { rgba } from '../../helpers';
-import { colors } from '../../theme';
-import { ComponentStyles } from '../../types';
-
-export const styles = {
-  root: {
-    width: 40,
-    height: 40,
-    maxWidth: '100%',
-    maxHeight: '100%',
-    padding: 5,
-    color: colors.FONT_MEDIUM,
-    border: 0,
-    borderRadius: '50%',
-    appearance: 'none',
-    backgroundColor: 'transparent',
-    cursor: 'pointer',
-    transition: 'background-color 0.25s ease-in-out',
-
-    '&:hover': {
-      backgroundColor: rgba(colors.BORDER_MAIN, 0.5),
-    },
-
-    '&:focus': {
-      backgroundColor: colors.GREY_FOCUS,
-    },
-
-    '&:active': {
-      backgroundColor: rgba(colors.FONT_DISABLED, 0.5),
-    },
-  },
-};
-
-export type CloseButtonStyles = ComponentStyles<typeof styles>;
+import { rgba } from '../../helpers';
+import { colors } from '../../theme';
+import { ComponentStyles } from '../../types';
+
+export const styles = {
+  root: {
+    width: 40,
+    height: 40,
+    maxWidth: '100%',
+    maxHeight: '100%',
+    padding: 5,
+    color: colors.FONT_MEDIUM,
+    border: 0,
+    borderRadius: '50%',
+    appearance: 'none',
+    backgroundColor: 'transparent',
+    cursor: 'pointer',
+    transition: 'background-color 0.25s ease-in-out',
+
+    '&:hover': {
+      backgroundColor: rgba(colors.BORDER_MAIN, 0.5),
+    },
+
+    '&:focus': {
+      backgroundColor: colors.GREY_FOCUS,
+    },
+
+    '&:active': {
+      backgroundColor: rgba(colors.FONT_DISABLED, 0.5),
+    },
+  },
+};
+
+export type CloseButtonStyles = ComponentStyles<typeof styles>;

package/src/components/CloseButton/CloseButton.tsx

@@ -1,35 +1,35 @@
-import { FC } from 'react';
-import { addDataAttributes } from '../../helpers';
-import { useTheme } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { Icon } from '../Icon';
-import { CloseButtonStyles, styles } from './CloseButton.styles';
-
-export interface ICloseButtonProps extends ICommonProps {
-  tweakStyles?: CloseButtonStyles;
-  testId?: string;
-  onClose?: () => void;
-  iconType?: 'close' | 'close-large' | 'close-window';
-}
-
-export const CloseButton: FC<ICloseButtonProps> = ({
-  tweakStyles,
-  testId,
-  data,
-  iconType = 'close',
-  onClose,
-}) => {
-  const { classes } = useTheme('CloseButton', styles, tweakStyles);
-
-  return (
-    <button
-      type="button"
-      className={classes.root}
-      onClick={onClose}
-      data-testid={testId}
-      {...addDataAttributes(data)}
-    >
-      <Icon type={iconType} />
-    </button>
-  );
-};
+import { FC } from 'react';
+import { addDataAttributes } from '../../helpers';
+import { useTheme } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { Icon } from '../Icon';
+import { CloseButtonStyles, styles } from './CloseButton.styles';
+
+export interface ICloseButtonProps extends ICommonProps {
+  tweakStyles?: CloseButtonStyles;
+  testId?: string;
+  onClose?: () => void;
+  iconType?: 'close' | 'close-large' | 'close-window';
+}
+
+export const CloseButton: FC<ICloseButtonProps> = ({
+  tweakStyles,
+  testId,
+  data,
+  iconType = 'close',
+  onClose,
+}) => {
+  const { classes } = useTheme('CloseButton', styles, tweakStyles);
+
+  return (
+    <button
+      type="button"
+      className={classes.root}
+      onClick={onClose}
+      data-testid={testId}
+      {...addDataAttributes(data)}
+    >
+      <Icon type={iconType} />
+    </button>
+  );
+};

package/src/components/Colors/Colors.tsx

@@ -1,26 +1,26 @@
-import { FC, useContext } from 'react';
-import { useTheme, ThemeContext } from '../../hooks';
-import { styles } from './Colors.styles';
-
-// TODO: А зачем нужен то этот компонент кроме как ради сторис?????? мб его толкьо в сторис оформить?
-
-export const Colors: FC = () => {
-  const { classes } = useTheme('Colors', styles);
-  const { theme } = useContext(ThemeContext);
-  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>
-  );
-};
+import { FC, useContext } from 'react';
+import { useTheme, ThemeContext } from '../../hooks';
+import { styles } from './Colors.styles';
+
+// TODO: А зачем нужен то этот компонент кроме как ради сторис?????? мб его толкьо в сторис оформить?
+
+export const Colors: FC = () => {
+  const { classes } = useTheme('Colors', styles);
+  const { theme } = useContext(ThemeContext);
+  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>
+  );
+};

package/src/components/CssBaseline/CssBaseline.tsx

@@ -1,15 +1,15 @@
-import { FC } from 'react';
-import { addDataAttributes } from '../../helpers';
-import { useTheme } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { CssBaselineStyles, styles } from './CssBaseline.styles';
-
-export interface ICssBaselineProps extends ICommonProps {
-  tweakStyles?: CssBaselineStyles;
-}
-
-export const CssBaseline: FC<ICssBaselineProps> = ({ data, tweakStyles }) => {
-  const { classes } = useTheme('CssBaseline', styles, tweakStyles);
-
-  return <div className={classes.root} {...addDataAttributes(data)} />;
-};
+import { FC } from 'react';
+import { addDataAttributes } from '../../helpers';
+import { useTheme } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { CssBaselineStyles, styles } from './CssBaseline.styles';
+
+export interface ICssBaselineProps extends ICommonProps {
+  tweakStyles?: CssBaselineStyles;
+}
+
+export const CssBaseline: FC<ICssBaselineProps> = ({ data, tweakStyles }) => {
+  const { classes } = useTheme('CssBaseline', styles, tweakStyles);
+
+  return <div className={classes.root} {...addDataAttributes(data)} />;
+};

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

@@ -1,61 +1,61 @@
-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',
+      'onIconClick',
+      'onKeyDown',
+    ],
+  },
+};

package/src/components/DateInput/DateInput.tsx

@@ -1,82 +1,82 @@
-import { FormEvent, MouseEvent, forwardRef, ChangeEvent } from 'react';
-import clsx from 'clsx';
-import { addDataAttributes } from '../../helpers';
-import { useTheme, useTweakStyles } from '../../hooks';
-import { IInputProps, Input } from '../Input';
-import { EMPTY_DATE_INPUT_VALUE, EMPTY_DATE_RANGE_INPUT_VALUE } from './constants';
-import { DateInputStyles, styles } from './DateInput.styles';
-
-export interface IDateInputProps
-  extends Omit<IInputProps, 'value' | 'beforeMaskedStateChange' | 'onChange'> {
-  date?: string;
-  startDate?: string;
-  endDate?: string;
-  className?: string;
-  isRange?: boolean;
-  tweakStyles?: DateInputStyles;
-  onClick?(event: MouseEvent<HTMLDivElement>): void;
-  // react-datepicker ожидает event первым аргументом
-  onChange?(event: FormEvent<HTMLInputElement>, value: string): void;
-}
-
-export const DateInput = forwardRef<HTMLInputElement, IDateInputProps>(
-  (
-    {
-      date,
-      startDate = '',
-      endDate = '',
-      mask,
-      className,
-      placeholder,
-      data,
-      isRange,
-      tweakStyles,
-      onClick,
-      onChange,
-      ...inputProps
-    },
-    ref,
-  ) => {
-    const { classes, componentStyles } = useTheme('DateInput', styles, tweakStyles);
-
-    const tweakInputStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakInput');
-
-    const beforeMaskedStateChange: IInputProps['beforeMaskedStateChange'] = ({ nextState }) => {
-      // Если в инпуте отсутствует введенное значение, то выставляем
-      // пустую строку для корректной работы react-datepicker
-      if (
-        nextState.value === EMPTY_DATE_INPUT_VALUE ||
-        nextState.value === EMPTY_DATE_RANGE_INPUT_VALUE
-      ) {
-        return { value: '', selection: { start: 0, end: 0 } };
-      }
-      return nextState;
-    };
-
-    const handleChange: IInputProps['onChange'] = (value, event) => {
-      // Событие click срабатывает только при нажатии на кнопку очистки
-      if (event.type === 'click') {
-        // react-datepicker ожидает пустую строку в event.target.value
-        (event as ChangeEvent<HTMLInputElement>).target.value = '';
-      }
-      onChange?.(event, value);
-    };
-
-    return (
-      <div className={clsx(classes.root, className)} onClick={onClick} {...addDataAttributes(data)}>
-        <Input
-          {...inputProps}
-          ref={ref}
-          value={isRange ? `${startDate}${endDate}` : date}
-          mask={mask ?? (isRange ? '99.99.9999 - 99.99.9999' : '99.99.9999')}
-          placeholder={
-            placeholder ?? (isRange ? EMPTY_DATE_RANGE_INPUT_VALUE : EMPTY_DATE_INPUT_VALUE)
-          }
-          tweakStyles={tweakInputStyles}
-          onChange={handleChange}
-          beforeMaskedStateChange={beforeMaskedStateChange}
-        />
-      </div>
-    );
-  },
-);
+import { FormEvent, MouseEvent, forwardRef, ChangeEvent } from 'react';
+import clsx from 'clsx';
+import { addDataAttributes } from '../../helpers';
+import { useTheme, useTweakStyles } from '../../hooks';
+import { IInputProps, Input } from '../Input';
+import { EMPTY_DATE_INPUT_VALUE, EMPTY_DATE_RANGE_INPUT_VALUE } from './constants';
+import { DateInputStyles, styles } from './DateInput.styles';
+
+export interface IDateInputProps
+  extends Omit<IInputProps, 'value' | 'beforeMaskedStateChange' | 'onChange'> {
+  date?: string;
+  startDate?: string;
+  endDate?: string;
+  className?: string;
+  isRange?: boolean;
+  tweakStyles?: DateInputStyles;
+  onClick?(event: MouseEvent<HTMLDivElement>): void;
+  // react-datepicker ожидает event первым аргументом
+  onChange?(event: FormEvent<HTMLInputElement>, value: string): void;
+}
+
+export const DateInput = forwardRef<HTMLInputElement, IDateInputProps>(
+  (
+    {
+      date,
+      startDate = '',
+      endDate = '',
+      mask,
+      className,
+      placeholder,
+      data,
+      isRange,
+      tweakStyles,
+      onClick,
+      onChange,
+      ...inputProps
+    },
+    ref,
+  ) => {
+    const { classes, componentStyles } = useTheme('DateInput', styles, tweakStyles);
+
+    const tweakInputStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakInput');
+
+    const beforeMaskedStateChange: IInputProps['beforeMaskedStateChange'] = ({ nextState }) => {
+      // Если в инпуте отсутствует введенное значение, то выставляем
+      // пустую строку для корректной работы react-datepicker
+      if (
+        nextState.value === EMPTY_DATE_INPUT_VALUE ||
+        nextState.value === EMPTY_DATE_RANGE_INPUT_VALUE
+      ) {
+        return { value: '', selection: { start: 0, end: 0 } };
+      }
+      return nextState;
+    };
+
+    const handleChange: IInputProps['onChange'] = (value, event) => {
+      // Событие click срабатывает только при нажатии на кнопку очистки
+      if (event.type === 'click') {
+        // react-datepicker ожидает пустую строку в event.target.value
+        (event as ChangeEvent<HTMLInputElement>).target.value = '';
+      }
+      onChange?.(event, value);
+    };
+
+    return (
+      <div className={clsx(classes.root, className)} onClick={onClick} {...addDataAttributes(data)}>
+        <Input
+          {...inputProps}
+          ref={ref}
+          value={isRange ? `${startDate}${endDate}` : date}
+          mask={mask ?? (isRange ? '99.99.9999 - 99.99.9999' : '99.99.9999')}
+          placeholder={
+            placeholder ?? (isRange ? EMPTY_DATE_RANGE_INPUT_VALUE : EMPTY_DATE_INPUT_VALUE)
+          }
+          tweakStyles={tweakInputStyles}
+          onChange={handleChange}
+          beforeMaskedStateChange={beforeMaskedStateChange}
+        />
+      </div>
+    );
+  },
+);