github/umami
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

12
src/app/(main)/reports/[reportId]/BaseParameters.tsx
View File

@@ -1,5 +1,5 @@
import { useContext } from 'react';
import { FormRow } from 'react-basics';
import { Column, Label } from '@umami/react-zen';
import { parseDateRange } from '@/lib/date';
import { DateFilter } from '@/components/input/DateFilter';
import { WebsiteSelect } from '@/components/input/WebsiteSelect';
@@ -40,16 +40,18 @@ export function BaseParameters({
return (
<>
{showWebsiteSelect && (
<FormRow label={formatMessage(labels.website)}>
<Column>
<Label>{formatMessage(labels.website)}</Label>
{allowWebsiteSelect ? (
<WebsiteSelect teamId={teamId} websiteId={websiteId} onSelect={handleWebsiteSelect} />
) : (
name
)}
</FormRow>
</Column>
)}
{showDateSelect && (
<FormRow label={formatMessage(labels.dateRange)} className={styles.dropdown}>
<Column className={styles.dropdown}>
<Label>{formatMessage(labels.dateRange)}</Label>
{allowDateSelect && (
<DateFilter
value={value}
@@ -58,7 +60,7 @@ export function BaseParameters({
onChange={handleDateChange}
/>
)}
</FormRow>
</Column>
)}
</>
);

2
src/app/(main)/reports/[reportId]/FieldAggregateForm.tsx
View File

@@ -1,4 +1,4 @@
import { Form, FormRow, Menu, Item } from 'react-basics';
import { Form, FormRow, Menu, Item } from '@umami/react-zen';
import { useMessages } from '@/components/hooks';
export function FieldAggregateForm({

47
src/app/(main)/reports/[reportId]/FieldFilterEditForm.tsx
View File

@@ -4,19 +4,21 @@ import { OPERATORS } from '@/lib/constants';
import { isEqualsOperator } from '@/lib/params';
import {
Button,
Dropdown,
Column,
Row,
Select,
Flexbox,
Form,
FormRow,
Icon,
Icons,
Item,
Loading,
Menu,
MenuItem,
ListItem,
SearchField,
Text,
TextField,
} from 'react-basics';
Label,
} from '@umami/react-zen';
import styles from './FieldFilterEditForm.module.css';
export interface FieldFilterFormProps {
@@ -94,10 +96,6 @@ export function FieldFilterEditForm({
: values;
}, [value, formattedValues]);
const renderFilterValue = (value: any) => {
return filters.find((filter: { value: any }) => filter.value === value)?.label;
};
const handleAdd = () => {
onChange({ name, type, operator, value: isEquals ? selected : value });
};
@@ -133,21 +131,21 @@ export function FieldFilterEditForm({
};
return (
<Form>
<FormRow label={label} className={styles.filter}>
<Column>
<Row className={styles.filter}>
<Label>{label}</Label>
<Flexbox gap={10}>
{allowFilterSelect && (
<Dropdown
<Select
className={styles.dropdown}
items={filterDropdownItems(name)}
value={operator}
renderValue={renderFilterValue}
onChange={handleOperatorChange}
>
{({ value, label }) => {
return <Item key={value}>{label}</Item>;
{({ value, label }: any) => {
return <ListItem key={value}>{label}</ListItem>;
}}
</Dropdown>
</Select>
)}
{selected && isEquals && (
<div className={styles.selected} onClick={handleReset}>
@@ -163,7 +161,6 @@ export function FieldFilterEditForm({
className={styles.text}
value={value}
placeholder={formatMessage(labels.enter)}
onChange={e => setValue(e.target.value)}
onSearch={handleSearch}
delay={500}
onFocus={() => setShowMenu(true)}
@@ -187,11 +184,11 @@ export function FieldFilterEditForm({
/>
)}
</Flexbox>
<Button variant="primary" onClick={handleAdd} disabled={isDisabled}>
<Button variant="primary" onPress={handleAdd} isDisabled={isDisabled}>
{formatMessage(isNew ? labels.add : labels.update)}
</Button>
</FormRow>
</Form>
</Row>
</Column>
);
}
@@ -199,10 +196,10 @@ const ResultsMenu = ({ values, type, isLoading, onSelect }) => {
const { formatValue } = useFormat();
if (isLoading) {
return (
<Menu className={styles.menu} variant="popup">
<Item>
<Menu className={styles.menu}>
<MenuItem>
<Loading icon="dots" position="center" />
</Item>
</MenuItem>
</Menu>
);
}
@@ -212,9 +209,9 @@ const ResultsMenu = ({ values, type, isLoading, onSelect }) => {
}
return (
<Menu className={styles.menu} variant="popup" onSelect={onSelect}>
<Menu className={styles.menu} onSelectionChange={onSelect}>
{values?.map(({ value }) => {
return <Item key={value}>{formatValue(value, type)}</Item>;
return <MenuItem key={value}>{formatValue(value, type)}</MenuItem>;
})}
</Menu>
);

2
src/app/(main)/reports/[reportId]/FieldParameters.tsx
View File

@@ -1,7 +1,7 @@
import { useFields, useMessages } from '@/components/hooks';
import { Icons } from '@/components/icons';
import { useContext } from 'react';
import { Button, FormRow, Icon, Popup, PopupTrigger } from 'react-basics';
import { Button, FormRow, Icon, Popup, PopupTrigger } from '@umami/react-zen';
import { FieldSelectForm } from '../[reportId]/FieldSelectForm';
import { ParameterList } from '../[reportId]/ParameterList';
import { PopupForm } from '../[reportId]/PopupForm';

29
src/app/(main)/reports/[reportId]/FieldSelectForm.tsx
View File

@@ -1,4 +1,4 @@
import { Menu, Item, Form, FormRow } from 'react-basics';
import { List, ListItem, Label, Column } from '@umami/react-zen';
import { useMessages } from '@/components/hooks';
import styles from './FieldSelectForm.module.css';
import { Key } from 'react';
@@ -13,19 +13,18 @@ export function FieldSelectForm({ fields = [], onSelect, showType = true }: Fiel
const { formatMessage, labels } = useMessages();
return (
<Form>
<FormRow label={formatMessage(labels.fields)}>
<Menu className={styles.menu} onSelect={key => onSelect(fields[key as any])}>
{fields.map(({ name, label, type }: any, index: Key) => {
return (
<Item key={index} className={styles.item}>
<div>{label || name}</div>
{showType && type && <div className={styles.type}>{type}</div>}
</Item>
);
})}
</Menu>
</FormRow>
</Form>
<Column>
<Label>{formatMessage(labels.fields)}</Label>
<List onSelectionChange={key => onSelect(fields[key as any])}>
{fields.map(({ name, label, type }: any, index: Key) => {
return (
<ListItem key={index} className={styles.item}>
<div>{label || name}</div>
{showType && type && <div className={styles.type}>{type}</div>}
</ListItem>
);
})}
</List>
</Column>
);
}

2
src/app/(main)/reports/[reportId]/FilterParameters.tsx
View File

@@ -1,7 +1,7 @@
import { useContext } from 'react';
import { useMessages, useFormat, useFilters, useFields } from '@/components/hooks';
import { Icons } from '@/components/icons';
import { Button, FormRow, Icon, Popup, PopupTrigger } from 'react-basics';
import { Button, FormRow, Icon, Popup, PopupTrigger } from '@umami/react-zen';
import { FilterSelectForm } from '../[reportId]/FilterSelectForm';
import { ParameterList } from '../[reportId]/ParameterList';
import { PopupForm } from '../[reportId]/PopupForm';

2
src/app/(main)/reports/[reportId]/ParameterList.tsx
View File

@@ -1,5 +1,5 @@
import { ReactNode } from 'react';
import { Icon } from 'react-basics';
import { Icon } from '@umami/react-zen';
import { Icons } from '@/components/icons';
import { Empty } from '@/components/common/Empty';
import { useMessages } from '@/components/hooks';

2
src/app/(main)/reports/[reportId]/Report.tsx
View File

@@ -1,5 +1,5 @@
import { createContext, ReactNode } from 'react';
import { Loading } from 'react-basics';
import { Loading } from '@umami/react-zen';
import classNames from 'classnames';
import { useReport } from '@/components/hooks';
import styles from './Report.module.css';

10
src/app/(main)/reports/[reportId]/ReportHeader.tsx
View File

@@ -1,5 +1,5 @@
import { useContext } from 'react';
import { Icon, LoadingButton, InlineEditField, useToasts } from 'react-basics';
import { Icon, LoadingButton, InlineEditField, useToast } from '@umami/react-zen';
import { useMessages, useApi, useNavigation, useTeamUrl } from '@/components/hooks';
import { ReportContext } from './Report';
import styles from './ReportHeader.module.css';
@@ -9,7 +9,7 @@ import { Breadcrumb } from '@/components/common/Breadcrumb';
export function ReportHeader({ icon }) {
const { report, updateReport } = useContext(ReportContext);
const { formatMessage, labels, messages } = useMessages();
const { showToast } = useToasts();
const { toast } = useToast();
const { router } = useNavigation();
const { renderTeamUrl } = useTeamUrl();
@@ -29,14 +29,14 @@ export function ReportHeader({ icon }) {
if (!report.id) {
create(report, {
onSuccess: async ({ id }) => {
showToast({ message: formatMessage(messages.saved), variant: 'success' });
toast(formatMessage(messages.saved));
router.push(renderTeamUrl(`/reports/${id}`));
},
});
} else {
update(report, {
onSuccess: async () => {
showToast({ message: formatMessage(messages.saved), variant: 'success' });
toast(formatMessage(messages.saved));
},
});
}
@@ -94,7 +94,7 @@ export function ReportHeader({ icon }) {
variant="primary"
isLoading={isCreating || isUpdating}
disabled={!websiteId || !dateRange?.value || !name}
onClick={handleSave}
onPress={handleSave}
>
{formatMessage(labels.save)}
</LoadingButton>

2
src/app/(main)/reports/[reportId]/ReportMenu.tsx
View File

@@ -1,7 +1,7 @@
import { useContext, useState } from 'react';
import { ReportContext } from './Report';
import styles from './ReportMenu.module.css';
import { Icon, Icons } from 'react-basics';
import { Icon, Icons } from '@umami/react-zen';
import classNames from 'classnames';
export function ReportMenu({ children }) {