zias/stats
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

add tailwind prettier and some clean up

Browse Source
This commit is contained in:
Carl-Gerhard Lindesvärd
2024-03-26 22:03:08 +01:00
parent d0079c8dc3
commit 44c66dbed4
118 changed files with 355 additions and 2045 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/dashboard/src/components/button-container.tsx
View File

@@ -6,6 +6,6 @@ export function ButtonContainer({
...props
}: HtmlProps<HTMLDivElement>) {
return (
<div className={cn('flex justify-between mt-6', className)} {...props} />
<div className={cn('mt-6 flex justify-between', className)} {...props} />
);
}

4
apps/dashboard/src/components/card.tsx
View File

@@ -34,9 +34,9 @@ interface CardActionsProps {
}
export function CardActions({ children }: CardActionsProps) {
return (
<div className="absolute top-2 right-2 z-10">
<div className="absolute right-2 top-2 z-10">
<DropdownMenu>
<DropdownMenuTrigger className="h-8 w-8 hover:border rounded justify-center items-center flex">
<DropdownMenuTrigger className="flex h-8 w-8 items-center justify-center rounded hover:border">
<MoreHorizontal size={16} />
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-[200px]">

4
apps/dashboard/src/components/forms/input-with-label.tsx
View File

@@ -13,12 +13,12 @@ export const InputWithLabel = forwardRef<HTMLInputElement, InputWithLabelProps>(
({ label, className, ...props }, ref) => {
return (
<div className={className}>
<div className="block mb-2 flex justify-between">
<div className="mb-2 block flex justify-between">
<Label className="mb-0" htmlFor={label}>
{label}
</Label>
{props.error && (
<span className="text-sm text-destructive leading-none">
<span className="text-sm leading-none text-destructive">
{props.error}
</span>
)}

8
apps/dashboard/src/components/full-page-empty-state.tsx
View File

@@ -16,13 +16,13 @@ export function FullPageEmptyState({
className,
}: FullPageEmptyStateProps) {
return (
<div className={cn('p-4 flex items-center justify-center', className)}>
<div className="p-8 w-full max-w-xl flex flex-col items-center justify-center">
<div className="w-24 h-24 bg-white shadow-sm rounded-full flex justify-center items-center mb-6">
<div className={cn('flex items-center justify-center p-4', className)}>
<div className="flex w-full max-w-xl flex-col items-center justify-center p-8">
<div className="mb-6 flex h-24 w-24 items-center justify-center rounded-full bg-white shadow-sm">
<Icon size={60} strokeWidth={1} />
</div>
<h1 className="text-xl font-medium mb-1">{title}</h1>
<h1 className="mb-1 text-xl font-medium">{title}</h1>
{children}
</div>

2
apps/dashboard/src/components/logo.tsx
View File

@@ -17,7 +17,7 @@ export function LogoSquare({ className }: LogoProps) {
export function Logo({ className }: LogoProps) {
return (
<div
className={cn('text-xl font-medium flex gap-2 items-center', className)}
className={cn('flex items-center gap-2 text-xl font-medium', className)}
>
<LogoSquare className="max-h-8" />
<span>openpanel.dev</span>

6
apps/dashboard/src/components/overview/filters/overview-filters-drawer-content.tsx
View File

@@ -76,7 +76,7 @@ export function OverviewFiltersDrawerContent({
/>
</div>
<div className="flex flex-col gap-4 mt-8">
<div className="mt-8 flex flex-col gap-4">
{filters
.filter((filter) => filter.value[0] !== null)
.map((filter) => {
@@ -120,7 +120,7 @@ export function FilterOptionEvent({
);
return (
<div className="flex gap-2 items-center">
<div className="flex items-center gap-2">
<div>{filter.name}</div>
<Combobox
className="flex-1"
@@ -160,7 +160,7 @@ export function FilterOptionProfile({
const values = useProfileValues(projectId, filter.name);
return (
<div className="flex gap-2 items-center">
<div className="flex items-center gap-2">
<div>{filter.name}</div>
<Combobox
className="flex-1"

2
apps/dashboard/src/components/overview/filters/overview-filters-drawer.tsx
View File

@@ -17,7 +17,7 @@ export function OverviewFiltersDrawer(
Filters
</Button>
</SheetTrigger>
<SheetContent className="!max-w-lg w-full" side="right">
<SheetContent className="w-full !max-w-lg" side="right">
<OverviewFiltersDrawerContent {...props} />
</SheetContent>
</Sheet>

6
apps/dashboard/src/components/overview/live-counter/live-counter.tsx
View File

@@ -58,18 +58,18 @@ export default function LiveCounter({ data = 0, projectId }: LiveCounterProps) {
<TooltipTrigger asChild>
<button
onClick={() => setLiveHistogram((p) => !p)}
className="border border-border rounded h-8 px-3 leading-none flex items-center font-medium gap-2"
className="flex h-8 items-center gap-2 rounded border border-border px-3 font-medium leading-none"
>
<div className="relative">
<div
className={cn(
'bg-emerald-500 h-3 w-3 rounded-full animate-ping opacity-100 transition-all',
'h-3 w-3 animate-ping rounded-full bg-emerald-500 opacity-100 transition-all',
counter === 0 && 'bg-destructive opacity-0'
)}
></div>
<div
className={cn(
'bg-emerald-500 h-3 w-3 rounded-full absolute top-0 left-0 transition-all',
'absolute left-0 top-0 h-3 w-3 rounded-full bg-emerald-500 transition-all',
counter === 0 && 'bg-destructive'
)}
></div>

12
apps/dashboard/src/components/overview/overview-live-histogram.tsx
View File

@@ -85,7 +85,7 @@ export function OverviewLiveHistogram({
{staticArray.map((percent, i) => (
<div
key={i}
className="flex-1 rounded-md bg-slate-200 animate-pulse"
className="flex-1 animate-pulse rounded-md bg-slate-200"
style={{ height: `${percent}%` }}
/>
))}
@@ -105,7 +105,7 @@ export function OverviewLiveHistogram({
<TooltipTrigger asChild>
<div
className={cn(
'flex-1 rounded-md hover:scale-110 transition-all ease-in-out',
'flex-1 rounded-md transition-all ease-in-out hover:scale-110',
minute.count === 0 ? 'bg-slate-200' : 'bg-blue-600'
)}
style={{
@@ -136,14 +136,14 @@ interface WrapperProps {
function Wrapper({ open, children, count }: WrapperProps) {
return (
<AnimateHeight duration={500} height={open ? 'auto' : 0}>
<div className="flex items-end flex-col md:flex-row">
<div className="md:mr-2 flex md:flex-col max-md:justify-between items-end max-md:w-full max-md:mb-2 md:card md:p-4">
<div className="flex flex-col items-end md:flex-row">
<div className="md:card flex items-end max-md:mb-2 max-md:w-full max-md:justify-between md:mr-2 md:flex-col md:p-4">
<div className="text-sm max-md:mb-1">Last 30 minutes</div>
<div className="text-2xl font-bold text-ellipsis overflow-hidden whitespace-nowrap">
<div className="overflow-hidden text-ellipsis whitespace-nowrap text-2xl font-bold">
{count}
</div>
</div>
<div className="max-h-[150px] aspect-[5/1] flex flex-1 gap-0.5 md:gap-2 items-end w-full relative">
<div className="relative flex aspect-[5/1] max-h-[150px] w-full flex-1 items-end gap-0.5 md:gap-2">
<div className="absolute -top-3 right-0 text-xs text-muted-foreground">
NOW
</div>

6
apps/dashboard/src/components/overview/overview-metrics.tsx
View File

@@ -192,13 +192,13 @@ export default function OverviewMetrics({ projectId }: OverviewMetricsProps) {
return (
<>
<div className="grid grid-cols-6 col-span-6 gap-1">
<div className="col-span-6 grid grid-cols-6 gap-1">
{reports.map((report, index) => (
<button
key={index}
className={cn(
'relative col-span-3 md:col-span-2 lg:col-span-1 group transition-all scale-95',
index === metric && 'shadow-md rounded-xl scale-105 z-10'
'group relative col-span-3 scale-95 transition-all md:col-span-2 lg:col-span-1',
index === metric && 'z-10 scale-105 rounded-xl shadow-md'
)}
onClick={() => {
setMetric(index);

6
apps/dashboard/src/components/overview/overview-widget.tsx
View File

@@ -20,7 +20,7 @@ export function WidgetHead({ className, ...props }: WidgetHeadProps) {
return (
<WidgetHeadBase
className={cn(
'flex flex-col p-0 [&_.title]:p-4 [&_.title]:flex [&_.title]:justify-between [&_.title]:items-center',
'flex flex-col p-0 [&_.title]:flex [&_.title]:items-center [&_.title]:justify-between [&_.title]:p-4',
className
)}
{...props}
@@ -85,7 +85,7 @@ export function WidgetButtons({
<div
ref={container}
className={cn(
'px-4 self-stretch justify-start transition-opacity flex flex-wrap [&_button]:text-xs [&_button]:opacity-50 [&_button]:whitespace-nowrap [&_button.active]:opacity-100 [&_button.active]:border-b [&_button.active]:border-black [&_button]:py-1',
'flex flex-wrap justify-start self-stretch px-4 transition-opacity [&_button.active]:border-b [&_button.active]:border-black [&_button.active]:opacity-100 [&_button]:whitespace-nowrap [&_button]:py-1 [&_button]:text-xs [&_button]:opacity-50',
className
)}
style={{ gap }}
@@ -102,7 +102,7 @@ export function WidgetButtons({
<DropdownMenuTrigger asChild>
<button
className={cn(
'flex items-center gap-1 select-none',
'flex select-none items-center gap-1',
sizes.current.length - 1 === slice ? hidden : 'opacity-50'
)}
>

4
apps/dashboard/src/components/pagination.tsx
View File

@@ -48,9 +48,9 @@ export function Pagination({
>
{size === 'base' && (
<>
<div className="font-medium text-xs">Page: {cursor + 1}</div>
<div className="text-xs font-medium">Page: {cursor + 1}</div>
{typeof count === 'number' && (
<div className="font-medium text-xs">Total rows: {count}</div>
<div className="text-xs font-medium">Total rows: {count}</div>
)}
</>
)}

18
apps/dashboard/src/components/projects/project-card.tsx
View File

@@ -34,30 +34,30 @@ export async function ProjectCard({
return (
<Link
href={`/${organizationSlug}/${id}`}
className="card p-4 inline-flex flex-col gap-2 hover:-translate-y-1 transition-transform"
className="card inline-flex flex-col gap-2 p-4 transition-transform hover:-translate-y-1"
>
<div className="font-medium">{name}</div>
<div className="aspect-[15/1] -mx-4">
<div className="-mx-4 aspect-[15/1]">
<ChartSSR data={chart.map((d) => ({ ...d, date: new Date(d.date) }))} />
</div>
<div className="flex gap-4 justify-between text-muted-foreground text-sm">
<div className="flex justify-between gap-4 text-sm text-muted-foreground">
<div className="font-medium">Visitors</div>
<div className="flex gap-4">
<div className="flex flex-col md:flex-row gap-2">
<div className="flex flex-col gap-2 md:flex-row">
<div>Total</div>
<span className="text-black font-medium">
<span className="font-medium text-black">
{shortNumber('en')(data?.total)}
</span>
</div>
<div className="flex flex-col md:flex-row gap-2">
<div className="flex flex-col gap-2 md:flex-row">
<div>Month</div>
<span className="text-black font-medium">
<span className="font-medium text-black">
{shortNumber('en')(data?.month)}
</span>
</div>
<div className="flex flex-col md:flex-row gap-2">
<div className="flex flex-col gap-2 md:flex-row">
<div>24h</div>
<span className="text-black font-medium">
<span className="font-medium text-black">
{shortNumber('en')(data?.day)}
</span>
</div>

2
apps/dashboard/src/components/report/PreviousDiffIndicator.tsx
View File

@@ -95,7 +95,7 @@ export function PreviousDiffIndicatorText({
return (
<div
className={cn([
'flex gap-0.5 items-center',
'flex items-center gap-0.5',
getDiffIndicator(
previousIndicatorInverted,
state,

2
apps/dashboard/src/components/report/ReportRange.tsx
View File

@@ -62,7 +62,7 @@ export function ReportRange({
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0" align="start">
<div className="p-4 border-b border-border">
<div className="border-b border-border p-4">
<ToggleGroup
value={range}
onValueChange={(value) => {

2
apps/dashboard/src/components/report/chart/ChartAnimation.tsx
View File

@@ -25,7 +25,7 @@ export const ChartAnimationContainer = (
<div
{...props}
className={cn(
'border border-border rounded-md p-8 bg-white',
'rounded-md border border-border bg-white p-8',
props.className
)}
/>

2
apps/dashboard/src/components/report/chart/ChartEmpty.tsx
View File

@@ -22,7 +22,7 @@ export function ChartEmpty() {
return (
<div
className={
'aspect-video w-full max-h-[300px] min-h-[200px] flex justify-center items-center'
'flex aspect-video max-h-[300px] min-h-[200px] w-full items-center justify-center'
}
>
No data

2
apps/dashboard/src/components/report/chart/ChartLoading.tsx
View File

@@ -7,7 +7,7 @@ export function ChartLoading({ className }: ChartLoadingProps) {
return (
<div
className={cn(
'aspect-video w-full bg-slate-200 animate-pulse rounded max-h-[300px] min-h-[200px]',
'aspect-video max-h-[300px] min-h-[200px] w-full animate-pulse rounded bg-slate-200',
className
)}
/>

24
apps/dashboard/src/components/report/chart/MetricCard.tsx
View File

@@ -56,10 +56,10 @@ export function MetricCard({
return (
<div
className="group relative card p-4 overflow-hidden h-24"
className="card group relative h-24 overflow-hidden p-4"
key={serie.name}
>
<div className="absolute inset-0 -left-1 -right-1 z-0 opacity-20 transition-opacity duration-300 group-hover:opacity-50 rounded-md">
<div className="absolute inset-0 -left-1 -right-1 z-0 rounded-md opacity-20 transition-opacity duration-300 group-hover:opacity-50">
<AutoSizer>
{({ width, height }) => (
<AreaChart
@@ -82,21 +82,21 @@ export function MetricCard({
</div>
<div className="relative">
<div className="flex items-center justify-between gap-2">
<div className="flex items-center gap-2 font-medium text-left min-w-0">
<div className="flex min-w-0 items-center gap-2 text-left font-medium">
<ColorSquare>{serie.event.id}</ColorSquare>
<span className="text-ellipsis overflow-hidden whitespace-nowrap">
<span className="overflow-hidden text-ellipsis whitespace-nowrap">
{serie.name || serie.event.displayName || serie.event.name}
</span>
</div>
{/* <PreviousDiffIndicator {...serie.metrics.previous[metric]} /> */}
</div>
<div className="flex justify-between items-end mt-2">
<div className="text-2xl font-bold text-ellipsis overflow-hidden whitespace-nowrap">
<div className="mt-2 flex items-end justify-between">
<div className="overflow-hidden text-ellipsis whitespace-nowrap text-2xl font-bold">
{renderValue(serie.metrics[metric], 'ml-1 font-light text-xl')}
</div>
<PreviousDiffIndicatorText
{...serie.metrics.previous[metric]}
className="font-medium text-xs mb-0.5"
className="mb-0.5 text-xs font-medium"
/>
</div>
</div>
@@ -106,8 +106,8 @@ export function MetricCard({
export function MetricCardEmpty() {
return (
<div className="card p-4 h-24">
<div className="flex items-center justify-center h-full text-slate-600">
<div className="card h-24 p-4">
<div className="flex h-full items-center justify-center text-slate-600">
No data
</div>
</div>
@@ -116,9 +116,9 @@ export function MetricCardEmpty() {
export function MetricCardLoading() {
return (
<div className="h-24 p-4 py-5 flex flex-col card">
<div className="bg-slate-200 rounded animate-pulse h-4 w-1/2"></div>
<div className="bg-slate-200 rounded animate-pulse h-6 w-1/5 mt-auto"></div>
<div className="card flex h-24 flex-col p-4 py-5">
<div className="h-4 w-1/2 animate-pulse rounded bg-slate-200"></div>
<div className="mt-auto h-6 w-1/5 animate-pulse rounded bg-slate-200"></div>
</div>
);
}

12
apps/dashboard/src/components/report/chart/ReportBarChart.tsx
View File

@@ -29,8 +29,8 @@ export function ReportBarChart({ data }: ReportBarChartProps) {
return (
<div
className={cn(
'flex flex-col w-full text-xs -mx-2',
editMode && 'text-base card p-4'
'-mx-2 flex w-full flex-col text-xs',
editMode && 'card p-4 text-base'
)}
>
{series.map((serie, index) => {
@@ -39,17 +39,17 @@ export function ReportBarChart({ data }: ReportBarChartProps) {
<div
key={serie.name}
className={cn(
'relative py-3 px-2 flex flex-1 w-full gap-4 items-center even:bg-slate-50 rounded overflow-hidden',
'[&_[role=progressbar]]:even:bg-white [&_[role=progressbar]]:shadow-sm',
'relative flex w-full flex-1 items-center gap-4 overflow-hidden rounded px-2 py-3 even:bg-slate-50',
'[&_[role=progressbar]]:shadow-sm [&_[role=progressbar]]:even:bg-white',
isClickable && 'cursor-pointer hover:!bg-slate-100'
)}
{...(isClickable ? { onClick: () => onClick(serie) } : {})}
>
<div className="flex-1 break-all flex items-center gap-2 font-medium">
<div className="flex flex-1 items-center gap-2 break-all font-medium">
<SerieIcon name={serie.name} />
{serie.name}
</div>
<div className="flex-shrink-0 flex w-1/4 gap-4 items-center justify-end">
<div className="flex w-1/4 flex-shrink-0 items-center justify-end gap-4">
<PreviousDiffIndicatorText
{...serie.metrics.previous[metric]}
className="text-xs font-medium"

4
apps/dashboard/src/components/report/chart/ReportChartTooltip.tsx
View File

@@ -39,7 +39,7 @@ export function ReportChartTooltip({
const hidden = sorted.slice(limit);
return (
<div className="flex flex-col gap-2 rounded-xl border bg-white p-3 text-sm shadow-xl min-w-[180px]">
<div className="flex min-w-[180px] flex-col gap-2 rounded-xl border bg-white p-3 text-sm shadow-xl">
{visible.map((item, index) => {
// If we have a <Cell /> component, payload can be nested
const payload = item.payload.payload ?? item.payload;
@@ -62,7 +62,7 @@ export function ReportChartTooltip({
className="w-[3px] rounded-full"
style={{ background: data.color }}
/>
<div className="flex flex-col flex-1">
<div className="flex flex-1 flex-col">
<div className="min-w-0 max-w-[200px] overflow-hidden text-ellipsis whitespace-nowrap font-medium">
{getLabel(data.label)}
</div>

10
apps/dashboard/src/components/report/chart/ReportTable.tsx
View File

@@ -55,8 +55,8 @@ export function ReportTable({
return (
<>
<div className="grid grid-cols-[200px_1fr] border border-border rounded-md overflow-hidden">
<Table className="rounded-none border-t-0 border-l-0 border-b-0">
<div className="grid grid-cols-[200px_1fr] overflow-hidden rounded-md border border-border">
<Table className="rounded-none border-b-0 border-l-0 border-t-0">
<TableHeader>
<TableRow>
<TableHead>Name</TableHead>
@@ -88,7 +88,7 @@ export function ReportTable({
/>
<Tooltip delayDuration={200}>
<TooltipTrigger asChild>
<div className="min-w-0 overflow-hidden whitespace-nowrap text-ellipsis">
<div className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">
{getLabel(serie.name)}
</div>
</TooltipTrigger>
@@ -157,8 +157,8 @@ export function ReportTable({
</Table>
</div>
</div>
<div className="flex flex-col-reverse gap-4 md:flex-row md:justify-between md:items-center">
<div className="flex gap-1 flex-wrap">
<div className="flex flex-col-reverse gap-4 md:flex-row md:items-center md:justify-between">
<div className="flex flex-wrap gap-1">
<Badge>Total: {number.format(data.metrics.sum)}</Badge>
<Badge>Average: {number.format(data.metrics.average)}</Badge>
<Badge>Min: {number.format(data.metrics.min)}</Badge>

2
apps/dashboard/src/components/report/chart/ResponsiveContainer.tsx
View File

@@ -17,7 +17,7 @@ export function ResponsiveContainer({ children }: ResponsiveContainerProps) {
maxHeight,
minHeight,
}}
className={cn('max-sm:-mx-3 aspect-video w-full', editMode && 'card p-4')}
className={cn('aspect-video w-full max-sm:-mx-3', editMode && 'card p-4')}
>
<AutoSizer disableHeight>
{({ width }) =>

2
apps/dashboard/src/components/report/chart/SerieIcon.flags.tsx
View File

@@ -4,7 +4,7 @@ const createFlagIcon = (url: string) => {
return function (_props: LucideProps) {
return (
<span
className={`rounded-[2px] overflow-hidden !block !leading-[1rem] fi fi-${url}`}
className={`fi !block overflow-hidden rounded-[2px] !leading-[1rem] fi-${url}`}
></span>
);
} as LucideIcon;

4
apps/dashboard/src/components/report/chart/SerieIcon.tsx
View File

@@ -29,7 +29,7 @@ function getProxyImage(url: string) {
const createImageIcon = (url: string) => {
return function (_props: LucideProps) {
return <img className="h-4 object-contain rounded-[2px]" src={url} />;
return <img className="h-4 rounded-[2px] object-contain" src={url} />;
} as LucideIcon;
};
@@ -81,7 +81,7 @@ export function SerieIcon({ name, ...props }: SerieIconProps) {
}, [name]);
return Icon ? (
<div className="h-4 flex-shrink-0 relative [&_a]:![&_a]:!h-4 [&_svg]:!rounded-[2px]">
<div className="[&_a]:![&_a]:!h-4 relative h-4 flex-shrink-0 [&_svg]:!rounded-[2px]">
<Icon size={16} {...props} />
</div>
) : null;

26
apps/dashboard/src/components/report/funnel/Funnel.tsx
View File

@@ -94,7 +94,7 @@ export function FunnelSteps({
return (
<CarouselItem
className={cn(
'flex-[0_0_250px] max-w-full p-0 px-1',
'max-w-full flex-[0_0_250px] p-0 px-1',
editMode && 'flex-[0_0_320px]'
)}
key={step.event.id}
@@ -106,13 +106,13 @@ export function FunnelSteps({
{step.event.displayName || step.event.name}
</h3>
</div>
<div className="aspect-square relative">
<div className="relative aspect-square">
<FunnelChart from={step.prevPercent} to={step.percent} />
<div className="absolute top-0 left-0 right-0 p-4 flex flex-col bg-white/40">
<div className="uppercase font-medium text-muted-foreground">
<div className="absolute left-0 right-0 top-0 flex flex-col bg-white/40 p-4">
<div className="font-medium uppercase text-muted-foreground">
Sessions
</div>
<div className="uppercase text-3xl font-bold flex items-center">
<div className="flex items-center text-3xl font-bold uppercase">
<span className="text-muted-foreground">
{step.before}
</span>
@@ -130,34 +130,34 @@ export function FunnelSteps({
</div>
</div>
{finalStep ? (
<div className={cn('p-4 flex flex-col items-center')}>
<div className="uppercase text-xs font-medium">
<div className={cn('flex flex-col items-center p-4')}>
<div className="text-xs font-medium uppercase">
Conversion
</div>
<div
className={cn(
'uppercase text-3xl font-bold',
'text-3xl font-bold uppercase',
getDropoffColor(step.dropoff.percent)
)}
>
{round(step.percent, 1)}%
</div>
<div className="uppercase text-sm mt-0 font-medium text-muted-foreground">
<div className="mt-0 text-sm font-medium uppercase text-muted-foreground">
Converted {step.current} of {totalSessions} sessions
</div>
</div>
) : (
<div className={cn('p-4 flex flex-col items-center')}>
<div className="uppercase text-xs font-medium">Dropoff</div>
<div className={cn('flex flex-col items-center p-4')}>
<div className="text-xs font-medium uppercase">Dropoff</div>
<div
className={cn(
'uppercase text-3xl font-bold',
'text-3xl font-bold uppercase',
getDropoffColor(step.dropoff.percent)
)}
>
{round(step.dropoff.percent, 1)}%
</div>
<div className="uppercase text-sm mt-0 font-medium text-muted-foreground">
<div className="mt-0 text-sm font-medium uppercase text-muted-foreground">
Lost {step.dropoff.count} sessions
</div>
</div>

2
apps/dashboard/src/components/report/sidebar/EventPropertiesCombobox.tsx
View File

@@ -51,7 +51,7 @@ export function EventPropertiesCombobox({
>
<button
className={cn(
'flex items-center gap-1 rounded-md border border-border p-1 px-2 font-medium leading-none text-xs',
'flex items-center gap-1 rounded-md border border-border p-1 px-2 text-xs font-medium leading-none',
!event.property && 'border-destructive text-destructive'
)}
>

4
apps/dashboard/src/components/report/sidebar/ReportEvents.tsx
View File

@@ -135,7 +135,7 @@ export function ReportEvents() {
]}
label="Segment"
>
<button className="flex items-center gap-1 rounded-md border border-border p-1 px-2 font-medium leading-none text-xs bg-white">
<button className="flex items-center gap-1 rounded-md border border-border bg-white p-1 px-2 text-xs font-medium leading-none">
{event.segment === 'user' ? (
<>
<Users size={12} /> Unique users
@@ -203,7 +203,7 @@ export function ReportEvents() {
/>
</div>
<label
className="flex items-center gap-2 cursor-pointer select-none text-sm font-medium mt-4"
className="mt-4 flex cursor-pointer select-none items-center gap-2 text-sm font-medium"
htmlFor="previous"
>
<Checkbox

2
apps/dashboard/src/components/report/sidebar/filters/FiltersCombobox.tsx
View File

@@ -54,7 +54,7 @@ export function FiltersCombobox({ event }: FiltersComboboxProps) {
);
}}
>
<button className="flex items-center gap-1 rounded-md border border-border p-1 px-2 font-medium leading-none text-xs bg-white">
<button className="flex items-center gap-1 rounded-md border border-border bg-white p-1 px-2 text-xs font-medium leading-none">
<FilterIcon size={12} /> Add filter
</button>
</Combobox>

2
apps/dashboard/src/components/ui/alert.tsx
View File

@@ -4,7 +4,7 @@ import { cva } from 'class-variance-authority';
import type { VariantProps } from 'class-variance-authority';
const alertVariants = cva(
'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
'relative w-full rounded-lg border p-4 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',
{
variants: {
variant: {

2
apps/dashboard/src/components/ui/badge.tsx
View File

@@ -6,7 +6,7 @@ import { cva } from 'class-variance-authority';
import type { VariantProps } from 'class-variance-authority';
const badgeVariants = cva(
'inline-flex items-center rounded-full border px-1.5 h-[20px] text-[10px] font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
'inline-flex h-[20px] items-center rounded-full border px-1.5 text-[10px] font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
{
variants: {
variant: {

4
apps/dashboard/src/components/ui/button.tsx
View File

@@ -9,7 +9,7 @@ import type { LucideIcon } from 'lucide-react';
import { Loader2 } from 'lucide-react';
const buttonVariants = cva(
'flex-shrink-0 inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
'inline-flex flex-shrink-0 items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
{
variants: {
variant: {
@@ -75,7 +75,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
{Icon && (
<Icon
className={cn(
'h-4 w-4 mr-2 flex-shrink-0',
'mr-2 h-4 w-4 flex-shrink-0',
responsive && 'mr-0 sm:mr-2',
loading && 'animate-spin'
)}

2
apps/dashboard/src/components/ui/checkbox.tsx
View File

@@ -30,7 +30,7 @@ const CheckboxInput = React.forwardRef<
React.ElementRef<typeof CheckboxPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
>((props, ref) => (
<label className="cursor-pointer flex items-center select-none border border-border rounded-md px-3 gap-4 min-h-10">
<label className="flex min-h-10 cursor-pointer select-none items-center gap-4 rounded-md border border-border px-3">
<Checkbox ref={ref} {...props} />
<div className="text-sm font-medium">{props.children}</div>
</label>

4
apps/dashboard/src/components/ui/combobox-advanced.tsx
View File

@@ -63,7 +63,7 @@ export function ComboboxAdvanced({
: [...value, item.value]
);
}}
className={'cursor-pointer flex items-center gap-2'}
className={'flex cursor-pointer items-center gap-2'}
>
<Checkbox checked={checked} className="pointer-events-none" />
{item?.label ?? item?.value}
@@ -84,7 +84,7 @@ export function ComboboxAdvanced({
onClick={() => setOpen((prev) => !prev)}
className={className}
>
<div className="flex gap-1 flex-wrap w-full">
<div className="flex w-full flex-wrap gap-1">
{value.length === 0 && placeholder}
{value.map((value) => {
const item = items.find((item) => item.value === value) ?? {

2
apps/dashboard/src/components/ui/combobox.tsx
View File

@@ -117,7 +117,7 @@ export function Combobox<T extends string>({
) : (
<CommandEmpty>Nothing selected</CommandEmpty>
)}
<div className="max-h-[300px] overflow-y-auto over-x-hidden">
<div className="over-x-hidden max-h-[300px] overflow-y-auto">
<CommandGroup>
{items.map((item) => (
<CommandItem

2
apps/dashboard/src/components/ui/dialog.tsx
View File

@@ -77,7 +77,7 @@ const DialogFooter = ({
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
'flex flex-col-reverse sm:flex-row sm:justify-end gap-2',
'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
className
)}
{...props}

4
apps/dashboard/src/components/ui/gradient-background.tsx
View File

@@ -13,12 +13,12 @@ export function GradientBackground({
return (
<div
className={cn(
'bg-gradient-to-tr from-slate-100 to-white rounded-md',
'rounded-md bg-gradient-to-tr from-slate-100 to-white',
className
)}
{...props}
>
<div className="p-4 flex flex-col gap-4">{children}</div>
<div className="flex flex-col gap-4 p-4">{children}</div>
</div>
);
}

6
apps/dashboard/src/components/ui/key-value.tsx
View File

@@ -15,15 +15,15 @@ export function KeyValue({ href, onClick, name, value }: KeyValueProps) {
return (
<Component
className={cn(
'group overflow-hidden flex border border-border rounded-md text-xs divide-x font-medium self-start min-w-0 max-w-full transition-transform',
'group flex min-w-0 max-w-full divide-x self-start overflow-hidden rounded-md border border-border text-xs font-medium transition-transform',
clickable && 'hover:-translate-y-0.5'
)}
{...{ href, onClick }}
>
<div className="p-1 px-2 bg-black/5">{name}</div>
<div className="bg-black/5 p-1 px-2">{name}</div>
<div
className={cn(
'p-1 px-2 font-mono text-blue-700 bg-white whitespace-nowrap overflow-hidden text-ellipsis shadow-[inset_0_0_0_1px_#fff]',
'overflow-hidden text-ellipsis whitespace-nowrap bg-white p-1 px-2 font-mono text-blue-700 shadow-[inset_0_0_0_1px_#fff]',
clickable && 'group-hover:underline'
)}
>

2
apps/dashboard/src/components/ui/label.tsx
View File

@@ -7,7 +7,7 @@ import { cva } from 'class-variance-authority';
import type { VariantProps } from 'class-variance-authority';
const labelVariants = cva(
'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 block mb-2'
'mb-2 block text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
);
const Label = React.forwardRef<

27
apps/dashboard/src/components/ui/radio-group.tsx
View File

@@ -1,8 +1,7 @@
import * as React from "react"
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
import { Circle } from "lucide-react"
import { cn } from "@/utils/cn"
import * as React from 'react';
import { cn } from '@/utils/cn';
import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
import { Circle } from 'lucide-react';
const RadioGroup = React.forwardRef<
React.ElementRef<typeof RadioGroupPrimitive.Root>,
@@ -10,13 +9,13 @@ const RadioGroup = React.forwardRef<
>(({ className, ...props }, ref) => {
return (
<RadioGroupPrimitive.Root
className={cn("grid gap-2", className)}
className={cn('grid gap-2', className)}
{...props}
ref={ref}
/>
)
})
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
);
});
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
const RadioGroupItem = React.forwardRef<
React.ElementRef<typeof RadioGroupPrimitive.Item>,
@@ -26,7 +25,7 @@ const RadioGroupItem = React.forwardRef<
<RadioGroupPrimitive.Item
ref={ref}
className={cn(
"aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
'aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
className
)}
{...props}
@@ -35,8 +34,8 @@ const RadioGroupItem = React.forwardRef<
<Circle className="h-2.5 w-2.5 fill-current text-current" />
</RadioGroupPrimitive.Indicator>
</RadioGroupPrimitive.Item>
)
})
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
);
});
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
export { RadioGroup, RadioGroupItem }
export { RadioGroup, RadioGroupItem };

6
apps/dashboard/src/components/ui/sheet.tsx
View File

@@ -31,16 +31,16 @@ const SheetOverlay = React.forwardRef<
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
const sheetVariants = cva(
'flex flex-col max-sm:w-[calc(100%-theme(spacing.8))] overflow-y-auto fixed z-50 gap-4 bg-background p-6 rounded-lg shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
'fixed z-50 flex flex-col gap-4 overflow-y-auto rounded-lg bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out max-sm:w-[calc(100%-theme(spacing.8))]',
{
variants: {
side: {
top: 'inset-x-4 top-4 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
bottom:
'inset-x-4 bottom-4 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
left: 'top-4 bottom-4 left-4 w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
left: 'bottom-4 left-4 top-4 w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
right:
'top-4 bottom-4 right-4 w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
'bottom-4 right-4 top-4 w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
},
},
defaultVariants: {

4
apps/dashboard/src/components/ui/table.tsx
View File

@@ -75,7 +75,7 @@ const TableHead = React.forwardRef<
<th
ref={ref}
className={cn(
'px-4 h-10 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 shadow-[0_0_0_0.5px] shadow-border',
'h-10 px-4 text-left align-middle font-medium text-muted-foreground shadow-[0_0_0_0.5px] shadow-border [&:has([role=checkbox])]:pr-0',
className
)}
{...props}
@@ -90,7 +90,7 @@ const TableCell = React.forwardRef<
<td
ref={ref}
className={cn(
'px-4 h-12 align-middle [&:has([role=checkbox])]:pr-0 shadow-[0_0_0_0.5px] shadow-border whitespace-nowrap',
'h-12 whitespace-nowrap px-4 align-middle shadow-[0_0_0_0.5px] shadow-border [&:has([role=checkbox])]:pr-0',
className
)}
{...props}

4
apps/dashboard/src/components/widget-table.tsx
View File

@@ -10,7 +10,7 @@ interface Props<T> {
export function WidgetTable<T>({ columns, data, keyExtractor }: Props<T>) {
return (
<table className="w-full">
<thead className="bg-slate-50 border-b border-border text-slate-500 [&_th]:font-medium text-sm [&_th]:p-4 [&_th]:py-2 [&_th]:text-left [&_th:last-child]:text-right [&_th]:whitespace-nowrap">
<thead className="border-b border-border bg-slate-50 text-sm text-slate-500 [&_th:last-child]:text-right [&_th]:whitespace-nowrap [&_th]:p-4 [&_th]:py-2 [&_th]:text-left [&_th]:font-medium">
<tr>
{columns.map((column) => (
<th key={column.name}>{column.name}</th>
@@ -21,7 +21,7 @@ export function WidgetTable<T>({ columns, data, keyExtractor }: Props<T>) {
{data.map((item) => (
<tr
key={keyExtractor(item)}
className="text-sm border-b border-border last:border-0 [&_td]:p-4 [&_td:first-child]:text-left text-right"
className="border-b border-border text-right text-sm last:border-0 [&_td:first-child]:text-left [&_td]:p-4"
>
{columns.map((column) => (
<td key={column.name}>{column.render(item)}</td>

2
apps/dashboard/src/components/widget.tsx
View File

@@ -8,7 +8,7 @@ export function WidgetHead({ children, className }: WidgetHeadProps) {
return (
<div
className={cn(
'p-4 border-b border-border [&_.title]:font-medium [&_.title]:whitespace-nowrap',
'border-b border-border p-4 [&_.title]:whitespace-nowrap [&_.title]:font-medium',
className
)}
>