watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-11 08:07:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Zen components conversion.

Browse source
This commit is contained in:
Mike Cao 2025-03-07 03:11:58 -08:00
parent aac1a12e51
commit 5999bf6256
142 changed files with 1235 additions and 1454 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/app/(main)/websites/[websiteId]/WebsiteChartList.tsx
View file

@ -1,12 +1,12 @@
import { Button, Text, Icon, Icons } from 'react-basics';
import { Text, Icon, Icons } from '@umami/react-zen';
import { useMemo } from 'react';
import { firstBy } from 'thenby';
import Link from 'next/link';
import { WebsiteChart } from './WebsiteChart';
import { useDashboard } from '@/store/dashboard';
import { WebsiteHeader } from './WebsiteHeader';
import { WebsiteMetricsBar } from './WebsiteMetricsBar';
import { useMessages, useLocale, useTeamUrl } from '@/components/hooks';
import { useMessages, useTeamUrl } from '@/components/hooks';
import { LinkButton } from '@/components/common/LinkButton';
export function WebsiteChartList({
websites,
@ -20,7 +20,6 @@ export function WebsiteChartList({
const { formatMessage, labels } = useMessages();
const { websiteOrder, websiteActive } = useDashboard();
const { renderTeamUrl } = useTeamUrl();
const { dir } = useLocale();
const ordered = useMemo(() => {
return websites
@ -35,16 +34,14 @@ export function WebsiteChartList({
return index < limit ? (
<div key={id}>
<WebsiteHeader websiteId={id} showLinks={false}>
<Link href={renderTeamUrl(`/websites/${id}`)}>
<Button variant="primary">
<Text>{formatMessage(labels.viewDetails)}</Text>
<LinkButton href={renderTeamUrl(`/websites/${id}`)} variant="primary">
<Text>{formatMessage(labels.viewDetails)}</Text>
<Icon>
<Icon>
<Icon rotate={dir === 'rtl' ? 180 : 0}>
<Icons.ArrowRight />
</Icon>
<Icons.Arrow />
</Icon>
</Button>
</Link>
</Icon>
</LinkButton>
</WebsiteHeader>
<WebsiteMetricsBar websiteId={id} showChange={true} />
{showCharts && <WebsiteChart websiteId={id} />}

64
src/app/(main)/websites/[websiteId]/WebsiteExpandedView.module.css
View file

@ -1,64 +0,0 @@
.layout {
display: grid;
grid-template-columns: 300px 1fr;
border-top: 1px solid var(--base300);
}
.menu {
display: flex;
flex-direction: column;
position: relative;
padding: 20px 20px 20px 0;
}
.back {
display: inline-flex;
align-items: center;
align-self: center;
margin-bottom: 20px;
}
.content {
min-height: 800px;
padding: 20px 0 20px 20px;
border-left: 1px solid var(--base300);
}
.dropdown {
display: none;
}
@media screen and (max-width: 992px) {
.layout {
grid-template-columns: 1fr;
}
.content {
border: 0;
}
.back {
align-self: flex-start;
margin: 0;
}
.nav {
display: none;
}
.dropdown {
display: flex;
width: 200px;
align-self: flex-end;
}
.menu {
display: flex;
flex-direction: row;
gap: 20px;
align-items: center;
justify-content: space-between;
padding-inline-end: 0;
z-index: 10;
}
}

45
src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx
View file

@ -1,6 +1,6 @@
import { Dropdown, Icon, Icons, Item, Text } from 'react-basics';
import { Select, Icon, Icons, ListItem, Text, Grid, Column } from '@umami/react-zen';
import { LinkButton } from '@/components/common/LinkButton';
import { useLocale, useMessages, useNavigation } from '@/components/hooks';
import { useMessages, useNavigation } from '@/components/hooks';
import { MenuNav } from '@/components/layout/MenuNav';
import { BrowsersTable } from '@/components/metrics/BrowsersTable';
import { CitiesTable } from '@/components/metrics/CitiesTable';
@ -17,7 +17,7 @@ import { RegionsTable } from '@/components/metrics/RegionsTable';
import { ScreenTable } from '@/components/metrics/ScreenTable';
import { TagsTable } from '@/components/metrics/TagsTable';
import { ChannelsTable } from '@/components/metrics/ChannelsTable';
import styles from './WebsiteExpandedView.module.css';
import Link from 'next/link';
const views = {
url: PagesTable,
@ -48,7 +48,6 @@ export function WebsiteExpandedView({
websiteId: string;
domainName?: string;
}) {
const { dir } = useLocale();
const { formatMessage, labels } = useMessages();
const {
router,
@ -136,39 +135,25 @@ export function WebsiteExpandedView({
const DetailsComponent = views[view] || (() => null);
/*
const handleChange = (view: any) => {
router.push(renderUrl({ view }));
};
const renderValue = (value: string) => items.find(({ key }) => key === value)?.label;
*/
return (
<div className={styles.layout}>
<div className={styles.menu}>
<LinkButton
href={renderUrl({ view: undefined })}
className={styles.back}
variant="quiet"
scroll={false}
>
<Icon rotate={dir === 'rtl' ? 0 : 180}>
<Icons.ArrowRight />
<Grid columns="auto 1fr" gap="6">
<Column gap="6" width="200px">
<LinkButton href={renderUrl({ view: undefined })} variant="quiet" scroll={false}>
<Icon rotate={180}>
<Icons.Arrow />
</Icon>
<Text>{formatMessage(labels.back)}</Text>
</LinkButton>
<MenuNav className={styles.nav} items={items} selectedKey={view} shallow={true} />
<Dropdown
className={styles.dropdown}
items={items}
value={view}
renderValue={renderValue}
onChange={handleChange}
alignment="end"
>
{({ key, label }) => <Item key={key}>{label}</Item>}
</Dropdown>
</div>
<div className={styles.content}>
<MenuNav items={items} selectedKey={view} />
</Column>
<Column>
<DetailsComponent
websiteId={websiteId}
domainName={domainName}
@ -178,7 +163,7 @@ export function WebsiteExpandedView({
allowFilter={true}
allowSearch={true}
/>
</div>
</div>
</Column>
</Grid>
);
}

20
src/app/(main)/websites/[websiteId]/WebsiteFilterButton.tsx
View file

@ -1,4 +1,4 @@
import { Button, Icon, Icons, Popup, PopupTrigger, Text } from 'react-basics';
import { Button, Icon, Icons, Box, MenuTrigger, Popover, Text } from '@umami/react-zen';
import { PopupForm } from '@/app/(main)/reports/[reportId]/PopupForm';
import { FilterSelectForm } from '@/app/(main)/reports/[reportId]/FilterSelectForm';
import { useFields, useMessages, useNavigation, useDateRange } from '@/components/hooks';
@ -7,13 +7,9 @@ import styles from './WebsiteFilterButton.module.css';
export function WebsiteFilterButton({
websiteId,
className,
position = 'bottom',
alignment = 'end',
showText = true,
}: {
websiteId: string;
className?: string;
position?: 'bottom' | 'top' | 'left' | 'right';
alignment?: 'end' | 'center' | 'start';
showText?: boolean;
@ -32,17 +28,17 @@ export function WebsiteFilterButton({
};
return (
<PopupTrigger className={className}>
<MenuTrigger>
<Button className={styles.button} variant="quiet">
<Icon>
<Icons.Plus />
</Icon>
{showText && <Text>{formatMessage(labels.filter)}</Text>}
</Button>
<Popup position={position} alignment={alignment}>
{(close: () => void) => {
<Popover placement="bottom end">
{({ close }: any) => {
return (
<PopupForm>
<Box padding="3" backgroundColor="1">
<FilterSelectForm
websiteId={websiteId}
fields={fields}
@ -53,10 +49,10 @@ export function WebsiteFilterButton({
close();
}}
/>
</PopupForm>
</Box>
);
}}
</Popup>
</PopupTrigger>
</Popover>
</MenuTrigger>
);
}

2
src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx
View file

@ -1,5 +1,5 @@
import { ReactNode } from 'react';
import { Button, Icon, Text } from 'react-basics';
import { Button, Icon, Text } from '@umami/react-zen';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import classNames from 'classnames';

10
src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx
View file

@ -1,4 +1,4 @@
import { Dropdown, Item } from 'react-basics';
import { Select, ListItem } from '@umami/react-zen';
import classNames from 'classnames';
import { useDateRange, useMessages, useSticky } from '@/components/hooks';
import { WebsiteDateFilter } from '@/components/input/WebsiteDateFilter';
@ -114,18 +114,16 @@ export function WebsiteMetricsBar({
{compareMode && (
<div className={styles.vs}>
<b>VS</b>
<Dropdown
<Select
className={styles.dropdown}
items={items}
value={dateCompare || 'prev'}
renderValue={value => items.find(i => i.value === value)?.label}
alignment="end"
onChange={(value: any) => setWebsiteDateCompare(websiteId, value)}
>
{items.map(({ label, value }) => (
<Item key={value}>{label}</Item>
<ListItem key={value}>{label}</ListItem>
))}
</Dropdown>
</Select>
</div>
)}
</div>

2
src/app/(main)/websites/[websiteId]/WebsiteProvider.tsx
View file

@ -1,7 +1,7 @@
'use client';
import { createContext, ReactNode, useEffect } from 'react';
import { useModified, useWebsite } from '@/components/hooks';
import { Loading } from 'react-basics';
import { Loading } from '@umami/react-zen';
export const WebsiteContext = createContext(null);

2
src/app/(main)/websites/[websiteId]/events/EventProperties.tsx
View file

@ -1,4 +1,4 @@
import { GridColumn, GridTable } from 'react-basics';
import { GridColumn, GridTable } from '@umami/react-zen';
import { useEventDataProperties, useEventDataValues, useMessages } from '@/components/hooks';
import { LoadingPanel } from '@/components/common/LoadingPanel';
import { PieChart } from '@/components/charts/PieChart';

2
src/app/(main)/websites/[websiteId]/events/EventsMetricsBar.tsx
View file

@ -4,7 +4,7 @@ import { WebsiteDateFilter } from '@/components/input/WebsiteDateFilter';
import { MetricCard } from '@/components/metrics/MetricCard';
import { MetricsBar } from '@/components/metrics/MetricsBar';
import { formatLongNumber } from '@/lib/format';
import { Flexbox } from 'react-basics';
import { Flexbox } from '@umami/react-zen';
export function EventsMetricsBar({ websiteId }: { websiteId: string }) {
const { formatMessage, labels } = useMessages();

2
src/app/(main)/websites/[websiteId]/events/EventsPage.tsx
View file

@ -6,7 +6,7 @@ import { EventsChart } from '@/components/metrics/EventsChart';
import { GridRow } from '@/components/layout/Grid';
import { MetricsTable } from '@/components/metrics/MetricsTable';
import { useMessages } from '@/components/hooks';
import { Item, Tabs } from 'react-basics';
import { Item, Tabs } from '@umami/react-zen';
import { useState } from 'react';
import { EventProperties } from './EventProperties';

2
src/app/(main)/websites/[websiteId]/events/EventsTable.tsx
View file

@ -1,4 +1,4 @@
import { GridTable, GridColumn, Icon } from 'react-basics';
import { GridTable, GridColumn, Icon } from '@umami/react-zen';
import { useMessages, useTeamUrl, useTimezone } from '@/components/hooks';
import { Empty } from '@/components/common/Empty';
import { Avatar } from '@/components/common/Avatar';

2
src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx
View file

@ -7,7 +7,7 @@ import { BROWSERS, OS_NAMES } from '@/lib/constants';
import { stringToColor } from '@/lib/format';
import { RealtimeData } from '@/lib/types';
import { useContext, useMemo, useState } from 'react';
import { Icon, SearchField, StatusLight, Text } from 'react-basics';
import { Icon, SearchField, StatusLight, Text } from '@umami/react-zen';
import { FixedSizeList } from 'react-window';
import { WebsiteContext } from '../WebsiteProvider';
import styles from './RealtimeLog.module.css';

2
src/app/(main)/websites/[websiteId]/realtime/RealtimeUrls.tsx
View file

@ -1,5 +1,5 @@
import { Key, useContext, useState } from 'react';
import { ButtonGroup, Button, Flexbox } from 'react-basics';
import { ButtonGroup, Button, Flexbox } from '@umami/react-zen';
import thenby from 'thenby';
import { percentFilter } from '@/lib/filters';
import { ListTable } from '@/components/metrics/ListTable';

2
src/app/(main)/websites/[websiteId]/reports/WebsiteReportsPage.tsx
View file

@ -1,6 +1,6 @@
'use client';
import Link from 'next/link';
import { Button, Flexbox, Icon, Icons, Text } from 'react-basics';
import { Button, Flexbox, Icon, Icons, Text } from '@umami/react-zen';
import { useMessages, useTeamUrl } from '@/components/hooks';
import { WebsiteHeader } from '../WebsiteHeader';
import { ReportsDataTable } from '@/app/(main)/reports/ReportsDataTable';

2
src/app/(main)/websites/[websiteId]/sessions/SessionProperties.tsx
View file

@ -1,4 +1,4 @@
import { GridColumn, GridTable } from 'react-basics';
import { GridColumn, GridTable } from '@umami/react-zen';
import { useSessionDataProperties, useSessionDataValues, useMessages } from '@/components/hooks';
import { LoadingPanel } from '@/components/common/LoadingPanel';
import { PieChart } from '@/components/charts/PieChart';

2
src/app/(main)/websites/[websiteId]/sessions/SessionsMetricsBar.tsx
View file

@ -4,7 +4,7 @@ import { WebsiteDateFilter } from '@/components/input/WebsiteDateFilter';
import { MetricCard } from '@/components/metrics/MetricCard';
import { MetricsBar } from '@/components/metrics/MetricsBar';
import { formatLongNumber } from '@/lib/format';
import { Flexbox } from 'react-basics';
import { Flexbox } from '@umami/react-zen';
export function SessionsMetricsBar({ websiteId }: { websiteId: string }) {
const { formatMessage, labels } = useMessages();

2
src/app/(main)/websites/[websiteId]/sessions/SessionsPage.tsx
View file

@ -5,7 +5,7 @@ import { SessionsMetricsBar } from './SessionsMetricsBar';
import { SessionProperties } from './SessionProperties';
import { WorldMap } from '@/components/metrics/WorldMap';
import { GridRow } from '@/components/layout/Grid';
import { Item, Tabs } from 'react-basics';
import { Item, Tabs } from '@umami/react-zen';
import { useState } from 'react';
import { useMessages } from '@/components/hooks';
import { SessionsWeekly } from './SessionsWeekly';

2
src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx
View file

@ -1,5 +1,5 @@
import Link from 'next/link';
import { GridColumn, GridTable } from 'react-basics';
import { GridColumn, GridTable } from '@umami/react-zen';
import { useFormat, useMessages, useTimezone } from '@/components/hooks';
import { Avatar } from '@/components/common/Avatar';
import styles from './SessionsTable.module.css';

2
src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx
View file

@ -4,7 +4,7 @@ import { LoadingPanel } from '@/components/common/LoadingPanel';
import { getDayOfWeekAsDate } from '@/lib/date';
import styles from './SessionsWeekly.module.css';
import classNames from 'classnames';
import { TooltipPopup } from 'react-basics';
import { TooltipPopup } from '@umami/react-zen';
export function SessionsWeekly({ websiteId }: { websiteId: string }) {
const { data, ...props } = useWebsiteSessionsWeekly(websiteId);

2
src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx
View file

@ -1,5 +1,5 @@
import { isSameDay } from 'date-fns';
import { Loading, Icon, StatusLight } from 'react-basics';
import { Loading, Icon, StatusLight } from '@umami/react-zen';
import { Icons } from '@/components/icons';
import { useSessionActivity, useTimezone } from '@/components/hooks';
import styles from './SessionActivity.module.css';

2
src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionData.tsx
View file

@ -1,4 +1,4 @@
import { TextOverflow } from 'react-basics';
import { TextOverflow } from '@umami/react-zen';
import { useMessages, useSessionData } from '@/components/hooks';
import { Empty } from '@/components/common/Empty';
import { DATA_TYPES } from '@/lib/constants';

2
src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx
View file

@ -1,6 +1,6 @@
import { useFormat, useLocale, useMessages, useRegionNames, useTimezone } from '@/components/hooks';
import { TypeIcon } from '@/components/common/TypeIcon';
import { Icon, CopyIcon } from 'react-basics';
import { Icon, CopyIcon } from '@umami/react-zen';
import { Icons } from '@/components/icons';
import styles from './SessionInfo.module.css';