@true-engineering/true-react-common-ui-kit 1.12.1 → 2.0.0

package/src/components/DatePicker/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/DatePickerHeader.tsx

@@ -1,94 +1,80 @@
-import { FC, useCallback, useMemo } from 'react';
-import { getYear, getMonth } from 'date-fns';
-import { Icon } from '../../Icon';
-import { Select } from '../../Select';
-import { useTheme } from '../../../hooks';
-
-import { DatePickerHeaderStyles, styles } from './DatePickerHeader.styles';
-
-export interface IDatePickerHeaderProps {
-  tweakStyles?: DatePickerHeaderStyles;
-  date: Date;
-  changeYear: (year: number) => void;
-  changeMonth: (month: number) => void;
-  decreaseMonth: () => void;
-  increaseMonth: () => void;
-  isPrevMonthButtonDisabled: boolean;
-  isNextMonthButtonDisabled: boolean;
-  months: string[];
-}
-
-export const DatePickerHeader: FC<IDatePickerHeaderProps> = ({
-  date,
-  changeYear,
-  changeMonth,
-  decreaseMonth,
-  increaseMonth,
-  isPrevMonthButtonDisabled,
-  isNextMonthButtonDisabled,
-  months,
-}) => {
-  const { classes, componentStyles } = useTheme('DatePickerHeader', styles);
-
-  const years = useMemo(
-    () =>
-      Array.from(Array(41)).map((_, i: number) => getYear(new Date()) - 30 + i),
-    [],
-  );
-
-  const getMonthNumber = useCallback(
-    (month: string): number => months.findIndex((m) => m === month),
-    [months],
-  );
-
-  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}
-            onChange={(value) => changeMonth(getMonthNumber(value as string))}
-            tweakStyles={componentStyles.tweakSelect}
-            dropdownIcon="chevron-down-small"
-          />
-        </div>
-      </div>
-      <div className={classes.select}>
-        <div className={classes.selectValue}>{getYear(date)}</div>
-        <div className={classes.selectControl}>
-          <Select
-            value={getYear(date)}
-            options={years}
-            onChange={(value) => {
-              changeYear(value as number);
-            }}
-            tweakStyles={componentStyles.tweakSelect}
-            dropdownIcon="chevron-down-small"
-          />
-        </div>
-      </div>
-
-      <div className={classes.buttons}>
-        <button
-          onClick={decreaseMonth}
-          disabled={isPrevMonthButtonDisabled}
-          className={classes.btn}
-          type="button"
-        >
-          <Icon type="chevron-left" />
-        </button>
-
-        <button
-          onClick={increaseMonth}
-          disabled={isNextMonthButtonDisabled}
-          className={classes.btn}
-          type="button"
-        >
-          <Icon type="chevron-right" />
-        </button>
-      </div>
-    </div>
-  );
-};
+import { FC, useMemo } from 'react';
+import { getYear, getMonth } from 'date-fns';
+import { ReactDatePickerCustomHeaderProps as BaseProps } from 'react-datepicker';
+import { Icon } from '../../Icon';
+import { Select } from '../../Select';
+import { useTheme } from '../../../hooks';
+
+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/index.ts

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

package/src/components/DatePicker/constants.ts

@@ -0,0 +1 @@
+export const DEFAULT_DATE_FORMAT = 'dd.MM.yyyy';

package/src/components/DatePicker/helpers.ts

@@ -0,0 +1,24 @@
+import { parse, format, isSameDay } from 'date-fns';
+import { isEmpty, isNotEmpty, isStringNotEmpty } from '../../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,3 @@
-export * from './DatePicker';
-export type { DatePickerStyles } from './DatePicker.styles';
-export type { DatePickerHeaderStyles } from './DatePickerHeader/DatePickerHeader.styles';
-export type { DatePickerInputStyles } from './DatePickerInput/DatePickerInput.styles';
+export * from './DatePicker';
+export type { DatePickerStyles } from './DatePicker.styles';
+export type { DatePickerHeaderStyles } from './DatePickerHeader';

package/src/components/DatePicker/types.ts

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

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

@@ -1,29 +1,29 @@
-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>;