web: added the base for the web project

apps/web/src/utils/api.ts

@@ -4,12 +4,13 @@
  *
  * We also create a few inference helpers for input and output types.
  */
-import { httpBatchLink, httpLink, loggerLink } from "@trpc/client";
+import { type TRPCClientErrorBase, httpLink, loggerLink } from "@trpc/client";
 import { createTRPCNext } from "@trpc/next";
 import { type inferRouterInputs, type inferRouterOutputs } from "@trpc/server";
 import superjson from "superjson";
 
 import { type AppRouter } from "@/server/api/root";
+import { toast } from "@/components/ui/use-toast";
 
 const getBaseUrl = () => {
   if (typeof window !== "undefined") return ""; // browser should use relative url
@@ -27,7 +28,8 @@ export const api = createTRPCNext<AppRouter>({
             refetchOnWindowFocus: false,
             refetchOnReconnect: false,
             refetchOnMount: false,
-          }
+            enabled: typeof window !== "undefined",
+          },
         }
       },
       /**
@@ -75,3 +77,11 @@ export type RouterInputs = inferRouterInputs<AppRouter>;
  * @example type HelloOutput = RouterOutputs['example']['hello']
  */
 export type RouterOutputs = inferRouterOutputs<AppRouter>;
+
+
+export function handleError(error: TRPCClientErrorBase<any>) {
+  toast({
+    title: 'Error',
+    description: error.message,
+  })
+}

apps/web/src/utils/clipboard.ts

@@ -0,0 +1,9 @@
+import { toast } from "@/components/ui/use-toast"
+
+export function clipboard(value: string | number) {
+  navigator.clipboard.writeText(value.toString())
+  toast({
+    title: "Copied to clipboard",
+    description: value.toString(),
+  })
+}

apps/web/src/utils/constants.ts

@@ -0,0 +1,7 @@
+
+export const operators = {
+  is: "Is",
+  isNot: "Is not",
+  contains: 'Contains',
+  doesNotContain: 'Not contains',
+} 

apps/web/src/utils/date.ts

@@ -8,4 +8,15 @@ export function dateDifferanceInDays(date1: Date, date2: Date) {
   const diffTime = Math.abs(date2.getTime() - date1.getTime());
   return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
 }
+
+export function getLocale() {
+  if(typeof navigator === 'undefined') {
+    return 'en-US'
+  }
+
+  return navigator.language ?? 'en-US';
+}
+
+export function formatDate(date: Date) {
+  return new Intl.DateTimeFormat(getLocale()).format(date)
 }

apps/web/src/utils/theme.ts

@@ -1,5 +1,5 @@
 import resolveConfig from "tailwindcss/resolveConfig";
-import tailwinConfig from "../../tailwind.config.js";
+import tailwinConfig from "../../tailwind.config";
 const config = resolveConfig(tailwinConfig);
 
 export const theme = config.theme as any;

apps/web/src/utils/validation.ts

@@ -1,14 +1,27 @@
-import { ChartType } from "@prisma/client";
 import { z } from "zod";
+import { operators } from "./constants";
+
+function objectToZodEnums<K extends string> ( obj: Record<K, any> ): [ K, ...K[] ] {
+  const [ firstKey, ...otherKeys ] = Object.keys( obj ) as K[]
+  return [ firstKey!, ...otherKeys ]
+}
 
 export const zChartEvent = z.object({
   id: z.string(),
   name: z.string(),
+  segment: z.enum(["event", "user"]),
   filters: z.array(
     z.object({
       id: z.string(),
       name: z.string(),
-      value: z.string(),
+      operator: z.enum(objectToZodEnums(operators)),
+      value: z.array(
+        z
+          .string()
+          .or(z.number())
+          .or(z.boolean())
+          .or(z.null())
+      ),
     }),
   ),
 });
@@ -20,7 +33,7 @@ export const zChartBreakdown = z.object({
 export const zChartEvents = z.array(zChartEvent);
 export const zChartBreakdowns = z.array(zChartBreakdown);
 
-export const zChartType = z.enum(['linear', 'bar', 'pie', 'metric', 'area']);
+export const zChartType = z.enum(["linear", "bar", "pie", "metric", "area"]);
 
 export const zTimeInterval = z.enum(["day", "hour", "month"]);
 
@@ -32,4 +45,4 @@ export const zChartInput = z.object({
   interval: zTimeInterval,
   events: zChartEvents,
   breakdowns: zChartBreakdowns,
-})
+});