feat(dashboard): select tracker variants

dashboard/Taskfile.yaml

@@ -39,6 +39,8 @@ tasks:
       - ../core/client/**/*
 
   lint:
+    aliases:
+      - format
     cmds:
       - bun run lint
 

dashboard/app/components/Anchor.module.css

@@ -0,0 +1,24 @@
+.anchor {
+	appearance: none;
+	border: none;
+	display: inline;
+	padding: 0;
+	margin: 0;
+
+	color: var(--text-dark);
+	background-color: transparent;
+
+	border-radius: 4px;
+
+	cursor: pointer;
+	text-decoration: underline;
+
+	&:focus-visible {
+		outline: 2px solid var(--focus-outline);
+		outline-offset: 2px;
+	}
+
+	&:visited {
+		color: var(--text-dark);
+	}
+}

dashboard/app/components/Anchor.tsx

@@ -0,0 +1,21 @@
+import classes from './Anchor.module.css';
+
+interface AnchorProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+	children: React.ReactNode;
+}
+
+const Anchor = ({ children, className, ...rest }: AnchorProps) => {
+	const isExternal = rest.href?.toString().startsWith('http');
+	return (
+		<a
+			className={className ? className : classes.anchor}
+			target={isExternal ? '_blank' : undefined}
+			rel={isExternal ? 'noopener noreferrer' : undefined}
+			{...rest}
+		>
+			{children}
+		</a>
+	);
+};
+
+export { Anchor };

dashboard/app/components/Button.tsx

@@ -1,11 +1,8 @@
+import { Cross1Icon } from '@radix-ui/react-icons';
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
 import { Link, type LinkProps } from '@remix-run/react';
-import clsx from 'clsx';
-import { X } from 'lucide-react';
 import type React from 'react';
 
-import classes from './Button.module.css';
-
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 	loading?: boolean;
 	children: React.ReactNode;
@@ -32,7 +29,7 @@ const Button = ({
 }: ButtonProps) => {
 	return (
 		<button
-			className={clsx(className, classes.base)}
+			className={className ? className : 'button'}
 			disabled={loading || disabled}
 			aria-busy={loading ? 'true' : 'false'}
 			{...rest}
@@ -69,10 +66,13 @@ const ButtonLink = ({
 }: ButtonLinkProps) => {
 	return (
 		<Link
-			className={clsx(
-				variant === 'outline' ? classes.outline : classes.link,
-				className,
-			)}
+			className={
+				className
+					? className
+					: variant === 'outline'
+						? 'button-outline'
+						: 'button-link'
+			}
 			role="button"
 			{...rest}
 		>
@@ -83,7 +83,12 @@ const ButtonLink = ({
 
 const IconButton = ({ children, label, ...rest }: IconButtonProps) => {
 	return (
-		<button className={classes.icon} type="button" aria-label={label} {...rest}>
+		<button
+			className="button button-icon"
+			type="button"
+			aria-label={label}
+			{...rest}
+		>
 			{children}
 		</button>
 	);
@@ -92,7 +97,7 @@ const IconButton = ({ children, label, ...rest }: IconButtonProps) => {
 const CloseButton = ({ label, ...rest }: CloseButtonProps) => {
 	return (
 		<IconButton label={label} {...rest}>
-			<X />
+			<Cross1Icon />
 		</IconButton>
 	);
 };

dashboard/app/components/Checkbox.module.css

@@ -0,0 +1,38 @@
+.root {
+	background-color: white;
+	width: 22px;
+	height: 22px;
+	min-width: 22px;
+
+	border: 1px solid var(--border-light);
+	border-radius: 4px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	&:hover {
+		background-color: var(--violet-a3);
+	}
+
+	&:focus-visible {
+		outline: 2px solid var(--focus-outline);
+	}
+
+	&[data-disabled] {
+		background-color: var(--black-a3);
+	}
+}
+
+.indicator {
+	color: var(--violet-indicator);
+
+	&[data-disabled] {
+		color: var(--text-disabled);
+	}
+}
+
+.label {
+	padding: 0 4px 0 12px;
+	font-size: 15px;
+	line-height: 1;
+}

dashboard/app/components/Checkbox.tsx

@@ -0,0 +1,56 @@
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { CheckIcon } from '@radix-ui/react-icons';
+import * as Label from '@radix-ui/react-label';
+import type React from 'react';
+
+import { InfoTooltip } from '@/components/InfoTooltip';
+import { Group } from '@/components/layout/Flex';
+
+import classes from './Checkbox.module.css';
+
+interface CheckBoxProps {
+	label: string;
+	value: string;
+	icon?: React.ReactNode;
+	tooltip?: React.ReactNode;
+
+	checked?: boolean;
+	disabled?: boolean;
+	onCheckedChange?: (checked: boolean) => void;
+}
+
+const CheckBox = ({
+	label,
+	value,
+	icon,
+	tooltip,
+	checked,
+	disabled,
+	onCheckedChange,
+}: CheckBoxProps) => {
+	const id = `checkbox-${value}`;
+	return (
+		<Group style={{ justifyContent: 'flex-start' }}>
+			<CheckboxPrimitive.Root
+				id={id}
+				className={classes.root}
+				value={value}
+				checked={checked}
+				disabled={disabled}
+				onCheckedChange={onCheckedChange}
+			>
+				<CheckboxPrimitive.Indicator className={classes.indicator}>
+					{icon ? icon : <CheckIcon />}
+				</CheckboxPrimitive.Indicator>
+			</CheckboxPrimitive.Root>
+			<Group>
+				<Label.Root className={classes.label} htmlFor={id}>
+					{label}
+				</Label.Root>
+				{tooltip && <InfoTooltip>{tooltip}</InfoTooltip>}
+			</Group>
+		</Group>
+	);
+};
+
+export { CheckBox };

dashboard/app/components/DatePicker.module.css

@@ -4,6 +4,7 @@
 }
 
 .header {
+	composes: group from global;
 	padding-bottom: 4px;
 }
 
@@ -20,7 +21,7 @@
 }
 
 .content {
-	background-color: var(--me-color-bg-light);
+	background-color: var(--bg-light);
 	border-radius: 6px;
 	box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
 		hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
@@ -39,6 +40,7 @@
 }
 
 .apply {
+	composes: button from global;
 	margin-top: 20px;
 	width: 100%;
 }
@@ -48,8 +50,8 @@
 .root {
 	margin-top: 8px;
 
-	--rdp-accent-color: var(--me-color-border-violet);
-	--rdp-accent-background-color: var(--me-color-selected-snow);
+	--rdp-accent-color: var(--violet);
+	--rdp-accent-background-color: var(--selected-snow);
 	--rdp-font-family: var(--default-font-family);
 
 	--rdp-day-font: 400 16px var(--rdp-font-family);

dashboard/app/components/DatePicker.tsx

@@ -1,13 +1,12 @@
 import * as Dialog from '@radix-ui/react-dialog';
+import { ChevronLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons';
 import * as VisuallyHidden from '@radix-ui/react-visually-hidden';
 import { useSearchParams } from '@remix-run/react';
 import { formatISO, parseISO, sub } from 'date-fns';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { useState } from 'react';
 import { type DateRange, DayPicker } from 'react-day-picker';
 
 import { Button, CloseButton } from '@/components/Button';
-import { Group } from '@/components/layout/Flex';
 import { useDidUpdate } from '@/hooks/use-did-update';
 import { useMediaQuery } from '@/hooks/use-media-query';
 
@@ -61,14 +60,14 @@ const DatePickerRange = ({ open, setOpen }: DatePickerProps) => {
 			<Dialog.Portal>
 				<Dialog.Overlay className={classes.overlay} />
 				<Dialog.Content className={classes.content}>
-					<Group className={classes.header}>
+					<div className={classes.header}>
 						<Dialog.Title className={classes.title}>
 							Select a date range
 						</Dialog.Title>
 						<Dialog.Close asChild>
 							<CloseButton label="Close date picker" />
 						</Dialog.Close>
-					</Group>
+					</div>
 					<VisuallyHidden.Root asChild>
 						<Dialog.Description>
 							Select the start and end date for the date range.
@@ -83,9 +82,9 @@ const DatePickerRange = ({ open, setOpen }: DatePickerProps) => {
 						components={{
 							Chevron: (props) => {
 								if (props.orientation === 'left') {
-									return <ChevronLeft {...props} />;
+									return <ChevronLeftIcon {...props} />;
 								}
-								return <ChevronRight {...props} />;
+								return <ChevronRightIcon {...props} />;
 							},
 						}}
 						defaultMonth={sub(new Date(), { months: 1 })}