rusty-replay 0.0.4

package/apps/web/components/widget/nav-projects.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import {
+  Folder,
+  Forward,
+  MoreHorizontal,
+  Trash2,
+  type LucideIcon,
+} from 'lucide-react';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@workspace/ui/components/dropdown-menu';
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from '@workspace/ui/components/sidebar';
+import Link from 'next/link';
+
+export function NavProjects({
+  projects,
+}: {
+  projects: {
+    name: string;
+    url: string;
+    icon: LucideIcon;
+  }[];
+}) {
+  const { isMobile } = useSidebar();
+
+  return (
+    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+      <SidebarGroupLabel>Projects</SidebarGroupLabel>
+      <SidebarMenu>
+        {projects.map((item) => (
+          <SidebarMenuItem key={item.name}>
+            <SidebarMenuButton asChild>
+              <Link href={item.url}>
+                <item.icon />
+                <span>{item.name}</span>
+              </Link>
+            </SidebarMenuButton>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuAction showOnHover>
+                  <MoreHorizontal />
+                  <span className="sr-only">More</span>
+                </SidebarMenuAction>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                className="w-48 rounded-lg"
+                side={isMobile ? 'bottom' : 'right'}
+                align={isMobile ? 'end' : 'start'}
+              >
+                <DropdownMenuItem>
+                  <Folder className="text-muted-foreground" />
+                  <span>View Project</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <Forward className="text-muted-foreground" />
+                  <span>Share Project</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <Trash2 className="text-muted-foreground" />
+                  <span>Delete Project</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        ))}
+      </SidebarMenu>
+    </SidebarGroup>
+  );
+}

package/apps/web/components/widget/nav-user.tsx

@@ -0,0 +1,113 @@
+'use client';
+
+import {
+  BadgeCheck,
+  Bell,
+  ChevronsUpDown,
+  CreditCard,
+  LogOut,
+  Sparkles,
+} from 'lucide-react';
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from '@workspace/ui/components/avatar';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@workspace/ui/components/dropdown-menu';
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from '@workspace/ui/components/sidebar';
+import { UserResponse } from '@/api/auth/types';
+
+export function NavUser({ profile }: { profile: UserResponse | undefined }) {
+  const { isMobile } = useSidebar();
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="h-8 w-8 rounded-lg">
+                {/* <AvatarImage src={profile?.} alt={profile?.username} /> */}
+                <AvatarFallback className="rounded-lg">
+                  {profile?.username.substring(0, 2)}
+                </AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-medium">
+                  {profile?.username}
+                </span>
+                <span className="truncate text-xs">{profile?.email}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            side={isMobile ? 'bottom' : 'right'}
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <Avatar className="h-8 w-8 rounded-lg">
+                  {/* <AvatarImage src={profile.avatar} alt={profile?.username} /> */}
+                  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-medium">
+                    {profile?.username}
+                  </span>
+                  <span className="truncate text-xs">{profile?.email}</span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <Sparkles />
+                Upgrade to Pro
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <BadgeCheck />
+                Account
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CreditCard />
+                Billing
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Bell />
+                Notifications
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+}

package/apps/web/components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "../../packages/ui/src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "hooks": "@/hooks",
+    "lib": "@/lib",
+    "utils": "@workspace/ui/lib/utils",
+    "ui": "@workspace/ui/components"
+  }
+}

package/apps/web/constants/routes.ts

@@ -0,0 +1,12 @@
+export const routes = {
+  home: () => `/`,
+  event: {
+    detail: (projectId: number, issueId: number) =>
+      `/project/${projectId}/issues/${issueId}`,
+    list: (projectId: number) => `/project/${projectId}/issues`,
+  },
+  project: {
+    list: () => `/projects`,
+    detail: (projectId: number) => `/project/${projectId}`,
+  },
+};

package/apps/web/eslint.config.js

@@ -0,0 +1,4 @@
+import { nextJsConfig } from "@workspace/eslint-config/next-js"
+
+/** @type {import("eslint").Linter.Config} */
+export default nextJsConfig

package/apps/web/hooks/use-boolean-state.ts

@@ -0,0 +1,13 @@
+import { useState, useCallback } from 'react';
+
+export function useBooleanState() {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  const open = useCallback(() => setIsOpen(true), [setIsOpen]);
+
+  const close = useCallback(() => setIsOpen(false), [setIsOpen]);
+
+  const toggle = useCallback(() => setIsOpen((prev) => !prev), [setIsOpen]);
+
+  return { isOpen, open, close, toggle };
+}

package/apps/web/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/apps/web/next.config.mjs

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  transpilePackages: ["@workspace/ui"],
+}
+
+export default nextConfig

package/apps/web/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "web",
+  "version": "0.0.1",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "lint:fix": "next lint --fix",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^5.0.1",
+    "@openfeature/flagd-web-provider": "^0.7.3",
+    "@openfeature/react-sdk": "^1.0.0",
+    "@opentelemetry/auto-instrumentations-web": "^0.46.0",
+    "@opentelemetry/context-zone": "^2.0.0",
+    "@opentelemetry/core": "^2.0.0",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.200.0",
+    "@opentelemetry/exporter-trace-otlp-proto": "^0.200.0",
+    "@opentelemetry/instrumentation": "^0.200.0",
+    "@opentelemetry/instrumentation-fetch": "^0.200.0",
+    "@opentelemetry/instrumentation-xml-http-request": "^0.200.0",
+    "@opentelemetry/resources": "^2.0.0",
+    "@opentelemetry/sdk-trace-base": "^2.0.0",
+    "@opentelemetry/sdk-trace-web": "^2.0.0",
+    "@opentelemetry/semantic-conventions": "^1.32.0",
+    "@rrweb/packer": "2.0.0-alpha.18",
+    "@tanstack/react-query": "^5.74.4",
+    "@workspace/ui": "workspace:*",
+    "axios": "^1.8.4",
+    "dayjs": "^1.11.13",
+    "framer-motion": "^12.9.2",
+    "import-in-the-middle": "^1.13.1",
+    "lucide-react": "^0.475.0",
+    "next": "^15.2.3",
+    "next-themes": "^0.4.4",
+    "react": "^19.0.0",
+    "react-day-picker": "8.10.1",
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.56.1",
+    "require-in-the-middle": "^7.5.2",
+    "rrweb": "2.0.0-alpha.4",
+    "rrweb-player": "1.0.0-alpha.4",
+    "rusty-replay": "workspace:*",
+    "zod": "^3.24.2"
+  },
+  "devDependencies": {
+    "@rrweb/types": "2.0.0-alpha.18",
+    "@tanstack/eslint-plugin-query": "^5.73.3",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@workspace/eslint-config": "workspace:^",
+    "@workspace/typescript-config": "workspace:*",
+    "typescript": "^5.7.3"
+  }
+}

package/apps/web/postcss.config.mjs

@@ -0,0 +1 @@
+export { default } from "@workspace/ui/postcss.config";

package/apps/web/providers/flag-provider.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import React, { PropsWithChildren, useEffect } from 'react';
+import { OpenFeature } from '@openfeature/react-sdk';
+import { FlagdWebProvider } from '@openfeature/flagd-web-provider';
+
+export default function FlagProvider({ children }: PropsWithChildren) {
+  useEffect(() => {
+    // const session = SessionGateway.getSession();
+    // OpenFeature.setContext({ targetingKey: session.userId, ...session });
+    OpenFeature.setContext({ targetingKey: '1' })
+      .then(() => {
+        const useTLS = window.location.protocol === 'https:';
+        const port = window.location.port
+          ? parseInt(window.location.port, 10)
+          : useTLS
+            ? 443
+            : 80;
+
+        OpenFeature.setProvider(
+          new FlagdWebProvider({
+            host: window.location.hostname,
+            pathPrefix: 'flagservice',
+            port,
+            tls: useTLS,
+            maxRetries: 3,
+            maxDelay: 10000,
+          })
+        );
+      })
+      .catch(console.error);
+  }, []);
+
+  return <>{children}</>;
+}

package/apps/web/providers/query-client-provider.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import React, { PropsWithChildren, useEffect } from 'react';
+import {
+  QueryClient,
+  QueryClientProvider as ReactQueryClientProvider,
+} from '@tanstack/react-query';
+
+const queryClient = new QueryClient({});
+
+export default function QueryClientProvider({ children }: PropsWithChildren) {
+  return (
+    <ReactQueryClientProvider client={queryClient}>
+      {children}
+    </ReactQueryClientProvider>
+  );
+}

package/apps/web/providers/telemetry-provider.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import { FrontendTracer } from '@/utils/front-end-tracer';
+import React, { PropsWithChildren, useEffect } from 'react';
+
+export default function TelemetryProvider({ children }: PropsWithChildren) {
+  useEffect(() => {
+    FrontendTracer();
+  }, []);
+
+  return <>{children}</>;
+}

package/apps/web/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "extends": "@workspace/typescript-config/nextjs.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"],
+      "@workspace/ui/*": ["../../packages/ui/src/*"],
+      "@workspace/rusty-replay/*": ["../../packages/rusty-replay/src/*"]
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": [
+    "next-env.d.ts",
+    "next.config.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": ["node_modules"]
+}

package/apps/web/utils/avatar.ts

@@ -0,0 +1,26 @@
+export function getInitials(name: string) {
+  return name
+    .split(' ')
+    .map((word) => word[0])
+    .join('')
+    .toUpperCase()
+    .slice(0, 2);
+}
+
+export function getAvatarColor(name: string) {
+  const colors = [
+    'bg-blue-500',
+    'bg-purple-500',
+    'bg-orange-500',
+    'bg-green-500',
+    'bg-indigo-500',
+    'bg-teal-500',
+    'bg-pink-500',
+  ];
+
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) {
+    hash = name.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return colors[Math.abs(hash) % colors.length];
+}

package/apps/web/utils/date.ts

@@ -0,0 +1,26 @@
+import dayjs from 'dayjs';
+
+export function formatDateFromNow(dateString: string | null) {
+  if (!dateString) {
+    return '';
+  }
+
+  try {
+    return dayjs(dateString).fromNow();
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  } catch (e) {
+    return dateString;
+  }
+}
+
+export function formatDate(
+  dateString: string,
+  format: string = 'YYYY-MM-DD HH:mm:ss'
+) {
+  try {
+    return dayjs(dateString).format(format);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  } catch (e) {
+    return dateString;
+  }
+}

package/apps/web/utils/front-end-tracer.ts

@@ -0,0 +1,119 @@
+import {
+  CompositePropagator,
+  W3CBaggagePropagator,
+  W3CTraceContextPropagator,
+} from '@opentelemetry/core';
+import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
+import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base';
+import { registerInstrumentations } from '@opentelemetry/instrumentation';
+import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web';
+import { resourceFromAttributes, osDetector } from '@opentelemetry/resources';
+import { ATTR_SERVICE_NAME } from '@opentelemetry/semantic-conventions';
+// import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
+import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-proto';
+// import { SessionIdProcessor } from './SessionIdProcessor';
+import { detectResources } from '@opentelemetry/resources/build/src/detect-resources';
+import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch';
+import { XMLHttpRequestInstrumentation } from '@opentelemetry/instrumentation-xml-http-request';
+
+declare global {
+  interface Window {
+    ENV: {
+      NEXT_PUBLIC_PLATFORM?: string;
+      NEXT_PUBLIC_OTEL_SERVICE_NAME?: string;
+      NEXT_PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT?: string;
+      IS_SYNTHETIC_REQUEST?: string;
+    };
+  }
+}
+
+const {
+  NEXT_PUBLIC_OTEL_SERVICE_NAME = 'replay',
+  NEXT_PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT = '',
+  IS_SYNTHETIC_REQUEST = '',
+} = typeof window !== 'undefined' && window.ENV
+  ? window.ENV
+  : {
+      NEXT_PUBLIC_OTEL_SERVICE_NAME:
+        process.env.NEXT_PUBLIC_OTEL_SERVICE_NAME || 'replay',
+      NEXT_PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT:
+        process.env.NEXT_PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT || '',
+      IS_SYNTHETIC_REQUEST: process.env.IS_SYNTHETIC_REQUEST || '',
+    };
+
+const endpoint =
+  NEXT_PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT ||
+  'http://localhost:8081/traces';
+
+export const FrontendTracer = async () => {
+  const { ZoneContextManager } = await import('@opentelemetry/context-zone');
+
+  let resource = resourceFromAttributes({
+    [ATTR_SERVICE_NAME]: NEXT_PUBLIC_OTEL_SERVICE_NAME,
+  });
+  const detectedResources = detectResources({ detectors: [osDetector] });
+  resource = resource.merge(detectedResources);
+
+  const provider = new WebTracerProvider({
+    resource,
+    spanProcessors: [
+      // new SessionIdProcessor(),
+      new BatchSpanProcessor(
+        new OTLPTraceExporter({
+          url:
+            NEXT_PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT ||
+            'http://localhost:8081/traces',
+
+          headers: {
+            'Content-Type': 'application/x-protobuf',
+          },
+        }),
+        {
+          scheduledDelayMillis: 500,
+        }
+      ),
+    ],
+  });
+
+  const contextManager = new ZoneContextManager();
+
+  provider.register({
+    contextManager,
+    // fetch, xhr을 제외한 모든 event
+    // propagator: new CompositePropagator({
+    //   propagators: [
+    //     new W3CBaggagePropagator(),
+    //     new W3CTraceContextPropagator(),
+    //   ],
+    // }),
+  });
+
+  const backendOrigin = new URL(endpoint).origin; // "http://localhost:8081"
+
+  const fetchInstrumentation = new FetchInstrumentation({
+    propagateTraceHeaderCorsUrls: [backendOrigin],
+    clearTimingResources: true,
+  });
+
+  const xhrInstrumentation = new XMLHttpRequestInstrumentation({
+    propagateTraceHeaderCorsUrls: [backendOrigin],
+    clearTimingResources: true,
+  });
+
+  registerInstrumentations({
+    tracerProvider: provider,
+    instrumentations: [
+      fetchInstrumentation,
+      xhrInstrumentation,
+      // getWebAutoInstrumentations({
+      //   '@opentelemetry/instrumentation-fetch': {
+      //     propagateTraceHeaderCorsUrls: /.*/,
+      //     clearTimingResources: true,
+      //     applyCustomAttributesOnSpan(span) {
+      //       span.setAttribute('app.synthetic_request', IS_SYNTHETIC_REQUEST);
+      //     },
+      //   },
+      // }),
+    ],
+  });
+};

package/apps/web/utils/schema/project.schema.ts

@@ -0,0 +1,12 @@
+import { z } from 'zod';
+
+export const CreateProjectSchema = z.object({
+  name: z
+    .string({
+      required_error: '프로젝트 이름을 입력하세요',
+    })
+    .min(1, { message: '프로젝트 이름을 입력하세요' }),
+  description: z.string().optional().nullable(),
+});
+
+export type CreateProjectSchemaType = z.infer<typeof CreateProjectSchema>;

package/apps/web/utils/span-processor.ts

@@ -0,0 +1,36 @@
+import {
+  SimpleSpanProcessor,
+  ReadableSpan,
+  SpanProcessor,
+} from '@opentelemetry/sdk-trace-base';
+import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-proto';
+
+class EndpointOnlySpanProcessor implements SpanProcessor {
+  private delegate = new SimpleSpanProcessor(
+    new OTLPTraceExporter({
+      url: process.env.NEXT_PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT,
+      headers: { 'Content-Type': 'application/x-protobuf' },
+    })
+  );
+
+  onStart(_span: ReadableSpan) {}
+
+  onEnd(span: ReadableSpan) {
+    const url = span.attributes['http.url'] as string | undefined;
+    if (
+      url &&
+      url.startsWith(
+        process.env.NEXT_PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT!
+      )
+    ) {
+      this.delegate.onEnd(span);
+    }
+  }
+
+  shutdown() {
+    return this.delegate.shutdown();
+  }
+  forceFlush() {
+    return this.delegate.forceFlush();
+  }
+}

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "rusty-replay",
+  "version": "0.0.4",
+  "scripts": {
+    "build": "turbo build",
+    "dev": "turbo dev",
+    "lint": "turbo lint",
+    "format": "prettier --write \"**/*.{ts,tsx,md}\""
+  },
+  "devDependencies": {
+    "@workspace/eslint-config": "workspace:*",
+    "@workspace/typescript-config": "workspace:*",
+    "prettier": "^3.5.1",
+    "turbo": "^2.4.2",
+    "typescript": "5.7.3"
+  },
+  "packageManager": "pnpm@10.4.1",
+  "engines": {
+    "node": ">=20"
+  }
+}

package/packages/eslint-config/README.md

@@ -0,0 +1,3 @@
+# `@workspace/eslint-config`
+
+Shared eslint configuration for the workspace.