chore: fix lint and exports

src/generateReport.ts

@@ -16,8 +16,8 @@ import {
 import type {
   ActionWithStateMetadata,
   ReportArguments,
-  TimingSpan,
   StageDescription,
+  TimingSpan,
 } from './types'
 import { getCurrentBrowserSupportForNonResponsiveStateDetection } from './utilities'
 

src/main.ts

@@ -37,12 +37,12 @@ export {
 } from './lazyVisualizer'
 
 // operation tracking (v2)
-export * from './v2/constants'
-export * from './v2/defaultEventProcessor'
-export * from './v2/element'
-export * from './v2/getCommonUrlForTracing'
-export * from './v2/hooks'
-export * from './v2/operation'
+// export * from './v2/constants'
+// export * from './v2/defaultEventProcessor'
+// export * from './v2/element'
+// export * from './v2/getCommonUrlForTracing'
+// export * from './v2/hooks'
+// export * from './v2/operation'
 // export type * from './v2/types'
 
 // v3

src/stories/Visualizer/Viz.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { useScreenSize } from '@visx/responsive'
 import OperationVisualizer, {
   type OperationVisualizerProps,
@@ -18,4 +19,5 @@ const meta: Meta<{}> = {
   component: Component,
 }
 
+// eslint-disable-next-line import/no-default-export
 export default meta

src/stories/mockComponentsv2/App.stories.tsx

@@ -6,6 +6,7 @@ const meta: Meta<typeof App> = {
   component: App,
 }
 
+// eslint-disable-next-line import/no-default-export
 export default meta
 type Story = StoryObj<typeof App>
 

src/stories/mockComponentsv2/App.tsx

@@ -29,6 +29,7 @@ export const App: React.FC = () => {
 
   const handleTicketClick = (id: number) => {
     const onTracked = (operation: Operation) =>
+      // eslint-disable-next-line no-console
       void console.log(
         `Ticket ${id}: ${operation.state}`,
         operation,

src/stories/mockComponentsv2/Ticket.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { Cell, Row } from '@zendeskgarden/react-tables'
 
 interface TicketProps {

src/stories/mockComponentsv2/TicketList.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import React from 'react'
 import {
   Body,
@@ -7,9 +8,9 @@ import {
   HeaderRow,
   Table,
 } from '@zendeskgarden/react-tables'
-import { Ticket } from './Ticket'
-import type { Ticket as TicketType } from './mockTickets'
 import { XL } from '@zendeskgarden/react-typography'
+import type { Ticket as TicketType } from './mockTickets'
+import { Ticket } from './Ticket'
 
 interface TicketListProps {
   tickets: TicketType[]

src/stories/mockComponentsv2/TicketView.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import React, { useEffect } from 'react'
 import styled from 'styled-components'
 import { Timeline } from '@zendeskgarden/react-accordions'
@@ -7,7 +8,7 @@ import { Well } from '@zendeskgarden/react-notifications'
 import { DEFAULT_THEME, PALETTE } from '@zendeskgarden/react-theming'
 import { Paragraph, Span, XXL } from '@zendeskgarden/react-typography'
 import { ReactComponent as UserIcon } from '@zendeskgarden/svg-icons/src/16/user-solo-stroke.svg'
-import { VISIBLE_STATE } from '../../main'
+import { VISIBLE_STATE } from '../../v2/constants'
 import { TimingComponent } from '../../v2/element'
 import {
   useCaptureRenderBeaconTask,
@@ -45,8 +46,8 @@ export const TicketView: React.FC<TicketViewProps> = ({
       track: [
         { match: { attributes: { ticketId } } },
         {
-          //debounce on any event that has the same ticket id
-          match: { attributes: { ticketId, visibleState: 'complete' } }, //required to end the operation, ticket fully loaded!
+          // debounce on any event that has the same ticket id
+          match: { attributes: { ticketId, visibleState: 'complete' } }, // required to end the operation, ticket fully loaded!
           requiredToEnd: true,
         },
       ],

src/stories/mockComponentsv2/globals.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-default-export */
 declare module '*.svg' {
   const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>
   const content: string

src/stories/mockComponentsv2/mockTickets.ts

@@ -1,10 +1,15 @@
-export type Messages = Array<{
+export type Messages = {
   message: string
   humanReadableTimestamp: string
   author: string
   authorType: 'agent' | 'customer'
-}>
-export type Ticket = { id: number; subject: string; messages: Messages }
+}[]
+
+export interface Ticket {
+  id: number
+  subject: string
+  messages: Messages
+}
 
 export const mockTickets: Ticket[] = [
   {

src/stories/mockComponentsv2/operationManager.tsx

@@ -11,6 +11,7 @@ export const operationManager = new OperationManager({
   // },
   preprocessEvent(event) {
     const processedEvent = defaultEventProcessor(event)
+    // eslint-disable-next-line no-console
     console.log('event', processedEvent)
     return processedEvent
   },

src/stories/mockComponentsv3/App.stories.tsx

@@ -6,6 +6,7 @@ const meta: Meta<typeof App> = {
   component: App,
 }
 
+// eslint-disable-next-line import/no-default-export
 export default meta
 type Story = StoryObj<typeof App>
 

src/stories/mockComponentsv3/App.tsx

@@ -18,7 +18,6 @@ import { ReactComponent as ClearIcon } from '@zendeskgarden/svg-icons/src/26/arr
 import { ReactComponent as ProductIcon } from '@zendeskgarden/svg-icons/src/26/garden.svg'
 import { ReactComponent as HomeIcon } from '@zendeskgarden/svg-icons/src/26/home-fill.svg'
 import { ReactComponent as ZendeskIcon } from '@zendeskgarden/svg-icons/src/26/zendesk.svg'
-import { observePerformanceWithTraceManager } from '../../v3/observePerformanceWithTraceManager'
 // CYN: NEED UPDATE
 import { mockTickets } from './mockTickets'
 import { TicketList } from './TicketList'

src/stories/mockComponentsv3/globals.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-default-export */
 declare module '*.svg' {
   const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>
   const content: string

src/stories/mockComponentsv3/mockTickets.ts

@@ -1,10 +1,14 @@
-export type Messages = Array<{
+export type Messages = {
   message: string
   humanReadableTimestamp: string
   author: string
   authorType: 'agent' | 'customer'
-}>
-export type Ticket = { id: number; subject: string; messages: Messages }
+}[]
+export interface Ticket {
+  id: number
+  subject: string
+  messages: Messages
+}
 
 export const mockTickets: Ticket[] = [
   {

src/stories/mockComponentsv3/simulateLongTasks.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 export function triggerLongTasks({
   minTime,
   maxTime,

src/stories/mockComponentsv3/traceManager.tsx

@@ -9,8 +9,10 @@ export interface TicketIdScope {
 
 export const traceManager = new TraceManager<TicketIdScope>({
   reportFn: (trace) => {
+    // eslint-disable-next-line no-console
     console.log('# on End', trace, trace.entries, trace.duration)
   },
+  // eslint-disable-next-line no-magic-numbers
   generateId: () => Math.random().toString(36).slice(2),
 })
 

src/v2/visualizer/components/FileUploadButton.tsx

@@ -46,4 +46,5 @@ const FileUploadButton = ({ name, id, onChange }: FileUploadButtonProps) => (
   </>
 )
 
+// eslint-disable-next-line import/no-default-export
 export default FileUploadButton

src/v2/visualizer/components/OperationVisualization.tsx

@@ -228,6 +228,7 @@ const MultiSelect: React.FC<MultiSelectProps> = ({ state, setState }) => {
   )
 
   return (
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
     <LegendDemo title="">
       <GardenGrid.Row justifyContent="center">
         <GardenGrid.Col sm={13}>
@@ -555,4 +556,5 @@ const OperationVisualization: React.FC<OperationVisualizationProps> = ({
   )
 }
 
+// eslint-disable-next-line import/no-default-export
 export default OperationVisualization

src/v3/firstCPUIdle.test.ts

@@ -1,6 +1,12 @@
-import './test/asciiTimelineSerializer'
+import './testUtility/asciiTimelineSerializer'
 import { createCPUIdleProcessor } from './firstCPUIdle'
-import { Check, FMP, Idle, LongTask, makeEntries } from './test/makeTimeline'
+import {
+  Check,
+  FMP,
+  Idle,
+  LongTask,
+  makeEntries,
+} from './testUtility/makeTimeline'
 
 function getFirstCPUIdleEntry({
   fmpTime,

src/v3/getCommonUrlForTracing.ts

@@ -0,0 +1,97 @@
+const COMMON_EXTENSIONS = [
+  '.html',
+  '.js',
+  '.css',
+  '.png',
+  '.jpg',
+  '.jpeg',
+  '.gif',
+  '.svg',
+  '.webp',
+  '.woff',
+  '.woff2',
+  '.ttf',
+  '.eot',
+  '.otf',
+  '.ico',
+]
+
+export function getCommonUrlForTracing(
+  url: string,
+  commonExtensions = COMMON_EXTENSIONS,
+): {
+  commonUrl: string
+  query: Record<string, string | string[]>
+  hash: string
+} {
+  let commonUrl = url
+  let hash = ''
+  const hashIndex = url.indexOf('#')
+  if (hashIndex >= 0) {
+    commonUrl = url.slice(0, hashIndex)
+    hash = url.slice(hashIndex)
+  }
+  // Extract query string into a separate variable
+  const queryStringIndex = url.indexOf('?')
+  const query: Record<string, string | string[]> = {}
+  if (queryStringIndex >= 0) {
+    // Split the URL to get the query string part
+    commonUrl = url.slice(0, queryStringIndex)
+    const queryString = url.slice(queryStringIndex + 1)
+    // Parse query string into an object
+    queryString
+      .split('&')
+      .map((param) => param.split('='))
+      .forEach(([key, value]) => {
+        if (!key) return
+        // decode URI components and handle the case for array parameters
+        const decodedKey = decodeURIComponent(key)
+        const decodedValue = value ? decodeURIComponent(value) : ''
+
+        // Check if the key already exists
+        const currentValue = query[decodedKey]
+        if (currentValue) {
+          // If it does and it's an array, we push the new value to it
+          // If it's not an array, we convert it to an array and then add the new value
+          query[decodedKey] = Array.isArray(currentValue)
+            ? [...currentValue, decodedValue]
+            : [currentValue, decodedValue]
+        } else {
+          // If it doesn't exist, we simply add the key-value pair
+          query[decodedKey] = decodedValue
+        }
+      })
+  }
+
+  // if the URL ends with a common extension, replace file name with $file:
+  const urlParts = commonUrl.split('/')
+  const lastPart = urlParts.at(-1)!
+  const extensionIndex = lastPart.lastIndexOf('.')
+  const extension =
+    extensionIndex >= 0 ? lastPart.slice(extensionIndex) : undefined
+  if (extension && commonExtensions.includes(extension)) {
+    urlParts[urlParts.length - 1] = '$file'
+    commonUrl = urlParts.join('/')
+  }
+
+  // replace UUIDs:
+  commonUrl = commonUrl.replace(
+    // eslint-disable-next-line unicorn/better-regex
+    /[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}/g,
+    '$uuid',
+  )
+  // replace 32-character or longer hex strings:
+  commonUrl = commonUrl.replace(
+    // eslint-disable-next-line unicorn/better-regex
+    /[0-9a-f]{32,}/g,
+    '$hex',
+  )
+  // Replace numeric parts of the ID with $id
+  commonUrl = commonUrl.replace(/\d{2,}/g, '$d')
+
+  return {
+    commonUrl,
+    query,
+    hash,
+  }
+}

src/v3/getSpanFromPerformanceEntry.ts

@@ -1,5 +1,5 @@
-import { getCommonUrlForTracing } from '../main'
 import { ensureTimestamp } from './ensureTimestamp'
+import { getCommonUrlForTracing } from './getCommonUrlForTracing'
 import {
   Attributes,
   InitiatorType,

src/v3/test/asciiTimelineSerializer.ts → src/v3/testUtility/asciiTimelineSerializer.ts

@@ -18,4 +18,5 @@ const asciiTimelineSerializer = {
 
 expect.addSnapshotSerializer(asciiTimelineSerializer)
 
+// eslint-disable-next-line import/no-default-export
 export default asciiTimelineSerializer

src/v3/traceManager.test.ts

@@ -1,14 +1,14 @@
-import './test/asciiTimelineSerializer'
+import './testUtility/asciiTimelineSerializer'
 import * as matchSpan from './matchSpan'
-import { shouldCompleteAndHaveInteractiveTime } from './test/fixtures/shouldCompleteAndHaveInteractiveTime'
-import { shouldNotEndWithInteractiveTimeout } from './test/fixtures/shouldNotEndWithInteractiveTimeout'
+import { shouldCompleteAndHaveInteractiveTime } from './testUtility/fixtures/shouldCompleteAndHaveInteractiveTime'
+import { shouldNotEndWithInteractiveTimeout } from './testUtility/fixtures/shouldNotEndWithInteractiveTimeout'
 import {
   type TicketIdScope,
   ticketActivationDefinition,
   UserIdScope,
-} from './test/fixtures/ticket.activation'
-import { Check, getSpansFromTimeline, Render } from './test/makeTimeline'
-import { processSpans } from './test/processSpans'
+} from './testUtility/fixtures/ticket.activation'
+import { Check, getSpansFromTimeline, Render } from './testUtility/makeTimeline'
+import { processSpans } from './testUtility/processSpans'
 import { TraceManager } from './traceManager'
 import type { ReportFn } from './types'
 

src/v3/traceManagerWithCaptureInteractive.test.ts

@@ -1,16 +1,18 @@
-import './test/asciiTimelineSerializer'
-import { DEFAULT_CAPTURE_INTERACTIVE_TIME } from '../main'
-import { DEFAULT_TIMEOUT_DURATION } from './constants'
+import './testUtility/asciiTimelineSerializer'
+import {
+  DEFAULT_INTERACTIVE_TIMEOUT_DURATION,
+  DEFAULT_TIMEOUT_DURATION,
+} from './constants'
 import { createQuietWindowDurationCalculator } from './getDynamicQuietWindowDuration'
 import * as matchSpan from './matchSpan'
-import { type TicketIdScope } from './test/fixtures/ticket.activation'
+import { type TicketIdScope } from './testUtility/fixtures/ticket.activation'
 import {
   Check,
   getSpansFromTimeline,
   LongTask,
   Render,
-} from './test/makeTimeline'
-import { processSpans } from './test/processSpans'
+} from './testUtility/makeTimeline'
+import { processSpans } from './testUtility/processSpans'
 import { TraceManager } from './traceManager'
 import type { ReportFn } from './types'
 
@@ -70,8 +72,8 @@ describe('TraceManager with Capture Interactivity', () => {
     // prettier-ignore
     const { spans } = getSpansFromTimeline<TicketIdScope>`
       Events: ${Render('start', 0)}-----${Render('end', 0)}-----${LongTask(50)}------<===5s===>---------${Check}
-      Time:   ${0}                      ${2_000}                ${2_001}                                ${2_001 + DEFAULT_CAPTURE_INTERACTIVE_TIME}
-      `
+      Time:   ${0}                      ${2_000}                ${2_001}                                ${2_001 + DEFAULT_INTERACTIVE_TIMEOUT_DURATION}
+    `
     processSpans(spans, traceManager)
     expect(reportFn).toHaveBeenCalled()