Enterprise Featuresv2.1

Micro-Features Enterprise

Pequeños detalles que marcan la diferencia en una SaaS profesional. Cada feature mejora la UX y aumenta la retención.

Features

Archivos

100%

TypeScript

Celebraciones con Confetti

Animaciones de confetti para momentos especiales que mejoran la experiencia del usuario.

Ejemplo de uso

import { useCelebration } from "@/components/ui/celebration";

function MyComponent() {
  const { celebrate } = useCelebration();

  const handleSuccess = () => {
    celebrate("translation-complete");
  };
}

Características

5 tipos de celebración: translation-complete, first-book, milestone, upgrade, achievement
Presets de confetti: default, fireworks, stars, celebration, subtle
Se integra automáticamente al completar traducciones
Evita celebraciones duplicadas con localStorage

Archivos

src/hooks/use-confetti.tssrc/components/ui/celebration.tsxsrc/components/translation-completion-detector.tsx

Empty States con Ilustraciones SVG

Estados vacíos visuales con ilustraciones personalizadas para cada sección.

Ejemplo de uso

import { EmptyBooks, EmptyNotifications, EmptySearch } from "@/components/ui/empty-state";

// Uso básico
<EmptyBooks />

// Con variante compacta
<EmptySearch variant="compact" />

// Personalizado
<EmptyState
  variant="books"
  title="Sin libros"
  description="Sube tu primer libro"
  action={{ label: "Subir", href: "/upload" }}
/>

Características

6 variantes: books, notifications, search, community, documents, upload
Modo compacto para espacios reducidos
Ilustraciones SVG animadas
Botón de acción opcional

Archivos

src/components/ui/empty-state.tsx

Indicador de Seguridad de Contraseña

Validación visual de requisitos de contraseña con feedback en tiempo real.

Ejemplo de uso

import { PasswordStrength, usePasswordStrength } from "@/components/ui/password-strength";

function RegisterForm() {
  const [password, setPassword] = useState("");
  const { isStrong } = usePasswordStrength(password);

  return (
    <>
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <PasswordStrength password={password} />
    </>
  );
}

Características

5 niveles de fuerza: muy débil, débil, regular, fuerte, muy fuerte
Validaciones: 8+ caracteres, mayúscula, minúscula, número, símbolo
Barra de progreso con colores
Lista de requisitos con iconos

Archivos

src/components/ui/password-strength.tsx

Toast con Undo para Acciones Destructivas

Permite deshacer acciones como eliminar libros durante 5 segundos.

Ejemplo de uso

import { showUndoToast } from "@/hooks/use-undo-action";

const handleDelete = async (id: string) => {
  // Soft delete primero
  await softDelete(id);

  showUndoToast({
    message: "Libro eliminado",
    onUndo: async () => {
      await restore(id);
    },
    undoLabel: "Deshacer",
    duration: 5000,
  });
};

Características

Botón de deshacer integrado en toast
5 segundos por defecto (configurable)
Compatible con soft delete + restore
Feedback visual con sonner toast

Archivos

src/hooks/use-undo-action.tssrc/components/delete-book-button.tsx

Tour de Onboarding

Guía interactiva de 6 pasos para nuevos usuarios.

Ejemplo de uso

import { useOnboarding, StartTourButton } from "@/components/onboarding/onboarding-tour";

function Dashboard() {
  const { isActive, currentStep, nextStep, skipTour } = useOnboarding();

  return (
    <>
      <StartTourButton />
      {/* El tour se muestra automáticamente para nuevos usuarios */}
    </>
  );
}

Características

6 pasos: bienvenida, dashboard, biblioteca, upload, comunidad, completado
Auto-inicio para usuarios nuevos
Botón para reiniciar tour manualmente
Estado persistido en localStorage

Archivos

src/components/onboarding/onboarding-tour.tsx

Widget de Feedback

Botón flotante para reportar bugs, sugerir features o dar feedback general.

Ejemplo de uso

// Ya incluido globalmente en layout.tsx
import { FeedbackWidget } from "@/components/feedback-widget";

// Solo necesitas agregarlo una vez
<FeedbackWidget />

Características

Tipos: bug, feature, general, help
Sentimiento: positivo, neutral, negativo
Captura automática de página y user agent
Se almacena en logs (migrar a modelo Feedback)

Archivos

src/components/feedback-widget.tsxsrc/app/api/feedback/route.ts

Aviso de Expiración de Sesión

Alerta al usuario 5 minutos antes de que expire su sesión por inactividad.

Ejemplo de uso

// Ya incluido globalmente en layout.tsx
import { SessionTimeoutWarning } from "@/components/session-timeout-warning";

// Solo necesitas agregarlo una vez
<SessionTimeoutWarning />

Características

Timeout de 30 minutos (configurable)
Aviso 5 minutos antes
Detecta actividad: mouse, keyboard, scroll, touch
Botón para mantener sesión activa

Archivos

src/components/session-timeout-warning.tsx

Prompts de Upgrade Contextuales

Muestra sugerencias de upgrade cuando el usuario alcanza límites de uso.

Ejemplo de uso

import { UpgradePrompt } from "@/components/upgrade-prompt";

// Variantes: banner, card, inline
<UpgradePrompt
  variant="banner"
  usagePercent={85}
  threshold={80}
  feature="traducciones"
/>

Características

3 variantes: banner, card, inline
Se muestra cuando uso >= 80% (configurable)
Dismissible por 24 horas
Enlace directo a pricing

Archivos

src/components/upgrade-prompt.tsx

Navegación Rápida

Celebraciones con Confetti

Empty States con Ilustraciones SVG

Indicador de Seguridad de Contraseña

Toast con Undo para Acciones Destructivas

Tour de Onboarding

Widget de Feedback

Aviso de Expiración de Sesión

Prompts de Upgrade Contextuales

Componentes de Social Proof

Volver a Documentación