@true-engineering/true-react-common-ui-kit 4.0.0-alpha4 → 4.0.0-alpha40

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

@@ -1,295 +1,301 @@
-import { ReactNode, useState } from 'react';
-import { ComponentStory } from '@storybook/react';
-import { IMultiSelectListValues } from '../MultiSelectList';
-import { FiltersPane, IFiltersPaneProps } from './FiltersPane';
-import { FilterSelect } from './components';
-import { ConfigType, IDatePeriod, IFiltersPaneSearchPayload, IPeriod } from './types';
-
-const LONG_STRING = 'or veeeeeeeeery looooooooooooooooooooooooooooooooooooooooong';
-
-const convertVToString = (val: { v: string }): string => val.v;
-const convertVToNode = (val: { v: string }): ReactNode => (
-  <b>
-    <i>{val.v}</i>
-  </b>
-);
-const fieldTranslates = {
-  interval: 'Interval',
-  name: 'Name',
-};
-
-const myPeriodGetter = (): IDatePeriod => ({
-  from: null,
-  to: null,
-});
-
-function convertFieldToString<T>(v: keyof T) {
-  return fieldTranslates[v as keyof typeof fieldTranslates];
-}
-
-const selectOptions = [
-  LONG_STRING,
-  '2',
-  '3',
-  '4',
-  '5',
-  '6',
-  '7',
-  '8',
-  '22',
-  '222',
-  '2222',
-  '22222',
-  '222222',
-  '22222222',
-  '234',
-];
-
-const fetchOptionsMock = [
-  'select',
-  'option',
-  'can be',
-  'short',
-  LONG_STRING,
-  'opti433on',
-  'can44 be',
-  'sho44rt',
-  'or vee444ee',
-];
-
-// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
-type ConfigValues = {
-  name: string;
-  date: IPeriod;
-  select: string;
-  multiSelect: string;
-  multiSelectWithSearch: IMultiSelectListValues<{ v: string }>;
-  interval: number[];
-  isActive: boolean;
-  selectSearch: string;
-  custom: string;
-};
-
-interface IFiltersPaneWithCustomProps<Values, Content> extends IFiltersPaneProps<Values, Content> {
-  containerWidth: number;
-  isSearchDisabled: boolean;
-  shouldShowSettingsButton: boolean;
-  withFieldNameInLabel: boolean;
-  isGroupingEnabled: boolean;
-  checkboxPosition: 'left' | 'right';
-  isClearableFields: boolean;
-}
-
-function FiltersPaneWithCustomProps<Values, Content>({
-  containerWidth,
-  isSearchDisabled,
-  shouldShowSettingsButton,
-  withFieldNameInLabel,
-  isGroupingEnabled,
-  checkboxPosition,
-  isClearableFields,
-  ...args
-}: IFiltersPaneWithCustomProps<Values, Content>) {
-  const config: ConfigType<ConfigValues> = {
-    name: {
-      name: 'name',
-      type: 'select',
-      isClearable: isClearableFields,
-      options: selectOptions,
-      getValueView: (v: unknown) => v + '123',
-      getSelectedValueView: (v: unknown) => v + '1234',
-    },
-
-    select: {
-      name: 'selectWithGrouping',
-      type: 'select',
-      isSearchEnabled: true,
-      isGroupingEnabled: true,
-      isClearable: isClearableFields,
-      options: selectOptions,
-    },
-
-    selectSearch: {
-      name: 'selectSearch',
-      type: 'select',
-      requiredFilledFilters: ['name'],
-      locale: {
-        searchPlaceholder: 'Фу',
-      },
-      isSearchEnabled: true,
-      isClearable: isClearableFields,
-      options: selectOptions,
-    },
-
-    date: {
-      name: 'date',
-      type: 'dateRange',
-      locale: {
-        periods: {
-          MINE: 'Вот такой',
-        },
-      },
-      periods: [
-        'THIS_MONTH',
-        'LAST_MONTH',
-        'THIS_YEAR',
-        'LAST_YEAR',
-        ['MINE', myPeriodGetter],
-        'CUSTOM',
-      ],
-      isClearable: isClearableFields,
-    },
-
-    multiSelect: {
-      name: 'multiSelect',
-      type: 'multiSelect',
-      pageSize: 15,
-      checkboxPosition,
-      isGroupingEnabled,
-      isClearable: isClearableFields,
-      fetchOptions: (_q = '', p = 0) => {
-        if (p > 1) {
-          return Promise.resolve([]);
-        }
-        if (p === 1) {
-          return Promise.resolve(fetchOptionsMock);
-        }
-        return Promise.resolve(fetchOptionsMock);
-      },
-    },
-
-    multiSelectWithSearch: {
-      name: 'multiSelectWithSearch',
-      type: 'multiSelect',
-      isSearchEnabled: true,
-      isGroupingEnabled,
-      isClearable: isClearableFields,
-      checkboxPosition,
-      searchMaxLength: 12,
-      fetchOptions: (q?: string): Promise<Array<{ v: string }>> => {
-        if (q === '' || q === 'undefined' || q === '123') {
-          return new Promise((resolve) => setTimeout(() => resolve([])));
-        }
-        return new Promise((resolve) =>
-          setTimeout(
-            () =>
-              resolve([
-                {
-                  v: LONG_STRING,
-                },
-                { v: '2' },
-                { v: '3' },
-                { v: '4' },
-                { v: '5' },
-                { v: '6' },
-                { v: '7' },
-              ]),
-            1000,
-          ),
-        );
-      },
-      getValueId: convertVToString,
-      getValueView: convertVToNode,
-    },
-
-    interval: {
-      name: 'Сумма',
-      type: 'interval',
-      withFieldNameInLabel,
-      canBeFloat: true,
-      isClearable: isClearableFields,
-    },
-
-    isActive: {
-      name: 'isActive',
-      type: 'boolean',
-      isClearable: isClearableFields,
-    },
-
-    custom: {
-      type: 'custom',
-      name: 'Custom',
-      isClearable: isClearableFields,
-      options: [LONG_STRING, '2', '3'],
-      component: ({ filter, ...props }) => <FilterSelect {...props} {...filter} />,
-    },
-  };
-
-  const [values, setValues] = useState<Partial<ConfigValues>>({} as ConfigValues);
-  const [searchValue, setSearchValue] = useState<
-    IFiltersPaneSearchPayload<keyof ConfigValues> | undefined
-  >();
-
-  return (
-    <div
-      style={{
-        backgroundColor: 'white',
-        padding: 20,
-        border: '1px dotted rgba(0,0,0,.2)',
-        width: containerWidth,
-      }}
-    >
-      <FiltersPane<ConfigValues>
-        {...args}
-        search={{
-          field: searchValue?.field as keyof ConfigValues,
-          value: searchValue?.value,
-          fields: ['interval', 'name'] as Array<keyof ConfigValues>,
-          getValueView: convertFieldToString,
-          onChange: setSearchValue,
-          isDisabled: isSearchDisabled,
-        }}
-        enabledFilters={[
-          'name',
-          'date',
-          'select',
-          'multiSelect',
-          'multiSelectWithSearch',
-          'interval',
-          'isActive',
-          'selectSearch',
-          'custom',
-        ]}
-        filtersConfig={config}
-        values={values}
-        localeKey="ru"
-        locale={{ searchPlaceholder: 'Поиск' }}
-        onChangeFilters={setValues}
-        onSettingsButtonClick={shouldShowSettingsButton ? () => null : undefined}
-        testId="filters-pane"
-      />
-    </div>
-  );
-}
-
-export default {
-  title: 'Table/FiltersPane',
-  component: FiltersPaneWithCustomProps,
-  argTypes: {
-    containerWidth: {
-      control: { type: 'range', min: 100, max: 1000, step: 100 },
-    },
-    checkboxPosition: {
-      control: 'inline-radio',
-      options: ['left', 'right'],
-    },
-  },
-};
-
-const Template: ComponentStory<typeof FiltersPaneWithCustomProps> = (args) => (
-  <FiltersPaneWithCustomProps {...args} />
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  shouldShowSettingsButton: false,
-  isSearchDisabled: false,
-  hasClearButton: true,
-  isClearableFields: false,
-  isDisabled: false,
-  containerWidth: 400,
-  withFieldNameInLabel: true,
-  isGroupingEnabled: true,
-  checkboxPosition: 'left',
-};
+import { ReactNode, useState } from 'react';
+import { ComponentStory } from '@storybook/react';
+import { IMultiSelectListValues } from '../MultiSelectList';
+import { FiltersPane, IFiltersPaneProps } from './FiltersPane';
+import { FilterSelect } from './components';
+import { ConfigType, IDatePeriod, IFiltersPaneSearchPayload, IPeriod } from './types';
+
+const LONG_STRING = 'or veeeeeeeeery looooooooooooooooooooooooooooooooooooooooong';
+
+const convertVToString = (val: { v: string }): string => val.v;
+const convertVToNode = (val: { v: string }): ReactNode => (
+  <b>
+    <i>{val.v}</i>
+  </b>
+);
+const fieldTranslates = {
+  interval: 'Interval',
+  name: 'Name',
+};
+
+const myPeriodGetter = (): IDatePeriod => ({
+  from: null,
+  to: null,
+});
+
+function convertFieldToString<T>(v: keyof T) {
+  return fieldTranslates[v as keyof typeof fieldTranslates];
+}
+
+const selectOptions = [
+  LONG_STRING,
+  '2',
+  '3',
+  '4',
+  '5',
+  '6',
+  '7',
+  '8',
+  '22',
+  '222',
+  '2222',
+  '22222',
+  '222222',
+  '22222222',
+  '234',
+];
+
+const fetchOptionsMock = [
+  'select',
+  'option',
+  'can be',
+  'short',
+  LONG_STRING,
+  'opti433on',
+  'can44 be',
+  'sho44rt',
+  'or vee444ee',
+];
+
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+type ConfigValues = {
+  name: string;
+  date: IPeriod;
+  select: string;
+  multiSelect: string;
+  multiSelectWithSearch: IMultiSelectListValues<{ v: string }>;
+  interval: number[];
+  isActive: boolean;
+  selectSearch: string;
+  custom: string;
+};
+
+interface IFiltersPaneWithCustomProps<Values extends Record<string, unknown>, Content>
+  extends IFiltersPaneProps<Values, Content> {
+  containerWidth: number;
+  isSearchDisabled: boolean;
+  shouldShowSettingsButton: boolean;
+  withFieldNameInLabel: boolean;
+  isGroupingEnabled: boolean;
+  checkboxPosition: 'left' | 'right';
+  isClearableFields: boolean;
+  isSearchAutoSized: boolean;
+}
+
+function FiltersPaneWithCustomProps<Values extends Record<string, unknown>, Content>({
+  containerWidth,
+  isSearchDisabled,
+  shouldShowSettingsButton,
+  withFieldNameInLabel,
+  isGroupingEnabled,
+  checkboxPosition,
+  isClearableFields,
+  isSearchAutoSized,
+  ...args
+}: IFiltersPaneWithCustomProps<Values, Content>) {
+  const config: ConfigType<ConfigValues> = {
+    name: {
+      name: 'name',
+      type: 'select',
+      isClearable: isClearableFields,
+      options: selectOptions,
+      getValueView: (v: unknown) => v + '123',
+      getSelectedValueView: (v: unknown) => v + '1234',
+    },
+
+    select: {
+      name: 'selectWithGrouping',
+      type: 'select',
+      isSearchEnabled: true,
+      isGroupingEnabled: true,
+      isClearable: isClearableFields,
+      options: selectOptions,
+    },
+
+    selectSearch: {
+      name: 'selectSearch',
+      type: 'select',
+      requiredFilledFilters: ['name'],
+      locale: {
+        searchPlaceholder: 'Фу',
+      },
+      isSearchEnabled: true,
+      isClearable: isClearableFields,
+      options: selectOptions,
+    },
+
+    date: {
+      name: 'date',
+      type: 'dateRange',
+      locale: {
+        periods: {
+          MINE: 'Вот такой',
+        },
+      },
+      periods: [
+        'THIS_MONTH',
+        'LAST_MONTH',
+        'THIS_YEAR',
+        'LAST_YEAR',
+        ['MINE', myPeriodGetter],
+        'CUSTOM',
+      ],
+      isClearable: isClearableFields,
+    },
+
+    multiSelect: {
+      name: 'multiSelect',
+      type: 'multiSelect',
+      pageSize: 15,
+      checkboxPosition,
+      isGroupingEnabled,
+      isClearable: isClearableFields,
+      fetchOptions: (_q = '', p = 0) => {
+        if (p > 1) {
+          return Promise.resolve([]);
+        }
+        if (p === 1) {
+          return Promise.resolve(fetchOptionsMock);
+        }
+        return Promise.resolve(fetchOptionsMock);
+      },
+    },
+
+    multiSelectWithSearch: {
+      name: 'multiSelectWithSearch',
+      type: 'multiSelect',
+      isSearchEnabled: true,
+      isGroupingEnabled,
+      isClearable: isClearableFields,
+      checkboxPosition,
+      searchMaxLength: 12,
+      fetchOptions: (q?: string): Promise<Array<{ v: string }>> => {
+        if (q === '' || q === 'undefined' || q === '123') {
+          return new Promise((resolve) => setTimeout(() => resolve([])));
+        }
+        return new Promise((resolve) =>
+          setTimeout(
+            () =>
+              resolve([
+                {
+                  v: LONG_STRING,
+                },
+                { v: '2' },
+                { v: '3' },
+                { v: '4' },
+                { v: '5' },
+                { v: '6' },
+                { v: '7' },
+              ]),
+            1000,
+          ),
+        );
+      },
+      getValueId: convertVToString,
+      getValueView: convertVToNode,
+    },
+
+    interval: {
+      name: 'Сумма',
+      type: 'interval',
+      withFieldNameInLabel,
+      canBeFloat: true,
+      isClearable: isClearableFields,
+    },
+
+    isActive: {
+      name: 'isActive',
+      type: 'boolean',
+      isClearable: isClearableFields,
+    },
+
+    custom: {
+      type: 'custom',
+      name: 'Custom',
+      isClearable: isClearableFields,
+      options: [LONG_STRING, '2', '3'],
+      component: ({ filter, ...props }) => <FilterSelect {...props} {...filter} />,
+    },
+  };
+
+  const [values, setValues] = useState<Partial<ConfigValues>>({} as ConfigValues);
+  const [searchValue, setSearchValue] = useState<
+    IFiltersPaneSearchPayload<keyof ConfigValues> | undefined
+  >();
+
+  return (
+    <div
+      style={{
+        backgroundColor: 'white',
+        padding: 20,
+        border: '1px dotted rgba(0,0,0,.2)',
+        width: containerWidth,
+      }}
+    >
+      <FiltersPane<ConfigValues>
+        {...args}
+        search={{
+          field: searchValue?.field as keyof ConfigValues,
+          value: searchValue?.value,
+          fields: ['interval', 'name'] as Array<keyof ConfigValues>,
+          getValueView: convertFieldToString,
+          onChange: setSearchValue,
+          isDisabled: isSearchDisabled,
+          isAutoSized: isSearchAutoSized,
+        }}
+        enabledFilters={[
+          'name',
+          'date',
+          'select',
+          'multiSelect',
+          'multiSelectWithSearch',
+          'interval',
+          'isActive',
+          'selectSearch',
+          'custom',
+        ]}
+        filtersConfig={config}
+        values={values}
+        localeKey="ru"
+        locale={{ searchPlaceholder: 'Поиск' }}
+        onChangeFilters={setValues}
+        onSettingsButtonClick={shouldShowSettingsButton ? () => null : undefined}
+        testId="filters-pane"
+      />
+    </div>
+  );
+}
+
+export default {
+  title: 'Table/FiltersPane',
+  component: FiltersPaneWithCustomProps,
+  argTypes: {
+    containerWidth: {
+      control: { type: 'range', min: 100, max: 1000, step: 100 },
+    },
+    checkboxPosition: {
+      control: 'inline-radio',
+      options: ['left', 'right'],
+    },
+  },
+};
+
+const Template: ComponentStory<typeof FiltersPaneWithCustomProps> = (args) => (
+  <FiltersPaneWithCustomProps {...args} />
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  shouldShowSettingsButton: false,
+  isSearchDisabled: false,
+  hasClearButton: true,
+  isClearableFields: false,
+  isDisabled: false,
+  shouldRenderDataId: false,
+  containerWidth: 400,
+  withFieldNameInLabel: true,
+  isGroupingEnabled: true,
+  checkboxPosition: 'left',
+  isSearchAutoSized: false,
+};