@true-engineering/true-react-common-ui-kit 1.3.0 → 1.4.0

package/src/components/SearchInput/SearchInput.tsx

@@ -1,63 +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>
-  );
-};
+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

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

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

@@ -1,242 +1,258 @@
-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 => v.name;
-
-const convertObjectToId = (v: ObjectValue): string => `${v.name}${v.age}`;
-
-const convertObjectToReactNode = (
-  v: ObjectValue,
-  isDisabled: boolean,
-): ReactNode => (
-  <span style={{ color: isDisabled ? 'red' : undefined }}>
-    <i>{v.name}</i>, {v.age}
-  </span>
-);
-
-const convertStringToReactNode = (v: string): ReactNode => <i>{v}</i>;
-
-const isOptionDisabled = (option: string) => option.startsWith('Опция');
-const isObjectOptionDisabled = (option: ObjectValue) => option.age > 30;
-
-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;
-  shouldUseCustomIsDisabledFunction?: boolean;
-  canBeFlipped?: boolean;
-  scrollParent?: 'document' | 'auto';
-}
-
-function SelectWithCustomProps<T>({
-  valuesType,
-  optionsMode,
-  shouldUseReactNodes,
-  shouldUsePopper,
-  shouldRenderInBody,
-  shouldHideOnScroll,
-  shouldUseCustomIsDisabledFunction,
-  canBeFlipped,
-  scrollParent,
-  ...rest
-}: ISelectWithCustomProps<T>) {
-  const [stringValue, setStringValue] = useState<string>();
-  const stringHandler = (newValue?: string) => {
-    setStringValue(newValue);
-  };
-
-  const [objectValue, setObjectValue] = useState<ObjectValue>();
-  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>
-  >([]);
-
-  const handleOpen = () => {
-    console.log('isOpen');
-  };
-
-  useEffect(() => {
-    const api = async () => {
-      setDynamicOptions(await getOptions());
-    };
-
-    api();
-  }, [selectValuesType]);
-
-  const props =
-    selectValuesType === 'strings'
-      ? {
-          onChange: stringHandler,
-          value: stringValue,
-          options: optionsMode === 'dynamic' ? dynamicOptions : stringOptions,
-          convertValueToReactNode: shouldRenderAsReactNodes
-            ? convertStringToReactNode
-            : undefined,
-          isOptionDisabled: shouldUseCustomIsDisabledFunction
-            ? isOptionDisabled
-            : undefined,
-        }
-      : {
-          onChange: objectHandler,
-          value: objectValue,
-          options: optionsMode === 'dynamic' ? dynamicOptions : objectOptions,
-          convertValueToString: convertObjectToString,
-          convertValueToId: convertObjectToId,
-          convertValueToReactNode: shouldRenderAsReactNodes
-            ? convertObjectToReactNode
-            : undefined,
-          isOptionDisabled: shouldUseCustomIsDisabledFunction
-            ? isObjectOptionDisabled
-            : 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,
-  shouldUseCustomIsDisabledFunction: false,
-  shouldScrollToList: true,
-  canBeFlipped: false,
-  scrollParent: 'document',
-};
+import { ReactNode, useEffect, useState } from 'react';
+import { Select, ISelectProps } from './Select';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { isNotEmpty } from '../../helpers';
+
+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 => v.name;
+
+const convertObjectToId = (v: ObjectValue): string => `${v.name}${v.age}`;
+
+const convertObjectToReactNode = (
+  v: ObjectValue,
+  isDisabled: boolean,
+): ReactNode => (
+  <span style={{ color: isDisabled ? 'red' : undefined }}>
+    <i>{v.name}</i>, {v.age}
+  </span>
+);
+
+const convertStringToReactNode = (v: string): ReactNode => <i>{v}</i>;
+
+const isOptionDisabled = (option: string) => option.startsWith('Опция');
+const isObjectOptionDisabled = (option: ObjectValue) => option.age > 30;
+
+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;
+  shouldUseCustomIsDisabledFunction?: boolean;
+  shouldRenderSearchInputInList?: boolean;
+  canBeFlipped?: boolean;
+  scrollParent?: 'document' | 'auto';
+}
+
+function SelectWithCustomProps<T>({
+  valuesType,
+  optionsMode,
+  shouldUseReactNodes,
+  shouldUsePopper,
+  shouldRenderInBody,
+  shouldHideOnScroll,
+  shouldUseCustomIsDisabledFunction,
+  shouldRenderSearchInputInList,
+  canBeFlipped,
+  scrollParent,
+  noMatchesLabel,
+  ...rest
+}: ISelectWithCustomProps<T>) {
+  const [stringValue, setStringValue] = useState<string>();
+  const stringHandler = (newValue?: string) => {
+    console.log('change');
+    setStringValue(newValue);
+  };
+
+  const [objectValue, setObjectValue] = useState<ObjectValue>();
+  const objectHandler = (newValue?: ObjectValue) => {
+    console.log('change');
+    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>
+  >([]);
+
+  const handleOpen = () => {
+    console.log('isOpen');
+  };
+
+  const handleBlur = () => {
+    console.log('blur');
+  };
+
+  useEffect(() => {
+    const api = async () => {
+      setDynamicOptions(await getOptions());
+    };
+
+    api();
+  }, [selectValuesType]);
+
+  const props =
+    selectValuesType === 'strings'
+      ? {
+          onChange: stringHandler,
+          value: stringValue,
+          options: optionsMode === 'dynamic' ? dynamicOptions : stringOptions,
+          convertValueToReactNode: shouldRenderAsReactNodes
+            ? convertStringToReactNode
+            : undefined,
+          isOptionDisabled: shouldUseCustomIsDisabledFunction
+            ? isOptionDisabled
+            : undefined,
+        }
+      : {
+          onChange: objectHandler,
+          value: objectValue,
+          options: optionsMode === 'dynamic' ? dynamicOptions : objectOptions,
+          convertValueToString: convertObjectToString,
+          convertValueToId: convertObjectToId,
+          convertValueToReactNode: shouldRenderAsReactNodes
+            ? convertObjectToReactNode
+            : undefined,
+          isOptionDisabled: shouldUseCustomIsDisabledFunction
+            ? isObjectOptionDisabled
+            : undefined,
+        };
+
+  return (
+    <Select
+      {...rest}
+      {...(props as unknown as ISelectProps<any>)}
+      {...(shouldRenderSearchInputInList && {
+        searchInput: { shouldRenderInList: true },
+      })}
+      noMatchesLabel={isNotEmpty(noMatchesLabel) ? noMatchesLabel : undefined}
+      optionsMode={optionsMode}
+      onType={async () => setDynamicOptions(await getOptions())}
+      onOpen={handleOpen}
+      onBlur={handleBlur}
+      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,
+  shouldUseCustomIsDisabledFunction: false,
+  shouldRenderSearchInputInList: false,
+  shouldScrollToList: true,
+  canBeFlipped: false,
+  scrollParent: 'document',
+};