workflows

.github/workflows/frontend-dev.yaml

@@ -9,14 +9,23 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-
-      - name: Cache node modules
-        uses: actions/cache@v1
+      - uses: oven-sh/setup-bun@v2
         with:
-          path: node_modules
-          key: ${{ runner.OS }}-build-${{ hashFiles('**/package-lock.json') }}
+          bun-version: latest
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9
+
+      - name: Cache node_modules
+        uses: actions/cache@v3
+        with:
+          path: |
+            node_modules
+            ~/.pnpm-store
+          key: ${{ runner.OS }}-build-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.OS }}-build-
             ${{ runner.OS }}-
@@ -52,7 +61,7 @@ jobs:
           set -x
           cd frontend
           mv .env.sample .env
-          docker run --rm -v /etc/passwd:/etc/passwd -u `id -u`:`id -g` -v $(pwd):/home/${USER} -w /home/${USER} --name node_build node:14-stretch-slim /bin/bash -c "yarn && yarn build"
+          docker run --rm -v /etc/passwd:/etc/passwd -u `id -u`:`id -g` -v $(pwd):/home/${USER} -w /home/${USER} --name node_build node:20-slim /bin/bash -c "npm i -g pnpm && pnpm i && pnpm build"
           # https://github.com/docker/cli/issues/1134#issuecomment-613516912
           DOCKER_BUILDKIT=1 docker build --target=cicd -t $DOCKER_REPO/frontend:${IMAGE_TAG} .
           docker tag $DOCKER_REPO/frontend:${IMAGE_TAG} $DOCKER_REPO/frontend:${IMAGE_TAG}-ee

.github/workflows/frontend.yaml

@@ -1,4 +1,5 @@
 name: Frontend Foss Deployment
+
 on:
   workflow_dispatch:
   push:
@@ -6,7 +7,7 @@ on:
       - dev
     paths:
       - frontend/**
-# Disable previous workflows for this action.
+
 concurrency:
   group: ${{ github.workflow }} #-${{ github.ref }}
   cancel-in-progress: true
@@ -18,13 +19,17 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v2
 
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9
+
       - name: Cache node modules
         uses: actions/cache@v4
         with:
           path: |
             /home/runner/work/openreplay/openreplay/frontend/node_modules
-            /home/runner/work/openreplay/openreplay/frontend/.yarn
-          key: ${{ runner.OS }}-build-${{ hashFiles('frontend/yarn.lock') }}
+            /home/runner/.pnpm-store
+          key: ${{ runner.OS }}-build-${{ hashFiles('frontend/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.OS }}-build-
             ${{ runner.OS }}-
@@ -47,7 +52,7 @@ jobs:
       - uses: azure/k8s-set-context@v1
         with:
           method: kubeconfig
-          kubeconfig: ${{ secrets.OSS_KUBECONFIG }} # Use content of kubeconfig in secret.
+          kubeconfig: ${{ secrets.OSS_KUBECONFIG }}
         id: setcontext
 
       - name: Building and Pushing frontend image
@@ -60,7 +65,7 @@ jobs:
           set -x
           cd frontend
           mv .env.sample .env
-          docker run --rm -v /etc/passwd:/etc/passwd -u `id -u`:`id -g` -v $(pwd):/home/${USER} -w /home/${USER} --name node_build node:18-slim /bin/bash -c "yarn && yarn build"
+          docker run --rm -v /etc/passwd:/etc/passwd -u `id -u`:`id -g` -v $(pwd):/home/${USER} -w /home/${USER} --name node_build node:20-slim /bin/bash -c "npm i -g pnpm && pnpm i && bun run build"
           # https://github.com/docker/cli/issues/1134#issuecomment-613516912
           DOCKER_BUILDKIT=1 docker build --target=cicd -t $DOCKER_REPO/frontend:${IMAGE_TAG} .
           docker tag $DOCKER_REPO/frontend:${IMAGE_TAG} $DOCKER_REPO/frontend:${IMAGE_TAG}-ee
@@ -85,7 +90,7 @@ jobs:
           # Deploy command
           mkdir -p /tmp/charts
           mv openreplay/charts/{ingress-nginx,frontend,quickwit,connector} /tmp/charts/
-          rm -rf  openreplay/charts/*
+          rm -rf openreplay/charts/*
           mv /tmp/charts/* openreplay/charts/
           helm template openreplay -n app openreplay -f vars.yaml -f /tmp/image_override.yaml --set ingress-nginx.enabled=false --set skipMigration=true --no-hooks | kubectl apply -n app -f -
         env:
@@ -93,12 +98,10 @@ jobs:
           IMAGE_TAG: ${{ github.ref_name }}_${{ github.sha }}
           ENVIRONMENT: staging
 
-      ### Enterprise code deployment
-
       - uses: azure/k8s-set-context@v1
         with:
           method: kubeconfig
-          kubeconfig: ${{ secrets.EE_KUBECONFIG }} # Use content of kubeconfig in secret.
+          kubeconfig: ${{ secrets.EE_KUBECONFIG }}
         id: setcontextee
 
       - uses: ./.github/composite-actions/update-keys
@@ -129,7 +132,7 @@ jobs:
           # Deploy command
           mkdir -p /tmp/charts
           mv openreplay/charts/{ingress-nginx,frontend,quickwit,connector} /tmp/charts/
-          rm -rf  openreplay/charts/*
+          rm -rf openreplay/charts/*
           mv /tmp/charts/* openreplay/charts/
           helm template openreplay -n app openreplay -f vars.yaml -f /tmp/image_override.yaml --set ingress-nginx.enabled=false --set skipMigration=true --no-hooks | kubectl apply -n app -f -
         env:
@@ -137,13 +140,3 @@ jobs:
           # We're not passing -ee flag, because helm will add that.
           IMAGE_TAG: ${{ github.ref_name }}_${{ github.sha }}
           ENVIRONMENT: staging
-
-    # - name: Debug Job
-    #   # if: ${{ failure() }}
-    #   uses: mxschmitt/action-tmate@v3
-    #   env:
-    #     DOCKER_REPO: ${{ secrets.EE_REGISTRY_URL }}
-    #     IMAGE_TAG: ${{ github.sha }}-ee
-    #     ENVIRONMENT: staging
-    #    with:
-    #      iimit-access-to-actor: true

.github/workflows/tracker-tests.yaml

@@ -1,5 +1,5 @@
-# Checking unit tests for tracker and assist
 name: Tracker tests
+
 on:
   workflow_dispatch:
   push:
@@ -10,58 +10,81 @@ on:
     branches: [ "dev", "main" ]
     paths:
       - tracker/**
+
 jobs:
   build-and-test:
     runs-on: macos-latest
     name: Build and test Tracker
     steps:
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9
       - uses: oven-sh/setup-bun@v2
         with:
           bun-version: latest
+
       - uses: actions/checkout@v3
+
+      # Cache tracker node_modules
       - name: Cache tracker modules
         uses: actions/cache@v3
         with:
           path: tracker/tracker/node_modules
-          key: ${{ runner.OS }}-test_tracker_build-${{ hashFiles('**/bun.lockb') }}
+          key: ${{ runner.OS }}-test_tracker_build-${{ hashFiles('pnpm-lock.yaml') }}
           restore-keys: |
             test_tracker_build{{ runner.OS }}-build-
             test_tracker_build{{ runner.OS }}-
+
+      # Cache tracker-assist node_modules
       - name: Cache tracker-assist modules
         uses: actions/cache@v3
         with:
           path: tracker/tracker-assist/node_modules
-          key: ${{ runner.OS }}-test_tracker_build-${{ hashFiles('**/bun.lockb') }}
+          key: ${{ runner.OS }}-test_tracker_build-${{ hashFiles('pnpm-lock.yaml') }}
           restore-keys: |
             test_tracker_build{{ runner.OS }}-build-
             test_tracker_build{{ runner.OS }}-
-      - name: Setup Testing packages
+
+      # Setup testing packages for Tracker
+      - name: Setup Testing packages for Tracker
         run: |
           cd tracker/tracker
-          bun install
-      - name: Jest tests
+          pnpm install
+
+      # Run Jest tests for Tracker
+      - name: Jest tests for Tracker
         run: |
           cd tracker/tracker
           bun run test:ci
-      - name: Building test
+
+      # Build Tracker project
+      - name: Build Tracker
         run: |
           cd tracker/tracker
           bun run build
-      - name: (TA) Setup Testing packages
+
+      # Setup testing packages for Tracker Assist
+      - name: (TA) Setup Testing packages for Tracker Assist
         run: |
           cd tracker/tracker-assist
-          bun install
-      - name: (TA) Jest tests
+          pnpm install
+
+      # Run Jest tests for Tracker Assist
+      - name: (TA) Jest tests for Tracker Assist
         run: |
           cd tracker/tracker-assist
           bun run test:ci
-      - name: (TA) Building test
+
+      # Build Tracker Assist project
+      - name: (TA) Build Tracker Assist
         run: |
           cd tracker/tracker-assist
           bun run build
+
+      # Upload coverage reports to Codecov
       - name: Upload coverage reports to Codecov
         uses: codecov/codecov-action@v3
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
           flags: tracker
-          iame: tracker
+          name: tracker

.github/workflows/ui-tests.js.yml

@@ -1,18 +1,18 @@
-# Checking unit and visual tests locally on every merge rq to dev and main
 name: Frontend tests
 
 on:
   workflow_dispatch:
   push:
-    branches: [ "main" ]
+    branches: ["main"]
     paths:
       - frontend/**
       - tracker/**
   pull_request:
-    branches: [ "dev", "main" ]
+    branches: ["dev", "main"]
     paths:
       - frontend/**
       - tracker/**
+
 env:
   API: ${{ secrets.E2E_API_ORIGIN }}
   ASSETS: ${{ secrets.E2E_ASSETS_ORIGIN }}
@@ -21,63 +21,78 @@ env:
   CY_PASS: ${{ secrets.CYPRESS_PASSWORD }}
   FOSS_PROJECT_KEY: ${{ secrets.FOSS_PROJECT_KEY }}
   FOSS_INGEST: ${{ secrets.FOSS_INGEST }}
+
 jobs:
   build-and-test:
     runs-on: macos-latest
     name: Build and test Tracker plus Replayer
     strategy:
       matrix:
-        node-version: [ 18.x ]
+        node-version: [18.x]
     steps:
       - uses: oven-sh/setup-bun@v2
         with:
           bun-version: latest
+
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9
+
       - uses: actions/checkout@v3
+
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
-      - name: Cache tracker modules
+
+      # Cache pnpm node modules for Tracker
+      - name: Cache tracker node_modules
         uses: actions/cache@v3
         with:
           path: tracker/tracker/node_modules
-          key: ${{ runner.OS }}-test_tracker_build-${{ hashFiles('tracker/tracker/bun.lockb') }}
+          key: ${{ runner.OS }}-test_tracker_build-${{ hashFiles('pnpm-lock.yaml') }}
           restore-keys: |
             test_tracker_build-{{ runner.OS }}-build-
             test_tracker_build-{{ runner.OS }}-
-      - name: Setup Testing packages
+
+      # Install dependencies for Tracker
+      - name: Setup Testing packages for Tracker
         run: |
           cd tracker/tracker
-          bun install
+          pnpm install
+
       - name: Build tracker inst
         run: |
           cd tracker/tracker
           bun run build
-      - name: Setup Testing UI Env
-        run: |
-          cd tracker/tracker-testing-playground
-          echo "REACT_APP_KEY=$FOSS_PROJECT_KEY" >> .env
-          echo "REACT_APP_INGEST=$FOSS_INGEST" >> .env
+
+      # Cache pnpm node_modules for Testing UI
       - name: Cache testing UI node modules
         uses: actions/cache@v3
         with:
           path: tracker/tracker-testing-playground/node_modules
-          key: ${{ runner.OS }}-build-${{ hashFiles('**/yarn.lock') }}
+          key: ${{ runner.OS }}-build-${{ hashFiles('pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.OS }}-build-
             ${{ runner.OS }}-
-      - name: Setup Testing packages
+
+      # Install dependencies for Testing UI
+      - name: Setup Testing packages for Testing UI
         run: |
           cd tracker/tracker-testing-playground
-          yarn
-      - name: Cache node modules
+          pnpm install
+
+      # Cache pnpm node_modules for Frontend
+      - name: Cache frontend node_modules
         uses: actions/cache@v3
         with:
           path: frontend/node_modules
-          key: ${{ runner.OS }}-build-${{ hashFiles('frontend/yarn.lock') }}
+          key: ${{ runner.OS }}-build-${{ hashFiles('pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.OS }}-build-
             ${{ runner.OS }}-
+
+      # Set up environment for Frontend
       - name: Setup env
         run: |
           cd frontend
@@ -86,37 +101,45 @@ jobs:
           echo "ORIGIN=$API" >> .env
           echo "ASSETS_HOST=$ASSETS" >> .env
           echo "API_EDP=$APIEDP" >> .env
-          echo "SENTRY_ENABLED = false" >> .env
-          echo "SENTRY_URL = ''" >> .env
-          echo "CAPTCHA_ENABLED = false" >> .env
-          echo "CAPTCHA_SITE_KEY = 'asdad'" >> .env
-          echo "MINIO_ENDPOINT = ''" >> .env
-          echo "MINIO_PORT = ''" >> .env
-          echo "MINIO_USE_SSL = ''" >> .env
-          echo "MINIO_ACCESS_KEY = ''" >> .env
-          echo "MINIO_SECRET_KEY = ''" >> .env
-          echo "VERSION = '1.15.0'" >> .env
-          echo "TRACKER_VERSION = '10.0.0'" >> .env
-          echo "COMMIT_HASH = 'dev'" >> .env
+          echo "SENTRY_ENABLED=false" >> .env
+          echo "SENTRY_URL=''" >> .env
+          echo "CAPTCHA_ENABLED=false" >> .env
+          echo "CAPTCHA_SITE_KEY='asdad'" >> .env
+          echo "MINIO_ENDPOINT=''" >> .env
+          echo "MINIO_PORT=''" >> .env
+          echo "MINIO_USE_SSL=''" >> .env
+          echo "MINIO_ACCESS_KEY=''" >> .env
+          echo "MINIO_SECRET_KEY=''" >> .env
+          echo "VERSION='1.15.0'" >> .env
+          echo "TRACKER_VERSION='10.0.0'" >> .env
+          echo "COMMIT_HASH='dev'" >> .env
           echo "{ \"account\": \"$CY_ACC\", \"password\": \"$CY_PASS\" }" >> cypress.env.json
+
+      # Install dependencies for Frontend
       - name: Setup packages
         run: |
           cd frontend
-          yarn
+          pnpm install
+
+      # Run unit tests for Frontend
       - name: Run unit tests
         run: |
           cd frontend
-          yarn test:ci
+          pnpm test:ci
+
+      # Upload coverage reports to Codecov
       - name: Upload coverage reports to Codecov
         uses: codecov/codecov-action@v3
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
           flags: ui
           name: ui
+
+      # Run Testing frontend with pnpm
       - name: Run testing frontend
         run: |
           cd tracker/tracker-testing-playground
-          yarn start &> testing.log &
+          pnpm start &> testing.log &
           echo "Started"
           npm i -g wait-on
           echo "Got wait on"
@@ -125,6 +148,8 @@ jobs:
           npx wait-on http://localhost:3000
           echo "Done"
         timeout-minutes: 4
+
+      # Run frontend with pnpm
       - name: Run Frontend
         run: |
           cd frontend
@@ -135,23 +160,22 @@ jobs:
           npx wait-on http://0.0.0.0:3333
           echo "Done"
         timeout-minutes: 4
+
+      # Run visual tests with pnpm
       - name: (Chrome) Run visual tests
         run: |
           cd frontend
-          yarn cy:test
-#        firefox have different viewport somehow
-#      - name: (Firefox) Run visual tests
-#        run: yarn cy:test-firefox
-#      - name: (Edge) Run visual tests
-#        run: yarn cy:test-edge
+          pnpm cy:test
         timeout-minutes: 5
+
+      # Upload Debug Info if tests fail
       - name: Upload Debug
         if: ${{ failure() }}
         uses: actions/upload-artifact@v3
         with:
-          name: 'Snapshots'
+          name: "Snapshots"
           path: |
             frontend/cypress/videos
             frontend/cypress/snapshots/replayer.cy.ts
             frontend/cypress/screenshots
-            frontend/cypress/snapshots/generalStability.cy.ts
+            frontend/cypress/snapshots/generalStability.cy.ts

.npmrc

@@ -0,0 +1,3 @@
+use-node-version=18.16.0
+link-workspace-packages=false
+save-workspace-protocol=rolling

frontend/.yarnrc.yml

@@ -1,9 +0,0 @@
-nodeLinker: node-modules
-compressionLevel: 0
-enableGlobalCache: true
-
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
-    spec: "@yarnpkg/plugin-typescript"
-
-yarnPath: .yarn/releases/yarn-3.2.1.cjs

frontend/Dockerfile

@@ -1,31 +1,42 @@
-from node:18-slim AS builder
-workdir /work
+FROM oven/bun:1.1.30-slim
+
+WORKDIR /work/frontend
+
+COPY ../pnpm-lock.yaml /work/
+
 COPY . .
+
 RUN cp .env.sample .env
-RUN yarn 
-RUN yarn build
 
-FROM nginx:alpine as cicd
-LABEL maintainer=Rajesh<rajesh@openreplay.com>
-COPY public /var/www/openreplay
-COPY nginx.conf /etc/nginx/conf.d/default.conf
+RUN npm install -g pnpm
 
+RUN pnpm install --filter . --frozen-lockfile --dir /work/frontend
+
+RUN bun run build
+
+FROM nginx:alpine AS cicd
+LABEL maintainer="Rajesh<rajesh@openreplay.com>"
+
+COPY --from=builder /work/frontend/public /var/www/openreplay
+
+COPY ./nginx.conf /etc/nginx/conf.d/default.conf
 
-# Default step in docker build
 FROM nginx:alpine
-LABEL maintainer=Rajesh<rajesh@openreplay.com>
+LABEL maintainer="Rajesh<rajesh@openreplay.com>"
 ARG GIT_SHA
 LABEL GIT_SHA=$GIT_SHA
-COPY --from=builder /work/public /var/www/openreplay
-COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+COPY --from=builder /var/www/openreplay /var/www/openreplay
+COPY ./nginx.conf /etc/nginx/conf.d/default.conf
 
 ENV GIT_SHA=$GIT_SHA
 
-EXPOSE 8080
 RUN chown -R nginx:nginx /var/cache/nginx && \
     chown -R nginx:nginx /var/log/nginx && \
     chown -R nginx:nginx /etc/nginx/conf.d && \
     touch /var/run/nginx.pid && \
     chown -R nginx:nginx /var/run/nginx.pid
 
+EXPOSE 8080
+
 USER nginx

frontend/app/components/shared/DatePicker/config.ts

@@ -0,0 +1,177 @@
+import { DateTime, Info } from 'luxon';
+
+const weekDayFormatMap = {
+  zh_CN: 'narrow',
+  zh_TW: 'narrow',
+};
+
+const weekDayLengthMap = {
+  en_US: 2,
+  en_GB: 2,
+};
+
+/**
+ * Normalizes part of a moment format string that should
+ * not be escaped to a luxon compatible format string.
+ *
+ * @param part string
+ * @returns string
+ */
+const normalizeFormatPart = (part: string): string =>
+  part
+    .replace(/Y/g, 'y')
+    .replace(/D/g, 'd')
+    .replace(/gg/g, 'kk')
+    .replace(/Q/g, 'q')
+    .replace(/([Ww])o/g, 'WW')
+    .replace(/A/g, 'a');
+
+/**
+ * Normalizes a moment compatible format string to a luxon compatible format string
+ *
+ * @param format string
+ * @returns string
+ */
+const normalizeFormat = (format: string): string =>
+  format
+    // moment escapes strings contained in brackets
+    .split(/[[\]]/)
+    .map((part, index) => {
+      const shouldEscape = index % 2 > 0;
+
+      return shouldEscape ? part : normalizeFormatPart(part);
+    })
+    // luxon escapes strings contained in single quotes
+    .join("'");
+
+/**
+ * Normalizes language tags used to luxon compatible
+ * language tags by replacing underscores with hyphen-minus.
+ *
+ * @param locale string
+ * @returns string
+ */
+const normalizeLocale = (locale: string): string => locale.replace(/_/g, '-');
+
+const generateConfig: GenerateConfig<DateTime> = {
+  // get
+  getNow: () => DateTime.local(),
+  getFixedDate: (string) => DateTime.fromFormat(string, 'yyyy-MM-dd'),
+  getEndDate: (date) => date.endOf('month'),
+  getWeekDay: (date) => date.weekday,
+  getYear: (date) => date.year,
+  getMonth: (date) => date.month - 1, // getMonth should return 0-11, luxon month returns 1-12
+  getDate: (date) => date.day,
+  getHour: (date) => date.hour,
+  getMinute: (date) => date.minute,
+  getSecond: (date) => date.second,
+  getMillisecond: (date) => date.millisecond,
+
+  // set
+  addYear: (date, diff) => date.plus({ year: diff }),
+  addMonth: (date, diff) => date.plus({ month: diff }),
+  addDate: (date, diff) => date.plus({ day: diff }),
+  setYear: (date, year) => date.set({ year }),
+  setMonth: (date, month) => date.set({ month: month + 1 }), // setMonth month argument is 0-11, luxon months are 1-12
+  setDate: (date, day) => date.set({ day }),
+  setHour: (date, hour) => date.set({ hour }),
+  setMinute: (date, minute) => date.set({ minute }),
+  setSecond: (date, second) => date.set({ second }),
+  setMillisecond: (date, milliseconds) => date.set({ millisecond: milliseconds }),
+
+  // Compare
+  isAfter: (date1, date2) => date1 > date2,
+  isValidate: (date) => date.isValid,
+
+  locale: {
+    getWeekFirstDate: (locale, date) => date.setLocale(normalizeLocale(locale)).startOf('week'),
+    getWeekFirstDay: (locale) =>
+      DateTime.local().setLocale(normalizeLocale(locale)).startOf('week').weekday,
+    getWeek: (locale, date) => date.setLocale(normalizeLocale(locale)).weekNumber,
+    getShortWeekDays: (locale) => {
+      const weekdays = Info.weekdays(weekDayFormatMap[locale] || 'short', {
+        locale: normalizeLocale(locale),
+      });
+
+      const shifted = weekdays.map((weekday) => weekday.slice(0, weekDayLengthMap[locale]));
+
+      // getShortWeekDays should return weekday labels starting from Sunday.
+      // luxon returns them starting from Monday, so we have to shift the results.
+      shifted.unshift(shifted.pop() as string);
+
+      return shifted;
+    },
+    getShortMonths: (locale) => Info.months('short', { locale: normalizeLocale(locale) }),
+    format: (locale, date, format) => {
+      if (!date || !date.isValid) {
+        return null;
+      }
+
+      return date.setLocale(normalizeLocale(locale)).toFormat(normalizeFormat(format));
+    },
+    parse: (locale, text, formats) => {
+      for (let i = 0; i < formats.length; i += 1) {
+        const normalizedFormat = normalizeFormat(formats[i]);
+
+        const date = DateTime.fromFormat(text, normalizedFormat, {
+          locale: normalizeLocale(locale),
+        });
+
+        if (date.isValid) {
+          return date;
+        }
+      }
+
+      return null;
+    },
+  },
+};
+
+export type GenerateConfig<DateType> = {
+  // Get
+  getWeekDay: (value: DateType) => number;
+  getMillisecond: (value: DateType) => number;
+  getSecond: (value: DateType) => number;
+  getMinute: (value: DateType) => number;
+  getHour: (value: DateType) => number;
+  getDate: (value: DateType) => number;
+  getMonth: (value: DateType) => number;
+  getYear: (value: DateType) => number;
+  getNow: () => DateType;
+  getFixedDate: (fixed: string) => DateType;
+  getEndDate: (value: DateType) => DateType;
+
+  // Set
+  addYear: (value: DateType, diff: number) => DateType;
+  addMonth: (value: DateType, diff: number) => DateType;
+  addDate: (value: DateType, diff: number) => DateType;
+  setYear: (value: DateType, year: number) => DateType;
+  setMonth: (value: DateType, month: number) => DateType;
+  setDate: (value: DateType, date: number) => DateType;
+  setHour: (value: DateType, hour: number) => DateType;
+  setMinute: (value: DateType, minute: number) => DateType;
+  setSecond: (value: DateType, second: number) => DateType;
+  setMillisecond: (value: DateType, millisecond: number) => DateType;
+
+  // Compare
+  isAfter: (date1: DateType, date2: DateType) => boolean;
+  isValidate: (date: DateType) => boolean;
+
+  locale: {
+    getWeekFirstDay: (locale: string) => number;
+    getWeekFirstDate: (locale: string, value: DateType) => DateType;
+    getWeek: (locale: string, value: DateType) => number;
+
+    format: (locale: string, date: DateType, format: string) => string;
+
+    /** Should only return validate date instance */
+    parse: (locale: string, text: string, formats: string[]) => DateType | null;
+
+    /** A proxy for getting locale with moment or other locale library */
+    getShortWeekDays?: (locale: string) => string[];
+    /** A proxy for getting locale with moment or other locale library */
+    getShortMonths?: (locale: string) => string[];
+  };
+};
+
+export default generateConfig;

frontend/app/components/shared/DatePicker/index.tsx

@@ -2,7 +2,7 @@
 import { DatePicker } from 'antd';
 import { PickerTimeProps } from 'antd/es/time-picker';
 import React from 'react';
-import luxonGenerateConfig from 'rc-picker/lib/generate/luxon';
+import luxonGenerateConfig from './config';
 
 const CustomPicker = DatePicker.generatePicker<DateTime>(luxonGenerateConfig);
 

frontend/package.json

@@ -4,9 +4,9 @@
   "license": "Apache-2.0",
   "scripts": {
     "start": "webpack serve",
-    "build": "yarn gen:icons && yarn gen:colors && rm -rf public && webpack",
+    "build": "pnpm gen:icons && pnpm gen:colors && rm -rf public && webpack",
     "upload:minio": "node ./scripts/upload-minio.js",
-    "deploy:minio": "yarn build:minio && yarn upload:minio",
+    "deploy:minio": "pnpm build:minio && pnpm upload:minio",
     "lint": "eslint --fix app; exit 0",
     "tsc": "tsc --noEmit --w --incremental false",
     "gen:constants": "node ./scripts/constants.js",
@@ -14,7 +14,7 @@
     "gen:colors": "node ./scripts/colors.js",
     "storybook": "start-storybook -p 6006",
     "flow": "flow",
-    "gen:static": "yarn gen:icons && yarn gen:colors",
+    "gen:static": "pnpm gen:icons && pnpm gen:colors",
     "build-storybook": "build-storybook",
     "test:ci": "jest --maxWorkers=1 --no-cache --coverage",
     "test": "jest --watch",
@@ -59,6 +59,7 @@
     "prismjs": "^1.29.0",
     "rc-time-picker": "^3.7.3",
     "react": "^18.2.0",
+    "react-calendar": "^5.0.0",
     "react-confirm": "^0.3.0-7",
     "react-daterange-picker": "^2.0.1",
     "react-dnd": "^16.0.1",
@@ -160,6 +161,5 @@
   },
   "engines": {
     "node": ">=10.14.1"
-  },
-  "packageManager": "yarn@3.2.1"
+  }
 }

networkProxy/package-lock.json

@@ -1,29 +0,0 @@
-{
-  "name": "network-proxy",
-  "version": "1.0.0",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "name": "network-proxy",
-      "version": "1.0.0",
-      "license": "ISC",
-      "devDependencies": {
-        "typescript": "^5.6.2"
-      }
-    },
-    "node_modules/typescript": {
-      "version": "5.6.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.2.tgz",
-      "integrity": "sha512-NW8ByodCSNCwZeghjN3o+JX5OFH0Ojg6sadjEKY4huZ52TqbJTJnDo5+Tw98lSy63NZvi4n+ez5m2u5d4PkZyw==",
-      "dev": true,
-      "bin": {
-        "tsc": "bin/tsc",
-        "tsserver": "bin/tsserver"
-      },
-      "engines": {
-        "node": ">=14.17"
-      }
-    }
-  }
-}

package.json

@@ -0,0 +1,10 @@
+{
+  "name": "or-js-monorepo",
+  "version": "1.0.0",
+  "description": "entry file for all things javascript related in openreplay",
+  "scripts": {
+    "start-ui": "pnpm --filter openreplay start"
+  },
+  "keywords": [],
+  "author": "Nick <nick.delirium@pm.me>"
+}

pnpm-workspace.yaml

@@ -0,0 +1,5 @@
+packages:
+  - frontend
+  - 'tracker/tracker/*'
+  - 'tracker/tracker-assist/*'
+  - networkProxy

tracker/tracker-assist/package.json

@@ -22,7 +22,6 @@
     "replace-pkg-version": "sh pkgver.sh",
     "replace-req-version": "replace-in-files lib/* cjs/* --string='REQUIRED_TRACKER_VERSION' --replacement='13.0.0'",
     "prepublishOnly": "bun run test && bun run build",
-    "lint-front": "lint-staged",
     "test": "jest --coverage=false",
     "test:ci": "jest --coverage=true",
     "postversion": "bun run build"
@@ -45,15 +44,9 @@
     "eslint-plugin-prettier": "^4.2.1",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
-    "lint-staged": "^13.0.3",
     "prettier": "^2.7.1",
     "replace-in-files-cli": "^1.0.0",
     "ts-jest": "^29.0.3",
     "typescript": "^4.6.0-dev.20211126"
-  },
-  "lint-staged": {
-    "*.{js,mjs,cjs,jsx,ts,tsx}": [
-      "eslint --fix --quiet"
-    ]
   }
 }

tracker/tracker/package.json

@@ -21,7 +21,6 @@
     "rollup": "rollup --config rollup.config.js",
     "compile": "node --experimental-modules --experimental-json-modules scripts/compile.cjs",
     "build": "bun run clean && bun run tscRun && bun run rollup && bun run compile",
-    "lint-front": "lint-staged",
     "test": "jest --coverage=false",
     "test:ci": "jest --coverage=true",
     "postversion": "bun run build",
@@ -39,7 +38,6 @@
     "eslint-plugin-prettier": "^5.0.1",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
-    "lint-staged": "^13.0.3",
     "prettier": "^3.0.3",
     "replace-in-files": "^2.0.3",
     "rollup": "^4.1.4",
@@ -57,13 +55,5 @@
   },
   "engines": {
     "node": ">=14.0"
-  },
-  "lint-staged": {
-    "*.{js,mjs,jsx,ts,tsx}": [
-      "eslint --fix --quiet"
-    ],
-    "*.{json,md,html,js,jsx,ts,tsx}": [
-      "prettier --write"
-    ]
   }
 }

tracker/tracker/src/main/app/canvas.ts

@@ -20,7 +20,7 @@ interface Options {
 
 class CanvasRecorder {
   private snapshots: Record<number, CanvasSnapshot> = {}
-  private readonly intervals: NodeJS.Timeout[] = []
+  private readonly intervals: ReturnType<typeof setInterval>[] = []
   private readonly interval: number
   private readonly fileExt: 'webp' | 'png' | 'jpeg' | 'avif'
 

tracker/tracker/src/main/modules/mouse.ts

@@ -136,7 +136,7 @@ export default function (app: App, options?: MouseHandlerOptions): void {
   let direction = 0
   let directionChangeCount = 0
   let distance = 0
-  let checkIntervalId: NodeJS.Timer
+  let checkIntervalId: ReturnType<typeof setInterval> | null = null
   const shakeThreshold = 0.008
   const shakeCheckInterval = 225
 

tracker/tracker/src/webworker/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "extends": "../../tsconfig-base.json",
   "compilerOptions": {
-    "lib": ["es6"]
+    "lib": ["es2016", "webworker"]
   },
   "references": [{ "path": "../common" }]
 }

yarn.lock

@@ -1,4 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-