@true-engineering/true-react-common-ui-kit 3.0.0-alpha.2 → 3.0.0-alpha.21

package/dist/vite-env.d.ts

@@ -1 +1 @@
-/// <reference types="vite/client" />
+/// <reference types="vite/client" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "3.0.0-alpha.2",
+  "version": "3.0.0-alpha.21",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [

package/src/components/AddButton/AddButton.stories.tsx

@@ -1,21 +1,21 @@
-import { ComponentStory } from '@storybook/react';
-import { AddButton } from './AddButton';
-
-export default {
-  title: 'AddButton',
-  component: AddButton,
-};
-
-const Template: ComponentStory<typeof AddButton> = (args) => (
-  <AddButton {...args} onClick={console.log} />
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  text: 'Добавить билет',
-  isDisabled: false,
-  isFullWidth: false,
-};
-
-Default.parameters = { controls: { exclude: ['onClick'] } };
+import { ComponentStory } from '@storybook/react';
+import { AddButton } from './AddButton';
+
+export default {
+  title: 'AddButton',
+  component: AddButton,
+};
+
+const Template: ComponentStory<typeof AddButton> = (args) => (
+  <AddButton {...args} onClick={console.log} />
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  text: 'Добавить билет',
+  isDisabled: false,
+  isFullWidth: false,
+};
+
+Default.parameters = { controls: { exclude: ['onClick'] } };

package/src/components/Checkbox/Checkbox.tsx

@@ -12,7 +12,7 @@ import { useStyles, ICheckboxStyles } from './Checkbox.styles';
 
 export interface ICheckboxProps<V> extends ICommonProps<ICheckboxStyles> {
   children?: ReactNode;
-  isChecked?: boolean;
+  isChecked: boolean | undefined;
   isSemiChecked?: boolean;
   isDisabled?: boolean;
   isReadonly?: boolean;

package/src/components/Colors/Colors.stories.tsx

@@ -1,7 +1,7 @@
-import { Colors } from './Colors';
-
-export default {
-  title: 'Colors',
-};
-
-export const Default = (): JSX.Element => <Colors />;
+import { Colors } from './Colors';
+
+export default {
+  title: 'Colors',
+};
+
+export const Default = (): JSX.Element => <Colors />;

package/src/components/DateInput/DateInput.tsx

@@ -1,6 +1,5 @@
 import { FormEvent, MouseEvent, forwardRef, ChangeEvent } from 'react';
 import clsx from 'clsx';
-import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
 import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
@@ -33,7 +32,6 @@ export const DateInput = forwardRef<HTMLInputElement, IDateInputProps>(
       data,
       isRange,
       tweakStyles,
-      testId,
       onClick,
       onChange,
       ...inputProps
@@ -70,12 +68,7 @@ export const DateInput = forwardRef<HTMLInputElement, IDateInputProps>(
     };
 
     return (
-      <div
-        className={clsx(classes.root, className)}
-        onClick={onClick}
-        {...addDataTestId(testId)}
-        {...addDataAttributes(data)}
-      >
+      <div className={clsx(classes.root, className)} onClick={onClick} {...addDataAttributes(data)}>
         <Input
           {...inputProps}
           ref={ref}
@@ -84,7 +77,6 @@ export const DateInput = forwardRef<HTMLInputElement, IDateInputProps>(
           placeholder={
             placeholder ?? (isRange ? EMPTY_DATE_RANGE_INPUT_VALUE : EMPTY_DATE_INPUT_VALUE)
           }
-          testId={getTestId(testId, 'input')}
           tweakStyles={tweakInputStyles}
           onChange={handleChange}
           beforeMaskedStateChange={beforeMaskedStateChange}

package/src/components/DateInput/constants.ts

@@ -1,2 +1,2 @@
-export const EMPTY_DATE_INPUT_VALUE = '__.__.____';
-export const EMPTY_DATE_RANGE_INPUT_VALUE = `${EMPTY_DATE_INPUT_VALUE} - ${EMPTY_DATE_INPUT_VALUE}`;
+export const EMPTY_DATE_INPUT_VALUE = '__.__.____';
+export const EMPTY_DATE_RANGE_INPUT_VALUE = `${EMPTY_DATE_INPUT_VALUE} - ${EMPTY_DATE_INPUT_VALUE}`;

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -47,6 +47,7 @@ const Template: ComponentStory<typeof DatePicker> = (args) => {
         <DatePicker
           {...args}
           locale={ru}
+          testId="datepicker"
           months={months}
           selectedDate={date}
           startDate={startDate}

package/src/components/DatePicker/DatePicker.tsx

@@ -4,7 +4,6 @@ import 'react-datepicker/dist/react-datepicker.css';
 import clsx from 'clsx';
 import { isAfter, isBefore, isValid } from 'date-fns';
 import {
-  addDataTestId,
   isEmpty,
   isNotEmpty,
   isStringNotEmpty,
@@ -40,7 +39,6 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
   (
     {
       data,
-      testId,
       selectedDate = null,
       minDate,
       maxDate,
@@ -234,7 +232,7 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
     }, [selectedDate, startDate, endDate]);
 
     return (
-      <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
+      <div className={classes.root} {...addDataAttributes(data)}>
         <DatePickerComponent
           ref={ref}
           minDate={minDate}

package/src/components/FiltersPane/FiltersPane.stories.tsx

@@ -72,7 +72,6 @@ type ConfigValues = {
 
 interface IFiltersPaneWithCustomProps<Values, Content> extends IFiltersPaneProps<Values, Content> {
   containerWidth: number;
-  multiselectWidth: number;
   isSearchDisabled: boolean;
   isSearchAutosizeable: boolean;
   shouldShowSettingsButton: boolean;
@@ -83,7 +82,6 @@ interface IFiltersPaneWithCustomProps<Values, Content> extends IFiltersPaneProps
 
 function FiltersPaneWithCustomProps<Values, Content>({
   containerWidth,
-  multiselectWidth,
   isSearchDisabled,
   isSearchAutosizeable,
   shouldShowSettingsButton,
@@ -141,7 +139,6 @@ function FiltersPaneWithCustomProps<Values, Content>({
     multiSelect: {
       name: 'multiSelect',
       type: 'multiSelect',
-      width: multiselectWidth,
       pageSize: 15,
       checkboxPosition,
       isGroupingEnabled,
@@ -163,7 +160,6 @@ function FiltersPaneWithCustomProps<Values, Content>({
       isGroupingEnabled,
       checkboxPosition,
       searchMaxLength: 12,
-      width: multiselectWidth,
       fetchOptions: (q?: string): Promise<Array<{ v: string }>> => {
         if (q === '' || q === 'undefined' || q === '123') {
           return new Promise((resolve) => setTimeout(() => resolve([])));
@@ -265,9 +261,6 @@ export default {
     containerWidth: {
       control: { type: 'range', min: 100, max: 1000, step: 100 },
     },
-    multiselectWidth: {
-      control: { type: 'range', min: 100, max: 400, step: 50 },
-    },
     checkboxPosition: {
       control: 'inline-radio',
       options: ['left', 'right'],
@@ -288,7 +281,6 @@ Default.args = {
   hasClearButton: true,
   isDisabled: false,
   containerWidth: 400,
-  multiselectWidth: 200,
   withFieldNameInLabel: true,
   isGroupingEnabled: true,
   checkboxPosition: 'left',

package/src/components/FiltersPane/components/FilterInterval/FilterInterval.styles.ts

@@ -1,3 +1,4 @@
+import cloneDeep from 'lodash-es/cloneDeep';
 import { colors, createThemedStyles, ITweakStyles } from '../../../../theme';
 import { IButtonStyles } from '../../../Button';
 import { IInputStyles } from '../../../Input';
@@ -49,7 +50,7 @@ export const inputStyles: IInputStyles = {
   },
 };
 
-export const clearButtonStyles = innerTextButtonStyles;
+export const clearButtonStyles = cloneDeep(innerTextButtonStyles);
 
 export type IFilterIntervalStyles = ITweakStyles<
   typeof useStyles,

package/src/components/FiltersPane/components/FilterSelect/FilterSelect.styles.ts

@@ -1,3 +1,4 @@
+import cloneDeep from 'lodash-es/cloneDeep';
 import { colors, createThemedStyles, helpers, ITweakStyles } from '../../../../theme';
 import { IButtonStyles } from '../../../Button';
 import { ISearchInputStyles } from '../../../SearchInput';
@@ -8,6 +9,7 @@ const LIST_GAP = 12;
 
 export const useStyles = createThemedStyles('FilterSelect', {
   root: {
+    width: 220,
     background: colors.CLASSIC_WHITE,
   },
 
@@ -127,7 +129,7 @@ export const searchInputStyles: ISearchInputStyles = {
   },
 };
 
-export const clearButtonStyles = innerTextButtonStyles;
+export const clearButtonStyles = cloneDeep(innerTextButtonStyles);
 
 export type IFilterSelectStyles = ITweakStyles<
   typeof useStyles,

package/src/components/FiltersPane/components/FilterSelect/FilterSelect.tsx

@@ -30,10 +30,6 @@ export interface IFilterSelectProps<Value> extends ICommonProps<IFilterSelectSty
    * @default false
    */
   isGroupingEnabled?: boolean;
-  /**
-   * @default `220px`
-   */
-  width?: string | number;
   localeKey?: IFilterLocaleKey;
   locale?: Partial<ISelectLocale>;
   options?: Value[];
@@ -54,7 +50,6 @@ export function FilterSelect<Value>({
   value,
   isSearchEnabled = false,
   isGroupingEnabled = false,
-  width = 220,
   localeKey,
   locale,
   onChange,
@@ -225,7 +220,7 @@ export function FilterSelect<Value>({
   }, []);
 
   return (
-    <div className={classes.root} style={{ width }} {...addDataAttributes(data)}>
+    <div className={classes.root} {...addDataAttributes(data)}>
       {isSearchEnabled && (
         <div className={classes.dropdownInput}>
           <SearchInput

package/src/components/FiltersPane/components/FilterWithDates/FilterWithDates.styles.ts

@@ -1,3 +1,4 @@
+import cloneDeep from 'lodash-es/cloneDeep';
 import { colors, createThemedStyles, ITweakStyles } from '../../../../theme';
 import { IButtonStyles } from '../../../Button';
 import { IDatePickerStyles } from '../../../DatePicker';
@@ -31,7 +32,7 @@ export const useStyles = createThemedStyles('FilterWithDates', {
   datepicker: {},
 });
 
-export const clearButtonStyles = innerTextButtonStyles;
+export const clearButtonStyles = cloneDeep(innerTextButtonStyles);
 
 export const backButtonStyles = innerTextButtonStyles;
 

package/src/components/FiltersPane/components/FiltersPaneSearch/FiltersPaneSearch.styles.ts

@@ -104,6 +104,7 @@ export const selectStyles: ISelectStyles = {
     borderBottomLeftRadius: 6,
     borderBottomRightRadius: 6,
     boxShadow: 'none',
+    width: '100%',
   },
 };
 

package/src/components/FiltersPane/components/FiltersPaneSearch/FiltersPaneSearch.tsx

@@ -7,7 +7,7 @@ import { Icon } from '../../../Icon';
 import { SearchInput } from '../../../SearchInput';
 import { getLocale } from '../../helpers';
 import { IFilterLocaleKey, IFiltersPaneSearchPayload, IPartialFilterLocale } from '../../types';
-import { FilterSelect, IFilterSelectProps } from '../FilterSelect';
+import { FilterSelect } from '../FilterSelect';
 import {
   useStyles,
   IFiltersPaneSearchStyles,
@@ -26,7 +26,6 @@ export interface IFiltersPaneSearchProps<Value> extends ICommonProps<IFiltersPan
   getValueView?: (value: Value) => ReactNode;
   getValueId?: (value: Value) => string;
   getValueString?: (value: Value) => string;
-  selectWidth?: IFilterSelectProps<Value>['width'];
   hasClearSelectButton?: boolean;
   isDisabled?: boolean;
   isSelectSearchEnabled?: boolean;
@@ -43,7 +42,6 @@ export function FiltersPaneSearch<Value>({
   getValueId,
   getValueView,
   getValueString,
-  selectWidth = '100%',
   hasClearSelectButton,
   isDisabled = false,
   isSelectSearchEnabled = true,
@@ -155,7 +153,6 @@ export function FiltersPaneSearch<Value>({
               localeKey={localeKey}
               locale={translates}
               onChange={handleFieldsChange}
-              width={selectWidth}
               isSearchEnabled={isSelectSearchEnabled}
               hasClearButton={hasClearSelectButton}
               testId={testId !== undefined ? `${testId}-dropdown` : undefined}

package/src/components/FiltersPane/types.ts

@@ -152,5 +152,5 @@ export type ISelectLocaleKey = keyof typeof SelectLocales;
 
 export type IFilterWithDateDatePickerProps = Omit<
   IDatePickerProps,
-  'onChange' | 'value' | 'locale' | 'months' | 'selectedDate' | 'tweakStyles' // TODO: rethink
+  'onChange' | 'value' | 'locale' | 'months' | 'selectedDate' | 'tweakStyles'
 >;

package/src/components/Flag/augment.d.ts

@@ -1 +1 @@
-declare module 'country-flag-icons/react/3x2';
+declare module 'country-flag-icons/react/3x2';

package/src/components/FlexibleTable/FlexibleTable.stories.tsx

@@ -315,18 +315,20 @@ const tweak: IFlexibleTableStyles = {
 };
 
 const Template: ComponentStory<typeof FlexibleTable<ITableContent>> = (args) => (
-  <FlexibleTable<ITableContent>
-    {...args}
-    uniqueField="contractCode"
-    expandableRowComponent={(item, _, close) =>
-      item.contractCode === 'OB_UT_M119' ? (
-        <div onClick={close}>всем привет :) {item.contractCode}</div>
-      ) : null
-    }
-    tweakStyles={tweak}
-    content={content}
-    config={config}
-  />
+  <div style={{ width: 500, overflow: 'auto' }}>
+    <FlexibleTable<ITableContent>
+      {...args}
+      uniqueField="contractCode"
+      expandableRowComponent={(item, _, close) =>
+        item.contractCode === 'OB_UT_M119' ? (
+          <div onClick={close}>всем привет :) {item.contractCode}</div>
+        ) : null
+      }
+      tweakStyles={tweak}
+      content={content}
+      config={config}
+    />
+  </div>
 );
 
 export const Default = Template.bind({});
@@ -334,6 +336,7 @@ export const Default = Template.bind({});
 Default.args = {
   isHorizontallyScrollable: true,
   isFirstColumnSticky: true,
+  isLoading: false,
 };
 
 Default.parameters = {

package/src/components/FlexibleTable/FlexibleTable.styles.ts

@@ -22,16 +22,6 @@ export const useStyles = createThemedStyles('FlexibleTable', {
     maxHeight: '100%',
   },
 
-  horizontallyScrolled: {
-    '& $cellSticky': {
-      boxShadow: '4px 0 4px rgba(0, 0, 0, 0.05)',
-    },
-
-    '& $headerSticky::before': {
-      boxShadow: '4px 0 4px rgba(0, 0, 0, 0.05)',
-    },
-  },
-
   loader: {
     position: 'sticky',
     left: 0,
@@ -75,6 +65,10 @@ export const useStyles = createThemedStyles('FlexibleTable', {
       pointerEvents: 'none',
       zIndex: 1,
       transition: ['box-shadow', '0.25s', 'ease-in-out'],
+
+      '[data-scrolled] &': {
+        boxShadow: '4px 0 4px rgba(0, 0, 0, 0.05)',
+      },
     },
 
     '&::after': {
@@ -96,6 +90,11 @@ export const useStyles = createThemedStyles('FlexibleTable', {
   headerSecond: {
     paddingLeft: STICKY_SHADOW_PADDING,
   },
+
+  skeleton: {
+    height: 21,
+    padding: [14, 7],
+  },
 });
 
 export type IFlexibleTableStyles = ITweakStyles<