@rolder/kit 3.0.0-alpha.8 → 3.0.0-alpha.80

package/src/ui/scrollArea/ScrollArea.tsx

@@ -1,93 +0,0 @@
-import { ScrollAreaProvider } from './context';
-import { ScrollAreaButton } from './ScrollAreaButton';
-import { ScrollAreaContent } from './ScrollAreaContent';
-import type { ScrollAreaContextValue, ScrollAreaProps } from './types';
-import { useScrollAreaState } from './useScrollArea';
-
-const ScrollAreaRoot = ({
-  children,
-  autoScroll = false,
-  scrollToBottomOnInit = false,
-  animated = true,
-  nearThreshold = 100,
-  radius,
-  ...mantineProps
-}: ScrollAreaProps) => {
-  const scrollAreaValue = useScrollAreaState({
-    autoScroll,
-    scrollToBottomOnInit,
-    animated,
-    nearThreshold,
-  });
-
-  // Создаем контекст с mantineProps
-  const contextValue: ScrollAreaContextValue = {
-    ...scrollAreaValue,
-    radius,
-    mantineProps,
-  };
-
-  return (
-    <ScrollAreaProvider value={contextValue}>
-      <ScrollAreaContent>{children}</ScrollAreaContent>
-    </ScrollAreaProvider>
-  );
-};
-
-ScrollAreaRoot.displayName = 'ScrollArea';
-
-/**
- * ScrollArea Component - Расширенная область прокрутки с автоскроллом
- *
- * @example
- * // Базовое использование
- * <ScrollArea h={300}>
- *   <div>Контент для прокрутки</div>
- * </ScrollArea>
- *
- * @example
- * // С автоскроллом и кнопкой
- * <ScrollArea autoScroll scrollToBottomOnInit h={400}>
- *   <div>Чат сообщения...</div>
- *   <ScrollArea.ScrollButton className="absolute bottom-4 right-4" />
- * </ScrollArea>
- *
- * @example
- * // С кастомными настройками
- * <ScrollArea
- *   autoScroll={true}
- *   animated={true}
- *   nearThreshold={50}
- *   h={300}
- *   scrollbarSize={6}
- *   type="hover"
- * >
- *   {messages.map(msg => <div key={msg.id}>{msg.text}</div>)}
- *   <ScrollArea.ScrollButton
- *     className="absolute bottom-4 right-4"
- *     upIcon={<CustomUpIcon />}
- *     downIcon={<CustomDownIcon />}
- *   />
- * </ScrollArea>
- *
- * @example
- * // Использование хука для доступа к viewport
- * function CustomControl() {
- *   const { isAtBottom, scrollToBottom, viewportRef } = useScrollArea();
- *
- *   const scrollToElement = () => {
- *     const target = viewportRef.current?.querySelector('[data-target]');
- *     target?.scrollIntoView();
- *   };
- *
- *   return (
- *     <button onClick={scrollToBottom} disabled={isAtBottom}>
- *       Прокрутить вниз
- *     </button>
- *   );
- * }
- */
-export const ScrollArea = Object.assign(ScrollAreaRoot, {
-  ScrollButton: ScrollAreaButton,
-  Provider: ScrollAreaProvider,
-});

package/src/ui/scrollArea/ScrollAreaButton.tsx

@@ -1,56 +0,0 @@
-import { ActionIcon } from '@mantine/core';
-import { useScrollArea } from './context';
-import type { ScrollButtonProps } from './types';
-
-export const ScrollAreaButton = ({ className }: ScrollButtonProps) => {
-  const { hasScrollableContent, isAboveCenter, scrollToTop, scrollToBottom } =
-    useScrollArea();
-
-  // Не показываем кнопку, если нет прокручиваемого контента
-  if (!hasScrollableContent) return null;
-
-  const isScrollingDown = isAboveCenter;
-  const icon = (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      role="img"
-      aria-label="Chevron"
-      style={{
-        transition: 'transform 0.2s ease-in-out',
-        transform: isScrollingDown ? 'rotate(-180deg)' : 'rotate(0deg)',
-      }}
-    >
-      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-      <path d="M6 9l6 6l6 -6" />
-    </svg>
-  );
-
-  const handleClick = () => {
-    if (isScrollingDown) scrollToBottom();
-    else scrollToTop();
-  };
-
-  return (
-    <ActionIcon
-      pos="absolute"
-      bottom={16}
-      right={16}
-      variant="light"
-      onClick={handleClick}
-      className={className}
-      aria-label={isScrollingDown ? 'Scroll to bottom' : 'Scroll to top'}
-    >
-      {icon}
-    </ActionIcon>
-  );
-};
-
-ScrollAreaButton.displayName = 'ScrollArea.ScrollButton';

package/src/ui/scrollArea/ScrollAreaContent.tsx

@@ -1,36 +0,0 @@
-import { Box, getRadius, ScrollArea as MantineScrollArea } from '@mantine/core';
-import { useContext } from 'react';
-import { ScrollAreaContext } from './context';
-
-export const ScrollAreaContent = ({
-  children,
-}: {
-  children: React.ReactNode;
-}) => {
-  // Получаем полное состояние из контекста (включая внутренние детали)
-  const fullContext = useContext(ScrollAreaContext);
-  if (!fullContext) {
-    throw new Error('ScrollAreaContent must be used within ScrollArea');
-  }
-
-  const { _callbackRef, mantineProps, radius, _contentResizeRef } = fullContext;
-
-  return (
-    <MantineScrollArea
-      classNames={{
-        viewport: 'rolder-scroll-area-viewport',
-        content: 'rolder-scroll-area-content',
-        scrollbar: 'rolder-scroll-area-scrollbar',
-      }}
-      style={{ '--radius': radius ? getRadius(radius) : undefined }}
-      {...mantineProps}
-      viewportRef={_callbackRef}
-    >
-      <Box h="100%" w="100%" ref={_contentResizeRef}>
-        {children}
-      </Box>
-    </MantineScrollArea>
-  );
-};
-
-ScrollAreaContent.displayName = 'ScrollArea.Content';

package/src/ui/scrollArea/context.tsx

@@ -1,43 +0,0 @@
-import { createContext, useContext } from 'react';
-import type { ScrollAreaContextValue, ScrollAreaHook } from './types';
-
-/** Внутренний контекст для передачи состояния ScrollArea */
-export const ScrollAreaContext = createContext<ScrollAreaContextValue | null>(
-  null,
-);
-
-export const ScrollAreaProvider = ScrollAreaContext.Provider;
-
-/**
- * Хук для доступа к состоянию и методам ScrollArea
- *
- * @returns Объект с индикаторами позиции, методами управления и ref на viewport
- *
- * @example
- * ```tsx
- * function MyComponent() {
- *   const { isAtBottom, scrollToTop, viewportRef } = useScrollArea();
- *
- *   const scrollToElement = () => {
- *     const target = viewportRef.current?.querySelector('[data-target]');
- *     target?.scrollIntoView();
- *   };
- *
- *   return (
- *     <button onClick={scrollToTop} disabled={isAtTop}>
- *       В начало
- *     </button>
- *   );
- * }
- * ```
- */
-export const useScrollArea = (): ScrollAreaHook => {
-  const context = useContext(ScrollAreaContext);
-  if (!context) {
-    throw new Error('useScrollArea must be used within ScrollArea');
-  }
-
-  // Возвращаем только публичный API, скрывая внутренние детали
-  const { _callbackRef, mantineProps: _, radius: __, ...publicAPI } = context;
-  return publicAPI;
-};

package/src/ui/scrollArea/index.ts

@@ -1,10 +0,0 @@
-export { useScrollArea } from './context';
-export { ScrollArea } from './ScrollArea';
-export type {
-  ScrollAreaContextValue,
-  ScrollAreaHook,
-  ScrollAreaProps,
-  ScrollAreaState,
-  ScrollButtonProps,
-  ScrollPosition,
-} from './types';

package/src/ui/scrollArea/types.ts

@@ -1,77 +0,0 @@
-import type {
-  MantineRadius,
-  ScrollAreaProps as MantineScrollAreaProps,
-} from '@mantine/core';
-import type { ReactNode } from 'react';
-
-export interface ScrollAreaProps
-  extends Omit<MantineScrollAreaProps, 'children'> {
-  /** Включение автоскролла при добавлении контента (по умолчанию false) */
-  autoScroll?: boolean;
-  /** Прокрутить к концу при инициализации компонента (по умолчанию false) */
-  scrollToBottomOnInit?: boolean;
-  /** Анимированная прокрутка (по умолчанию true) */
-  animated?: boolean;
-  /** Отступ для near-зон в пикселях (по умолчанию 100) */
-  nearThreshold?: number;
-  /** Радиус для viewport и scrollbar на тот случай, когда они "торчат" углами*/
-  radius?: MantineRadius;
-  /** Дочерние элементы - автоматически оборачиваются в ScrollArea.Content */
-  children: ReactNode;
-}
-
-export interface ScrollAreaHook {
-  /** Точно в начале (scrollTop === 0) */
-  isAtTop: boolean;
-  /** В пределах nearThreshold от начала */
-  isNearTop: boolean;
-  /** Точно в конце (scrollTop + clientHeight >= scrollHeight) */
-  isAtBottom: boolean;
-  /** В пределах nearThreshold от конца */
-  isNearBottom: boolean;
-  /** Выше центральной точки области прокрутки */
-  isAboveCenter: boolean;
-  /** Есть контент требующий прокрутки */
-  hasScrollableContent: boolean;
-
-  /** Прокрутить к началу области */
-  scrollToTop: (animated?: boolean) => void;
-  /** Прокрутить к концу области */
-  scrollToBottom: (animated?: boolean) => void;
-
-  /** React ref на viewport элемент для прямого доступа к DOM */
-  viewportRef: React.RefObject<HTMLDivElement | null>;
-}
-
-export interface ScrollAreaState extends ScrollAreaHook {
-  /** Внутренний callback ref для подключения к Mantine ScrollArea */
-  _callbackRef: (node: HTMLDivElement | null) => void;
-  /** Внутренний ref для наблюдения за изменениями контента */
-  _contentResizeRef: (node: HTMLDivElement | null) => void;
-}
-
-export interface ScrollAreaContextValue extends ScrollAreaState {
-  /** Радиус для viewport и scrollbar на тот случай, когда они "торчат" углами*/
-  radius?: MantineRadius;
-  /** Пропсы Mantine ScrollArea, переданные в корневой компонент */
-  mantineProps: Omit<MantineScrollAreaProps, 'children'>;
-}
-
-export interface ScrollButtonProps {
-  /** CSS классы для стилизации кнопки */
-  className?: string;
-  /** Иконка для прокрутки вверх (по умолчанию IconChevronUp) */
-  upIcon?: ReactNode;
-  /** Иконка для прокрутки вниз (по умолчанию IconChevronDown) */
-  downIcon?: ReactNode;
-}
-
-/** Внутренний тип для отслеживания позиции скролла */
-export interface ScrollPosition {
-  /** Текущая позиция скролла сверху */
-  scrollTop: number;
-  /** Высота видимой области */
-  clientHeight: number;
-  /** Общая высота прокручиваемого контента */
-  scrollHeight: number;
-}

package/src/ui/scrollArea/useScrollArea.ts

@@ -1,227 +0,0 @@
-import {
-  useDebouncedCallback,
-  useMergedRef,
-  useResizeObserver,
-} from '@mantine/hooks';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import type { ScrollAreaState, ScrollPosition } from './types';
-
-interface UseScrollAreaOptions {
-  autoScroll?: boolean;
-  scrollToBottomOnInit?: boolean;
-  animated?: boolean;
-  nearThreshold?: number;
-}
-
-export const useScrollAreaState = (
-  options: UseScrollAreaOptions = {},
-): ScrollAreaState => {
-  const {
-    autoScroll = false,
-    scrollToBottomOnInit = false,
-    animated = true,
-    nearThreshold = 32,
-  } = options;
-
-  const scrollAreaRef = useRef<HTMLDivElement | null>(null);
-  const isUserInteractingRef = useRef(false);
-  const userInteractionTimeoutRef = useRef<NodeJS.Timeout | undefined>(
-    undefined,
-  );
-  const isInitializedRef = useRef(false);
-
-  // Единый ResizeObserver для отслеживания изменений размера контента
-  const [contentResizeRef, contentRect] = useResizeObserver();
-
-  const [scrollPosition, setScrollPosition] = useState<ScrollPosition>({
-    scrollTop: 0,
-    clientHeight: 0,
-    scrollHeight: 0,
-  });
-
-  // Вычисляемые состояния позиции
-  const isAtTop = scrollPosition.scrollTop === 0;
-  const isAtBottom =
-    scrollPosition.scrollTop + scrollPosition.clientHeight >=
-    scrollPosition.scrollHeight;
-  const isNearTop = scrollPosition.scrollTop <= nearThreshold;
-  const isNearBottom =
-    scrollPosition.scrollTop + scrollPosition.clientHeight >=
-    scrollPosition.scrollHeight - nearThreshold;
-  const isAboveCenter =
-    scrollPosition.scrollTop <
-    (scrollPosition.scrollHeight - scrollPosition.clientHeight) / 2;
-  const hasScrollableContent =
-    scrollPosition.scrollHeight > scrollPosition.clientHeight;
-
-  // Используем useDebouncedCallback для оптимизации производительности
-  const debouncedUpdatePosition = useDebouncedCallback(
-    (element: HTMLElement) => {
-      const newPosition: ScrollPosition = {
-        scrollTop: element.scrollTop,
-        clientHeight: element.clientHeight,
-        scrollHeight: element.scrollHeight,
-      };
-
-      setScrollPosition(newPosition);
-    },
-    { delay: 16 }, // 60fps
-  );
-
-  // Методы управления прокруткой
-  const scrollToTop = useCallback(
-    (isAnimated?: boolean) => {
-      const element = scrollAreaRef.current;
-      if (!element) return;
-
-      const shouldAnimate = isAnimated ?? animated;
-
-      if (shouldAnimate) {
-        element.scrollTo({ top: 0, behavior: 'smooth' });
-      } else {
-        element.scrollTop = 0;
-      }
-    },
-    [animated],
-  );
-
-  const scrollToBottom = useCallback(
-    (isAnimated?: boolean) => {
-      const element = scrollAreaRef.current;
-      if (!element) return;
-
-      const shouldAnimate = isAnimated ?? animated;
-
-      if (shouldAnimate) {
-        element.scrollTo({ top: element.scrollHeight, behavior: 'smooth' });
-      } else {
-        element.scrollTop = element.scrollHeight;
-      }
-
-      // Запоминаем scrollHeight до скролла
-      const scrollHeightBefore = element.scrollHeight;
-
-      // Проверка результата и повтор если нужно
-      setTimeout(() => {
-        const scrollHeightAfter = element.scrollHeight;
-        const diff =
-          element.scrollHeight - (element.scrollTop + element.clientHeight);
-
-        if (diff > 1 && scrollHeightAfter !== scrollHeightBefore) {
-          // ScrollHeight изменился после скролла - повторяем
-          element.scrollTop = element.scrollHeight;
-        }
-      }, 50);
-    },
-    [animated],
-  );
-
-  // Универсальная функция автоскролла
-  const performAutoScroll = useCallback(() => {
-    if (!autoScroll || isUserInteractingRef.current || !scrollAreaRef.current) {
-      return;
-    }
-
-    // Для автоскролла используем isAtBottom (точная позиция)
-    if (isAtBottom) {
-      scrollToBottom(false);
-    }
-  }, [autoScroll, isAtBottom, scrollToBottom]);
-
-  // Детекция пользовательского взаимодействия
-  const handleUserInteraction = useCallback(() => {
-    isUserInteractingRef.current = true;
-
-    if (userInteractionTimeoutRef.current) {
-      clearTimeout(userInteractionTimeoutRef.current);
-    }
-
-    userInteractionTimeoutRef.current = setTimeout(() => {
-      isUserInteractingRef.current = false;
-    }, 150);
-  }, []);
-
-  // Обработчик скролла
-  const handleScroll = useCallback(
-    (event: Event) => {
-      const element = event.target as HTMLElement;
-      debouncedUpdatePosition(element);
-    },
-    [debouncedUpdatePosition],
-  );
-
-  // Прокрутка к концу при инициализации
-  useEffect(() => {
-    if (!scrollToBottomOnInit || isInitializedRef.current) {
-      return;
-    }
-
-    if (hasScrollableContent) {
-      scrollToBottom(animated);
-      isInitializedRef.current = true;
-    }
-  }, [scrollToBottomOnInit, hasScrollableContent, scrollToBottom, animated]);
-
-  // Единый эффект для автоскролла при изменении контента
-  useEffect(() => {
-    const element = scrollAreaRef.current;
-
-    if (!element || contentRect.height === 0) {
-      return;
-    }
-
-    // Обновляем позицию
-    debouncedUpdatePosition(element);
-
-    // Автоскролл с небольшой задержкой
-    const timeoutId = setTimeout(performAutoScroll, 10);
-
-    return () => clearTimeout(timeoutId);
-  }, [contentRect.height, debouncedUpdatePosition, performAutoScroll]);
-
-  // Установка обработчиков событий
-  useEffect(() => {
-    const element = scrollAreaRef.current;
-    if (!element) return;
-
-    const events = ['wheel', 'touchstart', 'touchmove', 'mousedown'] as const;
-
-    element.addEventListener('scroll', handleScroll);
-    events.forEach((event) => {
-      element.addEventListener(event, handleUserInteraction);
-    });
-
-    // Инициализация позиции
-    debouncedUpdatePosition(element);
-
-    return () => {
-      element.removeEventListener('scroll', handleScroll);
-      events.forEach((event) => {
-        element.removeEventListener(event, handleUserInteraction);
-      });
-
-      if (userInteractionTimeoutRef.current) {
-        clearTimeout(userInteractionTimeoutRef.current);
-      }
-    };
-  }, [handleScroll, handleUserInteraction, debouncedUpdatePosition]);
-
-  // Единый ref
-  const callbackRef = useMergedRef(scrollAreaRef);
-
-  return {
-    isAtTop,
-    isNearTop,
-    isAtBottom,
-    isNearBottom,
-    isAboveCenter,
-    hasScrollableContent,
-    scrollToTop,
-    scrollToBottom,
-    viewportRef: scrollAreaRef,
-    _callbackRef: callbackRef,
-    _contentResizeRef: contentResizeRef as unknown as (
-      node: HTMLDivElement | null,
-    ) => void,
-  };
-};

package/tsconfig.json

@@ -1,14 +0,0 @@
-{
-  "compilerOptions": {
-    "lib": ["DOM", "ES2022"],
-    "module": "ESNext",
-    "jsx": "react-jsx",
-    "strict": true,
-    "skipLibCheck": true,
-    "isolatedModules": true,
-    "resolveJsonModule": true,
-    "moduleResolution": "bundler",
-    "useDefineForClassFields": true
-  },
-  "include": ["src"]
-}