Updated components build.

This commit is contained in:
Mike Cao 2025-09-01 15:59:06 -07:00
parent 5f27ba149b
commit 56af91950a
53 changed files with 942 additions and 333 deletions

View file

@ -1,8 +1,9 @@
import { createContext, ReactNode } from 'react';
import { Loading } from '@umami/react-zen';
import { useUserQuery } from '@/components/hooks';
import { User } from '@/generated/prisma/client';
import { useUserQuery } from '@/components/hooks/queries/useUserQuery';
export const UserContext = createContext(null);
export const UserContext = createContext<User>(null);
export function UserProvider({ userId, children }: { userId: string; children: ReactNode }) {
const { data: user, isFetching, isLoading } = useUserQuery(userId);

View file

@ -14,7 +14,7 @@ import {
import { useConfig, useLinkQuery } from '@/components/hooks';
import { useMessages } from '@/components/hooks';
import { Refresh } from '@/components/icons';
import { getRandomChars } from '@/lib/crypto';
import { getRandomChars } from '@/lib/generate';
import { useUpdateQuery } from '@/components/hooks/queries/useUpdateQuery';
import { LINKS_URL } from '@/lib/constants';
import { isValidUrl } from '@/lib/url';

View file

@ -1,9 +1,10 @@
'use client';
import { createContext, ReactNode } from 'react';
import { useLinkQuery } from '@/components/hooks';
import { Loading } from '@umami/react-zen';
import { Link } from '@/generated/prisma/client';
import { useLinkQuery } from '@/components/hooks/queries/useLinkQuery';
export const LinkContext = createContext(null);
export const LinkContext = createContext<Link>(null);
export function LinkProvider({ linkId, children }: { linkId?: string; children: ReactNode }) {
const { data: link, isLoading, isFetching } = useLinkQuery(linkId);

View file

@ -13,7 +13,7 @@ import {
import { useConfig, usePixelQuery } from '@/components/hooks';
import { useMessages } from '@/components/hooks';
import { Refresh } from '@/components/icons';
import { getRandomChars } from '@/lib/crypto';
import { getRandomChars } from '@/lib/generate';
import { useUpdateQuery } from '@/components/hooks/queries/useUpdateQuery';
import { useEffect, useState } from 'react';
import { PIXELS_URL } from '@/lib/constants';

View file

@ -1,9 +1,10 @@
'use client';
import { createContext, ReactNode } from 'react';
import { usePixelQuery } from '@/components/hooks';
import { Loading } from '@umami/react-zen';
import { Pixel } from '@/generated/prisma/client';
import { usePixelQuery } from '@/components/hooks/queries/usePixelQuery';
export const PixelContext = createContext(null);
export const PixelContext = createContext<Pixel>(null);
export function PixelProvider({ pixelId, children }: { pixelId?: string; children: ReactNode }) {
const { data: pixel, isLoading, isFetching } = usePixelQuery(pixelId);

View file

@ -41,9 +41,9 @@ export function SettingsLayout({ children }: { children: ReactNode }) {
},
];
const selectedKey =
items.flatMap(e => e.items)?.find(({ path }) => path && pathname.includes(path))?.id ||
'overview';
const selectedKey = items
.flatMap(e => e.items)
.find(({ path }) => path && pathname.endsWith(path.split('?')[0]))?.id;
return (
<Grid columns="auto 1fr" width="100%" height="100%">

View file

@ -2,10 +2,6 @@ import { Metadata } from 'next';
import { SettingsLayout } from './SettingsLayout';
export default function ({ children }) {
if (process.env.cloudMode) {
return null;
}
return <SettingsLayout>{children}</SettingsLayout>;
}

View file

@ -32,7 +32,7 @@ export function TeamLeaveForm({
<ConfirmationForm
buttonLabel={formatMessage(labels.leave)}
message={formatMessage(messages.confirmLeave, {
target: <b key={messages.confirmLeave.id}>{teamName}</b>,
target: teamName,
})}
onConfirm={handleConfirm}
onClose={onClose}

View file

@ -1,9 +1,10 @@
'use client';
import { createContext, ReactNode } from 'react';
import { useTeamQuery } from '@/components/hooks';
import { Loading } from '@umami/react-zen';
import { useTeamQuery } from '@/components/hooks/queries/useTeamQuery';
import { Team } from '@/generated/prisma/client';
export const TeamContext = createContext(null);
export const TeamContext = createContext<Team>(null);
export function TeamProvider({ teamId, children }: { teamId?: string; children: ReactNode }) {
const { data: team, isLoading, isFetching } = useTeamQuery(teamId);

View file

@ -6,7 +6,7 @@ import {
TextField,
Button,
} from '@umami/react-zen';
import { getRandomChars } from '@/lib/crypto';
import { getRandomChars } from '@/lib/generate';
import { useMessages, useTeam, useUpdateQuery } from '@/components/hooks';
const generateId = () => `team_${getRandomChars(16)}`;

View file

@ -13,7 +13,7 @@ import { PageHeader } from '@/components/common/PageHeader';
import { Panel } from '@/components/common/Panel';
export function TeamSettings({ teamId }: { teamId: string }) {
const team = useTeam();
const team: any = useTeam();
const { formatMessage, labels } = useMessages();
const { user } = useLoginQuery();
const { query, pathname } = useNavigation();

View file

@ -1,8 +1,19 @@
import { DataColumn, DataTable } from '@umami/react-zen';
import { DataColumn, DataTable, Row } from '@umami/react-zen';
import { useMessages } from '@/components/hooks';
import Link from 'next/link';
import { ROLES } from '@/lib/constants';
import { TeamMemberEditButton } from '@/app/(main)/teams/[teamId]/TeamMemberEditButton';
import { TeamMemberRemoveButton } from '@/app/(main)/teams/[teamId]/TeamMemberRemoveButton';
export function TeamWebsitesTable({ teamId, data = [] }: { teamId: string; data: any[] }) {
export function TeamWebsitesTable({
teamId,
data = [],
allowEdit,
}: {
teamId: string;
data: any[];
allowEdit: boolean;
}) {
const { formatMessage, labels } = useMessages();
return (
@ -14,6 +25,26 @@ export function TeamWebsitesTable({ teamId, data = [] }: { teamId: string; data:
<DataColumn id="createdBy" label={formatMessage(labels.createdBy)}>
{(row: any) => row?.createUser?.username}
</DataColumn>
{allowEdit && (
<DataColumn id="action" align="end">
{(row: any) => {
if (row?.role === ROLES.teamOwner) {
return null;
}
return (
<Row alignItems="center">
<TeamMemberEditButton teamId={teamId} userId={row?.user?.id} role={row?.role} />
<TeamMemberRemoveButton
teamId={teamId}
userId={row?.user?.id}
userName={row?.user?.username}
/>
</Row>
);
}}
</DataColumn>
)}
</DataTable>
);
}

View file

@ -1,8 +1,8 @@
'use client';
import { createContext, ReactNode } from 'react';
import { useWebsiteQuery } from '@/components/hooks';
import { Loading } from '@umami/react-zen';
import { Website } from '@/generated/prisma/client';
import { useWebsiteQuery } from '@/components/hooks/queries/useWebsiteQuery';
export const WebsiteContext = createContext<Website>(null);

View file

@ -143,12 +143,12 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) {
},
];
const selectedKey =
items.flatMap(e => e.items).find(({ path }) => path && pathname.endsWith(path.split('?')[0]))
?.id || 'overview';
const selectedKey = items
.flatMap(e => e.items)
.find(({ path }) => path && pathname.endsWith(path.split('?')[0]))?.id;
return (
<SideMenu items={items} selectedKey={selectedKey} allowMinimize={false}>
<SideMenu items={items} selectedKey={selectedKey} allowMinimize={false} muteItems={false}>
<WebsiteSelect websiteId={websiteId} teamId={teamId} />
</SideMenu>
);

View file

@ -1,5 +1,5 @@
import { useMemo, useState } from 'react';
import { Select, ListItem, Grid } from '@umami/react-zen';
import { Select, ListItem, Grid, Column } from '@umami/react-zen';
import {
useEventDataPropertiesQuery,
useEventDataValuesQuery,
@ -33,40 +33,41 @@ export function EventProperties({ websiteId }: { websiteId: string }) {
isFetching={isFetching}
error={error}
minHeight="300px"
gap="6"
>
{data && (
<Grid columns="repeat(auto-fill, minmax(300px, 1fr))" marginBottom="3" gap>
<Select
label={formatMessage(labels.event)}
value={eventName}
onChange={setEventName}
placeholder=""
>
{events?.map(p => (
<ListItem key={p} id={p}>
{p}
</ListItem>
))}
</Select>
<Select
label={formatMessage(labels.property)}
value={propertyName}
onChange={setPropertyName}
isDisabled={!eventName}
placeholder=""
>
{properties?.map(p => (
<ListItem key={p} id={p}>
{p}
</ListItem>
))}
</Select>
</Grid>
)}
{eventName && propertyName && (
<EventValues websiteId={websiteId} eventName={eventName} propertyName={propertyName} />
)}
<Column gap="6">
{data && (
<Grid columns="repeat(auto-fill, minmax(300px, 1fr))" marginBottom="3" gap>
<Select
label={formatMessage(labels.event)}
value={eventName}
onChange={setEventName}
placeholder=""
>
{events?.map(p => (
<ListItem key={p} id={p}>
{p}
</ListItem>
))}
</Select>
<Select
label={formatMessage(labels.property)}
value={propertyName}
onChange={setPropertyName}
isDisabled={!eventName}
placeholder=""
>
{properties?.map(p => (
<ListItem key={p} id={p}>
{p}
</ListItem>
))}
</Select>
</Grid>
)}
{eventName && propertyName && (
<EventValues websiteId={websiteId} eventName={eventName} propertyName={propertyName} />
)}
</Column>
</LoadingPanel>
);
}

View file

@ -10,7 +10,7 @@ import {
Row,
} from '@umami/react-zen';
import { useState } from 'react';
import { getRandomChars } from '@/lib/crypto';
import { getRandomChars } from '@/lib/generate';
import { useMessages, useUpdateQuery } from '@/components/hooks';
const generateId = () => getRandomChars(16);

View file

@ -39,7 +39,7 @@ const schema = z.object({
url: urlOrPathParam.optional(),
name: z.string().max(50).optional(),
tag: z.string().max(50).optional(),
ip: z.string().ip().optional(),
ip: z.string().optional(),
userAgent: z.string().optional(),
timestamp: z.coerce.number().int().optional(),
id: z.string().optional(),

View file

@ -1,5 +1,5 @@
import { z } from 'zod';
import { getRandomChars } from '@/lib/crypto';
import { getRandomChars } from '@/lib/generate';
import { unauthorized, json } from '@/lib/response';
import { canCreateTeam } from '@/validations';
import { uuid } from '@/lib/crypto';

View file

@ -59,7 +59,6 @@ export function DataGrid({
delay={searchDelay || DEFAULT_SEARCH_DELAY}
autoFocus={autoFocus}
placeholder={formatMessage(labels.search)}
style={{ width: '280px' }}
/>
{renderActions?.()}
</Row>

View file

@ -1,19 +0,0 @@
.error {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
z-index: var(--z-index-overlay);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 600px;
gap: 20px;
}
.error button {
align-self: center;
}

View file

@ -1,8 +1,7 @@
import { ErrorInfo, ReactNode } from 'react';
import { ErrorBoundary as Boundary } from 'react-error-boundary';
import { Button } from '@umami/react-zen';
import { Button, Column } from '@umami/react-zen';
import { useMessages } from '@/components/hooks';
import styles from './ErrorBoundary.module.css';
const logError = (error: Error, info: ErrorInfo) => {
// eslint-disable-next-line no-console
@ -14,12 +13,20 @@ export function ErrorBoundary({ children }: { children: ReactNode }) {
const fallbackRender = ({ error, resetErrorBoundary }) => {
return (
<div className={styles.error} role="alert">
<Column
role="alert"
gap
width="100%"
height="100%"
position="absolute"
justifyContent="center"
alignItems="center"
>
<h1>{formatMessage(messages.error)}</h1>
<h3>{error.message}</h3>
<pre>{error.stack}</pre>
<Button onClick={resetErrorBoundary}>OK</Button>
</div>
</Column>
);
};

View file

@ -45,7 +45,7 @@ export function SideMenu({
<Heading size="1">{title}</Heading>
</Row>
)}
<NavMenu muteItems={false} gap="6" {...props}>
<NavMenu gap="6" {...props}>
{items?.map(({ label, items }, index) => {
return (
<NavMenuGroup

View file

@ -35,7 +35,7 @@ export function TypeConfirmationForm({
<Form onSubmit={onConfirm} error={error}>
<p>
{formatMessage(messages.actionConfirmation, {
confirmation: <b key={messages.actionConfirmation.id}>{confirmationValue}</b>,
confirmation: confirmationValue,
})}
</p>
<FormField

View file

@ -1,4 +1,5 @@
import { useApi, useModified } from '@/components/hooks';
import { useApi } from '../useApi';
import { useModified } from '../useModified';
export function useDeleteQuery(path: string, params?: Record<string, any>) {
const { del, useMutation } = useApi();

View file

@ -1,5 +1,5 @@
import { useApi } from '../useApi';
import { useModified } from '@/components/hooks';
import { useModified } from '../useModified';
import { keepPreviousData } from '@tanstack/react-query';
import { ReactQueryOptions } from '@/lib/types';

View file

@ -1,5 +1,5 @@
import { useApi } from '../useApi';
import { useModified } from '@/components/hooks';
import { useModified } from '../useModified';
import { keepPreviousData } from '@tanstack/react-query';
import { ReactQueryOptions } from '@/lib/types';

View file

@ -1,5 +1,5 @@
import { useApi } from '../useApi';
import { useModified } from '@/components/hooks';
import { useModified } from '../useModified';
import { keepPreviousData } from '@tanstack/react-query';
import { ReactQueryOptions } from '@/lib/types';

View file

@ -1,5 +1,5 @@
import { useApi } from '../useApi';
import { useModified } from '@/components/hooks';
import { useModified } from '../useModified';
import { keepPreviousData } from '@tanstack/react-query';
import { ReactQueryOptions } from '@/lib/types';
import { useFilterParameters } from '@/components/hooks/useFilterParameters';

View file

@ -1,5 +1,5 @@
import { useApi } from '../useApi';
import { useModified } from '@/components/hooks';
import { useModified } from '../useModified';
import { keepPreviousData } from '@tanstack/react-query';
import { ReactQueryOptions } from '@/lib/types';

View file

@ -1,5 +1,5 @@
import { useApi } from '../useApi';
import { useModified } from '@/components/hooks';
import { useModified } from '../useModified';
import { keepPreviousData } from '@tanstack/react-query';
import { ReactQueryOptions } from '@/lib/types';

View file

@ -1,5 +1,5 @@
import { useApi } from '../useApi';
import { useModified } from '@/components/hooks';
import { useModified } from '../useModified';
import { keepPreviousData } from '@tanstack/react-query';
import { ReactQueryOptions } from '@/lib/types';
import { useFilterParameters } from '@/components/hooks/useFilterParameters';

View file

@ -1,5 +1,5 @@
import { useCallback } from 'react';
import * as reactQuery from '@tanstack/react-query';
import { useQuery, useMutation } from '@tanstack/react-query';
import { getClientAuthToken } from '@/lib/client';
import { SHARE_TOKEN_HEADER } from '@/lib/constants';
import { httpGet, httpPost, httpPut, httpDelete, FetchResponse } from '@/lib/fetch';
@ -72,6 +72,7 @@ export function useApi() {
},
[httpDelete],
),
...reactQuery,
useQuery,
useMutation,
};
}

View file

@ -19,6 +19,9 @@ export function FilterEditForm({ websiteId, onChange, onClose }: FilterEditFormP
const [currentFilters, setCurrentFilters] = useState(filters);
const [currentSegment, setCurrentSegment] = useState(segment);
const [currentCohort, setCurrentCohort] = useState(cohort);
const panelProps = {
style: { height: 500 },
};
const handleReset = () => {
setCurrentFilters([]);
@ -48,17 +51,17 @@ export function FilterEditForm({ websiteId, onChange, onClose }: FilterEditFormP
<Tab id="segments">{formatMessage(labels.segments)}</Tab>
<Tab id="cohorts">{formatMessage(labels.cohorts)}</Tab>
</TabList>
<TabPanel id="fields">
<TabPanel id="fields" {...panelProps}>
<FieldFilters websiteId={websiteId} value={currentFilters} onChange={setCurrentFilters} />
</TabPanel>
<TabPanel id="segments" style={{ height: 400 }}>
<TabPanel id="segments" {...panelProps}>
<SegmentFilters
websiteId={websiteId}
segmentId={currentSegment}
onChange={handleSegmentChange}
/>
</TabPanel>
<TabPanel id="cohorts" style={{ height: 400 }}>
<TabPanel id="cohorts" {...panelProps}>
<SegmentFilters
type="cohort"
websiteId={websiteId}

View file

@ -13,4 +13,6 @@ declare module 'papaparse';
declare module 'prettier';
declare module 'react-simple-maps';
declare module 'semver';
declare module 'tsup';
declare module 'uuid';
declare module '@umami/esbuild-plugin-css-modules';

View file

@ -46,14 +46,10 @@ export * from '@/components/common/Empty';
export * from '@/components/common/ErrorBoundary';
export * from '@/components/common/ErrorMessage';
export * from '@/components/common/Favicon';
export * from '@/components/input/FilterButtons';
export * from '@/components/common/FilterLink';
export * from '@/components/common/HamburgerButton';
export * from '@/components/common/LinkButton';
export * from '@/components/common/MobileMenu';
export * from '@/components/common/Pager';
export * from '@/components/common/TypeConfirmationForm';
export * from '@/components/input/FilterButtons';
export * from '@/components/input/TeamsButton';
export { ROLES } from '@/lib/constants';

12
src/index.server.ts Normal file
View file

@ -0,0 +1,12 @@
export * as auth from '@/lib/auth';
export * as clickhouse from '@/lib/clickhouse';
export * as client from '@/lib/client';
export { ROLES } from '@/lib/constants';
export * as fetch from '@/lib/fetch';
export * as prisma from '@/lib/prisma';
export * as redis from '@/lib/redis';
export * as request from '@/lib/request';
export * as response from '@/lib/response';
export * as storage from '@/lib/storage';
export * as url from '@/lib/url';
export * as utils from '@/lib/utils';

View file

@ -2,7 +2,8 @@ import bcrypt from 'bcryptjs';
import redis from '@/lib/redis';
import debug from 'debug';
import { ROLE_PERMISSIONS, ROLES, SHARE_TOKEN_HEADER } from '@/lib/constants';
import { secret, getRandomChars } from '@/lib/crypto';
import { secret } from '@/lib/crypto';
import { getRandomChars } from '@/lib/generate';
import { createSecureToken, parseSecureToken, parseToken } from '@/lib/jwt';
import { ensureArray } from '@/lib/utils';
import { getUser } from '@/queries';
@ -36,12 +37,10 @@ export async function checkAuth(request: Request) {
}
}
if (process.env.NODE_ENV === 'development') {
log('checkAuth:', { token, shareToken, payload, user, grant });
}
log({ token, shareToken, payload, user, grant });
if (!user?.id && !shareToken) {
log('checkAuth: User not authorized');
log('User not authorized');
return null;
}

View file

@ -1,5 +1,4 @@
import crypto from 'crypto';
import prand from 'pure-rand';
import { v4, v5 } from 'uuid';
const ALGORITHM = 'aes-256-gcm';
@ -12,25 +11,6 @@ const ENC_POSITION = TAG_POSITION + TAG_LENGTH;
const HASH_ALGO = 'sha512';
const HASH_ENCODING = 'hex';
const seed = Date.now() ^ (Math.random() * 0x100000000);
const rng = prand.xoroshiro128plus(seed);
export function random(min: number, max: number) {
return prand.unsafeUniformIntDistribution(min, max, rng);
}
export function getRandomChars(
n: number,
chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ',
) {
const arr = chars.split('');
let s = '';
for (let i = 0; i < n; i++) {
s += arr[random(0, arr.length - 1)];
}
return s;
}
const getKey = (password: string, salt: Buffer) =>
crypto.pbkdf2Sync(password, salt, 10000, 32, 'sha512');

View file

@ -1,51 +1,3 @@
export const urlFilter = (data: any[]) => {
const map = data.reduce((obj, { x, y }) => {
if (x) {
if (!obj[x]) {
obj[x] = y;
} else {
obj[x] += y;
}
}
return obj;
}, {});
return Object.keys(map).map(key => ({ x: key, y: map[key] }));
};
export const refFilter = (data: any[]) => {
const links = {};
const map = data.reduce((obj, { x, y }) => {
let id;
try {
const url = new URL(x);
id = url.hostname.replace(/www\./, '') || url.href;
} catch {
id = '';
}
links[id] = x;
if (!obj[id]) {
obj[id] = y;
} else {
obj[id] += y;
}
return obj;
}, {});
return Object.keys(map).map(key => ({ x: key, y: map[key], w: links[key] }));
};
export const emptyFilter = (data: any[]) => {
return data.map(item => (item.x ? item : null)).filter(n => n);
};
export const percentFilter = (data: any[]) => {
if (!data) return [];
const total = data.reduce((n, { y }) => n + y, 0);

20
src/lib/generate.ts Normal file
View file

@ -0,0 +1,20 @@
import prand from 'pure-rand';
const seed = Date.now() ^ (Math.random() * 0x100000000);
const rng = prand.xoroshiro128plus(seed);
export function random(min: number, max: number) {
return prand.unsafeUniformIntDistribution(min, max, rng);
}
export function getRandomChars(
n: number,
chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ',
) {
const arr = chars.split('');
let s = '';
for (let i = 0; i < n; i++) {
s += arr[random(0, arr.length - 1)];
}
return s;
}

View file

@ -1,6 +1,6 @@
import { uuid } from '@/lib/crypto';
import { Prisma, Team } from '@/generated/prisma/client';
import { ROLES } from '@/lib/constants';
import { uuid } from '@/lib/crypto';
import prisma from '@/lib/prisma';
import { PageResult, QueryFilters } from '@/lib/types';
import TeamFindManyArgs = Prisma.TeamFindManyArgs;

View file

@ -1,5 +1,5 @@
import { Prisma, TeamUser } from '@/generated/prisma/client';
import { uuid } from '@/lib/crypto';
import { Prisma, TeamUser } from '@/generated/prisma/client';
import prisma from '@/lib/prisma';
import { PageResult, QueryFilters } from '@/lib/types';
import TeamUserFindManyArgs = Prisma.TeamUserFindManyArgs;

View file

@ -2,7 +2,7 @@ import { Prisma, User } from '@/generated/prisma/client';
import { ROLES } from '@/lib/constants';
import prisma from '@/lib/prisma';
import { PageResult, Role, QueryFilters } from '@/lib/types';
import { getRandomChars } from '@/lib/crypto';
import { getRandomChars } from '@/lib/generate';
import UserFindManyArgs = Prisma.UserFindManyArgs;
export interface GetUserOptions {

View file

@ -1,9 +1,9 @@
import { uuid } from '@/lib/crypto';
import { EVENT_NAME_LENGTH, URL_LENGTH, EVENT_TYPE, PAGE_TITLE_LENGTH } from '@/lib/constants';
import { CLICKHOUSE, PRISMA, runQuery } from '@/lib/db';
import clickhouse from '@/lib/clickhouse';
import kafka from '@/lib/kafka';
import prisma from '@/lib/prisma';
import { uuid } from '@/lib/crypto';
import { saveEventData } from './saveEventData';
import { saveRevenue } from './saveRevenue';

View file

@ -1,4 +1,6 @@
import { getPageviewStats, getRealtimeActivity, getSessionStats } from '@/queries';
import { getPageviewStats } from '@/queries/sql/pageviews/getPageviewStats';
import { getRealtimeActivity } from '@/queries/sql/getRealtimeActivity';
import { getSessionStats } from '@/queries/sql/sessions/getSessionStats';
import { QueryFilters } from '@/lib/types';
function increment(data: object, key: string) {