nntc-ui 0.2.6 → 0.2.8

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

@@ -1,226 +0,0 @@
-.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/src/components/common/DateTime/ui/TimeWheelColumn/TimeWheelColumn.tsx

@@ -1,106 +0,0 @@
-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/src/components/common/DateTime/ui/TimeWheelColumn/timeWheelColumn.module.css

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

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

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

@@ -1,104 +0,0 @@
-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>
-    );
-  },
-);