@true-engineering/true-react-common-ui-kit 3.9.0 → 3.9.2

package/src/components/PhoneInput/PhoneInput.stories.tsx

@@ -1,70 +1,70 @@
-import { useState } from 'react';
-import { ComponentStory } from '@storybook/react';
-import { phoneInfo } from '../../constants';
-import { iconsList } from '../Icon';
-import { PhoneInput } from './PhoneInput';
-import { IPhoneValue } from './types';
-
-const iconTypes = [undefined, ...Object.keys(iconsList)];
-const inlineStyles = [undefined, 'left', 'right', 'middle'];
-const borders = [undefined, 'left', 'top', 'right', 'bottom'];
-const errorPositions = ['bottom', 'top'];
-const countryCodes = phoneInfo.map((info) => info.countryCode);
-
-export default {
-  title: 'Inputs/PhoneInput',
-  component: PhoneInput,
-  argTypes: {
-    iconType: { control: 'select', options: iconTypes },
-    errorPosition: { control: 'inline-radio', options: errorPositions },
-    border: { control: 'inline-radio', options: borders },
-    inlineStyle: { control: 'select', options: inlineStyles },
-    defaultCountryCode: { control: 'select', options: countryCodes },
-  },
-};
-
-const Template: ComponentStory<typeof PhoneInput> = (args) => {
-  const [value, setValue] = useState<IPhoneValue>({
-    dialCode: '7',
-    phoneNumber: '1234567890',
-  });
-
-  return <PhoneInput {...args} value={value} onChange={setValue} />;
-};
-
-export const Default = Template.bind({});
-
-Default.args = {
-  label: 'Label',
-  infoMessage: 'Message Info',
-  border: undefined,
-  iconType: undefined,
-  isInvalid: false,
-  errorMessage: 'Error Text',
-  errorPosition: 'bottom',
-  hasFloatingLabel: true,
-  hasRequiredLabel: true,
-  isActive: false,
-  isDisabled: false,
-  isRequired: false,
-  isReadonly: false,
-  isClearable: false,
-  isLoading: false,
-  inlineStyle: undefined,
-};
-
-Default.parameters = {
-  controls: {
-    exclude: [
-      'testId',
-      'data',
-      'tabIndex',
-      'onChange',
-      'onFocus',
-      'onBlur',
-      'onPaste',
-      'onKeyDown',
-      'onIconClick',
-    ],
-  },
-};
+import { useState } from 'react';
+import { ComponentStory } from '@storybook/react';
+import { phoneInfo } from '../../constants';
+import { iconsList } from '../Icon';
+import { PhoneInput } from './PhoneInput';
+import { IPhoneValue } from './types';
+
+const iconTypes = [undefined, ...Object.keys(iconsList)];
+const inlineStyles = [undefined, 'left', 'right', 'middle'];
+const borders = [undefined, 'left', 'top', 'right', 'bottom'];
+const errorPositions = ['bottom', 'top'];
+const countryCodes = phoneInfo.map((info) => info.countryCode);
+
+export default {
+  title: 'Inputs/PhoneInput',
+  component: PhoneInput,
+  argTypes: {
+    iconType: { control: 'select', options: iconTypes },
+    errorPosition: { control: 'inline-radio', options: errorPositions },
+    border: { control: 'inline-radio', options: borders },
+    inlineStyle: { control: 'select', options: inlineStyles },
+    defaultCountryCode: { control: 'select', options: countryCodes },
+  },
+};
+
+const Template: ComponentStory<typeof PhoneInput> = (args) => {
+  const [value, setValue] = useState<IPhoneValue>({
+    dialCode: '7',
+    phoneNumber: '1234567890',
+  });
+
+  return <PhoneInput {...args} value={value} onChange={setValue} />;
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  label: 'Label',
+  infoMessage: 'Message Info',
+  border: undefined,
+  iconType: undefined,
+  isInvalid: false,
+  errorMessage: 'Error Text',
+  errorPosition: 'bottom',
+  hasFloatingLabel: true,
+  hasRequiredLabel: true,
+  isActive: false,
+  isDisabled: false,
+  isRequired: false,
+  isReadonly: false,
+  isClearable: false,
+  isLoading: false,
+  inlineStyle: undefined,
+};
+
+Default.parameters = {
+  controls: {
+    exclude: [
+      'testId',
+      'data',
+      'tabIndex',
+      'onChange',
+      'onFocus',
+      'onBlur',
+      'onPaste',
+      'onKeyDown',
+      'onIconClick',
+    ],
+  },
+};

package/src/components/PhoneInput/PhoneInput.styles.ts

@@ -1,89 +1,89 @@
-import { colors, dimensions, ITweakStyles, createThemedStyles } from '../../theme';
-import { IInputStyles } from '../Input';
-import { IPhoneInputCountryListStyles } from './components';
-
-const COUNTRY_SELECT_WIDTH = 80;
-
-export const useStyles = createThemedStyles('PhoneInput', {
-  root: {
-    width: '100%',
-    position: 'relative',
-    boxSizing: 'border-box',
-  },
-
-  countrySelectContainer: {
-    position: 'absolute',
-    left: 1,
-    top: 1,
-    width: COUNTRY_SELECT_WIDTH,
-    height: dimensions.CONTROL_HEIGHT - 2,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRight: ['solid', 1, colors.BORDER_MAIN],
-    transition: 'border-color 0.2s ease-in',
-    cursor: 'pointer',
-    zIndex: 2,
-  },
-
-  disabledCountrySelect: {
-    cursor: 'default',
-  },
-
-  flag: {
-    width: 22,
-    height: 16,
-  },
-
-  arrow: {
-    width: 20,
-    color: colors.GREY_ACTIVE,
-    marginLeft: 8,
-    transition: 'transform .2s ease',
-  },
-
-  up: {
-    transform: 'rotate(180deg)',
-  },
-
-  invalidArrow: {
-    color: colors.RED_WARNING,
-  },
-
-  focusedBorder: {},
-
-  invalidBorder: {
-    borderColor: colors.RED_WARNING,
-  },
-
-  inputContainer: {
-    position: 'relative',
-    flex: 1,
-  },
-
-  flagListContainer: {
-    position: 'absolute',
-    width: '100%',
-    top: dimensions.CONTROL_HEIGHT + 6,
-    left: -1,
-    zIndex: 3,
-  },
-});
-
-export const inputStyles: IInputStyles = {
-  inputWrapper: {
-    paddingLeft: COUNTRY_SELECT_WIDTH,
-  },
-
-  label: {
-    marginLeft: COUNTRY_SELECT_WIDTH,
-  },
-};
-
-export type IPhoneInputStyles = ITweakStyles<
-  typeof useStyles,
-  {
-    tweakInput: IInputStyles;
-    tweakCountryList: IPhoneInputCountryListStyles;
-  }
->;
+import { colors, dimensions, ITweakStyles, createThemedStyles } from '../../theme';
+import { IInputStyles } from '../Input';
+import { IPhoneInputCountryListStyles } from './components';
+
+const COUNTRY_SELECT_WIDTH = 80;
+
+export const useStyles = createThemedStyles('PhoneInput', {
+  root: {
+    width: '100%',
+    position: 'relative',
+    boxSizing: 'border-box',
+  },
+
+  countrySelectContainer: {
+    position: 'absolute',
+    left: 1,
+    top: 1,
+    width: COUNTRY_SELECT_WIDTH,
+    height: dimensions.CONTROL_HEIGHT - 2,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRight: ['solid', 1, colors.BORDER_MAIN],
+    transition: 'border-color 0.2s ease-in',
+    cursor: 'pointer',
+    zIndex: 2,
+  },
+
+  disabledCountrySelect: {
+    cursor: 'default',
+  },
+
+  flag: {
+    width: 22,
+    height: 16,
+  },
+
+  arrow: {
+    width: 20,
+    color: colors.GREY_ACTIVE,
+    marginLeft: 8,
+    transition: 'transform .2s ease',
+  },
+
+  up: {
+    transform: 'rotate(180deg)',
+  },
+
+  invalidArrow: {
+    color: colors.RED_WARNING,
+  },
+
+  focusedBorder: {},
+
+  invalidBorder: {
+    borderColor: colors.RED_WARNING,
+  },
+
+  inputContainer: {
+    position: 'relative',
+    flex: 1,
+  },
+
+  flagListContainer: {
+    position: 'absolute',
+    width: '100%',
+    top: dimensions.CONTROL_HEIGHT + 6,
+    left: -1,
+    zIndex: 3,
+  },
+});
+
+export const inputStyles: IInputStyles = {
+  inputWrapper: {
+    paddingLeft: COUNTRY_SELECT_WIDTH,
+  },
+
+  label: {
+    marginLeft: COUNTRY_SELECT_WIDTH,
+  },
+};
+
+export type IPhoneInputStyles = ITweakStyles<
+  typeof useStyles,
+  {
+    tweakInput: IInputStyles;
+    tweakCountryList: IPhoneInputCountryListStyles;
+  }
+>;

package/src/components/PhoneInput/components/PhoneInputCountryList/PhoneInputCountryList.stories.tsx

@@ -1,21 +1,21 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { PhoneInputCountryList } from './PhoneInputCountryList';
-
-export default {
-  title: 'Inputs/PhoneInput/PhoneInputCountryList',
-  component: PhoneInputCountryList,
-  args: {
-    locale: 'ru',
-    placeholder: 'Поиск',
-    noMatchesLabel: 'Ничего не найдено',
-  },
-  parameters: {
-    controls: {
-      exclude: ['data', 'tweakStyles', 'testId'],
-    },
-  },
-} as ComponentMeta<typeof PhoneInputCountryList>;
-
-export const Default: ComponentStory<typeof PhoneInputCountryList> = (args) => (
-  <PhoneInputCountryList {...args} />
-);
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { PhoneInputCountryList } from './PhoneInputCountryList';
+
+export default {
+  title: 'Inputs/PhoneInput/PhoneInputCountryList',
+  component: PhoneInputCountryList,
+  args: {
+    locale: 'ru',
+    placeholder: 'Поиск',
+    noMatchesLabel: 'Ничего не найдено',
+  },
+  parameters: {
+    controls: {
+      exclude: ['data', 'tweakStyles', 'testId'],
+    },
+  },
+} as ComponentMeta<typeof PhoneInputCountryList>;
+
+export const Default: ComponentStory<typeof PhoneInputCountryList> = (args) => (
+  <PhoneInputCountryList {...args} />
+);

package/src/components/PhoneInput/components/PhoneInputCountryList/PhoneInputCountryList.styles.ts

@@ -1,103 +1,103 @@
-import { colors, createThemedStyles, dimensions, helpers, ITweakStyles } from '../../../../theme';
-import { IInputStyles } from '../../../Input';
-
-const ROW_HEIGHT = 40;
-const LIST_PADDING = 10;
-
-export const useStyles = createThemedStyles('PhoneInputCountryList', {
-  root: {
-    borderRadius: dimensions.BORDER_RADIUS_SMALL,
-    backgroundColor: colors.CLASSIC_WHITE,
-    border: [1, 'solid', colors.BORDER_MAIN],
-    boxShadow: '1px 2px 10px rgba(0, 0, 0, 0.25)',
-    overflow: 'hidden',
-  },
-
-  searchContainer: {
-    width: '100%',
-    height: dimensions.CONTROL_HEIGHT,
-    display: 'flex',
-    alignItems: 'center',
-    boxSizing: 'border-box',
-    padding: [0, 8, 0, 16],
-    borderBottom: [1, 'solid', colors.BORDER_MAIN],
-  },
-
-  icon: {
-    width: 20,
-    height: 20,
-  },
-
-  searchIcon: {
-    extend: 'icon',
-    color: colors.FONT_LABEL,
-    flexShrink: 0,
-  },
-
-  flagList: {
-    maxHeight: ROW_HEIGHT * 6 + 2 * LIST_PADDING,
-    padding: [LIST_PADDING, 0],
-    ...helpers.withScrollBar,
-  },
-
-  listItem: {
-    height: ROW_HEIGHT,
-    padding: [12, 16],
-    display: 'flex',
-    alignItems: 'center',
-    cursor: 'pointer',
-    fontSize: 14,
-    lineHeight: '20px',
-    letterSpacing: 0.15,
-    whiteSpace: 'nowrap',
-    boxSizing: 'border-box',
-  },
-
-  selectedCountry: {
-    backgroundColor: colors.GREY_BACKGROUND,
-  },
-
-  activeCountry: {
-    backgroundColor: colors.GREY_FOCUS,
-  },
-
-  flag: {
-    width: 22,
-    height: 16,
-    flexShrink: 0,
-  },
-
-  countryName: {
-    color: colors.FONT_MAIN,
-    overflowX: 'hidden',
-    textOverflow: 'ellipsis',
-    margin: [0, 8, 0, 12],
-  },
-
-  dialCode: {
-    color: colors.GREY_ACTIVE,
-  },
-
-  emptyResult: {
-    color: colors.FONT_LABEL,
-    padding: [6, 16],
-  },
-});
-
-export const inputStyles: IInputStyles = {
-  inputWrapper: {
-    border: 'none',
-    height: 'calc(var(--control-height) - 2px)',
-  },
-
-  input: {
-    fontSize: 14,
-    lineHeight: '20px',
-    letterSpacing: 0.15,
-  },
-};
-
-export type IPhoneInputCountryListStyles = ITweakStyles<
-  typeof useStyles,
-  { tweakInput: IInputStyles }
->;
+import { colors, createThemedStyles, dimensions, helpers, ITweakStyles } from '../../../../theme';
+import { IInputStyles } from '../../../Input';
+
+const ROW_HEIGHT = 40;
+const LIST_PADDING = 10;
+
+export const useStyles = createThemedStyles('PhoneInputCountryList', {
+  root: {
+    borderRadius: dimensions.BORDER_RADIUS_SMALL,
+    backgroundColor: colors.CLASSIC_WHITE,
+    border: [1, 'solid', colors.BORDER_MAIN],
+    boxShadow: '1px 2px 10px rgba(0, 0, 0, 0.25)',
+    overflow: 'hidden',
+  },
+
+  searchContainer: {
+    width: '100%',
+    height: dimensions.CONTROL_HEIGHT,
+    display: 'flex',
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    padding: [0, 8, 0, 16],
+    borderBottom: [1, 'solid', colors.BORDER_MAIN],
+  },
+
+  icon: {
+    width: 20,
+    height: 20,
+  },
+
+  searchIcon: {
+    extend: 'icon',
+    color: colors.FONT_LABEL,
+    flexShrink: 0,
+  },
+
+  flagList: {
+    maxHeight: ROW_HEIGHT * 6 + 2 * LIST_PADDING,
+    padding: [LIST_PADDING, 0],
+    ...helpers.withScrollBar,
+  },
+
+  listItem: {
+    height: ROW_HEIGHT,
+    padding: [12, 16],
+    display: 'flex',
+    alignItems: 'center',
+    cursor: 'pointer',
+    fontSize: 14,
+    lineHeight: '20px',
+    letterSpacing: 0.15,
+    whiteSpace: 'nowrap',
+    boxSizing: 'border-box',
+  },
+
+  selectedCountry: {
+    backgroundColor: colors.GREY_BACKGROUND,
+  },
+
+  activeCountry: {
+    backgroundColor: colors.GREY_FOCUS,
+  },
+
+  flag: {
+    width: 22,
+    height: 16,
+    flexShrink: 0,
+  },
+
+  countryName: {
+    color: colors.FONT_MAIN,
+    overflowX: 'hidden',
+    textOverflow: 'ellipsis',
+    margin: [0, 8, 0, 12],
+  },
+
+  dialCode: {
+    color: colors.GREY_ACTIVE,
+  },
+
+  emptyResult: {
+    color: colors.FONT_LABEL,
+    padding: [6, 16],
+  },
+});
+
+export const inputStyles: IInputStyles = {
+  inputWrapper: {
+    border: 'none',
+    height: 'calc(var(--control-height) - 2px)',
+  },
+
+  input: {
+    fontSize: 14,
+    lineHeight: '20px',
+    letterSpacing: 0.15,
+  },
+};
+
+export type IPhoneInputCountryListStyles = ITweakStyles<
+  typeof useStyles,
+  { tweakInput: IInputStyles }
+>;

package/src/components/PhoneInput/components/PhoneInputCountryList/index.ts

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

package/src/components/PhoneInput/components/index.ts

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

package/src/components/PhoneInput/constants.ts

@@ -1,3 +1,3 @@
-import { IPhoneValue } from './types';
-
-export const DEFAULT_VALUE: IPhoneValue = { phoneNumber: '', dialCode: '' };
+import { IPhoneValue } from './types';
+
+export const DEFAULT_VALUE: IPhoneValue = { phoneNumber: '', dialCode: '' };

package/src/components/PhoneInput/index.ts

@@ -1,4 +1,4 @@
-export * from './PhoneInput';
-export * from './types';
-export type { IPhoneInputStyles } from './PhoneInput.styles';
-export type { IPhoneInputCountryListStyles } from './components';
+export * from './PhoneInput';
+export * from './types';
+export type { IPhoneInputStyles } from './PhoneInput.styles';
+export type { IPhoneInputCountryListStyles } from './components';

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/index.ts

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