@hellboy/ds 0.1.2 → 0.2.7

package/src/components/page-index/PageIndex.tsx

@@ -1,275 +0,0 @@
-import * as React from "react";
-import "../../style/components/page-index/page-index.css";
-
-export interface PageIndexItem {
-  id: string;
-  title: string;
-  level: number;
-  element: HTMLElement;
-}
-
-export interface PageIndexProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * Custom title for the index
-   */
-  title?: string;
-  /**
-   * Whether the sidebar is collapsed
-   */
-  collapsed?: boolean;
-}
-
-export const PageIndex: React.FC<PageIndexProps> = ({
-  title = "On this page",
-  collapsed = false,
-  className = "",
-  ...props
-}) => {
-  const [items, setItems] = React.useState<PageIndexItem[]>([]);
-  const [activeId, setActiveId] = React.useState<string>("");
-  const [manualNavigation, setManualNavigation] = React.useState<boolean>(false);
-
-  // Function to extract text content from element
-  const getTextContent = React.useCallback((element: HTMLElement): string => {
-    // For headings, get text content
-    if (element.tagName.match(/^H[1-6]$/)) {
-      return element.textContent || "";
-    }
-    // For other elements, try to find a title attribute or data attribute
-    return element.getAttribute("data-page-index-title") ||
-           element.getAttribute("title") ||
-           element.textContent ||
-           "";
-  }, []);
-
-  // Function to generate ID from text
-  const generateId = React.useCallback((text: string): string => {
-    return text
-      .toLowerCase()
-      .replace(/[^\w\s-]/g, "") // Remove special characters
-      .replace(/\s+/g, "-") // Replace spaces with hyphens
-      .replace(/-+/g, "-") // Replace multiple hyphens with single
-      .trim();
-  }, []);
-
-  // Scan the page for headings that are direct children of sections within pages
-  const scanPage = React.useCallback(() => {
-    const newItems: PageIndexItem[] = [];
-    const seenIds = new Set<string>(); // Track seen IDs to prevent duplicates
-
-    // Find all pages (main elements) and their sections
-    const pages = document.querySelectorAll('main');
-    pages.forEach((page) => {
-      const pageElement = page as HTMLElement;
-
-      // Skip pages that are inside the page-index component
-      if (pageElement.closest('.page-index')) {
-        return;
-      }
-
-      // Find all sections within this page
-      const sections = pageElement.querySelectorAll('section');
-      sections.forEach((section) => {
-        const sectionElement = section as HTMLElement;
-
-        // Skip sections that are inside the page-index component
-        if (sectionElement.closest('.page-index')) {
-          return;
-        }
-
-        // Find direct child headings (h1, h2, h3, h4, h5, h6) of this section
-        // Using Array.from and filtering for better browser compatibility
-        const childElements = Array.from(sectionElement.children);
-        const headings = childElements.filter(child =>
-          child.tagName.match(/^H[1-6]$/)
-        ) as HTMLElement[];
-
-        headings.forEach((element) => {
-          const text = getTextContent(element);
-          if (text.trim()) {
-            // Skip headings inside component previews, demo containers, or dialogs/drawers
-            if (element.closest('.component-preview, [data-demo], .demo, .example, .drawer, [role="dialog"]')) {
-              return;
-            }
-
-            const id = element.id || generateId(text);
-            
-            // Skip if we've already seen this ID (prevent duplicates)
-            if (seenIds.has(id)) {
-              return;
-            }
-            seenIds.add(id);
-
-            // Ensure the element has an ID
-            if (!element.id) {
-              element.id = id;
-            }
-
-            // Determine level based on heading tag
-            const tagName = element.tagName.toLowerCase();
-            const level = parseInt(tagName.substring(1)); // h1 -> 1, h2 -> 2, etc.
-
-            newItems.push({
-              id,
-              title: text.trim(),
-              level,
-              element,
-            });
-          }
-        });
-      });
-    });
-
-    // Sort items by their position in the document
-    newItems.sort((a, b) => {
-      const aRect = a.element.getBoundingClientRect();
-      const bRect = b.element.getBoundingClientRect();
-      return aRect.top - bRect.top;
-    });
-
-    setItems(newItems);
-  }, [getTextContent, generateId]);
-
-  // Set up intersection observer to track active section
-  React.useEffect(() => {
-    const observer = new IntersectionObserver(
-      (entries) => {
-        // Skip intersection updates during manual navigation
-        if (manualNavigation) return;
-
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            setActiveId(entry.target.id);
-          }
-        });
-      },
-      {
-        rootMargin: "-80px 0px -80% 0px",
-        threshold: 0,
-      }
-    );
-
-    items.forEach((item) => {
-      observer.observe(item.element);
-    });
-
-    return () => {
-      items.forEach((item) => {
-        observer.unobserve(item.element);
-      });
-    };
-  }, [items, manualNavigation]);
-
-  // Scan page on mount and when dependencies change
-  React.useEffect(() => {
-    // Small delay to ensure DOM is ready
-    const timer = setTimeout(() => {
-      scanPage();
-    }, 100);
-
-    // Also re-scan when URL changes (for SPA navigation)
-    const handleLocationChange = () => {
-      setTimeout(() => {
-        scanPage();
-      }, 150); // Slightly longer delay for route transitions
-    };
-
-    // Listen for popstate (browser back/forward)
-    window.addEventListener('popstate', handleLocationChange);
-    
-    // Listen for custom navigation events
-    window.addEventListener('locationchange', handleLocationChange);
-
-    // MutationObserver to detect DOM changes
-    const observer = new MutationObserver(() => {
-      // Debounce the scan to avoid too many re-scans
-      clearTimeout(timer);
-      setTimeout(() => {
-        scanPage();
-      }, 200);
-    });
-
-    // Observe changes to the main content area
-    const mainContent = document.querySelector('main') || document.body;
-    observer.observe(mainContent, {
-      childList: true,
-      subtree: true,
-      attributes: true,
-      attributeFilter: ['data-section-title', 'id'],
-    });
-
-    return () => {
-      clearTimeout(timer);
-      window.removeEventListener('popstate', handleLocationChange);
-      window.removeEventListener('locationchange', handleLocationChange);
-      observer.disconnect();
-    };
-  }, [scanPage]);
-
-  // Handle click on index item
-  const handleItemClick = React.useCallback((id: string) => {
-    const element = document.getElementById(id);
-    if (element) {
-      // Set manual navigation flag to prevent intersection observer interference
-      setManualNavigation(true);
-      setActiveId(id);
-
-      element.scrollIntoView({
-        behavior: "smooth",
-        block: "start",
-      });
-
-      // Reset manual navigation flag after scroll animation completes
-      setTimeout(() => {
-        setManualNavigation(false);
-      }, 1000); // 1 second should be enough for smooth scroll
-    }
-  }, []);
-
-  const classes = [
-    "page-index",
-    collapsed && "page-index--collapsed",
-    className,
-  ].filter(Boolean).join(" ");
-
-  if (items.length === 0) {
-    return null;
-  }
-
-  // Remove custom props that shouldn't be passed to DOM
-  const { sidebarWidth, setSidebarWidth, ...domProps } = props as any;
-
-  return (
-    <div className={classes} {...domProps}>
-      {!collapsed && (
-        <h3 className="page-index__title">{title}</h3>
-      )}
-      <nav className="page-index__nav" aria-label="Page contents">
-        <ul className="page-index__list">
-          {items.map((item) => (
-            <li
-              key={item.id}
-              className={`page-index__item page-index__item--level-${item.level}`}
-            >
-              <button
-                className={`page-index__link ${
-                  activeId === item.id ? "page-index__link--active" : ""
-                }`}
-                onClick={() => handleItemClick(item.id)}
-                aria-current={activeId === item.id ? "location" : undefined}
-              >
-                {collapsed ? (
-                  <span className="page-index__link-text--collapsed">
-                    {item.title.charAt(0)}
-                  </span>
-                ) : (
-                  item.title
-                )}
-              </button>
-            </li>
-          ))}
-        </ul>
-      </nav>
-    </div>
-  );
-};

package/src/components/page-index/index.ts

@@ -1 +0,0 @@
-export * from "./PageIndex";

package/src/components/popover/index.ts

@@ -1 +0,0 @@
-export { Popover, type PopoverProps } from './popover';

package/src/components/popover/popover.tsx

@@ -1,199 +0,0 @@
-import * as React from "react";
-import * as ReactDOM from "react-dom";
-import "../../style/components/popover/popover.css";
-
-export interface PopoverProps {
-  trigger: React.ReactNode;
-  children: React.ReactNode;
-  isOpen?: boolean;
-  onToggle?: () => void;
-  placement?: 'top' | 'bottom' | 'left' | 'right';
-}
-
-type ResolvedPlacement = 'top' | 'bottom' | 'left' | 'right';
-
-export const Popover: React.FC<PopoverProps> = ({
-  trigger,
-  children,
-  isOpen = false,
-  onToggle,
-  placement = 'bottom'
-}) => {
-  const [internalOpen, setInternalOpen] = React.useState(false);
-  const triggerRef = React.useRef<HTMLDivElement>(null);
-  const popoverRef = React.useRef<HTMLDivElement>(null);
-  const [popoverStyle, setPopoverStyle] = React.useState<React.CSSProperties>({});
-  const [resolvedPlacement, setResolvedPlacement] = React.useState<ResolvedPlacement>(placement);
-
-  const open = isOpen !== undefined ? isOpen : internalOpen;
-  const toggle = onToggle || (() => setInternalOpen(!internalOpen));
-
-  // Fecha ao clicar fora
-  React.useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        triggerRef.current &&
-        !triggerRef.current.contains(event.target as Node) &&
-        popoverRef.current &&
-        !popoverRef.current.contains(event.target as Node)
-      ) {
-        if (onToggle) {
-          onToggle();
-        } else {
-          setInternalOpen(false);
-        }
-      }
-    };
-
-    if (open) {
-      document.addEventListener('mousedown', handleClickOutside);
-    }
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [open, onToggle]);
-
-  // Calcula posição com ajuste automático baseado no espaço disponível
-  React.useEffect(() => {
-    if (!open || !triggerRef.current || !popoverRef.current) {
-      return;
-    }
-
-    const updatePosition = () => {
-      if (!triggerRef.current || !popoverRef.current) {
-        return;
-      }
-
-      const triggerRect = triggerRef.current.getBoundingClientRect();
-      const popoverRect = popoverRef.current.getBoundingClientRect();
-      const gap = 8;
-      const viewportWidth = window.innerWidth;
-      const viewportHeight = window.innerHeight;
-
-      // Calcula espaço disponível em cada direção
-      const spaceTop = triggerRect.top;
-      const spaceBottom = viewportHeight - triggerRect.bottom;
-      const spaceLeft = triggerRect.left;
-      const spaceRight = viewportWidth - triggerRect.right;
-
-      // Determina o melhor placement baseado no espaço disponível
-      let finalPlacement: ResolvedPlacement = placement as ResolvedPlacement;
-
-      if (placement === 'right' && spaceRight < popoverRect.width + gap) {
-        finalPlacement = spaceLeft >= popoverRect.width + gap ? 'left' : 'bottom';
-      } else if (placement === 'left' && spaceLeft < popoverRect.width + gap) {
-        finalPlacement = spaceRight >= popoverRect.width + gap ? 'right' : 'bottom';
-      } else if (placement === 'bottom' && spaceBottom < popoverRect.height + gap) {
-        finalPlacement = spaceTop >= popoverRect.height + gap ? 'top' : 'bottom';
-      } else if (placement === 'top' && spaceTop < popoverRect.height + gap) {
-        finalPlacement = spaceBottom >= popoverRect.height + gap ? 'bottom' : 'top';
-      }
-
-      setResolvedPlacement(finalPlacement);
-
-      const newStyle: React.CSSProperties = {
-        position: 'fixed',
-        zIndex: 9999,
-        opacity: 1,
-        visibility: 'visible',
-        pointerEvents: 'auto',
-      };
-
-      // Calcula posição baseada no placement final
-      switch (finalPlacement) {
-        case 'right':
-          newStyle.top = triggerRect.top;
-          newStyle.left = triggerRect.right + gap;
-          break;
-        case 'left':
-          newStyle.top = triggerRect.top;
-          newStyle.left = triggerRect.left - popoverRect.width - gap;
-          break;
-        case 'top':
-          newStyle.top = triggerRect.top - popoverRect.height - gap;
-          newStyle.left = triggerRect.left;
-          break;
-        case 'bottom':
-        default:
-          newStyle.top = triggerRect.bottom + gap;
-          newStyle.left = triggerRect.left;
-      }
-
-      // Ajuste para não sair da viewport horizontalmente
-      if (typeof newStyle.left === 'number') {
-        if (newStyle.left + popoverRect.width > viewportWidth - gap) {
-          newStyle.left = viewportWidth - popoverRect.width - gap;
-        }
-        if (newStyle.left < gap) {
-          newStyle.left = gap;
-        }
-      }
-
-      // Ajuste para não sair da viewport verticalmente
-      if (typeof newStyle.top === 'number') {
-        if (newStyle.top + popoverRect.height > viewportHeight - gap) {
-          newStyle.top = viewportHeight - popoverRect.height - gap;
-        }
-        if (newStyle.top < gap) {
-          newStyle.top = gap;
-        }
-      }
-
-      setPopoverStyle(newStyle);
-    };
-
-    // Usa requestAnimationFrame para garantir que o popover foi renderizado
-    requestAnimationFrame(updatePosition);
-
-    window.addEventListener('resize', updatePosition);
-    window.addEventListener('scroll', updatePosition, true);
-
-    return () => {
-      window.removeEventListener('resize', updatePosition);
-      window.removeEventListener('scroll', updatePosition, true);
-    };
-  }, [open, placement]);
-
-  const handleTriggerClick = () => {
-    toggle();
-  };
-
-  return (
-    <>
-      <div 
-        ref={triggerRef} 
-        onClick={handleTriggerClick} 
-        style={{ display: 'inline-block', position: 'relative' }}
-      >
-        {React.isValidElement(trigger) 
-          ? React.cloneElement(trigger as React.ReactElement, { 
-              onClick: (e: React.MouseEvent) => {
-                e.stopPropagation();
-                handleTriggerClick();
-                (trigger as React.ReactElement).props?.onClick?.(e);
-              }
-            })
-          : trigger}
-      </div>
-      {open &&
-        ReactDOM.createPortal(
-          <div
-            ref={popoverRef}
-            className={`popover popover--${resolvedPlacement}`}
-            style={{
-              ...popoverStyle,
-              // Start with opacity 0 and visibility hidden to prevent initial flash
-              opacity: popoverStyle.top !== undefined ? 1 : 0,
-              visibility: popoverStyle.top !== undefined ? 'visible' : 'hidden',
-            }}
-          >
-            <div className="popover__content">
-              {children}
-            </div>
-          </div>,
-          document.body
-        )}
-    </>
-  );
-};

package/src/components/radio/Radio.tsx

@@ -1,176 +0,0 @@
-import React from 'react';
-import { Radio as AriakitRadio, RadioProps as AriakitRadioProps, RadioGroup as AriakitRadioGroup, RadioGroupProps as AriakitRadioGroupProps, useRadioStore } from '@ariakit/react';
-
-export type RadioSize = 'sm' | 'md' | 'lg';
-
-export interface RadioProps extends Omit<AriakitRadioProps, 'children' | 'size'> {
-  /**
-   * Size of the radio button
-   * @default 'md'
-   */
-  size?: RadioSize;
-
-  /**
-   * Label text for the radio button
-   */
-  label?: React.ReactNode;
-
-  /**
-   * Error state
-   */
-  error?: boolean;
-}
-
-export interface RadioGroupProps extends Omit<AriakitRadioGroupProps, 'onChange'> {
-  /**
-   * Size of all radio buttons in the group
-   * @default 'md'
-   */
-  size?: RadioSize;
-
-  /**
-   * Label for the radio group
-   */
-  label?: string;
-
-  /**
-   * Error message to display below the radio group
-   */
-  error?: string;
-
-  /**
-   * Helper text to display below the radio group
-   */
-  helperText?: string;
-
-  /**
-   * Children (Radio components)
-   */
-  children: React.ReactNode;
-
-  /**
-   * Orientation of the radio group
-   * @default 'vertical'
-   */
-  orientation?: 'horizontal' | 'vertical';
-
-  /**
-   * The value of the selected radio button
-   */
-  value?: string | number | null;
-
-  /**
-   * Callback when the selected value changes
-   */
-  onChange?: (value: string | number | null) => void;
-}
-
-export const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
-  (
-    {
-      size = 'md',
-      label,
-      error = false,
-      disabled = false,
-      className,
-      ...props
-    },
-    ref
-  ) => {
-    const radioClasses = [
-      'radio',
-      `radio--${size}`,
-      error && 'radio--error',
-      disabled && 'radio--disabled',
-      className,
-    ]
-      .filter(Boolean)
-      .join(' ');
-
-    return (
-      <label className={radioClasses}>
-        <AriakitRadio
-          ref={ref}
-          disabled={disabled}
-          className="radio__input"
-          {...props}
-        />
-        <span className="radio__box">
-          <span className="radio__dot" />
-        </span>
-        {label && <span className="radio__label">{label}</span>}
-      </label>
-    );
-  }
-);
-
-Radio.displayName = 'Radio';
-
-export const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(
-  (
-    {
-      size = 'md',
-      label,
-      error,
-      helperText,
-      children,
-      orientation = 'vertical',
-      disabled = false,
-      className,
-      value,
-      onChange,
-      ...props
-    },
-    ref
-  ) => {
-    const groupClasses = [
-      'radio-group',
-      `radio-group--${orientation}`,
-      error && 'radio-group--error',
-      disabled && 'radio-group--disabled',
-      className,
-    ]
-      .filter(Boolean)
-      .join(' ');
-
-    // Create radio group store
-    const radioGroupStore = useRadioStore({
-      value,
-      setValue: onChange,
-    });
-
-    // Pass size down to children
-    const childrenWithProps = React.Children.map(children, (child) => {
-      if (React.isValidElement(child) && child.type === Radio) {
-        return React.cloneElement(child, {
-          size: child.props.size || size,
-          error: error ? true : child.props.error,
-          disabled: disabled || child.props.disabled,
-        } as any);
-      }
-      return child;
-    });
-
-    return (
-      <div className={groupClasses}>
-        {label && <div className="radio-group__label">{label}</div>}
-        <AriakitRadioGroup
-          ref={ref}
-          store={radioGroupStore}
-          className="radio-group__container"
-          {...props}
-        >
-          {childrenWithProps}
-        </AriakitRadioGroup>
-        {(error || helperText) && (
-          <div className="radio-group__feedback">
-            {error && <span className="radio-group__error-text">{error}</span>}
-            {!error && helperText && <span className="radio-group__helper-text">{helperText}</span>}
-          </div>
-        )}
-      </div>
-    );
-  }
-);
-
-RadioGroup.displayName = 'RadioGroup';

package/src/components/radio/index.ts

@@ -1 +0,0 @@
-export * from './Radio';

package/src/components/section/index.ts

@@ -1 +0,0 @@
-export { Section, type SectionProps, type SectionSize } from './section';