starred/yaak
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-04-19 15:31:19 +02:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Run oxfmt across repo, add format script and docs

Browse Source 
Add .oxfmtignore to skip generated bindings and wasm-pack output.
Add npm format script, update DEVELOPMENT.md for Vite+ toolchain,
and format all non-generated files with oxfmt.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Gregory Schier
2026-03-13 10:15:49 -07:00
parent 45262edfbd
commit b4a1c418bb
664 changed files with 13638 additions and 13492 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src-web/components/core/Tooltip.tsx
View File

@@ -1,33 +1,33 @@
import classNames from 'classnames';
import type { CSSProperties, KeyboardEvent, ReactNode } from 'react';
import { useRef, useState } from 'react';
import { generateId } from '../../lib/generateId';
import { Portal } from '../Portal';
import classNames from "classnames";
import type { CSSProperties, KeyboardEvent, ReactNode } from "react";
import { useRef, useState } from "react";
import { generateId } from "../../lib/generateId";
import { Portal } from "../Portal";
export interface TooltipProps {
children: ReactNode;
content: ReactNode;
tabIndex?: number;
size?: 'md' | 'lg';
size?: "md" | "lg";
className?: string;
}
const hiddenStyles: CSSProperties = {
left: -99999,
top: -99999,
visibility: 'hidden',
pointerEvents: 'none',
visibility: "hidden",
pointerEvents: "none",
opacity: 0,
};
type TooltipPosition = 'top' | 'bottom';
type TooltipPosition = "top" | "bottom";
interface TooltipOpenState {
styles: CSSProperties;
position: TooltipPosition;
}
export function Tooltip({ children, className, content, tabIndex, size = 'md' }: TooltipProps) {
export function Tooltip({ children, className, content, tabIndex, size = "md" }: TooltipProps) {
const [openState, setOpenState] = useState<TooltipOpenState | null>(null);
const triggerRef = useRef<HTMLButtonElement>(null);
const tooltipRef = useRef<HTMLDivElement>(null);
@@ -44,12 +44,12 @@ export function Tooltip({ children, className, content, tabIndex, size = 'md' }:
const spaceAbove = Math.max(0, triggerRect.top - margin);
const spaceBelow = Math.max(0, viewportHeight - triggerRect.bottom - margin);
const preferBottom = spaceAbove < tooltipRect.height + margin && spaceBelow > spaceAbove;
const position: TooltipPosition = preferBottom ? 'bottom' : 'top';
const position: TooltipPosition = preferBottom ? "bottom" : "top";
const styles: CSSProperties = {
left: Math.max(0, triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2),
maxHeight: position === 'top' ? spaceAbove : spaceBelow,
...(position === 'top'
maxHeight: position === "top" ? spaceAbove : spaceBelow,
...(position === "top"
? { bottom: viewportHeight - triggerRect.top }
: { top: triggerRect.bottom }),
};
@@ -73,7 +73,7 @@ export function Tooltip({ children, className, content, tabIndex, size = 'md' }:
};
const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {
if (openState && e.key === 'Escape') {
if (openState && e.key === "Escape") {
e.preventDefault();
e.stopPropagation();
handleClose();
@@ -97,16 +97,16 @@ export function Tooltip({ children, className, content, tabIndex, size = 'md' }:
>
<div
className={classNames(
'bg-surface-highlight rounded-md px-3 py-2 z-50 border border-border overflow-auto',
size === 'md' && 'max-w-sm',
size === 'lg' && 'max-w-md',
"bg-surface-highlight rounded-md px-3 py-2 z-50 border border-border overflow-auto",
size === "md" && "max-w-sm",
size === "lg" && "max-w-md",
)}
>
{content}
</div>
<Triangle
className="text-border"
position={openState?.position === 'bottom' ? 'top' : 'bottom'}
position={openState?.position === "bottom" ? "top" : "bottom"}
/>
</div>
</Portal>
@@ -116,7 +116,7 @@ export function Tooltip({ children, className, content, tabIndex, size = 'md' }:
role="button"
aria-describedby={openState ? id.current : undefined}
tabIndex={tabIndex ?? -1}
className={classNames(className, 'flex-grow-0 flex items-center')}
className={classNames(className, "flex-grow-0 flex items-center")}
onClick={handleToggleImmediate}
onMouseEnter={handleOpen}
onMouseLeave={handleClose}
@@ -130,8 +130,8 @@ export function Tooltip({ children, className, content, tabIndex, size = 'md' }:
);
}
function Triangle({ className, position }: { className?: string; position: 'top' | 'bottom' }) {
const isBottom = position === 'bottom';
function Triangle({ className, position }: { className?: string; position: "top" | "bottom" }) {
const isBottom = position === "bottom";
return (
<svg
@@ -141,19 +141,19 @@ function Triangle({ className, position }: { className?: string; position: 'top'
shapeRendering="crispEdges"
className={classNames(
className,
'absolute z-50 left-[calc(50%-0.4rem)] h-[0.5rem] w-[0.8rem]',
"absolute z-50 left-[calc(50%-0.4rem)] h-[0.5rem] w-[0.8rem]",
isBottom
? 'border-t-[2px] border-surface-highlight -bottom-[calc(0.5rem-3px)] mb-2'
: 'border-b-[2px] border-surface-highlight -top-[calc(0.5rem-3px)] mt-2',
? "border-t-[2px] border-surface-highlight -bottom-[calc(0.5rem-3px)] mb-2"
: "border-b-[2px] border-surface-highlight -top-[calc(0.5rem-3px)] mt-2",
)}
>
<title>Triangle</title>
<polygon
className="fill-surface-highlight"
points={isBottom ? '0,0 30,0 15,10' : '0,10 30,10 15,0'}
points={isBottom ? "0,0 30,0 15,10" : "0,10 30,10 15,0"}
/>
<path
d={isBottom ? 'M0 0 L15 9 L30 0' : 'M0 10 L15 1 L30 10'}
d={isBottom ? "M0 0 L15 9 L30 0" : "M0 10 L15 1 L30 10"}
fill="none"
stroke="currentColor"
strokeWidth="1"