nntc-ui 0.2.6 → 0.2.8

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

@@ -1,249 +0,0 @@
-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

@@ -1,236 +0,0 @@
-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

@@ -1,21 +0,0 @@
-.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/src/components/common/DateTime/models/dayjs.ts

@@ -1,26 +0,0 @@
-/**
- * Минимальный контракт для инстанса 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;