@hellboy/ds 0.1.2 → 0.2.7

package/src/components/input/TimePicker.tsx

@@ -1,151 +0,0 @@
-import * as React from 'react';
-
-interface TimePickerProps {
-  value: string;
-  onChange: (value: string) => void;
-  disabled?: boolean;
-  showMilliseconds?: boolean;
-  minuteStep?: 1 | 5 | 15 | 30;
-}
-
-const parseTime = (timeStr: string) => {
-  if (!timeStr) return { hours: 0, minutes: 0, seconds: 0, milliseconds: 0 };
-  const parts = timeStr.split(':');
-  const hours = parseInt(parts[0] || '0', 10);
-  const minutes = parseInt(parts[1] || '0', 10);
-  const secondsParts = (parts[2] || '0').split('.');
-  const seconds = parseInt(secondsParts[0] || '0', 10);
-  const milliseconds = parseInt(secondsParts[1] || '0', 10);
-  return { hours, minutes, seconds, milliseconds };
-};
-
-interface TimeColumnProps {
-  label: string;
-  value: number;
-  max: number;
-  field: 'hours' | 'minutes' | 'seconds' | 'milliseconds';
-  step: number;
-  disabled?: boolean;
-  onChange: (field: 'hours' | 'minutes' | 'seconds' | 'milliseconds', value: number) => void;
-}
-
-const TimeColumn: React.FC<TimeColumnProps> = ({ 
-  label, 
-  value, 
-  max, 
-  field, 
-  step, 
-  disabled, 
-  onChange 
-}) => {
-  const items = Array.from({ length: Math.floor(max / step) + 1 }, (_, i) => i * step);
-  const columnRef = React.useRef<HTMLDivElement>(null);
-
-  React.useEffect(() => {
-    if (columnRef.current) {
-      const selected = columnRef.current.querySelector('.time-picker__item--selected');
-      if (selected) {
-        selected.scrollIntoView({ block: 'center', behavior: 'smooth' });
-      }
-    }
-  }, [value]);
-
-  return (
-    <div className="time-picker__column">
-      <div className="time-picker__label">{label}</div>
-      <div className="time-picker__scroll" ref={columnRef}>
-        {items.map(item => (
-          <button
-            key={item}
-            type="button"
-            className={`time-picker__item ${item === value ? 'time-picker__item--selected' : ''}`}
-            onClick={() => onChange(field, item)}
-            disabled={disabled}
-          >
-            {String(item).padStart(field === 'milliseconds' ? 3 : 2, '0')}
-          </button>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export const TimePicker: React.FC<TimePickerProps> = ({ 
-  value, 
-  onChange, 
-  disabled,
-  showMilliseconds = false,
-  minuteStep = 1
-}) => {
-  // Manter estado interno dos valores para evitar perder seleções
-  const [internalTime, setInternalTime] = React.useState(value);
-
-  // Sincronizar estado interno quando o valor prop muda
-  React.useEffect(() => {
-    setInternalTime(value);
-  }, [value]);
-
-  const { hours, minutes, seconds, milliseconds } = parseTime(internalTime);
-
-  const handleChange = (field: 'hours' | 'minutes' | 'seconds' | 'milliseconds', newValue: number) => {
-    if (disabled) return;
-    
-    const currentParsed = parseTime(internalTime);
-    const updated = { ...currentParsed, [field]: newValue };
-    
-    let formattedTime = `${String(updated.hours).padStart(2, '0')}:${String(updated.minutes).padStart(2, '0')}:${String(updated.seconds).padStart(2, '0')}`;
-    
-    if (showMilliseconds && updated.milliseconds > 0) {
-      formattedTime += `.${String(updated.milliseconds).padStart(3, '0')}`;
-    }
-    
-    // Atualizar estado interno imediatamente
-    setInternalTime(formattedTime);
-    // E notificar o componente pai
-    onChange(formattedTime);
-  };
-
-  return (
-    <div className="time-picker">
-      <TimeColumn
-        label="Hours"
-        value={hours}
-        max={23}
-        field="hours"
-        step={1}
-        disabled={disabled}
-        onChange={handleChange}
-      />
-      <TimeColumn
-        label="Minutes"
-        value={minutes}
-        max={59}
-        field="minutes"
-        step={minuteStep}
-        disabled={disabled}
-        onChange={handleChange}
-      />
-      <TimeColumn
-        label="Seconds"
-        value={seconds}
-        max={59}
-        field="seconds"
-        step={1}
-        disabled={disabled}
-        onChange={handleChange}
-      />
-      {showMilliseconds && (
-        <TimeColumn
-          label="ms"
-          value={milliseconds}
-          max={999}
-          field="milliseconds"
-          step={1}
-          disabled={disabled}
-          onChange={handleChange}
-        />
-      )}
-    </div>
-  );
-
-};

package/src/components/input/index.ts

@@ -1,11 +0,0 @@
-// Individual input components for tree-shaking
-export { InputText, type InputTextProps } from './InputText';
-export { InputEmail, type InputEmailProps } from './InputEmail';
-export { InputPassword, type InputPasswordProps } from './InputPassword';
-export { InputSearch, type InputSearchProps } from './InputSearch';
-export { InputTel, type InputTelProps } from './InputTel';
-export { InputUrl, type InputUrlProps } from './InputUrl';
-export { InputNumber, type InputNumberProps } from './InputNumber';
-export { InputDate, type InputDateProps } from './InputDate';
-export { InputTime, type InputTimeProps } from './InputTime';
-export { InputDateTime, type InputDateTimeProps } from './InputDateTime';

package/src/components/layout/Layout.tsx

@@ -1,244 +0,0 @@
-import * as React from "react";
-import { DragHandle } from "../drag-handle";
-import { getPreference, setPreference } from "../../utils/user-preferences";
-import "../../style/components/layout/layout.css";
-
-export type LayoutVariant = "single" | "stacked" | "sidebar-main-sidebar";
-
-export interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {
-  variant?: LayoutVariant;
-  header?: React.ReactNode;
-  footer?: React.ReactNode;
-  sidebarLeft?: React.ReactNode;
-  sidebarRight?: React.ReactNode;
-  bottomBar?: React.ReactNode;
-  resizable?: boolean;
-}
-
-export const Layout: React.FC<LayoutProps> = ({
-  variant = "stacked",
-  header,
-  footer,
-  sidebarLeft,
-  sidebarRight,
-  bottomBar,
-  resizable = false,
-  children,
-  className = "",
-  ...props
-}) => {
-  const classes = ["layout", `layout--${variant}`, className].filter(Boolean).join(" ");
-
-  // Navbar constants
-  const NAVBAR_COLLAPSED_WIDTH = 72;
-  const NAVBAR_EXPAND_THRESHOLD = 210;
-  const NAVBAR_MIN_PERSIST_WIDTH = 211; // 210 + 1 to avoid auto-collapse threshold
-  const NAVBAR_MAX_WIDTH = 600;
-
-  const hasSidebarLeft = sidebarLeft != null;
-  const hasSidebarRight = sidebarRight != null;
-  const sidebarLeftIsNavbar = hasSidebarLeft && React.isValidElement(sidebarLeft) && Boolean((sidebarLeft as any).props?.isNavbar);
-  const columnCount = [hasSidebarLeft, true, hasSidebarRight].filter(Boolean).length;
-  const shouldShowResizers = resizable && columnCount >= 2;
-
-  // State for sidebar widths with preference persistence
-  const [leftSidebarWidth, setLeftSidebarWidth] = React.useState<number>(() => {
-    const v = getPreference<number>('layout.leftSidebarWidth', 280);
-    return typeof v === 'number' ? v : 280;
-  });
-  // read preferred expanded width (user configured). We keep this separate
-  // from the current effective width so collapsing (72) doesn't overwrite it.
-  const preferredLeftSidebarWidth = React.useMemo<number>(() => {
-    const v = getPreference<number>('layout.leftSidebarPreferredWidth', leftSidebarWidth);
-    // Only return valid preferred widths (>= 211px)
-    if (typeof v === 'number' && v >= NAVBAR_MIN_PERSIST_WIDTH) {
-      return v;
-    }
-    // Fallback to a safe default
-    return Math.max(NAVBAR_MIN_PERSIST_WIDTH, leftSidebarWidth);
-  }, [leftSidebarWidth]);
-  const [rightSidebarWidth, setRightSidebarWidth] = React.useState<number>(() => {
-    const v = getPreference<number>('layout.rightSidebarWidth', 300);
-    return typeof v === 'number' ? v : 300;
-  });
-
-  const clampLeftWidth = React.useCallback((width: number) => {
-    console.log('clampLeftWidth called with:', width);
-    // allow collapsed width 72; otherwise enforce expanded min 72 and max 600
-    // Remove the 128px minimum limitation to allow smoother transitions
-    if (width <= NAVBAR_COLLAPSED_WIDTH) {
-      console.log('Returning 72 (collapsed)');
-      return NAVBAR_COLLAPSED_WIDTH;
-    }
-    const result = Math.max(NAVBAR_COLLAPSED_WIDTH, Math.min(NAVBAR_MAX_WIDTH, Math.round(width)));
-    console.log('Returning clamped result:', result);
-    return result;
-  }, []);
-
-  const updateLeftSidebarWidth = React.useCallback((width: number) => {
-    console.log('updateLeftSidebarWidth called with:', width);
-    const newWidth = clampLeftWidth(width);
-    console.log('clampLeftWidth result:', newWidth);
-    setLeftSidebarWidth(newWidth);
-    // Only persist if width is valid (>= 211px)
-    if (newWidth >= NAVBAR_MIN_PERSIST_WIDTH) {
-      setPreference('layout.leftSidebarWidth', newWidth);
-    }
-  }, [clampLeftWidth]);
-
-  const handleLeftResize = React.useCallback((delta: number) => {
-    setLeftSidebarWidth((prev = 300) => {
-      const newWidthRaw = prev + delta;
-      const newWidth = clampLeftWidth(newWidthRaw);
-      
-      // Only persist widths >= 211px to avoid storing invalid values that would cause auto-collapse
-      if (newWidth >= NAVBAR_MIN_PERSIST_WIDTH) {
-        setPreference('layout.leftSidebarWidth', newWidth);
-      }
-
-      // Auto-collapse during drag only if the delta is significant (avoid micro-movements)
-      if (sidebarLeftIsNavbar && Math.abs(delta) > 5 && newWidth < NAVBAR_EXPAND_THRESHOLD) {
-        setPreference('layout.leftSidebarWidth', NAVBAR_COLLAPSED_WIDTH);
-        return NAVBAR_COLLAPSED_WIDTH;
-      }
-
-      // when user resizes to expanded widths (>=211) we also update the preferred width
-      if (newWidth >= NAVBAR_MIN_PERSIST_WIDTH) {
-        setPreference('layout.leftSidebarPreferredWidth', newWidth);
-      }
-
-      return newWidth;
-    });
-  }, [clampLeftWidth, sidebarLeftIsNavbar]);
-
-  const handleLeftResizeEnd = React.useCallback(() => {
-    setLeftSidebarWidth((currentWidth) => {
-      if (currentWidth < NAVBAR_EXPAND_THRESHOLD) {
-        // collapse to navbar width (72px) when below 210px
-        const collapsed = NAVBAR_COLLAPSED_WIDTH;
-        setPreference('layout.leftSidebarWidth', collapsed);
-        return collapsed;
-      }
-      return currentWidth;
-    });
-  }, []);
-
-  const handleRightResize = React.useCallback((delta: number) => {
-    setRightSidebarWidth((prev = 300) => {
-      const newWidth = Math.max(200, Math.min(600, prev - delta));
-      setPreference('layout.rightSidebarWidth', newWidth);
-      return newWidth;
-    });
-  }, []);
-
-  if (variant === "single") {
-    return (
-      <div className={classes} {...props}>
-        <div className="layout__container">
-          <main className="layout__main">
-            {header && <header className="layout__header">{header}</header>}
-            {children}
-            {footer && <footer className="layout__footer">{footer}</footer>}
-          </main>
-          {bottomBar && <div className="layout__bottom-bar">{bottomBar}</div>}
-        </div>
-      </div>
-    );
-  }
-
-  if (variant === "stacked") {
-    return (
-      <div className={classes} {...props}>
-        <div className="layout__container">
-          <main className="layout__main">
-            {header && <header className="layout__header">{header}</header>}
-            {children}
-            {footer && <footer className="layout__footer">{footer}</footer>}
-          </main>
-          {bottomBar && <div className="layout__bottom-bar">{bottomBar}</div>}
-        </div>
-      </div>
-    );
-  }
-
-  if (variant === "sidebar-main-sidebar") {
-    return (
-      <div className={classes} {...props}>
-        {hasSidebarLeft && (
-          <>
-            <aside
-              className="layout__sidebar layout__sidebar--left"
-              style={{ width: leftSidebarWidth }}
-            >
-              {React.isValidElement(sidebarLeft)
-                ? React.cloneElement(sidebarLeft as React.ReactElement, {
-                    sidebarWidth: leftSidebarWidth,
-                    setSidebarWidth: updateLeftSidebarWidth,
-                    preferredSidebarWidth: preferredLeftSidebarWidth,
-                    setPreferredSidebarWidth: (w: number) => {
-                      const newW = clampLeftWidth(w);
-                      // Only persist preferred widths >= 211px
-                      if (newW >= NAVBAR_MIN_PERSIST_WIDTH) {
-                        setPreference('layout.leftSidebarPreferredWidth', newW);
-                      }
-                      // if currently expanded, also apply
-                      if (leftSidebarWidth > NAVBAR_COLLAPSED_WIDTH) {
-                        setLeftSidebarWidth(newW);
-                        setPreference('layout.leftSidebarWidth', newW);
-                      }
-                    },
-                  })
-                : sidebarLeft}
-            </aside>
-            {shouldShowResizers && (
-              <DragHandle
-                orientation="vertical"
-                onResize={handleLeftResize}
-                onResizeEnd={handleLeftResizeEnd}
-              />
-            )}
-          </>
-        )}
-        <div className="layout__container">
-          <main className="layout__main">
-            {header && <header className="layout__header">{header}</header>}
-            {children}
-            {footer && <footer className="layout__footer">{footer}</footer>}
-          </main>
-          {bottomBar && <div className="layout__bottom-bar">{bottomBar}</div>}
-        </div>
-        {hasSidebarRight && (
-          <>
-            {shouldShowResizers && (
-              <DragHandle
-                orientation="vertical"
-                onResize={handleRightResize}
-              />
-            )}
-            <aside
-              className="layout__sidebar layout__sidebar--right"
-              style={{ width: rightSidebarWidth }}
-            >
-              {React.isValidElement(sidebarRight)
-                ? React.cloneElement(sidebarRight as React.ReactElement, {
-                    sidebarWidth: rightSidebarWidth,
-                    setSidebarWidth: (w: number) => {
-                      const newW = Math.max(200, Math.min(600, w));
-                      setRightSidebarWidth(newW);
-                      setPreference('layout.rightSidebarWidth', newW);
-                    },
-                  })
-                : sidebarRight}
-            </aside>
-          </>
-        )}
-      </div>
-    );
-  }
-
-  return (
-    <div className={classes} {...props}>
-      {children}
-    </div>
-  );
-};

package/src/components/layout/index.ts

@@ -1 +0,0 @@
-export { Layout, type LayoutProps, type LayoutVariant } from './Layout';

package/src/components/list/List.tsx

@@ -1,159 +0,0 @@
-import * as React from 'react';
-import { Icon } from '../icons/icons';
-import '../../style/components/list/list.css';
-
-export interface ListItemProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * Item content
-   */
-  children: React.ReactNode;
-
-  /**
-   * Icon name from our icon library
-   */
-  icon?: string;
-
-  /**
-   * Whether the item is selected
-   */
-  selected?: boolean;
-
-  /**
-   * Whether the item is disabled
-   */
-  disabled?: boolean;
-
-  /**
-   * Click handler
-   */
-  onClick?: () => void;
-
-  /**
-   * Custom class name
-   */
-  className?: string;
-
-  /**
-   * Category label for organizing items (display only)
-   */
-  category?: string;
-}
-
-export interface ListCategoryProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * Category title
-   */
-  title: string;
-
-  /**
-   * Category items
-   */
-  children: React.ReactNode;
-
-  /**
-   * Custom class name
-   */
-  className?: string;
-}
-
-export const ListItem: React.FC<ListItemProps> = ({
-  children,
-  icon,
-  selected = false,
-  disabled = false,
-  onClick,
-  category,
-  className = '',
-  ...props
-}) => {
-  const classes = [
-    'list-item',
-    selected && 'list-item--selected',
-    disabled && 'list-item--disabled',
-    onClick && !disabled && 'list-item--interactive',
-    className,
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  const handleClick = () => {
-    if (!disabled && onClick) {
-      onClick();
-    }
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (!disabled && onClick && (e.key === 'Enter' || e.key === ' ')) {
-      e.preventDefault();
-      onClick();
-    }
-  };
-
-  return (
-    <div
-      className={classes}
-      onClick={handleClick}
-      onKeyDown={handleKeyDown}
-      role={onClick ? 'button' : undefined}
-      tabIndex={onClick && !disabled ? 0 : undefined}
-      aria-selected={selected}
-      aria-disabled={disabled}
-      {...props}
-    >
-      {icon && (
-        <div className="list-item__icon">
-          <Icon name={icon} size={20} />
-        </div>
-      )}
-      <div className="list-item__content">
-        {category && <div className="list-item__category">{category}</div>}
-        <div>{children}</div>
-      </div>
-      {selected && (
-        <div className="list-item__indicator">
-          <Icon name="checkmark" size={16} />
-        </div>
-      )}
-    </div>
-  );
-};
-
-export const ListCategory: React.FC<ListCategoryProps> = ({
-  title,
-  children,
-  className = '',
-  ...props
-}) => {
-  const classes = ['list-category', className].filter(Boolean).join(' ');
-
-  return (
-    <div className={classes} {...props}>
-      <div className="list-category__title">{title}</div>
-      <div className="list-category__items">
-        {children}
-      </div>
-    </div>
-  );
-};
-
-export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * List items
-   */
-  children: React.ReactNode;
-
-  /**
-   * Custom class name
-   */
-  className?: string;
-}
-
-export const List: React.FC<ListProps> = ({ children, className = '', ...props }) => {
-  const classes = ['list', className].filter(Boolean).join(' ');
-
-  return (
-    <div className={classes} role="list" {...props}>
-      {children}
-    </div>
-  );
-};

package/src/components/list/index.ts

@@ -1 +0,0 @@
-export { List, ListItem, type ListProps, type ListItemProps } from './List';

package/src/components/navbar/MenuCategory.tsx

@@ -1,20 +0,0 @@
-import * as React from "react";
-
-export interface MenuCategoryProps {
-  title: string;
-  children: React.ReactNode;
-}
-
-export const MenuCategory: React.FC<MenuCategoryProps> = ({
-  title,
-  children
-}) => {
-  return (
-    <div className="navbar__menu-category">
-      <div className="navbar__menu-category-title">{title}</div>
-      <div className="navbar__menu-category-content">
-        {children}
-      </div>
-    </div>
-  );
-};