nntc-ui 0.2.4 → 0.2.6

package/src/components/common/DateTime/DateTime.stories.tsx

@@ -0,0 +1,249 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import { useState } from 'react';
+import { DetailedHTMLProps, InputHTMLAttributes } from 'react';
+
+import { UiProps } from '@models/UiProps';
+
+import { DateTime } from './DateTime';
+
+dayjs.extend(utc);
+
+type Props = UiProps<{
+  variant?: 'filled' | 'filledBlack' | 'outlined';
+  isPeriod?: boolean;
+  valueType?: 'date' | 'year' | 'dateTime';
+  componentSize?: 'small' | 'medium' | 'large' | 'extraLarge';
+  fullWidth?: boolean;
+  placeholder?: string;
+  values?: (string | undefined)[];
+  defaultValues?: (string | undefined)[];
+  onClear?: () => void;
+  onValueChange?: (values: (string | undefined)[]) => void;
+}> &
+  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+
+const meta: Meta<typeof DateTime> = {
+  title: 'Components/DateTime',
+  component: DateTime,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['filled', 'filledBlack', 'outlined'],
+      description: 'Вариант отображения компонента',
+    },
+    componentSize: {
+      control: 'select',
+      options: ['small', 'medium', 'large', 'extraLarge'],
+      description: 'Размер компонента',
+    },
+    label: {
+      control: 'text',
+      description: 'Заголовок компонента',
+    },
+    fullWidth: {
+      control: 'boolean',
+      description: 'Растянуть на всю ширину',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Текст плейсхолдера',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Отключить компонент',
+    },
+    onValueChange: {
+      action: 'changed',
+      description: 'Обработчик изменения значения',
+    },
+    onClear: {
+      action: 'cleared',
+      description: 'Обработчик очистки значения',
+    },
+    isPeriod: {
+      control: 'boolean',
+      description: 'Выбираем период (2 даты) или одну дату',
+    },
+    valueType: {
+      control: 'select',
+      options: ['date', 'year', 'dateTime'],
+      description: 'Тип значения: дата или год',
+    },
+    defaultOpen: {
+      control: 'boolean',
+      description: 'Открыть календарь по умолчанию',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof DateTime>;
+
+const DateTimeWrapper = (args: Props) => {
+  const [values, setValues] = useState<(string | undefined)[] | undefined>(args.defaultValues);
+
+  return (
+    <div style={{ width: '300px' }}>
+      <DateTime {...args} values={values} onValueChange={setValues} />
+    </div>
+  );
+};
+
+export const Default: Story = {
+  render: (args) => <DateTimeWrapper {...args} />,
+  args: {
+    variant: 'filled',
+    componentSize: 'medium',
+    fullWidth: false,
+    placeholder: 'Выберите дату',
+  },
+};
+
+export const Outlined: Story = {
+  render: (args) => <DateTimeWrapper {...args} />,
+  args: {
+    variant: 'outlined',
+    componentSize: 'medium',
+    placeholder: 'Выберите дату',
+  },
+};
+
+export const Small: Story = {
+  render: (args) => <DateTimeWrapper {...args} />,
+  args: {
+    variant: 'filled',
+    componentSize: 'small',
+    placeholder: 'Выберите дату',
+  },
+};
+
+export const Large: Story = {
+  render: (args) => <DateTimeWrapper {...args} />,
+  args: {
+    variant: 'filled',
+    componentSize: 'large',
+    placeholder: 'Выберите дату',
+  },
+};
+
+export const Disabled: Story = {
+  render: (args) => <DateTimeWrapper {...args} />,
+  args: {
+    variant: 'filled',
+    componentSize: 'medium',
+    disabled: true,
+    placeholder: 'Выберите дату',
+  },
+};
+
+export const WithDefaultValue: Story = {
+  render: (args) => <DateTimeWrapper {...args} />,
+  args: {
+    variant: 'filled',
+    componentSize: 'medium',
+    defaultValues: ['2024-03-20', '2024-03-25'],
+    placeholder: 'Выберите дату',
+  },
+};
+
+export const SingleDate: Story = {
+  render: (args) => <DateTimeWrapper {...args} />,
+  args: {
+    variant: 'filled',
+    componentSize: 'medium',
+    isPeriod: false,
+    placeholder: 'Выберите дату',
+    defaultValues: ['2024-03-20'],
+  },
+};
+
+export const SingleYear: Story = {
+  render: (args) => <DateTimeWrapper {...args} />,
+  args: {
+    variant: 'filled',
+    componentSize: 'medium',
+    isPeriod: false,
+    valueType: 'year',
+    placeholder: 'Выберите год',
+    defaultValues: ['2024'],
+  },
+};
+
+export const SingleDateTime: Story = {
+  render: (args) => <DateTimeWrapper {...args} />,
+  args: {
+    variant: 'filled',
+    componentSize: 'medium',
+    isPeriod: false,
+    valueType: 'dateTime',
+    placeholder: 'Выберите дату и время',
+    defaultValues: ['2024-03-20T00:00:00'],
+  },
+};
+
+export const SingleDateTimeUtc: Story = {
+  render: (args) => <DateTimeWrapper {...args} />,
+  args: {
+    variant: 'filled',
+    componentSize: 'medium',
+    isPeriod: false,
+    valueType: 'dateTime',
+    useUtc: true,
+    dayjs: (date) => dayjs.utc(date),
+    placeholder: 'Выберите дату и время (UTC)',
+    defaultValues: [dayjs.utc('2025-02-12T22:59:00').format()],
+  },
+};
+
+export const WithLabel: Story = {
+  render: (args) => <DateTimeWrapper {...args} />,
+  args: {
+    variant: 'filled',
+    componentSize: 'medium',
+    label: 'Дата рождения',
+    placeholder: 'Выберите дату',
+  },
+};
+
+export const FilledBlack: Story = {
+  render: (args) => <DateTimeWrapper {...args} />,
+  args: {
+    variant: 'filledBlack',
+    componentSize: 'medium',
+    label: 'Filled black',
+    placeholder: 'Выберите дату',
+  },
+};
+
+export const WithError: Story = {
+  render: (args) => <DateTimeWrapper {...args} />,
+  args: {
+    variant: 'filledBlack',
+    componentSize: 'medium',
+    label: 'Label',
+    placeholder: 'Выберите дату',
+    error: {
+      name: 'Error name',
+      description: 'Подробное описание ошибки',
+    },
+  },
+};
+
+export const WithErrorIcon: Story = {
+  render: (args) => <DateTimeWrapper {...args} />,
+  args: {
+    variant: 'outlined',
+    componentSize: 'medium',
+    placeholder: 'Выберите дату',
+    error: {
+      name: 'Error name',
+      description: 'Подробное описание ошибки',
+    },
+  },
+};

package/src/components/common/DateTime/DateTime.tsx

@@ -0,0 +1,236 @@
+import classnames from 'classnames';
+import defaultDayjs from 'dayjs';
+import { FocusEvent, InputHTMLAttributes, forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import { mergeRefs } from 'react-merge-refs';
+
+import { FieldError, FieldErrorIcon, FieldShell, FieldSize, FieldVariant } from '@components/common/FieldShell';
+import * as fieldStyles from '@components/common/FieldShell/fieldShell.module.css';
+import { Popover } from '@components/view/Popover';
+import { useCompatId } from '@hooks/useCompatId';
+import { DateRangeIcon } from '@icons/DateRangeIcon';
+import { PropsObject, UiProps } from '@models/UiProps';
+
+import * as styles from './dateTime.module.css';
+import type { DayjsFactory } from './models/dayjs';
+import { CalendarPopover } from './ui/CalendarPopover';
+
+type Variant = FieldVariant;
+type Size = FieldSize;
+type ValueType = 'date' | 'year' | 'dateTime';
+
+interface Props {
+  variant?: Variant;
+  isPeriod?: boolean;
+  valueType?: ValueType;
+  defaultOpen?: boolean;
+  componentSize?: Size;
+  fullWidth?: boolean;
+  label?: string;
+  error?: FieldError;
+  placeholder?: string;
+  values?: (string | undefined)[];
+  defaultValues?: (string | undefined)[];
+  onClear?: () => void;
+  onValueChange?: (values: (string | undefined)[]) => void;
+  dayjs?: DayjsFactory;
+  useUtc?: boolean;
+}
+
+export const DateTime = forwardRef<HTMLInputElement, UiProps<Props> & InputHTMLAttributes<HTMLInputElement>>(
+  (
+    {
+      variant = 'filled',
+      isPeriod = false,
+      valueType = 'date',
+      defaultOpen = false,
+      componentSize = 'medium',
+      fullWidth,
+      label,
+      error,
+      placeholder,
+      defaultValues,
+      values,
+      onClear,
+      onValueChange,
+      dayjs: dayjsFromProps,
+      useUtc = false,
+      classes,
+      id,
+      onFocus,
+      onBlur,
+      ...inputProps
+    },
+    ref,
+  ) => {
+    const dayjs: DayjsFactory = dayjsFromProps ?? (defaultDayjs as DayjsFactory);
+
+    const [stateValues, setStateValues] = useState<(string | undefined)[] | undefined>(
+      values !== undefined ? values : defaultValues,
+    );
+    const [isPopoverOpen, setIsPopoverOpen] = useState(defaultOpen);
+
+    const stateValuesRef = useRef<(string | undefined)[] | undefined>(stateValues);
+
+    useEffect(() => {
+      if (values !== undefined) {
+        setStateValues(values);
+      }
+    }, [values]);
+
+    useEffect(() => {
+      if (values === undefined && defaultValues !== undefined) {
+        setStateValues(defaultValues);
+      }
+    }, [defaultValues, values]);
+
+    useEffect(() => {
+      stateValuesRef.current = stateValues;
+    }, [stateValues]);
+
+    const effectiveValueType: ValueType = isPeriod && valueType === 'dateTime' ? 'date' : valueType;
+
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const reactId = useCompatId();
+    const inputId = id ?? reactId;
+
+    const inputFocusHandler = useCallback(
+      (event: FocusEvent<HTMLInputElement>) => {
+        setIsPopoverOpen(true);
+        onFocus?.(event);
+      },
+      [onFocus],
+    );
+
+    const inputBlurHandler = useCallback(
+      (event: FocusEvent<HTMLInputElement>) => {
+        if (isPopoverOpen) {
+          return;
+        }
+
+        onBlur?.(event);
+      },
+      [isPopoverOpen, onBlur],
+    );
+
+    const popoverOpenChangeHandler = useCallback(
+      (open: boolean) => {
+        setIsPopoverOpen(open);
+
+        if (!open) {
+          const currentValues = stateValuesRef.current;
+          if (currentValues !== undefined) {
+            onValueChange?.(currentValues);
+          }
+
+          const inputElement = inputRef.current;
+
+          if (!inputElement) {
+            return;
+          }
+
+          if (document.activeElement === inputElement) {
+            inputElement.blur();
+            return;
+          }
+
+          onBlur?.({ target: inputElement, currentTarget: inputElement } as FocusEvent<HTMLInputElement>);
+        }
+      },
+      [onBlur, onValueChange],
+    );
+
+    const iconClickHandler = useCallback(() => {
+      inputRef.current?.focus();
+    }, []);
+
+    const showErrorIcon = !!error && !label;
+
+    const changeDates = useCallback(
+      (newStartDate?: string, newEndDate?: string) => {
+        const newValues = isPeriod ? [newStartDate, newEndDate] : [newStartDate];
+        const prevValues = stateValuesRef.current;
+        const prevLength = prevValues?.length ?? 0;
+        const isSameValues =
+          prevLength === newValues.length && prevValues?.every((value, index) => value === newValues[index]);
+
+        if (isSameValues) {
+          return;
+        }
+
+        stateValuesRef.current = newValues;
+        setStateValues(newValues);
+      },
+      [isPeriod],
+    );
+
+    return (
+      <FieldShell
+        variant={variant}
+        componentSize={componentSize}
+        fullWidth={fullWidth}
+        label={label}
+        error={error}
+        inputId={inputId}
+        hasArrow
+        hasErrorIcon={showErrorIcon}
+        classes={classes}
+      >
+        <input
+          ref={mergeRefs([inputRef, ref])}
+          id={inputId}
+          className={classnames(fieldStyles.input, styles.input, classes?.input)}
+          placeholder={placeholder}
+          {...inputProps}
+          value={
+            stateValues?.[0]
+              ? isPeriod && stateValues[1]
+                ? `${dayjs(stateValues[0]).format(effectiveValueType === 'year' ? 'YYYY' : 'DD.MM.YYYY')} - ${dayjs(
+                    stateValues[1],
+                  ).format(effectiveValueType === 'year' ? 'YYYY' : 'DD.MM.YYYY')}`
+                : `${dayjs(stateValues[0]).format(
+                    effectiveValueType === 'year'
+                      ? 'YYYY'
+                      : effectiveValueType === 'dateTime'
+                        ? 'DD.MM.YYYY HH:mm'
+                        : 'DD.MM.YYYY',
+                  )}`
+              : ''
+          }
+          onChange={() => {}}
+          onFocus={inputFocusHandler}
+          onBlur={inputBlurHandler}
+        />
+        <span onClick={iconClickHandler} className={classnames(fieldStyles.arrow, classes?.icon)}>
+          <DateRangeIcon />
+        </span>
+        {showErrorIcon && error && (
+          <FieldErrorIcon error={error} componentSize={componentSize} className={classes?.errorIcon} />
+        )}
+        <Popover
+          placement="bottom-start"
+          open={isPopoverOpen}
+          onOpenChange={popoverOpenChangeHandler}
+          classes={{ ...(classes?.popover as PropsObject | undefined), content: styles.popoverContent }}
+          containerOffset={4}
+          description={
+            <CalendarPopover
+              dayjs={dayjs}
+              useUtc={useUtc}
+              classes={classes}
+              componentSize={componentSize === 'small' || componentSize === 'medium' ? componentSize : 'medium'}
+              isPeriod={isPeriod}
+              valueType={effectiveValueType}
+              initStartDate={stateValues?.[0]}
+              initEndDate={stateValues?.[1]}
+              changeDates={changeDates}
+              onClear={onClear}
+            />
+          }
+        >
+          <div className={classnames(styles.popoverTarget)} />
+        </Popover>
+      </FieldShell>
+    );
+  },
+);

package/src/components/common/DateTime/dateTime.module.css

@@ -0,0 +1,21 @@
+.input {
+  cursor: pointer;
+}
+
+.input:disabled {
+  cursor: default;
+}
+
+.popover-target {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.popover-content {
+  max-width: none;
+}

package/{components/common/DateTime/index.d.ts → src/components/common/DateTime/index.ts}

@@ -1,4 +1,3 @@
 export { DateTime } from './DateTime';
 export type { DayjsFactory, DayjsInstance } from './models/dayjs';
 export { createCalendarDate } from './utils/createCalendarDate';
-//# sourceMappingURL=index.d.ts.map

package/src/components/common/DateTime/models/dayjs.ts

@@ -0,0 +1,26 @@
+/**
+ * Минимальный контракт для инстанса dayjs.
+ * Позволяет передавать dayjs из приложения (другая версия/плагины) без конфликта типов.
+ */
+export interface DayjsInstance {
+  format(template?: string): string;
+  year(): number;
+  month(): number;
+  hour(): number;
+  hour(value: number): DayjsInstance;
+  minute(): number;
+  minute(value: number): DayjsInstance;
+  second(): number;
+  second(value: number): DayjsInstance;
+  millisecond(): number;
+  millisecond(value: number): DayjsInstance;
+  startOf(unit: string): DayjsInstance;
+  valueOf(): number;
+  daysInMonth(): number;
+  day(): number;
+  add(value: number, unit?: string): DayjsInstance;
+}
+
+export type DayjsConfigType = string | number | Date | null | undefined;
+
+export type DayjsFactory = (date?: DayjsConfigType) => DayjsInstance;