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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [
@@ -38,7 +38,8 @@
     "lint": "eslint \"**/*.{js,jsx,ts,tsx}\"",
     "format": "prettier --write \"**/*.{js,jsx,css,json,ts,tsx}\"",
     "format:check": "prettier --check \"**/*.{js,jsx,css,json,ts,tsx}\"",
-    "full-check": "yarn format:check && yarn lint"
+    "full-check": "yarn format:check && yarn lint",
+    "types-check": "tsc --noEmit"
   },
   "dependencies": {
     "clsx": "1.2.1",

package/src/components/DateInput/DateInput.stories.tsx

@@ -10,7 +10,7 @@ export default {
 };
 
 const Template: ComponentStory<typeof DateInput> = (args) => {
-  const [value, setValue] = useState<string | undefined>(args.date);
+  const [value, setValue] = useState(args.date);
 
   useEffect(() => {
     setValue(args.date);

package/src/components/FiltersPane/FilterWithPeriod/FilterWithPeriod.tsx

@@ -93,7 +93,7 @@ export const FilterWithPeriod: FC<IFilterWithPeriodProps> = ({
     value?.periodType === 'CUSTOM',
   );
 
-  const [period, setPeriod] = useState<IPeriod | undefined>(value);
+  const [period, setPeriod] = useState(value);
 
   const periodGetters = useMemo(() => {
     const result: Record<string, IPeriodGetter> = { ...PERIODS_GETTERS };

package/src/components/FlexibleTable/FlexibleTable.tsx

@@ -21,6 +21,7 @@ import TableRow from './TableRow';
 
 import { FlexibleTableStyles, styles } from './FlexibleTable.styles';
 
+// TODO: Заменить Record<string, any> на Record<string, unknown>
 export interface IFlexibleTableProps<Values extends Record<string, any>>
   extends ICommonProps {
   tweakStyles?: FlexibleTableStyles;
@@ -34,6 +35,7 @@ export interface IFlexibleTableProps<Values extends Record<string, any>>
   infinityScrollConfig?: IInfinityScrollConfig;
   uniqueField?: keyof Values;
   onHeadClick?: (column: keyof Values) => void;
+  // TODO: Заменить string на Generic Values[uniqueField]
   onRowClick?: (id: string) => void;
   onRowHover?: (id?: string) => void;
   rowAttributes?: Array<keyof Values>;

package/src/components/FlexibleTable/TableRow.tsx

@@ -6,6 +6,7 @@ import { ICommonProps, IDataAttributes } from '../../types';
 import TableValue from './TableValue';
 import { addDataAttributes } from '../../helpers';
 
+// TODO: Заменить Record<string, any> на Record<string, unknown>
 interface ITableRowProps<Values extends Record<string, any>>
   extends ICommonProps {
   item: Values;
@@ -20,6 +21,7 @@ interface ITableRowProps<Values extends Record<string, any>>
     isOpen: boolean,
     close: () => void,
   ) => React.ReactNode;
+  // TODO: Заменить string на Generic Values[uniqueField]
   onRowHover?: (id?: string) => void;
   onRowClick?: (id: string) => void;
   // чтобы не перерендеривать стили для каждой строчки / ячейки
@@ -131,7 +133,7 @@ function TableRow<Values extends Record<string, any>>({
       >
         {items.map((key, idx) => (
           <TableValue
-            columnName={key as string}
+            columnName={key}
             isSticky={isFirstColumnSticky && idx === 0}
             isSecond={isFirstColumnSticky && idx === 1}
             key={key as string}

package/src/components/FlexibleTable/TableValue.tsx

@@ -3,7 +3,7 @@ import { ReactNode } from 'react';
 import { format } from 'date-fns';
 
 import type { ICommonProps } from '../../types';
-import type { FlexibleTableConfigType, IValueComponent } from './types';
+import type { FlexibleTableConfigType } from './types';
 
 interface ITableValueProps<Values extends Record<string, any>>
   extends ICommonProps {
@@ -42,10 +42,7 @@ function TableValue<Values extends Record<string, any>>({
   let content = null;
 
   if (itemConfig?.component) {
-    const ValueComponent = itemConfig?.component as IValueComponent<
-      Values,
-      typeof columnName
-    >;
+    const ValueComponent = itemConfig?.component;
     content = (
       <ValueComponent
         value={value}

package/src/components/FlexibleTable/types.ts

@@ -17,7 +17,7 @@ export type ITitleComponent<Value> = FC<{
 }>;
 
 export type IValueComponent<Values, Value> = FC<{
-  value?: Value;
+  value: Value;
   row: Values;
   isFocusedRow?: boolean;
   isNestedComponentExpanded: boolean;
@@ -28,7 +28,7 @@ export type IValueComponent<Values, Value> = FC<{
 export type FlexibleTableConfigType<Values> = {
   [Key in keyof Values]?: {
     title?: ReactNode;
-    titleComponent?: ITitleComponent<any>;
+    titleComponent?: ITitleComponent<unknown>;
     component?: IValueComponent<Values, Values[Key]>;
     dateFormat?: string;
     minWidth?: string | number;

package/src/components/IncrementInput/IncrementInput.stories.tsx

@@ -9,7 +9,7 @@ export default {
 };
 
 const Template: ComponentStory<typeof IncrementInput> = (args) => {
-  const [value, setValue] = useState<number | undefined>(undefined);
+  const [value, setValue] = useState<number>();
   return (
     <IncrementInput {...args} value={value} onChange={(v) => setValue(v)} />
   );

package/src/components/NumberInput/NumberInput.stories.tsx

@@ -9,7 +9,7 @@ export default {
 };
 
 const Template: ComponentStory<typeof NumberInput> = (args) => {
-  const [value, setValue] = useState<number | undefined>(undefined);
+  const [value, setValue] = useState<number>();
   return <NumberInput {...args} value={value} onChange={(v) => setValue(v)} />;
 };
 

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

@@ -31,8 +31,11 @@ const convertObjectToString = (v: ObjectValue): string => v.name;
 
 const convertObjectToId = (v: ObjectValue): string => `${v.name}${v.age}`;
 
-const convertObjectToReactNode = (v: ObjectValue): ReactNode => (
-  <span>
+const convertObjectToReactNode = (
+  v: ObjectValue,
+  isDisabled: boolean,
+): ReactNode => (
+  <span style={{ color: isDisabled ? 'red' : undefined }}>
     <i>{v.name}</i>, {v.age}
   </span>
 );
@@ -40,6 +43,7 @@ const convertObjectToReactNode = (v: ObjectValue): ReactNode => (
 const convertStringToReactNode = (v: string): ReactNode => <i>{v}</i>;
 
 const isOptionDisabled = (option: string) => option.startsWith('Опция');
+const isObjectOptionDisabled = (option: ObjectValue) => option.age > 30;
 
 const stringOptions = [
   'Опция 1',
@@ -91,12 +95,12 @@ function SelectWithCustomProps<T>({
   scrollParent,
   ...rest
 }: ISelectWithCustomProps<T>) {
-  const [stringValue, setStringValue] = useState<string | undefined>();
+  const [stringValue, setStringValue] = useState<string>();
   const stringHandler = (newValue?: string) => {
     setStringValue(newValue);
   };
 
-  const [objectValue, setObjectValue] = useState<ObjectValue | undefined>();
+  const [objectValue, setObjectValue] = useState<ObjectValue>();
   const objectHandler = (newValue?: ObjectValue) => {
     setObjectValue(newValue);
   };
@@ -125,6 +129,10 @@ function SelectWithCustomProps<T>({
     Array<string | ObjectValue>
   >([]);
 
+  const handleOpen = () => {
+    console.log('isOpen');
+  };
+
   useEffect(() => {
     const api = async () => {
       setDynamicOptions(await getOptions());
@@ -133,10 +141,6 @@ function SelectWithCustomProps<T>({
     api();
   }, [selectValuesType]);
 
-  const handleOpen = () => {
-    console.log('isOpen');
-  };
-
   const props =
     selectValuesType === 'strings'
       ? {
@@ -146,6 +150,9 @@ function SelectWithCustomProps<T>({
           convertValueToReactNode: shouldRenderAsReactNodes
             ? convertStringToReactNode
             : undefined,
+          isOptionDisabled: shouldUseCustomIsDisabledFunction
+            ? isOptionDisabled
+            : undefined,
         }
       : {
           onChange: objectHandler,
@@ -156,6 +163,9 @@ function SelectWithCustomProps<T>({
           convertValueToReactNode: shouldRenderAsReactNodes
             ? convertObjectToReactNode
             : undefined,
+          isOptionDisabled: shouldUseCustomIsDisabledFunction
+            ? isObjectOptionDisabled
+            : undefined,
         };
 
   return (
@@ -165,9 +175,6 @@ function SelectWithCustomProps<T>({
       optionsMode={optionsMode}
       onType={async () => setDynamicOptions(await getOptions())}
       onOpen={handleOpen}
-      isOptionDisabled={
-        shouldUseCustomIsDisabledFunction ? isOptionDisabled : undefined
-      }
       dropdownOptions={{
         shouldUsePopper,
         shouldRenderInBody,
@@ -229,6 +236,7 @@ Default.args = {
   shouldRenderInBody: false,
   shouldHideOnScroll: false,
   shouldUseCustomIsDisabledFunction: false,
+  shouldScrollToList: true,
   canBeFlipped: false,
   scrollParent: 'document',
 };

package/src/components/Select/Select.tsx

@@ -56,7 +56,7 @@ export interface ISelectProps<Value>
   // Для избежания проблем юзайте useCallback на эти функции
   // или выносите их из компонента (чтобы не было сайдэфектов от перерендеринга их)
   convertValueToString?(value: Value): string | undefined;
-  convertValueToReactNode?(value: Value): ReactNode;
+  convertValueToReactNode?(value: Value, isDisabled: boolean): ReactNode;
   convertValueToId?(value: Value): string | undefined;
 }
 
@@ -366,6 +366,47 @@ export function Select<Value>({
     }
   }, [isOpen, onOpen]);
 
+  const listEl = (
+    <div
+      className={clsx(classes.listWrapper, {
+        [classes.withoutPopper]: !shouldUsePopper,
+        [classes.listWrapperInBody]: shouldRenderInBody,
+      })}
+      ref={list}
+      // чтобы предотвратить onBlur на инпуте
+      onMouseDown={(event) => event.preventDefault()}
+      style={popperData?.styles.popper as Styles}
+      {...popperData?.attributes.popper}
+    >
+      {isOpen && (
+        <SelectList
+          options={filteredOptions}
+          defaultOptionLabel={
+            hasDefaultOption && shouldShowDefaultOption
+              ? defaultOptionLabel
+              : undefined
+          }
+          noMatchesLabel={noMatchesLabel}
+          focusedIndex={focusedListCellIndex}
+          activeValue={value}
+          isLoading={inputProps.isLoading}
+          loadingLabel={loadingLabel}
+          tweakStyles={tweakStyles?.tweakSelectList as Styles}
+          testId={testId !== undefined ? `${testId}-list` : undefined}
+          // скролл не работает с включеным поппером
+          shouldScrollToList={
+            shouldScrollToList && !shouldUsePopper && !shouldHideOnScroll
+          }
+          isOptionDisabled={isOptionDisabled}
+          convertValueToString={convertValueToString}
+          convertValueToReactNode={convertValueToReactNode}
+          convertValueToId={convertValueToId}
+          onOptionClick={handleOptionClick}
+        />
+      )}
+    </div>
+  );
+
   return (
     <div className={classes.root} onKeyDown={handleKeyDown}>
       <div
@@ -397,54 +438,15 @@ export function Select<Value>({
           <Icon type={dropdownIcon} />
         </div>
       </div>
-      <Portal
-        container={shouldRenderInBody ? document.body : inputWrapper.current}
-      >
-        <>
-          {(shouldUsePopper || isOpen) && (
-            <div
-              className={clsx(classes.listWrapper, {
-                [classes.withoutPopper]: !shouldUsePopper,
-                [classes.listWrapperInBody]: shouldRenderInBody,
-              })}
-              ref={list}
-              // чтобы предотвратить onBlur на инпуте
-              onMouseDown={(event) => event.preventDefault()}
-              style={popperData?.styles.popper as Styles}
-              {...popperData?.attributes.popper}
-            >
-              {isOpen && (
-                <SelectList
-                  options={filteredOptions}
-                  defaultOptionLabel={
-                    hasDefaultOption && shouldShowDefaultOption
-                      ? defaultOptionLabel
-                      : undefined
-                  }
-                  noMatchesLabel={noMatchesLabel}
-                  focusedIndex={focusedListCellIndex}
-                  activeValue={value}
-                  isLoading={inputProps.isLoading}
-                  loadingLabel={loadingLabel}
-                  tweakStyles={tweakStyles?.tweakSelectList as Styles}
-                  testId={testId !== undefined ? `${testId}-list` : undefined}
-                  // скролл не работает с включеным поппером
-                  shouldScrollToList={
-                    shouldScrollToList &&
-                    !shouldUsePopper &&
-                    !shouldHideOnScroll
-                  }
-                  isOptionDisabled={isOptionDisabled}
-                  convertValueToString={convertValueToString}
-                  convertValueToReactNode={convertValueToReactNode}
-                  convertValueToId={convertValueToId}
-                  onOptionClick={handleOptionClick}
-                />
-              )}
-            </div>
-          )}
-        </>
-      </Portal>
+      {shouldUsePopper ? (
+        <Portal
+          container={shouldRenderInBody ? document.body : inputWrapper.current}
+        >
+          <>{listEl}</>
+        </Portal>
+      ) : (
+        <>{isOpen && listEl}</>
+      )}
     </div>
   );
 }

package/src/components/Select/SelectList/SelectList.tsx

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import { ScrollIntoViewIfNeeded } from '../../ScrollIntoViewIfNeeded';
 import { useTheme } from '../../../hooks';
 import { ICommonProps } from '../../../types';
-import { isNotEmpty } from '../../../helpers';
+import { addDataAttributes, isNotEmpty } from '../../../helpers';
 import { SelectListStyles, styles } from './SelectList.styles';
 
 export interface ISelectListProps<Value> extends ICommonProps {
@@ -20,7 +20,7 @@ export interface ISelectListProps<Value> extends ICommonProps {
   onOptionClick(index: number): void;
   isOptionDisabled(value: Value): boolean;
   convertValueToString(value: Value): string | undefined;
-  convertValueToReactNode?(value: Value): ReactNode;
+  convertValueToReactNode?(value: Value, isDisabled: boolean): ReactNode;
   convertValueToId?(value: Value): string | undefined;
 }
 
@@ -48,26 +48,20 @@ export function SelectList<Value>({
     ? convertValueToId(activeValue)
     : undefined;
 
-  const convertedToStringOptions = useMemo(
-    () => options.map(convertValueToString),
-    [options, convertValueToString],
-  );
-
   const isActiveOption = (item: Value): boolean =>
     convertValueToId(item) === activeValueId;
 
-  const convertedToReactNodesOptions = useMemo(
-    () =>
-      convertValueToReactNode !== undefined
-        ? options.map(convertValueToReactNode)
-        : [],
-    [options, convertValueToReactNode],
+  const convertFunction = convertValueToReactNode ?? convertValueToString;
+
+  const optionsDisableMap = useMemo(
+    () => options.map((o) => isOptionDisabled(o)),
+    [options, isOptionDisabled],
   );
 
-  const listOptions =
-    convertValueToReactNode !== undefined
-      ? convertedToReactNodesOptions
-      : convertedToStringOptions;
+  const listOptions = useMemo(
+    () => options.map((opt, i) => convertFunction(opt, optionsDisableMap[i])),
+    [options, convertFunction, optionsDisableMap],
+  );
 
   return (
     <ScrollIntoViewIfNeeded
@@ -95,23 +89,29 @@ export function SelectList<Value>({
                 {defaultOptionLabel}
               </ScrollIntoViewIfNeeded>
             )}
-            {listOptions.map((opt, index) => {
-              const optionValue = options[index];
+            {listOptions.map((opt, i) => {
+              const optionValue = options[i];
+              const isFocused = i === focusedIndex;
               const isActive = isActiveOption(optionValue);
               // проверяем, что опция задизейблена
-              const isDisabled = isOptionDisabled(optionValue);
+              const isDisabled = optionsDisableMap[i];
 
               return (
                 <ScrollIntoViewIfNeeded
-                  active={index === focusedIndex}
+                  active={isFocused}
                   options={{ block: 'nearest' }}
-                  key={index}
+                  key={i}
                   className={clsx(classes.cell, {
-                    [classes.focused]: index === focusedIndex,
+                    [classes.focused]: isFocused,
                     [classes.active]: isActive,
                     [classes.disabled]: isDisabled,
                   })}
-                  onClick={!isDisabled ? () => onOptionClick(index) : undefined}
+                  {...addDataAttributes({
+                    disabled: isDisabled,
+                    active: isActive,
+                    focused: isFocused,
+                  })}
+                  onClick={!isDisabled ? () => onOptionClick(i) : undefined}
                 >
                   {opt}
                 </ScrollIntoViewIfNeeded>