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

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/PhoneInputCountryList.tsx

@@ -1,155 +1,155 @@
-import { FC, MouseEvent, useState, useEffect, useMemo } from 'react';
-import clsx from 'clsx';
-import { phoneInfo } from '../../../../constants';
-import {
-  checkSearchStringInCountry,
-  getCountryTextByLocale,
-  findCountryIndexByCode,
-  sortCountriesByLocale,
-} from '../../../../helpers';
-import { useTweakStyles } from '../../../../hooks';
-import { ICommonProps } from '../../../../types';
-import { Flag } from '../../../Flag';
-import { Icon } from '../../../Icon';
-import { Input } from '../../../Input';
-import { ScrollIntoViewIfNeeded } from '../../../ScrollIntoViewIfNeeded';
-import { IPhoneInfo } from '../../types';
-import {
-  useStyles,
-  IPhoneInputCountryListStyles,
-  inputStyles,
-} from './PhoneInputCountryList.styles';
-
-export interface IPhoneInputCountryListProps
-  extends Pick<ICommonProps<IPhoneInputCountryListStyles>, 'tweakStyles'> {
-  selectedCountryCode?: string;
-  locale: string;
-  placeholder: string;
-  noMatchesLabel: string;
-  closeList(): void;
-  onChange(country: IPhoneInfo, event: MouseEvent | KeyboardEvent): void;
-}
-
-export const PhoneInputCountryList: FC<IPhoneInputCountryListProps> = ({
-  locale,
-  placeholder,
-  selectedCountryCode,
-  closeList,
-  noMatchesLabel,
-  onChange,
-  tweakStyles,
-}) => {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const tweakInputStyles = useTweakStyles({
-    innerStyles: inputStyles,
-    tweakStyles,
-    className: 'tweakInput',
-    currentComponentName: 'PhoneInputCountryList',
-  });
-
-  const sortedCountries = useMemo(
-    () => sortCountriesByLocale(phoneInfo, locale),
-    [phoneInfo, locale],
-  );
-
-  const selectedCountryIdx = findCountryIndexByCode(selectedCountryCode, sortedCountries);
-
-  const [searchValue, setSearchValue] = useState('');
-  const [countriesList, setCountriesList] = useState(sortedCountries);
-  const [keyCursorOn, setKeyCursorOn] = useState(
-    selectedCountryIdx !== -1 ? selectedCountryIdx : 0,
-  );
-
-  const handleSearchChange = (newSearchValue: string) => {
-    const newCountriesList = sortedCountries.filter((country) =>
-      checkSearchStringInCountry(country, newSearchValue),
-    );
-
-    const defaultKeyCursorOn = newCountriesList.length > 0 ? 0 : -1;
-    const newSelectedCountryIdx = findCountryIndexByCode(selectedCountryCode, newCountriesList);
-
-    setCountriesList(newCountriesList);
-    setSearchValue(newSearchValue);
-    setKeyCursorOn(newSelectedCountryIdx !== -1 ? newSelectedCountryIdx : defaultKeyCursorOn);
-  };
-
-  const handleKeyDown = (event: KeyboardEvent) => {
-    const lastListItemIdx = countriesList.length - 1;
-
-    if (event.code === 'Escape' || event.code === 'Tab') {
-      closeList();
-    }
-
-    if (event.code === 'ArrowDown' && lastListItemIdx !== -1) {
-      // чтобы убрать перемещение курсора в инпуте
-      event.preventDefault();
-      setKeyCursorOn(keyCursorOn < lastListItemIdx ? keyCursorOn + 1 : 0);
-    }
-
-    if (event.code === 'ArrowUp' && lastListItemIdx !== -1) {
-      // чтобы убрать перемещение курсора в инпуте
-      event.preventDefault();
-      setKeyCursorOn(keyCursorOn > 0 ? keyCursorOn - 1 : lastListItemIdx);
-    }
-
-    if (event.code === 'Enter' || event.code === 'NumpadEnter') {
-      if (countriesList.length === 0) {
-        closeList();
-      } else if (keyCursorOn >= 0) {
-        onChange(countriesList[keyCursorOn], event);
-      }
-    }
-  };
-
-  useEffect(() => {
-    document.addEventListener('keydown', handleKeyDown, false);
-
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown, false);
-    };
-  });
-
-  return (
-    <div className={classes.root}>
-      <div className={classes.searchContainer}>
-        <div className={classes.searchIcon}>
-          <Icon type="search" />
-        </div>
-        <Input
-          value={searchValue}
-          placeholder={placeholder}
-          onChange={handleSearchChange}
-          tweakStyles={tweakInputStyles}
-          isClearable
-          shouldFocusOnMount
-        />
-      </div>
-      <div className={classes.flagList}>
-        {countriesList.map((country, index) => (
-          <ScrollIntoViewIfNeeded
-            key={country.countryCode}
-            active={keyCursorOn === index}
-            options={{ block: 'nearest' }}
-          >
-            <div
-              className={clsx(classes.listItem, {
-                [classes.activeCountry]: selectedCountryIdx === index,
-                [classes.selectedCountry]: keyCursorOn === index,
-              })}
-              onMouseEnter={() => setKeyCursorOn(index)}
-              onClick={(e) => onChange(country, e)}
-            >
-              <div className={classes.flag}>
-                <Flag countryCode={country.countryCode} />
-              </div>
-              <div className={classes.countryName}>{getCountryTextByLocale(country, locale)}</div>
-              <div className={classes.dialCode}>{`+${country.dialCode}`}</div>
-            </div>
-          </ScrollIntoViewIfNeeded>
-        ))}
-        {countriesList.length === 0 && <div className={classes.emptyResult}>{noMatchesLabel}</div>}
-      </div>
-    </div>
-  );
-};
+import { FC, MouseEvent, useState, useEffect, useMemo } from 'react';
+import clsx from 'clsx';
+import { phoneInfo } from '../../../../constants';
+import {
+  checkSearchStringInCountry,
+  getCountryTextByLocale,
+  findCountryIndexByCode,
+  sortCountriesByLocale,
+} from '../../../../helpers';
+import { useTweakStyles } from '../../../../hooks';
+import { ICommonProps } from '../../../../types';
+import { Flag } from '../../../Flag';
+import { Icon } from '../../../Icon';
+import { Input } from '../../../Input';
+import { ScrollIntoViewIfNeeded } from '../../../ScrollIntoViewIfNeeded';
+import { IPhoneInfo } from '../../types';
+import {
+  useStyles,
+  IPhoneInputCountryListStyles,
+  inputStyles,
+} from './PhoneInputCountryList.styles';
+
+export interface IPhoneInputCountryListProps
+  extends Pick<ICommonProps<IPhoneInputCountryListStyles>, 'tweakStyles'> {
+  selectedCountryCode?: string;
+  locale: string;
+  placeholder: string;
+  noMatchesLabel: string;
+  closeList(): void;
+  onChange(country: IPhoneInfo, event: MouseEvent | KeyboardEvent): void;
+}
+
+export const PhoneInputCountryList: FC<IPhoneInputCountryListProps> = ({
+  locale,
+  placeholder,
+  selectedCountryCode,
+  closeList,
+  noMatchesLabel,
+  onChange,
+  tweakStyles,
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakInputStyles = useTweakStyles({
+    innerStyles: inputStyles,
+    tweakStyles,
+    className: 'tweakInput',
+    currentComponentName: 'PhoneInputCountryList',
+  });
+
+  const sortedCountries = useMemo(
+    () => sortCountriesByLocale(phoneInfo, locale),
+    [phoneInfo, locale],
+  );
+
+  const selectedCountryIdx = findCountryIndexByCode(selectedCountryCode, sortedCountries);
+
+  const [searchValue, setSearchValue] = useState('');
+  const [countriesList, setCountriesList] = useState(sortedCountries);
+  const [keyCursorOn, setKeyCursorOn] = useState(
+    selectedCountryIdx !== -1 ? selectedCountryIdx : 0,
+  );
+
+  const handleSearchChange = (newSearchValue: string) => {
+    const newCountriesList = sortedCountries.filter((country) =>
+      checkSearchStringInCountry(country, newSearchValue),
+    );
+
+    const defaultKeyCursorOn = newCountriesList.length > 0 ? 0 : -1;
+    const newSelectedCountryIdx = findCountryIndexByCode(selectedCountryCode, newCountriesList);
+
+    setCountriesList(newCountriesList);
+    setSearchValue(newSearchValue);
+    setKeyCursorOn(newSelectedCountryIdx !== -1 ? newSelectedCountryIdx : defaultKeyCursorOn);
+  };
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    const lastListItemIdx = countriesList.length - 1;
+
+    if (event.code === 'Escape' || event.code === 'Tab') {
+      closeList();
+    }
+
+    if (event.code === 'ArrowDown' && lastListItemIdx !== -1) {
+      // чтобы убрать перемещение курсора в инпуте
+      event.preventDefault();
+      setKeyCursorOn(keyCursorOn < lastListItemIdx ? keyCursorOn + 1 : 0);
+    }
+
+    if (event.code === 'ArrowUp' && lastListItemIdx !== -1) {
+      // чтобы убрать перемещение курсора в инпуте
+      event.preventDefault();
+      setKeyCursorOn(keyCursorOn > 0 ? keyCursorOn - 1 : lastListItemIdx);
+    }
+
+    if (event.code === 'Enter' || event.code === 'NumpadEnter') {
+      if (countriesList.length === 0) {
+        closeList();
+      } else if (keyCursorOn >= 0) {
+        onChange(countriesList[keyCursorOn], event);
+      }
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown, false);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown, false);
+    };
+  });
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.searchContainer}>
+        <div className={classes.searchIcon}>
+          <Icon type="search" />
+        </div>
+        <Input
+          value={searchValue}
+          placeholder={placeholder}
+          onChange={handleSearchChange}
+          tweakStyles={tweakInputStyles}
+          isClearable
+          shouldFocusOnMount
+        />
+      </div>
+      <div className={classes.flagList}>
+        {countriesList.map((country, index) => (
+          <ScrollIntoViewIfNeeded
+            key={country.countryCode}
+            active={keyCursorOn === index}
+            options={{ block: 'nearest' }}
+          >
+            <div
+              className={clsx(classes.listItem, {
+                [classes.activeCountry]: selectedCountryIdx === index,
+                [classes.selectedCountry]: keyCursorOn === index,
+              })}
+              onMouseEnter={() => setKeyCursorOn(index)}
+              onClick={(e) => onChange(country, e)}
+            >
+              <div className={classes.flag}>
+                <Flag countryCode={country.countryCode} />
+              </div>
+              <div className={classes.countryName}>{getCountryTextByLocale(country, locale)}</div>
+              <div className={classes.dialCode}>{`+${country.dialCode}`}</div>
+            </div>
+          </ScrollIntoViewIfNeeded>
+        ))}
+        {countriesList.length === 0 && <div className={classes.emptyResult}>{noMatchesLabel}</div>}
+      </div>
+    </div>
+  );
+};

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/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'],
+  },
+};