@true-engineering/true-react-common-ui-kit 3.0.3 → 3.0.5

package/src/components/RadioButton/RadioButton.styles.ts

@@ -1,37 +1,37 @@
-import { ITweakStyles, createThemedStyles } from '../../theme';
-
-export const useStyles = createThemedStyles('RadioButton', {
-  input: {
-    appearance: 'none',
-    cursor: 'pointer',
-    borderRadius: '50%',
-    width: 18,
-    height: 18,
-    outline: 'none',
-    transition: '0.1s all ease-in-out',
-    margin: 0,
-    border: [1, 'solid', '#000'],
-
-    '&:checked': {
-      border: [5, 'solid', '#000'],
-    },
-  },
-
-  label: {
-    display: 'flex',
-    alignItems: 'center',
-    cursor: 'pointer',
-  },
-
-  content: {
-    marginLeft: 8,
-  },
-
-  isDisabled: {
-    cursor: 'default',
-  },
-
-  isInvalid: {},
-});
-
-export type IRadioButtonStyles = ITweakStyles<typeof useStyles>;
+import { ITweakStyles, createThemedStyles } from '../../theme';
+
+export const useStyles = createThemedStyles('RadioButton', {
+  input: {
+    appearance: 'none',
+    cursor: 'pointer',
+    borderRadius: '50%',
+    width: 18,
+    height: 18,
+    outline: 'none',
+    transition: '0.1s all ease-in-out',
+    margin: 0,
+    border: [1, 'solid', '#000'],
+
+    '&:checked': {
+      border: [5, 'solid', '#000'],
+    },
+  },
+
+  label: {
+    display: 'flex',
+    alignItems: 'center',
+    cursor: 'pointer',
+  },
+
+  content: {
+    marginLeft: 8,
+  },
+
+  isDisabled: {
+    cursor: 'default',
+  },
+
+  isInvalid: {},
+});
+
+export type IRadioButtonStyles = ITweakStyles<typeof useStyles>;

package/src/components/RadioButton/RadioButton.tsx

@@ -1,55 +1,55 @@
-import { ReactNode } from 'react';
-import clsx from 'clsx';
-import { addDataTestId, isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { ICommonProps } from '../../types';
-import { useStyles, IRadioButtonStyles } from './RadioButton.styles';
-
-export interface IRadioButtonProps<Value extends string> extends ICommonProps<IRadioButtonStyles> {
-  children?: ReactNode;
-  value: Value;
-  groupName: string;
-  isChecked?: boolean;
-  isDisabled?: boolean;
-  isInvalid?: boolean;
-  onChange(value: Value): void | Promise<void>;
-}
-
-export function RadioButton<Value extends string>({
-  children,
-  value,
-  groupName,
-  isChecked,
-  isDisabled,
-  isInvalid,
-  data,
-  testId,
-  tweakStyles,
-  onChange,
-}: IRadioButtonProps<Value>): JSX.Element {
-  const classes = useStyles({ theme: tweakStyles });
-
-  return (
-    <label
-      className={clsx(classes.label, isDisabled && classes.isDisabled)}
-      htmlFor={`${groupName}--${value}`}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
-    >
-      <input
-        id={`${groupName}--${value}`}
-        type="radio"
-        value={value}
-        name={groupName}
-        checked={isChecked}
-        disabled={isDisabled}
-        onChange={(event) => onChange(event.target.value as Value)}
-        className={clsx(classes.input, {
-          [classes.isDisabled]: isDisabled,
-          [classes.isInvalid]: isInvalid,
-        })}
-      />
-      {isReactNodeNotEmpty(children) && <span className={classes.content}>{children}</span>}
-    </label>
-  );
-}
+import { ReactNode } from 'react';
+import clsx from 'clsx';
+import { addDataTestId, isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { ICommonProps } from '../../types';
+import { useStyles, IRadioButtonStyles } from './RadioButton.styles';
+
+export interface IRadioButtonProps<Value extends string> extends ICommonProps<IRadioButtonStyles> {
+  children?: ReactNode;
+  value: Value;
+  groupName: string;
+  isChecked?: boolean;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  onChange(value: Value): void | Promise<void>;
+}
+
+export function RadioButton<Value extends string>({
+  children,
+  value,
+  groupName,
+  isChecked,
+  isDisabled,
+  isInvalid,
+  data,
+  testId,
+  tweakStyles,
+  onChange,
+}: IRadioButtonProps<Value>): JSX.Element {
+  const classes = useStyles({ theme: tweakStyles });
+
+  return (
+    <label
+      className={clsx(classes.label, isDisabled && classes.isDisabled)}
+      htmlFor={`${groupName}--${value}`}
+      {...addDataTestId(testId)}
+      {...addDataAttributes(data)}
+    >
+      <input
+        id={`${groupName}--${value}`}
+        type="radio"
+        value={value}
+        name={groupName}
+        checked={isChecked}
+        disabled={isDisabled}
+        onChange={(event) => onChange(event.target.value as Value)}
+        className={clsx(classes.input, {
+          [classes.isDisabled]: isDisabled,
+          [classes.isInvalid]: isInvalid,
+        })}
+      />
+      {isReactNodeNotEmpty(children) && <span className={classes.content}>{children}</span>}
+    </label>
+  );
+}

package/src/components/RadioButton/index.ts

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

package/src/components/ScrollIntoViewIfNeeded/ScrollIntoViewIfNeeded.ts

@@ -1,54 +1,54 @@
-import { createElement, createRef, HTMLProps, PureComponent, ReactNode, RefObject } from 'react';
-import scrollIntoViewIfNeeded, { StandardBehaviorOptions } from 'scroll-into-view-if-needed';
-import {
-  ScrollIntoViewIfNeededDefaultElementType,
-  ScrollIntoViewIfNeededDefaultProps,
-} from './constants';
-
-export interface IScrollIntoViewIfNeededProps extends HTMLProps<HTMLElement> {
-  active?: boolean;
-  children?: ReactNode;
-  elementType?: string;
-  options?: StandardBehaviorOptions;
-}
-
-export class ScrollIntoViewIfNeeded extends PureComponent<IScrollIntoViewIfNeededProps> {
-  node: RefObject<HTMLElement> = createRef();
-
-  public static defaultProps: IScrollIntoViewIfNeededProps = ScrollIntoViewIfNeededDefaultProps;
-
-  componentDidMount() {
-    const { active } = this.props;
-    if (active) {
-      this.handleScrollIntoViewIfNeeded();
-    }
-  }
-
-  componentDidUpdate({ active }: IScrollIntoViewIfNeededProps) {
-    const { active: isNowActive } = this.props;
-    if (!active && isNowActive) {
-      this.handleScrollIntoViewIfNeeded();
-    }
-  }
-
-  handleScrollIntoViewIfNeeded = () => {
-    const { options } = this.props;
-    const { current: node } = this.node;
-
-    if (node) {
-      scrollIntoViewIfNeeded(node, options);
-    }
-  };
-
-  render() {
-    const { active, elementType, children, options, ...wrapperProps } = this.props;
-
-    return createElement(
-      elementType ?? ScrollIntoViewIfNeededDefaultElementType,
-      { ref: this.node, ...wrapperProps },
-      children,
-    );
-  }
-}
-
-export default ScrollIntoViewIfNeeded;
+import { createElement, createRef, HTMLProps, PureComponent, ReactNode, RefObject } from 'react';
+import scrollIntoViewIfNeeded, { StandardBehaviorOptions } from 'scroll-into-view-if-needed';
+import {
+  ScrollIntoViewIfNeededDefaultElementType,
+  ScrollIntoViewIfNeededDefaultProps,
+} from './constants';
+
+export interface IScrollIntoViewIfNeededProps extends HTMLProps<HTMLElement> {
+  active?: boolean;
+  children?: ReactNode;
+  elementType?: string;
+  options?: StandardBehaviorOptions;
+}
+
+export class ScrollIntoViewIfNeeded extends PureComponent<IScrollIntoViewIfNeededProps> {
+  node: RefObject<HTMLElement> = createRef();
+
+  public static defaultProps: IScrollIntoViewIfNeededProps = ScrollIntoViewIfNeededDefaultProps;
+
+  componentDidMount() {
+    const { active } = this.props;
+    if (active) {
+      this.handleScrollIntoViewIfNeeded();
+    }
+  }
+
+  componentDidUpdate({ active }: IScrollIntoViewIfNeededProps) {
+    const { active: isNowActive } = this.props;
+    if (!active && isNowActive) {
+      this.handleScrollIntoViewIfNeeded();
+    }
+  }
+
+  handleScrollIntoViewIfNeeded = () => {
+    const { options } = this.props;
+    const { current: node } = this.node;
+
+    if (node) {
+      scrollIntoViewIfNeeded(node, options);
+    }
+  };
+
+  render() {
+    const { active, elementType, children, options, ...wrapperProps } = this.props;
+
+    return createElement(
+      elementType ?? ScrollIntoViewIfNeededDefaultElementType,
+      { ref: this.node, ...wrapperProps },
+      children,
+    );
+  }
+}
+
+export default ScrollIntoViewIfNeeded;

package/src/components/ScrollIntoViewIfNeeded/constants.ts

@@ -1,12 +1,12 @@
-import type { IScrollIntoViewIfNeededProps } from './ScrollIntoViewIfNeeded';
-
-export const ScrollIntoViewIfNeededDefaultElementType = 'div';
-
-export const ScrollIntoViewIfNeededDefaultProps: IScrollIntoViewIfNeededProps = {
-  active: true,
-  elementType: ScrollIntoViewIfNeededDefaultElementType,
-  options: {
-    behavior: 'smooth',
-    scrollMode: 'if-needed',
-  },
-};
+import type { IScrollIntoViewIfNeededProps } from './ScrollIntoViewIfNeeded';
+
+export const ScrollIntoViewIfNeededDefaultElementType = 'div';
+
+export const ScrollIntoViewIfNeededDefaultProps: IScrollIntoViewIfNeededProps = {
+  active: true,
+  elementType: ScrollIntoViewIfNeededDefaultElementType,
+  options: {
+    behavior: 'smooth',
+    scrollMode: 'if-needed',
+  },
+};

package/src/components/ScrollIntoViewIfNeeded/index.ts

@@ -1 +1 @@
-export * from './ScrollIntoViewIfNeeded';
+export * from './ScrollIntoViewIfNeeded';

package/src/components/SearchInput/SearchInput.stories.tsx

@@ -1,23 +1,23 @@
-import { useState } from 'react';
-import { ComponentStory } from '@storybook/react';
-import { SearchInput } from './SearchInput';
-
-export default {
-  title: 'Inputs/SearchInput',
-  component: SearchInput,
-};
-
-const Template: ComponentStory<typeof SearchInput> = (args) => {
-  const [value, setValue] = useState('');
-  return (
-    <div style={{ width: 320 }}>
-      <SearchInput {...args} value={value} onChange={setValue} />
-    </div>
-  );
-};
-
-export const Default = Template.bind({});
-
-Default.args = {
-  placeholder: 'Поиск',
-};
+import { useState } from 'react';
+import { ComponentStory } from '@storybook/react';
+import { SearchInput } from './SearchInput';
+
+export default {
+  title: 'Inputs/SearchInput',
+  component: SearchInput,
+};
+
+const Template: ComponentStory<typeof SearchInput> = (args) => {
+  const [value, setValue] = useState('');
+  return (
+    <div style={{ width: 320 }}>
+      <SearchInput {...args} value={value} onChange={setValue} />
+    </div>
+  );
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  placeholder: 'Поиск',
+};

package/src/components/SearchInput/SearchInput.styles.ts

@@ -1,50 +1,50 @@
-import { rgba } from '../../helpers';
-import { colors, ITweakStyles, createThemedStyles } from '../../theme';
-import { IInputStyles } from '../Input';
-
-const LEFT_PADDING = 44;
-
-export const useStyles = createThemedStyles('SearchInput', {
-  root: {
-    position: 'relative',
-  },
-
-  icon: {
-    display: 'flex',
-    alignItems: 'center',
-    position: 'absolute',
-    left: 12,
-    height: '100%',
-    width: 20,
-    zIndex: 2,
-    color: colors.GREY_ACTIVE,
-  },
-});
-
-export const inputStyles: IInputStyles = {
-  inputWrapper: {
-    height: 35,
-    borderColor: 'transparent',
-    backgroundColor: rgba(colors.BORDER_MAIN, 0.3),
-    borderRadius: 18,
-    paddingLeft: LEFT_PADDING,
-    transitionProperty: 'background-color, border-color',
-  },
-
-  focused: {
-    backgroundColor: colors.CLASSIC_WHITE,
-    borderColor: colors.BORDER_MAIN,
-  },
-
-  input: {
-    fontSize: 14,
-    paddingLeft: 0,
-  },
-
-  label: {
-    left: LEFT_PADDING,
-    fontSize: 14,
-  },
-};
-
-export type ISearchInputStyles = ITweakStyles<typeof useStyles, { tweakInput: IInputStyles }>;
+import { rgba } from '../../helpers';
+import { colors, ITweakStyles, createThemedStyles } from '../../theme';
+import { IInputStyles } from '../Input';
+
+const LEFT_PADDING = 44;
+
+export const useStyles = createThemedStyles('SearchInput', {
+  root: {
+    position: 'relative',
+  },
+
+  icon: {
+    display: 'flex',
+    alignItems: 'center',
+    position: 'absolute',
+    left: 12,
+    height: '100%',
+    width: 20,
+    zIndex: 2,
+    color: colors.GREY_ACTIVE,
+  },
+});
+
+export const inputStyles: IInputStyles = {
+  inputWrapper: {
+    height: 35,
+    borderColor: 'transparent',
+    backgroundColor: rgba(colors.BORDER_MAIN, 0.3),
+    borderRadius: 18,
+    paddingLeft: LEFT_PADDING,
+    transitionProperty: 'background-color, border-color',
+  },
+
+  focused: {
+    backgroundColor: colors.CLASSIC_WHITE,
+    borderColor: colors.BORDER_MAIN,
+  },
+
+  input: {
+    fontSize: 14,
+    paddingLeft: 0,
+  },
+
+  label: {
+    left: LEFT_PADDING,
+    fontSize: 14,
+  },
+};
+
+export type ISearchInputStyles = ITweakStyles<typeof useStyles, { tweakInput: IInputStyles }>;

package/src/components/SearchInput/SearchInput.tsx

@@ -1,56 +1,56 @@
-import { FC } from 'react';
-import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { Icon } from '../Icon';
-import { IInputProps, Input } from '../Input';
-import { useStyles, inputStyles, ISearchInputStyles } from './SearchInput.styles';
-
-export type ISearchInputProps = Omit<
-  IInputProps,
-  | 'type'
-  | 'isInvalid'
-  | 'errorMessage'
-  | 'label'
-  | 'isActive'
-  | 'errorPosition'
-  | 'hasFloatingLabel'
-  | 'border'
-  | 'tweakStyles'
-> &
-  ICommonProps<ISearchInputStyles>;
-
-export const SearchInput: FC<ISearchInputProps> = ({
-  isClearable = true,
-  tweakStyles,
-  testId,
-  data,
-  ...props
-}) => {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const tweakInputStyles = useTweakStyles({
-    innerStyles: inputStyles,
-    tweakStyles,
-    className: 'tweakInput',
-    currentComponentName: 'SearchInput',
-  });
-
-  return (
-    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
-      <div className={classes.icon}>
-        <Icon type="search" />
-      </div>
-      <Input
-        isClearable={isClearable}
-        isActive={props.value !== '' && props.value !== undefined}
-        testId={getTestId(testId, 'input')}
-        tweakStyles={tweakInputStyles}
-        hasFloatingLabel={false}
-        label={props.placeholder}
-        {...props}
-      />
-    </div>
-  );
-};
+import { FC } from 'react';
+import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { Icon } from '../Icon';
+import { IInputProps, Input } from '../Input';
+import { useStyles, inputStyles, ISearchInputStyles } from './SearchInput.styles';
+
+export type ISearchInputProps = Omit<
+  IInputProps,
+  | 'type'
+  | 'isInvalid'
+  | 'errorMessage'
+  | 'label'
+  | 'isActive'
+  | 'errorPosition'
+  | 'hasFloatingLabel'
+  | 'border'
+  | 'tweakStyles'
+> &
+  ICommonProps<ISearchInputStyles>;
+
+export const SearchInput: FC<ISearchInputProps> = ({
+  isClearable = true,
+  tweakStyles,
+  testId,
+  data,
+  ...props
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakInputStyles = useTweakStyles({
+    innerStyles: inputStyles,
+    tweakStyles,
+    className: 'tweakInput',
+    currentComponentName: 'SearchInput',
+  });
+
+  return (
+    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
+      <div className={classes.icon}>
+        <Icon type="search" />
+      </div>
+      <Input
+        isClearable={isClearable}
+        isActive={props.value !== '' && props.value !== undefined}
+        testId={getTestId(testId, 'input')}
+        tweakStyles={tweakInputStyles}
+        hasFloatingLabel={false}
+        label={props.placeholder}
+        {...props}
+      />
+    </div>
+  );
+};

package/src/components/SearchInput/index.ts

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