Refactored icons.

2025-05-27 00:50:28 -07:00
parent 18eceee4c4
commit 99330a1a4d
86 changed files with 310 additions and 273 deletions
--- a/src/app/(main)/reports/ReportDeleteButton.tsx
+++ b/src/app/(main)/reports/ReportDeleteButton.tsx
@@ -1,5 +1,6 @@
-import { Button, Icon, Icons, Modal, DialogTrigger, Dialog, Text } from '@umami/react-zen';
+import { Button, Icon, Modal, DialogTrigger, Dialog, Text } from '@umami/react-zen';
 import { useApi, useMessages, useModified } from '@/components/hooks';
+import { Trash } from '@/components/icons';
 import { ConfirmationForm } from '@/components/common/ConfirmationForm';

 export function ReportDeleteButton({
@@ -32,7 +33,7 @@ export function ReportDeleteButton({
    <DialogTrigger>
      <Button>
        <Icon>
-          <Icons.Trash />
+          <Trash />
        </Icon>
        <Text>{formatMessage(labels.delete)}</Text>
      </Button>
--- a/src/app/(main)/reports/ReportsHeader.tsx
+++ b/src/app/(main)/reports/ReportsHeader.tsx
@@ -1,6 +1,7 @@
 import { SectionHeader } from '@/components/common/SectionHeader';
-import { Icon, Icons, Text } from '@umami/react-zen';
+import { Icon, Text } from '@umami/react-zen';
 import { useLoginQuery, useMessages, useNavigation } from '@/components/hooks';
+import { Plus } from '@/components/icons';
 import { LinkButton } from '@/components/common/LinkButton';
 import { ROLES } from '@/lib/constants';

@@ -15,7 +16,7 @@ export function ReportsHeader() {
      {canEdit && (
        <LinkButton href={renderTeamUrl('/reports/create')} variant="primary">
          <Icon>
-            <Icons.Plus />
+            <Plus />
          </Icon>
          <Text>{formatMessage(labels.createReport)}</Text>
        </LinkButton>
--- a/src/app/(main)/reports/ReportsTable.tsx
+++ b/src/app/(main)/reports/ReportsTable.tsx
@@ -1,7 +1,8 @@
-import { Icon, Icons, Text, DataTable, DataColumn, Row } from '@umami/react-zen';
+import { Icon, Text, DataTable, DataColumn, Row } from '@umami/react-zen';
 import { LinkButton } from '@/components/common/LinkButton';
 import { useMessages, useLoginQuery, useNavigation } from '@/components/hooks';
 import { REPORT_TYPES } from '@/lib/constants';
+import { Arrow } from '@/components/icons';
 import { ReportDeleteButton } from './ReportDeleteButton';

 export function ReportsTable({ data = [] }: { data: any[]; showDomain?: boolean }) {
@@ -30,7 +31,7 @@ export function ReportsTable({ data = [] }: { data: any[]; showDomain?: boolean
              )}
              <LinkButton href={renderTeamUrl(`/reports/${id}`)}>
                <Icon>
-                  <Icons.Arrow />
+                  <Arrow />
                </Icon>
                <Text>{formatMessage(labels.view)}</Text>
              </LinkButton>
--- a/src/app/(main)/reports/[reportId]/FieldFilterEditForm.tsx
+++ b/src/app/(main)/reports/[reportId]/FieldFilterEditForm.tsx
@@ -8,7 +8,6 @@ import {
  Row,
  Select,
  Icon,
-  Icons,
  Loading,
  Menu,
  MenuItem,
@@ -18,6 +17,7 @@ import {
  TextField,
  Label,
 } from '@umami/react-zen';
+import { Close } from '@/components/icons';
 import styles from './FieldFilterEditForm.module.css';

 export interface FieldFilterFormProps {
@@ -152,7 +152,7 @@ export function FieldFilterEditForm({
            <div className={styles.selected} onClick={handleReset}>
              <Text>{formatValue(selected, name)}</Text>
              <Icon>
-                <Icons.Close />
+                <Close />
              </Icon>
            </div>
          )}
--- a/src/app/(main)/reports/[reportId]/FieldParameters.tsx
+++ b/src/app/(main)/reports/[reportId]/FieldParameters.tsx
@@ -1,5 +1,5 @@
 import { useFields, useMessages, useReport } from '@/components/hooks';
-import { Icons } from '@/components/icons';
+import { Plus } from '@/components/icons';
 import { Button, Row, Label, Icon, Popover, MenuTrigger, Column } from '@umami/react-zen';
 import { FieldSelectForm } from '../[reportId]/FieldSelectForm';
 import { ParameterList } from '../[reportId]/ParameterList';
@@ -29,7 +29,7 @@ export function FieldParameters() {
        <MenuTrigger>
          <Button variant="quiet">
            <Icon size="sm">
-              <Icons.Plus />
+              <Plus />
            </Icon>
          </Button>
          <Popover placement="right top">
--- a/src/app/(main)/reports/[reportId]/FilterParameters.tsx
+++ b/src/app/(main)/reports/[reportId]/FilterParameters.tsx
@@ -1,5 +1,5 @@
 import { useMessages, useFormat, useFilters, useFields, useReport } from '@/components/hooks';
-import { Icons } from '@/components/icons';
+import { Plus } from '@/components/icons';
 import {
  Button,
  Row,
@@ -55,7 +55,7 @@ export function FilterParameters() {
        <MenuTrigger>
          <Button variant="quiet">
            <Icon size="sm">
-              <Icons.Plus />
+              <Plus />
            </Icon>
          </Button>
          <Popover placement="right top">
--- a/src/app/(main)/reports/[reportId]/ParameterList.tsx
+++ b/src/app/(main)/reports/[reportId]/ParameterList.tsx
@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { Icon, Row, Text, Button, Column } from '@umami/react-zen';
-import { Icons } from '@/components/icons';
+import { Close } from '@/components/icons';
 import { Empty } from '@/components/common/Empty';
 import { useMessages } from '@/components/hooks';

@@ -46,7 +46,7 @@ const Item = ({
      <Text>{children}</Text>
      <Button onPress={onRemove} variant="quiet">
        <Icon>
-          <Icons.Close />
+          <Close />
        </Icon>
      </Button>
    </Row>
--- a/src/app/(main)/reports/[reportId]/ReportMenu.tsx
+++ b/src/app/(main)/reports/[reportId]/ReportMenu.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Button, Column, Icon, Row } from '@umami/react-zen';
-import { Icons } from '@/components/icons';
+import { PanelLeft } from '@/components/icons';
 import { useReport } from '@/components/hooks';

 export function ReportMenu({ children }) {
@@ -16,7 +16,7 @@ export function ReportMenu({ children }) {
      <Row alignItems="center" justifyContent="flex-end">
        <Button variant="quiet" onPress={() => setCollapsed(!collapsed)}>
          <Icon>
-            <Icons.PanelLeft />
+            <PanelLeft />
          </Icon>
        </Button>
      </Row>
--- a/src/app/(main)/reports/attribution/AttributionParameters.tsx
+++ b/src/app/(main)/reports/attribution/AttributionParameters.tsx
@@ -1,5 +1,5 @@
 import { useMessages } from '@/components/hooks';
-import { Icons } from '@/components/icons';
+import { Eye, Bolt, Plus } from '@/components/icons';
 import { useContext, useState } from 'react';
 import {
  Button,
@@ -82,7 +82,7 @@ export function AttributionParameters() {
      <DialogTrigger>
        <Button isDisabled={steps.length > 0}>
          <Icon>
-            <Icons.Plus />
+            <Plus />
          </Icon>
        </Button>
        <Popover placement="right top">
@@ -122,7 +122,7 @@ export function AttributionParameters() {
            return (
              <DialogTrigger key={index}>
                <ParameterList.Item
-                  icon={step.type === 'url' ? <Icons.Eye /> : <Icons.Bolt />}
+                  icon={step.type === 'url' ? <Eye /> : <Bolt />}
                  onRemove={() => handleRemoveStep(index)}
                >
                  <div>{step.value}</div>
--- a/src/app/(main)/reports/attribution/AttributionReport.tsx
+++ b/src/app/(main)/reports/attribution/AttributionReport.tsx
@@ -1,4 +1,4 @@
-import { Icons } from '@/components/icons';
+import { Network } 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 default function AttributionReport({ reportId }: { reportId?: string }) {
  return (
    <Report reportId={reportId} defaultParameters={defaultParameters}>
-      <ReportHeader icon={<Icons.Network />} />
+      <ReportHeader icon={<Network />} />
      <ReportMenu>
        <AttributionParameters />
      </ReportMenu>
--- a/src/app/(main)/reports/create/ReportTemplates.tsx
+++ b/src/app/(main)/reports/create/ReportTemplates.tsx
@@ -1,6 +1,16 @@
 import { Icon, Text, Row, Column, Grid } from '@umami/react-zen';
 import { useMessages, useNavigation } from '@/components/hooks';
-import { Icons } from '@/components/icons';
+import {
+  Lightbulb,
+  Funnel,
+  Magnet,
+  Tag,
+  Target,
+  Path,
+  Money,
+  Network,
+  Plus,
+} from '@/components/icons';
 import { SectionHeader } from '@/components/common/SectionHeader';
 import { LinkButton } from '@/components/common/LinkButton';

@@ -13,49 +23,49 @@ export function ReportTemplates({ showHeader = true }: { showHeader?: boolean })
      title: formatMessage(labels.insights),
      description: formatMessage(labels.insightsDescription),
      url: renderTeamUrl('/reports/insights'),
-      icon: <Icons.Lightbulb />,
+      icon: <Lightbulb />,
    },
    {
      title: formatMessage(labels.funnel),
      description: formatMessage(labels.funnelDescription),
      url: renderTeamUrl('/reports/funnel'),
-      icon: <Icons.Funnel />,
+      icon: <Funnel />,
    },
    {
      title: formatMessage(labels.retention),
      description: formatMessage(labels.retentionDescription),
      url: renderTeamUrl('/reports/retention'),
-      icon: <Icons.Magnet />,
+      icon: <Magnet />,
    },
    {
      title: formatMessage(labels.utm),
      description: formatMessage(labels.utmDescription),
      url: renderTeamUrl('/reports/utm'),
-      icon: <Icons.Tag />,
+      icon: <Tag />,
    },
    {
      title: formatMessage(labels.goals),
      description: formatMessage(labels.goalsDescription),
      url: renderTeamUrl('/reports/goals'),
-      icon: <Icons.Target />,
+      icon: <Target />,
    },
    {
      title: formatMessage(labels.journey),
      description: formatMessage(labels.journeyDescription),
      url: renderTeamUrl('/reports/journey'),
-      icon: <Icons.Path />,
+      icon: <Path />,
    },
    {
      title: formatMessage(labels.revenue),
      description: formatMessage(labels.revenueDescription),
      url: renderTeamUrl('/reports/revenue'),
-      icon: <Icons.Money />,
+      icon: <Money />,
    },
    {
      title: formatMessage(labels.attribution),
      description: formatMessage(labels.attributionDescription),
      url: renderTeamUrl('/reports/attribution'),
-      icon: <Icons.Network />,
+      icon: <Network />,
    },
  ];

@@ -87,8 +97,8 @@ function ReportItem({ title, description, url, icon }) {
      <Text>{description}</Text>
      <Row justifyContent="flex-end">
        <LinkButton href={url} variant="primary">
-          <Icon fillColor="currentColor">
-            <Icons.Plus />
+          <Icon>
+            <Plus />
          </Icon>
          <Text>{formatMessage(labels.create)}</Text>
        </LinkButton>
--- a/src/app/(main)/reports/event-data/EventDataParameters.tsx
+++ b/src/app/(main)/reports/event-data/EventDataParameters.tsx
@@ -8,7 +8,7 @@ import {
  Popover,
 } from '@umami/react-zen';
 import { Empty } from '@/components/common/Empty';
-import { Icons } from '@/components/icons';
+import { Plus } from '@/components/icons';
 import { useApi, useMessages, useReport } from '@/components/hooks';
 import { DATA_TYPES, REPORT_PARAMETERS } from '@/lib/constants';
 import { FieldAddForm } from '../[reportId]/FieldAddForm';
@@ -75,7 +75,7 @@ export function EventDataParameters() {
    return (
      <DialogTrigger>
        <Icon>
-          <Icons.Plus />
+          <Plus />
        </Icon>
        <Popover placement="bottom start">
          {({ close }: any) => {
--- a/src/app/(main)/reports/event-data/EventDataReport.tsx
+++ b/src/app/(main)/reports/event-data/EventDataReport.tsx
@@ -4,7 +4,7 @@ import { ReportMenu } from '../[reportId]/ReportMenu';
 import { ReportBody } from '../[reportId]/ReportBody';
 import { EventDataParameters } from './EventDataParameters';
 import { EventDataTable } from './EventDataTable';
-import { Icons } from '@/components/icons';
+import { Nodes } 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={<Icons.Nodes />} />
+      <ReportHeader icon={<Nodes />} />
      <ReportMenu>
        <EventDataParameters />
      </ReportMenu>
--- a/src/app/(main)/reports/funnel/FunnelParameters.tsx
+++ b/src/app/(main)/reports/funnel/FunnelParameters.tsx
@@ -10,7 +10,7 @@ import {
  TextField,
  Button,
 } from '@umami/react-zen';
-import { Icons } from '@/components/icons';
+import { Eye, Bolt, Plus } from '@/components/icons';
 import { FunnelStepAddForm } from './FunnelStepAddForm';
 import { BaseParameters } from '../[reportId]/BaseParameters';
 import { ParameterList } from '../[reportId]/ParameterList';
@@ -59,7 +59,7 @@ export function FunnelParameters() {
      <DialogTrigger>
        <Button>
          <Icon>
-            <Icons.Plus />
+            <Plus />
          </Icon>
        </Button>
        <Popover placement="start">
@@ -85,7 +85,7 @@ export function FunnelParameters() {
            return (
              <DialogTrigger key={index}>
                <ParameterList.Item
-                  icon={step.type === 'url' ? <Icons.Eye /> : <Icons.Bolt />}
+                  icon={step.type === 'url' ? <Eye /> : <Bolt />}
                  onRemove={() => handleRemoveStep(index)}
                >
                  <div className={styles.value}>
--- a/src/app/(main)/reports/funnel/FunnelReport.tsx
+++ b/src/app/(main)/reports/funnel/FunnelReport.tsx
@@ -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 { Icons } from '@/components/icons';
+import { Funnel } 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={<Icons.Funnel />} />
+      <ReportHeader icon={<Funnel />} />
      <ReportMenu>
        <FunnelParameters />
      </ReportMenu>
--- a/src/app/(main)/reports/goals/GoalsParameters.tsx
+++ b/src/app/(main)/reports/goals/GoalsParameters.tsx
@@ -1,5 +1,5 @@
 import { useMessages, useReport } from '@/components/hooks';
-import { Icons } from '@/components/icons';
+import { Plus, Eye, Bolt } from '@/components/icons';
 import { formatNumber } from '@/lib/format';
 import {
  Button,
@@ -60,7 +60,7 @@ export function GoalsParameters() {
      <MenuTrigger>
        <Button>
          <Icon>
-            <Icons.Plus />
+            <Plus />
          </Icon>
        </Button>
        <Popover placement="start">
@@ -90,7 +90,7 @@ export function GoalsParameters() {
              return (
                <MenuTrigger key={index}>
                  <ParameterList.Item
-                    icon={goal.type === 'url' ? <Icons.Eye /> : <Icons.Bolt />}
+                    icon={goal.type === 'url' ? <Eye /> : <Bolt />}
                    onRemove={() => handleRemoveGoals(index)}
                  >
                    <Column>
--- a/src/app/(main)/reports/goals/GoalsReport.tsx
+++ b/src/app/(main)/reports/goals/GoalsReport.tsx
@@ -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 { Icons } from '@/components/icons';
+import { Target } 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={<Icons.Target />} />
+      <ReportHeader icon={<Target />} />
      <ReportMenu>
        <GoalsParameters />
      </ReportMenu>
--- a/src/app/(main)/reports/insights/InsightsReport.tsx
+++ b/src/app/(main)/reports/insights/InsightsReport.tsx
@@ -4,7 +4,7 @@ import { ReportMenu } from '../[reportId]/ReportMenu';
 import { ReportBody } from '../[reportId]/ReportBody';
 import { InsightsParameters } from './InsightsParameters';
 import { InsightsTable } from './InsightsTable';
-import { Icons } from '@/components/icons';
+import { Lightbulb } 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={<Icons.Lightbulb />} />
+      <ReportHeader icon={<Lightbulb />} />
      <ReportMenu>
        <InsightsParameters />
      </ReportMenu>
--- a/src/app/(main)/reports/journey/JourneyReport.tsx
+++ b/src/app/(main)/reports/journey/JourneyReport.tsx
@@ -5,7 +5,7 @@ import { ReportMenu } from '../[reportId]/ReportMenu';
 import { ReportBody } from '../[reportId]/ReportBody';
 import { JourneyParameters } from './JourneyParameters';
 import { JourneyView } from './JourneyView';
-import { Icons } from '@/components/icons';
+import { Path } 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={<Icons.Path />} />
+      <ReportHeader icon={<Path />} />
      <ReportMenu>
        <JourneyParameters />
      </ReportMenu>