@hellboy/ds 0.1.2 → 0.2.7

package/src/components/table/Table.tsx

@@ -1,147 +0,0 @@
-import * as React from "react";
-import "../../style/components/table/table.css";
-
-export interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
-  /**
-   * Whether the table should have a border
-   */
-  bordered?: boolean;
-  /**
-   * Whether the table should have striped rows
-   */
-  striped?: boolean;
-  /**
-   * Whether the table should have hover effects
-   */
-  hover?: boolean;
-  /**
-   * Size variant for the table
-   */
-  size?: "sm" | "md" | "lg";
-}
-
-export interface TableHeadProps extends React.HTMLAttributes<HTMLTableSectionElement> {}
-
-export interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {}
-
-export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {}
-
-export interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
-  /**
-   * Whether this is a header cell
-   */
-  header?: boolean;
-}
-
-export interface TableContainerProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-export const Table: React.FC<TableProps> = ({
-  bordered = false,
-  striped = true,
-  hover = true,
-  size = "md",
-  className = "",
-  children,
-  ...props
-}) => {
-  const classes = [
-    "table",
-    bordered && "table--bordered",
-    striped && "table--striped",
-    hover && "table--hover",
-    size && `table--${size}`,
-    className,
-  ]
-    .filter(Boolean)
-    .join(" ");
-
-  return (
-    <table className={classes} {...props}>
-      {children}
-    </table>
-  );
-};
-
-export const TableHead: React.FC<TableHeadProps> = ({
-  className = "",
-  children,
-  ...props
-}) => {
-  const classes = ["table__head", className].filter(Boolean).join(" ");
-
-  return (
-    <thead className={classes} {...props}>
-      {children}
-    </thead>
-  );
-};
-
-export const TableBody: React.FC<TableBodyProps> = ({
-  className = "",
-  children,
-  ...props
-}) => {
-  const classes = ["table__body", className].filter(Boolean).join(" ");
-
-  return (
-    <tbody className={classes} {...props}>
-      {children}
-    </tbody>
-  );
-};
-
-export const TableRow: React.FC<TableRowProps> = ({
-  className = "",
-  children,
-  ...props
-}) => {
-  const classes = ["table__row", className].filter(Boolean).join(" ");
-
-  return (
-    <tr className={classes} {...props}>
-      {children}
-    </tr>
-  );
-};
-
-export const TableCell: React.FC<TableCellProps> = ({
-  header = false,
-  className = "",
-  children,
-  ...props
-}) => {
-  const classes = [
-    header ? "table__cell--header" : "table__cell",
-    className,
-  ]
-    .filter(Boolean)
-    .join(" ");
-
-  if (header) {
-    return (
-      <th className={classes} {...props}>
-        {children}
-      </th>
-    );
-  }
-
-  return (
-    <td className={classes} {...props}>
-      {children}
-    </td>
-  );
-};
-
-export const TableContainer: React.FC<TableContainerProps> = ({
-  className = "",
-  children,
-  ...props
-}) => {
-  const classes = ["table-container", className].filter(Boolean).join(" ");
-
-  return (
-    <div className={classes} {...props}>
-      {children}
-    </div>
-  );
-};

package/src/components/table/index.ts

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

package/src/components/theme-control/index.ts

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

package/src/components/theme-control/theme-control.tsx

@@ -1,78 +0,0 @@
-import * as React from "react";
-import { getSavedTheme, setTheme } from "../../utils/theme";
-import "../../style/components/theme-control/theme-control.css";
-
-type Theme = 'light' | 'dark';
-
-interface ThemeOption {
-  value: Theme;
-  label: string;
-  icon: React.ReactNode;
-}
-
-const themeOptions: ThemeOption[] = [
-  {
-    value: 'light',
-    label: 'Light',
-    icon: (
-      <svg className="theme-control__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-        <circle cx="12" cy="12" r="5"/>
-        <line x1="12" y1="1" x2="12" y2="3"/>
-        <line x1="12" y1="21" x2="12" y2="23"/>
-        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
-        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
-        <line x1="1" y1="12" x2="3" y2="12"/>
-        <line x1="21" y1="12" x2="23" y2="12"/>
-        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
-        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
-      </svg>
-    ),
-  },
-  {
-    value: 'dark',
-    label: 'Dark',
-    icon: (
-      <svg className="theme-control__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
-      </svg>
-    ),
-  },
-];
-
-export interface ThemeControlProps {
-  onThemeChange?: (theme: Theme) => void;
-}
-
-export const ThemeControl: React.FC<ThemeControlProps> = ({ onThemeChange }) => {
-  const [currentTheme, setCurrentTheme] = React.useState<Theme>(() => {
-    // Get initial theme from localStorage or default to light
-    return getSavedTheme();
-  });
-
-  React.useEffect(() => {
-    // Apply theme to document and save to localStorage
-    setTheme(currentTheme);
-    onThemeChange?.(currentTheme);
-  }, [currentTheme, onThemeChange]);
-
-  const handleThemeSelect = (theme: Theme) => {
-    setCurrentTheme(theme);
-  };
-
-  return (
-    <div className="theme-control">
-      {themeOptions.map((option) => (
-        <div
-          key={option.value}
-          className={`theme-control__option ${
-            currentTheme === option.value ? 'theme-control__option--active' : ''
-          }`}
-          onClick={() => handleThemeSelect(option.value)}
-        >
-          {option.icon}
-          <span>{option.label}</span>
-        </div>
-      ))}
-    </div>
-  );
-};

package/src/components/tooltip/index.ts

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

package/src/components/tooltip/tooltip.tsx

@@ -1,207 +0,0 @@
-import * as React from "react";
-import * as ReactDOM from "react-dom";
-import "../../style/components/tooltip/tooltip.css";
-
-export interface TooltipProps {
-  content: React.ReactNode;
-  children: React.ReactNode;
-  placement?: 'top' | 'bottom' | 'left' | 'right';
-  delay?: number;
-  disabled?: boolean;
-}
-
-type ResolvedPlacement = 'top' | 'bottom' | 'left' | 'right';
-
-export const Tooltip: React.FC<TooltipProps> = ({
-  content,
-  children,
-  placement = 'top',
-  delay = 0,
-  disabled = false
-}) => {
-  const [isVisible, setIsVisible] = React.useState(false);
-  const [tooltipStyle, setTooltipStyle] = React.useState<React.CSSProperties>({});
-  const [resolvedPlacement, setResolvedPlacement] = React.useState<ResolvedPlacement>(placement);
-
-  const triggerRef = React.useRef<HTMLDivElement>(null);
-  const tooltipRef = React.useRef<HTMLDivElement>(null);
-  const timeoutRef = React.useRef<number>();
-
-  // Calcula posição com ajuste automático baseado no espaço disponível
-  React.useEffect(() => {
-    if (!isVisible || !triggerRef.current || !tooltipRef.current) {
-      return;
-    }
-
-    const updatePosition = () => {
-      if (!triggerRef.current || !tooltipRef.current) {
-        console.log('Tooltip refs not ready:', { trigger: !!triggerRef.current, tooltip: !!tooltipRef.current });
-        return;
-      }
-
-      const triggerRect = triggerRef.current.getBoundingClientRect();
-      const tooltipRect = tooltipRef.current.getBoundingClientRect();
-      
-      // Verifica se o tooltip tem dimensões válidas
-      if (tooltipRect.width === 0 || tooltipRect.height === 0) {
-        // Tenta novamente após um pequeno delay
-        setTimeout(updatePosition, 10);
-        return;
-      }
-      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 < tooltipRect.width + gap) {
-        finalPlacement = spaceLeft >= tooltipRect.width + gap ? 'left' : 'bottom';
-      } else if (placement === 'left' && spaceLeft < tooltipRect.width + gap) {
-        finalPlacement = spaceRight >= tooltipRect.width + gap ? 'right' : 'bottom';
-      } else if (placement === 'bottom' && spaceBottom < tooltipRect.height + gap) {
-        finalPlacement = spaceTop >= tooltipRect.height + gap ? 'top' : 'bottom';
-      } else if (placement === 'top' && spaceTop < tooltipRect.height + gap) {
-        finalPlacement = spaceBottom >= tooltipRect.height + gap ? 'bottom' : 'top';
-      }
-
-      setResolvedPlacement(finalPlacement);
-
-      const newStyle: React.CSSProperties = {
-        position: 'fixed',
-        zIndex: 10000,
-        opacity: 1,
-        visibility: 'visible',
-        pointerEvents: 'auto',
-      };
-
-      // Calcula posição baseada no placement final
-      switch (finalPlacement) {
-        case 'right':
-          newStyle.top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
-          newStyle.left = triggerRect.right + gap;
-          break;
-        case 'left':
-          newStyle.top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
-          newStyle.left = triggerRect.left - tooltipRect.width - gap;
-          break;
-        case 'top':
-          newStyle.top = triggerRect.top - tooltipRect.height - gap;
-          newStyle.left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
-          break;
-        case 'bottom':
-        default:
-          newStyle.top = triggerRect.bottom + gap;
-          newStyle.left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
-      }
-
-      // Ajuste para não sair da viewport horizontalmente
-      if (newStyle.left! < 0) {
-        newStyle.left = 0;
-      } else if (newStyle.left! + tooltipRect.width > viewportWidth) {
-        newStyle.left = viewportWidth - tooltipRect.width;
-      }
-
-      // Ajuste para não sair da viewport verticalmente
-      if (newStyle.top! < 0) {
-        newStyle.top = 0;
-      } else if (newStyle.top! + tooltipRect.height > viewportHeight) {
-        newStyle.top = viewportHeight - tooltipRect.height;
-      }
-
-      setTooltipStyle(newStyle);
-      console.log('Calculated position:', newStyle);
-    };
-
-    console.log('Tooltip isVisible:', isVisible, 'tooltipStyle:', tooltipStyle);
-
-    // Usa requestAnimationFrame para garantir que o tooltip foi renderizado
-    requestAnimationFrame(updatePosition);
-
-    window.addEventListener('resize', updatePosition);
-    window.addEventListener('scroll', updatePosition, true);
-
-    return () => {
-      window.removeEventListener('resize', updatePosition);
-      window.removeEventListener('scroll', updatePosition, true);
-    };
-  }, [isVisible, placement]);
-
-  const handleMouseEnter = () => {
-    if (disabled) return;
-    console.log('Tooltip mouse enter');
-    
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
-    timeoutRef.current = setTimeout(() => {
-      console.log('Tooltip setting visible');
-      setIsVisible(true);
-    }, delay);
-  };
-
-  const handleMouseLeave = () => {
-    console.log('Tooltip mouse leave');
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
-    timeoutRef.current = setTimeout(() => {
-      console.log('Tooltip setting invisible');
-      setIsVisible(false);
-    }, 150); // Delay menor para esconder
-  };
-
-  const handleClick = () => {
-    // Ocultar tooltip imediatamente quando clicar
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
-    setIsVisible(false);
-  };
-
-  return (
-    <>
-      <div
-        ref={triggerRef}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-        onClick={handleClick}
-        style={{ display: 'inline-block' }}
-      >
-        {children}
-      </div>
-      {isVisible && !disabled &&
-        ReactDOM.createPortal(
-          <div
-            ref={tooltipRef}
-            className={`tooltip tooltip--${resolvedPlacement}`}
-            style={{
-              ...tooltipStyle,
-              // Start with opacity 0 and visibility hidden to prevent initial flash
-              opacity: tooltipStyle.top !== undefined ? 1 : 0,
-              visibility: tooltipStyle.top !== undefined ? 'visible' : 'hidden',
-            }}
-            onMouseEnter={() => {
-              console.log('Tooltip mouse enter on tooltip');
-              if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
-              }
-            }}
-            onMouseLeave={handleMouseLeave}
-          >
-            <div className="tooltip__content">
-              {content}
-            </div>
-          </div>,
-          document.body
-        )
-      }
-    </>
-  );
-};

package/src/contexts/NavbarTooltipContext.tsx

@@ -1,48 +0,0 @@
-import * as React from "react";
-
-interface NavbarTooltipContextType {
-  hasOpenPopover: boolean;
-  setHasOpenPopover: (open: boolean) => void;
-  openPopover: (id: string) => void;
-  closePopover: (id: string) => void;
-  activePopoverId: string | null;
-}
-
-const NavbarTooltipContext = React.createContext<NavbarTooltipContextType | undefined>(undefined);
-
-export const NavbarTooltipProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [hasOpenPopover, setHasOpenPopover] = React.useState(false);
-  const [activePopoverId, setActivePopoverId] = React.useState<string | null>(null);
-
-  const openPopover = React.useCallback((id: string) => {
-    setActivePopoverId(id);
-    setHasOpenPopover(true);
-  }, []);
-
-  const closePopover = React.useCallback((id: string) => {
-    if (activePopoverId === id) {
-      setActivePopoverId(null);
-      setHasOpenPopover(false);
-    }
-  }, [activePopoverId]);
-
-  return (
-    <NavbarTooltipContext.Provider value={{ 
-      hasOpenPopover, 
-      setHasOpenPopover, 
-      openPopover, 
-      closePopover, 
-      activePopoverId 
-    }}>
-      {children}
-    </NavbarTooltipContext.Provider>
-  );
-};
-
-export const useNavbarTooltip = () => {
-  const context = React.useContext(NavbarTooltipContext);
-  if (!context) {
-    throw new Error('useNavbarTooltip must be used within a NavbarTooltipProvider');
-  }
-  return context;
-};

package/src/contexts/index.ts

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

package/src/foundations/motion.md

@@ -1,136 +0,0 @@
-# Motion & Animation
-
-O sistema de motion do Hellboy Design System define padrões consistentes para transições, animações e interações, garantindo uma experiência fluida e acessível.
-
-## Princípios
-
-### 1. Propósito
-- **Funcional**: Animações devem ter propósito claro e melhorar a usabilidade
-- **Consistente**: Padrões uniformes em todos os componentes
-- **Acessível**: Respeito às preferências do usuário (prefers-reduced-motion)
-
-### 2. Performance
-- **GPU-accelerated**: Uso de transform e opacity para animações suaves
-- **Otimizado**: Durações apropriadas para evitar distração
-
-## Tokens de Motion
-
-### Durações
-```css
---motion-duration-fast: 0.15s   /* Interações rápidas (hover, feedback) */
---motion-duration-base: 0.2s    /* Interações padrão */
---motion-duration-slow: 0.3s    /* Transições maiores */
---motion-duration-slower: 0.5s  /* Animações de entrada/saída */
-```
-
-### Funções de Easing
-```css
---motion-easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1)    /* Padrão */
---motion-easing-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1)  /* Entrada */
---motion-easing-accelerate: cubic-bezier(0.4, 0.0, 1, 1)    /* Saída */
---motion-easing-sharp: cubic-bezier(0.4, 0.0, 0.6, 1)       /* Ênfase */
-```
-
-### Transições Combinadas
-```css
---motion-transition-fast: var(--motion-duration-fast) var(--motion-easing-standard)
---motion-transition-base: var(--motion-duration-base) var(--motion-easing-standard)
---motion-transition-slow: var(--motion-duration-slow) var(--motion-easing-standard)
-```
-
-### Transições Específicas
-```css
---motion-transition-color: color var(--motion-transition-base)
---motion-transition-background: background-color var(--motion-transition-base)
---motion-transition-transform: transform var(--motion-transition-base)
---motion-transition-opacity: opacity var(--motion-transition-base)
-```
-
-## Padrões de Uso
-
-### Estados Interativos
-- **Hover**: Use `--motion-transition-fast` para feedback imediato
-- **Active/Pressed**: Use `--motion-transition-fast` com transform scale
-- **Focus**: Use `--motion-transition-base` para indicadores visuais
-
-### Entrada e Saída
-- **Fade In/Out**: Use `--motion-transition-fade-in` / `--motion-transition-fade-out`
-- **Slide**: Use animações específicas por direção (slideInRight, slideOutLeft, etc.)
-- **Scale**: Use `--motion-keyframes-scale-in` para elementos emergentes
-
-### Componentes
-- **Buttons**: Transições suaves em hover/active states
-- **Form Controls**: Feedback visual consistente em focus/interaction
-- **Navigation**: Transições fluidas entre estados
-- **Overlays/Dialogs**: Animações de entrada/saída apropriadas
-
-## Acessibilidade
-
-### Reduced Motion
-O sistema automaticamente respeita a preferência `prefers-reduced-motion: reduce`, reduzindo durações para 0.01ms quando ativada.
-
-```css
-@media (prefers-reduced-motion: reduce) {
-  :root {
-    --motion-duration-fast: 0.01s;
-    --motion-duration-base: 0.01s;
-    --motion-duration-slow: 0.01s;
-    --motion-duration-slower: 0.01s;
-  }
-}
-```
-
-### Boas Práticas
-- Evite animações que causem enjoo (vertigo)
-- Mantenha durações entre 0.15s - 0.5s
-- Use easing functions apropriadas para o contexto
-- Teste em diferentes dispositivos e velocidades
-
-## Exemplos de Implementação
-
-### Button Hover
-```css
-.btn {
-  transition: var(--motion-transition-background), var(--motion-transition-transform);
-}
-
-.btn:hover {
-  background-color: var(--color-primary-hover);
-  transform: translateY(-1px);
-}
-```
-
-### Modal Entrance
-```css
-.modal[data-enter] {
-  animation: var(--motion-keyframes-scale-in);
-}
-
-.modal[data-leave] {
-  animation: var(--motion-keyframes-scale-out);
-}
-```
-
-### Drawer Slide
-```css
-.drawer--right[data-enter] {
-  animation: var(--motion-keyframes-slide-in-right);
-}
-
-.drawer--right[data-leave] {
-  animation: var(--motion-keyframes-slide-out-right);
-}
-```
-
-## Ferramentas de Desenvolvimento
-
-### Testando Motion
-- Use `prefers-reduced-motion: reduce` no DevTools
-- Teste em dispositivos móveis
-- Verifique performance com Chrome DevTools
-- Considere usuários com sensibilidade a motion
-
-### Debugging
-- Adicione `animation-play-state: paused` para inspeção
-- Use `animation-fill-mode: forwards` para estados finais
-- Monitore performance com `will-change` property

package/src/index.ts

@@ -1,40 +0,0 @@
-/**
- * Hellboy Design System
- * Core package with foundational components and tokens
- */
-
-// Styles
-import './style/styles.css';
-
-// Contexts
-export * from './contexts';
-
-// Components
-export * from './components';
-
-// Direct exports for new components
-export { Popover } from './components/popover/popover';
-export { Tooltip } from './components/tooltip/tooltip';
-export { ThemeControl } from './components/theme-control/theme-control';
-export { Drawer } from './components/drawer/drawer';
-export { Table, TableHead, TableBody, TableRow, TableCell, TableContainer } from './components/table/Table';
-export { PageIndex } from './components/page-index/PageIndex';
-// Individual input components for tree-shaking
-export { InputText } from './components/input/InputText';
-export { InputEmail } from './components/input/InputEmail';
-export { InputPassword } from './components/input/InputPassword';
-export { InputSearch } from './components/input/InputSearch';
-export { InputTel } from './components/input/InputTel';
-export { InputUrl } from './components/input/InputUrl';
-export { InputNumber } from './components/input/InputNumber';
-export { InputDate } from './components/input/InputDate';
-export { InputTime } from './components/input/InputTime';
-export { InputDateTime } from './components/input/InputDateTime';
-export { List, ListItem } from './components/list/List';
-export { Select } from './components/select/Select';
-
-// Theme utilities
-export * from './utils/theme';
-
-// User preferences utilities
-export * from './utils/user-preferences';