@true-engineering/true-react-common-ui-kit 1.0.1

package/src/components/PhoneInput/types.ts

@@ -0,0 +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;
+}

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

@@ -0,0 +1,46 @@
+import { ComponentStory } from '@storybook/react';
+import { useState } from '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

@@ -0,0 +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>;

package/src/components/RadioButton/RadioButton.tsx

@@ -0,0 +1,56 @@
+import { PropsWithChildren } from 'react';
+import clsx from 'clsx';
+import { useTheme } from '../../hooks';
+import { addDataAttributes, isNotEmpty } from '../../helpers';
+import { ICommonProps } from '../../types';
+
+import { RadioButtonStyles, styles } from './RadioButton.styles';
+
+export interface IRadioButtonProps<Value extends string> extends ICommonProps {
+  tweakStyles?: RadioButtonStyles;
+  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,
+  onChange,
+  data,
+  tweakStyles,
+}: PropsWithChildren<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,
+        })}
+      />
+      {isNotEmpty(children) && (
+        <span className={classes.content}>{children}</span>
+      )}
+    </label>
+  );
+}

package/src/components/RadioButton/index.ts

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

package/src/components/ScrollIntoViewIfNeeded/ScrollIntoViewIfNeeded.ts

@@ -0,0 +1,66 @@
+import { createElement, createRef, PureComponent } from 'react';
+
+import scrollIntoViewIfNeeded, {
+  StandardBehaviorOptions,
+} from 'scroll-into-view-if-needed';
+
+interface IScrollIntoViewIfNeededProps extends React.HTMLProps<HTMLElement> {
+  active?: boolean;
+  children?: React.ReactNode;
+  elementType?: string;
+  options?: StandardBehaviorOptions;
+}
+
+const ScrollIntoViewIfNeededDefaultElementType = 'div';
+
+const ScrollIntoViewIfNeededDefaultProps: IScrollIntoViewIfNeededProps = {
+  active: true,
+  elementType: ScrollIntoViewIfNeededDefaultElementType,
+  options: {
+    behavior: 'smooth',
+    scrollMode: 'if-needed',
+  },
+};
+
+export class ScrollIntoViewIfNeeded extends PureComponent<IScrollIntoViewIfNeededProps> {
+  node: React.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/index.ts

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

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

@@ -0,0 +1,24 @@
+import { ComponentStory } from '@storybook/react';
+import { useState } from '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

@@ -0,0 +1,50 @@
+import { colors } from '../../theme';
+import { rgba } from '../../helpers';
+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>;

package/src/components/SearchInput/SearchInput.tsx

@@ -0,0 +1,63 @@
+import { FC } from 'react';
+
+import { useTheme, useTweakStyles } from '../../hooks';
+import { getTestId, addDataAttributes, addDataTestId } from '../../helpers';
+import { Icon } from '../Icon';
+import { IInputProps, Input } from '../Input';
+
+import { SearchInputStyles, styles } from './SearchInput.styles';
+
+export type ISearchInputProps = Omit<
+  IInputProps,
+  | 'type'
+  | 'isInvalid'
+  | 'errorMessage'
+  | 'label'
+  | 'isActive'
+  | 'errorPosition'
+  | 'hasFloatingLabel'
+  | 'border'
+> & {
+  tweakStyles?: SearchInputStyles;
+};
+
+export const SearchInput: FC<ISearchInputProps> = ({
+  isClearable = true,
+  tweakStyles,
+  testId,
+  data,
+  ...props
+}) => {
+  const { classes, componentStyles } = useTheme(
+    'SearchInput',
+    styles,
+    tweakStyles,
+  );
+
+  const tweakInputStyles = useTweakStyles(
+    componentStyles,
+    tweakStyles,
+    'tweakInput',
+  );
+
+  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

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

package/src/components/Select/Select.stories.tsx

@@ -0,0 +1,230 @@
+import { ReactNode, useEffect, useState } from 'react';
+import { Select, ISelectProps } from './Select';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+interface ObjectValue {
+  name: string;
+  age: number;
+  isDisabled?: boolean;
+}
+
+const inlineStyles = [undefined, 'left', 'right', 'middle'];
+const borders: Array<ISelectProps<any>['border']> = [
+  undefined,
+  'left',
+  'top',
+  'right',
+  'bottom',
+];
+const errorPositions: Array<ISelectProps<any>['errorPosition']> = [
+  'bottom',
+  'top',
+];
+
+const genLetters = (qnt = 1): string =>
+  Math.random()
+    .toString(36)
+    .replace(/[^a-z]+/g, '')
+    .substr(0, qnt);
+
+const convertObjectToString = (v?: ObjectValue): string | undefined =>
+  v !== undefined ? `${v.name}` : undefined;
+
+const convertObjectToId = (v?: ObjectValue): string | undefined =>
+  v !== undefined ? `${v.name}${v.age}` : undefined;
+
+const convertObjectToReactNode = (v?: ObjectValue): ReactNode | undefined =>
+  v !== undefined ? (
+    <span>
+      <i>{v.name}</i>, {v.age}
+    </span>
+  ) : undefined;
+
+const convertStringToReactNode = (v?: string): ReactNode | undefined =>
+  v !== undefined ? <i>{v}</i> : undefined;
+
+const stringOptions = [
+  'Опция 1',
+  'Опция 11',
+  'Еще одна опция',
+  'Еще выбор',
+  'Очень длинная опция вот такой текст',
+  '1',
+  '2',
+  '3',
+  '4',
+];
+
+const objectOptions: ObjectValue[] = [
+  { name: 'Ivan', age: 34 },
+  { name: 'Ivan', age: 42 },
+  { name: 'Konstantin', age: 11 },
+  { name: 'Mikhail', age: 24 },
+  { name: 'Maria', age: 45, isDisabled: true },
+  { name: 'Elena', age: 14 },
+  { name: 'Artem', age: 23 },
+];
+
+// Максимум не включается, минимум включается
+const getRandomInt = (min: number, max: number) =>
+  Math.floor(Math.random() * (Math.floor(max) - Math.ceil(min))) +
+  Math.ceil(min);
+
+interface ISelectWithCustomProps<T> extends ISelectProps<T> {
+  valuesType: 'strings' | 'objects';
+  shouldUseReactNodes?: boolean;
+  shouldUsePopper?: boolean;
+  shouldRenderInBody?: boolean;
+  shouldHideOnScroll?: boolean;
+  canBeFlipped?: boolean;
+  scrollParent?: 'document' | 'auto';
+}
+
+function SelectWithCustomProps<T>({
+  valuesType,
+  optionsMode,
+  shouldUseReactNodes,
+  shouldUsePopper,
+  shouldRenderInBody,
+  shouldHideOnScroll,
+  canBeFlipped,
+  scrollParent,
+  ...rest
+}: ISelectWithCustomProps<T>) {
+  const [stringValue, setStringValue] = useState<string | undefined>();
+  const stringHandler = (newValue?: string) => {
+    setStringValue(newValue);
+  };
+
+  const [objectValue, setObjectValue] = useState<ObjectValue | undefined>();
+  const objectHandler = (newValue?: ObjectValue) => {
+    setObjectValue(newValue);
+  };
+
+  const selectValuesType = valuesType;
+  const shouldRenderAsReactNodes = shouldUseReactNodes;
+
+  const getOptions = async (): Promise<Array<string | ObjectValue>> =>
+    new Promise((resolve) =>
+      setTimeout(() => {
+        resolve(
+          [...Array(10)].map((_) => {
+            if (selectValuesType === 'strings') {
+              return genLetters(getRandomInt(3, 10));
+            }
+            return {
+              name: genLetters(getRandomInt(3, 10)),
+              age: getRandomInt(10, 70),
+            } as ObjectValue;
+          }),
+        );
+      }, 1000),
+    );
+
+  const [dynamicOptions, setDynamicOptions] = useState<
+    Array<string | ObjectValue>
+  >([]);
+
+  useEffect(() => {
+    const api = async () => {
+      setDynamicOptions(await getOptions());
+    };
+
+    api();
+  }, [selectValuesType]);
+
+  const handleOpen = () => {
+    console.log('isOpen');
+  };
+
+  const props =
+    selectValuesType === 'strings'
+      ? {
+          onChange: stringHandler,
+          value: stringValue,
+          options: optionsMode === 'dynamic' ? dynamicOptions : stringOptions,
+          convertValueToReactNode: shouldRenderAsReactNodes
+            ? convertStringToReactNode
+            : undefined,
+        }
+      : {
+          onChange: objectHandler,
+          value: objectValue,
+          options: optionsMode === 'dynamic' ? dynamicOptions : objectOptions,
+          convertValueToString: convertObjectToString,
+          convertValueToId: convertObjectToId,
+          convertValueToReactNode: shouldRenderAsReactNodes
+            ? convertObjectToReactNode
+            : undefined,
+        };
+
+  return (
+    <Select
+      {...rest}
+      {...(props as unknown as ISelectProps<any>)}
+      optionsMode={optionsMode}
+      onType={async () => setDynamicOptions(await getOptions())}
+      onOpen={handleOpen}
+      dropdownOptions={{
+        shouldUsePopper,
+        shouldRenderInBody,
+        shouldHideOnScroll,
+        canBeFlipped,
+        scrollParent,
+      }}
+    />
+  );
+}
+
+export default {
+  title: 'Select',
+  component: SelectWithCustomProps,
+  argTypes: {
+    debounceTime: {
+      control: { type: 'range', min: 0, max: 1000, step: 100 },
+    },
+    errorPosition: { control: 'inline-radio', options: errorPositions },
+    border: { control: 'inline-radio', options: borders },
+    inlineStyle: { control: 'select', options: inlineStyles },
+    optionsMode: {
+      control: 'inline-radio',
+      options: ['normal', 'search', 'dynamic'],
+    },
+    valuesType: {
+      control: 'inline-radio',
+      options: ['strings', 'objects'],
+    },
+  },
+} as ComponentMeta<typeof SelectWithCustomProps>;
+
+const Template: ComponentStory<typeof SelectWithCustomProps> = (args) => (
+  <SelectWithCustomProps {...args} />
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  label: 'Dropdown',
+  defaultOptionLabel: 'Default Option',
+  noMatchesLabel: 'No matches',
+  border: undefined,
+  isInvalid: false,
+  errorMessage: 'Error Text',
+  errorPosition: 'bottom',
+  hasFloatingLabel: true,
+  hasRequiredLabel: true,
+  isDisabled: false,
+  isRequired: false,
+  isClearable: false,
+  isLoading: false,
+  debounceTime: 400,
+  // custom options
+  shouldUseReactNodes: false,
+  valuesType: 'strings',
+  optionsMode: 'normal',
+  shouldUsePopper: false,
+  shouldRenderInBody: false,
+  shouldHideOnScroll: false,
+  canBeFlipped: false,
+  scrollParent: 'document',
+};

package/src/components/Select/Select.styles.ts

@@ -0,0 +1,74 @@
+import { ComponentStyles } from '../../types';
+
+export const styles = {
+  root: {
+    width: '100%',
+    position: 'relative',
+    boxSizing: 'border-box',
+  },
+
+  inputWrapper: {
+    width: '100%',
+    cursor: 'text',
+    position: 'relative',
+  },
+
+  listWrapper: {
+    left: -1,
+    zIndex: 3,
+    width: 'fit-content',
+    minWidth: 'calc(100% + 1px)',
+  },
+
+  withoutPopper: {
+    position: 'absolute',
+    top: 'calc(100% + 6px)',
+  },
+
+  listWrapperInBody: {
+    minWidth: 'auto',
+    width: 'auto',
+    maxWidth: 'min-content',
+  },
+
+  arrow: {
+    position: 'absolute',
+    right: 12,
+    top: 14,
+    width: 20,
+    height: 20,
+    cursor: 'pointer',
+    zIndex: 1,
+    transition: 'transform 0.1s ease',
+  },
+
+  activeArrow: {
+    transform: 'rotate(180deg)',
+  },
+
+  disabled: {
+    '& $arrow': {
+      cursor: 'default',
+    },
+  },
+
+  tweakInput: {
+    input: {
+      paddingRight: 32,
+    },
+
+    disabled: {
+      '& $input': {
+        cursor: 'default',
+      },
+    },
+
+    controls: {
+      paddingRight: 32,
+    },
+  },
+
+  tweakSelectList: {},
+};
+
+export type SelectStyles = ComponentStyles<typeof styles>;