nntc-ui 0.2.3 → 0.2.6

package/src/components/common/DateTime/ui/CalendarPopover/calendarPopover.module.css

@@ -0,0 +1,226 @@
+.root {
+  display: flex;
+  flex-direction: column;
+}
+
+.root.date-time-mode {
+  flex-direction: row;
+  align-items: stretch;
+  width: auto;
+}
+
+.medium {
+  padding: 24px 16px;
+}
+
+.small {
+  padding: 20px 12px;
+}
+
+.calendar-container {
+  display: flex;
+  flex-direction: column;
+  width: 336px;
+}
+
+.medium > .calendar-container {
+  gap: 24px;
+}
+
+.small > .calendar-container {
+  gap: 20px;
+}
+
+.small .calendar-container.month-view {
+  width: 282px;
+}
+
+.buttons-container {
+  display: block;
+}
+
+.button {
+  color: var(--theme-text-primary);
+  background: none;
+  border: none;
+  box-shadow: none;
+}
+
+.navigation-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.navigation-arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.navigation-arrow > svg {
+  fill: var(--theme-text-secondary);
+}
+
+.navigation-value {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.navigation-title {
+  text-transform: capitalize;
+}
+
+.cells-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  width: 100%;
+}
+
+.cell {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  cursor: pointer;
+}
+
+.cell.month {
+  width: 84px;
+}
+
+.cell.year {
+  width: 48px;
+}
+
+.small .cell {
+  width: 40px;
+  height: 40px;
+}
+
+.small .cell.month {
+  width: 84px;
+}
+
+.small .cell.year {
+  width: 48px;
+}
+
+.cell-data {
+  position: relative;
+  z-index: 3;
+}
+
+.cell-circle {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  z-index: 2;
+  display: block;
+  width: 44px;
+  height: 44px;
+  background-color: var(--theme-focus);
+  border-radius: 50%;
+}
+
+.small .cell-circle {
+  top: 2px;
+  left: 2px;
+  width: 36px;
+  height: 36px;
+}
+
+.cell-circle ~ .cell-data {
+  color: var(--theme-text-button-invert);
+}
+
+.cell-selection {
+  position: absolute;
+  top: 2px;
+  left: 0;
+  z-index: 1;
+  display: block;
+  width: 100%;
+  height: 44px;
+  background-color: var(--theme-date-range);
+}
+
+.small .cell-selection {
+  top: 2px;
+  height: 36px;
+}
+
+.cell-selection-first {
+  left: 50%;
+  width: 50%;
+}
+
+.cell-selection-last {
+  width: 50%;
+}
+
+.month-cell-selection {
+  position: absolute;
+  top: 2px;
+  left: 0;
+  z-index: 1;
+  display: block;
+  width: 100%;
+  height: 44px;
+  background-color: var(--theme-date-range);
+}
+
+.small .month-cell-selection {
+  top: 2px;
+  height: 36px;
+}
+
+.month-cell-selection-first {
+  left: 50%;
+  width: 50%;
+}
+
+.month-cell-selection-last {
+  width: 50%;
+}
+
+.time-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 116px;
+  padding-left: 16px;
+  margin-left: 16px;
+  overflow: hidden;
+  border-left: 1px solid var(--theme-input-border);
+}
+
+.time-selection-marker {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  left: 16px;
+  z-index: 0;
+  height: 36px;
+  pointer-events: none;
+  background-color: var(--theme-focus);
+  border-radius: 8px;
+  transform: translateY(-50%);
+}
+
+.time-divider {
+  position: relative;
+  z-index: 1;
+  flex: 0 0 auto;
+  width: 16px;
+  color: var(--theme-text-button-invert);
+  text-align: center;
+}

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

@@ -1,2 +1 @@
 export { CalendarPopover } from './CalendarPopover';
-//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,106 @@
+import classNames from 'classnames';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+
+import { Typography } from '@components/view/Typography';
+
+import * as styles from './timeWheelColumn.module.css';
+
+const TIME_ITEM_HEIGHT = 36;
+const TIME_CYCLE_REPEAT = 3;
+
+interface Props {
+  values: number[];
+  selectedValue: number;
+  onSelect: (value: number) => void;
+}
+
+export function TimeWheelColumn(props: Props) {
+  const { values, selectedValue, onSelect } = props;
+  const valuesLength = values.length;
+  const centerPosition = (valuesLength + selectedValue) * TIME_ITEM_HEIGHT;
+
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const cycledValues = useMemo(() => {
+    const repeatedValues: number[] = [];
+    for (let i = 0; i < TIME_CYCLE_REPEAT; i += 1) {
+      repeatedValues.push(...values);
+    }
+    return repeatedValues;
+  }, [values]);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+
+    if (Math.abs(container.scrollTop - centerPosition) <= 1) {
+      return;
+    }
+
+    container.scrollTop = centerPosition;
+  }, [centerPosition]);
+
+  const normalizeValue = useCallback(
+    (index: number) => {
+      const normalizedIndex = ((index % valuesLength) + valuesLength) % valuesLength;
+      return values[normalizedIndex];
+    },
+    [values, valuesLength],
+  );
+
+  const handleScroll = useCallback(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+
+    const nearestIndex = Math.round(container.scrollTop / TIME_ITEM_HEIGHT);
+    const nextValue = normalizeValue(nearestIndex);
+
+    if (nextValue !== selectedValue) {
+      onSelect(nextValue);
+    }
+
+    if (nearestIndex < valuesLength || nearestIndex >= valuesLength * 2) {
+      container.scrollTop = (valuesLength + nextValue) * TIME_ITEM_HEIGHT;
+    }
+  }, [normalizeValue, onSelect, selectedValue, valuesLength]);
+
+  const scrollToValue = useCallback(
+    (value: number) => () => {
+      const container = containerRef.current;
+      if (!container) {
+        onSelect(value);
+        return;
+      }
+
+      container.scrollTo({
+        top: (valuesLength + value) * TIME_ITEM_HEIGHT,
+        behavior: 'smooth',
+      });
+      onSelect(value);
+    },
+    [onSelect, valuesLength],
+  );
+
+  return (
+    <div ref={containerRef} className={classNames(styles.timeWheel)} onScroll={handleScroll} tabIndex={-1}>
+      {cycledValues.map((value, index) => (
+        <button
+          key={`time-item-${value}-${index}`}
+          type="button"
+          className={classNames(
+            styles.timeWheelButton,
+            styles.timeWheelItem,
+            value === selectedValue && styles.timeWheelItemActive,
+          )}
+          onClick={scrollToValue(value)}
+        >
+          <Typography variant="subtitle1">{`${value}`.padStart(2, '0')}</Typography>
+        </button>
+      ))}
+    </div>
+  );
+}

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

@@ -1,2 +1 @@
 export { TimeWheelColumn } from './TimeWheelColumn';
-//# sourceMappingURL=index.d.ts.map

package/src/components/common/DateTime/ui/TimeWheelColumn/timeWheelColumn.module.css

@@ -0,0 +1,35 @@
+.time-wheel {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex: 1 1 0;
+  flex-direction: column;
+  height: 252px;
+  padding: 108px 0;
+  overflow-y: auto;
+  scroll-snap-type: y mandatory;
+}
+
+.time-wheel::-webkit-scrollbar {
+  display: none;
+}
+
+.time-wheel-button {
+  color: var(--theme-text-primary);
+  background: none;
+  border: none;
+  box-shadow: none;
+}
+
+.time-wheel-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 36px;
+  cursor: pointer;
+  scroll-snap-align: center;
+}
+
+.time-wheel-item-active {
+  color: var(--theme-text-button-invert);
+}

package/src/components/common/DateTime/utils/createCalendarDate.ts

@@ -0,0 +1,15 @@
+import { DayjsFactory, DayjsInstance } from '../models/dayjs';
+
+export const createCalendarDate = (
+  dayjs: DayjsFactory,
+  year: number,
+  month: number,
+  day = 1,
+  useUtc = false,
+): DayjsInstance => {
+  if (useUtc) {
+    return dayjs(Date.UTC(year, month, day));
+  }
+
+  return dayjs(new Date(year, month, day));
+};

package/src/components/common/FieldShell/FieldErrorIcon.tsx

@@ -0,0 +1,39 @@
+import classnames from 'classnames';
+
+import { Tooltip } from '@components/view/Tooltip';
+import { ErrorOutlineIcon } from '@icons/ErrorOutlineIcon';
+import { FieldError } from '@models/FieldError';
+import { FieldSize } from '@models/FieldSize';
+import { PropsObject } from '@models/UiProps';
+
+import * as styles from './fieldShell.module.css';
+
+function errorIconTooltipLabel(error: FieldError) {
+  return (
+    <>
+      {error.name}
+      <br />
+      {error.description}
+    </>
+  );
+}
+
+interface Props {
+  error: FieldError;
+  componentSize?: FieldSize;
+  className?: string | PropsObject;
+}
+
+export function FieldErrorIcon(props: Props) {
+  const { error, componentSize = 'medium', className } = props;
+
+  const iconSize = componentSize === 'large' || componentSize === 'extraLarge' ? 24 : 20;
+
+  return (
+    <Tooltip label={errorIconTooltipLabel(error)} alertType="error">
+      <span className={classnames(styles.endIcon, styles.errorIcon, className)}>
+        <ErrorOutlineIcon size={iconSize} />
+      </span>
+    </Tooltip>
+  );
+}

package/src/components/common/FieldShell/FieldShell.tsx

@@ -0,0 +1,104 @@
+import classnames from 'classnames';
+import { HTMLAttributes, MouseEventHandler, ReactNode, forwardRef } from 'react';
+
+import { Tooltip } from '@components/view/Tooltip';
+import { Typography } from '@components/view/Typography';
+import { FieldError } from '@models/FieldError';
+import { FieldSize } from '@models/FieldSize';
+import { FieldVariant } from '@models/FieldVariant';
+import { UiProps } from '@models/UiProps';
+
+import * as styles from './fieldShell.module.css';
+
+export type { FieldVariant, FieldSize, FieldError };
+
+interface Props {
+  variant?: FieldVariant;
+  componentSize?: FieldSize;
+  fullWidth?: boolean;
+  label?: string;
+  error?: FieldError;
+  labelExtra?: ReactNode;
+  inputId?: string;
+  onLabelClick?: MouseEventHandler;
+  hasStartIcon?: boolean;
+  hasEndIcon?: boolean;
+  hasDualEndIcon?: boolean;
+  hasErrorIcon?: boolean;
+  hasClearButton?: boolean;
+  hasArrow?: boolean;
+  chipsMode?: boolean;
+  children: ReactNode;
+}
+
+/**
+ * Внутренняя обёртка поля ввода: лейбл + контейнер с фоном/рамкой.
+ * Общая геометрия и состояния задаются через data-атрибуты,
+ * чтобы CSS-модули компонентов могли на них ссылаться.
+ */
+export const FieldShell = forwardRef<HTMLDivElement, UiProps<Props> & HTMLAttributes<HTMLDivElement>>(
+  function FieldShell(
+    {
+      variant = 'outlined',
+      componentSize = 'medium',
+      fullWidth,
+      label,
+      error,
+      labelExtra,
+      inputId,
+      onLabelClick,
+      hasStartIcon,
+      hasEndIcon,
+      hasDualEndIcon,
+      hasErrorIcon,
+      hasClearButton,
+      hasArrow,
+      chipsMode,
+      children,
+      classes,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    return (
+      <div data-size={componentSize} className={classnames(styles.root, fullWidth && styles.fullWidth, classes?.root)}>
+        {!!label && (
+          <div className={classnames(styles.labelRow, classes?.labelRow)}>
+            <Typography
+              className={classnames(styles.label, classes?.label)}
+              component={'label'}
+              variant="caption"
+              htmlFor={inputId}
+              onClick={onLabelClick}
+            >
+              {label}
+              {labelExtra}
+            </Typography>
+            {!!error && (
+              <Tooltip label={error.description} alertType="error">
+                <span className={classnames(styles.errorName, classes?.errorName)}>{error.name}</span>
+              </Tooltip>
+            )}
+          </div>
+        )}
+        <div
+          ref={ref}
+          data-variant={variant}
+          data-error={error ? '' : undefined}
+          data-start-icon={hasStartIcon ? '' : undefined}
+          data-end-icon={hasEndIcon ? '' : undefined}
+          data-dual-end-icon={hasDualEndIcon ? '' : undefined}
+          data-error-icon={hasErrorIcon ? '' : undefined}
+          data-clear={hasClearButton ? '' : undefined}
+          data-arrow={hasArrow ? '' : undefined}
+          data-chips={chipsMode ? '' : undefined}
+          className={classnames(styles.wrapper, className, classes?.wrapper)}
+          {...rest}
+        >
+          {children}
+        </div>
+      </div>
+    );
+  },
+);