diff --git a/package.json b/package.json index 40acca28..f6144473 100644 --- a/package.json +++ b/package.json @@ -78,7 +78,7 @@ "@react-spring/web": "^9.7.5", "@tanstack/react-query": "^5.68.0", "@umami/prisma-client": "^0.16.0", - "@umami/react-zen": "^0.71.0", + "@umami/react-zen": "^0.73.0", "@umami/redis-client": "^0.27.0", "bcryptjs": "^2.4.3", "chalk": "^4.1.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 615e30c1..2a82cb1f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -45,8 +45,8 @@ importers: specifier: ^0.16.0 version: 0.16.0(@prisma/client@6.5.0(prisma@6.5.0(typescript@5.8.2))(typescript@5.8.2))(@prisma/extension-read-replicas@0.4.0(@prisma/client@6.5.0(prisma@6.5.0(typescript@5.8.2))(typescript@5.8.2))) '@umami/react-zen': - specifier: ^0.71.0 - version: 0.71.0(@babel/core@7.26.9)(@types/react@19.0.10)(immer@9.0.21)(use-sync-external-store@1.4.0(react@19.0.0)) + specifier: ^0.73.0 + version: 0.73.0(@babel/core@7.26.9)(@types/react@19.0.10)(immer@9.0.21)(use-sync-external-store@1.4.0(react@19.0.0)) '@umami/redis-client': specifier: ^0.27.0 version: 0.27.0 @@ -2964,8 +2964,8 @@ packages: '@prisma/client': ^4.8.0 '@prisma/extension-read-replicas': ^0.3.0 - '@umami/react-zen@0.71.0': - resolution: {integrity: sha512-SIfbDv/uW7mN5uebDeBeD+MnRiOrjsa2pJmVEdobyiM3ImdshpVVYxyBAJqAbiKbLF4OGZgRVbFsRfUcP/2Y0w==} + '@umami/react-zen@0.73.0': + resolution: {integrity: sha512-cNagvTuo0QDaQPQzrfTBNafNnd1B5ygAMZyq7pi+O2U6Sr2pPi8iUW89VU07L2jjc1qoOncs66Ek08bsRHVHbQ==} '@umami/redis-client@0.27.0': resolution: {integrity: sha512-SbHTpxhgeZyTBUSp2zdZM+XUtpsaSL4Tad8QXIEhEtjWhvvfoornyT5kLuyYCVtzSAT4daALeGmOO1z6EE1KcA==} @@ -10605,7 +10605,7 @@ snapshots: transitivePeerDependencies: - supports-color - '@umami/react-zen@0.71.0(@babel/core@7.26.9)(@types/react@19.0.10)(immer@9.0.21)(use-sync-external-store@1.4.0(react@19.0.0))': + '@umami/react-zen@0.73.0(@babel/core@7.26.9)(@types/react@19.0.10)(immer@9.0.21)(use-sync-external-store@1.4.0(react@19.0.0))': dependencies: '@fontsource/jetbrains-mono': 5.2.5 '@react-aria/focus': 3.20.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0) diff --git a/src/app/(main)/Nav.tsx b/src/app/(main)/Nav.tsx index dd32b638..ee25a00a 100644 --- a/src/app/(main)/Nav.tsx +++ b/src/app/(main)/Nav.tsx @@ -45,13 +45,13 @@ export function Nav(props: any) { {links.map(({ href, label, icon }) => { return ( - + ); })} - + {``} ); } diff --git a/src/app/(main)/reports/[reportId]/FieldParameters.tsx b/src/app/(main)/reports/[reportId]/FieldParameters.tsx index 18ed6c11..53ef5a93 100644 --- a/src/app/(main)/reports/[reportId]/FieldParameters.tsx +++ b/src/app/(main)/reports/[reportId]/FieldParameters.tsx @@ -11,9 +11,10 @@ export function FieldParameters() { const { fields } = parameters || {}; const { fields: fieldOptions } = useFields(); - const handleAdd = (value: { name: any }) => { - if (!fields.find(({ name }) => name === value.name)) { - updateReport({ parameters: { fields: fields.concat(value) } }); + const handleAdd = (value: string) => { + if (!fields.find(({ name }) => name === value)) { + const field = fieldOptions.find(({ name }) => name === value); + updateReport({ parameters: { fields: fields.concat(field) } }); } }; @@ -21,30 +22,24 @@ export function FieldParameters() { updateReport({ parameters: { fields: fields.filter(f => f.name !== name) } }); }; - const AddButton = () => { - return ( - - - - !fields.find(f => f.name === name))} - onSelect={handleAdd} - showType={false} - /> - - - ); - }; - return ( - + + + + !fields.find(f => f.name === name))} + onSelect={handleAdd} + showType={false} + /> + + {fields.map(({ name }) => { diff --git a/src/app/(main)/reports/[reportId]/FieldSelectForm.tsx b/src/app/(main)/reports/[reportId]/FieldSelectForm.tsx index 73501732..a60e34c5 100644 --- a/src/app/(main)/reports/[reportId]/FieldSelectForm.tsx +++ b/src/app/(main)/reports/[reportId]/FieldSelectForm.tsx @@ -1,10 +1,9 @@ -import { Menu, MenuItem, Text, MenuSection } from '@umami/react-zen'; +import { Menu, MenuItem, Text, MenuSection, Row } from '@umami/react-zen'; import { useMessages } from '@/components/hooks'; -import { Key } from 'react'; export interface FieldSelectFormProps { fields?: any[]; - onSelect?: (key: any) => void; + onSelect?: (value: any) => void; showType?: boolean; } @@ -12,13 +11,15 @@ export function FieldSelectForm({ fields = [], onSelect, showType = true }: Fiel const { formatMessage, labels } = useMessages(); return ( - onSelect(fields[key as any])}> + - {fields.map(({ name, label, type }: any, index: Key) => { + {fields.map(({ name, label, type }) => { return ( - - {label || name} - {showType && type && {type}} + onSelect(name)}> + + {label || name} + {showType && type && {type}} + ); })} diff --git a/src/app/(main)/reports/[reportId]/FilterParameters.tsx b/src/app/(main)/reports/[reportId]/FilterParameters.tsx index c4e4c0f6..0d2caa74 100644 --- a/src/app/(main)/reports/[reportId]/FilterParameters.tsx +++ b/src/app/(main)/reports/[reportId]/FilterParameters.tsx @@ -8,8 +8,8 @@ import { Icon, Popover, MenuTrigger, - Focusable, Text, + Pressable, } from '@umami/react-zen'; import { FilterSelectForm } from '../[reportId]/FilterSelectForm'; import { ParameterList } from '../[reportId]/ParameterList'; @@ -48,32 +48,26 @@ export function FilterParameters() { close(); }; - const AddButton = () => { - return ( - - - - !filters.find(f => f.name === name))} - startDate={dateRange?.startDate} - endDate={dateRange?.endDate} - onChange={handleAdd} - /> - - - ); - }; - return ( - + + + + !filters.find(f => f.name === name))} + startDate={dateRange?.startDate} + endDate={dateRange?.endDate} + onChange={handleAdd} + /> + + {filters.map( @@ -117,15 +111,15 @@ const FilterParameter = ({ return ( - - + + {label} {operatorLabels[operator]} {value} - + {(close: any) => ( + {!children && } {children} @@ -40,6 +40,7 @@ const Item = ({ border borderRadius="2" paddingLeft="3" + shadow="2" > {icon && {icon}} {children} diff --git a/src/app/(main)/websites/[websiteId]/WebsiteFilterButton.tsx b/src/app/(main)/websites/[websiteId]/WebsiteFilterButton.tsx index 83518148..aeed8abc 100644 --- a/src/app/(main)/websites/[websiteId]/WebsiteFilterButton.tsx +++ b/src/app/(main)/websites/[websiteId]/WebsiteFilterButton.tsx @@ -1,4 +1,4 @@ -import { Button, Icon, Icons, Box, MenuTrigger, Popover, Text } from '@umami/react-zen'; +import { Button, Icon, Icons, MenuTrigger, Popover, Text } from '@umami/react-zen'; import { FilterSelectForm } from '@/app/(main)/reports/[reportId]/FilterSelectForm'; import { useFields, useMessages, useNavigation, useDateRange } from '@/components/hooks'; import { OPERATOR_PREFIXES } from '@/lib/constants'; @@ -34,21 +34,19 @@ export function WebsiteFilterButton({ {showText && {formatMessage(labels.filter)}} - + {({ close }: any) => { return ( - - { - handleAddFilter(value); - close(); - }} - /> - + { + handleAddFilter(value); + close(); + }} + /> ); }} diff --git a/src/components/common/Panel.tsx b/src/components/common/Panel.tsx index 6d86b284..5c0753ce 100644 --- a/src/components/common/Panel.tsx +++ b/src/components/common/Panel.tsx @@ -2,5 +2,15 @@ import { Box } from '@umami/react-zen'; import type { BoxProps } from '@umami/react-zen/Box'; export function Panel(props: BoxProps) { - return ; + return ( + + ); } diff --git a/src/components/input/DateFilter.tsx b/src/components/input/DateFilter.tsx index 7aab419a..b55168e5 100644 --- a/src/components/input/DateFilter.tsx +++ b/src/components/input/DateFilter.tsx @@ -1,4 +1,4 @@ -import { useState, Key } from 'react'; +import { useState, Key, Fragment } from 'react'; import { Icon, Modal, Select, Text, Row, ListItem, ListSeparator, Dialog } from '@umami/react-zen'; import { endOfYear, isSameDay } from 'date-fns'; import { DatePickerForm } from '@/components/metrics/DatePickerForm'; @@ -101,12 +101,12 @@ export function DateFilter({ > {options.map(({ label, value, divider }: any) => { return ( - <> + {divider && } - + {label} - + ); })} diff --git a/src/components/metrics/MetricCard.module.css b/src/components/metrics/MetricCard.module.css index ec390830..5d0bc16c 100644 --- a/src/components/metrics/MetricCard.module.css +++ b/src/components/metrics/MetricCard.module.css @@ -1,6 +1,5 @@ .card { border-right: 1px solid var(--border-color); - padding: 0 50px; } .card:last-child { diff --git a/src/components/metrics/MetricCard.tsx b/src/components/metrics/MetricCard.tsx index 7c7cfa87..0ac4b54a 100644 --- a/src/components/metrics/MetricCard.tsx +++ b/src/components/metrics/MetricCard.tsx @@ -34,8 +34,12 @@ export const MetricCard = ({ const prevProps = useSpring({ x: Number(diff) || 0, from: { x: 0 } }); return ( - - {showLabel && {label}} + + {showLabel && ( + + {label} + + )} {props?.x?.to(x => formatValue(x))}