@true-engineering/true-react-common-ui-kit 2.3.2 → 2.4.0

package/src/components/DatePicker/{DatePickerHeader → components/DatePickerHeader}/DatePickerHeader.styles.ts

@@ -1,84 +1,84 @@
-import { ComponentStyles } from '../../../types';
-
-const SELECT_PADDING_LEFT = 12;
-const SELECT_PADDING_RIGHT = 24;
-
-export const styles = {
-  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',
-  },
-
-  tweakSelect: {
-    list: {
-      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 DatePickerHeaderStyles = ComponentStyles<typeof styles>;
+import { ComponentStyles } from '../../../../types';
+
+const SELECT_PADDING_LEFT = 12;
+const SELECT_PADDING_RIGHT = 24;
+
+export const styles = {
+  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',
+  },
+
+  tweakSelect: {
+    list: {
+      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 DatePickerHeaderStyles = ComponentStyles<typeof styles>;

package/src/components/DatePicker/{DatePickerHeader → components/DatePickerHeader}/DatePickerHeader.tsx

@@ -1,79 +1,79 @@
-import { FC, useMemo } from 'react';
-import { ReactDatePickerCustomHeaderProps as BaseProps } from 'react-datepicker';
-import { getYear, getMonth } from 'date-fns';
-import { useTheme } from '../../../hooks';
-import { Icon } from '../../Icon';
-import { Select } from '../../Select';
-import { DatePickerHeaderStyles, styles } from './DatePickerHeader.styles';
-
-export interface IDatePickerHeaderProps extends BaseProps {
-  months?: string[];
-  tweakStyles?: DatePickerHeaderStyles;
-}
-
-export const DatePickerHeader: FC<IDatePickerHeaderProps> = ({
-  date,
-  months = [],
-  prevMonthButtonDisabled,
-  nextMonthButtonDisabled,
-  changeYear,
-  changeMonth,
-  decreaseMonth,
-  increaseMonth,
-}) => {
-  const { classes, componentStyles } = useTheme('DatePickerHeader', styles);
-
-  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={componentStyles.tweakSelect}
-            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={componentStyles.tweakSelect}
-            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 { getYear, getMonth } from 'date-fns';
+import { useTheme } from '../../../../hooks';
+import { Icon } from '../../../Icon';
+import { Select } from '../../../Select';
+import { DatePickerHeaderStyles, styles } from './DatePickerHeader.styles';
+
+export interface IDatePickerHeaderProps extends BaseProps {
+  months?: string[];
+  tweakStyles?: DatePickerHeaderStyles;
+}
+
+export const DatePickerHeader: FC<IDatePickerHeaderProps> = ({
+  date,
+  months = [],
+  prevMonthButtonDisabled,
+  nextMonthButtonDisabled,
+  changeYear,
+  changeMonth,
+  decreaseMonth,
+  increaseMonth,
+}) => {
+  const { classes, componentStyles } = useTheme('DatePickerHeader', styles);
+
+  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={componentStyles.tweakSelect}
+            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={componentStyles.tweakSelect}
+            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>
+  );
+};

package/src/components/DatePicker/{DatePickerHeader → components/DatePickerHeader}/index.ts

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

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

@@ -0,0 +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>
+);

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

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

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

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

package/src/components/DatePicker/constants.ts

@@ -1 +1,6 @@
-export const DEFAULT_DATE_FORMAT = 'dd.MM.yyyy';
+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,3 +1,4 @@
-export * from './DatePicker';
-export type { DatePickerStyles } from './DatePicker.styles';
-export type { DatePickerHeaderStyles } from './DatePickerHeader';
+export * from './DatePicker';
+export * from './types';
+export type { DatePickerStyles } from './DatePicker.styles';
+export type { DatePickerHeaderStyles } from './components';

package/src/components/DatePicker/types.ts

@@ -1,45 +1,45 @@
-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'
-> &
-  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'
+> &
+  Omit<
+    IDateInputProps,
+    | 'date'
+    | 'startDate'
+    | 'endDate'
+    | 'isRange'
+    | 'isActive'
+    | 'iconType'
+    | '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: '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: '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,31 +1,31 @@
-import { colors } from '../../theme';
-import { ComponentStyles } from '../../types';
-
-export const styles = {
-  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 DescriptionStyles = ComponentStyles<typeof styles>;
+import { colors } from '../../theme';
+import { ComponentStyles } from '../../types';
+
+export const styles = {
+  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 DescriptionStyles = ComponentStyles<typeof styles>;