@true-engineering/true-react-common-ui-kit 4.0.0-alpha7 → 4.0.0-alpha71

package/src/components/DateInput/DateInput.stories.tsx

@@ -1,14 +1,9 @@
-import { useEffect, useState } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { format, isValid } from 'date-fns';
-import { ComponentStory } from '@storybook/react';
-import { DateInput } from './DateInput';
+import { type Meta } from '@storybook/react';
+import { DateInput, IDateInputProps } from './DateInput';
 
-export default {
-  title: 'Inputs/DateInput',
-  component: DateInput,
-};
-
-const Template: ComponentStory<typeof DateInput> = ({ date, startDate, endDate, ...args }) => {
+const Story: FC<IDateInputProps> = ({ date, startDate, endDate, ...args }) => {
   const [value, setValue] = useState(date);
 
   const startDateValue = isValid(startDate)
@@ -35,27 +30,14 @@ const Template: ComponentStory<typeof DateInput> = ({ date, startDate, endDate,
   );
 };
 
-export const Default = Template.bind({});
-
-Default.args = {
-  date: '23.01.2023',
-  startDate: undefined,
-  endDate: undefined,
-  isRange: false,
-};
-
-Default.parameters = {
-  controls: {
-    exclude: [
-      'data',
-      'testId',
-      'tabIndex',
-      'onChange',
-      'onFocus',
-      'onBlur',
-      'onPaste',
-      'onIconClick',
-      'onKeyDown',
-    ],
+const meta: Meta<typeof Story> = {
+  title: 'Inputs/DateInput',
+  component: Story,
+  args: {
+    date: '23.01.2023',
+    isRange: false,
   },
 };
+
+export default meta;
+export const Default = {};

package/src/components/DateInput/DateInput.tsx

@@ -1,15 +1,17 @@
-import { ChangeEvent, forwardRef, MouseEvent } from 'react';
+import { ChangeEvent, forwardRef } from 'react';
 import clsx from 'clsx';
-import { addDataAttributes } from '../../helpers';
+import { addDataAttributes } from '@true-engineering/true-react-platform-helpers';
 import { useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
+import { IReplaceTweakStylesProps } from '../../types';
 import { IChangeInputEvent, IInputProps, Input } from '../Input';
 import { EMPTY_DATE_INPUT_VALUE, EMPTY_DATE_RANGE_INPUT_VALUE } from './constants';
 import { IDateInputStyles, useStyles } from './DateInput.styles';
 
 export interface IDateInputProps
-  extends Omit<IInputProps, 'value' | 'beforeMaskedStateChange' | 'onChange' | 'tweakStyles'>,
-    ICommonProps<IDateInputStyles> {
+  extends Omit<
+    IReplaceTweakStylesProps<IInputProps, IDateInputStyles>,
+    'value' | 'beforeMaskedStateChange' | 'onChange'
+  > {
   date?: string;
   /** @default  '' */
   startDate?: string;
@@ -18,73 +20,70 @@ export interface IDateInputProps
   className?: string;
   /** @default false */
   isRange?: boolean;
-  onClick?: (event: MouseEvent<HTMLDivElement>) => void;
   // react-datepicker ожидает event первым аргументом
   onChange?: (event: IChangeInputEvent, value: string) => void;
 }
 
-export const DateInput = forwardRef<HTMLInputElement, IDateInputProps>(
-  (
-    {
-      date,
-      startDate = '',
-      endDate = '',
-      mask,
-      className,
-      placeholder,
-      data,
-      isRange = false,
-      tweakStyles,
-      onClick,
-      onChange,
-      ...inputProps
-    },
-    ref,
-  ) => {
-    const classes = useStyles({ theme: tweakStyles });
+export const DateInput = forwardRef<HTMLInputElement, IDateInputProps>(function DateInput(
+  {
+    date,
+    startDate = '',
+    endDate = '',
+    mask,
+    className,
+    placeholder,
+    data,
+    isRange = false,
+    tweakStyles,
+    onClick,
+    onChange,
+    ...inputProps
+  },
+  ref,
+) {
+  const classes = useStyles({ tweakStyles });
 
-    const tweakInputStyles = useTweakStyles({
-      tweakStyles,
-      className: 'tweakInput',
-      currentComponentName: 'DateInput',
-    });
+  const tweakInputStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakInput',
+    currentComponentName: 'DateInput',
+  });
 
-    const beforeMaskedStateChange: IInputProps['beforeMaskedStateChange'] = ({ nextState }) => {
-      // Если в инпуте отсутствует введенное значение, то выставляем
-      // пустую строку для корректной работы react-datepicker
-      if (
-        nextState.value === EMPTY_DATE_INPUT_VALUE ||
-        nextState.value === EMPTY_DATE_RANGE_INPUT_VALUE
-      ) {
-        return { value: '', selection: { start: 0, end: 0 } };
-      }
-      return nextState;
-    };
+  const beforeMaskedStateChange: IInputProps['beforeMaskedStateChange'] = ({ nextState }) => {
+    // Если в инпуте отсутствует введенное значение, то выставляем
+    // пустую строку для корректной работы react-datepicker
+    if (
+      nextState.value === EMPTY_DATE_INPUT_VALUE ||
+      nextState.value === EMPTY_DATE_RANGE_INPUT_VALUE
+    ) {
+      return { value: '', selection: { start: 0, end: 0 } };
+    }
+    return nextState;
+  };
 
-    const handleChange: IInputProps['onChange'] = (value, event) => {
-      // Событие click срабатывает только при нажатии на кнопку очистки
-      if (event.type === 'click') {
-        // react-datepicker ожидает пустую строку в event.target.value
-        (event as ChangeEvent<HTMLInputElement>).target.value = '';
-      }
-      onChange?.(event, value);
-    };
+  const handleChange: IInputProps['onChange'] = (value, event) => {
+    // Событие click срабатывает только при нажатии на кнопку очистки
+    if (event.type === 'click') {
+      // react-datepicker ожидает пустую строку в event.target.value
+      (event as ChangeEvent<HTMLInputElement>).target.value = '';
+    }
+    onChange?.(event, value);
+  };
 
-    return (
-      <div className={clsx(classes.root, className)} onClick={onClick} {...addDataAttributes(data)}>
-        <Input
-          {...inputProps}
-          ref={ref}
-          value={isRange ? `${startDate}${endDate}` : date}
-          mask={mask ?? (isRange ? '99.99.9999 - 99.99.9999' : '99.99.9999')}
-          placeholder={
-            placeholder ?? (isRange ? EMPTY_DATE_RANGE_INPUT_VALUE : EMPTY_DATE_INPUT_VALUE)
-          }
-          tweakStyles={tweakInputStyles}
-          onChange={handleChange}
-          beforeMaskedStateChange={beforeMaskedStateChange}
-        />
-      </div>
-    );
-  },
-);
+  return (
+    <div className={clsx(classes.root, className)} {...addDataAttributes(data)} onClick={onClick}>
+      <Input
+        {...inputProps}
+        ref={ref}
+        value={isRange ? `${startDate}${endDate}` : date}
+        mask={mask ?? (isRange ? '99.99.9999 - 99.99.9999' : '99.99.9999')}
+        placeholder={
+          placeholder ?? (isRange ? EMPTY_DATE_RANGE_INPUT_VALUE : EMPTY_DATE_INPUT_VALUE)
+        }
+        tweakStyles={tweakInputStyles}
+        onChange={handleChange}
+        beforeMaskedStateChange={beforeMaskedStateChange}
+      />
+    </div>
+  );
+});

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

@@ -1,7 +1,7 @@
-import { useState } from 'react';
-import ru from 'date-fns/locale/ru';
-import { ComponentStory } from '@storybook/react';
-import { DatePicker } from './DatePicker';
+import { FC, useState } from 'react';
+import { ru } from 'date-fns/locale';
+import { type Meta } from '@storybook/react';
+import { DatePicker, IDatePickerProps } from './DatePicker';
 
 const months = [
   'Январь',
@@ -18,19 +18,9 @@ const months = [
   'Декабрь',
 ];
 
-export default {
-  title: 'Inputs/DatePicker',
-  component: DatePicker,
-};
-
-const Template: ComponentStory<typeof DatePicker> = (args) => {
+const Story: FC<IDatePickerProps> = (args) => {
   const [date, setDate] = useState<Date | null>(null);
 
-  const [startDate, setStartDate] = useState<Date | null>(
-    args.startDate ? new Date(args.startDate) : null,
-  );
-  const [endDate, setEndDate] = useState<Date | null>(args.endDate ? new Date(args.endDate) : null);
-
   return (
     <div
       style={{
@@ -50,39 +40,25 @@ const Template: ComponentStory<typeof DatePicker> = (args) => {
           testId="datepicker"
           months={months}
           selectedDate={date}
-          startDate={startDate}
-          endDate={endDate}
+          minDate={new Date()}
           onChangeDate={setDate}
-          onChangeRange={(dates) => {
-            setStartDate(dates?.[0] ?? null);
-            setEndDate(dates?.[1] ?? null);
-          }}
         />
       </div>
     </div>
   );
 };
 
-export const Default = Template.bind({});
-
-Default.args = {
-  label: 'Дата',
-  isRange: false,
-  isClearable: true,
-  shouldRenderPopperInBody: false,
-};
-
-Default.parameters = {
-  controls: {
-    exclude: [
-      'data',
-      'testId',
-      'tabIndex',
-      'onFocus',
-      'onBlur',
-      'onPaste',
-      'onIconClick',
-      'onKeyDown',
-    ],
+const meta: Meta<typeof Story> = {
+  title: 'Inputs/DatePicker',
+  component: Story,
+  args: {
+    label: 'Дата',
+    isRange: false,
+    isClearable: true,
+    shouldRenderPopperInBody: false,
+    popperPlacement: 'bottom-start',
   },
 };
+
+export default meta;
+export const Default = {};

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

@@ -1,4 +1,4 @@
-import { ITweakStyles, createThemedStyles } from '../../theme';
+import { createThemedStyles, ITweakStyles } from '../../theme';
 import { IDateInputStyles } from '../DateInput';
 
 export const useStyles = createThemedStyles('DatePicker', {
@@ -9,6 +9,8 @@ export const useStyles = createThemedStyles('DatePicker', {
 
   day: {},
 
+  dayInner: {},
+
   datepicker: {},
 
   popper: {