Merge pull request #152 from linked-planet/dev

fixed linter warnings, button has new discovery style, fixed calendar…

Author: marcus-wishes

biome.json

@@ -1,5 +1,5 @@
 {
-	"$schema": "https://biomejs.dev/schemas/1.7.0/schema.json",
+	"$schema": "https://biomejs.dev/schemas/2.0.0/schema.json",
 	"formatter": {
 		"enabled": true,
 		"formatWithErrors": true,
@@ -9,7 +9,7 @@
 		"lineWidth": 80,
 		"attributePosition": "auto"
 	},
-	"organizeImports": { "enabled": true },
+	"assist": { "actions": { "source": { "organizeImports": "on" } } },
 	"css": {
 		"formatter": {
 			"enabled": true
@@ -24,19 +24,32 @@
 			},
 			"correctness": {
 				"noUnusedImports": "warn"
+			},
+			"style": {
+				"noParameterAssign": "error",
+				"useAsConstAssertion": "error",
+				"useDefaultParameterLast": "error",
+				"useEnumInitializers": "error",
+				"useSelfClosingElements": "error",
+				"useSingleVarDeclarator": "error",
+				"noUnusedTemplateLiteral": "error",
+				"useNumberNamespace": "error",
+				"noInferrableTypes": "error",
+				"noUselessElse": "error"
 			}
 		},
-		"ignore": [
-			"node_modules",
-			"dist",
-			"build",
-			"coverage",
-			"public",
-			"out",
-			"tmp",
-			"temp",
-			"vendor",
-			"generated"
+		"includes": [
+			"**",
+			"!**/node_modules",
+			"!**/dist",
+			"!**/build",
+			"!**/coverage",
+			"!**/public",
+			"!**/out",
+			"!**/tmp",
+			"!**/temp",
+			"!**/vendor",
+			"!**/generated"
 		]
 	},
 	"javascript": {

library/src/components/Blanket.tsx

@@ -23,10 +23,10 @@ export function Blanket({
 				className,
 			)}
 			role={role ?? "presentation"}
-			aria-label={ariaLabel ?? "blanket"}
 			{...props}
 		>
-			{/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
+			{/** biome-ignore lint/a11y/noStaticElementInteractions: <explanation> */}
+			{/** biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
 			<div
 				onClick={(e) => {
 					// this is necessary for the click to propagate to the blanket anywhere inside the children

library/src/components/Breadcrumbs.tsx

@@ -98,23 +98,23 @@ function Ellipsis({
 }) {
 	return (
 		<span className="flex gap-1 pl-0 pr-1">
-			<span
+			<button
+				type="button"
 				onClick={onClick}
 				onKeyUp={(e) => {
 					if (e.key === "Enter") {
 						onClick?.()
 					}
 				}}
 				title={ellipsisLabel}
-				aria-label={ellipsisLabel}
 				className={twMerge(
-					"cursor-pointer pr-1 hover:underline",
+					"cursor-pointer pr-1 hover:underline appearance-none",
 					className,
 				)}
 				style={style}
 			>
 				...
-			</span>
+			</button>
 			/
 		</span>
 	)

library/src/components/Button.tsx

@@ -20,15 +20,17 @@ export type ButtonAppearance =
 	| "danger"
 	| "success"
 	| "information"
+	| "discovery"
 
 type ButtonVariantProps = VariantProps<typeof buttonVariants>
 const buttonVariants = cva(
-	"focus-visible:outline-selected-bold relative box-border flex shrink-0 cursor-pointer items-center justify-center gap-1 rounded-sm border-2 border-transparent px-2 py-1 outline-none outline-2 outline-offset-4 focus-visible:outline-solid",
+	"focus-visible:outline-selected-bold relative box-border flex transition-colors duration-200 shrink-0 cursor-pointer items-center justify-center gap-1 rounded-sm border-2 border-transparent px-2 py-1 outline-none outline-2 outline-offset-4 focus-visible:outline-solid",
 	{
 		variants: {
 			appearance: {
 				// those entries are undefined, they just establish the variant for the compoundVariants
-				default: undefined,
+				default:
+					"bg-neutral hover:bg-neutral-hovered active:bg-neutral-pressed text-text",
 				primary: undefined,
 
 				subtle: undefined,
@@ -41,12 +43,13 @@ const buttonVariants = cva(
 				success: undefined,
 
 				information: undefined,
+				discovery: undefined,
 			},
 			disabled: {
 				true: "disabled:bg-disabled disabled:text-disabled-text disabled:cursor-not-allowed",
 			},
 			selected: {
-				true: "bg-selected active:bg-selected hover:bg-selected text-selected-text-inverse cursor-pointer",
+				true: "bg-selected hover:bg-selected-bold active:bg-selected-pressed text-selected-text-inverse hover:text-selected-text active:text-selected-text-inverse  cursor-pointer",
 			},
 			inverted: {
 				true: undefined,
@@ -61,13 +64,21 @@ const buttonVariants = cva(
 				disabled: true,
 				className: "disabled:border-border disabled:bg-transparent",
 			},
-			{
+			/*{
 				inverted: false,
 				appearance: "default",
 				disabled: false,
 				className:
 					"bg-neutral hover:bg-neutral-hovered active:bg-neutral-pressed text-text",
-			},
+			},*/
+			/*{
+				inverted: false,
+				appearance: "default",
+				disabled: false,
+				selected: true,
+				className:
+					"bg-selected active:bg-selected hover:bg-selected text-selected-text-inverse cursor-pointer",
+			},*/
 			{
 				inverted: false,
 				appearance: "primary",
@@ -124,6 +135,13 @@ const buttonVariants = cva(
 				className:
 					"bg-information-bold hover:bg-information-bold-hovered active:bg-information-bold-pressed text-text-inverse",
 			},
+			{
+				inverted: false,
+				appearance: "discovery",
+				disabled: false,
+				className:
+					"bg-discovery-bold hover:bg-discovery-bold-hovered active:bg-discovery-bold-pressed text-text-inverse",
+			},
 			{
 				inverted: true,
 				appearance: "default",
@@ -170,6 +188,14 @@ const buttonVariants = cva(
 					"border-information-bold text-information-text border-solid",
 				),
 			},
+			{
+				inverted: true,
+				appearance: "discovery",
+				className: cx(
+					"bg-discovery hover:bg-discovery-hovered active:bg-discovery-pressed",
+					"border-discovery-bold text-discovery-text border-solid",
+				),
+			},
 		],
 		defaultVariants: {
 			appearance: "default",
@@ -317,6 +343,7 @@ const loadingSpinnerClassNames = cva(null, {
 			danger: "border-t-text-inverse border-2",
 			success: "border-t-text-inverse border-2",
 			information: "border-t-text-inverse border-2",
+			discovery: "border-t-text-inverse border-2",
 		},
 		loading: {
 			false: "opacity-0",

library/src/components/Calendar.tsx

@@ -89,8 +89,11 @@ type CalendarBaseRangeProps = PropsBase &
 		secondarySelected?: DateRange
 	}
 
-const buttonStyles =
-	"focus-visible:ring-0 focus-visible:outline-selected-bold focus-visible:outline-2 focus-visible:outline-offset-2 border-none cursor-pointer disabled:cursor-not-allowed hover:bg-surface-hovered p-1 rounded-xs z-10 inline-flex place-content-center-safe disabled:text-text-disabled disabled:hover:bg-transparent"
+const buttonStyles = twJoin(
+	"border-none cursor-pointer p-1 rounded-xs z-10 inline-flex place-content-center-safe",
+	"hover:bg-surface-hovered hover:text-text disabled:hover:bg-transparent disabled:hover:text-text-disabled disabled:cursor-not-allowed disabled:text-text-disabled",
+	"focus-visible:ring-0 focus-visible:outline-selected-bold focus-visible:outline-2 focus-visible:outline-offset-2",
+)
 const captionStyles =
 	"flex justify-center items-center w-full pb-2 relative top-2"
 const captionLabelStyles = "text-text text-sm font-bold flex justify-center"
@@ -309,10 +312,11 @@ export function CalendarBase(
 			modifiersClassNames={{
 				hidden: "bg-neutral hover:bg-neutral-hovered active:bg-neutral-hovered text-text",
 				disabled:
-					"text-disabled-text cursor-not-allowed hover:bg-transparent bg-surface",
+					"text-disabled-text cursor-not-allowed hover:bg-transparent bg-surface disabled:text-text-disabled disabled:hover:bg-transparent disabled:cursor-not-allowed",
 				secondarySelected:
-					"bg-surface-overlay-hovered data-[disabled=true]:bg-surface",
-				selected: "bg-selected text-selected-text-inverse font-bold",
+					"bg-surface-overlay-hovered data-[disabled=true]:bg-surface text-text after:border-text",
+				selected:
+					"bg-selected text-selected-text-inverse hover:text-selected-text font-bold after:border-selected-text-inverse hover:after:border-selected-text",
 			}}
 			disabled={disabled || disabledDates}
 			onDayClick={!disabled && onDayClick ? onDayClick : undefined}
@@ -672,7 +676,7 @@ export function Calendar<FormData extends FieldValues>(
 	)
 
 	const _month = useMemo(() => {
-		let ret = undefined
+		let ret
 		if (month) {
 			ret = dayjs()
 				.month(month - 1)

library/src/components/Checkbox.tsx

@@ -194,7 +194,6 @@ const CheckboxI = (
 				<label
 					htmlFor={id}
 					aria-disabled={disabled}
-					aria-required={required}
 					aria-invalid={invalid}
 					className={twMerge(labelStyles, labelClassName)}
 					style={labelStyle}

library/src/components/Flag.tsx

@@ -152,24 +152,17 @@ export function FlagIcon({
 		}
 		case "warning": {
 			return (
-				<p aria-label="Warning" className={iconStyle}>
+				<p className={iconStyle}>
 					<span className="absolute -left-0.5 top-0.5">!</span>
 				</p>
 			)
 		}
 		case "information": {
-			return (
-				<span aria-label="Info" className={iconStyle}>
-					i
-				</span>
-			)
+			return <span className={iconStyle}>i</span>
 		}
 		case "error": {
 			return (
-				<div
-					aria-label="Error"
-					className="relative size-4 flex items-center justify-center z-0"
-				>
+				<div className="relative size-4 flex items-center justify-center z-0">
 					<span className={iconStyle} />
 					<span className="font-extrabold text-text-inverse z-1">
 						!
@@ -178,11 +171,7 @@ export function FlagIcon({
 			)
 		}
 		case "discovery": {
-			return (
-				<span aria-label="Discovery" className={iconStyle}>
-					?
-				</span>
-			)
+			return <span className={iconStyle}>?</span>
 		}
 		default:
 			assertUnreachable(appearance)
@@ -240,7 +229,7 @@ export function Flag({
 					{actions?.map((action, i) => (
 						<>
 							<a
-								key={`action${i}`}
+								key={`action${action.href}`}
 								className={`inline-block cursor-pointer text-sm ${type !== "bold" ? "text-link" : "text-blue-200"}`}
 								onClick={action.onClick}
 								href={action.href}
@@ -249,7 +238,7 @@ export function Flag({
 								{action.content}
 							</a>
 							<span
-								key={`actionspacer${i}`}
+								key={`actionspacer${action.href}`}
 								className={`${type === "inverted" ? "bg-text-subtlest" : "bg-blue-300"} mx-1.5 inline-block h-0.5 w-0.5 rounded-full align-middle last:hidden`}
 							/>
 						</>

library/src/components/HighlightedText.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from "react"
+import { useMemo, useId } from "react"
 import { twMerge } from "tailwind-merge"
 export function HighlightedText({
 	text,
@@ -17,6 +17,7 @@ export function HighlightedText({
 	containerElement?: React.ElementType
 	caseSensitive?: boolean
 }) {
+	const id = useId()
 	const parts = useMemo(() => {
 		const highlights = Array.isArray(highlightedText)
 			? highlightedText.map((it) => it.trim()).filter(Boolean)
@@ -31,7 +32,7 @@ export function HighlightedText({
 			if (delimiterRegex.test(it)) {
 				acc.push(
 					<span
-						key={i}
+						key={`highlight-${id}-${i}`}
 						className={twMerge(
 							"bg-selected-bold text-text-inverse p-0 m-0",
 							highlightClassName,
@@ -45,7 +46,7 @@ export function HighlightedText({
 			acc.push(it)
 			return acc
 		}, [] as React.ReactNode[])
-	}, [text, highlightClassName, highlightedText, caseSensitive])
+	}, [text, highlightClassName, highlightedText, caseSensitive, id])
 
 	const ContainerElement = containerElement || "p"
 

library/src/components/Modal.tsx

@@ -87,7 +87,7 @@ function Container({
 					<RDialog.Overlay
 						className={blanketStyles}
 						role="presentation"
-						id="blanket"
+						id={`blanket-${id}`}
 					/>
 				) : (
 					<div className={blanketStyles} />

library/src/components/Popover.tsx

@@ -233,7 +233,6 @@ function Root({
 export type AnchorProps = RPo.PopoverAnchorProps
 const Anchor = RPo.Anchor
 
-type CloseProps = RPo.PopoverCloseProps
 const Close = RPo.Close
 
 export const Popover = {

library/src/components/SectionMessage.tsx

@@ -85,10 +85,10 @@ export const SectionMessage = forwardRef(
 					)}
 					{children}
 					<div>
-						{actions?.map((action, i) => (
+						{actions?.map((action) => (
 							<>
 								<a
-									key={`action${i}`}
+									key={`action${action.href}`}
 									className="inline-block cursor-pointer text-sm"
 									onClick={action.onClick}
 									href={action.href}
@@ -97,7 +97,7 @@ export const SectionMessage = forwardRef(
 									{action.content}
 								</a>
 								<span
-									key={`actionspacer${i}`}
+									key={`actionspacer${action.href}`}
 									className="bg-text-subtlest mx-1.5 inline-block h-0.5 w-0.5 rounded-full align-middle last:hidden"
 								/>
 							</>

library/src/components/SlideOpen.tsx

@@ -36,8 +36,6 @@ export function SlideOpen({
 			style={containerStyle}
 			data-open={open}
 			ref={ref}
-			aria-label={ariaLabel}
-			aria-expanded={ariaExpanded ?? open}
 			tabIndex={tabIndex}
 			{...props}
 		>