@archbase/components 4.4.0 → 4.6.0

package/src/display/ArchbaseGlowingCards.tsx

@@ -0,0 +1,204 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  type CSSProperties,
+  type KeyboardEvent,
+  type ReactNode,
+  type RefObject,
+} from 'react';
+import { Box, Paper } from '@mantine/core';
+import { useReducedMotion } from '@mantine/hooks';
+
+export interface ArchbaseGlowingCardsProps {
+  children: ReactNode;
+  /** Raio do brilho que acompanha o ponteiro, em pixels. */
+  glowRadius?: number;
+  /** Opacidade do brilho, entre 0 e 1. */
+  glowOpacity?: number;
+  gap?: number | string;
+  /** Colunas fixas. Ausente, ajusta ao espaco disponivel. */
+  columns?: number;
+  /** Largura minima do cartao quando as colunas sao automaticas. */
+  minCardWidth?: number;
+  className?: string;
+  style?: CSSProperties;
+}
+
+export interface ArchbaseGlowingCardProps {
+  children: ReactNode;
+  /** Cor do brilho deste cartao. */
+  glowColor?: string;
+  /** Eleva o cartao ao passar o ponteiro. */
+  hoverEffect?: boolean;
+  onClick?: () => void;
+  className?: string;
+  style?: CSSProperties;
+}
+
+const ContextoDoGrupo = createContext<RefObject<HTMLDivElement | null> | null>(null);
+
+/**
+ * Grade de cartoes com um unico brilho que atravessa todos, acompanhando o
+ * ponteiro.
+ *
+ * Adaptado de Lightswind UI (MIT, Muhilan / codewithMUHILAN).
+ *
+ * A posicao do ponteiro e publicada em custom properties no container, e cada
+ * cartao publica o proprio deslocamento dentro dele. O gradiente subtrai um do
+ * outro, o que faz o foco atravessar a grade como uma luz unica em vez de
+ * acender dentro de cada cartao isoladamente.
+ *
+ * Nada disso passa por estado do React: mover o ponteiro sobre uma grade grande
+ * nao dispara render. O original recalculava estado por evento, o que
+ * transforma um enfeite em travamento quando os cartoes se multiplicam.
+ */
+export function ArchbaseGlowingCards({
+  children,
+  glowRadius = 280,
+  glowOpacity = 0.35,
+  gap = 16,
+  columns,
+  minCardWidth = 240,
+  className,
+  style,
+}: ArchbaseGlowingCardsProps) {
+  const container = useRef<HTMLDivElement>(null);
+  const movimentoReduzido = useReducedMotion();
+
+  const aoMover = useCallback(
+    (evento: React.PointerEvent<HTMLDivElement>) => {
+      if (movimentoReduzido) return;
+      const elemento = container.current;
+      if (!elemento) return;
+
+      const caixa = elemento.getBoundingClientRect();
+      elemento.style.setProperty('--archbase-glow-x', `${evento.clientX - caixa.left}px`);
+      elemento.style.setProperty('--archbase-glow-y', `${evento.clientY - caixa.top}px`);
+      elemento.style.setProperty('--archbase-glow-alpha', String(glowOpacity));
+    },
+    [glowOpacity, movimentoReduzido],
+  );
+
+  const aoSair = useCallback(() => {
+    container.current?.style.setProperty('--archbase-glow-alpha', '0');
+  }, []);
+
+  return (
+    <ContextoDoGrupo.Provider value={container}>
+      <Box
+        ref={container}
+        className={className}
+        onPointerMove={aoMover}
+        onPointerLeave={aoSair}
+        style={
+          {
+            display: 'grid',
+            gap,
+            gridTemplateColumns: columns
+              ? `repeat(${columns}, minmax(0, 1fr))`
+              : `repeat(auto-fit, minmax(${minCardWidth}px, 1fr))`,
+            '--archbase-glow-x': '50%',
+            '--archbase-glow-y': '50%',
+            '--archbase-glow-radius': `${glowRadius}px`,
+            // Com movimento reduzido o brilho fica visivel e parado no centro:
+            // o desenho permanece, o movimento nao.
+            '--archbase-glow-alpha': movimentoReduzido ? String(glowOpacity) : '0',
+            ...style,
+          } as CSSProperties
+        }
+      >
+        {children}
+      </Box>
+    </ContextoDoGrupo.Provider>
+  );
+}
+
+/**
+ * Cartao do grupo. Fora de `ArchbaseGlowingCards` continua valido — apenas sem
+ * o brilho, porque as custom properties nao existem.
+ */
+export function ArchbaseGlowingCard({
+  children,
+  glowColor = 'var(--mantine-primary-color-filled)',
+  hoverEffect = true,
+  onClick,
+  className,
+  style,
+}: ArchbaseGlowingCardProps) {
+  const cartao = useRef<HTMLDivElement>(null);
+  const container = useContext(ContextoDoGrupo);
+  const interativo = typeof onClick === 'function';
+
+  // O deslocamento do cartao dentro do grupo muda com o layout, nao com o
+  // ponteiro: medir aqui mantem o movimento livre de JavaScript.
+  useEffect(() => {
+    const elemento = cartao.current;
+    const pai = container?.current;
+    if (!elemento || !pai) return;
+
+    const medir = () => {
+      const c = elemento.getBoundingClientRect();
+      const p = pai.getBoundingClientRect();
+      elemento.style.setProperty('--archbase-card-x', `${c.left - p.left}px`);
+      elemento.style.setProperty('--archbase-card-y', `${c.top - p.top}px`);
+    };
+
+    medir();
+    if (typeof ResizeObserver === 'undefined') return;
+    const observador = new ResizeObserver(medir);
+    observador.observe(pai);
+    observador.observe(elemento);
+    return () => observador.disconnect();
+  }, [container]);
+
+  const aoTeclar = useCallback(
+    (evento: KeyboardEvent<HTMLDivElement>) => {
+      if (!interativo) return;
+      if (evento.key === 'Enter' || evento.key === ' ') {
+        evento.preventDefault();
+        onClick?.();
+      }
+    },
+    [interativo, onClick],
+  );
+
+  return (
+    <Paper
+      ref={cartao}
+      withBorder
+      radius="md"
+      p="md"
+      className={className}
+      onClick={onClick}
+      // Cartao clicavel precisa ser alcancavel por teclado; cartao decorativo
+      // nao deve entrar na ordem de foco.
+      role={interativo ? 'button' : undefined}
+      tabIndex={interativo ? 0 : undefined}
+      onKeyDown={interativo ? aoTeclar : undefined}
+      style={{
+        position: 'relative',
+        overflow: 'hidden',
+        cursor: interativo ? 'pointer' : undefined,
+        transition: hoverEffect ? 'transform 160ms ease, box-shadow 160ms ease' : undefined,
+        ...style,
+      }}
+    >
+      <span
+        aria-hidden
+        style={{
+          position: 'absolute',
+          inset: 0,
+          pointerEvents: 'none',
+          opacity: 'var(--archbase-glow-alpha, 0)' as unknown as number,
+          transition: 'opacity 200ms ease',
+          background: `radial-gradient(var(--archbase-glow-radius, 280px) circle at calc(var(--archbase-glow-x, 50%) - var(--archbase-card-x, 0px)) calc(var(--archbase-glow-y, 50%) - var(--archbase-card-y, 0px)), ${glowColor}, transparent 60%)`,
+        }}
+      />
+
+      <div style={{ position: 'relative' }}>{children}</div>
+    </Paper>
+  );
+}

package/src/display/index.ts

@@ -96,3 +96,12 @@ export type {
   ArchbasePhotoAlbumLayout,
 } from './ArchbasePhotoAlbum';
 
+
+export { ArchbaseGlowingCards, ArchbaseGlowingCard } from './ArchbaseGlowingCards';
+export type {
+  ArchbaseGlowingCardsProps,
+  ArchbaseGlowingCardProps,
+} from './ArchbaseGlowingCards';
+
+export { ArchbaseDeviceFrame } from './ArchbaseDeviceFrame';
+export type { ArchbaseDeviceFrameProps, ArchbaseDeviceVariant } from './ArchbaseDeviceFrame';

package/src/feedback/ArchbaseStickyTopBar.tsx

@@ -0,0 +1,160 @@
+import { useCallback, useEffect, useState, type ReactNode } from 'react';
+import { ActionIcon, Box, Group, type MantineColor } from '@mantine/core';
+import { useReducedMotion } from '@mantine/hooks';
+import { IconX } from '@tabler/icons-react';
+import { AnimatePresence, motion } from 'framer-motion';
+
+export interface ArchbaseStickyTopBarProps {
+  children: ReactNode;
+  /**
+   * Visibilidade controlada. Ignorada quando `showOnScroll` esta ligado.
+   */
+  visible?: boolean;
+  /** Aparece depois de rolar; util para barra de acao que so importa adiante. */
+  showOnScroll?: boolean;
+  /** Rolagem, em pixels, a partir da qual a barra aparece. */
+  scrollThreshold?: number;
+  /** Botao de fechar. */
+  dismissible?: boolean;
+  onDismiss?: () => void;
+  /**
+   * Chave de persistencia da dispensa. Definida, a barra nao volta a aparecer
+   * para quem ja a fechou — mensagem de sistema que reaparece a cada
+   * navegacao vira ruido e ensina o usuario a ignorar o lugar todo.
+   */
+  dismissStorageKey?: string;
+  color?: MantineColor;
+  /** Fixa no topo da janela. Desligado, acompanha o fluxo da pagina. */
+  sticky?: boolean;
+  /** Altura reservada, em pixels. */
+  height?: number;
+  zIndex?: number;
+  /**
+   * Papel semantico. `status` para informacao passageira; `region` para
+   * conteudo que o usuario pode querer reencontrar.
+   */
+  role?: 'status' | 'region' | 'alert';
+  'aria-label'?: string;
+  className?: string;
+}
+
+function jaDispensada(chave?: string): boolean {
+  if (!chave || typeof window === 'undefined') return false;
+  try {
+    return window.localStorage.getItem(chave) === 'dispensada';
+  } catch {
+    // Modo privado ou armazenamento bloqueado: a barra volta a aparecer, que e
+    // o comportamento menos surpreendente entre os dois ruins.
+    return false;
+  }
+}
+
+/**
+ * Barra fixa no topo, para aviso de sistema ou acao contextual.
+ *
+ * Adaptado de Lightswind UI (MIT, Muhilan / codewithMUHILAN), com o que faltava
+ * para uso em produto:
+ *
+ * - **Dispensavel, com memoria opcional.** O original nao fechava. Aviso que
+ *   nao se fecha e o usuario cobre com a mao.
+ * - **Semantica.** Era um `div` mudo; agora recebe papel e rotulo, e um leitor
+ *   de tela anuncia a mensagem quando ela chega.
+ * - **`useSyncExternalStore` nao entra aqui, mas o listener de rolagem e
+ *   passivo** — sem isso o navegador nao pode adiantar a rolagem enquanto o
+ *   manipulador roda.
+ * - **Movimento reduzido** troca o deslize por aparecer e sumir.
+ */
+export function ArchbaseStickyTopBar({
+  children,
+  visible = true,
+  showOnScroll = false,
+  scrollThreshold = 200,
+  dismissible = false,
+  onDismiss,
+  dismissStorageKey,
+  color = 'blue',
+  sticky = true,
+  height = 44,
+  zIndex = 200,
+  role = 'status',
+  'aria-label': ariaLabel,
+  className,
+}: ArchbaseStickyTopBarProps) {
+  const movimentoReduzido = useReducedMotion();
+  const [dispensada, setDispensada] = useState(() => jaDispensada(dismissStorageKey));
+  const [passouDoLimite, setPassouDoLimite] = useState(false);
+
+  useEffect(() => {
+    if (!showOnScroll || typeof window === 'undefined') return;
+
+    const aoRolar = () => setPassouDoLimite(window.scrollY > scrollThreshold);
+    aoRolar();
+    // `passive` permite ao navegador rolar sem esperar este manipulador.
+    window.addEventListener('scroll', aoRolar, { passive: true });
+    return () => window.removeEventListener('scroll', aoRolar);
+  }, [showOnScroll, scrollThreshold]);
+
+  const dispensar = useCallback(() => {
+    setDispensada(true);
+    if (dismissStorageKey && typeof window !== 'undefined') {
+      try {
+        window.localStorage.setItem(dismissStorageKey, 'dispensada');
+      } catch {
+        // Sem armazenamento, a dispensa vale so para esta sessao.
+      }
+    }
+    onDismiss?.();
+  }, [dismissStorageKey, onDismiss]);
+
+  const aparecendo = !dispensada && (showOnScroll ? passouDoLimite : visible);
+
+  const transicao = movimentoReduzido
+    ? { duration: 0.01 }
+    : { type: 'spring' as const, stiffness: 320, damping: 30 };
+
+  return (
+    <AnimatePresence>
+      {aparecendo && (
+        <motion.div
+          initial={movimentoReduzido ? { opacity: 0 } : { y: -height, opacity: 0 }}
+          animate={movimentoReduzido ? { opacity: 1 } : { y: 0, opacity: 1 }}
+          exit={movimentoReduzido ? { opacity: 0 } : { y: -height, opacity: 0 }}
+          transition={transicao}
+          style={{
+            position: sticky ? 'sticky' : 'relative',
+            top: 0,
+            zIndex,
+            width: '100%',
+          }}
+        >
+          <Box
+            className={className}
+            role={role}
+            aria-label={ariaLabel}
+            aria-live={role === 'alert' ? 'assertive' : 'polite'}
+            bg={color}
+            style={{ minHeight: height, color: 'var(--mantine-color-white)' }}
+            px="md"
+            py={6}
+          >
+            <Group justify="space-between" wrap="nowrap" h="100%">
+              <Box style={{ flex: 1, minWidth: 0 }}>{children}</Box>
+
+              {dismissible && (
+                <ActionIcon
+                  variant="subtle"
+                  color="gray"
+                  aria-label="Fechar aviso"
+                  onClick={dispensar}
+                  style={{ color: 'inherit' }}
+                >
+                  <IconX size={16} />
+                </ActionIcon>
+              )}
+            </Group>
+          </Box>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}

package/src/feedback/index.ts

@@ -23,4 +23,6 @@ export type {
 } from './ArchbaseSkeleton';
 
 export { ArchbaseRipple, useArchbaseRipple } from './ArchbaseRipple';
-export type { ArchbaseRippleProps, UseArchbaseRippleOptions, UseArchbaseRippleReturn } from './ArchbaseRipple';
+export type { ArchbaseRippleProps, UseArchbaseRippleOptions, UseArchbaseRippleReturn } from './ArchbaseRipple';
+export { ArchbaseStickyTopBar } from './ArchbaseStickyTopBar';
+export type { ArchbaseStickyTopBarProps } from './ArchbaseStickyTopBar';

package/src/list/ArchbaseReorderList.tsx

@@ -0,0 +1,249 @@
+import { useCallback, useRef, useState, type KeyboardEvent, type ReactNode } from 'react';
+import { ActionIcon, Group, Paper, Text, VisuallyHidden } from '@mantine/core';
+import { IconGripVertical, IconX } from '@tabler/icons-react';
+import { Reorder, useDragControls } from 'framer-motion';
+
+export interface ArchbaseReorderListProps<T> {
+  /** Itens na ordem corrente. Componente controlado. */
+  items: T[];
+  /** Identidade estavel do item. */
+  getItemId: (item: T) => string | number;
+  /** Nova ordem. Sem isto o componente nao teria como refletir o arrasto. */
+  onReorder: (items: T[]) => void;
+  /** Conteudo do item. Ausente, usa `getItemLabel`. */
+  renderItem?: (item: T, estado: { arrastando: boolean; indice: number }) => ReactNode;
+  /** Rotulo textual, usado no conteudo padrao e nos anuncios de acessibilidade. */
+  getItemLabel?: (item: T) => string;
+  /** Descricao secundaria no conteudo padrao. */
+  getItemDescription?: (item: T) => string | undefined;
+  onRemove?: (item: T) => void;
+  disabled?: boolean;
+  gap?: number;
+  className?: string;
+  labels?: {
+    dragHandle?: string;
+    remove?: string;
+    /** `{item}`, `{de}` e `{para}` sao substituidos. */
+    moved?: string;
+    instructions?: string;
+  };
+}
+
+const ROTULOS_PADRAO = {
+  dragHandle: 'Arrastar para reordenar',
+  remove: 'Remover',
+  moved: '{item} movido da posicao {de} para {para}',
+  instructions:
+    'Use as setas para cima e para baixo com a tecla Alt para mover o item selecionado.',
+};
+
+function interpolar(texto: string, valores: Record<string, string | number>): string {
+  return texto.replace(/\{(\w+)\}/g, (m, chave: string) => String(valores[chave] ?? m));
+}
+
+/**
+ * Lista reordenavel por arrasto e por teclado.
+ *
+ * Unifica dois componentes do Lightswind UI (MIT, Muhilan / codewithMUHILAN) —
+ * `drag-order-list` e `draggable-reorder-list` — que resolviam o mesmo problema
+ * com implementacoes diferentes. Entregar os dois seria oferecer duas respostas
+ * para uma pergunta.
+ *
+ * Diferencas em relacao aos originais:
+ *
+ * - **Reordenacao por teclado.** Arrastar e, por natureza, inacessivel: quem
+ *   navega por teclado nao tem gesto equivalente. Aqui `Alt+Setas` move o item
+ *   focado, e cada movimento e anunciado por regiao viva. Sem isso, a
+ *   funcionalidade simplesmente nao existe para parte dos usuarios.
+ * - **Controlado.** O original copiava `items` para estado interno e disparava
+ *   `onReorder` num efeito com `[list]` na dependencia — o que notificava ja na
+ *   montagem, sem ninguem ter reordenado nada, e ignorava mudancas vindas de
+ *   fora depois disso.
+ * - **Generico.** O `drag-order-list` fixava a forma do item em `{ title,
+ *   subtitle, date, link }`. Numa biblioteca isso obriga o consumidor a
+ *   traduzir o dominio dele para um formato alheio.
+ */
+export function ArchbaseReorderList<T>({
+  items,
+  getItemId,
+  onReorder,
+  renderItem,
+  getItemLabel,
+  getItemDescription,
+  onRemove,
+  disabled = false,
+  gap = 8,
+  className,
+  labels,
+}: ArchbaseReorderListProps<T>) {
+  const textos = { ...ROTULOS_PADRAO, ...labels };
+  const [anuncio, setAnuncio] = useState('');
+
+  const rotuloDe = useCallback(
+    (item: T) => getItemLabel?.(item) ?? String(getItemId(item)),
+    [getItemLabel, getItemId],
+  );
+
+  const mover = useCallback(
+    (de: number, para: number) => {
+      if (disabled) return;
+      if (para < 0 || para >= items.length || de === para) return;
+
+      const proximos = [...items];
+      const [movido] = proximos.splice(de, 1);
+      if (movido === undefined) return;
+      proximos.splice(para, 0, movido);
+
+      onReorder(proximos);
+      setAnuncio(
+        interpolar(textos.moved, { item: rotuloDe(movido), de: de + 1, para: para + 1 }),
+      );
+    },
+    [items, onReorder, disabled, textos.moved, rotuloDe],
+  );
+
+  return (
+    <>
+      {/* Regiao viva: o leitor de tela precisa saber que a ordem mudou, senao a
+          reordenacao por teclado acontece sem retorno algum. */}
+      <VisuallyHidden aria-live="polite" role="status">
+        {anuncio}
+      </VisuallyHidden>
+
+      <Reorder.Group
+        axis="y"
+        values={items}
+        onReorder={onReorder}
+        className={className}
+        style={{ listStyle: 'none', margin: 0, padding: 0, display: 'grid', gap }}
+      >
+        {items.map((item, indice) => (
+          <ArchbaseReorderItem
+            key={getItemId(item)}
+            item={item}
+            indice={indice}
+            total={items.length}
+            disabled={disabled}
+            rotulo={rotuloDe(item)}
+            descricao={getItemDescription?.(item)}
+            renderItem={renderItem}
+            onMover={mover}
+            onRemove={onRemove}
+            textos={textos}
+          />
+        ))}
+      </Reorder.Group>
+    </>
+  );
+}
+
+interface ItemProps<T> {
+  item: T;
+  indice: number;
+  total: number;
+  disabled: boolean;
+  rotulo: string;
+  descricao?: string;
+  renderItem?: (item: T, estado: { arrastando: boolean; indice: number }) => ReactNode;
+  onMover: (de: number, para: number) => void;
+  onRemove?: (item: T) => void;
+  textos: typeof ROTULOS_PADRAO;
+}
+
+function ArchbaseReorderItem<T>({
+  item,
+  indice,
+  total,
+  disabled,
+  rotulo,
+  descricao,
+  renderItem,
+  onMover,
+  onRemove,
+  textos,
+}: ItemProps<T>) {
+  const controles = useDragControls();
+  const [arrastando, setArrastando] = useState(false);
+  const referencia = useRef<HTMLLIElement>(null);
+
+  const aoTeclar = useCallback(
+    (evento: KeyboardEvent<HTMLLIElement>) => {
+      if (disabled || !evento.altKey) return;
+
+      if (evento.key === 'ArrowUp') {
+        evento.preventDefault();
+        onMover(indice, indice - 1);
+        // O foco acompanha o item, nao a posicao: sem isto, mover duas vezes
+        // seguidas exigiria reencontrar o item na lista.
+        requestAnimationFrame(() => referencia.current?.focus());
+      } else if (evento.key === 'ArrowDown') {
+        evento.preventDefault();
+        onMover(indice, indice + 1);
+        requestAnimationFrame(() => referencia.current?.focus());
+      }
+    },
+    [disabled, indice, onMover],
+  );
+
+  return (
+    <Reorder.Item
+      ref={referencia}
+      value={item}
+      dragListener={false}
+      dragControls={controles}
+      onDragStart={() => setArrastando(true)}
+      onDragEnd={() => setArrastando(false)}
+      tabIndex={disabled ? -1 : 0}
+      onKeyDown={aoTeclar}
+      aria-roledescription="Item reordenavel"
+      aria-label={`${rotulo}. ${indice + 1} de ${total}. ${textos.instructions}`}
+      style={{ listStyle: 'none' }}
+    >
+      <Paper withBorder p="xs" radius="md" shadow={arrastando ? 'md' : undefined}>
+        <Group gap="sm" wrap="nowrap">
+          <ActionIcon
+            variant="subtle"
+            color="gray"
+            aria-label={textos.dragHandle}
+            disabled={disabled}
+            // O arrasto so comeca pela alca: arrastar o item inteiro impede
+            // selecionar texto e clicar em controles dentro dele.
+            onPointerDown={(evento) => !disabled && controles.start(evento)}
+            style={{ cursor: disabled ? 'not-allowed' : 'grab', touchAction: 'none' }}
+          >
+            <IconGripVertical size={18} />
+          </ActionIcon>
+
+          <div style={{ flex: 1, minWidth: 0 }}>
+            {renderItem ? (
+              renderItem(item, { arrastando, indice })
+            ) : (
+              <>
+                <Text size="sm" fw={500} truncate>
+                  {rotulo}
+                </Text>
+                {descricao && (
+                  <Text size="xs" c="dimmed" truncate>
+                    {descricao}
+                  </Text>
+                )}
+              </>
+            )}
+          </div>
+
+          {onRemove && (
+            <ActionIcon
+              variant="subtle"
+              color="red"
+              aria-label={`${textos.remove}: ${rotulo}`}
+              disabled={disabled}
+              onClick={() => onRemove(item)}
+            >
+              <IconX size={16} />
+            </ActionIcon>
+          )}
+        </Group>
+      </Paper>
+    </Reorder.Item>
+  );
+}

package/src/list/index.ts

@@ -10,3 +10,6 @@ export * from './treeview';
 
 export { ArchbaseTreeList } from './ArchbaseTreeList';
 export type { ArchbaseTreeListProps, ArchbaseTreeListColumn } from './ArchbaseTreeList';
+
+export { ArchbaseReorderList } from './ArchbaseReorderList';
+export type { ArchbaseReorderListProps } from './ArchbaseReorderList';