watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-09 23:27:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Build svg into components.

Browse source
This commit is contained in:
Mike Cao 2025-03-03 18:37:49 -08:00
parent fdc73268b7
commit 5682b4d217
64 changed files with 16267 additions and 176 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/app/(main)/SideNav.tsx
View file

@ -1,6 +1,6 @@
import Link from 'next/link';
import { SideNav as Nav, SideNavHeader, SideNavSection, SideNavItem } from '@umami/react-zen';
import { Icons, Lucide } from '@/components/icons';
import { Lucide, Icons } from '@/components/icons';
import { useMessages, useTeamUrl } from '@/components/hooks';
export function SideNav() {

7
src/app/(main)/profile/ThemeSetting.tsx
View file

@ -1,8 +1,7 @@
import classNames from 'classnames';
import { Button, Icon } from 'react-basics';
import { useTheme } from '@/components/hooks';
import Sun from '@/assets/sun.svg';
import Moon from '@/assets/moon.svg';
import { Icons } from '@/components/icons';
import styles from './ThemeSetting.module.css';
export function ThemeSetting() {
@ -15,7 +14,7 @@ export function ThemeSetting() {
onClick={() => saveTheme('light')}
>
<Icon>
<Sun />
<Icons.Sun />
</Icon>
</Button>
<Button
@ -23,7 +22,7 @@ export function ThemeSetting() {
onClick={() => saveTheme('dark')}
>
<Icon>
<Moon />
<Icons.Moon />
</Icon>
</Button>
</div>

24
src/app/(main)/reports/create/ReportTemplates.tsx
View file

@ -1,14 +1,8 @@
import Funnel from '@/assets/funnel.svg';
import Money from '@/assets/money.svg';
import Lightbulb from '@/assets/lightbulb.svg';
import Magnet from '@/assets/magnet.svg';
import Path from '@/assets/path.svg';
import Tag from '@/assets/tag.svg';
import Target from '@/assets/target.svg';
import { Button, Icon, Text } from '@umami/react-zen';
import { useMessages, useTeamUrl } from '@/components/hooks';
import { Icons } from '@/components/icons';
import { PageHeader } from '@/components/layout/PageHeader';
import Link from 'next/link';
import { Button, Icon, Icons, Text } from 'react-basics';
import styles from './ReportTemplates.module.css';
export function ReportTemplates({ showHeader = true }: { showHeader?: boolean }) {
@ -20,43 +14,43 @@ export function ReportTemplates({ showHeader = true }: { showHeader?: boolean })
title: formatMessage(labels.insights),
description: formatMessage(labels.insightsDescription),
url: renderTeamUrl('/reports/insights'),
icon: <Lightbulb />,
icon: <Icons.Lightbulb />,
},
{
title: formatMessage(labels.funnel),
description: formatMessage(labels.funnelDescription),
url: renderTeamUrl('/reports/funnel'),
icon: <Funnel />,
icon: <Icons.Funnel />,
},
{
title: formatMessage(labels.retention),
description: formatMessage(labels.retentionDescription),
url: renderTeamUrl('/reports/retention'),
icon: <Magnet />,
icon: <Icons.Magnet />,
},
{
title: formatMessage(labels.utm),
description: formatMessage(labels.utmDescription),
url: renderTeamUrl('/reports/utm'),
icon: <Tag />,
icon: <Icons.Tag />,
},
{
title: formatMessage(labels.goals),
description: formatMessage(labels.goalsDescription),
url: renderTeamUrl('/reports/goals'),
icon: <Target />,
icon: <Icons.Target />,
},
{
title: formatMessage(labels.journey),
description: formatMessage(labels.journeyDescription),
url: renderTeamUrl('/reports/journey'),
icon: <Path />,
icon: <Icons.Path />,
},
{
title: formatMessage(labels.revenue),
description: formatMessage(labels.revenueDescription),
url: renderTeamUrl('/reports/revenue'),
icon: <Money />,
icon: <Icons.Money />,
},
];

4
src/app/(main)/reports/event-data/EventDataReport.tsx
View file

@ -4,7 +4,7 @@ import { ReportMenu } from '../[reportId]/ReportMenu';
import { ReportBody } from '../[reportId]/ReportBody';
import { EventDataParameters } from './EventDataParameters';
import { EventDataTable } from './EventDataTable';
import Nodes from '@/assets/nodes.svg';
import { Icons } from '@/components/icons';
const defaultParameters = {
type: 'event-data',
@ -14,7 +14,7 @@ const defaultParameters = {
export function EventDataReport({ reportId }: { reportId?: string }) {
return (
<Report reportId={reportId} defaultParameters={defaultParameters}>
<ReportHeader icon={<Nodes />} />
<ReportHeader icon={<Icons.Nodes />} />
<ReportMenu>
<EventDataParameters />
</ReportMenu>

4
src/app/(main)/reports/funnel/FunnelReport.tsx
View file

@ -4,7 +4,7 @@ import { Report } from '../[reportId]/Report';
import { ReportHeader } from '../[reportId]/ReportHeader';
import { ReportMenu } from '../[reportId]/ReportMenu';
import { ReportBody } from '../[reportId]/ReportBody';
import Funnel from '@/assets/funnel.svg';
import { Icons } from '@/components/icons';
import { REPORT_TYPES } from '@/lib/constants';
const defaultParameters = {
@ -15,7 +15,7 @@ const defaultParameters = {
export function FunnelReport({ reportId }: { reportId?: string }) {
return (
<Report reportId={reportId} defaultParameters={defaultParameters}>
<ReportHeader icon={<Funnel />} />
<ReportHeader icon={<Icons.Funnel />} />
<ReportMenu>
<FunnelParameters />
</ReportMenu>

4
src/app/(main)/reports/goals/GoalsReport.tsx
View file

@ -4,7 +4,7 @@ import { Report } from '../[reportId]/Report';
import { ReportHeader } from '../[reportId]/ReportHeader';
import { ReportMenu } from '../[reportId]/ReportMenu';
import { ReportBody } from '../[reportId]/ReportBody';
import Target from '@/assets/target.svg';
import { Icons } from '@/components/icons';
import { REPORT_TYPES } from '@/lib/constants';
const defaultParameters = {
@ -15,7 +15,7 @@ const defaultParameters = {
export function GoalsReport({ reportId }: { reportId?: string }) {
return (
<Report reportId={reportId} defaultParameters={defaultParameters}>
<ReportHeader icon={<Target />} />
<ReportHeader icon={<Icons.Target />} />
<ReportMenu>
<GoalsParameters />
</ReportMenu>

4
src/app/(main)/reports/insights/InsightsReport.tsx
View file

@ -4,7 +4,7 @@ import { ReportMenu } from '../[reportId]/ReportMenu';
import { ReportBody } from '../[reportId]/ReportBody';
import { InsightsParameters } from './InsightsParameters';
import { InsightsTable } from './InsightsTable';
import Lightbulb from '@/assets/lightbulb.svg';
import { Icons } from '@/components/icons';
import { REPORT_TYPES } from '@/lib/constants';
const defaultParameters = {
@ -15,7 +15,7 @@ const defaultParameters = {
export function InsightsReport({ reportId }: { reportId?: string }) {
return (
<Report reportId={reportId} defaultParameters={defaultParameters}>
<ReportHeader icon={<Lightbulb />} />
<ReportHeader icon={<Icons.Lightbulb />} />
<ReportMenu>
<InsightsParameters />
</ReportMenu>

4
src/app/(main)/reports/journey/JourneyReport.tsx
View file

@ -5,7 +5,7 @@ import { ReportMenu } from '../[reportId]/ReportMenu';
import { ReportBody } from '../[reportId]/ReportBody';
import { JourneyParameters } from './JourneyParameters';
import { JourneyView } from './JourneyView';
import Path from '@/assets/path.svg';
import { Icons } from '@/components/icons';
import { REPORT_TYPES } from '@/lib/constants';
const defaultParameters = {
@ -16,7 +16,7 @@ const defaultParameters = {
export function JourneyReport({ reportId }: { reportId?: string }) {
return (
<Report reportId={reportId} defaultParameters={defaultParameters}>
<ReportHeader icon={<Path />} />
<ReportHeader icon={<Icons.Path />} />
<ReportMenu>
<JourneyParameters />
</ReportMenu>

4
src/app/(main)/reports/retention/RetentionReport.tsx
View file

@ -4,7 +4,7 @@ import { Report } from '../[reportId]/Report';
import { ReportHeader } from '../[reportId]/ReportHeader';
import { ReportMenu } from '../[reportId]/ReportMenu';
import { ReportBody } from '../[reportId]/ReportBody';
import Magnet from '@/assets/magnet.svg';
import { Icons } from '@/components/icons';
import { REPORT_TYPES } from '@/lib/constants';
import { parseDateRange } from '@/lib/date';
import { endOfMonth, startOfMonth } from 'date-fns';
@ -21,7 +21,7 @@ const defaultParameters = {
export function RetentionReport({ reportId }: { reportId?: string }) {
return (
<Report reportId={reportId} defaultParameters={defaultParameters}>
<ReportHeader icon={<Magnet />} />
<ReportHeader icon={<Icons.Magnet />} />
<ReportMenu>
<RetentionParameters />
</ReportMenu>

4
src/app/(main)/reports/revenue/RevenueReport.tsx
View file

@ -1,4 +1,4 @@
import Money from '@/assets/money.svg';
import { Icons } from '@/components/icons';
import { REPORT_TYPES } from '@/lib/constants';
import { Report } from '../[reportId]/Report';
import { ReportBody } from '../[reportId]/ReportBody';
@ -15,7 +15,7 @@ const defaultParameters = {
export function RevenueReport({ reportId }: { reportId?: string }) {
return (
<Report reportId={reportId} defaultParameters={defaultParameters}>
<ReportHeader icon={<Money />} />
<ReportHeader icon={<Icons.Money />} />
<ReportMenu>
<RevenueParameters />
</ReportMenu>

4
src/app/(main)/reports/utm/UTMReport.tsx
View file

@ -5,7 +5,7 @@ import { ReportMenu } from '../[reportId]/ReportMenu';
import { ReportBody } from '../[reportId]/ReportBody';
import { UTMParameters } from './UTMParameters';
import { UTMView } from './UTMView';
import Tag from '@/assets/tag.svg';
import { Icons } from '@/components/icons';
import { REPORT_TYPES } from '@/lib/constants';
const defaultParameters = {
@ -16,7 +16,7 @@ const defaultParameters = {
export function UTMReport({ reportId }: { reportId?: string }) {
return (
<Report reportId={reportId} defaultParameters={defaultParameters}>
<ReportHeader icon={<Tag />} />
<ReportHeader icon={<Icons.Tag />} />
<ReportMenu>
<UTMParameters />
</ReportMenu>

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

@ -1,13 +1,12 @@
import { ReactNode } from 'react';
import { Button, Icon, Text } from 'react-basics';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import classNames from 'classnames';
import { Favicon } from '@/components/common/Favicon';
import { useMessages, useTeamUrl, useWebsite } from '@/components/hooks';
import { Icons } from '@/components/icons';
import { ActiveUsers } from '@/components/metrics/ActiveUsers';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { ReactNode } from 'react';
import { Button, Icon, Text } from 'react-basics';
import Lightning from '@/assets/lightning.svg';
import styles from './WebsiteHeader.module.css';
export function WebsiteHeader({
@ -33,7 +32,7 @@ export function WebsiteHeader({
},
{
label: formatMessage(labels.events),
icon: <Lightning />,
icon: <Icons.Lightning />,
path: '/events',
},
{

4
src/app/login/LoginForm.tsx
View file

@ -13,7 +13,7 @@ import { useRouter } from 'next/navigation';
import { useApi, useMessages } from '@/components/hooks';
import { setUser } from '@/store/app';
import { setClientAuthToken } from '@/lib/client';
import Logo from '@/assets/logo.svg';
import { Icons } from '@/components/icons';
export function LoginForm() {
const { formatMessage, labels, getMessage } = useMessages();
@ -37,7 +37,7 @@ export function LoginForm() {
return (
<Column justifyContent="center" alignItems="center" padding="8" gap="6">
<Icon size="lg">
<Logo />
<Icons.Logo />
</Icon>
<Heading>umami</Heading>
<Form onSubmit={handleSubmit} error={getMessage(error)}>