@riligar/elysia-sqlite 1.1.0 → 1.1.5

package/src/ui/src/components/Filter.jsx

@@ -1,302 +0,0 @@
-import { useState } from "react";
-import {
-  TextInput,
-  Paper,
-  Group,
-  Badge,
-  Stack,
-  Text,
-  Chip,
-  ActionIcon,
-  Button,
-} from "@mantine/core";
-import { useClickOutside } from "@mantine/hooks";
-import { IconSearch, IconX, IconRefresh } from "@tabler/icons-react";
-
-export function Filter({
-  data: { query, activeFilters, logicalOperators },
-  setData: { setQuery, setActiveFilters, setLogicalOperators },
-  filterOptions = {},
-}) {
-  const [showMenu, setShowMenu] = useState(false);
-  const [menuStep, setMenuStep] = useState(null);
-  const [tempKey, setTempKey] = useState(null);
-  const [tempOperator, setTempOperator] = useState(null);
-
-  const ref = useClickOutside(() => {
-    setShowMenu(false);
-    setMenuStep(null);
-    setTempKey(null);
-    setTempOperator(null);
-  });
-
-  const operators = [
-    "=",
-    "!=",
-    ">",
-    "<",
-    ">=",
-    "<=",
-    "contains",
-    "not_contains",
-  ];
-
-  const getMenuOptions = () => {
-    if (menuStep === "key") {
-      return Object.keys(filterOptions);
-    }
-    if (menuStep === "operator") {
-      return operators;
-    }
-    if (menuStep === "value" && tempKey) {
-      if (
-        Array.isArray(filterOptions[tempKey]) &&
-        filterOptions[tempKey].length > 0
-      ) {
-        return filterOptions[tempKey];
-      }
-      return [];
-    }
-    return [];
-  };
-
-  const selectMenuOption = (option) => {
-    if (menuStep === "key") {
-      setTempKey(option);
-      setMenuStep("operator");
-    } else if (menuStep === "operator") {
-      setTempOperator(option);
-      setMenuStep("value");
-    } else if (menuStep === "value" && tempKey && tempOperator) {
-      const filterValue = `${tempOperator} ${option}`;
-      setActiveFilters((prev) => {
-        const current = prev[tempKey];
-        const newValue = current ? `${current},${filterValue}` : filterValue;
-        return {
-          ...prev,
-          [tempKey]: newValue,
-        };
-      });
-      closeMenu();
-    }
-  };
-
-  const closeMenu = () => {
-    setShowMenu(false);
-    setMenuStep(null);
-    setTempKey(null);
-    setTempOperator(null);
-  };
-
-  const removeFilter = (key) => {
-    setActiveFilters((prev) => {
-      const updated = { ...prev };
-      delete updated[key];
-      return updated;
-    });
-  };
-
-  const clearAllFilters = () => {
-    setActiveFilters({});
-    setQuery("");
-  };
-
-  const hasActiveFilters = Object.keys(activeFilters).length > 0;
-
-  return (
-    <Stack gap="xs">
-      {/* Unified Search/Filter Input */}
-      <div style={{ position: "relative" }} ref={ref}>
-        <TextInput
-          placeholder="Search or filter..."
-          leftSection={<IconSearch size={14} />}
-          rightSection={
-            query.trim() || hasActiveFilters ? (
-              <ActionIcon
-                size="xs"
-                color="gray"
-                radius="sm"
-                variant="subtle"
-                onClick={clearAllFilters}
-              >
-                <IconX size={12} />
-              </ActionIcon>
-            ) : null
-          }
-          size="sm"
-          radius="md"
-          value={query}
-          onChange={(e) => setQuery(e.currentTarget.value)}
-          onFocus={() => {
-            if (!showMenu) {
-              setMenuStep("key");
-              setShowMenu(true);
-            }
-          }}
-          styles={{
-            input: {
-              border: "1px solid #E5E5E5",
-              "&:focus": {
-                borderColor: "#9CA3AF",
-              },
-            },
-          }}
-        />
-
-        {/* Filter Picker Dropdown */}
-        {showMenu && menuStep && (
-          <Paper
-            shadow="sm"
-            p="sm"
-            radius="md"
-            withBorder
-            style={{
-              position: "absolute",
-              top: "100%",
-              left: 0,
-              right: 0,
-              zIndex: 1000,
-              marginTop: 4,
-            }}
-          >
-            <Stack gap={8}>
-              <Text size="xs" fw={600} c="dimmed" tt="uppercase">
-                {menuStep === "key" && "Filter by column"}
-                {menuStep === "operator" && `Operator for ${tempKey}`}
-                {menuStep === "value" && `Value for ${tempKey} ${tempOperator}`}
-              </Text>
-              <Group gap={6} wrap="wrap">
-                {getMenuOptions().map((option, idx) => (
-                  <Chip
-                    key={idx}
-                    onClick={() => selectMenuOption(option)}
-                    variant="light"
-                    checked={false}
-                    size="xs"
-                    radius="md"
-                    styles={{
-                      label: {
-                        cursor: "pointer",
-                      },
-                    }}
-                  >
-                    {option}
-                  </Chip>
-                ))}
-                {menuStep === "value" && (
-                  <TextInput
-                    placeholder="Type value..."
-                    size="xs"
-                    radius="md"
-                    autoFocus
-                    style={{ flex: 1, minWidth: 120 }}
-                    onKeyDown={(e) => {
-                      if (e.key === "Enter") {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        selectMenuOption(e.currentTarget.value);
-                      }
-                    }}
-                  />
-                )}
-              </Group>
-            </Stack>
-          </Paper>
-        )}
-      </div>
-
-      {/* Active Filters Display */}
-      {hasActiveFilters && (
-        <Group gap={6} wrap="wrap" align="center">
-          {Object.entries(activeFilters).map(
-            ([key, valueStr], filterIdx, filterArray) => {
-              const values = valueStr.split(",").map((v) => v.trim());
-              const isLastFilter = filterIdx === filterArray.length - 1;
-              return (
-                <Group key={key} gap={4} align="center">
-                  <Group gap={2}>
-                    {values.map((value, idx) => (
-                      <Badge
-                        key={`${key}-${idx}`}
-                        size="md"
-                        radius="md"
-                        variant="outline"
-                        color="gray"
-                        pr={4}
-                        rightSection={
-                          <IconX
-                            size={12}
-                            style={{ cursor: "pointer" }}
-                            onClick={() => {
-                              const newValues = values.filter(
-                                (_, i) => i !== idx
-                              );
-                              if (newValues.length === 0) {
-                                removeFilter(key);
-                              } else {
-                                setActiveFilters((prev) => ({
-                                  ...prev,
-                                  [key]: newValues.join(","),
-                                }));
-                              }
-                            }}
-                          />
-                        }
-                        styles={{
-                          root: {
-                            textTransform: "none",
-                            fontWeight: 500,
-                          },
-                        }}
-                      >
-                        <Text span c="dimmed" size="xs">
-                          {key}
-                        </Text>{" "}
-                        {value}
-                      </Badge>
-                    ))}
-                  </Group>
-                  {!isLastFilter && (
-                    <Button
-                      size="xs"
-                      variant="subtle"
-                      color="gray"
-                      onClick={() => {
-                        setLogicalOperators((prev) => ({
-                          ...prev,
-                          [key]: prev[key] === "OR" ? "AND" : "OR",
-                        }));
-                      }}
-                      title="Toggle AND/OR"
-                      fw={700}
-                      px={4}
-                      h="auto"
-                      py={2}
-                      c="dimmed"
-                      styles={{
-                        label: {
-                          fontSize: "10px",
-                        },
-                      }}
-                    >
-                      {logicalOperators[key] || "AND"}
-                    </Button>
-                  )}
-                </Group>
-              );
-            }
-          )}
-          <ActionIcon
-            size="sm"
-            variant="subtle"
-            color="red"
-            onClick={clearAllFilters}
-            title="Clear all"
-          >
-            <IconX size={14} />
-          </ActionIcon>
-        </Group>
-      )}
-    </Stack>
-  );
-}

package/src/ui/src/components/HoldButton.jsx

@@ -1,230 +0,0 @@
-import { useState, useRef, useCallback, useEffect } from "react";
-import {
-  ActionIcon,
-  RingProgress,
-  Tooltip,
-  Box,
-  Button,
-  Loader,
-} from "@mantine/core";
-import { IconTrash, IconCopy, IconCheck } from "@tabler/icons-react";
-
-/**
- * HoldButton - Botão que requer segurar por um tempo para confirmar ação
- * Ideal para ações destrutivas como delete
- */
-export function HoldButton({
-  onConfirm,
-  holdDuration = 3000,
-  icon: Icon = IconTrash,
-  color = "red",
-  size = "md",
-  tooltip = "Segure para confirmar",
-  confirmingTooltip = "Segurando...",
-  ...props
-}) {
-  const [progress, setProgress] = useState(0);
-  const [isHolding, setIsHolding] = useState(false);
-  const intervalRef = useRef(null);
-  const startTimeRef = useRef(null);
-
-  const startHold = useCallback(() => {
-    if (props.disabled || props.loading) return;
-
-    setIsHolding(true);
-    startTimeRef.current = Date.now();
-
-    intervalRef.current = setInterval(() => {
-      const elapsed = Date.now() - startTimeRef.current;
-      const newProgress = Math.min((elapsed / holdDuration) * 100, 100);
-      setProgress(newProgress);
-
-      if (newProgress >= 100) {
-        clearInterval(intervalRef.current);
-        setIsHolding(false);
-        setProgress(0);
-        onConfirm?.();
-      }
-    }, 50);
-  }, [holdDuration, onConfirm, props.disabled, props.loading]);
-
-  const cancelHold = useCallback(() => {
-    if (intervalRef.current) {
-      clearInterval(intervalRef.current);
-      intervalRef.current = null;
-    }
-    setIsHolding(false);
-    setProgress(0);
-  }, []);
-
-  useEffect(() => {
-    return () => {
-      if (intervalRef.current) clearInterval(intervalRef.current);
-    };
-  }, []);
-
-  return (
-    <Tooltip label={isHolding ? confirmingTooltip : tooltip} withArrow>
-      <Box
-        style={{
-          position: "relative",
-          display: "inline-flex",
-          verticalAlign: "middle",
-        }}
-      >
-        {isHolding && (
-          <RingProgress
-            size={size === "sm" ? 28 : size === "md" ? 34 : 42}
-            thickness={2}
-            sections={[{ value: progress, color }]}
-            style={{
-              position: "absolute",
-              top: "50%",
-              left: "50%",
-              transform: "translate(-50%, -50%)",
-              pointerEvents: "none",
-            }}
-          />
-        )}
-        <ActionIcon
-          variant="subtle"
-          color={color}
-          size={size}
-          onMouseDown={startHold}
-          onMouseUp={cancelHold}
-          onMouseLeave={cancelHold}
-          onTouchStart={startHold}
-          onTouchEnd={cancelHold}
-          style={{
-            opacity: isHolding ? 0.7 : 1,
-            transition: "opacity 0.2s",
-            ...props.style,
-          }}
-          {...props}
-        >
-          {props.loading ? (
-            <Loader size={12} color={color} />
-          ) : (
-            <Icon size={size === "sm" ? 14 : size === "md" ? 18 : 22} />
-          )}
-        </ActionIcon>
-      </Box>
-    </Tooltip>
-  );
-}
-
-/**
- * TextHoldButton - Versão em texto do botão de segurar
- * Usado para compatibilidade com type="button" ou quando children é passado
- */
-export function TextHoldButton({
-  onDelete,
-  timerSeconds = 3,
-  children,
-  loading,
-  disabled,
-  variant = "light",
-  color = "red",
-  leftSection = <IconTrash size={14} />,
-  ...buttonProps
-}) {
-  const [isDeleting, setIsDeleting] = useState(false);
-  const [deleteCountdown, setDeleteCountdown] = useState(timerSeconds);
-  const deleteTimerRef = useRef(null);
-  const deleteIntervalRef = useRef(null);
-
-  const startDeleteTimer = () => {
-    if (loading || disabled) return;
-    setIsDeleting(true);
-    setDeleteCountdown(timerSeconds);
-
-    deleteTimerRef.current = setTimeout(() => {
-      handleDelete();
-    }, timerSeconds * 1000);
-
-    deleteIntervalRef.current = setInterval(() => {
-      setDeleteCountdown((prev) => {
-        const newCount = prev - 1;
-        if (newCount <= 0) {
-          clearInterval(deleteIntervalRef.current);
-          return 0;
-        }
-        return newCount;
-      });
-    }, 1000);
-  };
-
-  const stopDeleteTimer = () => {
-    setIsDeleting(false);
-    setDeleteCountdown(timerSeconds);
-    if (deleteTimerRef.current) clearTimeout(deleteTimerRef.current);
-    if (deleteIntervalRef.current) clearInterval(deleteIntervalRef.current);
-  };
-
-  const handleDelete = async () => {
-    stopDeleteTimer();
-    if (onDelete) await onDelete();
-  };
-
-  useEffect(() => {
-    return () => stopDeleteTimer();
-  }, []);
-
-  return (
-    <Tooltip
-      label="Mantenha pressionado até a contagem terminar para confirmar a exclusão"
-      withArrow
-      multiline
-      w={220}
-    >
-      <Button
-        variant={variant}
-        color={isDeleting ? "orange" : color}
-        leftSection={leftSection}
-        onMouseDown={startDeleteTimer}
-        onMouseUp={stopDeleteTimer}
-        onMouseLeave={stopDeleteTimer}
-        onTouchStart={startDeleteTimer}
-        onTouchEnd={stopDeleteTimer}
-        disabled={loading || disabled}
-        style={{
-          transition: "all 0.2s ease",
-          transform: isDeleting ? "scale(0.98)" : "scale(1)",
-          ...buttonProps.style,
-        }}
-        {...buttonProps}
-      >
-        {isDeleting
-          ? `Excluindo em ${deleteCountdown}s...`
-          : children || "Segure para Excluir"}
-      </Button>
-    </Tooltip>
-  );
-}
-
-/**
- * Wrapper para manter compatibilidade com Components.Buttons.Delete
- */
-export function ButtonDelete({
-  onDelete,
-  timerSeconds = 3,
-  type = "button",
-  ...props
-}) {
-  if (type === "icon") {
-    return (
-      <HoldButton
-        onConfirm={onDelete}
-        holdDuration={timerSeconds * 1000}
-        {...props}
-      />
-    );
-  }
-  return (
-    <TextHoldButton
-      onDelete={onDelete}
-      timerSeconds={timerSeconds}
-      {...props}
-    />
-  );
-}

package/src/ui/src/components/Login.jsx

@@ -1,148 +0,0 @@
-import { useState } from "react";
-import {
-  Paper,
-  Title,
-  Text,
-  TextInput,
-  PasswordInput,
-  Button,
-  Container,
-  Group,
-  Stack,
-  ThemeIcon,
-  Box,
-  Transition,
-} from "@mantine/core";
-import { IconDatabase, IconLock, IconDeviceMobile } from "@tabler/icons-react";
-import { notifications } from "@mantine/notifications";
-
-export function Login({ onLogin }) {
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
-  const [totpCode, setTotpCode] = useState("");
-  const [showTotp, setShowTotp] = useState(false);
-  const [loading, setLoading] = useState(false);
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    setLoading(true);
-    try {
-      const response = await fetch("/admin/auth/login", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ username, password, totpCode }),
-      });
-      const data = await response.json();
-
-      if (data.success) {
-        onLogin();
-      } else {
-        if (data.code === "2FA_REQUIRED") {
-            setShowTotp(true);
-            notifications.show({
-                title: "Authentication Required",
-                message: "Please enter your 2FA code",
-                color: "blue",
-                icon: <IconDeviceMobile size={16} />
-            });
-        } else {
-            notifications.show({
-            title: "Login Failed",
-            message: data.error || "Invalid credentials",
-            color: "red",
-            });
-        }
-      }
-    } catch (error) {
-      notifications.show({
-        title: "Error",
-        message: "Failed to connect to server",
-        color: "red",
-      });
-    }
-    setLoading(false);
-  };
-
-  return (
-    <Box
-      style={{
-        height: "100vh",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        backgroundColor: "#FBFAF8",
-      }}
-    >
-      <Container size={420}>
-        <Stack align="center" mb="xl">
-          <ThemeIcon size={60} radius="md" color="dark">
-            <IconDatabase size={34} />
-          </ThemeIcon>
-          <Title order={1} fw={700}>
-            SQLite Admin Login
-          </Title>
-        </Stack>
-
-        <Paper withBorder shadow="md" p={30} radius="md">
-          <form onSubmit={handleSubmit}>
-            <Stack>
-              <TextInput
-                label="Username"
-                placeholder="Your username"
-                required
-                value={username}
-                onChange={(e) => setUsername(e.target.value)}
-                disabled={showTotp}
-              />
-              <PasswordInput
-                label="Password"
-                placeholder="Your password"
-                required
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                disabled={showTotp}
-              />
-              
-              {showTotp && (
-                  <TextInput
-                    label="Authenticator Code (2FA)"
-                    placeholder="000 000"
-                    required
-                    autoFocus
-                    value={totpCode}
-                    onChange={(e) => setTotpCode(e.target.value)}
-                    leftSection={<IconDeviceMobile size={16} />}
-                    maxLength={6}
-                  />
-              )}
-
-              <Group mt="lg">
-                <Button 
-                    type="submit" 
-                    color="dark" 
-                    fullWidth 
-                    loading={loading}
-                    leftSection={<IconLock size={18} />}
-                >
-                  {showTotp ? "Verify & Login" : "Login"}
-                </Button>
-              </Group>
-              
-              {showTotp && (
-                  <Text 
-                    size="xs" 
-                    c="dimmed" 
-                    ta="center" 
-                    style={{ cursor: 'pointer' }}
-                    onClick={() => { setShowTotp(false); setTotpCode(""); }}
-                  >
-                      Cancel
-                  </Text>
-              )}
-            </Stack>
-          </form>
-        </Paper>
-      </Container>
-    </Box>
-  );
-}