@evolution-soft/ui 1.0.0 → 1.0.3

package/cli/index.js

@@ -0,0 +1,386 @@
+#!/usr/bin/env node
+import { existsSync, mkdirSync, copyFileSync, readdirSync, statSync, readFileSync } from 'node:fs';
+import { join, dirname, extname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { createInterface } from 'node:readline';
+
+// ─── ANSI colours (zero deps) ────────────────────────────────────────────────
+const c = {
+  reset: '\x1b[0m',
+  bold: '\x1b[1m',
+  dim: '\x1b[2m',
+  green: '\x1b[32m',
+  cyan: '\x1b[36m',
+  yellow: '\x1b[33m',
+  red: '\x1b[31m',
+  blue: '\x1b[34m',
+  white: '\x1b[37m',
+};
+const clr = (color, text) => `${c[color]}${text}${c.reset}`;
+const ok = (msg) => console.log(`${clr('green', '✔')} ${msg}`);
+const info = (msg) => console.log(`${clr('cyan', 'ℹ')} ${msg}`);
+const warn = (msg) => console.log(`${clr('yellow', '⚠')} ${msg}`);
+const err = (msg) => console.error(`${clr('red', '✖')} ${msg}`);
+const title = (msg) => console.log(`\n${clr('bold', clr('blue', msg))}`);
+
+// ─── Paths ────────────────────────────────────────────────────────────────────
+const PKG_ROOT = join(dirname(fileURLToPath(import.meta.url)), '..');
+const CWD = process.cwd();
+
+// ─── Component registry ───────────────────────────────────────────────────────
+// Each entry: { name, src relative to PKG_ROOT, dest relative to CWD, category }
+function buildRegistry() {
+  const registry = [];
+
+  // UI primitives — components/ui/*.{tsx,ts}
+  const uiDir = join(PKG_ROOT, 'components', 'ui');
+  for (const file of readdirSync(uiDir)) {
+    const ext = extname(file);
+    if (ext !== '.tsx' && ext !== '.ts') continue;
+    const name = file.replace(ext, '');
+    registry.push({
+      name,
+      src: join('components', 'ui', file),
+      dest: join('components', 'ui', file),
+      category: 'ui',
+    });
+  }
+
+  // Custom components — components/<folder>/index.tsx
+  const compDir = join(PKG_ROOT, 'components');
+  for (const folder of readdirSync(compDir)) {
+    if (folder === 'ui') continue;
+    const folderPath = join(compDir, folder);
+    if (!statSync(folderPath).isDirectory()) continue;
+    const indexFile = join(folderPath, 'index.tsx');
+    if (!existsSync(indexFile)) continue;
+    registry.push({
+      name: folder,
+      src: join('components', folder, 'index.tsx'),
+      dest: join('components', folder, 'index.tsx'),
+      category: 'custom',
+    });
+    // Sub-components (e.g. header/components/*.tsx)
+    const subCompDir = join(folderPath, 'components');
+    if (existsSync(subCompDir) && statSync(subCompDir).isDirectory()) {
+      for (const sub of readdirSync(subCompDir)) {
+        const ext = extname(sub);
+        if (ext !== '.tsx' && ext !== '.ts') continue;
+        registry.push({
+          name: `${folder}/${sub.replace(ext, '')}`,
+          src: join('components', folder, 'components', sub),
+          dest: join('components', folder, 'components', sub),
+          category: 'custom',
+        });
+      }
+    }
+  }
+
+  // Contexts
+  const ctxDir = join(PKG_ROOT, 'contexts');
+  if (existsSync(ctxDir)) {
+    for (const file of readdirSync(ctxDir)) {
+      const ext = extname(file);
+      if (ext !== '.tsx' && ext !== '.ts') continue;
+      registry.push({
+        name: `context/${file.replace(ext, '')}`,
+        src: join('contexts', file),
+        dest: join('contexts', file),
+        category: 'context',
+      });
+    }
+  }
+
+  // Hooks
+  const hooksDir = join(PKG_ROOT, 'hooks');
+  if (existsSync(hooksDir)) {
+    for (const file of readdirSync(hooksDir)) {
+      const ext = extname(file);
+      if (ext !== '.tsx' && ext !== '.ts') continue;
+      registry.push({
+        name: `hook/${file.replace(ext, '')}`,
+        src: join('hooks', file),
+        dest: join('hooks', file),
+        category: 'hook',
+      });
+    }
+  }
+
+  // Lib
+  const libDir = join(PKG_ROOT, 'lib');
+  if (existsSync(libDir)) {
+    for (const file of readdirSync(libDir)) {
+      const ext = extname(file);
+      if (ext !== '.tsx' && ext !== '.ts') continue;
+      registry.push({
+        name: `lib/${file.replace(ext, '')}`,
+        src: join('lib', file),
+        dest: join('lib', file),
+        category: 'lib',
+      });
+    }
+  }
+
+  // Stores
+  const storesDir = join(PKG_ROOT, 'stores');
+  if (existsSync(storesDir)) {
+    for (const file of readdirSync(storesDir)) {
+      const ext = extname(file);
+      if (ext !== '.tsx' && ext !== '.ts') continue;
+      registry.push({
+        name: `store/${file.replace(ext, '')}`,
+        src: join('stores', file),
+        dest: join('stores', file),
+        category: 'store',
+      });
+    }
+  }
+
+  return registry;
+}
+
+// ─── File copy helper ─────────────────────────────────────────────────────────
+function copyComponent(entry, force = false) {
+  const srcPath = join(PKG_ROOT, entry.src);
+  const destPath = join(CWD, entry.dest);
+  const destDir = dirname(destPath);
+
+  if (!existsSync(srcPath)) {
+    err(`Source not found: ${entry.src}`);
+    return false;
+  }
+
+  if (existsSync(destPath) && !force) {
+    warn(`Already exists (use --force to overwrite): ${entry.dest}`);
+    return false;
+  }
+
+  mkdirSync(destDir, { recursive: true });
+  copyFileSync(srcPath, destPath);
+  ok(`${entry.dest}`);
+  return true;
+}
+
+// ─── Commands ─────────────────────────────────────────────────────────────────
+function cmdList(registry) {
+  title('@evolution-soft/ui — Componentes disponíveis');
+
+  const categories = {
+    ui: { label: 'UI Primitivos', items: [] },
+    custom: { label: 'Componentes Customizados', items: [] },
+    context: { label: 'Contextos', items: [] },
+    hook: { label: 'Hooks', items: [] },
+    lib: { label: 'Lib', items: [] },
+    store: { label: 'Stores', items: [] },
+  };
+
+  for (const entry of registry) {
+    categories[entry.category]?.items.push(entry.name);
+  }
+
+  for (const [, { label, items }] of Object.entries(categories)) {
+    if (!items.length) continue;
+    console.log(`\n  ${clr('bold', label)}`);
+    for (const name of items) {
+      console.log(`    ${clr('dim', '·')} ${name}`);
+    }
+  }
+  console.log('');
+}
+
+function cmdAdd(registry, names, force) {
+  if (!names.length) {
+    err('Especifica pelo menos um componente. Exemplo: npx @evolution-soft/ui add button');
+    err('Ou adiciona todos: npx @evolution-soft/ui add --all');
+    process.exit(1);
+  }
+
+  const all = names.includes('--all');
+  const targets = all ? registry : registry.filter(e => names.includes(e.name));
+
+  if (!all && targets.length === 0) {
+    err(`Componente(s) não encontrado(s): ${names.join(', ')}`);
+    info('Usa "npx @evolution-soft/ui list" para ver os disponíveis.');
+    process.exit(1);
+  }
+
+  title(all ? 'Adicionando todos os componentes…' : `Adicionando: ${names.join(', ')}`);
+
+  let added = 0;
+  let skipped = 0;
+  for (const entry of targets) {
+    const result = copyComponent(entry, force);
+    result ? added++ : skipped++;
+  }
+
+  console.log('');
+  ok(`${added} ficheiro(s) adicionado(s). ${skipped ? clr('yellow', `${skipped} ignorado(s).`) : ''}`);
+  if (skipped) info('Usa --force para sobrescrever ficheiros existentes.');
+}
+
+function cmdUpdate(registry, force) {
+  title('Actualizando componentes existentes…');
+
+  const existing = registry.filter(e => existsSync(join(CWD, e.dest)));
+
+  if (!existing.length) {
+    warn('Nenhum componente encontrado no projecto. Usa "add" para instalar.');
+    process.exit(0);
+  }
+
+  info(`${existing.length} componente(s) encontrado(s) no projecto.`);
+  console.log('');
+
+  let updated = 0;
+  for (const entry of existing) {
+    copyComponent(entry, true);
+    updated++;
+  }
+
+  console.log('');
+  ok(`${updated} componente(s) actualizado(s).`);
+}
+
+async function cmdInteractive(registry) {
+  title('@evolution-soft/ui — Assistente de instalação');
+  console.log(`\n  ${clr('dim', 'Selecciona os componentes que queres adicionar ao projecto.')}\n`);
+
+  const categories = {};
+  for (const entry of registry) {
+    if (!categories[entry.category]) categories[entry.category] = [];
+    categories[entry.category].push(entry);
+  }
+
+  const categoryLabels = {
+    ui: 'UI Primitivos',
+    custom: 'Componentes Customizados',
+    context: 'Contextos',
+    hook: 'Hooks',
+    lib: 'Lib',
+    store: 'Stores',
+  };
+
+  const allEntries = [];
+  let idx = 1;
+  for (const [cat, entries] of Object.entries(categories)) {
+    console.log(`  ${clr('bold', categoryLabels[cat] ?? cat)}`);
+    for (const entry of entries) {
+      const exists = existsSync(join(CWD, entry.dest));
+      const statusTag = exists ? clr('dim', '[instalado]') : '';
+      console.log(`    ${clr('cyan', String(idx).padStart(2, ' '))}. ${entry.name} ${statusTag}`);
+      allEntries.push(entry);
+      idx++;
+    }
+    console.log('');
+  }
+
+  console.log(`     ${clr('cyan', ' 0')}. ${clr('bold', 'Todos os componentes')}`);
+  console.log('');
+
+  const rl = createInterface({ input: process.stdin, output: process.stdout });
+  const question = (q) => new Promise(resolve => rl.question(q, resolve));
+
+  const answer = await question(`  ${clr('bold', 'Números dos componentes (ex: 1,3,5 ou 0 para todos):')} `);
+  rl.close();
+
+  const selected = answer.trim() === '0'
+    ? allEntries
+    : answer.split(',').map(n => allEntries[parseInt(n.trim()) - 1]).filter(Boolean);
+
+  if (!selected.length) {
+    warn('Nenhum componente seleccionado.');
+    process.exit(0);
+  }
+
+  const forceAnswer = await new Promise(resolve => {
+    const rl2 = createInterface({ input: process.stdin, output: process.stdout });
+    rl2.question(`\n  ${clr('bold', 'Sobrescrever ficheiros existentes? (s/N):')} `, ans => {
+      rl2.close();
+      resolve(ans.trim().toLowerCase() === 's');
+    });
+  });
+
+  console.log('');
+  title(`Adicionando ${selected.length} componente(s)…`);
+
+  let added = 0;
+  let skipped = 0;
+  for (const entry of selected) {
+    const result = copyComponent(entry, forceAnswer);
+    result ? added++ : skipped++;
+  }
+
+  console.log('');
+  ok(`${added} ficheiro(s) adicionado(s). ${skipped ? clr('yellow', `${skipped} ignorado(s).`) : ''}`);
+}
+
+function printHelp() {
+  console.log(`
+  ${clr('bold', '@evolution-soft/ui')} — CLI de componentes
+
+  ${clr('bold', 'Uso:')}
+    ${clr('cyan', 'npx @evolution-soft/ui')}                   Assistente interactivo
+    ${clr('cyan', 'npx @evolution-soft/ui list')}               Lista todos os componentes
+    ${clr('cyan', 'npx @evolution-soft/ui add <nome>')}         Adiciona componente(s) específico(s)
+    ${clr('cyan', 'npx @evolution-soft/ui add --all')}          Adiciona todos os componentes
+    ${clr('cyan', 'npx @evolution-soft/ui update')}             Actualiza componentes já instalados
+    ${clr('cyan', 'npx @evolution-soft/ui help')}               Mostra esta ajuda
+
+  ${clr('bold', 'Opções:')}
+    ${clr('cyan', '--force')}                                   Sobrescreve ficheiros existentes
+
+  ${clr('bold', 'Exemplos:')}
+    npx @evolution-soft/ui add button
+    npx @evolution-soft/ui add button card badge
+    npx @evolution-soft/ui add sidebar --force
+    npx @evolution-soft/ui add --all
+    npx @evolution-soft/ui update
+`);
+}
+
+// ─── Main ─────────────────────────────────────────────────────────────────────
+(async () => {
+  const args = process.argv.slice(2);
+  const command = args[0];
+  const force = args.includes('--force');
+  const filteredArgs = args.filter(a => a !== '--force');
+
+  let registry;
+  try {
+    registry = buildRegistry();
+  } catch (e) {
+    err('Erro ao carregar o registo de componentes: ' + e.message);
+    process.exit(1);
+  }
+
+  switch (command) {
+    case 'list':
+      cmdList(registry);
+      break;
+
+    case 'add': {
+      const names = filteredArgs.slice(1);
+      cmdAdd(registry, names, force);
+      break;
+    }
+
+    case 'update':
+      cmdUpdate(registry, force);
+      break;
+
+    case 'help':
+    case '--help':
+    case '-h':
+      printHelp();
+      break;
+
+    case undefined:
+      await cmdInteractive(registry);
+      break;
+
+    default:
+      err(`Comando desconhecido: "${command}"`);
+      printHelp();
+      process.exit(1);
+  }
+})();

package/components/button-icon-lottie/index.tsx

@@ -0,0 +1,46 @@
+import { useEffect, useState } from "react";
+
+import { LottieIcon } from "@/components/lottie-icon";
+
+import { Button } from "@/components/ui/button";
+
+export function ButtonIconLottie({ onToggle, icon, darkIcon, disabled }: { onToggle: () => void, icon: any, darkIcon: any, disabled?: boolean }) {
+    const [isHovered, setIsHovered] = useState(false);
+    const [isDark, setIsDark] = useState(false);
+
+    useEffect(() => {
+        const checkDarkMode = () => {
+            setIsDark(document.documentElement.classList.contains('dark'));
+        };
+
+        checkDarkMode();
+
+        const observer = new MutationObserver(checkDarkMode);
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['class']
+        });
+
+        return () => observer.disconnect();
+    }, []);
+
+    return (
+        <Button
+            variant="outline"
+            size="sm"
+            onClick={onToggle}
+            className="text-gray-500 hover:text-gray-700 p-2"
+            disabled={disabled}
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+        >
+            <LottieIcon
+                lightAnimationData={icon}
+                darkAnimationData={darkIcon}
+                className="h-4 w-4 lg:h-6 lg:w-6"
+                shouldPlay={isHovered}
+                isDark={isDark}
+            />
+        </Button>
+    );
+}

package/components/fullscreen-mode/index.tsx

@@ -0,0 +1,82 @@
+'use client'
+import { useEffect, useState } from 'react'
+import { BsFullscreen, BsFullscreenExit } from 'react-icons/bs';
+import { motion } from 'framer-motion';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/components/ui/utils';
+
+interface ToggleFullScreenModeButtonProps {
+  collapsed?: boolean;
+  className?: string;
+}
+
+export function ToggleFullScreenModeButton({ collapsed = false, className }: ToggleFullScreenModeButtonProps) {
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [isToggling, setIsToggling] = useState(false);
+
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      setIsFullscreen(!!document.fullscreenElement);
+      setIsToggling(false);
+    };
+
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+
+    return () => {
+      document.removeEventListener('fullscreenchange', handleFullscreenChange);
+    };
+  }, []);
+
+  const toggleFullscreen = () => {
+    setIsToggling(true);
+
+    if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen()
+        .catch((err) => {
+          console.error(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
+          setIsToggling(false);
+        });
+    } else {
+      document.exitFullscreen()
+        .catch((err) => {
+          console.error(`Error attempting to disable full-screen mode: ${err.message} (${err.name})`);
+          setIsToggling(false);
+        });
+    }
+  };
+
+  return (
+    <Button
+      variant="ghost"
+      size={collapsed ? 'icon' : 'default'}
+      className={cn(
+        "transition-none hover:bg-accent",
+        collapsed
+          ? "h-10 w-10 p-0"
+          : "w-full justify-start gap-3 px-3 py-2 h-auto",
+        className
+      )}
+      onClick={toggleFullscreen}
+      title={isFullscreen ? 'Sair da tela cheia' : 'Entrar em tela cheia'}
+      disabled={isToggling}
+    >
+      <motion.div
+        className="relative flex items-center"
+        initial={{ rotate: 0 }}
+        animate={{ rotate: isFullscreen ? 180 : 0 }}
+        transition={{ duration: 0.3 }}
+      >
+        {isFullscreen ? (
+          <BsFullscreenExit className="h-4 w-4 shrink-0" />
+        ) : (
+          <BsFullscreen className="h-4 w-4 shrink-0" />
+        )}
+      </motion.div>
+      {!collapsed && (
+        <span className="font-medium">
+          {isFullscreen ? 'Modo Janela' : 'Tela Cheia'}
+        </span>
+      )}
+    </Button>
+  )
+}

package/components/header/components/buttons.tsx

@@ -0,0 +1,102 @@
+'use client'
+import React from "react";
+
+import { Button } from "@/components/ui/button";
+
+import { Transition } from "@headlessui/react";
+
+type ButtonProps = React.ComponentProps<typeof Button>;
+
+interface ButtonsProps {
+  button?: ButtonProps;
+  secondButton?: ButtonProps;
+  thirdButton?: ButtonProps;
+  fourButton?: ButtonProps;
+  customItem?: React.ReactNode;
+}
+
+export function Buttons(props: ButtonsProps) {
+  return (
+    <>
+      <div className="flex gap-4 flex-col items-center justify-center md:flex-row">
+        <Transition
+          show={!!props.fourButton}
+          enter="transition ease-out duration-300"
+          enterFrom="transform opacity-0 scale-95"
+          enterTo="transform opacity-100 scale-100"
+          leave="transition ease-in duration-300"
+          leaveFrom="transform opacity-100 scale-100"
+          leaveTo="transform opacity-0 scale-95"
+        >
+          {props.fourButton && <Button {...props.fourButton} />}
+        </Transition>
+        <Transition
+          show={!!props.customItem}
+          enter="transition ease-out duration-300"
+          enterFrom="transform opacity-0 scale-95"
+          enterTo="transform opacity-100 scale-100"
+          leave="transition ease-in duration-300"
+          leaveFrom="transform opacity-100 scale-100"
+          leaveTo="transform opacity-0 scale-95"
+        >
+          {props.customItem}
+        </Transition>
+        <Transition
+          show={!!props.thirdButton}
+          enter="transition ease-out duration-300"
+          enterFrom="transform opacity-0 scale-95"
+          enterTo="transform opacity-100 scale-100"
+          leave="transition ease-in duration-300"
+          leaveFrom="transform opacity-100 scale-100"
+          leaveTo="transform opacity-0 scale-95"
+        >
+          {props.thirdButton && <Button {...props.thirdButton} />}
+        </Transition>
+        <Transition
+          show={!!props.customItem}
+          enter="transition ease-out duration-300"
+          enterFrom="transform opacity-0 scale-95"
+          enterTo="transform opacity-100 scale-100"
+          leave="transition ease-in duration-300"
+          leaveFrom="transform opacity-100 scale-100"
+          leaveTo="transform opacity-0 scale-95"
+        >
+          {props.customItem}
+        </Transition>
+        <Transition
+          show={!!props.secondButton}
+          enter="transition ease-out duration-300"
+          enterFrom="transform opacity-0 scale-95"
+          enterTo="transform opacity-100 scale-100"
+          leave="transition ease-in duration-300"
+          leaveFrom="transform opacity-100 scale-100"
+          leaveTo="transform opacity-0 scale-95"
+        >
+          {props.secondButton && <Button {...props.secondButton} />}
+        </Transition>
+        <Transition
+          show={!!props.customItem}
+          enter="transition ease-out duration-300"
+          enterFrom="transform opacity-0 scale-95"
+          enterTo="transform opacity-100 scale-100"
+          leave="transition ease-in duration-300"
+          leaveFrom="transform opacity-100 scale-100"
+          leaveTo="transform opacity-0 scale-95"
+        >
+          {props.customItem}
+        </Transition>
+        <Transition
+          show={!!props.button}
+          enter="transition ease-out duration-300"
+          enterFrom="transform opacity-0 scale-95"
+          enterTo="transform opacity-100 scale-100"
+          leave="transition ease-in duration-300"
+          leaveFrom="transform opacity-100 scale-100"
+          leaveTo="transform opacity-0 scale-95"
+        >
+          {props.button && <Button {...props.button} />}
+        </Transition>
+      </div>
+    </>
+  )
+}