Updated components build.

.gitignore

@@ -9,16 +9,16 @@ node_modules
 /coverage
 
 # next.js
-/.next/
-/out/
-/src/generated/
+/.next
+/out
 
 # production
 /build
 /public/script.js
 /geo
 /dist
-src/generated/prisma/
+/generated
+/src/generated
 
 # misc
 .DS_Store

esbuild.mjs

@@ -0,0 +1,36 @@
+import esbuild from 'esbuild';
+import { commonjs } from '@hyrious/esbuild-plugin-commonjs';
+import fs from 'node:fs';
+
+fs.copyFileSync('./package.components.json', './dist/package.json');
+
+esbuild
+  .build({
+    entryPoints: ['src/index.client.ts'],
+    outfile: 'dist/client/index.js',
+    platform: 'browser',
+    bundle: true,
+    jsx: 'automatic',
+    format: 'esm',
+    plugins: [commonjs()],
+    external: ['react', 'react-dom', 'react-jsx/runtime', '@swc/helpers'],
+  })
+  .catch(e => {
+    // eslint-disable-next-line
+    console.error(e);
+    process.exit(1);
+  });
+
+esbuild
+  .build({
+    entryPoints: ['src/index.server.ts'],
+    outfile: 'dist/server/index.js',
+    platform: 'node',
+    bundle: true,
+    format: 'esm',
+  })
+  .catch(e => {
+    // eslint-disable-next-line
+    console.error(e);
+    process.exit(1);
+  });

package.components.json

@@ -1,6 +1,6 @@
 {
   "name": "@umami/components",
-  "version": "0.1.0",
+  "version": "0.100.0",
   "description": "Umami React components.",
   "author": "Mike Cao <mike@mikecao.com>",
   "license": "MIT",

package.json

@@ -23,7 +23,7 @@
     "build-app": "next build",
     "build-app-turbo": "next build --turbo",
     "build-icons": "svgr ./src/assets --out-dir src/components/svg --typescript",
-    "build-components": "rollup -c rollup.components.config.js",
+    "build-components": "npm-run-all types esbuild",
     "build-tracker": "rollup -c rollup.tracker.config.js",
     "build-prisma-client": "node scripts/build-prisma-client.js",
     "build-lang": "npm-run-all format-lang compile-lang download-country-names download-language-names clean-lang",
@@ -51,7 +51,10 @@
     "postbuild": "node scripts/postbuild.js",
     "test": "jest",
     "cypress-open": "cypress open cypress run",
-    "cypress-run": "cypress run cypress run"
+    "cypress-run": "cypress run cypress run",
+    "rollup": "rollup -c rollup.components.config.js",
+    "esbuild": "node esbuild.mjs",
+    "types": "tsup"
   },
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx}": [
@@ -82,7 +85,7 @@
     "@react-spring/web": "^10.0.1",
     "@svgr/cli": "^8.1.0",
     "@tanstack/react-query": "^5.85.5",
-    "@umami/react-zen": "^0.171.0",
+    "@umami/react-zen": "^0.174.0",
     "@umami/redis-client": "^0.27.0",
     "bcryptjs": "^3.0.2",
     "chalk": "^5.6.0",
@@ -136,6 +139,7 @@
   },
   "devDependencies": {
     "@formatjs/cli": "^4.2.29",
+    "@hyrious/esbuild-plugin-commonjs": "^0.2.6",
     "@netlify/plugin-nextjs": "^5.12.1",
     "@rollup/plugin-alias": "^5.0.0",
     "@rollup/plugin-commonjs": "^25.0.4",
@@ -143,6 +147,7 @@
     "@rollup/plugin-node-resolve": "^15.2.0",
     "@rollup/plugin-replace": "^5.0.2",
     "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.1.4",
     "@types/jest": "^30.0.0",
     "@types/node": "^24.3.0",
     "@types/react": "^19.1.12",
@@ -150,6 +155,7 @@
     "@types/react-window": "^1.8.8",
     "@typescript-eslint/eslint-plugin": "^8.41.0",
     "@typescript-eslint/parser": "^8.41.0",
+    "@umami/esbuild-plugin-css-modules": "^0.4.0",
     "babel-plugin-react-compiler": "19.1.0-rc.2",
     "cross-env": "^10.0.0",
     "cypress": "^13.6.6",
@@ -173,12 +179,13 @@
     "postcss-preset-env": "7.8.3",
     "prettier": "^3.6.2",
     "prompts": "2.4.2",
-    "rollup": "^3.28.0",
+    "rollup": "^4.49.0",
     "rollup-plugin-copy": "^3.4.0",
-    "rollup-plugin-delete": "^2.0.0",
-    "rollup-plugin-dts": "^5.3.1",
-    "rollup-plugin-esbuild": "^5.0.0",
-    "rollup-plugin-node-externals": "^6.1.1",
+    "rollup-plugin-delete": "^3.0.1",
+    "rollup-plugin-dts": "^6.2.3",
+    "rollup-plugin-esbuild": "^6.2.1",
+    "rollup-plugin-node-externals": "^8.1.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "stylelint": "^15.10.1",
     "stylelint-config-css-modules": "^4.5.1",
@@ -187,6 +194,7 @@
     "tar": "^6.1.2",
     "ts-jest": "^29.4.0",
     "ts-node": "^10.9.1",
+    "tsup": "^8.5.0",
     "typescript": "^5.9.2"
   }
 }

rollup.components.config.js

@@ -8,7 +8,6 @@ import copy from 'rollup-plugin-copy';
 import del from 'rollup-plugin-delete';
 import nodeExternals from 'rollup-plugin-node-externals';
 import esbuild from 'rollup-plugin-esbuild';
-import dts from 'rollup-plugin-dts';
 
 const md5 = str => crypto.createHash('md5').update(str).digest('hex');
 
@@ -24,11 +23,11 @@ const aliasConfig = {
   customResolver,
 };
 
-const jsBundle = {
-  input: 'src/index.ts',
+const clientConfig = {
+  input: 'src/index.client.ts',
   output: [
     {
-      file: 'dist/index.js',
+      file: 'dist/client/index.js',
       format: 'es',
       sourcemap: true,
     },
@@ -52,9 +51,9 @@ const jsBundle = {
         },
       },
     }),
+    alias(aliasConfig),
     nodeExternals(),
     json(),
-    alias(aliasConfig),
     esbuild({
       target: 'es6',
       jsx: 'automatic',
@@ -65,14 +64,14 @@ const jsBundle = {
   ],
 };
 
-const dtsBundle = {
-  input: 'src/index.ts',
+const serverConfig = {
+  input: 'src/index.server.ts',
   output: {
-    file: 'dist/index.d.ts',
+    file: 'dist/server/index.ts',
     format: 'es',
   },
-  plugins: [alias(aliasConfig), nodeExternals(), json(), dts()],
+  plugins: [alias(aliasConfig), nodeExternals(), json()],
   external: [/\.css/],
 };
 
-export default [jsBundle, dtsBundle];
+export default [clientConfig, serverConfig];

scripts/build-prisma-client.js

@@ -4,7 +4,7 @@ esbuild
   .build({
     entryPoints: ['src/generated/prisma/client.ts'], // Adjust this to your entry file
     bundle: true, // Bundle all files into one (optional)
-    outfile: 'dist/generated/prisma/client.js', // Output file
+    outfile: 'generated/prisma/client.js', // Output file
     platform: 'node', // For Node.js compatibility
     target: 'es2020', // Target version of Node.js
     format: 'esm', // Use ESM format

src/app/(main)/admin/users/[userId]/UserProvider.tsx

@@ -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);

src/app/(main)/links/LinkEditForm.tsx

@@ -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';

src/app/(main)/links/LinkProvider.tsx

@@ -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);

src/app/(main)/pixels/PixelEditForm.tsx

@@ -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';

src/app/(main)/pixels/PixelProvider.tsx

@@ -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);

src/app/(main)/settings/SettingsLayout.tsx

@@ -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%">

src/app/(main)/settings/layout.tsx

@@ -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>;
 }
 

src/app/(main)/teams/TeamLeaveForm.tsx

@@ -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}

src/app/(main)/teams/TeamProvider.tsx

@@ -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);

src/app/(main)/teams/[teamId]/TeamEditForm.tsx

@@ -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)}`;

src/app/(main)/teams/[teamId]/TeamSettings.tsx

@@ -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();

src/app/(main)/teams/[teamId]/TeamWebsitesTable.tsx

@@ -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>
   );
 }

src/app/(main)/websites/WebsiteProvider.tsx

@@ -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);
 

src/app/(main)/websites/[websiteId]/WebsiteNav.tsx

@@ -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>
   );

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

@@ -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>
   );
 }

src/app/(main)/websites/[websiteId]/settings/WebsiteShareForm.tsx

@@ -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);

src/app/api/send/route.ts

@@ -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(),

src/app/api/teams/route.ts

@@ -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';

src/components/common/DataGrid.tsx

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

src/components/common/ErrorBoundary.module.css

@@ -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;
-}

src/components/common/ErrorBoundary.tsx

@@ -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>
     );
   };
 

src/components/common/SideMenu.tsx

@@ -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

src/components/common/TypeConfirmationForm.tsx

@@ -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

src/components/hooks/queries/useDeleteQuery.ts

@@ -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();

src/components/hooks/queries/useTeamQuery.ts

@@ -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';
 

src/components/hooks/queries/useUserQuery.ts

@@ -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';
 

src/components/hooks/queries/useWebsiteCohortQuery.ts

@@ -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';
 

src/components/hooks/queries/useWebsiteCohortsQuery.ts

@@ -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';

src/components/hooks/queries/useWebsiteQuery.ts

@@ -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';
 

src/components/hooks/queries/useWebsiteSegmentQuery.ts

@@ -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';
 

src/components/hooks/queries/useWebsiteSegmentsQuery.ts

@@ -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';

src/components/hooks/useApi.ts

@@ -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,
   };
 }

src/components/input/FilterEditForm.tsx

@@ -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}

src/declaration.d.ts

@@ -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';

src/index.client.ts

@@ -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';

src/index.server.ts

@@ -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';

src/lib/auth.ts

@@ -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;
   }
 

src/lib/crypto.ts

@@ -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');
 

src/lib/filters.ts

@@ -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);

src/lib/generate.ts

@@ -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;
+}

src/queries/prisma/team.ts

@@ -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;

src/queries/prisma/teamUser.ts

@@ -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;

src/queries/prisma/user.ts

@@ -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 {

src/queries/sql/events/saveEvent.ts

@@ -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';
 

src/queries/sql/getRealtimeData.ts

@@ -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) {

tsup.config.ts

@@ -0,0 +1,23 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig([
+  {
+    entry: { index: 'src/index.client.ts' },
+    format: ['esm'],
+    outDir: 'dist/client',
+    dts: true,
+    splitting: false,
+    sourcemap: false,
+    clean: true,
+    external: ['react', 'react-dom', 'react/jsx-runtime'],
+  },
+  {
+    entry: { index: 'src/index.server.ts' },
+    format: ['esm'],
+    outDir: 'dist/server',
+    dts: true,
+    splitting: false,
+    sourcemap: false,
+    clean: true,
+  },
+]);