@true-engineering/true-react-common-ui-kit 3.45.2 → 4.0.0-alpha1

package/src/components/DatePicker/components/DatePickerHeader/DatePickerHeader.styles.ts

@@ -1,88 +1,54 @@
-import { ITweakStyles, createThemedStyles } from '../../../../theme';
-import { ISelectStyles } from '../../../Select';
-
-const SELECT_PADDING_LEFT = 12;
-const SELECT_PADDING_RIGHT = 24;
-
-export const useStyles = createThemedStyles('DatePickerHeader', {
-  btn: {
-    width: 36,
-    height: 36,
-    padding: 8,
-    boxSizing: 'border-box',
-    border: 'none',
-    outline: 'none',
-
-    cursor: 'pointer',
-    marginLeft: 8,
-  },
-
-  select: {
-    height: 35,
-    fontSize: 16,
-    position: 'relative',
-  },
-
-  selectValue: {
-    fontSize: 16,
-    fontWeight: 'bold',
-    color: 'transparent',
-    pointerEvents: 'none',
-    paddingLeft: SELECT_PADDING_LEFT,
-    paddingRight: SELECT_PADDING_RIGHT,
-  },
-
-  selectControl: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-    height: '100%',
-  },
-
-  header: {
-    margin: 6,
-    display: 'flex',
-    alignItems: 'center',
-  },
-
-  buttons: {
-    flexShrink: 0,
-    marginLeft: 'auto',
-  },
-});
-
-export const selectStyles: ISelectStyles = {
-  tweakSelectList: {
-    cell: {
-      fontSize: 14,
-      minHeight: 35,
-    },
-  },
-
-  arrow: {
-    right: 0,
-    top: 9,
-    width: 16,
-    height: 16,
-  },
-
-  tweakInput: {
-    inputWrapper: {
-      height: 35,
-      border: 'none',
-    },
-
-    input: {
-      fontSize: 16,
-      fontWeight: 'bold',
-      paddingRight: SELECT_PADDING_RIGHT - 8,
-      paddingLeft: SELECT_PADDING_LEFT,
-    },
-  },
-};
-
-export type IDatePickerHeaderStyles = ITweakStyles<
-  typeof useStyles,
-  { tweakSelect: ISelectStyles }
->;
+import { createThemedStyles, ITweakStyles } from '../../../../theme';
+import { ISelectStyles } from '../../../Select';
+
+export const useStyles = createThemedStyles('DatePickerHeader', {
+  btn: {
+    width: 36,
+    height: 36,
+    padding: 8,
+    boxSizing: 'border-box',
+    border: 'none',
+    outline: 'none',
+    cursor: 'pointer',
+    marginLeft: 8,
+  },
+
+  header: {
+    margin: 6,
+    display: 'flex',
+    alignItems: 'center',
+  },
+
+  buttons: {
+    flexShrink: 0,
+    marginLeft: 'auto',
+  },
+});
+
+export const selectStyles: ISelectStyles = {
+  tweakSelectList: {
+    cell: {
+      fontSize: 14,
+      minHeight: 35,
+    },
+  },
+
+  tweakInput: {
+    tweakControlWrapper: {
+      controlWrapper: {
+        '--control-height': '35px',
+        border: 'none',
+      },
+    },
+
+    inputContent: {
+      fontSize: 16,
+      fontWeight: 'bold',
+    },
+  },
+};
+
+export type IDatePickerHeaderStyles = ITweakStyles<
+  typeof useStyles,
+  { tweakSelect: ISelectStyles }
+>;

package/src/components/DatePicker/components/DatePickerHeader/DatePickerHeader.tsx

@@ -1,89 +1,81 @@
-import { FC, useMemo } from 'react';
-import { ReactDatePickerCustomHeaderProps as BaseProps } from 'react-datepicker';
-import { getYear, getMonth } from 'date-fns';
-import { useTweakStyles } from '../../../../hooks';
-import { ICommonProps } from '../../../../types';
-import { Icon } from '../../../Icon';
-import { Select } from '../../../Select';
-import { useStyles, IDatePickerHeaderStyles, selectStyles } from './DatePickerHeader.styles';
-
-export interface IDatePickerHeaderProps
-  extends BaseProps,
-    Pick<ICommonProps<IDatePickerHeaderStyles>, 'tweakStyles'> {
-  months?: string[];
-}
-
-export const DatePickerHeader: FC<IDatePickerHeaderProps> = ({
-  date,
-  months = [],
-  tweakStyles,
-  prevMonthButtonDisabled,
-  nextMonthButtonDisabled,
-  changeYear,
-  changeMonth,
-  decreaseMonth,
-  increaseMonth,
-}) => {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const tweakSelectStyles = useTweakStyles({
-    innerStyles: selectStyles,
-    tweakStyles,
-    className: 'tweakSelect',
-    currentComponentName: 'DatePickerHeader',
-  });
-
-  const years = useMemo(
-    () => Array.from(Array(41)).map((_, i) => getYear(new Date()) - 30 + i),
-    [],
-  );
-
-  return (
-    <div className={classes.header}>
-      <div className={classes.select}>
-        <div className={classes.selectValue}>{months[getMonth(date)]}</div>
-        <div className={classes.selectControl}>
-          <Select
-            value={months[getMonth(date)]}
-            options={months}
-            dropdownIcon="chevron-down-small"
-            tweakStyles={tweakSelectStyles}
-            onChange={(value) => changeMonth(months.indexOf(value as string))}
-          />
-        </div>
-      </div>
-      <div className={classes.select}>
-        <div className={classes.selectValue}>{getYear(date)}</div>
-        <div className={classes.selectControl}>
-          <Select
-            value={getYear(date)}
-            options={years}
-            dropdownIcon="chevron-down-small"
-            tweakStyles={tweakSelectStyles}
-            onChange={(value) => changeYear(value as number)}
-          />
-        </div>
-      </div>
-
-      <div className={classes.buttons}>
-        <button
-          type="button"
-          className={classes.btn}
-          disabled={prevMonthButtonDisabled}
-          onClick={decreaseMonth}
-        >
-          <Icon type="chevron-left" />
-        </button>
-
-        <button
-          type="button"
-          className={classes.btn}
-          disabled={nextMonthButtonDisabled}
-          onClick={increaseMonth}
-        >
-          <Icon type="chevron-right" />
-        </button>
-      </div>
-    </div>
-  );
-};
+import { FC, useMemo } from 'react';
+import { ReactDatePickerCustomHeaderProps as BaseProps } from 'react-datepicker';
+import { getMonth, getYear } from 'date-fns';
+import { useTweakStyles } from '../../../../hooks';
+import { ICommonProps } from '../../../../types';
+import { Icon } from '../../../Icon';
+import { Select } from '../../../Select';
+import { IDatePickerHeaderStyles, selectStyles, useStyles } from './DatePickerHeader.styles';
+
+export interface IDatePickerHeaderProps
+  extends BaseProps,
+    Pick<ICommonProps<IDatePickerHeaderStyles>, 'tweakStyles'> {
+  months?: string[];
+}
+
+export const DatePickerHeader: FC<IDatePickerHeaderProps> = ({
+  date,
+  months = [],
+  tweakStyles,
+  prevMonthButtonDisabled,
+  nextMonthButtonDisabled,
+  changeYear,
+  changeMonth,
+  decreaseMonth,
+  increaseMonth,
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakSelectStyles = useTweakStyles({
+    innerStyles: selectStyles,
+    tweakStyles,
+    className: 'tweakSelect',
+    currentComponentName: 'DatePickerHeader',
+  });
+
+  const years = useMemo(
+    () => Array.from(Array(41)).map((_, i) => getYear(new Date()) - 30 + i),
+    [],
+  );
+
+  return (
+    <div className={classes.header}>
+      <Select
+        value={months[getMonth(date)]}
+        options={months}
+        dropdownIcon="chevron-down-small"
+        isAutoSized
+        tweakStyles={tweakSelectStyles}
+        onChange={(value) => changeMonth(months.indexOf(value as string))}
+      />
+      <Select
+        value={getYear(date)}
+        options={years}
+        dropdownIcon="chevron-down-small"
+        isAutoSized
+        tweakStyles={tweakSelectStyles}
+        onChange={(value) => changeYear(value as number)}
+      />
+
+      <div className={classes.buttons}>
+        <button
+          type="button"
+          className={classes.btn}
+          disabled={prevMonthButtonDisabled}
+          onClick={decreaseMonth}
+        >
+          <Icon type="chevron-left" />
+        </button>
+
+        <button
+          type="button"
+          className={classes.btn}
+          disabled={nextMonthButtonDisabled}
+          onClick={increaseMonth}
+        >
+          <Icon type="chevron-right" />
+        </button>
+      </div>
+    </div>
+  );
+};

package/src/components/DatePicker/components/DatePickerHeader/index.ts

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

package/src/components/DatePicker/components/PopperContainer/PopperContainer.tsx

@@ -1,6 +1,6 @@
-import { FC, ReactElement, ReactNode } from 'react';
-import { Portal } from 'react-overlays';
-
-export const PopperContainer: FC<{ children: ReactNode }> = ({ children }) => (
-  <Portal container={document.body}>{children as ReactElement}</Portal>
-);
+import { FC, ReactElement, ReactNode } from 'react';
+import { Portal } from 'react-overlays';
+
+export const PopperContainer: FC<{ children: ReactNode }> = ({ children }) => (
+  <Portal container={document.body}>{children as ReactElement}</Portal>
+);

package/src/components/DatePicker/components/PopperContainer/index.ts

@@ -1 +1 @@
-export * from './PopperContainer';
+export * from './PopperContainer';

package/src/components/DatePicker/components/index.ts

@@ -1,2 +1,2 @@
-export * from './DatePickerHeader';
-export * from './PopperContainer';
+export * from './DatePickerHeader';
+export * from './PopperContainer';

package/src/components/DatePicker/constants.ts

@@ -1,6 +1,6 @@
-import ReactDatePicker from 'react-datepicker';
-
-export const DEFAULT_DATE_FORMAT = 'dd.MM.yyyy';
-
-export const DatePickerComponent =
-  (ReactDatePicker as unknown as { default: typeof ReactDatePicker }).default ?? ReactDatePicker;
+import ReactDatePicker from 'react-datepicker';
+
+export const DEFAULT_DATE_FORMAT = 'dd.MM.yyyy';
+
+export const DatePickerComponent =
+  (ReactDatePicker as unknown as { default: typeof ReactDatePicker }).default ?? ReactDatePicker;

package/src/components/DatePicker/helpers.ts

@@ -1,23 +1,23 @@
-import { parse, format, isSameDay } from 'date-fns';
-import {
-  isEmpty,
-  isNotEmpty,
-  isStringNotEmpty,
-} from '@true-engineering/true-react-platform-helpers';
-import { EMPTY_DATE_INPUT_VALUE } from '../DateInput';
-
-export const getDateFormatter =
-  (dateFormat: string) =>
-  (date?: Date | null): string =>
-    isNotEmpty(date) ? format(date, dateFormat) : '';
-
-export const getDateValueParser =
-  (dateFormat: string) =>
-  (value: string): Date | null => {
-    const inputValue = value === EMPTY_DATE_INPUT_VALUE ? '' : value;
-    return isStringNotEmpty(inputValue) ? parse(value, dateFormat, new Date()) : null;
-  };
-
-export const areDatesEquals = (date1?: Date | null, date2?: Date | null): boolean =>
-  (isEmpty(date1) && isEmpty(date2)) ||
-  (isNotEmpty(date1) && isNotEmpty(date2) && isSameDay(date1, date2));
+import { parse, format, isSameDay } from 'date-fns';
+import {
+  isEmpty,
+  isNotEmpty,
+  isStringNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
+import { EMPTY_DATE_INPUT_VALUE } from '../DateInput';
+
+export const getDateFormatter =
+  (dateFormat: string) =>
+  (date?: Date | null): string =>
+    isNotEmpty(date) ? format(date, dateFormat) : '';
+
+export const getDateValueParser =
+  (dateFormat: string) =>
+  (value: string): Date | null => {
+    const inputValue = value === EMPTY_DATE_INPUT_VALUE ? '' : value;
+    return isStringNotEmpty(inputValue) ? parse(value, dateFormat, new Date()) : null;
+  };
+
+export const areDatesEquals = (date1?: Date | null, date2?: Date | null): boolean =>
+  (isEmpty(date1) && isEmpty(date2)) ||
+  (isNotEmpty(date1) && isNotEmpty(date2) && isSameDay(date1, date2));

package/src/components/DatePicker/index.ts

@@ -1,4 +1,4 @@
-export * from './DatePicker';
-export * from './types';
-export type { IDatePickerStyles } from './DatePicker.styles';
-export type { IDatePickerHeaderStyles } from './components';
+export * from './DatePicker';
+export * from './types';
+export type { IDatePickerStyles } from './DatePicker.styles';
+export type { IDatePickerHeaderStyles } from './components';

package/src/components/DatePicker/types.ts

@@ -1,48 +1,48 @@
-import { ReactDatePickerProps } from 'react-datepicker';
-import { IDateInputProps } from '../DateInput';
-
-export type IRange = [Date | null, Date | null] | null;
-
-export type IDatePickerBaseProps = Pick<
-  ReactDatePickerProps,
-  | 'startDate'
-  | 'endDate'
-  | 'minDate'
-  | 'maxDate'
-  | 'allowSameDay'
-  | 'disabledKeyboardNavigation'
-  | 'monthsShown'
-  | 'popperModifiers'
-  | 'popperPlacement'
-  | 'filterDate'
-  | 'dayClassName'
-  | 'calendarContainer'
-  | 'onCalendarOpen'
-  | 'onCalendarClose'
-  | 'onYearChange'
-  | 'onMonthChange'
-  | 'focusSelectedMonth'
-  | 'shouldCloseOnSelect'
-  | 'showPreviousMonths'
-  | 'todayButton'
-  | 'renderCustomHeader'
-  | 'customInputRef'
-  | 'preventOpenOnFocus'
-  | 'strictParsing'
-  | 'highlightDates'
-  | 'fixedHeight'
-  | 'excludeScrollbar'
-> &
-  Omit<
-    IDateInputProps,
-    | 'date'
-    | 'startDate'
-    | 'endDate'
-    | 'isRange'
-    | 'isActive'
-    | 'iconType'
-    | 'maxLength'
-    | 'onChange'
-    | 'onClick'
-    | 'tweakStyles'
-  >;
+import { ReactDatePickerProps } from 'react-datepicker';
+import { IDateInputProps } from '../DateInput';
+
+export type IRange = [Date | null, Date | null] | null;
+
+export type IDatePickerBaseProps = Pick<
+  ReactDatePickerProps,
+  | 'startDate'
+  | 'endDate'
+  | 'minDate'
+  | 'maxDate'
+  | 'allowSameDay'
+  | 'disabledKeyboardNavigation'
+  | 'monthsShown'
+  | 'popperModifiers'
+  | 'popperPlacement'
+  | 'filterDate'
+  | 'dayClassName'
+  | 'calendarContainer'
+  | 'onCalendarOpen'
+  | 'onCalendarClose'
+  | 'onYearChange'
+  | 'onMonthChange'
+  | 'focusSelectedMonth'
+  | 'shouldCloseOnSelect'
+  | 'showPreviousMonths'
+  | 'todayButton'
+  | 'renderCustomHeader'
+  | 'customInputRef'
+  | 'preventOpenOnFocus'
+  | 'strictParsing'
+  | 'highlightDates'
+  | 'fixedHeight'
+  | 'excludeScrollbar'
+> &
+  Omit<
+    IDateInputProps,
+    | 'date'
+    | 'startDate'
+    | 'endDate'
+    | 'isRange'
+    | 'isActive'
+    | 'icon'
+    | 'maxLength'
+    | 'onChange'
+    | 'onClick'
+    | 'tweakStyles'
+  >;

package/src/components/Description/Description.stories.tsx

@@ -1,27 +1,27 @@
-import { ComponentStory } from '@storybook/react';
-import { Description } from './Description';
-
-export default {
-  title: 'Data Display/Description',
-  component: Description,
-  argTypes: {
-    truncateIndex: {
-      control: { type: 'range', min: 20, max: 600, step: 10 },
-    },
-  },
-};
-
-const lorem =
-  'Lorem ipsum dolor, sit amet consectetur adipisicing. Alias necessitatibus quidem nobis molestiae dolor sed at, voluptatum nulla qui enim maiores consectetur dolorum atque odit id ratione pariatur ut nihil. http://google.com';
-
-const Template: ComponentStory<typeof Description> = (args) => <Description {...args} />;
-
-export const Default = Template.bind({});
-
-Default.args = {
-  text: lorem,
-  moreTitle: 'подробнее',
-  lessTitle: 'скрыть',
-  truncateIndex: 150,
-  isAlwaysOpen: false,
-};
+import { ComponentStory } from '@storybook/react';
+import { Description } from './Description';
+
+export default {
+  title: 'Data Display/Description',
+  component: Description,
+  argTypes: {
+    truncateIndex: {
+      control: { type: 'range', min: 20, max: 600, step: 10 },
+    },
+  },
+};
+
+const lorem =
+  'Lorem ipsum dolor, sit amet consectetur adipisicing. Alias necessitatibus quidem nobis molestiae dolor sed at, voluptatum nulla qui enim maiores consectetur dolorum atque odit id ratione pariatur ut nihil. http://google.com';
+
+const Template: ComponentStory<typeof Description> = (args) => <Description {...args} />;
+
+export const Default = Template.bind({});
+
+Default.args = {
+  text: lorem,
+  moreTitle: 'подробнее',
+  lessTitle: 'скрыть',
+  truncateIndex: 150,
+  isAlwaysOpen: false,
+};

package/src/components/Description/Description.styles.ts

@@ -1,30 +1,30 @@
-import { colors, ITweakStyles, createThemedStyles } from '../../theme';
-
-export const useStyles = createThemedStyles('Description', {
-  root: {},
-
-  button: {
-    cursor: 'pointer',
-    display: 'inline-block',
-    color: colors.FONT_MEDIUM,
-    marginTop: 18,
-    textTransform: 'capitalize',
-    borderBottom: [1, 'dashed', colors.FONT_MEDIUM],
-
-    '&:hover': {
-      color: colors.FONT_MAIN,
-    },
-  },
-
-  link: {
-    color: colors.FONT_MEDIUM,
-    textDecoration: 'none',
-    borderBottom: [1, 'dashed', colors.FONT_MEDIUM],
-
-    '&:hover': {
-      color: colors.FONT_MAIN,
-    },
-  },
-});
-
-export type IDescriptionStyles = ITweakStyles<typeof useStyles>;
+import { colors, ITweakStyles, createThemedStyles } from '../../theme';
+
+export const useStyles = createThemedStyles('Description', {
+  root: {},
+
+  button: {
+    cursor: 'pointer',
+    display: 'inline-block',
+    color: colors.FONT_MEDIUM,
+    marginTop: 18,
+    textTransform: 'capitalize',
+    borderBottom: [1, 'dashed', colors.FONT_MEDIUM],
+
+    '&:hover': {
+      color: colors.FONT_MAIN,
+    },
+  },
+
+  link: {
+    color: colors.FONT_MEDIUM,
+    textDecoration: 'none',
+    borderBottom: [1, 'dashed', colors.FONT_MEDIUM],
+
+    '&:hover': {
+      color: colors.FONT_MAIN,
+    },
+  },
+});
+
+export type IDescriptionStyles = ITweakStyles<typeof useStyles>;