@true-engineering/true-react-common-ui-kit 2.7.0 → 3.0.0-alpha.1

package/src/components/PhoneInput/types.ts

@@ -1,16 +1,16 @@
-export interface IPhoneInfo {
-  countryEn: string;
-  countryRu: string;
-  countryCode: string;
-  dialCode: string;
-  phoneMask?: string;
-  dialCodePriority?: number;
-  areaCodes?: string[];
-  fullCodes: string[];
-}
-
-export interface IPhoneValue {
-  phoneNumber?: string;
-  dialCode?: string;
-  countryCode?: string;
-}
+export interface IPhoneInfo {
+  countryEn: string;
+  countryRu: string;
+  countryCode: string;
+  dialCode: string;
+  phoneMask?: string;
+  dialCodePriority?: number;
+  areaCodes?: string[];
+  fullCodes: string[];
+}
+
+export interface IPhoneValue {
+  phoneNumber?: string;
+  dialCode?: string;
+  countryCode?: string;
+}

package/src/components/RadioButton/RadioButton.stories.tsx

@@ -1,46 +1,46 @@
-import { useState } from 'react';
-import { ComponentStory } from '@storybook/react';
-import { RadioButton } from './RadioButton';
-
-export default {
-  title: 'RadioButton',
-  component: RadioButton,
-};
-
-const options = ['one', 'two', 'three'];
-
-const Template: ComponentStory<typeof RadioButton> = (args) => {
-  const [activeIdx, setActiveIdx] = useState(0);
-
-  return (
-    <div style={{ display: 'flex', gap: 20 }}>
-      {options.map((opt) => (
-        <RadioButton
-          {...args}
-          key={opt}
-          isChecked={opt === options[activeIdx]}
-          value={opt}
-          groupName="groupName"
-          onChange={(v) => {
-            setActiveIdx(options.findIndex((i) => i === v));
-          }}
-        />
-      ))}
-    </div>
-  );
-};
-
-export const Default = Template.bind({});
-
-Default.args = {
-  children: 'Label',
-  // isChecked: false,
-  isInvalid: false,
-  isDisabled: false,
-};
-
-Default.parameters = {
-  controls: {
-    exclude: ['data', 'value', 'groupName', 'isChecked', 'onChange'],
-  },
-};
+import { useState } from 'react';
+import { ComponentStory } from '@storybook/react';
+import { RadioButton } from './RadioButton';
+
+export default {
+  title: 'RadioButton',
+  component: RadioButton,
+};
+
+const options = ['one', 'two', 'three'];
+
+const Template: ComponentStory<typeof RadioButton> = (args) => {
+  const [activeIdx, setActiveIdx] = useState(0);
+
+  return (
+    <div style={{ display: 'flex', gap: 20 }}>
+      {options.map((opt) => (
+        <RadioButton
+          {...args}
+          key={opt}
+          isChecked={opt === options[activeIdx]}
+          value={opt}
+          groupName="groupName"
+          onChange={(v) => {
+            setActiveIdx(options.findIndex((i) => i === v));
+          }}
+        />
+      ))}
+    </div>
+  );
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  children: 'Label',
+  // isChecked: false,
+  isInvalid: false,
+  isDisabled: false,
+};
+
+Default.parameters = {
+  controls: {
+    exclude: ['data', 'value', 'groupName', 'isChecked', 'onChange'],
+  },
+};

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

@@ -1,37 +1,37 @@
-import { ComponentStyles } from '../../types';
-
-export const styles = {
-  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 RadioButtonStyles = ComponentStyles<typeof styles>;
+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 { isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { useTheme } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { RadioButtonStyles, styles } from './RadioButton.styles';
-
-export interface IRadioButtonProps<Value extends string> extends ICommonProps {
-  tweakStyles?: RadioButtonStyles;
-  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,
-  tweakStyles,
-  onChange,
-}: IRadioButtonProps<Value>): JSX.Element {
-  const { classes } = useTheme('RadioButton', styles, tweakStyles);
-
-  return (
-    <label
-      className={clsx(classes.label, isDisabled && classes.isDisabled)}
-      htmlFor={`${groupName}--${value}`}
-      {...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 { RadioButtonStyles } 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 } from '../../theme';
-import { ComponentStyles } from '../../types';
-
-const LEFT_PADDING = 44;
-
-export const styles = {
-  root: {
-    position: 'relative',
-  },
-
-  icon: {
-    display: 'flex',
-    alignItems: 'center',
-    position: 'absolute',
-    left: 12,
-    height: '100%',
-    width: 20,
-    zIndex: 2,
-    color: colors.GREY_ACTIVE,
-  },
-
-  tweakInput: {
-    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 SearchInputStyles = ComponentStyles<typeof styles>;
+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 }>;