refactor: migrate from ESLint to Biome and extract SQL queries to data.ts
- Replace ESLint with Biome for linting and formatting - Configure Biome with tabs, double quotes, and organized imports - Move all SQL/Drizzle queries from page.tsx files to data.ts files - Create new data.ts files for: ajustes, dashboard, relatorios/categorias - Update existing data.ts files: extrato, fatura (add lancamentos queries) - Remove all drizzle-orm imports from page.tsx files - Update README.md with new tooling info Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Felipe Coutinho
@@ -1,110 +1,111 @@
|
||||
"use client";
|
||||
|
||||
import React, { CSSProperties, useEffect, useRef } from "react";
|
||||
import type React from "react";
|
||||
import { type CSSProperties, useEffect, useRef } from "react";
|
||||
|
||||
interface MagnetLinesProps {
|
||||
rows?: number;
|
||||
columns?: number;
|
||||
containerSize?: string;
|
||||
lineColor?: string;
|
||||
lineWidth?: string;
|
||||
lineHeight?: string;
|
||||
baseAngle?: number;
|
||||
className?: string;
|
||||
style?: CSSProperties;
|
||||
disabled?: boolean;
|
||||
rows?: number;
|
||||
columns?: number;
|
||||
containerSize?: string;
|
||||
lineColor?: string;
|
||||
lineWidth?: string;
|
||||
lineHeight?: string;
|
||||
baseAngle?: number;
|
||||
className?: string;
|
||||
style?: CSSProperties;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
const MagnetLines: React.FC<MagnetLinesProps> = ({
|
||||
rows = 9,
|
||||
columns = 9,
|
||||
containerSize = "80vmin",
|
||||
lineColor = "#efefef",
|
||||
lineWidth = "1vmin",
|
||||
lineHeight = "6vmin",
|
||||
baseAngle = -10,
|
||||
className = "",
|
||||
style = {},
|
||||
disabled = false,
|
||||
rows = 9,
|
||||
columns = 9,
|
||||
containerSize = "80vmin",
|
||||
lineColor = "#efefef",
|
||||
lineWidth = "1vmin",
|
||||
lineHeight = "6vmin",
|
||||
baseAngle = -10,
|
||||
className = "",
|
||||
style = {},
|
||||
disabled = false,
|
||||
}) => {
|
||||
const containerRef = useRef<HTMLDivElement | null>(null);
|
||||
const containerRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
// Se magnetlines estiver desabilitado, não renderiza nada
|
||||
if (disabled) {
|
||||
return null;
|
||||
}
|
||||
// Se magnetlines estiver desabilitado, não renderiza nada
|
||||
if (disabled) {
|
||||
return null;
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const container = containerRef.current;
|
||||
if (!container) return;
|
||||
useEffect(() => {
|
||||
const container = containerRef.current;
|
||||
if (!container) return;
|
||||
|
||||
const items = container.querySelectorAll<HTMLSpanElement>("span");
|
||||
const items = container.querySelectorAll<HTMLSpanElement>("span");
|
||||
|
||||
const onPointerMove = (pointer: { x: number; y: number }) => {
|
||||
items.forEach((item) => {
|
||||
const rect = item.getBoundingClientRect();
|
||||
const centerX = rect.x + rect.width / 2;
|
||||
const centerY = rect.y + rect.height / 2;
|
||||
const onPointerMove = (pointer: { x: number; y: number }) => {
|
||||
items.forEach((item) => {
|
||||
const rect = item.getBoundingClientRect();
|
||||
const centerX = rect.x + rect.width / 2;
|
||||
const centerY = rect.y + rect.height / 2;
|
||||
|
||||
const b = pointer.x - centerX;
|
||||
const a = pointer.y - centerY;
|
||||
const c = Math.sqrt(a * a + b * b) || 1;
|
||||
const r =
|
||||
((Math.acos(b / c) * 180) / Math.PI) * (pointer.y > centerY ? 1 : -1);
|
||||
const b = pointer.x - centerX;
|
||||
const a = pointer.y - centerY;
|
||||
const c = Math.sqrt(a * a + b * b) || 1;
|
||||
const r =
|
||||
((Math.acos(b / c) * 180) / Math.PI) * (pointer.y > centerY ? 1 : -1);
|
||||
|
||||
item.style.setProperty("--rotate", `${r}deg`);
|
||||
});
|
||||
};
|
||||
item.style.setProperty("--rotate", `${r}deg`);
|
||||
});
|
||||
};
|
||||
|
||||
const handlePointerMove = (e: PointerEvent) => {
|
||||
onPointerMove({ x: e.x, y: e.y });
|
||||
};
|
||||
const handlePointerMove = (e: PointerEvent) => {
|
||||
onPointerMove({ x: e.x, y: e.y });
|
||||
};
|
||||
|
||||
window.addEventListener("pointermove", handlePointerMove);
|
||||
window.addEventListener("pointermove", handlePointerMove);
|
||||
|
||||
if (items.length) {
|
||||
const middleIndex = Math.floor(items.length / 2);
|
||||
const rect = items[middleIndex].getBoundingClientRect();
|
||||
onPointerMove({ x: rect.x, y: rect.y });
|
||||
}
|
||||
if (items.length) {
|
||||
const middleIndex = Math.floor(items.length / 2);
|
||||
const rect = items[middleIndex].getBoundingClientRect();
|
||||
onPointerMove({ x: rect.x, y: rect.y });
|
||||
}
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("pointermove", handlePointerMove);
|
||||
};
|
||||
}, []);
|
||||
return () => {
|
||||
window.removeEventListener("pointermove", handlePointerMove);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const total = rows * columns;
|
||||
const spans = Array.from({ length: total }, (_, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className="block origin-center"
|
||||
style={{
|
||||
backgroundColor: lineColor,
|
||||
width: lineWidth,
|
||||
height: lineHeight,
|
||||
// @ts-expect-error -- CSS custom property para controlar a rotação inline
|
||||
"--rotate": `${baseAngle}deg`,
|
||||
transform: "rotate(var(--rotate))",
|
||||
willChange: "transform",
|
||||
}}
|
||||
/>
|
||||
));
|
||||
const total = rows * columns;
|
||||
const spans = Array.from({ length: total }, (_, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className="block origin-center"
|
||||
style={{
|
||||
backgroundColor: lineColor,
|
||||
width: lineWidth,
|
||||
height: lineHeight,
|
||||
// @ts-expect-error -- CSS custom property para controlar a rotação inline
|
||||
"--rotate": `${baseAngle}deg`,
|
||||
transform: "rotate(var(--rotate))",
|
||||
willChange: "transform",
|
||||
}}
|
||||
/>
|
||||
));
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
className={`grid place-items-center ${className}`}
|
||||
style={{
|
||||
gridTemplateColumns: `repeat(${columns}, 1fr)`,
|
||||
gridTemplateRows: `repeat(${rows}, 1fr)`,
|
||||
width: containerSize,
|
||||
height: containerSize,
|
||||
...style,
|
||||
}}
|
||||
>
|
||||
{spans}
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
className={`grid place-items-center ${className}`}
|
||||
style={{
|
||||
gridTemplateColumns: `repeat(${columns}, 1fr)`,
|
||||
gridTemplateRows: `repeat(${rows}, 1fr)`,
|
||||
width: containerSize,
|
||||
height: containerSize,
|
||||
...style,
|
||||
}}
|
||||
>
|
||||
{spans}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MagnetLines;
|
||||
|
||||
Reference in New Issue
Block a user